.comparison {

  position: relative;

}



.comparison .comparison__slider {

  position: relative;

  display: block;

  user-select: none;

  overflow: hidden;

}



.comparison .comparison__slider .comparison__photo img {

  width: 100%;

  height: auto;

  object-fit: cover;

  object-position: center;

}



.comparison .comparison__slider .comparison__photo--before {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

  transform: translate(-50%)

}



.comparison .comparison__slider .comparison__photo--before img,

.comparison .comparison__slider .comparison__photo--before .comparison__layer {

  transform: translate(50%)

}



.comparison .comparison__slider .comparison__divider {

  height: 50px;

  width: 50px;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  border: 3px solid #fefefe;

  background: #cccccc;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -ms-border-radius: 50%;

  border-radius: 50%;

  z-index: 0;

  cursor: pointer;

  -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);

  -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);

  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);

}



.comparison .comparison__slider .comparison__divider::before,

.comparison .comparison__slider .comparison__divider::after {

  content: " ";

  display: block;

  background: #fefefe;

  position: absolute;

  z-index: 0;

  width: 3px;

  height: 9999px;

  left: 50%;

  margin-left: -1px;

}



.comparison .comparison__slider .comparison__divider::before {

  bottom: 50%;

  margin-bottom: 23px

}



.comparison .comparison__slider .comparison__divider::after {

  top: 50%;

  margin-top: 23px

}



.comparison .comparison__slider .comparison__divider .comparison__handle {

  position: absolute;

  width: 44px;

  height: 44px;

  cursor: pointer;

}



.comparison .comparison__slider .comparison__divider .comparison__handle::before,

.comparison .comparison__slider .comparison__divider .comparison__handle::after {

  content: " ";

  display: block;

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  border-top: 7px solid transparent;

  border-bottom: 7px solid transparent;

}



.comparison .comparison__slider .comparison__divider .comparison__handle::before {

  left: 8px;

  border-right: 7px solid #fefefe

}



.comparison .comparison__slider .comparison__divider .comparison__handle::after {

  right: 8px;

  border-left: 7px solid #fefefe

}



/* .comparison__caption {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 2;

}



.comparison__caption--before,

.comparison__caption--after {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  opacity: 1;

  color: #666;

  background: #fefefe;

  font-size: 1.2rem;

  font-weight: 600;

  padding: 1rem 1.5rem;

  -webkit-transition: all 0.3s ease-out;

  -moz-transition: all 0.3s ease-out;

  -o-transition: all 0.3s ease-out;

  -ms-transition: all 0.3s ease-out;

  transition: all 0.3s ease-out

}



@media (min-width: 576px) {

  .comparison__caption--before,

  .comparison__caption--after {

      font-size:1.4rem

  }

}



.comparison__caption--before {

  left: 0

}



.comparison__caption--after {

  right: 0

}



.comparison:hover .comparison__caption--before,

.comparison:hover .comparison__caption--after,

.comparison:focus .comparison__caption--before,

.comparison:focus .comparison__caption--after {

  opacity: 0

} */