.before-after-slider{height:600px;overflow:hidden;position:relative;width:100%;z-index:0}.before-after-slider .img{height:100%;left:0;position:absolute;top:0;width:100%}.before-after-slider .foreground-img{width:50%}.before-after-slider .slider{align-items:center;-webkit-appearance:none;appearance:none;background:hsla(0,0%,95%,.3);display:flex;height:100%;justify-content:center;margin:0;outline:none;position:absolute;top:0;transition:all .2s;width:100%}.before-after-slider .slider:hover{background:hsla(0,0%,95%,.1)}.before-after-slider .slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;cursor:pointer;height:600px;width:6px}.before-after-slider .slider::-moz-range-thumb{background:#fff;cursor:pointer;height:600px;width:6px}.before-after-slider .slider-button{align-items:center;background-color:#fff;border-radius:50%;display:flex;height:30px;justify-content:center;left:calc(50% - 20px);pointer-events:none;position:absolute;top:calc(50% - 20px);width:30px}.before-after-slider .slider-button:after{transform:rotate(-45deg)}.before-after-slider .slider-button:after,.before-after-slider .slider-button:before{border:solid #5d5d5d;border-width:0 2px 2px 0;content:"";display:inline-block;padding:3px}.before-after-slider .slider-button:before{transform:rotate(135deg)}.before-after-slider .before-after-text .after-text:before,.before-after-slider .before-after-text .before-text:before{background:rgba(0,0,0,.5);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#fff;content:attr(data-content);font-size:13px;letter-spacing:.1em;line-height:38px;opacity:0;padding:0 20px;position:absolute;top:50%;transform:translateY(-50%);transition:all .4s ease;visibility:hidden}.before-after-slider .box:hover .before-after-text .after-text:before,.before-after-slider .box:hover .before-after-text .before-text:before{opacity:1;visibility:visible}.before-after-slider .before-after-text .before-text:before{left:12px}.before-after-slider .before-after-text .after-text:before{right:12px}