@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);



html,body{

	

	background-color:#F3F4F5;

	font-family: 'Raleway', sans-serif;

	text-rendering: optimizeLegibility;

	font-size:14px;



}



a:link, a:visited {

	color:#000;

}



header{

	

	position:relative;

	

	width:100%;

	height:150px;

}



header h1{

	text-align: center;

	font-size: 40px;

	padding:40px;

}



header h2{

	position:absolute;

	left:-9999px;

}



header nav ul{

	position:absolute;

	bottom:0px;

	width: 100%;

	list-style-type: none;

    margin: 0 auto;

    padding: 0;

    overflow: hidden;

    



}



header nav li{

	float:left;

	width: 12.5%;

	margin: 0 auto;

	





}



header nav li a{



	display: block;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;





}





header nav li a:hover {

    background-color: #E2E2E2;

    border-radius: 25px;

    color: #fff;

}



article {

	margin-top: 30px;

	padding-left: 6px;



}



article .vignette{



	position:relative;

	width:308px;

	height:308px;

	

	display: inline-block;

	line-height: 0px;

	margin:0px 3px 0px 0px;



}



article .vignette:hover .imgVignetteTitre{

	

		opacity:1;

		transition: opacity 0.4s;

	

}



article .vignette .imgVignetteTitre{

	

	

	display: block;

	width:200px;

	height:40px;

	text-align: center;

	line-height: 40px;

	background-color: #fff;

	

	opacity:0;

	position:absolute;

	text-decoration: none;

	top: 50%;

    left: 50%;

    transform: translateX(-50%) translateY(-50%); 

    color:#000;

    transition: opacity 0.4s;

}



article .vignette .newsVignette{



	background-image: url(../images/accueil/new.png);

	position:absolute;

	top:10px;

	left:10px;

	display: block;

	width:32px;

	height:32px;

	

}



footer{

	width:100%;

	height:100px;

	float:left;

	padding-top:30px;



}



footer .copyright{

	margin-left: 50px;

}





footer .reseauxSociaux{

	float:right;

	margin-right:50px;

}



footer .reseauxSociaux a:link , footer .reseauxSociaux a:visited {



	text-decoration: none;

	color: #000;

	margin-left: 20px;



	transition: color 0.5s;

}



footer .reseauxSociaux a:hover{



	color:#fff;

	transition: color 0.5s;

}



.scrollup{

	

	color:#000;

	width:100%;

	text-align: right;

	margin-top:25px;

	margin-right: 50px;

	float: right;

	opacity:0.5;

}



.scrollup:hover{

	opacity: 1;

}



article .rubriqueContenu{

	max-width:945px;

	background-color: #fff;

	min-height: 1200px;

	padding-bottom: 100px;

	margin-bottom: 40px;

	

	margin-left:auto;

	margin-right: auto;

}



article .rubriqueContenu .contenuImage{

	text-align: center;

}



article .rubriqueContenu h1 {



	margin-top: 35px;

	font-size: 22px;

	margin-left: 30px;

}



article .rubriqueContenu p {



	text-align: justify;

	font-size: 16px;

	padding: 30px 30px 10px 15px;



	

	

}



article .rubriqueContenu .contenu{

	margin:0px 0px 0px 15px;

}







.saisie{



	padding:15px;

	width:60%;

	font-size: 20px;

	background-color:#E2E2E2;



	margin:2px;

	border:0;



}



.saisieT{

	padding:15px;

	width:94%;

	font-size: 20px;

	background-color:#E2E2E2;



	margin:2px;

	border:0;

}





.saisieBouton{

	

	font-size: 16px;

	float:right;

	font-weight: 700;

}



.bouton{

	

	margin:50px;

	background-color: #92987f;

	border:none;

	color:#fff;

	padding: 15px 32px;

	text-align: center;

	text-decoration: none;

	display: inline-block;

	font-size: 16px;

	transition:background-color 1s;

}



.bouton:hover{



	background-color:#CBD6AC;

	transition:background-color 1s;

}



article .rubriqueContenu .contenu .video{



	

	margin-left:178px;

	padding-top: 80px;



}



article .rubriqueContact{

	

	max-width: 945px;

	margin:0 auto;

	min-height: 830px;

	padding-bottom: 100px;

	margin-bottom: 40px;

}



article .rubriqueContact .contactGauche{

	

	position: relative;

	

	width:530px;

	height:680px;

	float:left;

	background-color: #F8F8F8;

	padding: 50px;

}

article .rubriqueContact .contactGauche h1{

	

	margin-bottom: 20px;



}



article .rubriqueContact .contactGauche p{



	margin-bottom: 60px;

}



article .rubriqueContact .contactGauche label{



	display: block;



}



article .rubriqueContact .contactGauche input{



	padding: 14px



}



article .rubriqueContact .contactDroite{



	

	width:315px;

	height:780px;

	float:left;

	background-color: #fff;

	text-align: center;



}



article .rubriqueContact .contactDroite .contenu{

	widows: 100%;

	margin: 0 auto;

}





article .rubriqueContact .contactDroite .conteneurPic{





}



article .rubriqueContact .contactDroite .conteneurPic:hover .picContact{



	background-image: url('../images/contact/moi2.png');

	transform: rotate3d(1, 2, -1, 5000deg);

	transition: transform 20s;

}



article .rubriqueContact .contactDroite .conteneurPic .picContact{

	

	background-image: url('../images/contact/moi.png');

	width:200px;

	height:200px;

	margin: 100px 60px 35px 60px;

	border-radius: 90px;

	

	transition: background-image 1s;

}



.imgHeaderContact{



	max-width:100%;

	height: auto;

}