html, body{width:100%;height:100%;margin:0;padding:0;}
#Bckgrd img{height:100%;width:auto;position:fixed;bottom:0;right:0;}
#Grid{width:100%;height:100%;position:absolute;text-align:center;}
h1{font-family: 'Spinnaker', serif;font-size: 1,7vw;color: rgba(255,255,255,.9);margin:0; padding:0;position:relative;top:40%;}
h2{font-family: 'Spinnaker', serif;font-size: 2vw;color: rgba(255,255,255,.9);margin:0; padding:0;position:relative;top:40%;}
p{font-family: 'Spinnaker', serif;font-size: 2.5vw;color: #ffffff}
li{text-align:left;font-family: 'Spinnaker', serif;font-size: 1vw;color: #ffffff;margin:0% 5% 0% 10%; padding:0;}
a{text-decoration: none;}

	#Rect,#Carre1,#Carre2,#Carre3,#Carre4,#Carre5,#Trame{
   		box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;position:absolute;border: 5px solid #ffffff;text-align:center;}
	
	#Rect{
    	z-index:94;
		Left:0%;
		Top:0%;
		width: 100%;
    	height: 24%;
		}
		#Logo {position:absolute;width:30%;height:90%;top:5%;left:2%;z-index: 95;background-color: rgba(239,183,0,.8);box-shadow: 8px 8px 10px rgba(0,0,0,.4)}
		#Image img{position:absolute;left:5%;top:5%;max-width:70%;max-height:60%;}
		#Slogan img{position:absolute;right:2%;bottom:3%;max-width:95%;max-height:90%;}
		#Encart{position:absolute;width:64%;height:90%;top:5%;left:34%;z-index: 94;background-color: rgba(255,255,255,.8)}
		#Encart p{font-family: 'Nothing You Could Do', cursive;font-weight:bold;font-size: 3.5vh;color:rgba(71,88,108,1);margin:5% 0% 0% 0%}
		#Encart img{margin-top:0%;}

	#Carre2 h1,#Carre3 h1,#Carre4 h1,#Carre5 h1{font-size: 3vw;margin:2%}
	#Carre1{
		z-index:95;
		overflow:auto;
		Left:0%;
		Top:24%;
		width: 100%;
    	height: 59%;
		box-shadow: 8px 8px 50px rgba(0,0,0,1);}
	#Carre1 h1{font-size: 5vw;top:2%;}
	#Carre1 h2{position:relative;font-size: 3vw;top:2%}
	#Paraph{position:relative;width:10%;left:45%;height:.5%;top:5%;}
	#Carre1 h3{position:relative;font-size: 3vw;margin-top:6%;}
	#Carre1 h4{position:relative;font-size: 2vw;margin:-2% 0% 5% 0%;}
	#Carre1 h5{position:relative;font-size: 2.9vw;margin-left:-10%;;color: #ffffff;margin-top:3%;}
	#Carre1 li{font-size: 2.7vw;margin:-1% 2% 2% -2%;}
	#Carre1 p{position:relative;margin:2% 1% 2% 1%;top:10%;text-align:justify;text-justify: inter-word;}
	#Carre1 ul{position:relative;font-size: 2vw;top:8%;margin:1%}
	#Carre1 img{position:relative;width:20%;top:0%;margin-bottom:10%;}
	#Questionnaires li{display: inline}
	#Questionnaires img{height:7vh;width:auto;box-shadow: 8px 8px 10px rgba(0,0,0,.4);margin:2% 8% 0 5%;}
	#Fiche1 {width:100%;height:auto;text-align:center;}
	#Fiche2 {width:100%;height:auto;text-align:center;margin-top:95%;}
	#Photo1,#Photo2 {position:absolute;width:30%;left:0%;height:30%;text-align:center;}
	#Photo1 img,#Photo2 img{box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border: 5px solid #ffffff;box-shadow: 8px 8px 10px rgba(0,0,0,.4);width:60%;}
	#mail1 img,#mail2 img{box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border: 5px solid rgba(0,0,0,0);box-shadow: 8px 8px 10px rgba(0,0,0,0);width:30%;margin-top:5%;}
	#Photo1 p,#Photo2 p{position:relative;font-size: 2vw;margin:0% 0% 0% 0%;top:10%;}
	#CV1,#CV2 {position:absolute;width:65%;left:30%;}
	#CV1 p,#CV2 p{margin-top:-1%;}
	
	#Carre2{
		Left:0%;
		Top:83%;
		width: 25%;
    	height: 17%;}
	#Carre3{
		Left:25%;
		Top:83%;
		width: 25%;
    	height: 17%;}
	#Carre4{
		Left:50%;
		Top:83%;
		width: 25%;
    	height: 17%;}
	#Carre5{
		Left:75%;
		Top:83%;
		width: 25%;
    	height: 17%;}
	#Carre5 img{position:absolute;height:30%;width:60%;left:20%;top:35%;}
	
	#Trame{
		display: none;
		z-index:96;
		border: 10px solid #000000;
		width: 100%;
    	height: 100%;
    	background-color: rgba(0,0,0,.7);}
	#Pop1 h1{top:-2%;margin:1% 5% 2% 5%;font-size: 4vw;color:#ffffff;left:-9%;}
	#Pop1 p{top:0%;margin:0% 10% 0% 10%;font-size: 1,5vw;color:#ffffff;position:relative;left:-9%}
	#Pop1 li{top:-2%;left:-9%;margin:0% 20% 0% 15%;font-size: 1.6vh;color:#ffffff;position:relative;}
	#Pop1 img{
		max-width:100%;max-height:auto;min-width:80%;position:absolute;top:-5%;left:-13%;
		-moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";}
	#Pop2 h1{top:-2%;margin:1% 5% 2% 5%;font-size: 4vw;color:#ffffff;left:-9%;}
	#Pop2 p{top:2%;margin:0% 10% 0% 10%;font-size: 1,6vw;color:#ffffff;position:relative;left:-9%}
	#Pop2 li{left:-9%;margin:0% 20% 0% 15%;font-size: 1.6vh;color:#ffffff;position:relative;}
	#Pop2 img{width:105%;height:80%;min-width:80%;position:absolute;top:-8%;left:-9%;}
	#Pop1,#Pop2{
		position:absolute;
		z-index:97;
		text-align:center;
		display: none;
		z-index:97;
		Left:10%;
		Top:20%;
		width: 98%;
    	height: 80%;}
	#Signature img{position:absolute; bottom:7%;right:3%;z-index:98;width:15%}
	

header

	
section


footer