.header-banner {

    display: block;

    width: 100%;

    height: 500px;

    background: #333 no-repeat center url("../img/full-width/d/background-accueil.jpeg");

    background-size: cover;

}





.header-banner h1 {

    position: absolute;

    top: 40%;

    left: 0;

    right: 0;

    text-transform: uppercase;

    text-align: center;

    color: white;

    min-height: 0px;

    min-width: 0px;

    border-width: 0px;

    margin: 0;

    padding: 0px;

    letter-spacing: 0px;

    font-size: 25px;

    line-height: 40px;

    font-weight: 400;

    opacity: 0;

    transition: 2s cubic-bezier(0, 1, 0.5, 1);

}



.header-banner h1.appear {

    opacity: 1;

}



.header-banner small {

    display: block;

    color: white;

    padding: 10px;

    z-index: 5;

    font-size: 18px;

    transition: all 0s ease 0s;

    min-height: 0px;

    min-width: 0px;

    line-height: 30px;

    border-width: 0px;

    margin: 20px 0px 10px;

    letter-spacing: 0px;

    font-weight: 300;

}



.header-banner .container {

    position: relative;

    height: 100%;

}



@media (min-width: 480px) {

    .header-banner h1 {

        font-size: 39px;

        line-height: 45px;

        font-weight: 300;

    }



    .header-banner small {

        font-size: 18px;

    }

}



@media (min-width: 768px) {

    .header-banner h1 {

        font-size: 54px;

        line-height: 59px;

        font-weight: 300;

    }



    .header-banner small {

        font-size: 28px;

    }

}



@media (min-width: 768px) {

    .header-banner {

        height: 700px;

    }

}