.before-after-image-drag {
max-width:1200px;
margin: 0px auto;
  height: 700px;
  position: relative;
}
.before-after-image-drag img {
  width: 100%;
  height: 100%;
  position: absolute;
object-fit:cover;
}
.dragger {
  display:none;
  width: 4px;
  height: 100%;
  background: #fff;
  opacity: 0.75;
  position: absolute;
}
.dragger:after {
    content: "";
    width: 30px;
    height: 30px;
    background-color: #44d62c;
    border: 2px solid #fff;
    border-radius: 100%;
    top: 50%;
    left: 0px;
    margin: -13px;
    position: absolute;
}
.clipped {
  -webkit-clip-path: inset(0px 320px 0px 0px);
          clip-path: inset(0px 320px 0px 0px);
}
.compare-slider{
  display: block;
	 position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
}
.compare-slider:focus ~ .dragger:after{
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@media (max-width: 768px) {
.before-after-image-drag{
width:100%;
height: 500px;
}
}
@media (max-width: 425px) {
.before-after-image-drag{
width:100%;
height: 250px;
}
}
.razer-rtl .before-after-image-drag{
direction: ltr;
text-align: left;
}