body
            {
                margin: 0px;
                padding: 0px;
                /* evite l'effet gras quand la police en en blanc */
				/* 
-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
 */
				
                /* evite l'effet de surbrillance du texte quand on clique deux fois dessus */
        		-webkit-user-select: none; // For Webkit;
				-moz-user-select: none; // For Mozilla
				-ms-user-select: none; // For Webkit;
				-o-user-select: none; // For Mozilla
				user-select: none; // For Mozilla
				overflow: hidden;
				background-color: white;
				font-family: 'Open Sans', sans-serif;
            }
            
            
            a
            {
            	text-decoration: none;
            	color: white;
            }
            
            h1
            {
            	font-weight: 300;
            	font-size: 2.1em;
            }
            
            .return
		{
			font-size: 0.9em;
			color: white;
			height: 25px;
			width: 100%;
			padding:4px;
		}
		
	.error
		{
			
			color: red;
			
		}
		
	.good
		{
			
			color: white;
			
		}

            

/*  loader    */  
        
.loader{
	background-color: black;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
}
	.loader img{
		position: absolute;
  				left:50%;
  				top:50%;
  				transform:translate(-50%,-50%);
  				-webkit-transform:translate(-50%,-50%);
  				-moz-transform:translate(-50%,-50%);
  				-ms-transform:translate(-50%,-50%);
  				-O-transform:translate(-50%,-50%);
	}
            

            
/*  partie 1     */     


  
            
            #partie1
            {
            	background: url('images/fond1.jpg')  fixed;
            	height: 850px;
            	width:100%;
  		    	position: relative;
  		    	overflow: hidden;
            }
            
         	.st1
         	{
         		width: 5500px;
         		         }
            
            #bloc-logo
            {
            	width: 700px;
            	position: absolute;
            	top: 50%;
            	left: 50%;
            	transform:translate(-50%,-50%);
  				-webkit-transform:translate(-50%,-50%);
  				-moz-transform:translate(-50%,-50%);
  				-ms-transform:translate(-50%,-50%);
  				-O-transform:translate(-50%,-50%);
  				
  			}
        
            svg
            {
            	width: 700px;
            	margin: 0 auto;
            	display: block;
            }
            
            
            
          	
            
            #voir_projets
            {
            	display:block;
            	width: 400px;
            	text-align: center;
            	margin: 0 auto;
            	margin-top: 100px;
            	padding: 10px;
            	font-size: 18px;
            	letter-spacing: 10px;
            	transition:0.2s;
 				-webkit-transition:0.2s;
  				-ms-transition:0.2s
            }
            
            #voir_projets:hover
            {
            	
            	color:rgba(0, 174, 255, 1);
            }
            

            
          
            
            
            
/*  partie 2     */  

			#partie2
            {
            	width: 100%;
            	background-color: white;
            	padding-top:0px;
            	padding-bottom:30px;
            	margin:0;
        		text-align: center;
        		position: relative;
        		z-index: 40;
        		overflow: hidden;
            }
           
            
           
        	.presentation
        	{
        		color: black;
        		margin:0px;
        		margin-bottom: 0px;
        		padding: 18px;
        		text-align: center;
        		letter-spacing: 17px;
        		z-index: 20;
        		
        	}
        	
        	
        	#text-presentation
        	{
        		color: #68686b;
        		font-size: 1.2em;
        		width: 50%;
        		margin: auto;
        		margin-top: 20px;
        		Line-Height:1.3em;  
				
				     	
			}
			
			#partie2 hr
			{
				background-color: black;
				margin-top: 20px;
            	margin-bottom: 0px;
			}
			
			.portraits-cercle-ombre-container
			{
				width: 250px;
        		height: 250px;
        		display: inline-block;
        		position: relative;
        		margin-right:15px;
        		margin-left:15px;
        		margin-top:30px;
        		
			}
			
			.images-description-noir
			{
				background-color:rgba(0, 149, 255, 0.8);
				width: 250px;
        		height: 250px;
        		border-radius: 150px;
        		opacity: 0;
        		transition:0.3s;
        		-webkit-transition:0.3s;
        		-moz-transition:0.3s;
        		overflow: hidden;
        		text-align: center;
			}
			
			.images-description-noir h2
			{
				color: white;
				font-size: 20px;
				margin-top: 105px;
			}
			
			.images-description-noir h3
			{
				color: white;
				font-size: 15px;
				margin-top: -18px;
				
			}
			
			
			.cercle
			{
				position: absolute;
				top:-10px;
				left: -225px;
				fill:none;
				stroke:#13202a;
				stroke-width:1;
				stroke-miterlimit:10;
				z-index: -20;
				
			}
			
			
			
			
        	
        	.portraits
        	{
        		width: 250px;
        		height: 250px;
        		border-radius: 150px;
        	}
        	
        	.portraits:hover
        	{
        		cursor: pointer;
        	}
        	
        	.portraits:hover .images-description-noir 
			{
				opacity:1;
			}

        	#portrait1
        	{
        		background-image: url("images/portrait1.jpg");
        	}
        	
        	
        	
        	#portrait2
        	{
        		background-image: url("images/portrait2.jpg");
        	}
        	
        	#portrait3
        	{
        		background-image: url("images/portrait3.jpg");
        	}
        	
        	.ombres
        	{
        		margin:0;
        		display:none;
        	}
        	
        	
        	
        	
        	
        	
        	
/*  partie 3 */ 
         	
         	#header-partie3
        	{
        		background: url("images/fond2.jpg") fixed;
        		padding:120px;
        	}
         	
         	
        
        	#partie3
        	{
        		background-color: #162634;
        		width: 100%;
        		color: white;
        		overflow:hidden;
        	}
        	
        
        	
        	#projets
        	{
        		color: white;
        		text-align: center;
        		letter-spacing: 17px;
        		z-index: 20;
				margin-top:-10px;
        	}
        	
        	nav
        	{
        		text-align: center;
        		font-size: 19px;
        		line-height: 27px;
        		margin-top: 50px;
        		letter-spacing: 4px;
        	}
        	
        	hr
            {
            	width: 250px;
            	height: 0px;
            	margin-top: 20px;
            	margin-bottom: 20px;
            }
            
        	nav ul
        	{
        		list-style-type: none;
        		margin:0;
				padding:0;
        	}
        	
        	nav a
        	{
        		text-decoration: none;
        		color: white;
        		transition:0.3s;
        		-webkit-transition:0.3s;
        		-moz-transition:0.3s;
        		-ms-transition:0.3s;
        		-o-transition:0.3s;
        	}
        	
        	nav a:hover
        	{
        		color:rgba(0, 149, 255, 1);
        	}
			
			#nos-projets
			{
				font-size: 0; /* enleve les espaces blancs du au inline block dans les elements enfants */
				margin:  0 auto;
				width: 80%;
				text-align: center;
			}
			
		
			#nos-projets .container
			{
				display: inline-block;
				vertical-align: top;
				font-size: 20px;
				position: relative;
				width: 350px;
				height: 250px;
				background-size: cover;
				overflow: hidden;
				margin:2px;
				
			}
			
			#nos-projets .container:hover .titre
			{
				position: absolute;
				top: 0px;
				cursor: pointer;
			}
			
			.photo
			{
				width: 350px;
				height: 250px;
				margin: 0;
				
				-webkit-filter: grayscale(1);
				filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
				filter: grayscale(1);
				filter: gray;
			}
			
			
			
		
			
		
			
			.titre
			{
				position: absolute;
				top: 241px;
				left:0;
				z-index: 10;
				width: 100%;
				height: 250px;
				text-align: center;
				background-color:rgba(0, 149, 255, 0.9);
				margin: 0;
				padding-top: 110px;
				transition:0.3s;
 				-webkit-transition:0.3s;
  				-ms-transition:0.3s;
  				font-size: 17px;
  				font-weight: bolder;
  			}
  			
  			
			.categorie 
			{
				margin: 0;
				padding-top: 115px;
				font-size: 20px;
				background-color: rgba(0,0,0,0.9);
				width: 100%;
				height: 250px;
				cursor: auto;
				font-weight: 700;
				letter-spacing: 4px;
			}
			
			
			
			
			.sections-par-dates
			{
				margin:30px;
			}
			
			
			
			.loupe
			{
				position: absolute;
				left:50%;
  				top:41%;
  				transform:translate(-50%,-50%);
				z-index: 13;
				width: 20px;
				height: 20px;
			}
			
			
			
			
			
			
/*  partie 4 */ 
         	
        
        	#partie4
        	{
        		width: 100%;
        		background-color:#0095FF;
        		background: url("images/fondcontact.jpg")  fixed;
        		margin:0;
        		padding-bottom:10px;
        		text-align:center;
        	}
			
			#contact
			{
				padding-top: 35px;
				padding-bottom: 30px;
				margin: 0;
				color: white;
				letter-spacing: 40px;
        		text-align: center;
        		letter-spacing: 17px;
        		z-index: 20;
			}
			
			form
			{
				width: 300px;
				margin:0 auto;
				text-align: center;
			}
			
			input
			{
			background-color: rgba(255,255,255,0.2);
			border-radius: 3px;
			border: 0;
			width: 250px;
			height:40px;
			color: white;
			margin-top: 12px;
			font-size: 15px;
			outline: 0;
			text-align: center;
			transition:0.6s;
 			-webkit-transition:0.4s;
  			-ms-transition:0.4s;
			
			}
			
			input:hover
			{
				background-color: rgba(255,255,255,0.4);
			}
		
		
			input:focus
			{
				background-color: white;
				width: 300px;
				color: rgba(0, 174, 255, 1);
			}
		
		::-webkit-input-placeholder { color:white; }
::-moz-placeholder { color:white; } /* firefox 19+ */
:-ms-input-placeholder { color: white; } /* ie */
input:-moz-placeholder { color: white; }
			
			textarea
			{
				background-color: rgba(255,255,255,0.2);
				border-radius: 3px;
				border: 0px;
				width: 250px;
				height:80px;
				color: white;
				margin-top: 12px;
				font-size: 15px;
				outline: 0;
				text-align: center;
				transition:0.6s;
 				-webkit-transition:0.4s;
  				-ms-transition:0.4s;
			}
			
			textarea:hover
			{
				background-color: rgba(255,255,255,0.4);
			}
			
			textarea:focus
			{
				background-color: white;
				width: 300px;
				color: rgba(0, 174, 255, 1);
			}
			
			input[type="submit"]
			{
				color: white;
				width: 254px;
				cursor:pointer;
			}
			
			#coordonnees
			{
				color:white;
			}
			
			#coordonnees h4
			{
				font-size:20px;
			}

			
			
			footer
			{
				text-align: center;
				margin-top:60px;
				padding-bottom: 3px;
				padding-top: 3px;
				font-size: 13px;
				font-family: "arial", sans-serif;
				opacity:0.5;
			}