html {font-size:100%; height: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; visibility:hidden}
	 
	 
#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}
	
.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:8px; background-color:#EC5C60; border-radius:15px; position:absolute; width:100% ;bottom:5px; left:0; z-index:5 }

#bloc {width:64%; margin-left:auto; margin-right:auto; margin-top:0px; }
	#realisations a {display:block; width:45%; margin-right:2.5%; margin-left:2.5%; float:left; margin-top:5%; text-decoration:none; position:relative;}
		#realisations a img {width:100%; display:block}

.retourligne {clear:both}


	
	
div#galerie
{width: 64% ; margin-top:50px; margin-left:auto; margin-right:auto; background: #fff ; padding: 15px;  text-align: center ; font-family: 'Comfortaa', cursive; font-weight:600;}

ul#galerie_mini
{margin: 0 ; padding: 0 ; list-style-type: none ;}

ul#galerie_mini li {float: left ; width:16.16%; margin-right:0.25%; margin-left:0.25%}


/* ICI galerie images vignettes */

ul#galerie_mini li a
{width:100%; background-color:#000099; display:block}

ul#galerie_mini li a img
{width:100%; display:block}

dl#photo
{clear: both ;margin: 0 auto ;}

dl#photo dt
{font-family: 'Comfortaa', cursive; font-weight:600; color: #162887 ; padding-top:30px; padding-bottom:30px; font-size:1.3em}

dl#photo dt span {font-size:0.6em; color:#333333; display:block; text-align:center; padding-top:20px}

dl#photo dd
{margin: 0 ;}

dl#photo img
{ }


#big_pict {width:100%}



/*	
		
#bloc2 { width:1300px; height:1800px; margin-left:340px}	
	#Portrait { position:absolute; float:left; width:30%; margin-left:30px; z-index:6}
		
	#Descriptif { width:90%; margin-right:auto; margin-left:auto; margin-top:60px;  padding-top:30px; font-family: 'Comfortaa', cursive; font-weight:600; }
		.colonnes { float:left; width:27%;  padding-left:37%; }	
			#Descriptif p {text-align:justify; color:#330099; font-size:0.8em; line-height:1.6em; margin-top:30px}
			
		.colonnes2 { width:27%; float:left; padding-left:5%}	
			#Descriptif p {text-align:justify; color:#330099; font-size:0.8em; line-height:1.6em; margin-top:30px}	
		
	#parcours { position:absolute; margin-top:300px; padding-left:0px; z-index:5}	
	
	*/
	
	
	
#bloc2 {width: 64% ; margin-top:50px; margin-left:auto; margin-right:auto;}
	#Portrait { float:left; width:30%; }
		#Portrait img {width:100%; display:block}
	#Descriptif { float:left; width:70%; padding-top:30px; font-family: 'Comfortaa', cursive; font-weight:600; }
		.colonnes { float:left; width:50%;  }	
			#Descriptif p {text-align:justify; color:#162887; font-size:0.8em; line-height:1.6em; margin-left:40px}
	
	#parcours {width:100%}
		#parcours img {width:100%; display:block}
	

.retourligne {clear:both}	

#bloc3 { width:64%; margin-left:auto; margin-right:auto; margin-top:50px;  }
	#Images { width:60%; float:left;   }
	#Informations h2 {font-family: 'Comfortaa', cursive; font-weight:700; font-size:1em; text-align:left; color:#162887; margin-top:30px; padding-top:30px;  }
	#Informations p {font-family: 'Comfortaa', cursive; font-weight:400; font-size:1em; text-align:left; color:#162887; margin-top:30px; padding-top:30px;  }
	#Picto { margin-top:50px; }
			#Picto a {display:inline-block; margin-right:50px; text-decoration:none}	
	
	
	
@media screen and (max-width: 1500px) {
	#Descriptif { padding-top:0px;}
	#Descriptif p {text-align:justify; color:#330099; font-size:0.65em; line-height:1.6em; margin-left:40px}
}


@media screen and (max-width: 1200px) {
	.colonnes { float:none; width:100%;  }	
}


@media screen and (max-width: 1100px) {
	
	#navigation li a {font-size:1.2em; margin-right:20px }
	#parcours {width:100%}
		#parcours img {width:100%; display:block}
	
.titre {position:relative; display:inline-block;margin-top:210px; padding-left:19.6%}
	.titre h2 { z-index:6; position:relative; color:#162887; font-size:1.4em; text-transform:uppercase; font-family: 'Fredoka One', cursive; margin:0; padding:0; color:#162887}
	
}


@media screen and (max-width: 800px) {
	
#logoanime {width:300px; height:150px; margin-left:-150px; margin-top:-75px}
	 
	
	
	#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:210px; 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}
	
	
	
#bloc {width:64%; margin-left:auto; margin-right:auto; margin-top:0px; }
	#realisations a {display:block; width:100%; margin-right:2.5%; margin-left:2.5%; float:none; margin-top:5%; text-decoration:none; position:relative;}
		#realisations a img {width:100%; display:block }


	
		
	ul#galerie_mini li {float:none ; width:100%; margin-right:0; margin-left:0}
	dl#photo {display:none}
	
	

	#Portrait { float:none; width:50%;  margin-left:auto; margin-right:auto; z-index:6}
	#Descriptif { float:none; width:100%; padding-top:30px; }
		.colonnes { float:none; width:100%;}	
			#Descriptif p {text-align:justify; color:#330099; font-size:0.7em; line-height:1.6em; margin-left:0px}
			
			
#bloc3 { width:64%; margin-left:auto; margin-right:auto; margin-top:50px;  }
	#Images { width:45%; float:none;   }
	#Informations h2 {font-family: 'Comfortaa', cursive; font-weight:700; font-size:0.8em; text-align:left; color:#162887; margin-top:10px; padding-top:10px;  }
	#Informations p {font-family: 'Comfortaa', cursive; font-weight:400; font-size:0.8em; text-align:left; color:#162887; margin-top:10px; padding-top:10px;  }
	#Picto { margin-top:30px; }
		#Picto a {display:inline-block; margin-right:50px; text-decoration:none}
	
}