html {font-size:100%}
body {margin:0; font-family: 'Roboto', sans-serif; font-size:1em; background-color:#2c3d4d; position:relative}
ul, li {margin:0; padding:0; list-style:none}


#englobe {visibility:hidden}

#chargement{width:64px; height:64px; position:fixed; z-index:9999; top:50%; left:50%; margin-left:-32px; margin-top:-32px; display:none;}
.avecJS #chargement{display:block;}

/* COMPORTEMENTS COMMUNS*/

/*MON RECTANGLE*/
/* Mon rectangle est coupé en 4. Selon l'orientation des différents morceaux, je change width et height.
Pour faire l'animation et dessiner un sens, je change leur point de départ (top/bottom/right ou left)*/
#recth {width:0px; height:20px; top:0px; left: 0px; display:none; position: fixed; z-index:9998;}
#rectd {width:20px; height:0px; top:0px; right: 0px; display:none; position: fixed; z-index:10;}
#rectb {width:0px; height:20px; bottom:0px; right: 0px; display:none; position: fixed; z-index:1;}
#rectg {width:20px; height:0px; bottom:0px; left: 0px; display:none; position: fixed; z-index:10;}
	
	.in{background-color:#FFFFFF;} .gr{background-color:#8CDDF3;} .illus{background-color:#66ffcc;} .wd{background-color:#ffa080;} .td{background-color:#FFE27A;} .co{background-color:#FFFFFF}

/*LOGO ET TITRE DE SECTION*/
#logo {position:fixed; top:10px; right:10px; width:89px; height:89px; visibility:hidden; z-index:9999;}
	#logo img {width:89px; height:89px;}

#titre{ position:fixed; top:10px; left:50%; 'Roboto', sans-serif; font-weight: 700; font-size:3em; list-style:none; z-index:9999; display:inline-block;}
	.gra{ color:#8CDDF3;} .illu{ color:#66ffcc;} .webd{color:#ffa080;} .tdart{color:#FFE27A} .cont{color:#FFFFFF}

/*MENU CLICKABLE*/	
#menu {position:fixed; top:10px; left:10px; width:auto; height:auto; visibility:hidden; z-index:9999; cursor:pointer;}
	#menu img {width:89px; height:89px;}

#deroule1{position:fixed; top:100px; left:160px; width:270px; z-index:9997; display:none; padding-top:10px; }
#deroule{position:fixed; top:120px; left:180px; margin-left:30px; margin-top:30px; width:270px; z-index:9998; padding-top:10px; display:none;}
	#deroule li{margin:20px 20px; 'Roboto', sans-serif; font-weight: 500; font-size:2em; list-style:none; }
	#deroule li a{color:#FFFFFF; text-decoration:none;}
	#deroule li a:hover{text-decoration:underline;}
	#deroule img{height:20px; width:20px; position:absolute; left:85%; z-index:9999; cursor:pointer;}
	.graphisme{ background-color:#8CDDF3;} .illustration{ background-color:#66ffcc;} .webdesign{background-color:#ffa080;} .trucsdart{background-color:#FFE27A;} .contact{background-color: #DADADA}

/*CONTENU*/
#contenu {width:70%; /*max-width:1200px;*/ margin:0 auto; z-index:2; position:relative;}
	.projet1{width:40%; float:left; margin-top:10px; margin-right:0px;}
	.projet2{width:40%; float:right; margin-top:50px; margin-left:0px;}
		.projet1 li, .projet2 li { margin:0 0 40px 0; display:block; position:relative;}
			.projet1 li a, .projet2 li a { display:block; width:100%; position:relative; overflow:hidden;}
				.projet1 li a img, .projet2 li a img{ display:block; width:100%; position:relative; z-index:2}
				.projet1 span, .projet2 span{text-align:center; width:100%; font-family: 'Roboto', sans-serif; font-size:2em; color: #FFFFFF; position:absolute; bottom:100px; left:0; z-index:3}

/*CLEAR BOTH*/
.retourligne {clear:both}

/* CSS UNIQUE HOMEPAGE */
#menupicto{position: relative; width:70%; max-width:1000px; margin:100px auto 0 auto; z-index:9998;}
	.picto{margin:45px 5% 0px 5%; float:left; width:23%; text-align:center;}
	.picto_center{margin:60px 13% 0px 13%; float:left; width:23%; text-align:center;}
		.picto img, .picto_center img {width:100%; display:block}
		.picto span, .picto_center span{ 'Roboto', sans-serif; font-weight: 500; font-size:2.5em; border-top:8px solid; width:100%; display:none }
		.picto .couleur1 {color:#8CDDF3} .picto .couleur2 {color:#66ffcc} .picto .couleur3 {color:#ffa080} .picto_center .couleur4 {color:#ffff99} .picto_center .couleur5 {color: #FFFFFF}
		
/* CSS UNIQUE CONTACT*/
		#text_prez{width:40%; float:left; margin-top:10px; margin-right:0px;}
			#text_prez img{margin-top:70px; z-index:100;width:415px; height:295px; position:relative;}
			#text_prez h2{border-bottom:5px solid #2c3d4d; 'Roboto', sans-serif; font-size:1.8em; color:#2c3d4d; display:inline-block; position:relative; left:35%; z-index:9998;}
			#text_prez p{position:absolute; top:460px; left:15px; text-align:left; width:500px; 'Roboto', sans-serif; font-size:1.2em; color:#2c3d4d; z-index:9998;}
		.fond_txt{position:absolute; top:400px; left:0px; width:500px; height:300px; background-color:#FFFFFF; z-index:10;}
		.fond_txt2{position:absolute; top:420px; left:30px; width:500px; height:300px; background-color:#FFFFFF; z-index:10;}
		
		#icones{float:right; margin-top:20%; margin-left:0px; width:40%; z-index:9998; position:relative; display:block;}

			#prez div{float:left; margin:5px 30px 25px 5px;}
			#prez img{height:125px; width:138px; display:block; position:relative; margin-bottom:20px;}
			#prez span{position: relative; font-family:'Roboto', sans-serif; font-size:1.2em; color:#FFFFFF; border-top:4px solid #FFFFFF;}
			
			#prez2 li p{font-family:'Khula', sans-serif; font-size:1.2em; color:#FFFFFF; border-bottom:4px solid #FFFFFF; position:relative; margin-top:40px; display:inline-block;}	
			#prez2 a img{float:left; margin:5px 20px 0 0px; position:relative; height:79px; width:79px;}

/* CSS PAGES DE PROJETS*/
#txt_projet{}
	#txt_projet h2{font-family: 'Roboto', sans-serif; font-size:2em; line-height:1.2em; color:#2c3d4d; display:inline-block; position:fixed; top:180px; left:23%; z-index:500; border-bottom:4px solid  #2c3d4d}
	#txt_projet p{position: fixed; top: 220px; left:22%; width:400px; font-family: 'Roboto', sans-serif; font-size:1.2em; color:#2c3d4d; z-index:499; padding:70px 1% 15px 1%; background-color:#FFFFFF}
	#fond_projet{position:fixed; top:200px; left:20%; width:400px; background-color:#70adc0; z-index:498;}

.min_projet{width:40%; float:right; margin-top:200px;}
	#liste1 {float:left; width:45%; margin-right:10%;}
	#liste2 {float:left; width:45%;}
		.min_projet li {margin:30px 0 0 0; display:block}
		.min_projet li a{ width:100%; overflow:hidden; display:block; position:relative;}
		.min_projet li a img{width:100%; display:block; position:relative; z-index:50}
		.min_projet li a span{width:50px; height:50px; position:absolute; top:50%; margin-top:-25px; left:50%; margin-left:-25px; z-index:51; display:block; background-image:url(../images/pictoplus.png); background-repeat:no-repeat; visibility:hidden}


/*ADAPTATIONS AUX AUTRES ECRANS    :: :: ici on met uniquement ce qui change quand on passe à un écran inf. ou sup.*/
	/* écrans moyens*/
@media screen and (max-width:1300px) {
	#contenu {width:70%;}
	#titre{font-size:2em;}	
	#deroule {font-size:0.8em}
		#deroule img{position: absolute; left:80%;}
		
		.projet1 span, .projet2 span{font-size:1.8em; top:55px;}
	
	#txt_projet h2{font-size:1.5em;left:20%;}
	#txt_projet p{left:19%; width:300px; font-size:1.1em;}
	#fond_projet{left:18%; width:300px;}
	
	.min_projet{width:35%;}
	
	/*HOMEPAGE*/
	#menupicto{width:85%; max-width:1000px; padding:15px; margin:150px auto 0 auto;}
		.picto span, .picto_center span{font-size:2em;}
	
	/*CONTACT*/
	#text_prez{width:60%; margin-left:10%;}
		#text_prez p{left:13%;}
		.fond_txt{left:10%;}
		.fond_txt2{left:15%;}
	#icones{float:left; margin-left:10%; margin-top:270px; width:85%;}

}
	/* mobile */
@media screen and (max-width:800px) {
	#logo {display:none}
	#titre{display:none}
	#menu {display:none}
	
	/*CONTENU*/
		#contenu {width:70%;}
			.projet1, .projet2 {width:100%; float:none;}
					.projet1 span, .projet2 span{font-size:1.8em; top:55px;}

	/* CSS PAGES DE PROJETS*/
		#txt_projet h2{ position:relative; left:0; top:0px; width:70%; margin:60px auto 0 auto; color: #FFFFFF; padding:0 5%; border-bottom:4px solid #8CDDF3; z-index:9999; }
		#txt_projet p{ position:relative; left:0; top:0px; width:95%; margin:0px auto; font-size:0.9em; padding:25px 5%}
	#fond_projet{display:none;}
	.min_projet{position:relative; float:none; width:100%; margin:0 auto; margin-top:30px;}
		#liste1, #liste2 {float:none; width:100%; margin:0%;}
			.min_projet li a{ width:100%;} .min_projet li a img{width:100%; max-width:300px}

	/*HOMEPAGE*/
	#menupicto{position:relative; width:70%; max-width:300px; margin:100px auto 0 auto;}
		.picto, .picto_center{margin:10px 0px 10px 0px; float:none; width:100%;}
			.picto span, .picto_center span{font-size:2em;}
		
	/*CONTACT*/
	#text_prez{width:90%; margin-left:0px; float:none;}
			#text_prez img{margin-top:30px; width:207px; height:147px}
			#text_prez h2{font-size:1.2em; color:#FFFFFF; left:25%; border-bottom:3px solid  #FFFFFF;}
			#text_prez p{position:relative; left:0px; top:0px; height:auto; width:100%; font-size:0.8em; background-color:#FFFFFF; padding:10px;}
		.fond_txt{display:none} .fond_txt2{display:none}
	#icones{float:none; margin:5px; width:100%;}
	#prez div{float:left; margin:5px 10px 10px 10px; border-bottom: 3px solid #FFFFFF; height:auto; width:140px;}
			#prez img{margin-bottom:5px; height:62px; width:64px;}
			#prez span{font-size:0.8em; border-top:none; text-align:center}
			#prez2 li p{font-size:0.8em; color:#FFFFFF; border-bottom:3px solid #FFFFFF; margin-top:10px;}	
			#prez2 a img{margin:5px 17px 5px 17px; height:59px; width:59px;}
	
}