.slider {
    position:relative;
    height:0px;
    padding-bottom:66.666666667%;
}

.slider .slider_separator:before {
    content:'';
    width:32px;
    height:32px;
    border-radius:50%;
    border:solid 2px white;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

.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';
    color:white;
    font-family: 'poppins';
    font-weight:bold ;
    font-size:16px;
    text-transform:uppercase;
    text-shadow: 2px 2px 2px rgba(0,0,0,1);
    position:absolute;
    left: 8px;
    top:8px;
}
.slider_after:before {
    content:'Après';
    color:white;
    font-family: 'poppins';
    font-weight:bold ;
    font-size:16px;
    text-transform:uppercase;
    text-shadow: 2px 2px 2px rgba(0,0,0,1);
    position:absolute;
    right: 8px;
    top:8px;
}

.slider .slider_before:before, .slider .slider_after:before {
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,0.5);
    padding:2px 4px;
    border-radius:8px;
    margin-left:8px;
    margin-right:8px;

}
.slider_separator {
    position:absolute;
    left:50%;
    width:2px;
    top:0px;
    bottom:0px;
    background:rgba(255,255,255,0.7);
    box-shadow: 0 5px 10px 0px rgba(0,0,0,0.5);
    cursor:ew-resize;
    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;
}
.slider_range {
   display:none;
}

.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;
}

/*Photo1*/
.avant1 {
    background-image: url('./retouche/animages-avant1.jpg');
}
.apres1 {
    background-image: url('./retouche/animages-apres1.jpg');
}

/*Photo2*/
.avant2 {
    background-image: url('./retouche/animages-avant2.jpg');
}
.apres2 {
    background-image: url('./retouche/animages-apres2.jpg');
}

/*Photo3*/
.avant3 {
    background-image: url('./retouche/animages-avant3.jpg');
}
.apres3 {
    background-image: url('./retouche/animages-apres3.jpg');
}

/*Photo4*/
.avant4 {
    background-image: url('./retouche/animages-avant4.jpg');
}
.apres4 {
    background-image: url('./retouche/animages-apres4.jpg');
}

/*Photo5*/
.avant5 {
    background-image: url('./retouche/animages-avant5.jpg');
}
.apres5 {
    background-image: url('./retouche/animages-apres5.jpg');
}

/*Photo6*/
.avant6 {
    background-image: url('./retouche/animages-avant6.jpg');
}
.apres6 {
    background-image: url('./retouche/animages-apres6.jpg');
}

/*Photo7*/
.avant7 {
    background-image: url('./retouche/animages-avant7.jpg');
}
.apres7 {
    background-image: url('./retouche/animages-apres7.jpg');
}

/*Photo8*/
.avant8 {
    background-image: url('./retouche/animages-avant8.jpg');
}
.apres8 {
    background-image: url('./retouche/animages-apres8.jpg');
}

/*Photo9*/
.avant9 {
    background-image: url('./retouche/animages-avant9.jpg');
}
.apres9 {
    background-image: url('./retouche/animages-apres9.jpg');
}

/*Photo10*/
.avant10 {
    background-image: url('./retouche/animages-avant10.jpg');
}
.apres10 {
    background-image: url('./retouche/animages-apres10.jpg');
}