html,body{margin:0;padding:0px;font-family: 'Roboto', sans-serif;width:100%;position:relative;}
posi

header{width:100%;height:15%;background:pink;}

.container-logo{
    display:flex;
    justify-content:center;
    flex-direction:column;
}
.container-logo img{/*width:500px;*/height:60px;display:block;margin:0 auto;padding-top:60px;}

header h1{
    text-align:center;
    font-size:0.7em;
    letter-spacing:1.25px;
    font-weight:normal;
}

.container{width:100%;padding-bottom:100px;}

.container-title{text-align:center;width:90%;margin:0 auto;}

.container h2, .container h3{color:#ef8c0a;letter-spacing:1.25px;text-transform:uppercase;margin:0;}
.container h2{padding:30px 0px 10px 0px;font-weight:bold;font-size:2vw;}
.container h3{padding:0px 0px 30px 0px;font-weight:normal;font-size:1.25vw;}



.container-product-hygi{
    margin:0px;
    padding:0px;
    display:flex;
    justify-content:center;
    justify-content:space-around;
    list-style-type:none;
    padding:0px;flex-wrap: wrap;
    width:80%;
    margin:0 auto;
}

.container-product-hygi li{
    width:100%;
    margin-bottom:30px;
    display:flex;
}

.container-product-hygi li figure{width:60%;}
.container-product-hygi li figure img{width:100%;}

.container-product-hygi li .product-description{width:40%;}


.container-product-hygi li .product-description h4{width:50%;font-size:30px;}


.rdv-salon{width:100%;text-align:center;background:#ef8c0a;}
.rdv-salon h4{font-size:30px;margin:0 auto;color:#FFF;padding-top: 30px;}
.rdv-salon h2{font-size:34px;color:#FFF;padding-top: 20px;padding-bottom: 30px;}
h5{color:#ccc;text-align:center;}

.container-products{
    margin:0px;
    padding:0px;
    display:flex;
    justify-content:center;
    justify-content:space-around;
    list-style-type:none;
    padding:0px;flex-wrap: wrap;
    width:80%;
    margin:0 auto;
}

.container-products li{
    width:25%;
    margin-bottom:30px;
}

.container-products li figure{overflow:hidden;margin:0;max-height:400px;}
.container-products li figure img{width:100%;margin:0px;padding:0px;display:block;}
.container-products li {color:#6f625c;font-size:14px;}
.container-products li h4{font-size:18px;min-height:40px;}
.container-products li .product-description{list-style-type:none;margin:0;padding:0;width:94%;padding-left:10px;border-left:1px dotted #6f625c;}
.container-products li .product-description li{width:100%;font-size:12px;margin-bottom:12px;}



/* Page Contact */

.container-contact{
    padding:40px 0px 80px 0px;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
}
.container-contact .bouton-envoyer{
    background:#ef8c0a;
    text-decoration:none;
    padding:20px 40px;
    color:#FFF;
    text-transform:uppercase;
    font-weight:bold;
    letter-spacing:1.25px;
    border-radius:100px;
    cursor:pointer;
}

.container-contact .bouton-envoyer:hover{
    background:#ea771a;
}

footer{
    width:100%;
    height:5%;
    display:flex;justify-content:center;
    position:fixed;
    bottom:0;
    background:#faf7f7;
}

footer .mentions{height:100%;margin:0 auto;color:#CCC;font-size:0.75em;display:flex;align-items:center;}
footer .mentions a{text-decoration:none;color:#CCC;}
footer .mentions a:hover{text-decoration:underline;color:#b1b1b1;}


.container-mentions{color:#6f625c;padding:100px;width:50%;margin:0 auto;text-align:justify;font-size:14px;line-height:21px;}
.container-mentions h1{font-size:21px;padding:0px 0px 40px 0px;}


.form-content{width:30%;margin:0 auto;display:flex;justify-content:center;align-items:center;flex-direction:column;padding-bottom;}
.form-content h1{color:#ef8c0a;letter-spacing:1.25px;margin:0;font-size:1.25em;padding:40px 0px 30px 0px;}

.form-content p{width:100%;margin:10px 0px;text-align:center}
.form-content label{width:100%;margin-bottom:10px;display:block;padding-left:5px;color:#bbb;font-size:14px;text-align:left;}
.form-content input, .form-content textarea{
    width:95%;
    padding: 2% 2%;
    border:1px solid #ddd;
    margin: 0 auto;
    display:block;
    border-radius:5px;
    font-size:16px;
}

.form-content textarea{resize:none;height:100px;font-family: 'Roboto', sans-serif;}

.form-content .btn_envoyer_form{
    background:#ef8c0a;
    text-decoration:none;
    padding:20px 40px;
    color:#FFF;
    text-transform:uppercase;
    font-weight:bold;
    letter-spacing:1.25px;
    border-radius:100px;
    border:none;
    width:auto;
    margin-top:30px;
    cursor:pointer;
}

.btn_envoyer_form:hover{
    background:#ea771a;
}

button.g-recaptcha{
    background:#f39221;
    color:#FFF;
    padding:15px 30px;
    border:0px;
    font-size:16px;
    text-transform:uppercase;
    border-radius:100px;
    font-weight: bold;
    margin-bottom:30px;
    letter-spacing:1.25px;
    cursor:pointer;
}

button.g-recaptcha:hover{background-color:#e35a28;}

.envoi-ok{width:100%;text-align:center;background:#cfdfc3;color:#789376;padding:15px 30px;margin-top:20px;}
.envoi-no{width:100%;text-align:center;background:#eaa0a6;color:#b2696b;padding:15px 30px;margin-top:20px;}



@media screen and (min-width: 1025px) and (max-width: 1260px) {
    
    .container-products li figure{max-height:300px;}
    
    .form-content{width:40%;}
}


@media screen and (min-width: 600px) and (max-width: 1024px) {
  
    .container-products li {
        width: 40%;
    }
    
    .container-mentions{width:70%;}
    
    .form-content{width:70%;}
    
}

@media screen and (max-width: 599px) {
  
    .container h2{padding:40px 0px 10px 0px;font-weight:bold;font-size:2em;}
    .container h3{padding:0px 0px 40px 0px;font-weight:normal;font-size:1em;}
    

    .container-product-hygi li {flex-direction:column;}
    .container-product-hygi li figure{width:100%;margin:0 auto;}
    .container-product-hygi li figure img{width:100%;}

    .container-product-hygi li .product-description{width:100%;padding:0px;}
    
    
    .container-products li {
        width: 80%;
    }
    
    .container-mentions{width:70%;}
    
    .form-content{width:84%;}
}