html {font-size:100%}
body {font-size:1em; background-color:white; margin:0; padding:0; width:100%}

#chargement {width:30px;height:30px;position:fixed;z-index:9999;top:50%;left:50%;margin-left:-15px;margin-top:-15px; background-image:url(../Images/ajax-loader.gif);background-repeat:no-repeat}

/*	 SECTION JS  */
.avecJS #chargement {display:block}
#images-cacher{display:none;}
#precedent {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 300px;
    left: 310px;
    z-index: 999;
    cursor: pointer;
	}
	
#suivant{
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
	width: 50px;
    height: 50px;
    position: absolute;
    top: 300px;
    right: 0px;
    z-index: 999;
    cursor: pointer;
	}
	
#image {
    width: auto;
    height: auto;
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    z-index: 1;
	}

#galerie {
    width: 700px;
    height: 483px;
    position: relative;
    margin-left: 385px;
    overflow: hidden;
	}




#pageExt {width:100%; overflow:hidden;  min-width:1150px;}
#page { width:1150px; margin:0 auto; background-color:#FFFFFF; }
.avecJS  #corp  {visibility:hidden}



#MenuScroll {  background-color:#FFFFFF;
			   width:100%;
			   position: fixed;
			   top:0px;
			   left:0px;
			   z-index:9999;
			   display:none;
			   padding:5px;
			   }
#MenuX { width:1150px; margin:0 auto;}
 #MenuX ul {list-style:none; margin:20px 50px 0 0; padding:0; font-size:1.1em; float:right}
		
  #MenuX ul li {display:inline-block; margin:0; padding:0 0 0 30px}
		
   #MenuX ul li a {text-decoration:none;font-family: 'Quicksand', sans-serif;font-weight:300; padding:0px; color:#7AF0BD; text-transform:uppercase;}
    #MenuX .bold {font-weight:700;font-size:1em;} 
	
	  #MenuX a:hover {color:black;}
			

#entete {background-color:#ffffff; width:100%; margin:0; padding:15px 0 15px 0 }

.avecJS  #entete  {visibility:hidden}	
	
	
	#logo {margin-top:0px; margin-left:40px; float:left; width:200px; height:200px} 		  
	
	
	#menu {list-style:none; margin:100px 50px 0 0; padding:0; font-size:1.1em; float:right}
		
		#menu li {display:inline-block; margin:0; padding:0 0 0 30px}
		
	       #menu li a {text-decoration:none;font-family: 'Quicksand', sans-serif;padding:0px;color:#000000; text-transform:uppercase;}
	
               #menu .bold {font-weight:700;font-size:1em;
			    } 
	
	         #menu a:hover { color:#7AF0BD;}
	
				 
#corp{ width:100%;  background-color:white; position:relative; padding-top:10px; }

  
				 
			    #points {position:absolute; display:block; width:235px; height:235px;
						 top:0px; left:-90px;
						 z-index:9999; z-index:9}
						 
			     #forme1 {position:absolute; display:block; width:235px; height:235px;
						 top:580px; left:-20px;
						 z-index:9999; z-index:9}	
						 
				#forme2 {position:absolute; display:block; width:235px; height:235px;
						 top:635px; left:20px;
						 z-index:9999; z-index:9}
			
			
	            #rectangle { height:680px;
			             background-color:#7AF0BD;
						 width:250px;
						 position:absolute;
						 top:0px; left:0; 
						 margin-left:0px;
						 z-index:8;
						}
		
	
           #titre1{ display:inline-block; 
			       margin:10px 0 0 135px;
				   padding:0px 0 5px 50px;
				   font-size:1.5em;
				   font-family: 'Quicksand', sans-serif;
				   text-transform:uppercase;
				   /*border-bottom:1px solid #000000;*/
				   z-index:200; position:relative; font-weight:normal ; color:#000000;
				   }
				   
				   
				   
			#trait1 {height:1px; margin:5px 0 0 135px; width:0; display:block; background-color:#000000;  z-index:200; position:relative;}

	
		#Projets { list-style:none; margin-left:140px; padding:0; z-index:200; position:relative;}
				 
          #Projets li {float:left ; margin-top:20px; width:235px; margin-right:20px}
	    
		    #Projets li a{ background-color:#171717;display:block; color:#FFFFFF;
					  text-decoration:none; 
					  position:relative; z-index:8;
					  overflow:hidden; 
					  width:235px;
					  height:235px;
					  
					  }
					  
		#Projets li a img {width:100%; display:block; position:relative; z-index:50;}
		
		#Projets li a span {display:block; width:100%; text-align:center; position:absolute; bottom:0; left:0; color:#FFFFFF;padding-top:10px;padding-bottom:15px;text-transform:uppercase;letter-spacing:1px;font-family: 'Quicksand', sans-serif;background-color:#AFAFAF;font-weight:300;z-index:51}
		
			#Projets li a span i { display:block; font-size:1em; font-style:normal}
			#Projets li a span strong { display:block; font-size:0.8em; font-weight:normal; text-transform:none; margin-top:5px;}
		
		
		
	
	    #Projets .sansmarge{ margin-right:0}
	
			#page .retourligne {clear:both}
		
		
	#Profil {position:relative;margin-top:190px; padding-bottom:200px;}
	
	
	 #rectangle2{ height:450px;background-color:#7AF0BD;width:200px;position:absolute;top:0px;right:0;;z-index:8;}
						 
						 
					 
						 
	 #titre2{      display:inline-block;
				   padding:0px 100px 5px 0px;
				   margin:45px 60px 0 0;
				   float:right;
				   font-size:1.5em;
				   font-family: 'Quicksand', sans-serif;
				   text-transform:uppercase;
				   z-index:200; position:relative;
				   }
				   
	#trait2 {height:1px; margin:5px 60px 0 0; float:right; width:0; display:block; background-color:#000000;  z-index:200; position:relative;}
				   
	#photoprofil{position:relative; background-color:#145295; width:350px; height:200px; margin-top:30px; display:block; float:left; }
						 
	#para {display:block;  width:400px;
				        position:relative; z-index:9; float:left; margin-top:30px;
						margin-left:50px;text-align:justify;font-size:0.9em;font-family: 'Quicksand', sans-serif;}
						
	
	/*.avecJS .formes {visibility:hidden}*/
	
	#forme3 {position:absolute; display:block; width:235px; height:235px;
						 top:120px; right:0; margin-right:-100px;
						 z-index:9999; z-index:9}
						 
						 								
  #Contact{position:relative;margin-top:50px;padding-bottom:170px}				
	#rectangle3{height:500px; background-color:#7AF0BD; width:250px; position:absolute; z-index:7; top:0; left:0}
	
	#contenuContact {margin-top:100px;  margin-left:470px; width:400px;}
		#contenuContact h1  {display:block; width:100%; text-align:center; }
		
		#contenuContact h1 i {padding:5px 0; position:relative;display:inline-block; width:100%;font-family: 'Quicksand', sans-serif; font-weight:400; font-size:1.2em; font-style:normal}
			
			#contenuContact h1 span { position:relative;display:inline-block;font-family: 'Quicksand', sans-serif;font-weight:400;font-size:0.7em;color:#7AF0BD;font-style:italic; padding:7px 0 5px 0}

		#contenuContact p {position:relative;display:block; margin-top:20px;
		text-align:center;font-family: 'Quicksand', sans-serif;font-weight:400; font-size:1.1em; letter-spacing:1.5px; padding:10px 0}
	
	#mail {text-decoration:none;color:#000000;}
	#contenuContact  a:hover{color:#7AF0BD}
	
	#titre3{       
				   display:inline-block; 
			       margin-left:150px;
				   margin-top:50px;
				   padding:0px 0px 5px 50px;
				   font-size:1.5em;
				   font-family: 'Quicksand', sans-serif;
				   text-transform:uppercase;
				   z-index:8; position:relative
				   }	
				   
	 #trait3 {height:1px; margin:5px 0 0 150px; width:0; display:block; background-color:#000000;  z-index:200; position:relative;}			   
				   
	#forme4 {position:absolute; display:block; width:235px; height:235px;
						 top:150px; left:95px;
						 z-index:9999; z-index:9}
						 
	#forme5 {position:absolute; display:block; width:235px; height:235px;
						 top:320px; left:155px;
						 z-index:9999; z-index:9}
    
	#forme6 {position:absolute; display:block; width:235px; height:235px;
						 top:400px; left:135px;
						 z-index:9999; z-index:9}
						
     
	/*Page projet fix*/
	
	#rectanglep2{min-height:490px;background-color:#DADADA;width:250px; margin-left:0px; position:absolute; top:0; left:0; z-index:8;}
		#rectanglep2 h1 {font-size:1.1em; margin-top:0px; text-align:center;font-family: 'Quicksand', sans-serif;font-weight:400;text-transform:uppercase; color:#6A6A6A; padding:120px 0 0 0} 
		#texte {font-size:0.9em;text-align:justify; padding-left:20px; padding-right:20px;font-family: 'Quicksand', sans-serif;font-weight:300;}
					 
	#titre1p2{ display:inline-block;   margin-left:135px;  margin-top:30px;  padding:0px 0 5px 50px; font-size:1.6em;font-family: 'Quicksand', sans-serif;text-transform:uppercase; z-index:200; position:relative }
	#traitp2 {height:1px; margin:5px 0 0 135px; width:0px; display:block; background-color:#000000;  z-index:200; position:relative;}
			
/*	#imagesProjet {margin-left:280px; width:870px; margin-top:10px; position:relative;}
		#imagesProjet img {width:100%; display:block; margin:15px 0 0 0;}
		#imagesProjet .tailleA {width:65%; margin-left:18%}
		#imagesProjet .tailleZ {width:95%; margin-top:2%;}
		#imagesProjet .tailleX {width:100%; margin-top:5%;}
		#imagesProjet .tailleA1 {width:40%;float:left; margin-right:2%;margin-left:4%}
		#imagesProjet .tailleA2 {width:50%;float:left;}	  		   	   	
		#imagesProjet .tailleB1 {width:47%; float:left; margin-right:5%}	   			
		#imagesProjet .tailleB2 {width:47%; float:left;}
	    #imagesProjet .tailleC1 {width:25%; float:left; margin-right:6% }	   			
		#imagesProjet .tailleC2 {width:25%; float:left;margin-right:6% }
		#imagesProjet .tailleC3 {width:25%; float:left;}
*/
#forme11 {position:absolute; display:block;top:450px; left:160px;z-index:9;width:100px;height:100px}	
#forme22 {position:absolute; display:block;top:470px; left:170px; width:100px;height:100px; z-index:999}


	
	
	
@media screen and (max-width: 1180px) {
#pageExt {width:100%; min-width:980px;}
#page { width:980px;}
	    #rectangle { height:580px; width:200px;}
	    #Projets .sansmarge{ margin-right:20px}	
		
		#para {width:300px;}
		#contenuContact {margin-left:400px; width:400px;}

#MenuX { width:980px; margin:0 auto;}

#imagesProjet {margin-left:280px; width:700px; }
	
#texte {font-size:1.1em;text-align:justify; padding-left:7px; padding-right:7px;font-family: 'Quicksand', sans-serif;font-weight:300;}

}