@charset "utf-8";
/* CSS Document */

* { margin: 0; padding: 0;}

html {background: url(images/bg.jpg) no-repeat bottom center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale')";
}

body { font-family: 'Raleway', sans-serif; background:url(images/bg-top.png) top center no-repeat; min-height: 579px; height: 100%;}

#zone-top {}
#zone-top-logo { width: 305px; height: 243px; position: absolute; top: 62px; left: 50%; margin-left: -153px;}

#zone-top-social { width: 168px; position: absolute; top: 380px; left: 50%; margin-left: -84px; overflow: hidden;}
#zone-top-social a { width: 28px; height: 22px; display: block; float: left; text-indent: -9999px; opacity: 0.4; margin: 0 13px;}
#zone-top-social a:hover { opacity: 1;}
#zone-top-social #facebook { background: url(images/social/fb.png) no-repeat;} 
#zone-top-social #instagram { background: url(images/social/inst.png) no-repeat;} 
#zone-top-social #youtube { background: url(images/social/yt.png) no-repeat;} 

#zone-photo { position:absolute; top: 375px; left: 50%; margin-left: -492px;  transform: rotate(45deg); overflow: hidden;}
#zone-photo img { transform: rotate(-90deg);}

#zone-bio { position:absolute; top: 372px; background:url(images/bg-bio.png) center center no-repeat; width: 410px; height: 410px; left: 50%; margin-left: 81px; transform: rotate(-45deg); overflow: hidden; opacity: 0.8;}
#zone-bio p { width: 576px; transform: rotate(45deg); color: #000; font-size: 15px; text-align: center; margin: 10px 0 0 -75px;}

#zone-joindre {  position: absolute; transform: rotate(45deg); width: 160px; height: 160px; left: 50%; top: 680px; margin-left: -82px; background: rgba(0,0,0,.25);}
#zone-joindre:hover { background:  rgba(0,0,0,.6); cursor: pointer;}
#zone-joindre-lignes { background: url(images/bg-joindre.png) center center no-repeat; position: absolute; margin: -31px 0 0 -30px; width: 220px; height: 220px; transform: rotate(-45deg);}
#zone-joindre a {transform: rotate(-45deg); display: block; color: #fff; text-decoration: none; text-transform: uppercase; margin: 40px 0 0 10px; width: 200px; position: absolute; opacity: 0.8;}

#zone-logos { position: absolute; top: 1000px; left: 50%; margin: 0 0 60px -550px; width: 1100px; height: 200px;}
#zone-logos a { opacity: 0.5; margin: 0 40px;}
#zone-logos a:hover { opacity: 1;}


/* CSS TRANSITIONS
*************************/

#zone-top-social a, #zone-joindre, #zone-logos a {
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s}



/* RESPONSIVE
*************************/

@media all and (max-width : 1170px) {
	#zone-top-logo img { width: 200px;}
	#zone-top-logo { width: 200px; top: 40px; left: 50%; margin-left: -100px;}
	
	#zone-top-social { top: 250px;}
	
	#zone-photo { top: 400px;  margin-left: -205px;}
	
	#zone-bio { top: 700px; margin-left: -205px; opacity: 1;}
	
	#zone-joindre {  top: 1130px; background: rgba(0,0,0,.25);}
	
	#zone-logos {top: 1400px; left: 50%; margin: 0 0 60px -150px; width: 300px; text-align: center;}
	#zone-logos a { margin: 0 0 20px 0; display: block;}
}

@media all and (max-width : 600px) {
	#zone-photo { margin-left: -150px; width: 80%; width: 300px;}
	#zone-photo img { width: 300px;}
	
	#zone-bio {margin-left: -175px; background: rgba(255,255,255,0.8); width: 350px; height: auto; left: 50%; transform: none;}
	#zone-bio p { width: auto; transform: none; color: #000; font-size: 14px; text-align: center; margin: 30px;}
	#zone-bio p span { display: none;}
	
	#zone-joindre {  top: 1130px; background: rgba(0,0,0,.25);}
	
	#zone-logos {top: 1400px;}
}