.container-avant-apres-centrer {
	width: 85%;
	margin: 0 auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	padding-bottom: 250px;
}
.container-avant-apres {
  width: 31%;
  margin: 1.5vw 0;
}
.slider {
	position:relative;
	padding-bottom:66.666666667%;
	margin: 0 auto;
	height: 10vw;	
}
.slider__after {
  position:absolute;
  top:0px;
  left:0px;
  z-index:1;
  width:100%;
  height:100%;
  background-size:cover;
  pointer-events: none;
}
.slider__before {
  position:absolute;
  top:0px;
  left:0px;
  z-index:2;
  width:50%;
  height:100%;
  background-size:cover;
  pointer-events: none;
  overflow:hidden;
}
.slider__before:before {
	content: 'Avant';
	position: absolute;
	left: 8px;
	top: 8px;
}
.slider__after:before {
	content: 'Après';
	position: absolute;
	right: 8px;
	top: 8px;
}
.slider__separator {
	position:absolute;
	left:50%;
	width:2px;
	top:0px;
	bottom:0px;
	background:rgba(255,255,255,0.7);
	box-shadow: 0 0 8px rgba(0,0,0,0.3);
	cursor: grab;
	z-index:3;
	transform:translateX(-50%);
}
.slider__range {
  position:absolute;
  width:100%;
  bottom:0px;
  z-index: 3;
  appearance: none;
  background:rgba(255,255,255,0.3);
  outline:none;
  margin:0px;
	cursor:grab;
}
.slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:12px;
  height:16px;
  background:white;
}
.slider__range::-moz-slider-thumb {
  -moz-appearance: none;
  width:12px;
  height:16px;
  background:white;
}
.slider-1 .slider__before {
  background-image: url('../images/Slider-1-avant.gif');
}
.slider-1 .slider__after {
  background-image: url('../images/Slider-1-après.gif');
}
.slider-2 .slider__before {
  background-image: url('../images/Slider-2-avant.gif');
}
.slider-2 .slider__after {
  background-image: url('../images/Slider-2-après.gif');
}
.slider-3 .slider__before {
  background-image: url('../images/Slider-3-avant.gif');
}
.slider-3 .slider__after {
  background-image: url('../images/Slider-3-après.gif');
}
.slider-4 .slider__before {
  background-image: url('../images/Slider-4-avant.gif');
}
.slider-4 .slider__after {
  background-image: url('../images/Slider-4-après.gif');
}
.slider-5 .slider__before {
  background-image: url('../images/Slider-5-avant.gif');
}
.slider-5 .slider__after {
  background-image: url('../images/Slider-5-après.gif');
}
.slider-6 .slider__before {
  background-image: url('../images/Slider-6-avant.gif');
}
.slider-6 .slider__after {
  background-image: url('../images/Slider-6-après.gif');
}
.slider__separator:before {
	content:'';
	width:2.5vw;
	height:2.5vw;
	border-radius:50%;
	border:2px solid #fff;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	background: url("../images/cd-arrows.svg") no-repeat center center ;
	background-color: rgba(0,0,0,0.2);
	box-shadow: 0 0 8px rgba(0,0,0,0.3);
}
.slider__range {
  display:none;
}
.slider__before:before, 
.slider__after:before {
	font-family: 'avenir_lt_std65_medium';	
	top:94%;
	transform:translateY(-50%);
	font-size: 2vw;
	color:#FFFFFF;
	margin-left:10px;
	margin-right:10px;
	text-shadow: 0 0 10px rgba(0,0,0,0.75);
}
/************ RESPONSIVE **************/

@media (min-width: 1401px) and (max-width: 1500px) {
.slider {
  height: 9vw;
}
}
@media (min-width: 1025px) and (max-width: 1400px) {
.container-avant-apres-centrer {
    padding-bottom: 220px;
}	
.slider {
  height: 9vw;
}
.slider__separator::before {
	width: 3vw;
	height: 3vw;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.container-avant-apres {
  width: 47.5%;
  margin: 2vw 0;
}
.container-avant-apres-centrer {
  padding-bottom: 205px;
}
.slider {
  height: 13vw;
}
.slider__before::before,
.slider__after::before {
	margin-left: 4px;
	margin-right: 4px;
	font-size: 3vw;
}
.slider__separator::before {
	width: 4.5vw;
	height: 4.5vw;
}
}
@media (min-width: 481px) and (max-width: 768px) {	
.container-avant-apres {
  width: 47.5%;
  margin: 2vw 0;
}
.slider {
	height: 14vw;
}	
.container-avant-apres-centrer {
	padding-bottom: 130px;
}
.slider__before::before,
.slider__after::before {
	margin-left: 3px;
	margin-right: 3px;
	font-size: 3vw;
}
.slider__separator::before {
	width: 6vw;
	height: 6vw;
}	
}
@media (min-width: 403px) and (max-width: 480px) {	
.container-avant-apres-centrer {
	width: 80%;
  padding-bottom: 95px;

}	
.container-avant-apres {
  width: 100%;
  margin: 3vw 0;
}

.slider {
	height: 29vw;
}
.slider__before::before,
.slider__after::before {
	margin-left: 5px;
	margin-right: 5px;
	font-size: 5vw;
}
.slider__separator::before {
	width: 9vw;
	height: 9vw;
}		
}
@media (max-width: 402px) {	
.container-avant-apres-centrer {
  padding-bottom: 65px;
}
}