/* CSS Document */


/* Body, page, typo, img, link */

body{
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif, 'Verdana'; 
	font-size: 1em;
	font-style: normal;
	color: #000000;
	letter-spacing: 0.10em;
	text-align: center;
	word-spacing: normal;
	white-space: normal;
	line-height: 1.6em; 
	background: rgb(65, 83, 137);
	padding: 0;
}



h1, .h1, .h1-like, h2, .h2, .h2-like, h3, .h3, .h3-like, h4, .h4, .h4-like, h5, .h5, .h5-like, h6, .h6, .h6-like, .secondary h1, .secondary .h1, .secondary .h1-like, .secondary h2, .secondary .h2, .secondary .h2-like, .secondary h3, .secondary .h3, .secondary .h3-like, .secondary h4, .secondary .h4, .secondary .h4-like, .secondary h5, .secondary .h5, .secondary .h5-like, legend {
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif, 'Verdana';
  }


img {max-width:100%;height:auto;}
 
.visible {
	visibility: visible;
  }
  .invisible {
	visibility: hidden;
  }
  
  a:focus {
	color: black;
	background-color:transparent!important;
  }

  .content a:focus{
	color: black!important;
	background-color:transparent!important;
  }

  .content a:hover{
	color: black;
	background-color:transparent!important;
  }

  .arbo a:focus{
	color: #de3f1f!important;
	background-color:transparent!important;
  }

  .entry-title a {
	background-color: transparent;
	color: #de3f1f;
  }
  .entry-title a:focus, a:hover, a:active {
	color: #de3f1f;
	background-color: transparent;
  }

.fond-ecoartis {
	position: fixed;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: -1;
	background-image:url("img/fond-ecoartis.jpg")
  }
  
  .brightness {
    filter: brightness(80%);
	-webkit-filter: brightness(80%);
-moz-filter: brightness(80%);
-o-filter: brightness(80%);
-ms-filter: brightness(80%);
}
  
.page { 
position: relative; 
width: 100%;    
  background: transparent;
 text-align: left; 
 float:left;
margin-left: 2em;
margin-top: -1em;
}


.main {
	margin:0;
  }

.page #content {
	float: left;
  margin-bottom: 1em;
  }

  .wrapper {
	clear: both;
	float: left;
	width: 78%;
	overflow: hidden;
  }

  .aside {
	width: 22%;
  }

  @media  screen and (max-width: 1100px){
  .wrapper, .content, .aside {
	width: 100%;
  }
}


@media screen and (max-width: 768px){
	.page { 
		margin-left: 1em;
		margin-right: 1em;
		width: 94%;
		}	

  }
/* header */


.header { padding:0;
	background: #5069a9;
	height:auto;
	width: 100%; 
	
	}

	.logo{	
		max-width : 25%;
		float:left;		
		z-index: 2;
		margin-left: 1em;
	}



	.rond{
		position: absolute;
		z-index: -1;
		height: 28em;
	width: 30em;
	background-color: #21366a;
	border-radius: 50%;
	left:-8em;
	top: -10em;
	}

	.slogan {
		float:right;
		font-style: italic;
		color: #f6f5ea;
		text-align: right;
		letter-spacing: 0;
		}

		.slogan h2{
			font-weight: bold;
			}

			.slogan p.descriptif{
				font-weight: normal;
				}

	@media  screen and (min-width : 992px) {
		/* Styles pour cette Media Queries */

		
	.slogan {
		margin-top: 6em;
	margin-right: 2em;
	line-height: 0;
		}
		
		.slogan h2{
			font-size:1em;
			}
	
			.slogan p.descriptif{
				font-size:0.9em;
				margin-top: -0.5em;
				font-weight: normal;
				}
	
				p.affdate{	
					padding-top: 1em;
					font-size:0.8em;
					font-style: italic;
					text-transform: capitalize;
				}
	}

	@media  screen and (max-width : 992px) {
		.slogan h2{
			visibility: hidden;	
	}
	p.affdate{	
		visibility: hidden;	
	}
	}

	

	@media screen and (min-width : 730px)and (max-width: 992px) {
		.slogan {
			visibility: hidden;	
			}	
		}

	
		@media screen and  (max-width: 730px) {
			.slogan {
				float: right;
				margin-right: 3em;
				margin-top: 1em;
		font-size: 0.8em;
		width: 30%;
		line-height: 1.3em;
		font-weight:lighter;
				}
				.logo{
					max-width : 35%;
				}

				p{
					margin:0;
					padding:0;	
				}

				.diapo{
				margin-top: 0;
				}
					}
				

/* scrolltop*/
.header .logo {	
	position: fixed;
	top: 0; 
	min-height:auto;
		-webkit-transition: height 0.1s;
		-moz-transition: height 0.1s;
		transition: height 0.1s; 
		z-index: 15;
}
.header .logo.shrink {	
	min-height:12%;
}


	.ecoartis .titre{
	font-size: 20px;
	}
}





/* Menu nav*/
.navbar-inner{
	background: transparent;
	padding: 0;
	margin:0;
	border:0; 
	box-shadow:none;
  }

  ol, ul {
	margin-left: 0;
  }

/* diaporama */
.diapo{
	z-index: 1;
	float:left;
width : 100%;
margin-top: 0.5em;
}

.nivoSlider {
	height: auto;
	max-width : auto;
  }





  /* content sommaire*/



  .content {
	font-size: 1.1em;
	min-height: auto;
	background: #ffffffcc;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 2em;
color:#13151a;
margin-right: 2em;
letter-spacing: 0;
  }

  .content-sommaire {
	font-size: 1.1em;
	min-height: auto;
	background: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 0;
	color:#13151a;
  }



  .content-sommaire a img {
-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
  }

  .content a{
	text-decoration: none;
  }

  .content a:hover{
	text-decoration: none;
	color:#13151a;
  }

  .content-sommaire a{
	text-decoration: none;
  }

  .content-sommaire a:hover{
	text-decoration: none;
	color:#13151a;
  }

   /* effet texte sur image */

  .cadre { 
	position: relative;
	display: block;
	float:left;        
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	margin:1em;
	overflow: hidden;
	-moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
  }


  .cadre:hover{ 
		-ms-transform: scale(1.1); /* IE 9 */
		-webkit-transform: scale(1.1); /* Safari 3-8 */
		transform: scale(1.1);
  }

  .textsurimage{
	position: absolute;
	padding: 1em 2em 1em 1em;
	z-index: 1;
	opacity: 0;
	font-size: 0.9em;
	top: 0;
	left: 0;
	color: #fff;
	background-color: rgba(40, 40, 49, 0.8);
	width: 260px;
	height: 260px;
	-webkit-transition: all 400ms ease-out;
	-moz-transition: all 400ms ease-out;
	-o-transition: all 400ms ease-out;
	-ms-transition: all 400ms ease-out;
	transition: all 400ms ease-out;
	text-align: left;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
  }

  .cadre .textsurimage:hover {
	opacity: 1;
  }

  .cadre .titre {
	position:absolute;
	color: #fff;
	background-color: rgb(40, 40, 49);
	bottom:0;
	width:100%;
	height:auto;
	font-weight: bold;
	padding: 0.6em;
	z-index: 2;
	margin:0;
	text-align: center;
	font-size: 0.9em;
	text-transform: uppercase;
  }

  .cadre .textsurimage .text {
	position:absolute;
		top:50px;
		line-height: 1.4em;
font-size: 0.95em;
	height: 0;
	opacity: 0;
	transition-delay: 0s;
	transition-duration: 0.7s;
  }
  .cadre .textsurimage:hover .text {
	opacity: 1;
	transform: translateY(-30px);
	-webkit-transform: translateY(-30px);
  }

  /* encart-fluide Wrap */

  .encart-fluide {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
  }

/* scrollreveal*/

  .sommaire-breve,
  .sommaire-breve2 {
	position: relative;
	display: block;
	margin: 1em;
	padding: 1.5em;
	width: 45%;
	background: rgba(255, 252, 239, 0.8);
	font-size: 0.9rem;
	text-indent: 0.5em;
	font-weight: bold;
	border-radius: 0.3rem;
	letter-spacing:normal;
	line-height: 1.3em;
	-moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
  }
  

 .sommaire-breve:hover,
.sommaire-breve2:hover {
	-ms-transform: scale(1.1); /* IE 9 */
	-webkit-transform: scale(1.1); /* Safari 3-8 */
	transform: scale(1.1);
	background: #fff;
  }
 

  @media screen and (max-width : 768px) {
	.sommaire-breve,
	.sommaire-breve2 {
		width: 100%;
		margin-left:0;
		margin-right:0;
	  }
}	

/* article rubrique*/

.arbo{
	font-style: italic;
	color:#de3f1f;
  }

  .cartouche{
	font-style: italic;
	line-height: 1.2em;
  }

  

  .titrerub {
	font-size: 1.1em;
	line-height: 1.2em;
	font-weight: bold;
	color:#21366a;
	margin-left: 1em;
	margin-bottom: 1em;
  }

  .titrerub img {
	margin-right: 1em;
  }

  

.article{
	position: relative;
	z-index: 1;
	width:100%;
	float:left;
	margin-bottom: 2em;
	padding:1em;
	background: -moz-linear-gradient(290deg, 
	rgb(251, 199, 104) 80%, transparent 20%);
	background: -webkit-linear-gradient(290deg, 
	rgb(251, 199, 104) 80%, transparent 20%);
	background: -o-linear-gradient(290deg, 
  rgb(251, 199, 104) 80%, transparent 20%);
	background: linear-gradient(290deg, 
  rgb(251, 199, 104) 80%, transparent 20%);
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
  }

  .article::before {
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: -moz-linear-gradient(
		290deg, 
		rgb(248, 177, 46) 90%, transparent 10%
	);
	background-image: -webkit-linear-gradient(
		290deg, 
		rgb(248, 177, 46) 90%, transparent 10%
	);
	background-image: -o-linear-gradient(
		290deg, 
		rgb(248, 177, 46) 90%, transparent 10%
	);
	background-image: linear-gradient(
		290deg, 
		rgb(248, 177, 46) 90%, transparent 10%
	);
	z-index: -1;
	transition: opacity 0.8s linear;
	opacity: 0;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
  }

  .article:hover::before {
	opacity: 1;
  }

  .titre {
	text-transform: uppercase;
	font-size: 1.15em;
	line-height: 1.3em;
	font-weight: bold;
	color:black;
	margin-left: 1em;
	
  }

  .soustitre {
	font-size: 1.1em;
	margin-bottom: 0.8em;
	color: black;
	margin-left: 1em;
	font-style:italic;
  }

  .chapo {
	font-weight: bold;
	color: #181b20;
  }


  .article .date {
	color: black;
	font-size: 1em;
	margin-bottom:1em;
	margin-left: 1em;
	font-style:italic;
	
  }


  .texte {
	margin-top: 1em;
	font-size: 1.1em;
	line-height: 1.3em;
  }
  
  @media screen and  (max-width: 730px) {
  .texte p{
	float: left;
  }
}

  .texte-italique {
	font-style:italic;
  }

  .texte img{
	float:left;
	margin-right:1.2em;
	margin-bottom:1em;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	box-shadow: 8px 4px 0px black;
  }

  .ps{
	color: black;
	font-size: 1.1em;
	font-style:italic;
  }

  .ps a{
	color: #21366a;
  }

  .ps a:hover{
	color: #de3f1f;
  }
  .spip_mail a,
  .hyperlien a{
	color: #21366a;
	font-size: 1em;
	font-style:italic;
  }

  .spip_mail a:hover,
  .hyperlien a:hover{
	color: #de3f1f;
	font-size: 1em;
	font-style:italic;
  }

  .content a:focus{
	background-color:transparent;
  }

    /* rubrique actuweb site syndic*/
	.article .cartouche{
		font-style: italic;
		line-height: 1.2em;
	margin-bottom: 1.3em;
	  }
	
	  .article .cartouche .date{
		color: #de3f1f;
	margin-bottom: 0.1em;
	margin-left:0;
	  }

	  .article .cartouche a:hover{
		color: black;

	  }

	  .article .titrerub{
		font-style:italic;
		color: black;
		text-decoration: underline;
	  }

	 .titresite{
		margin:0;
		font-weight: bold;
		font-size: 1em;
	  }
	
	
	  .chaposite p{
		margin:0;
		font-size: 0.9em;
	  }
	 
/* porfolio*/

  .documents_portfolio h3{
	font-style: italic;
	margin-bottom:0.3em;
  }

  .diaporama{
	width:100%;
	background: black;
	padding:0.5em;
	border-radius: 0.3rem;
  }

  .diaporama img{
	margin:0.3em;
	padding:0.5em;
	-moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
  }


  .diaporama img:hover{
	-ms-transform: scale(1.2); /* IE 9 */
	-webkit-transform: scale(1.2); /* Safari 3-8 */
	transform: scale(1.2);
	}

  @media screen and (max-width: 768px) {
	.page_sommaire #content {
		margin: 1em;
	  }
	}
  /* formulaire*/

	.explication_texte{
		line-height:1.3em;
		font-size: 0.9em;
		margin-top:0.8em;
	  }

	  .editer{
		line-height:1.2em;
		font-size: 1em;
		margin-bottom:0.7em;
	  }

	  .message_retour_defaut{
		color:rgb(1, 94, 35);
		font-weight: bold;
	  }

	  .reponse_formulaire_erreur{
		color:#de3f1f;
		font-weight: bold;
	  }

	  span.obligatoire {
		color: #de3f1f;
		font-style: italic;
		font-size: 0.8em;
	  }
  /* aside*/

  .aside {
	letter-spacing: 0;
	font-size: 1.1em;
  }

  
  .aside a{
	color: #fff;
	text-decoration:none;
  }

 
  .aside ul li a{
	font-weight: normal;
  }
  .aside ul a:hover{
	color: #de3f1f;
  }

  .aside .menurub ul a:hover{
	color: rgb(255, 170, 0);
  }
  .aside ul li{
	font-weight: normal;
  }

   /* navrub*/
  .menurub{
	background: #28283d;
  border-radius: 5px;
  padding:1em 1em 0 2em;
	color:#fff;
	line-height: 1.5em;
  }
 
  @media screen and(max-width: 1100px){
	.menubreve {
	  width: 98%;
	  float:left;
	  margin-left:0;
	  margin-right:0;
  }
  }

  .menurub h3{
font-style:italic;
font-size: 1em;
margin:0;
  }
  
  .menurub ul{
	padding:1em;
  }
  
   /* navbreve*/

  .menubreve{
	float:left;
	text-align: left;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 5px;
  color: #13131f;
  border: solid 2px rgb(40, 40, 61);
  margin-top:1em;
  margin-bottom:1em;
  }


  .menubreve h3{
	margin:0;
  }

  .menubreve ul{
	padding:1em 2em 0.5em 2em;
  }

  .menubreve li{
	float:left;
  }
  .menubreve a{
	color: #13131f;
	font-weight: bold;
	} 

  .menubrevetitre{
	background: #28283d;
	color:#fff;
	padding:1em 2em 0.5em 2em;
	font-size: 0.9em;
	border-bottom: 1px dotted #fff;
	font-style:italic;
  }
  
  .menubrevetitre a{
	color:#fff;
  }
.titrebreve{
	float:left;
	} 

.date{
	color: #de3f1f;
	font-weight:normal;
	font-style: italic;
	font-size: 0.9em;
  }

   /* navarticle*/

  .rologo{
	text-align: left;
	padding: 0.5em 0.5em 0 0.5em;
	background:rgba(255, 255, 255, 0.9);
    min-height: 0;
     max-height: 0;
     opacity: 0;
     -webkit-transition: all 1s ease 0.2s;
     -moz-transition: all 1s ease 0.2s;
     -o-transition: all 1s ease 0.2s;
     -ms-transition: all 1s ease 0.2s;
     transition: all 1s ease 0.2;
   }

   .rolimage {
	background: #28283d;
	text-align: center;
}
.rolimage .titre{
	text-transform:none;
	font-size: 1em;
	line-height: 1.3em;
	font-weight: lighter;
	color:#fff;
	padding: 1em;
	margin: 0;
border-bottom: 1px dotted #fff;
}






.roltitre{
	background:#3a445f;
	color:#fff;
	width:100%;
	padding:0.5em;
	border-bottom: 1px dotted #fff;
	} 

	.roltitre:hover .rologo { 
		max-height: 999px;
		 opacity: 1;
	   }

   .rolimage:hover .rologo { 
    max-height: 999px;
     opacity: 1;
   }

   .roltitre .titre{
	color:#fff;
	font-size: 0.9em;
	margin:0;
	padding-left:0.5em;
	padding-bottom:0.2em;
	text-transform:none;
	line-height: 1.4em;
	font-weight: lighter;
	}  

   .roltitre .date{
	font-style: italic;
	font-size: 0.8em;
	color:#fdeeaff7;
	padding-bottom: 0.2em;
  }
  
  .roltext{
	color:black;;
  }

   /* footer*/

  .footer {
	border-top: 1px solid #fff;
	text-align: center;
	margin: 1em;
  }

  .footer .colophon {
	color: white;
	text-align: center;
	 height: 40px; 
	 width: 100%; 
	 margin: 0; 
	 font-size: 0.9em;
  }
  .footer .colophon a:hover {
	color:rgb(252, 214, 142);
  }