#avantageBox{
	position:relative;
	border-top:2px solid #FFF;
	border-bottom:2px solid #FFF;
}

#avantageBox>div{width:100%;padding-top:0px!important;}

#avantageBox .et_pb_text{
	margin-bottom:0px!important;
}


#avantageBox div.et_pb_column.et_pb_column_4_4{
	padding-bottom:0px!important;
}

.infoServices {
	position: relative;
	cursor:default;
}

.infoServices .infoService {
	width: 50%;
	float: left;
	position: relative;
	overflow: hidden;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	height:304px;
	background-size:cover;
	background-position: center center;
}

.infoServices .infoService .back-content {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 6;
}


.infoServices .infoService:nth-child(1){border-right:1px solid #FFF;	border-bottom:1px solid #FFF;}
.infoServices .infoService:nth-child(2){border-left:1px solid #FFF;	border-bottom:1px solid #FFF;}
.infoServices .infoService:nth-child(3){border-right:1px solid #FFF;	border-top:1px solid #FFF;}
.infoServices .infoService:nth-child(4){border-left:1px solid #FFF;	border-top:1px solid #FFF;}

.infoServices .infoService:nth-child(1) .description .icon{background-image:url('./img/horloge.png');}
.infoServices .infoService:nth-child(2) .description .icon{background-image:url('./img/region.png');}
.infoServices .infoService:nth-child(3) .description .icon{background-image:url('./img/license.png');}
.infoServices .infoService:nth-child(4) .description .icon{background-image:url('./img/methode.png');}

.infoServices .infoService .description {
	position: absolute;
	top: 50%;
	margin-top: -73px;
	left: 0;
	width: 100%;
	color: #fff;
	text-align: center;
	font-size: 1.2em;
	font-weight: 600;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-ms-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}

.infoService:hover .description{
	top:20px!important;
}

.infoServices .infoService .description .icon {
  height: 115px;
  width:170px;
  display: block;
  margin: 0 auto;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -ms-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
    background-position: center center;
}

.infoServices .infoService:hover .description .icon{opacity:0;}

.infoServices .infoService .description h3{
	color:#FFF;
}

.infoServices .infoService .inner{
	position: absolute;
	width: 70%;
	padding: 0px!important;
	color: #FFF;
	opacity:0;
	font-size:18px;
	line-height:1.3em;
	visibility: hidden;
	list-style-type: none!important;
	top:57%;
	left: 50%;
	text-align: center;

	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);

	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-ms-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}

.infoServices .infoService:hover .inner {
	opacity: 1;
	visibility: visible;
	list-style-type: none!important;
}

.infoServices .infoService .heures .inner li span{float:right; margin-left:20px;}



.infoService .back-content::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	-moz-transition: opacity 0.35s, -webkit-transform 0.35s;
	-ms-transition: opacity 0.35s, -webkit-transform 0.35s;
	-o-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;

	-webkit-transform: scale3d(1.2,1.4,1);
	-moz-transform: scale3d(1.2,1.4,1);
	-ms-transform: scale3d(1.2,1.4,1);
	-o-transform: scale3d(1.2,1.4,1);
	transform: scale3d(1.2,1.4,1);
}

.infoService:hover .back-content::before{
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	-moz-transform: scale3d(1,1,1);
	-ms-transform: scale3d(1,1,1);
	-o-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

.infoService:hover .back-content {
	background-color: rgba(0,0,0,0.75);
}

.infoServices .infoService .heures .inner {text-align:left !important;}
.infoServices .infoService .heures .inner li {text-align:left !important;}
#centreInfo{
	position: absolute;
	z-index: 1000;
	left: 50%;
	top: 50%;
	-webkit-font-smoothing: antialiased;
	-webkit-transform: translate(-50%,-50%) translate3d(0,0,0);
	-moz-transform: translate(-50%,-50%) translate3d(0,0,0);
	-ms-transform: translate(-50%,-50%) translate3d(0,0,0);
	-o-transform: translate(-50%,-50%) translate3d(0,0,0);
	transform: translate(-50%,-50%) translate3d(0,0,0);
	background-color: #fff;
	height: 190px;
	width: 190px;
	border-radius: 50%;
	background-image:url("./img/logoFade.png");
	background-size:cover;
	background-position:center center;
	cursor: default;
}

#centreInfo h2{
	padding: 0px;
	position: absolute;
	top: 50%;
	left:50%;
	width: 85%;
	text-align: center;
	font-size:35px;
	-webkit-font-smoothing: antialiased;
	-webkit-transform: translate(-50%,-50%) translate3d(0,0,0);
	-moz-transform: translate(-50%,-50%) translate3d(0,0,0);
	-ms-transform: translate(-50%,-50%) translate3d(0,0,0);
	-o-transform: translate(-50%,-50%) translate3d(0,0,0);
	transform: translate(-50%,-50%) translate3d(0,0,0);

}



.infoServices .infoService:nth-child(1){background-image:url('./img/Info-Time.jpg');}
.infoServices .infoService:nth-child(2){background-image:url('./img/Info-Region.jpg');}
.infoServices .infoService:nth-child(3){background-image:url('./img/Info-License.jpg');}
.infoServices .infoService:nth-child(4){background-image:url('./img/Info-Cash.jpg');}


@media only screen and ( max-width: 980px ) {
	#centreInfo{display:none;}

	#avantageBox .infoServices .infoService .inner {
		padding: 0px!important;
		font-size: 16px;
		width: 75%;
		margin: 0 auto;
		display: block;
		line-height: 1.4em;
	}

	#avantageBox .infoServices .infoService div:not(.heures) .inner {text-align:center;}
}

@media only screen and ( max-width: 767px ) {
	#avantageBox .infoServices .infoService{
		width:100%;
		border-top:2px solid #FFF;
		border-bottom:0!important;
		border-left:0!important;
		border-right:0!important;
	}

	#avantageBox .infoService .description {top: 20px!important;}

	#avantageBox .infoServices .infoService .description .icon{opacity:0;}

	#avantageBox .infoServices .infoService .inner {
		opacity: 1;
		visibility: visible;
		width:auto;
	}
}

@media only screen and ( max-width: 479px ) {
	#avantageBox .infoServices .infoService .inner {
		width:75%;
		font-size:15px;
	}

	#avantageBox .infoServices .infoService .heures .inner{
		width:60%;
	}
}