.esalon-component .esalon-before-after{--esalon-before-after-pos: 50%;--esalon-before-after-width: 393px;--esalon-before-after-height: 322px}.esalon-component .esalon-before-after__frame{position:relative;width:var(--esalon-before-after-width);max-width:100%;height:var(--esalon-before-after-height);margin:0 auto;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;isolation:isolate}.esalon-component .esalon-before-after__images{position:relative;width:100%;height:100%}.esalon-component .esalon-before-after__image{position:absolute;top:0;right:0;bottom:0;left:0}.esalon-component .esalon-before-after__image img{display:block;width:100%;height:100%;object-fit:cover}.esalon-component .esalon-before-after__image--before{clip-path:polygon(var(--esalon-before-after-pos, 50%) 0,100% 0,100% 100%,var(--esalon-before-after-pos, 50%) 100%)}.esalon-component .esalon-before-after__range{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;width:100%;height:100%;margin:0;padding:0;cursor:ew-resize;opacity:0;background:transparent;-webkit-appearance:none;appearance:none}.esalon-component .esalon-before-after__divider{display:block;position:absolute;top:0;bottom:0;left:var(--esalon-before-after-pos, 50%);z-index:4;width:5px;transform:translate(-50%);pointer-events:none;background-color:#fff}.esalon-component .esalon-before-after__pill{display:block;position:absolute;top:50%;left:var(--esalon-before-after-pos, 50%);z-index:5;width:20px;height:12px;transform:translate(-50%,-50%);pointer-events:none;background-color:#fff;border-radius:50px;box-shadow:0 1px 3px #00000040}.esalon-component .esalon-before-after__range:focus-visible~.esalon-before-after__divider,.esalon-component .esalon-before-after__range:focus-visible~.esalon-before-after__pill{box-shadow:0 0 0 3px var(--color-regal-blue-50)}.esalon-component .esalon-before-after__labels{display:flex;justify-content:space-between;width:var(--esalon-before-after-width);max-width:100%;margin:12px auto 0;padding:0 40px}.esalon-component .esalon-before-after__label{font-family:Apercu Pro Bold,sans-serif;font-weight:700;font-size:18px}@media screen and (max-width:749px){.esalon-component .esalon-before-after{--esalon-before-after-height: 280px}}
/*# sourceMappingURL=/cdn/shop/t/26/assets/esalon-component-before-after-slider.css.map */