.container{max-width:800px}#comparison{width:100%;overflow:hidden;position:relative}figure,figure1,figure2{position:absolute;background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-before.jpg);font-size:0;width:100%;height:100%;margin:0}#divisor,#divisor1,#divisor2{background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg);position:absolute;width:100%;box-shadow:0 5px 10px -2px #0000004d;bottom:0;height:100%}#divisor:before,#divisor:after,#divisor1:before,#divisor1:after,#divisor2:before,#divisor2:after{content:"";position:absolute;right:-2px;width:4px;height:calc(50% - 25px);background:#fff;z-index:3}#divisor:before,#divisor1:before,#divisor2:before{top:0;box-shadow:0 -3px 8px 1px #0000004d}#divisor:after,#divisor1:after,#divisor2:after{bottom:0;box-shadow:0 3px 8px 1px #0000004d}#handle,#handle1,#handle2{position:absolute;height:50px;width:50px;top:50%;left:50%;transform:translateY(-50%) translate(-50%);z-index:1}#handle:before,#handle:after,#handle1:before,#handle1:after,#handle2:before,#handle2:after{content:"";width:0;height:0;border:6px inset transparent;position:absolute;top:50%;margin-top:-6px}#handle:before,#handle1:before,#handle2:before{border-right:6px solid white;left:50%;margin-left:-17px}#handle:after,#handle1:after,#handle2:after{border-left:6px solid white;right:50%;margin-right:-17px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;position:absolute;top:50%;left:-4px;border:none;transform:translateY(-50%);background-color:transparent;width:calc(100% + 50px);z-index:2}input[type=range]:focus,input[type=range]:active{border:none;outline:none}input[type=range]::-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 #0000004d}input[type=range]::-moz-range-track{-moz-appearance:none;height:15px;width:100%;background-color:transparent;position:relative;outline:none}div#comparison{display:flex;flex-wrap:wrap;justify-content:space-between}.box-comp{position:relative;width:calc(33.33% - 16px);min-height:400px}.container,.container2,.container3{display:grid;place-content:center;position:relative;overflow:hidden;border-radius:1rem;--position: 50%}.image-container{max-width:800px;max-height:90vh}.slider-image{width:100%;height:100%;object-fit:cover;object-position:left}.image-before{position:absolute;top:0;right:0;bottom:0;left:0;width:var(--position)!important}.slider,.slider2,.slider3{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;opacity:0;width:100%;height:100%}.slider:focus-visible~.slider-button{outline:5px solid black;outline-offset:3px}.slider-line{position:absolute;top:0;right:0;bottom:0;left:0;width:.2rem;height:100%;background-color:#fff;left:var(--position);transform:translate(-50%);pointer-events:none}.slider-button{position:absolute;background-color:#fff;color:#000;padding:.5rem;border-radius:100vw;display:grid;place-items:center;top:50%;left:var(--position);transform:translate(-50%,-50%);pointer-events:none;box-shadow:1px 1px 1px #08030380}
/*# sourceMappingURL=/cdn/shop/t/10/compiled_assets/styles.css.map */