body{
margin: 0;
padding: 0;
width: 100%;
}

div#page{
vertical-align: center;
}

p{
font-family:"Helvetica";
font-size: 10px;
text-align: center;
font-weight:normal;
margin:0;
padding:0;
}

h1 {
font-family:"Helvetica";
font-weight:normal;
font-size: 55px;
text-align: center;
color: #FFD700;
margin: 0;
padding: 0;
}
h2 {
font-family:"Helvetica";
font-weight: normal;
font-size: 40px;
text-align: center;
color: #FFD700;
margin: 0;
padding: 0;
}
h3 {
font-family: Oswald;
font-weight: normal;
font-size: 18px;
text-align: center;
margin: 2px 0;
color: #FFD700;
padding: 0;
}

h5{
font-family: Oswald;
font-weight: normal;
font-size: 16px;
text-align: left;
margin: 2px 0;
color: #FFD700;
padding: 0;	
}

h6{
font-family: Oswald;
font-weight: normal;
font-size: 16px;
text-align: center;
margin: 2px 0;
color: #FFD700;
padding: 0;	
}

.center { margin: 0 auto; }
.content{ margin: 0 auto; width: 960px; }
.clear { clear: both; }
#cadre1{ margin: 0 auto; width: 256px; float: left; border: 3px;  margin-left:5px; margin-right:5px;margin-top:5px;margin-bottom:5px;}

#header {
width: 100%;
background: rgba(253, 254, 254, 0.9);
opacity: 100%;
height: 80px;
position: fixed;
margin-top: 10px;
z-index: 100;
}
#nav { width: 500px; float: right; margin-top: -55px;}
#logo a { color: #17202A; text-decoration: none; float: left; font-size: 27px; margin-top: 15px; color: #fff; font-family:"Helvetica"; font-weight: bold; }
#nav .bouton-nav{
list-style: none;
display: block;
margin: 0 auto;
list-style: none;

}
#nav .bouton-nav1{
margin-top: 1px;
float: left;
padding-left:12px;

}
#nav .bouton-nav1 a { color: #000000; opacity:0.6; font-size: 15px; text-decoration: none; font-family: 'Helvetica'; }
#nav .bouton-nav1 a.active { color: #FFD700; opacity:1; border-bottom: 2px solid #FFFFFF; }
#nav .bouton-nav1 a:hover { color:#FFD700; opacity:1; }

.quotes {
font-family: "Helvetica";
font-weight: normal;
font-size: 30px;
text-align: left;
margin: 50px auto;
}

.texte-courant{
font-family:"Helvetica";
font-size: 15px;
text-align: left;
font-weight:normal;
margin:0;
padding:0;
}

.texte-logo {
font-family: "Helvetica";
font-weight: normal;
font-size: 10px;
text-align: center;
color: #FFFFFF;

}

.texte-contact{
font-family: "Helvetica";
font-weight: normal;
font-size: 15px;
text-align: left;
margin: 50px auto;
color: #151515;
}

 .texte_expertise{font-family:"Helvetica"; color:#151515; font-size:10px;}
 .author_name_white { font-family:"Helvetica"; margin: 70px 0 0 75px; color: #fff; font-size: 20px; } 
 .author_name_gray { font-family:"Helvetica"; margin: 70px 0 0 75px; color: #94a4a4; font-size: 20px; } 
 .quotes_container { width: 800px; margin: 0 auto; }
#christmas_tree { background: url('../img/christmas-tree.png')no-repeat; width: 48px; height: 77px; margin: 0 auto; position: relative; bottom: -35px;}
#divider { background: url('../img/divider.png')no-repeat; width: 300px; height: 35px; margin: 0px auto 27px auto; }
#ribbon { background: url('../img/ribbon.png')no-repeat; width: 251px; height: 48px; margin: 0 auto; display: block; position: relative; top: -38px; }
#snowflakes1 { background: url('../img/snowflakes.png')no-repeat; width: 24px; height: 21px; margin: 0 auto; display: block; position: relative; bottom: -54px; left: -102px; }
#snowflakes2 { background: url('../img/snowflakes.png')no-repeat; width: 24px; height: 21px; margin: 0 auto; display: block; position: relative; bottom: -33px; right: -100px; }

ul li{
     position:relative;float:left;
     width:220px;height:150px;padding:10px;list-style:none;

}
/*permet de créer deux lignes*/
ul li:nth-child(4n){clear:left;} 
          
ul li a{
     display:block;overflow:hidden;
     width:220px;height:150px;
     margin-top:0px;margin-left:0px;
     border:0px solid rgba(0,0,0,0.7);
     transition-property:width,height,margin,z-index,border;
     transition-duration:0.4s;	 
	 filter: grayscale(100%);
	 -webkit-filter: grayscale(100%);
}

ul li a:hover{
     position:absolute;
     width:600px;height:400px;
     margin-top:-250px;margin-left:-190px;
     z-index:90;
     border:6px solid rgba(0,0,0,0.7);
	 	 filter: grayscale(0%);
	 -webkit-filter: grayscale(0%);

}
          
ul li a img{
     position:absolute;
     width:220px;height:150px;z-index:20;
     transition-property:width,height,z-index;
     transition-duration:0.4s; 
	 filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
}
          
ul li a:hover img{
     width:600px;height:400px;
     z-index:90;
	 filter: grayscale(0%);
	 -webkit-filter: grayscale(0%);
}





#slide2, #slide3, #slide4, #slide5, #slide6 { width: 100%; }



.d1{
width:3840px;
height:720px;
background-color: #EDEDED;
background: url("../img/diapo123.png");
background-size: contain;
animation: defilement1 30s linear infinite;
}
.conteneur1{
overflow: hidden;
max-width: auto;
margin: auto;
box-shadow: 0px 2px 2px -5px #777;
}
@keyframes defilement1{
0%{transform: translate(0,0);}
100%{transform: translate(-2880px,0);}
}


#slide2{
background:50% 0 no-repeat fixed;
background-color:#FDFEFE ;
color: #17202A ;
height: 280px;
margin: 0 auto;
overflow: hidden;
padding: 130px 0;
}
#slide3{
background-color:#454545;
margin:auto;
color: #fff;
height: 550px;
padding: 130px 0 0 0;
background-size: cover;
}
#slide4{
background:50% 0 no-repeat fixed;
background-color:#FDFEFE ;
color: #17202A ;
height: 350px;
padding: 130px 0;
}

#slide5{
background-color:#454545;
height: 350px;
margin: 0 auto;
padding: 130px 0;
color: #fff;
background-size: cover;
}

#slide6{
background:50% 0 no-repeat fixed;
background-color:#FDFEFE ;
color: #17202A ;
height: 350px;
margin: auto;
overflow: hidden;
padding: 130px 0;
}

#slide7{
background:#454545;
height: 280px;
margin: 0 auto;
padding: 130px 0;
color: #fff;
background-size: cover;
}


#copyright { color: #000000; font-family:"Helvetica"; font-size: 8px; margin-top: 30px; text-align: center; }
#copyright a { text-decoration: none; color: #000000; }