/* CSS Document */


/*	**********************************************************************************************************************************************		1366
	**********************************************************************************************************************************************
	**********************************************************************************************************************************************
*/
@media screen and (max-width: 1366px){
	
	
	/*	#####################################################	MAIN-MENU
	*/
	nav {
		font-size: 0.95em;
		margin: -24px 0 0 0 !important;
	}
}	/*	-------------------------------------------------------------------------------------------------------------X	1366 end


/*	**********************************************************************************************************************************************		1300px
	**********************************************************************************************************************************************
	**********************************************************************************************************************************************
*/
@media screen and (max-width: 1300px){
	
	html { height:auto; }
	
	.max-width { max-width:95% !important; margin-left:auto !important; margin-right:auto !important; overflow:hidden !important; }	/**/
	
/*	body.home > section:not(#zone-slideshow),
	body.page > section { width: 95% !important; margin: 1em auto 1em auto !important; }	/**/
	
	/*	#####################################################	MASQUER
	*/
	header.principal div#social { display:none !important; }
	
	/*	#####################################################	MAIN-MENU
	*/
	nav { font-size: 0.85em; }
	header.principal.scrolled nav { font-size:0.85em; }
	
	/*	#####################################################	HEADER
	*/
	header.principal div#logo img { height:120px; width:auto; }
	
	/*	#####################################################	HOME - Pavés métiers
	*/
	section#home-paves-metiers {
	}
	section#home-paves-metiers article.item .titre h1 { font-size: .75em; }
	section#home-paves-metiers a:hover article.item { transform: none !important; }
	
																																
}	/*	-------------------------------------------------------------------------------------------------------------X	1300px end


/*	**********************************************************************************************************************************************		1024px
	**********************************************************************************************************************************************
	**********************************************************************************************************************************************
*/
@media screen and (max-width: 1024px){
	
	section#home-Mon-espace-de-travail-en-ligne a { width: 50%; }
	
	nav ul#main-menu li a { padding: .25em .5em .15em .5em; }
																												
}	/*	-------------------------------------------------------------------------------------------------------------X	1024px end
	


/*	**********************************************************************************************************************************************		980px
	**********************************************************************************************************************************************
	**********************************************************************************************************************************************
*/
@media screen and (max-width: 980px){
	
.only4phone { visibility:hidden; width:0px!important; height:0px!important; overflow:hidden; clear:none !important; }
.only4tablet { visibility:visible; width:auto!important; height:auto!important; overflow:inherit; }
.only4tabletAndPhone { visibility:visible; width:auto!important; height:auto!important; overflow:inherit; }
.only4desktop { visibility:hidden; width:0px!important; height:0px!important; overflow:hidden; clear:none !important; }

	
	/*	#####################################################	MASQUER
	*/
	
	/*	#####################################################	HEADER
	*/
	
		/*	#######		LOGO	*/
			header#principal div.logo { font-size: .85em;}
			header#principal.scrolled div.logo { font-size: .65em;}
			
		/*	#######		NAV	*/
		nav {
			position: fixed; top: 5em; right:0;
			background: none;
			text-align: left;
			/**/
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			-o-box-shadow: none;
			box-shadow: none;
			filter:progid:DXImageTransform.Microsoft.Shadow(enabled=false);
		}
	
	
	
	
	/*	#####################################################	MAIN-MENU
	*/
	header#principal div.Espace-de-travail-en-ligne { display:none; }
	nav { font-size: 1em; }
	header#header-scrolled {
		display: block !important;
		border-bottom: 10px solid #de5533;
		padding: 0 0 0 2%;
	}
	header#header-scrolled div#logo {
		width: 70%;
		margin: 7px 0 7px 0;
		text-align: left;
	}
		header#header-scrolled div#logo img { max-width: 200px; height:auto; }
		
	header#header-scrolled nav {
		width: 30%;
		margin: 19px 0 0 0;
	}
	
	nav div#main-menu-reponsive {
		width: 40px; height: 25px;	/*	ratio: 1.75 */
		display: block;
		background-image: url(../img/hamburger.png);
		background-size: contain;
		margin-right: 1em;
		cursor: pointer;
	}
/**/
nav ul#main-menu {
								position: fixed; top:0; right:0;
								background-color: rgba(255,255,255, .95);
								margin:0;
								padding: 0 1em 1em 1em;
								max-height: 86%; overflow: hidden; overflow-y: scroll;
								border-left: 2px solid #fff;
	/**/
	-moz-box-shadow: 0px 0px 8px 0px #343434;
-webkit-box-shadow: 0px 0px 8px 0px #343434;
-o-box-shadow: 0px 0px 8px 0px #343434;
box-shadow: 0px 0px 8px 0px #343434;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#343434, Direction=NaN, Strength=8);	/**/
								/**/
																								display: none !important;	/**/
}
																							nav ul#main-menu.displayed {
																								display: block !important;
    -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;
																							}
nav ul#main-menu  li {
	display: list-item;
	text-align: left;
	background: none;
	margin-top: 1em;
}

nav ul#main-menu li.avec-enfants a {
								background: none;
}
/**/
nav ul#main-menu li ul.enfants {
								display: block;
								float: left;
								position: relative;
								clear: both !important;
								margin-bottom: 1em;
}
								nav ul#main-menu li a {
									clear: both !important;
									display: block;
									float: none;
								}	/**/
								

		nav ul#main-menu li.selected a {
			background-color:#89c7e6;
			color: #fff;
		}
nav ul#main-menu li.avec-enfants a:hover ~ ul.enfants,
nav ul#main-menu li.avec-enfants a ~ ul.enfants:hover { display:block !important; }
/**/
nav ul#main-menu li.close-menu-reponsive { display: list-item; text-align:right; }
	nav ul#main-menu > li.close-menu-reponsive div {
		width: 28px; height: 28px;
		background-image: url(../img/icon_closeMainMenuResponsive.png);
		background-position: right center;
		background-repeat: no-repeat;
		background-size: cover;
		cursor: pointer;
		float: right;
		clear: both;
		margin-bottom: .5em;
	}
/**/
header#principal div.Espace-de-travail-en-ligne { display: none; }
header#principal nav ul#main-menu li.Espace-de-travail-en-ligne { display: list-item; }
header#principal nav ul#main-menu li.Espace-de-travail-en-ligne a {
	background-color: #85ab35;
	display: block;
	box-sizing: border-box;
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	margin: 0 auto 0 auto;
	font-size: .9em;
	font-weight: 500;
	color: #fff;
	background-image: url(../img/icon_USER.png);
	background-position: left .5em center;
	background-repeat: no-repeat;
	background-size: auto 70%;
	padding: .5em .5em .5em 2.75em;
}
	header#principal nav ul#main-menu li.Espace-de-travail-en-ligne.EspaceSelected a { background-color: #89c7e6 !important; }
	
	
	/*	#####################################################	HOME - slideshow
	*/

/*	##### JQuery HomeSlider	*/
#wowslider-container1:not(.flashnews) { /*	display:none; /**/}

	
	/*	#####################################################	HOME - EDITO
	*/
	body.home section#edito header { margin-bottom: 0 !important; }
	body.home section#edito article { margin-top: 0 !important; }
	body.home section#edito article div.trois_colonnes .colonne:first-child { height:0 !important; background:none; }
 
	
	
	/*	#####################################################	HOME - Pavés métier
	*/
	section#home-paves-metiers h3.titre-rubrique {
		padding: 0 0 .5em 0 !important;
		font-size: 2.5em;
	}
	section#home-paves-metiers article.item {
		width: calc( (100% / 3) - 2em );
		margin: 0 1em 2em 1em !important;
		height: 160px;
	}
	section#home-paves-metiers article.item .titre {
		padding: .25em .5em .15em .35em !important;
	}
		section#home-paves-metiers article.item .titre h4 {
			font-size: 1em;
		}
 
	
	
/*	#####################################################	FOOTER
*/
	footer { font-size: .9em; }
/**/
 
	
	
/*	#####################################################	MAIN
*/
body.page .main {
	margin-top: 4em !important;
}
 
	
	
/*	#####################################################	PAGES
*/
 
	
	
/*	#####################################################	PARAGRAPHES
*/
.main section.page article {
	margin: 0 0 7em 0;
}
	
	.main section.page article img { max-width: 100%; height:auto !important; }

/*	################################################################	PARALLAX
*/
.parallaxie .heading{
	height: 175px;
}
.parallaxie h1{
	margin: 0;
	font-size: 2em;
	font-weight: 400;
	color: #8a8761;
	background-color: rgba(255,255,255, 0.9);
}

 
	
	
/*	#####################################################	NEWS
*/
body.news article.sol_2 header .dates {
												font-size: 0.6em;
												position: absolute; top:0; right: 20%;
}
body.news article.sol_2 header .dates .fromTo {
												width: 30px; height: 20px;
}
/**/
body.news article.sol_2 section.accroche-et-texte {
margin: 30px 0 0 15px;
color: #000;
												margin: 20px 0 0 0;
}
body.news article.sol_2 section.accroche-et-texte .accroche {
float: left; width: 30%;
margin:0; padding:0;
												float: none; width: 100%;
}
body.news article.sol_2 section.accroche-et-texte .accroche h2 {
color: inherit;
font-weight: 200;
margin:0; padding:0;
}
body.news article.sol_2 section.accroche-et-texte .accroche .sous_titre {
background-color: #284996;
padding: 15px;
margin-top: 20px;
												margin-bottom: 20px;
}
body.news article.sol_2 section.accroche-et-texte .accroche .sous_titre h2 {
text-align: center;
color: #fff;
font-size: 1.3em;
font-weight: 500;
}
/**/
body.news article.sol_2 section.accroche-et-texte .texte {
float: right; width: 65%;
margin:0; padding:0;
												float: none; width: 100%;
}
body.news article.sol_2 section.accroche-et-texte .texte h3 {
color: inherit;
font-size: 1em;
font-weight: 400;
margin:0; padding:0;
text-align: justify;
}
 
	
	
/*	#####################################################	CONTACT
*/
	form#form_contact { width: 90%; margin:0 auto 0 auto; }
	/**/
	form#form_contact input[type="text"],
	form#form_contact textarea {
		width: 95%;
		margin: 10px auto 10px auto;
	}
	form#form_contact input[type="checkbox"] {
		width: auto !important;
		border: 2px solid #000 !important;
		background-color: #ccc !important;
	}
	form#form_contact button#sendFrom {
		font-size: 1.3em;
		width: auto;
		text-align: center;
		display: block;
		margin: 0 auto 0 auto;
	}
	
	
/*	#####################################################	ELEMENTS de MISE en PAGES
*/
.deux_colonnes .colonne,
.deux_colonnes-2-1 .colonne,
.deux_colonnes-1-2 .colonne,
.trois_colonnes .colonne { float:none !important; width: 100% !important; margin-bottom: 20px !important; }

.deux_colonnes .colonne:first-child,
.deux_colonnes-2-1 .colonne:first-child,
.deux_colonnes-1-2 .colonne:first-child {  }

	.deux_colonnes .gouttiere,
	.deux_colonnes-2-1 .gouttiere,
	.deux_colonnes-1-2 .gouttiere,
	.trois_colonnes .gouttiere { display:none !important; }
	


/*	################################################################	Hxxx
*/
.main section.page article div.contenu * { text-align:left !important; }
	
	
	
}	/*	-------------------------------------------------------------------------------------------------------------X	980px end


/*	**********************************************************************************************************************************************		850
	**********************************************************************************************************************************************
	**********************************************************************************************************************************************
*/
@media screen and (max-width: 850px){


	
		/*	################################################################	LOGO
		*/
			header#principal div.logo { font-size: 0.85em;
				-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;
			}
			header#principal.scrolled div.logo { font-size: .50em;
				-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;
			}




		/*	################################################################	HOME - Syndic-News
		*/
		section#syndic-news .max-width { width:95%; margin:0 auto 0 auto;}
		/**/
			section#syndic-news article.item div.image		{ width: 30%; float: left; margin-left:0; }
			section#syndic-news article.item div.details	{ width: 64%; float: left; margin-left:3%; }
			/**/
			section#syndic-news article.item div.details div.textes .sous-titre {
				float: none;
				display: inline-block;
				margin: 0 !important;
			}
			
			section#syndic-news article.item div.date.only4desktop{	display: none !important; }
			section#syndic-news article.item div.date.only4tabletAndPhone{	display: block !important; }
			
			
			section#syndic-news article.item div.date.only4tabletAndPhone{ color: #2a74ba;
				width:100%;
				float: none !important;
				background:none;
				height:auto;
				margin: 0 !important;
				padding: .5em 0 0 0 !important;
				font-weight: 600 !important;
				text-align: left;
			}
				section#syndic-news article.item div.date.only4tabletAndPhone div.jour,
				section#syndic-news article.item div.date.only4tabletAndPhone div.mois,
				section#syndic-news article.item div.date.only4tabletAndPhone div.annee{
					display: inline-block;
					font-size: 1.2em;
					color:#2a74ba;
					height:auto;
					margin:0;
					padding-right: .25em;
				}
				/**/
				section#syndic-news article.item div.date.only4tabletAndPhone div.fromTo{
					display: inline-block;
					vertical-align: middle;
					width: 20px; height: 30px;
					margin: 0 .25em 0 0;
					background-image: url(../img/News_syndicHomeMobile_fromTo.png);
					background-repeat: no-repeat;
					background-size: 100% 100%;
					opacity:1;
				}

/*	################################################################	PARAGRAPHE
*/
.main section.page article {
	margin: 3em 0 0 0;
}
	


		/*	################################################################	FOOTER
		*/
		footer section#ligne_1 article#reseaux-sociaux,
		footer section#ligne_1 article#coordonnees { float:none !important; width:80% !important; margin:0 auto 0 auto !important; }
		
		
}	/*	-------------------------------------------------------------------------------------------------------------X	800 end


/*	**********************************************************************************************************************************************		768
	**********************************************************************************************************************************************
	**********************************************************************************************************************************************
*/
@media screen and (max-width: 768px){


	header#principal div.tel { font-size: .8em; }

	header#principal div.logo { font-size: .65em;
	}
	header#principal.scrolled div.logo { font-size: .50em;
	}
	nav {top: 4em; right:0;}

.top_link {
	width: 50px; height: 50px;
	background-image: url(../img/top_link_4mobiles.png);
	background-size: 100% 100%;
	/**/
	position: fixed;
	right: 0;
	bottom: 0;
	display: none;
	opacity: 0.8;
	z-index: 2000;
} .top_link:hover { opacity:1; }
		
 
	
	
/*	#####################################################	MAIN
*/
body.page .main {
	margin-top: 3em !important;
}
		
 
	
	
/*	#####################################################	H 1-2 & EDITO
*/
body.home section#edito header h1 { font-size: 3em; }
body.home section#edito header h2 { font-size: 2em; }
		
 
	
	
/*	#####################################################	NEWS
*/
body.news article.item .dates,
body.news article.item .sous_titre {
	margin: .3em 0 0 0;
}
		
 
	
	
/*	#####################################################	FOOTER
*/
	footer section#ligne_2 {
		padding: 2.5em 0 .8em 3.5em !important;
	}
			
}	/*	-------------------------------------------------------------------------------------------------------------X	768 end


/*	**********************************************************************************************************************************************		650
	**********************************************************************************************************************************************
	**********************************************************************************************************************************************
*/
@media screen and (max-width: 650px){
		
 
	
	
/*	#####################################################	H 1-2 & EDITO
*/
body.home section#edito header h1 { font-size: 2.5em; }
body.home section#edito header h2 { font-size: 1.5em; }
		
 
	
	
/*	#####################################################	Pavés Métier
*/
	section#home-paves-metiers article.item {
		width: calc( (100% / 3) - 1em );
		margin: 0 .5em 1em .5em !important;
		height: 140px;
	}
	section#home-paves-metiers article.item .titre {
		padding: .25em .5em .15em .35em !important;
	}
		section#home-paves-metiers article.item .titre h4 {
			font-size: .9em;
		}
		
section#home-Mon-espace-de-travail-en-ligne a { width: 60%; }
	


		/*	################################################################	HOME - Parallax
		*/
		body.home section#zone-parallax .text { bottom:0; right:0; left:0; width:auto; padding:1em; }
			body.home section#zone-parallax h1 { font-size: 2.7em; }
			
		
			
}	/*	-------------------------------------------------------------------------------------------------------------X	650 end


/*	**********************************************************************************************************************************************		500px
	**********************************************************************************************************************************************
	**********************************************************************************************************************************************
*/
@media screen and (max-width: 500px){
	
.only4phone { visibility:visible; width:auto!important; height:auto!important; overflow:inherit; }
.only4tablet { visibility:hidden; width:0px!important; height:0px!important; overflow:hidden; clear:none !important; }
.only4tabletAndPhone { visibility:visible; width:auto!important; height:auto!important; overflow:inherit; }
.only4desktop { visibility:hidden; width:0px!important; height:0px!important; overflow:hidden; clear:none !important; }
		
		
	
	
/*	#####################################################	HEADER
*/
header#principal { position: relative; } 

		/*	#######		LOGO	*/
			
		/*	#######		NAV	*/
	nav div#main-menu-reponsive { margin-right: -3px; }
		
	
body.page .main,
.main {
	margin-top: 0 !important;
}	
		
		
	
	
/*	#####################################################	SlideShow
*/
/*
#wowslider-container1,
#wowslider-container1 .ws_images,
#wowslider-container1 .ws_images ul a,
#wowslider-container1 .ws_images > div > img {
	height: 1000px !important;
	max-height: 1000px !important;
	min-height: 1000px !important;
}
/**/
 
	
	
/*	#####################################################	Pavés Métier
*/
	section#home-paves-metiers article.item {
		width: calc( (100% / 2) - 2em );
		margin: 0 1em 2em 1em !important;
		/**/
		height: 230px;
		height: 130px;
	}
		section#home-paves-metiers article.item .titre h1 { font-size: 1.3em; }
		
section#home-Mon-espace-de-travail-en-ligne a { width: 80%; }
		
		
		
}	/*	-------------------------------------------------------------------------------------------------------------X	500px end


/*	**********************************************************************************************************************************************		420px
	**********************************************************************************************************************************************
	**********************************************************************************************************************************************
*/
@media screen and (max-width: 420px){
	
		/*	#####################################################	HEADER
		*/
		header#principal div.logo img,
		header#principal.scrolled div.logo img { height: 105px; width:auto; }
			
			header#principal div.baseline,
			header#principal.scrolled div.baseline {
				font-weight: 300;
				font-size: 1em;
				padding: 1.35em 0 0 .25em;
			}
				header#principal div.baseline strong,
				header#principal.scrolled div.baseline strong { font-size: 1.3em; }
	
		/*	#####################################################	Pavés Métier
		*/
		section#home-paves-metiers article.item {
			float: none;
			width: 90%;
			margin: 0 auto 2em auto !important;
			height: 200px;
		}
			section#home-paves-metiers article.item .titre {
				padding: .75em .5em .5em .35em !important;
			}
				section#home-paves-metiers article.item .titre h4 {
					font-size: 1.1em;
					font-weight: 600;
					color: #fff !important;
				}
		
	section#home-Mon-espace-de-travail-en-ligne a { width: 90%; }
	
		/*	#####################################################	Homme / Actus
		*/
		section#syndic-news article.item div.image		{ width: 100%; float: none; margin-left:0; }
		section#syndic-news article.item div.details	{ width: 100%; float: none; margin-left:3%; }
		
}	/*	-------------------------------------------------------------------------------------------------------------X	420px end


/*	**********************************************************************************************************************************************		360px
	**********************************************************************************************************************************************
	**********************************************************************************************************************************************
*/
@media screen and (max-width: 360px){
			
			header#principal div.baseline,
			header#principal.scrolled div.baseline {
				font-size: .9em;
				padding: 2.3em 0 0 .25em;
			}
			
		/*	#######		NAV	*/
	nav div#main-menu-reponsive {
		width: 30px; height:19px;
		margin-right: -3px;
		margin-top: -3px;
	}
}	/*	-------------------------------------------------------------------------------------------------------------X	360px end