﻿
html, body{width:100%;height:100%;margin:0;padding:0;}
#Bckgrd img{width:100%;min-height:100%;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: 1vw;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: 10px solid #ffffff;text-align:center;}
	
	#Rect{
    	z-index:94;
		Left:0%;
		Top:0%;
		width: 34%;
    	height: 100%;
		overflow:hidden;
		}
		#Logo {position:absolute;width:80%;height:28%;top:6%;left:10%;z-index: 95;background-color: rgba(239,183,0,.8);box-shadow: 8px 8px 10px rgba(0,0,0,.4)}
		#Image img{position:absolute;position:absolute;left:5%;top:5%;max-width:50%;max-height:60%;}
		#Slogan img{position:absolute;position:absolute;right:7%;bottom:5%;max-width:80%;max-height:90%;}
		#Encart{position:absolute;width:80%;height:54%;top:40%;left:10%;z-index: 94;background-color: rgba(255,255,255,.5);}
		#Encart p{font-family: 'Nothing You Could Do', cursive;font-weight:bold;font-size: 2.3vw;color:rgba(71,88,108,1);text-align:center;}
		#Encart ul{margin:2% 5% 10% 2%;}
		#Encart li{position:relative;font-size: 1vw;color:rgba(71,88,108,1);margin:1% 10% 1% 15%;}
		#Encart a{font-size: 1vw;color:rgba(71,88,108,1);text-decoration: none;}

	#Carre2 h1,#Carre3 h1,#Carre4 h1,#Carre5 h1{font-size: 1.5vw;margin:2%}
	#Carre1{
		z-index:95;
		overflow:auto;
		Left:34%;
		Top:0%;
		width: 55%;
    	height: 100%;
		box-shadow: 8px 8px 50px rgba(0,0,0,1);}
	#Carre1 h1{font-size: 2.5vw;top:5%;}
	#Carre1 h2{position:relative;font-size: 2vw;top:5%}
	#Carre1 h3{position:relative;font-size: 2vw;margin-top:15%;}
	#Carre1 h4{position:relative;font-size: 1.2vw;margin:-2% 0% 5% 0%;}
	#Carre1 h5{position:relative;font-size: 1.1vw;margin:0%;;color: #ffffff;margin-top:5%;}
	#Carre1 li{font-size: 1.4vw;margin: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: 1.5vw;top:15%;margin:1%}
	#Carre1 img{position:relative;width:20%;top:0%;margin-bottom:10%;}
	#Questionnaires li{display: inline}
	#Questionnaires img{height:10vh;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:60%;}
	#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: 10px 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: 10px solid rgba(0,0,0,0);box-shadow: 8px 8px 10px rgba(0,0,0,0);width:20%;}
	#Photo1 p,#Photo2 p{position:relative;font-size: 1vw;margin:0% 0% 0% 0%;top:10%;}
	#CV1,#CV2 {position:absolute;width:65%;left:30%;}
	#CV1 p,#CV2 p{margin-top:-1%;}
	#Paraph{position:relative;width:10%;left:45%;height:.5%;top:10%;}
	
	

	#Carre2{
		Left:89%;
		Top:0%;
		width: 11%;
    	height: 25%;}
	#Carre3{
		Left:89%;
		Top:25%;
		width: 11%;
    	height: 25%;}
	#Carre4{
		Left:89%;
		Top:50%;
		width: 11%;
    	height: 25%;}
	#Carre5{
		Left:89%;
		Top:75%;
		width: 11%;
    	height: 25%;}
	#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:0%;margin:1% 5% 5% 5%;font-size: 3vw;color:#ffffff;left:-9%;}
	#Pop1 p{top:0%;margin:2% 20% 0% 20%;font-size: 1,5vw;color:#ffffff;position:relative;left:-9%}
	#Pop1 li{top:0%;left:-9%;margin:0% 20% 0% 20%;font-size: 1,5vw;color:#ffffff;position:relative;}
	#Pop1 img{max-width:100%;max-height:auto;min-width:80%;position:absolute;top:-5%;left:-5%;}
	#Pop2 h1{top:5%;margin:1% 5% 5% 5%;font-size: 3vw;color:#ffffff;left:25%;}
	#Pop2 p{top:0%;margin:2% 20% 0% 20%;font-size: 1,5vw;color:#ffffff;position:relative;left:25%}
	#Pop2 li{top:0%;left:25%;margin:0% 20% 0% 20%;font-size: 1,5vw;color:#ffffff;position:relative;}
	#Pop2 img{max-width:100%;max-height:auto;min-width:80%;position:absolute;top:-3%;left:25%;}
	#Pop1,#Pop2{
		position:absolute;
		z-index:97;
		text-align:center;
		display: none;
		z-index:97;
		Left:25%;
		Top:10%;
		width: 50%;
    	height: 80%;}
	#Signature img{position:absolute; bottom:1%;right:2%;z-index:98;width:20%}
	

header

	
section


footer

