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: 5vw;color: rgba(255,255,255,.9);margin:0; padding:0;position:relative;top:40%;}
h2{font-family: 'Spinnaker', serif;font-size: 3vw;color: rgba(255,255,255,.9);margin:0; padding:0;position:relative;top:40%;}
p{font-family: 'Spinnaker', serif;font-size: 2.1vw;color: #ffffff;margin:4%;}
li{text-align:left;font-family: 'Spinnaker', serif;font-size: 2vw;color: #ffffff;margin:0% 5% 0% 10%; padding:0;}
a{text-decoration: none;}

	#Rect,#Carre1,#Carre2,#Carre3,#Carre4,#Pop1,#Pop2,#Pop3,#Pop4,#Pop5,#Pop6,#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:95;
		Left:0%;
		Top:0%;
		width: 100%;
    	height: 34%;
		}
		#Logo {position:absolute;width:90%;height:28%;top:6%;left:5%;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:1%;top:5%;max-width:50%;max-height:85%;}
		#Slogan img{position:absolute;position:absolute;right:1%;bottom:4%;max-height:90%;width:auto;}
		#Encart1{position:absolute;width:47%;height:55%;top:40%;left:2%;z-index: 94;background-color: rgba(255,255,255,.8);overflow:hidden;}
		#Encart2{position:absolute;width:47%;height:55%;top:40%;left:51%;z-index: 94;background-color: rgba(255,255,255,.8);overflow:hidden;}
		#Encart1 h1,#Encart2 h1{top:3%;;margin:1% 1% 1% 1%;font-size: 1.5vh;color:rgba(71,88,108,1);}
		#Encart1 ul,#Encart2 ul{margin:5% 3% 0% 1%;}
		#Encart1 li,#Encart2 li{position:relative;font-size: 1.9vw;color:rgba(71,88,108,1);margin:1% 0% 0% -50%;;list-style-type:none;text-align: right;}
		#Encart1 a,#Encart2 a{font-size: 1.9vw;color:rgba(71,88,108,1);text-decoration: none;}
		#Encart1 img,#Encart2 img{width:5%}

	#Carre1{
		Left:0%;
		Top:34%;
		width: 50%;
    	height: 33%;
    	background-color: rgba(92,104,126,.5)}
	#Carre1:hover{background-color: rgba(239,183,0,.9);}
	#Carre1:hover h1, #Carre1:hover h2{color: rgba(125,143,143,.9);}

	#Carre2{
		Left:50%;
		Top:34%;
		width: 50%;
    	height: 33%;
    	background-color: rgba(239,183,0,.5)}
	#Carre2:hover{background-color: rgba(125,143,143,.9);}
	#Carre2:hover h1, #Carre2:hover h2{color: rgba(239,183,0,.9);}
	
	#Carre3{
		Left:0%;
		Top:67%;
		width: 50%;
    	height: 33%;
    	background-color: rgba(187,118,0,.5)}
	#Carre3:hover{background-color: rgba(92,104,126,.9);}
	#Carre3:hover h1, #Carre3:hover h2{color: rgba(187,118,0,.9);}
	
	#Carre4{
		Left:50%;
		Top:67%;
		width: 50%;
    	height: 33%;
    	background-color: rgba(110,113,89,.5);}
	#Carre4:hover{background-color: rgba(187,118,0,.9);}
	#Carre4:hover h1, #Carre4:hover h2{color: rgba(92,104,126,.9);}
	
	#Trame{
		display: none;
		z-index:96;
		border: 10px solid #000000;
		width: 100%;
    	height: 100%;
    	background-color: rgba(0,0,0,.7);}
	#Pop1 h1,#Pop2 h1,#Pop3 h1,#Pop4 h1,#Pop5 h1{top:0%;;margin:2% 5% 5% 5%;font-size: 4vw;color:#ffffff;}
	#Pop1 h2,#Pop2 h2,#Pop3 h2,#Pop4 h2,#Pop5 h2{top:0%;;margin:5% 5% 1% 5%;font-size: 3vw;color:#ffffff;}
	#Pop6 li, #Pop6 a{list-style-type:none;font-size: 2vh;color:#ffffff;text-align: right;margin:5% 3% 1% 5%;}
	#Pop1,#Pop2,#Pop3,#Pop4,#Pop5{
		overflow:auto;
		display: none;
		z-index:97;
		Left:10%;
		Top:10%;
		width: 80%;
    	height:auto;
		max-height:80%;
		box-shadow: 8px 8px 10px rgba(0,0,0,.4)}
	#Pop6{
		overflow:auto;
		display: none;
		z-index:97;
		Left:15%;
		Top:40%;
		width: 70%;
    	height: 32%;
		box-shadow: 8px 8px 10px rgba(0,0,0,.4)}
	#Pop1{background-color: rgba(82,95,114,.9);}
	#Pop2{background-color: rgba(162,119,154,.9);}
	#Pop3{background-color: rgba(110,113,89,.9);}
	#Pop4{background-color: rgba(185,141,8,.9);}
	#Pop5{background-color: rgba(177,176,122,.9);}
	#Pop6{background-color: rgba(162,119,154,.9);}
	

header

	
section


footer