@CHARSET "UTF-8";



/****************************/
/*  Infos Fichier			*/
/****************************/

/* auteur: PION Mickael*/
/* Date de création: 29/06/2013 */








/****************************/
/*  Fonts					*/
/****************************/
/* Import Fonts Googles */
@import url(http://fonts.googleapis.com/css?family=Fredericka+the+Great|Cabin+Sketch|Exo|Gruppo|Michroma); 							/* Polices style moderne */
@import url(http://fonts.googleapis.com/css?family=Rock+Salt|Gloria+Hallelujah|Zeyada|Nothing+You+Could+Do);  						/* Polices style écriture manuelle */
@import url(http://fonts.googleapis.com/css?family=Permanent+Marker);  																/* Polices style marqueur */




/*  Variables */

/****************************/
/*  Styles Balises			*/
/****************************/

*{
	
	border:					solid 0px black;

}

html{

	position:				absolute;
	top:					0px;
	left:					0px;
	
	width: 					100%;
	height:					100%;
				
	margin:					0px;
	padding:				0px;
	border-width:			0px;	

}

.fond{
	
	position:				absolute;
	top:					0px;
	left:					0px;
	
	width:					100%;
	height:					100%;
	
}

body{



	position:				absolute;
	top:					0px;
	left:					0px;
			
	width:					100%;
	height:					max( 100%, auto );
	
	text-align:				center;
	
	margin:					auto;
	padding:				auto;
	border-width:			0px;	
	
	background-color: 		#1b2e5c;
	
	background-image: 		url( 'Images/Fond Bleu.svg')  );
	

}

header{

	background-color: 		#1b2e5c;
	background-image:		url(  'Images/Fond Blanc.svg'   );
	width:					100%;
	height:					15%;
	
}

textarea{

	width:					500px;
	height:					150px;
	
}


a{ text-decoration: 		none; }


.divMenu{
	text-align: center;
	z-index:	1000;


}

.itemMenu, .itemMenuSecondaire{

	font-family:		'Gruppo', Sans-Serif;
	font-size:		20px;
        font-weight: 		normal;

	color: white;
	z-index:	1000;


}



.itemMenuSecondaire{

	font-family:		'Gruppo', Sans-Serif;
	font-size:			15px;

	color: white;
	z-index:	1000;


}

.itemMenu:hover, .itemMenuSecondaire:hover{

	color: white;
        text-shadow: 0px 0px 2px #ffffff;


}

.separateurMenu{

	font-family:		'Gruppo', Sans-Serif;
	font-size:			50px;

	color: black;
	z-index:	1000;


}




.banniere-tableau{

	width:					100%;
	height:					100%;

}

.icone, .icone-contact-gauche, .icone-contact-droite, .icone-contact-centre{

	width:				auto;
	height:				50px;
	opacity:			1.0;

}

.icone-contact-gauche{

	float:				right;
	height:				35px;

}

.icone-contact-droite{

	float:				left;

}

.icone-contact-centre{

	/*float:			left;*/

}

.titre, .titreAcceuil{

	font-family:		'Michroma', Sans-Serif;
	font-size: 		max( 15px, 25% );
	text-decoration: 	none;
	color: 			#FFFFFF;
	opacity:		1;
	display:		inline-block;
	margin:			15px;
}

.titreAcceuil{

	font-size:	 	35px;	
	font-size:	 	5vw; /*55px;	*/
        line-height:		5vw;
        margin:                 0px;
        
        ;

}

.sous-titre, .sousTitreAcceuil{

	font-family:            'Gruppo', Sans-Serif;
	font-size: 		max( 10px, 15% );
	text-decoration:        none;
	color: 			#FFFFFF;
	opacity:		1;
	display:		inline-block;
	margin:			15px;
}


.lienSuppression, .textConnexion{

	font-family:		'Michroma', Sans-Serif;
	font-size: 		max( 10px, 15% );
	text-decoration:        none;
	color: 			#999999;
	opacity:		1;
	display:		inline-block;
	margin:			15px;
}

.lienSuppression:Hover, .textConnexion:Hover{

	color: 			#FFFFFF;
	opacity:		1.0;

}

.sousTitreAcceuil{

	padding-top:		0px;
	margin:                 0px;
        
	font-size:	 	20px;
	font-size: 		2vw;
        
	line-height:		2vw;
	text-indent: 		50px;
        text-indent: 		1vw;
        
       
}

.divTitreAcceuil{

	/*width: 		60%; */
        /*height:               30%;*/

	position: 		absolute; 
	top: 			6vw; 
	right: 			5%; 
        
       	
	z-index: 			1;
	
	text-align:			right;

}

.texte, .texteAcceuil, .texteAcceuilTitre, .labelFormulaire, .submitFormulaire{

	font-family:                    'Gruppo', Sans-Serif;
	font-size: 			20px;
	text-decoration:                none;
	color: 				#555555;

}

.ligneFormulaire{

	width:                          100%;
        display:                        table-row;
        padding:                        5px;

}

.labelFormulaire, .champFormulaire, .erreurFormulaire, .submitFormulaire{

	text-align:			left;
	font-size: 			15px;
	color: 				#AAAAAA;
        display:                        table-cell;

}

.labelFormulaire{
        font-size: 			25px;
	text-align:			right;
        width:                          30%;

}

.champFormulaire{

	text-align:			left;
	color: 				#333333;
        width:                          100%;

}

.erreurFormulaire{

	text-align:			left;
	color: 				#AA2222;
        width:                          30%;

}

.submitFormulaire{

        font-family:                    'Michroma', Sans-Serif;
	text-align:			center;
	font-size: 			20px;
	color: 				#222222;
        width:                          100%;

}

.submitFormulaire:hover{

        cursor:                         pointer;
	color: 				#000000;

}

.divPrincipaleAcceuil{

	position: 		relative;
	left:			20%;
        
        margin:                 0px;
        padding:                0px;
               
	width:			60%;


}

.divFondTexteAcceuil, .divTexteAcceuil{

	position: 			relative;
	/*top: 				103px; 
	left: 				629px;*/
        
        margin:                         0px;
        padding:                        0px;

}


.divFondTexteAcceuil{

	background-color:               #555599;
	opacity:			0.5;
	
	z-index: 			1;

}

.divTexteAcceuil {

	/*height: 			242px; */
	width: 				100%;   	 
	
	position: 			relative;
	/*top: 				150px; */
	left: 				0px;
	
	z-index: 			2; 
	opacity:			1.0;
       
}

.texteAcceuil {

	font-size: 			20px;
	color: 				#FFFFFF;
	text-align:			justify;
        line-height:                    18px;

}

.texteAcceuilTitre{

	font-size: 			30px;
	color: 				#FFFFFF;
        position: 			relative;
        text-align:			left;
        line-height:                    30px;

}

.divImageMaisonAcceuil{
	
	position:   absolute; 
        
	right:       -3vw;  
	top:      3vw;
        
        width:      70%;
        /*height:     50%;*/
	
	z-index:    -1; 

}


.imageMaisonAcceuil{

	/*height:     100%; */
	width:      100%;
	
	z-index:    -1; 
	
	opacity:    0.18;

}


.divImageBateauAcceuil{

	position:   absolute;
	/*left:       40%;  
	top:        20px;*/
        	left:       -4vw;  
	top:        -4vw;
        
               
        width:      60%;
        /*height:     40%;*/
	
	z-index:    -1; 

}

.imageBateauAcceuil{

	/*height:     100%; */
	width:      100%;
	
	z-index:    -1;
	
	opacity:    0.18;

}

.imageFondAcceuil{

	width:      100%;  
	
	position:   relative;
	left:       0px;  
	top:        0px; 
        
               
        margin:     0px;
        padding:    0px;
	
	z-index:    -2;

}







.icone-contact-gauche-pageContact, .icone-contact-droite-pageContact, .icone-contact-centre-pageContact{
	
	width:	100px;
	height:	100px;
	
	opacity:	1.0;
	
}




page{

	width:					100%;
	height:					90%;
	
}

.projet-div-agence{

    width:                      100%;
    margin:                     auto;
    padding:                    auto;
    text-align:                 center;
    margin-bottom:              30px;

}

.projet-miniature, .projet-miniature-separateur{

	width:			300px;
	height:			300px;
	
	display:		inline-table;
	
	padding:		0px;
        margin:		0px;
	margin:			5% auto;
        margin-top:             30px;
        margin-bottom:          30px;
	margin-left:            20px;
	margin-right:           20px;
	
	border:			7px solid #DDDDDD;
	
	position:		relative;
        
        vertical-align:         top;
        
}


.projet-miniature-separateur{

	background-color:   white;
}



 
               

.projet-miniature:hover{

	border:			7px solid white;
}

.projet-image{

	width:			300px;
	height:			300px;
        margin:0px;
        padding:0px;
	/* saturation */
    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");
    -webkit-filter: grayscale(25%);
    -moz-filter:    grayscale(25%);
    -ms-filter:     grayscale(25%);
    -o-filter:      grayscale(25%);
    filter: 		gray;	
	
	opacity:		0.85;


}


.projet-image-separateur-crozon{

	width:			auto;
	height:			250px;
         
        position:           relative; 
        top:                    20px;
}

.projet-image-separateur-passy{

	width:			250px;
	height:			auto;
  
        position:           relative;     
        top:                    40px;
        margin:             auto;
}

.projet-image:hover{
	
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
    cursor: 		pointer;
	opacity:		1.0;
}



.projet-miniature-nom{
	
	font-family:		'Gruppo', Sans-Serif;
	font-size: 			25px;
	text-decoration: 	none;
	text-align:			right;
	color: 				#444444;
	
	position:			absolute;
	right:				15px;
	bottom:				25px;
	
	background-color:	white;
	
	opacity:			0,5;
	
	z-index:			10;
	
	
}


.projet-miniature-nom-decale, .projet-miniature-nom-decale-separateur{
	
	font-family:		'Gruppo', Sans-Serif;
	font-size: 			25px;
	text-decoration: 	none;
	text-align:			right;
	color: 				#555555;
	
	position:			absolute;
	right:				0px;  
	bottom:				7px;
	width:				100%;
	padding:			0px;
	
	background-color:	white;
	
	opacity:			0.5;	
	
	z-index:			9;	
	
	
}

 .projet-miniature-nom-decale-separateur
 {
 
 color: 				1b2e5c;
    opacity:			1.0;
 }


.projet-miniature-logo{
	
	height:                 25px;
        margin-right:           15px;
        margin-left:             7px;
        opacity:                0.8;
        	
	
}


.projet-nom{
	
	font-family:		'Gruppo', Sans-Serif;
	font-size: 			50px;
	text-decoration: 	none;
	text-align:			left;
	color: 				#FFFFFF;

}

.projet-description{
	
	font-family:		'Michroma', Sans-Serif;
	font-size: 			15px;
	text-decoration: 	none;
	color: 				#999999;

}



main{
	

}


footer{

	background-color: 		#1b2e5c;
	width:					100%;
	height:					15%;

}




















.contact-titre-pageContact{
	
	font-family:		'Michroma', Sans-Serif;
	font-size: 			20px;
	text-decoration: 	underlined;	
	color:				#FFFFFF;
	opacity:			1;	
}


.contact-contenu-pageContact{
	
	font-family:		'Michroma', Sans-Serif;
	font-size: 			15px;
	text-decoration: 	none;	
	color:				#999999;
	
}

.contact-div{
	
	text-align:				center;
        vertical-align:                         text-top;
	top:					0px;
	width:					100%;
	padding:				0px;
        display:                                table;

	
}

.contact-div-row{

        width:                                  100%;
        text-align:				center;
        display:                                table-row;
    

}



.contact-div-gauche, .contact-div-droite, .contact-div-gauche-pageContact, .contact-div-droite-pageContact{

        display:                                table-cell;
        width:                                  50%;

}


.contact-div-centre, .contact-div-centre-pageContact{

        display:                                table-cell;
        width:                                  100%;

}


.contact-div-gauche-pageContact{
	
	text-align:				right;
        vertical-align:                         text-top;
	top:					0px;
	padding:				10px;
        display:                                table-cell;
	
}

.contact-div-centre-pageContact{
	
	text-align:				center;
        vertical-align:                         text-top;
        display:                                line;
	top:					0px;
	width:					100%;
	padding:				10px;
        margin:                                 0px;
   
	
}

.contact-div-droite-pageContact{
	
	text-align:				left;
        vertical-align:                         text-top;
	top:					0px;
	padding:				10px;
	
}






.contact-div-gauche{
	
	text-align:				right;
        vertical-align:                         text-top;
	top:					0px;
	/*width:					49%;*/
	padding:				10px;
        display:                                table-cell;
	
}

.contact-div-centre{
	
	text-align:				center;
        vertical-align:                         text-top;
	top:					0px;
	/*width:					49%;*/
	padding:				10px;
	
}

.contact-div-droite{
	
	text-align:				left;
        vertical-align:                         text-top;
	top:					0px;
	/*width:                                49%;*/
	padding:				10px;
         display:                                table-cell;
	
}

.contact-titre{
	
	font-family:                    'Michroma', Sans-Serif;
	font-size: 			15px;
	text-decoration:                underlined;	
	color:				#FFFFFF;
	opacity:			1;	
}


.contact-contenu{
	
	font-family:                    'Michroma', Sans-Serif;
	font-size: 			10px;
	text-decoration:                none;	
	color:				#999999;
	
}


a>.contact-contenu:hover, a>.contact-contenu-pageContact:hover{
	
	color:                          #FFFFFF;
	font-weight:                    bold;
}









@media only screen and (max-width: 600px) {
    /* For mobile phones: */
	.projet-miniature, .projet-miniature-separateur{

		width:		90%;
		height:		auto;
		margin-left: 5%;
		margin-right:5%;

	}
	
	
	.projet-image{

		width:			100%;
		height:			auto;

	}	
	
	
	.contact-div, .contact-div-row, .contact-div-gauche, .contact-div-centre, .contact-div-droite, .contact-div-gauche-pageContact, .contact-div-centre-pageContact, .contact-div-droite-pageContact{
		
		width:                  100%;
                display:                block;
                text-align:             center;
		
	}
        
        
        .ligneFormulaire, .labelFormulaire, .champFormulaire, .erreurFormulaire, .submitFormulaire{

                width:                  100%;
                display:                block;
                text-align:             left;

        }
        
        .submitFormulaire{

                text-align:             center;

        }
        
        .divPrincipaleAcceuil{

                left:			0%;
                width:			100%;

        }
  
        .titreAcceuil{

                font-size:	 	35px;	
                font-size:	 	8vw;
                line-height:		8vw;

        }

        .sousTitreAcceuil{

                font-size: 		4.5vw;

                line-height:		4.5vw;
                text-indent: 		1.25vw;

        }

        .divTitreAcceuil{

                top: 			7.5vw; 

        }        
        
}