html {height:100%; font-size:100%}
body {margin:0; height:100%; font-size:1em }



#fondlogo {width:100%; height:100%; background-color:#FFFFFF; position:fixed; top:0; left:0; z-index:9998}
#logoanime {width:600px; height:300px; background-color:#FFFFFF; position:fixed; top:50%; left:50%; margin-left:-300px; margin-top:-150px;
	 z-index:9999}

#menu { background-color:#00CCCC; position:fixed; top:0; left:0; width:100%; background-color: rgba(255, 255, 255, 0.7); z-index:19 }




#logo {width:80px; float:left; display:block }
	#logo img { width:100%; margin-left:15px; margin-top:15px; margin-bottom:15px }

#navigation {float:right; display:inline-block; margin-top:40px; font-size:0.7em; font-family: 'Comfortaa', cursive; font-weight:700}
	#navigation ul {margin:0; padding:0}
	#navigation li {list-style:none; text-align:center; display:inline-block; }
	#navigation li a {color:#162887; text-decoration:none; font-size:1.4em; margin-right:90px; display:inline-block }
	
.retourligne {clear:both}

	
#bloc { margin-top:200px; width:80%; margin-left:auto; margin-right:auto; position:relative}
	
	#bloc h1 {position:absolute; top:100px; left:0; display:block; width:100%; text-align:center; font-size:3em; font-family: 'Fredoka One', cursive; font-weight:400; color:#162887; z-index:500}
	
	#Projetdroite {width:40%; display:block; margin-top:20px; margin-left:0%; float:right; position:relative}
		#Projetdroite img {width:100%; display:block}
		
	#Projetgauche { width:50%; display:block; margin-top:200px; float:left;  }	
		#Projetgauche img {width:100%; display:block}
		#Projetdroite h2 {display:block; text-align:justify; color:#EC5C60; font-size:1em;  font-family: 'Comfortaa', cursive; font-weight:600; margin-top:30px}
		#Projetdroite p {display:block; text-align:justify; font-size:0.8em;  font-family: 'Comfortaa', cursive; font-weight:400; margin-top:30px}
		#Projetdroite p1 {display:block; text-align:justify; font-size:0.6em; color:#EC5C60;  font-family: 'Comfortaa', cursive; font-weight:400; margin-top:30px}
	
	
.titre {position:relative; display:inline-block;margin-top:210px; padding-left:19.6%;}
	.titre h2 { z-index:6; position:relative; color:#162887; font-size:2em; text-transform:uppercase; font-family: 'Fredoka One', cursive; margin:0; padding:0; color:#162887}
	.trait {height:15px; background-color:#EC5C60; border-radius:15px; position:absolute; width:100% ;bottom:2px; left:0; z-index:5 }	


.imagesprojet {width:80%; margin-left:auto; margin-right:auto}
	.imagesprojet img {width:100%; display:block}
	
.Deuximagesprojet {width:80%; margin-left:auto; margin-right:auto}
	.Deuximagesprojet img {width:50%; display:block; float:left; margin:0}

video {width:100%; display:block;}

.margeH1 {margin-top:150px}
.margeH2 {margin-top:150px}


.retour {display:block; font-size:1em;   font-family: 'Comfortaa', cursive; font-weight:700; margin-top:80px; padding-bottom:60px; margin-left:auto; margin-right:auto; width:150px; text-align:center}
	.retour a {text-decoration:none; display:block; width:100%; color:#EC5C60;}




@media screen and (max-width: 800px) {


#logo {width:60px; float:none; display:block; margin:10px auto 0 auto}
		#logo img { width:100%; margin:0}

	#navigation {float:none; display:block;  padding:0; margin:0; margin-top:15px; padding-bottom:10px}
		#navigation li {list-style:none; text-align:center; display:block; margin:0; padding:0;}
		#navigation li a { font-size:1.2em; margin:0; padding:8px 0; display:block; text-align:center }
		
.titre {position:relative; display:inline-block; margin-top:100px; padding-left:19.6%}
	.titre h2 { z-index:6; position:relative; color:#162887; font-size:1em; text-transform:uppercase; font-family: 'Fredoka One', cursive; margin:0; padding:0; color:#162887}
	.trait {height:7px; background-color:#EC5C60; border-radius:15px; position:absolute; width:100% ;bottom:2px; left:0; z-index:5 }

#bloc {  margin-top:200px; width:80%; margin-left:auto; margin-right:auto; position:relative}
	
	#bloc h1 {position:relative; top:40px; left:0; display:block; width:100%; text-align:center; font-size:1.5em; font-family: 'Fredoka One', cursive; font-weight:400; color:#162887; z-index:500}
	
	#Projetdroite {width:80%; display:block; margin-top:20px; margin-left:10%; float:none; position:relative}
		#Projetdroite img {width:100%; display:block}
		
	#Projetgauche { width:80%; display:block; margin-top:50px; margin-left:10%; float:none;  }	
		#Projetgauche img {width:100%; display:block}
		#Projetdroite h2 {display:block; text-align:justify; color:#EC5C60; font-size:1em;  font-family: 'Comfortaa', cursive; font-weight:600; margin-top:30px}
		#Projetdroite p {display:block; text-align:justify; font-size:0.6em;  font-family: 'Comfortaa', cursive; font-weight:400; margin-top:30px}
		#Projetdroite p1 {display:block; text-align:justify; font-size:0.4em; color:#EC5C60;  font-family: 'Comfortaa', cursive; font-weight:400; margin-top:30px}

.margeH1 {margin-top:75px}
.margeH2 {margin-top:75px}

}