/* First comparison slider styles */
#comparison1 {
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden; 
    position: relative;
}

#comparison1 figure { 
    position: absolute;
    background-image: url('../img/before/PortraitModelBefore-ezgif.com-jpg-to-webp-converter.webp');
    background-size: cover;
    background-position: center;
    font-size: 0;
    width: 100%;
    height: 100%;
    margin: 0; 
}

#divisor1 { 
    background-image: url('../img/after/PortraitModelAfter-ezgif.com-jpg-to-webp-converter.webp');
    background-size: cover;
    background-position: center;
    position: absolute;
    width: 50%; 
    box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
    bottom: 0; 
    height: 100%;
}

#handle1 {
    position: absolute;
    height: 50px;
    width: 50px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 1;
}

input[type=range]#slider1 {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-color: transparent;
    width: 100%;
    z-index: 2;
}

input[type=range]#slider1::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: transparent;
    border: 4px solid white;
    box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
}

input[type=range]#slider1::-moz-range-thumb {
    border: none;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: transparent;
    border: 4px solid white;
    box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
}

input[type=range]#slider1::-moz-range-track {
    height: 15px;
    background-color: transparent;
}

/* Second comparison slider styles */
#comparison2 {
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden; 
    position: relative;
}

#comparison2 figure { 
    position: absolute;
    background-image: url(../img/before/PortraitModelBefore-ezgif.com-jpg-to-webp-converter.webp);
    background-size: cover;
    font-size: 0;
    width: 100%;
    height: 100%;
    margin: 0; 
}

#divisor2 { 
    background-image: url(../img/after/PortraitModelAfter-ezgif.com-jpg-to-webp-converter.webp);
    background-size: cover;
    position: absolute;
    width: 50%; 
    box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
    bottom: 0; height: 100%;
}

#handle2 {
    position: absolute;
    height: 50px;
    width: 50px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 1;
}

input[type=range]#slider2{
    -webkit-appearance:none;
    -moz-appearance:none;
    position: absolute;
    top: 287px;
    left: -16px;
    transform: translateY(-50%);
    background-color: transparent;
    width: calc(569px + 73px);
    z-index: 2;
}

input[type=range]#slider2::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: transparent;
    border: 4px solid white;
    box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
}

input[type=range]#slider2::-moz-range-track {
    -moz-appearance:none;
    height:15px;
    width: 10%;
    background-color: transparent; 
    position: relative;
    outline: none;    
}

/* Third comparison slider styles */
#comparison3 {
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden; 
    position: relative;
}

#comparison3 figure { 
    position: absolute;
    background-image: url('../img/before/PortraitModelBefore-ezgif.com-jpg-to-webp-converter.webp');
    background-size: cover;
    background-position: center;
    font-size: 0;
    width: 100%;
    height: 100%;
    margin: 0; 
}

#divisor3 { 
    background-image: url('../img/after/PortraitModelAfter-ezgif.com-jpg-to-webp-converter.webp');
    background-size: cover;
    background-position: center;
    position: absolute;
    width: 50%; 
    box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
    bottom: 0; 
    height: 100%;
}

#handle3 {
    position: absolute;
    height: 50px;
    width: 50px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 1;
}

input[type=range]#slider3 {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-color: transparent;
    width: 100%;
    z-index: 2;
}

input[type=range]#slider3::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: transparent;
    border: 4px solid white;
    box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
}

input[type=range]#slider3::-moz-range-thumb {
    border: none;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: transparent;
    border: 4px solid white;
    box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
}

input[type=range]#slider3::-moz-range-track {
    height: 15px;
    background-color: transparent;
}


/* new before after */
/*      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');*/



.image {
  width: 100%;
  display: block;
  height: 60vh;
}

#before-after-slider-1,
#before-after-slider-2,
#before-after-slider-3,
#before-after-slider-4,
#before-after-slider-5,
#before-after-slider-6,
#before-after-slider-7,
#before-after-slider-8,
#before-after-slider-9,
#before-after-slider-10 {
  width: 100%;
  position: relative;
  overflow: hidden;
  border: 3px solid white;
  height: 60vh;
}

#before-image-1,
#before-image-2,
#before-image-3,
#before-image-4,
#before-image-5,
#before-image-6,
#before-image-7,
#before-image-8,
#before-image-9,
#before-image-10 {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 2;
}

#after-image-1,
#after-image-2,
#after-image-3,
#after-image-4,
#after-image-5,
#after-image-6,
#after-image-7,
#after-image-8,
#after-image-9,
#after-image-10 {
  display: block;
}

#resizer-1,
#resizer-2,
#resizer-3,
#resizer-4,
#resizer-5,
#resizer-6,
#resizer-7,
#resizer-8,
#resizer-9,
#resizer-10 {
  position: absolute;
  display: flex;
  align-items: center;
  z-index: 5;
  top: 0;
  left: 50%;
  height: 100%;
  width: 4px;
  background: white;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

#resizer-1:after,
#resizer-2:after,
#resizer-3:after,
#resizer-4:after,
#resizer-5:after,
#resizer-6:after,
#resizer-7:after,
#resizer-8:after,
#resizer-9:after,
#resizer-10:after {
  background: linear-gradient(62deg, #c93072 5%, #3365c0);
  content: '\f337';
  font-weight: 900;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  position: absolute;
  margin: 0 0 0 -22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid white;
}

@media (max-width: 767px) {
  .container {
    width: 100%;
    padding: 0 20px;
  }
}




/* second */