/* Enseigne */
#img_page_cre {
	width:100%;
	height:300px;
	overflow:hidden;
	position:relative;
}
#img_page_cre > img {
	position:absolute;
	width:100%;
	left:50%; top:50%;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	z-index:1;
}
#img_page_cre > div#fil {
	position:absolute;
	top:0; bottom:0; left:0; right:0;
	background-color:#000;
	opacity:.6;
	z-index:2;
}

#liste_serv {
	  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack:justify;
      -ms-flex-pack:justify;
          justify-content:space-between;
		  margin-top:40px;
}
#liste_serv > article.type_prod {
	width:31%;
	min-height:100px;
	/*border:1px solid #CCC;*/
	box-shadow:0px 15px 77px -17px rgba(0,0,0,0.44);
	margin-bottom:40px;
	position:relative;
	/*border-radius:20px;*/
	overflow:hidden;
	cursor:pointer;
}
#liste_serv > article.type_prod > .cnt-ph {
	width:100%;
	height:200px;
	position:relative;
	overflow:hidden;
	z-index:1;
}
#liste_serv > article.type_prod >.cnt-ph > img {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	width:100%;
	vertical-align:top;
	transition: all .5s;
	-webkit-transition: all .5s;
	 filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /></filter></svg>#filter');
 -webkit-filter: grayscale(0%);
         filter: grayscale(0%);	
}
#liste_serv > article.type_prod:hover  img {

	filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /></filter></svg>#filter');
 -webkit-filter: grayscale(100%);
         filter: grayscale(100%);
}
#liste_serv > article.type_prod > h2 {
	padding:10px;
	text-align:center;
}
.decouvrir {
	position:absolute;
	width:100px;
	height:100px;
	left:50%; top:50%;
	transform:translate(-50%,-50%) scale(0);
	-webkit-transform:translate(-50%,-50%) scale(0);
	background-color:#DC911B;
	color:#FFF;
	text-align:center;
	border-radius:0px;
	line-height:100px;
	box-shadow:0px 35px 77px -17px rgba(0,0,0,0.44);
	z-index:3;
	
}
#liste_serv > article.type_prod:hover > .decouvrir {
	animation:dec .5s forwards;
	-webkit-animation:dec .5s forwards;
}
@-webkit-keyframes dec {
  0% {-webkit-transform:translate(-50%,-50%) scale(0);border-radius:50%; }
  50% { -webkit-transform:translate(-50%,-50%) scale(1.1); }
  100% {-webkit-transform:translate(-50%,-50%) scale(1)border-radius:20px;;  }
}
@keyframes dec {
  0% {transform:translate(-50%,-50%) scale(0);border-radius:50%;}
  50% { transform:translate(-50%,-50%) scale(1.1); }
  100% {transform:translate(-50%,-50%) scale(1);border-radius:20px;}
}
.decouvrir > a {
	position:absolute;
	top:0; bottom:0; left:0;; right:0;
}
/*Diaporama*/
#diapo_ens.upload {
	padding-left:65px;
}
#diapo_ens {
	width:100%;
	height:600px;
	position:relative;
	box-shadow:0px 35px 50px -17px rgba(0,0,0,0.44);
	margin-bottom:50px;
}
.prod-img {
	position:absolute;
	width:100%;
	height:100%;
	overflow:hidden;
	margin:0;
}
.prod-img.trans_diapo img {
	animation:trans_diapo .8s forwards;
}
.prod-img img {
	position:absolute;
	width:100%;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%) scale(1.8);
	-webkit-transform:translate(-50%,-50%) scale(1.8);
	opacity:0;	
}
.prod-img.trans_diapo_fin img {
	transform:translate(-50%,-50%) scale(1);
	-webkit-transform:translate(-50%,-50%) scale(1);
}
@-webkit-keyframes trans_diapo {
	0% {-webkit-transform:translate(-50%,-50%) scale(1.8); opacity:0;}
	100% {-webkit-transform:translate(-50%,-50%)scale(1); opacity:1;}
}
@keyframes trans_diapo {
	0% {transform:translate(-50%,-50%) scale(1.8); opacity:0;}
	100% {transform:translate(-50%,-50%)scale(1); opacity:1;}
}
.prod-img figcaption {
	position:absolute;
	font-size:28px;
	opacity:0;
	color:#FFF;
	font-weight:bold;
}
.prod-img figcaption p {
	margin:0;
}
.next-diapo {
	right: 0px !important;
}
.prev-diapo {
	left: 0px !important;
}