*{
    box-sizing: border-box;
  }
  .after-before-image{
    display: inline-block;
    width: 32%;
    position: relative;
    margin: 0px 7px;
    overflow: hidden;
  }
  .before-image,
  .after-image{
    width: 100%;
  }
  .before-image{
    position: absolute;
    left: 0;
    top: 0;
    clip: rect(0px, 0px, 0px, 0px);
  }
   .images-wrapper{padding:60px 0px;}
  .images-wrapper, .after-before-imag{display: flex;
    align-items: center;
    justify-content: center;}
    .after-before-imag .before-imag{margin:0px 15px;}
  .before-image img,
  .after-image img{
    max-width:100%;
    width: 100%;
    height: 305px;
    border-radius:5px;
  }
  .filter-overlay{
    height: 40px;
    width: 40px;
    border: 2px solid #fff;
    position: absolute;
    left: 0px;
    margin-left: -19px; 
    top: 49%;
    transform: translateY(-50%);
    border-radius: 100%;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:rgba(255, 255, 255, 0.2);
  }
  .filter-overlay.mid-pos{
    left: 50%;
  }
  .filter-overlay::after,
  .filter-overlay::before{
    content: "";
    left: 0;
    width: 2px;
    height: 9999px;
    background: #fff;
    position: absolute;
    right: 0;
    margin: 0 auto;
  }
  .filter-overlay::before{
    top: 38px;
  }
  .filter-overlay::after{
    bottom: 38px;
  }
  .filter-overlay span{
    width: 44%;
    display: inline-block;
    border: 6px inset transparent;
    margin: -3px;
    position: relative;
    top: 15%;
    transform: translateY(-50%);
  }
  .filter-overlay span.left-arrow{
    border-right: 6px solid white;
  }
  .filter-overlay span.right-arrow{
    border-left: 6px solid white;
  }
  @media screen and (max-width: 767px) {
    .after-before-image{
      width: 100%;
      display: block;
      margin: 10px 0;
    }
  }