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: 2.5vw;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: 1.2vw;color: #ffffff;margin:4%;}
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,#Pop1,#Pop2,#Pop3,#Pop4,#Pop5,#Pop6,#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:95;
		Left:0%;
		Top:0%;
		width: 34%;
    	height: 100%;
		}
		#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;left:5%;top:5%;max-width:50%;max-height:60%;}
		#Slogan img{position:absolute;right:7%;bottom:5%;max-width:80%;max-height:90%;}
		#Encart1{position:absolute;width:80%;height:42%;top:36%;left:10%;z-index: 94;background-color: rgba(255,255,255,.5);overflow:hidden;}
		#Encart2{position:absolute;width:80%;height:14%;bottom:6%;left:10%;z-index: 94;background-color: rgba(255,255,255,.5);overflow:hidden;}
		#Encart1 h1,#Encart2 h1{top:1em;;margin:0%;font-size: 1.3vw;color:rgba(71,88,108,1);}
		#Encart1 ul,#Encart2 ul{margin:10% 5% 1% 0%;}
		#Encart1 li,#Encart2 li{position:relative;font-size: 1.2vw;color:rgba(71,88,108,1);margin:8% 0% 0% 0%;list-style-type:none;text-align: right;}
		#Encart1 a,#Encart2 a{font-size: 1.2vw;color:rgba(71,88,108,1);text-decoration: none;}
		#Encart1 img,#Encart2 img{width:5%}

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

	#Carre2{
		Left:34%;
		Top:50%;
		width: 33%;
    	height: 50%;
    	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:67%;
		Top:0%;
		width: 33%;
    	height: 50%;
    	background-color: rgba(187,118,0,.5)}
	#Carre3:hover{background-color: rgba(92,104,126,.9);}
	#Carre3:hover h1, #Carre3:hover h2{color: rgba(207,138,0,.9);}
	
	#Carre4{
		Left:67%;
		Top:50%;
		width: 33%;
    	height: 50%;
    	background-color: rgba(110,113,89,.5);}
	#Carre4:hover{background-color: rgba(187,118,0,.9);}
	#Carre4:hover h1, #Carre4:hover h2{color: rgba(72,84,106,.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: 2.5vw;color:#ffffff;}
	#Pop1 h2,#Pop2 h2,#Pop3 h2,#Pop4 h2,#Pop5 h2{top:0%;margin:5% 5% 1% 5%;font-size: 1.5vw;color:#ffffff;}
	#Pop6 li, #Pop6 a{list-style-type:none;font-size: 2vh;color:#ffffff;text-align: right;margin:4% 3% 1% 5%;}
	#Pop1,#Pop2,#Pop3,#Pop4,#Pop5{
		overflow:auto;
		display: none;
		z-index:97;
		Left:25%;
		Top:10%;
		width: 50%;
    	height: 80%;
		box-shadow: 8px 8px 10px rgba(0,0,0,.4)}
	#Pop6{
		overflow:auto;
		display: none;
		z-index:97;
		Left:36%;
		Top:61%;
		width: 29%;
    	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