@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap');

*{
padding:0px;
border:0px;
margin:0px;
}

html{
width:100%;
}

.main_width{
max-width:1400px;
margin:auto;
}


body{
font-family: 'Roboto', sans-serif;
font-weight:300;
width:100%;
}


/* *********************** COMMON *********************** */

p{
color:#003c72;
line-height:27px;
font-size:16px;
margin-bottom:13px;
}

h1{
color:white;
text-transform: uppercase;
font-size: 22px;
font-weight: 700;
padding-bottom:12px;
}


.bg_h2{
width: 291px;
height: 196px;
background-image: url('images/bg_h2.png');
background-repeat: no-repeat;
padding-top: 79px;
padding-left: 46px;
padding-right: 30px;
}

h2{
display:inline-block;
vertical-align:top;
text-transform: uppercase;
font-size: 59px;
line-height:57px;
font-weight:700;
line-height: 64px;
color:white;
}



h3{
text-transform: uppercase;
font-size: 30px;
font-weight: 700;
margin-bottom: 21px;
margin-top: 29px;
}

h4{
display:inline-block;
vertical-align:top;
text-transform: uppercase;
font-size: 30px;
font-weight: 700;
background-color:#7ec7b7;
padding:5px 20px;
color:white;
}





a.button{
display: inline-block;
text-transform: uppercase;
color: #003541;
padding: 11px 27px;
margin:0px 10px;
transition: all 0.5s ease-in-out;
font-size: 17px;
text-decoration:none;
transition:all 0.3s;
border:1px solid #003541;

}

a.button:hover{
padding: 11px 37px;
margin:0px 0px;
}

a{
color:inherit;
text-decoration:underline;
transition: all 0.2s ease-in-out;
}

p a:hover{
background-color:#f58a53;
}

#wrapper li{
list-style-type:none;
font-size:13px;
line-height:19px;
padding-left:30px;
padding-bottom:8px;
background-image: url('images/bg_li.png');
background-repeat: no-repeat;
background-position: 9px 8px;

}

.clear{
width:100%;
clear:both;
}

.hide{
display:none;
}





/* *********************** BANNER / MENU *********************** */
#banner{
width:100%;
height:80px;
color:white;
background-color:#004148;
font-size:0px;
text-align:center;
}


#banner .texte{
display:inline-block;
vertical-align:top;
width:49%;
text-align:left;
}

#banner .texte p.nom,
#banner .texte p.adresse{
display:inline-block;
vertical-align:middle;
margin-right:30px;
margin-bottom:0px;
}

#banner .texte p.nom a,
#banner .texte p.adresse a{
font-size:13px;
color:white;
letter-spacing:1px;
text-transform:uppercase;
text-decoration:none;
line-height:80px;
opacity:0.65;
}

#banner .texte p.nom a:hover,
#banner .texte p.adresse a:hover{
opacity:1;	
background:none;
}

#banner .social{
display:inline-block;
vertical-align:top;
width:49%;
text-align:right;
}

#banner .social a{
font-size:14px;
opacity:0.65;
line-height:80px;	
}

#banner .social a img{
display:inline-block;
vertical-align:middle;
margin-right:14px;
}

#banner .social a:hover{
opacity:1;	
}

/* *********************** PAGES *********************** */


/* ***** HOME ***** */
#home .slider{
width:100%;
height:525px;
background-image:url('images/optique-entrevue-charlotte-halleux-henri-chapelle.jpg');
background-repeat:no-repeat;
background-size:cover;
background-color:#cccccc;
background-position:center;
}

/* --- C1 intro --- */

#home .c1{
background-color:#004148;
padding-top:50px;
padding-bottom:50px;
text-align:center;
}

#home .c1 .left .lentilles a.button{
background-color:#f58a53!important;
border:1px solid #f58a53;
margin-bottom:30px;
font-weight: 600;
margin-top:30px;

}

#home .c1 .left{
width:58%;
margin-right:5%;
display:inline-block;
vertical-align:top;
border-left:3px solid #f58a53;
padding-left:1%;
text-align:left;
}

#home .c1 a.button{
color:white!important;
border:1px solid white;
margin-top:30px;
margin-bottom:30px;
}


#home .c1 .right{
width:35%;
display:inline-block;
vertical-align:top;
text-align:left;
}

#home .c1 p{
color:white;
}

#home .c1 p.adresse{
text-transform:uppercase;
font-size:14px;
}

#home .c1 p.tel{
text-transform:uppercase;
font-size:16px;
color:#f58a53;
font-weight:700;
margin-bottom: 0px;
line-height: 21px;
}

#home .c1 p.email{
margin-top:20px;
margin-bottom:20px;	
}

#home .c1 p.titre{
text-transform:uppercase;
text-decoration:underline;
}

#home .c1 p.heures span.days{
text-transform:uppercase;
display:inline-block;
width:83px;
margin-bottom:0px;
font-size:15px;
}

#home .c1 p.heures span.details{
text-transform:uppercase;
font-size:14px;
color:#f58a53;
position: relative;
top: 0px;
left: 17px;
}

#home .c1 p.tva{
font-size:13px;
}

/* --- C1a horaire --- */
#home .c1a{
padding-top:65px;
text-align:center;
max-width: 100%;
}

#home .c1a img{
width:500px;
}

/* --- C2 examen de vue --- */

#home .c2{
padding-top:75px;
text-align:center;
}


#home .c2 .left{
width:27%;
margin-right:5%;
display:inline-block;
vertical-align:top;
text-align:left;
}

#home .c2 .right{
width:60%;
display:inline-block;
vertical-align:top;
text-align:left;
margin-top: 50px;
margin-bottom: 50px;
}

#home .c2 .right p{
font-size:20px;	
}

#home .c2 .right p.important{
color:#f58a53;
font-size:29px;
font-weight:700;
text-transform:uppercase;
padding-top:20px;
padding-bottom:20px;
}

#home .c2 .right a.button{
margin-top:30px;
margin-bottom:30px;
}

#home .c2 .photo{
border-radius:11px;
position:relative;
z-index:150;
}


/* --- C3 adaptation lentilles --- */

#home .c3{
padding-top:50px;
padding-bottom:50px;
text-align:center;
background-color:#7ec7b7;
position:relative;
top:-50px;
z-index:100;
padding-top:100px;
padding-bottom:100px;
}


#home .c3 .left{
width:60%;
margin-right:5%;
display:inline-block;
vertical-align:top;
text-align:left;
}

#home .c3 .right{
width:27%;
display:inline-block;
vertical-align:top;
text-align:left;
margin-top: 50px;
margin-bottom: 50px;
}

#home .c3 h3{
color:white;	
}

#home .c3 p{
font-size:20px;	
color:white;
}

#home .c3 p.important{
color:#f58a53;
font-size:29px;
font-weight:700;
text-transform:uppercase;
padding-top:20px;
padding-bottom:20px;
}

#home .c3 a.button{
margin-top:30px;
margin-bottom:30px;
color:white!important;
border:1px solid white!important;
}

#home .c3 h2{
font-size:49px;	
line-height:54px;
}


/* --- C4 photo + logo --- */
#home .c4{
text-align:center;
}

#home .c4 .photo{
border-radius:11px;
position:relative;
z-index:150;
top:-100px;
display:block;
margin:auto;
}

#home .c4 .logo{
display:block;
width:522px;	
margin:auto;
}



/* --- C5 Conseils de pro --- */

#home .c5{
padding-top:75px;
text-align:center;
}


#home .c5 .left{
width:27%;
margin-right:5%;
display:inline-block;
vertical-align:top;
text-align:left;
}

#home .c5 .right{
width:60%;
display:inline-block;
vertical-align:top;
text-align:left;
margin-top: 0px;
margin-bottom: 50px;
}

#home .c5 .right p{
font-size:20px;	
}

#home .c5 .right p.important{
color:#f58a53;
font-size:29px;
font-weight:700;
text-transform:uppercase;
padding-top:20px;
padding-bottom:20px;
}

#home .c5 h3{
	color:#f58a53;
}

#home .c5 a.button{
margin-top:30px;
margin-bottom:30px;
}

/* --- C6 marques --- */

#home .c6{
text-align:center;
}

#home .c6 .type{
margin-bottom:75px;	
}

#home .c6 .type h4{
margin-bottom:45px;	
}

#home .c6 img{
width:215px;
padding:0px 30px;
}

/* --- C7 service apres vente --- */

#home .c7{
text-align:center;
background-color:#f58a53;
padding-top:100px;
padding-bottom:100px;
}

#home .c7 h3{
color:white;	
margin-bottom:30px;
}

#home .c7 p{
color:white;
font-size:20px;
line-height:23px	
}

#home .c7 a.button{
color:white;
border:1px solid white;	
margin-top:50px;
}

/* ***** Mentions légales ***** */
#legal{
text-align:center;
padding-bottom:30px;

}

#legal .main_width{
}


#legal h1{
text-align:center;
background-position:bottom center;
margin:50px;
color:#f58a53;
}

#legal h2{
background-position: 0px 7px;
position: relative;
bottom: 0px;
margin-top: 14px;
margin-bottom: 14px;
font-size:28px;
line-height:30px;
background-position: bottom left;
padding-bottom: 7px;
color:#f58a53;
}

#legal h3{
line-height:23px!important;
padding-bottom: 6px!important;
font-size:22px;
}

#legal p{
margin-bottom:5px;
}

#legal p span{
display:inline-block;
vertical-align:top;
width:220px;
text-decoration:underline;
}


#legal .c1{
display:inline-block;
vertical-align:top;
width:42%;
margin-right:5%;
padding:1%;
border:1px solid #c0c0c0;
text-align:left;
margin-bottom:30px;
min-height:262px;
background-color:white;
border-radius:4px;
}

#legal .c1.last{
margin-right:0%;
}

#legal .c1 p{
margin-bottom:8px;
font-size:19px;
line-height:22px;
}

#legal .c2{
width:42%;
padding:1%;
margin-right:5%;
text-align:left;
display:inline-block;
vertical-align:top;
border:1px solid #c0c0c0;
margin-bottom:30px;
height:600px;
overflow:auto;
padding-bottom:30px;
background-color:white;
border-radius:4px;
}

#legal .c2 h3{

}

#legal .c2 h4{
font-size:19px;
}

#legal .c2 p{
margin-bottom:8px;
font-size:18px;
line-height:27px;
}

#legal .c2 ul li{
margin-bottom:5px;
font-size:13px;
line-height:22px;
padding-left:15px;
list-style-type:none;
}

#legal .c2 ul ul li{
padding-left:30px;
}

#legal .c2.last{
margin-right:0px;
}


/* ***** 404 ***** */

#e404{
text-align:center;
margin-bottom:100px;
padding-bottom:30px;
}

#e404 .main_width{
padding-top:85px;
padding-bottom:30px;
}

#e404 h1{
text-align:center;
background-position:bottom center;
margin-bottom:73px;
}


/* *********************** FOOTER *********************** */


#footer .background_1{
width:100%;
height:800px;
background-image:url('images/optique-entrevue.jpg');
background-repeat:no-repeat;
background-size:cover;
background-position:top center;
}

#footer .background_2{
width:100%;
height:1115px;
background-image:url('images/optique-entrevue-henri-chapelle.jpg');
background-repeat:no-repeat;
background-size:cover;
background-position:top center;
text-align:center;
padding-top:150px;
position:relative;
}


#footer .background_2 .logo{
width:522px;
display:block;
margin:auto;
margin-bottom:60px;
}

#footer .background_2 .social{
margin-bottom:60px;	
}

#footer .background_2 .social a{
opacity:0.35;	
transition:all 0.3s;
margin:5px;
}

#footer .background_2 .social a:hover{
opacity:0.75;	
}

#footer .background_2 .coordonnees{
width:327px;
display:block;
margin:auto;
}

#footer p.copyright{
color:white;
position:absolute;
display:block;
margin:auto;
width:90%;
bottom:50px;
text-align:center;
}

#footer p.copyright a{
color:inherit;	
}




/* *********************** FORM JQUERY *********************** */
#fadeandscale{
background-color:white;
padding:20px 50px;
text-align:center;
max-width:800px;
background-image:url('images/logo-optique-entrevue-small.svg');
background-size:200px;
background-repeat:no-repeat;
background-position:top 34px right 47px;
border-radius: 13px;
}

#fadeandscale h1{
font-size: 40px;
font-weight: 300;
margin:14px 0px 40px 0px;
color: #a5a5a5;
}

#fadeandscale p{
font-size: 16px;
color: #2c3e50;
margin: 17px 0px 14px 10px;
}

#fadeandscale p.optin{
font-size:12px;
line-height:21px;	
}

#fadeandscale #optin{
margin-right: 5px;
margin-left: 10px;
position: relative;
top: 2px;
}

#fadeandscale input[type="text"]{
border: 1px solid #bdc3c7;
padding: 10px 20px;
font-size: 16px;
color: #2c3e50;
transition: all 0.2s ease-in-out;
margin-bottom: 15px;
margin-right: 15px;
width:90%;
max-width: 513px;
border-radius: 2px;
color: #424e5a;
display: inline-block;
}

#fadeandscale input[type="text"]:hover{
box-shadow:         1px 1px 10px 0px rgba(50, 50, 50, 0.20);
}

#fadeandscale select{
border: 1px solid #bdc3c7;
padding: 10px 20px;
font-size: 16px;
color: #2c3e50;
transition: all 0.2s ease-in-out;
margin-bottom: 15px;
margin-right: 15px;
width:90%;
max-width: 556px;
border-radius: 2px;
color: #424e5a;
display: inline-block;
}

#fadeandscale textarea{
border: 1px solid #bdc3c7;
padding: 10px 20px;
font-size: 14px;
color: #2c3e50;
transition: all 0.2s ease-in-out;
margin-bottom: 15px;
margin-right: 15px;
width:90%;
max-width: 513px;
height:200px;
border-radius: 2px;
color: #424e5a;
display: inline-block;
}


#fadeandscale .boutons{
margin:20px 0px;
}

#fadeandscale .boutons .button{
display: inline-block;
text-transform: uppercase;
color: #003541;
padding: 11px 27px;
margin:0px 10px;
transition: all 0.5s ease-in-out;
font-size: 14px;
text-decoration:none;
transition:all 0.3s;
border:1px solid #003541;
cursor:pointer;

}

#fadeandscale .boutons .button:hover{
padding: 11px 37px;
margin:0px 0px;
}


#fadeandscale input[type="submit"]{
background-color:none!important;
border:1px solid #003541;
color:#003541!important;	
cursor:pointer;
}