.compar {
    position:relative;
    height:0px;
    padding-bottom:40%;
    overflow: hidden;
  }
  
  .compar__after {
    position:absolute;
    top:0px;
    left:0px;
    z-index:1;
    width:100%;
    height:100%;
    background-size:cover;
    pointer-events: none;
  }
  
  .compar__before {
    position:absolute;
    top:0px;
    left:0px;
    z-index:2;
    width:50%;
    height:100%;
    background-size:cover;
    pointer-events: none;
    overflow:hidden;
  }
  
  .after1 {
    background-image: url('../../img/pic/after1.png');
  }
  
  .before1 {
    background-image: url('../../img/pic/before1.png');
  }

  .after2 {
    background-image: url('../../img/pic/after2.png');
  }
  
  .before2 {
    background-image: url('../../img/pic/before2.png');
  }

  .after3 {
    background-image: url('../../img/pic/after3.png');
  }
  
  .before3 {
    background-image: url('../../img/pic/before3.png');
  }

  .after4 {
    background-image: url('../../img/pic/after4.png');
  }
  
  .before4 {
    background-image: url('../../img/pic/before4.png');
  }


  .compar__before:before {
    content:'Avant';
    position:absolute;
    left:8px;
    top:8px;
  }
  
  .compar__after:before {
    content:'Après';
    position:absolute;
    right:8px;
    top:8px;
  }
  
  .compar__separator {
    position:absolute;
    left:50%;
    width:5px;
    top:0px;
    bottom:0px;
    background:#005329;
    box-shadow: 0 5px 10px 0px rgba(0,0,0,0.5);
    cursor:ew-resize;
    z-index:3;
    transform:translateX(-50%);
  }
  
  .compar__range {
    position:absolute;
    width:100%;
    bottom:0px;
    z-index: 3;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background:rgba(255,255,255,0.3);
    outline:none;
    margin:0px;
  }
  
  .compar__range::-webkit-compar-thumb {
    -webkit-appearance: none;
    width:12px;
    height:16px;
    background:#005329;
  }
  
  .compar__range::-moz-compar-thumb {
    -moz-appearance: none;
    width:12px;
    height:16px;
    background:#005329;
  }
  
  .compar--bis .compar__separator:before {
    content: '';
    width: 35px;
    height: 90px;
    border-radius: 10px;
    border: solid 3px #005329;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: radial-gradient(#79BD1A, #005329);
  }
  
  .compar--bis .compar__separator:after {
    content: '';
    width: 25px;
    height: 55px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url("../../img/icons/arrows.svg");
    background-repeat: no-repeat;
  }

  .compar--bis .compar__range {
    display:none;
  }
  
  .compar--bis .compar__before:before, 
  .compar--bis .compar__after:before {
    top:80%;
    transform:translateY(-50%);
    padding:8px 16px;
    border-radius:8px;
    margin-left:8px;
    margin-right:8px;
    font-size: 50px;
    font-family: 'Lee Toscanini9';
    text-shadow: 0 0 5px #0053298a, 0 0 20px #00532900;
    color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: white;
  }

  .compar--bis .compar__before:before {
      transform: rotate(-10deg);
  }
  .compar--bis .compar__after:before {
      transform: rotate(10deg);
  }

@media screen and (max-width: 1200px) {
  
  .compar--bis .compar__before::before,
  .compar--bis .compar__after::before {
    top: 70%;
    font-size: 45px;
  }
}

@media screen and (max-width: 900px) {

  .compar--bis .compar__before::before,
  .compar--bis .compar__after::before {
    top: 60%;
    font-size: 40px;
  }
}