before-after{display:block;position:relative;overflow:hidden;height:100%;--before-after-slider-width: 40px;--before-after-overlay-color: var(--color-border, #222);border-radius:var(--before-after-border-radius, 0)}before-after:not(.before-after--ready) *:not(.before-after__image){display:none}before-after .before-after__captions{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:space-between;align-items:flex-start;padding:.5rem 1rem;pointer-events:none;color:var(--before-after-caption-color, var(--before-after-overlay-color))}before-after .before-after__image{display:block;width:100%;height:100%;object-fit:cover}before-after .before-after__image--before{object-position:left 50%}before-after .before-after__image--after{position:absolute;top:0;right:0;bottom:0;width:100%;object-position:right 50%}before-after .before-after__slider{position:absolute;top:0;right:0;bottom:0;left:0;width:calc(100% + var(--before-after-slider-width));left:calc(-1 * var(--before-after-slider-width) / 2);background:transparent;border:0;margin:0;-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:manipulation}before-after .before-after__slider::-webkit-slider-thumb{-webkit-appearance:none;width:var(--before-after-slider-width);height:100vh;background:transparent;border:0;box-shadow:none}before-after .before-after__slider::-moz-range-thumb{width:var(--before-after-slider-width);height:100vh;background:transparent;border:0;box-shadow:none}before-after .before-after__separator{position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%);width:2px;background:var(--before-after-overlay-color)}before-after .before-after__handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:space-between;width:46px;height:46px;border-radius:50%;border:2px solid var(--before-after-overlay-color);color:var(--before-after-overlay-color);pointer-events:none}before-after .before-after__handle:before{content:"";position:absolute;top:12px;bottom:12px;left:50%;width:1px;background:var(--before-after-overlay-color)}before-after .before-after__icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}before-after .before-after__icon--right{transform:scaleX(-1)}before-after.before-after--stacked .before-after__captions{position:static;flex-direction:column;gap:.25rem}before-after.before-after--stacked .before-after__image--after{position:relative}.heading-position-next-to-media .before-after-layout{margin:auto!important}.heading-position-next-to-media .before-after-heading{margin-bottom:1em}.heading-position-next-to-media.media-position-left .before-after-content{padding-left:1em}.heading-position-next-to-media.media-position-right .before-after-content{padding-right:1em}.heading-position-next-to-media .text-column{flex:0 0 var(--text-column-width, 50%);max-width:var(--text-column-width, 50%);padding:0!important}.heading-position-next-to-media .media-column{flex:0 0 var(--media-column-width, 50%);max-width:var(--media-column-width, 50%);padding:0!important}.before-after-content{max-width:var(--text-max-width-mobile, 100%)}@media (max-width: 991px){.heading-position-next-to-media .before-after-layout{flex-direction:column-reverse}.heading-position-next-to-media .text-column,.heading-position-next-to-media .media-column{max-width:100%}.heading-position-next-to-media .media-column{margin-top:2em}.heading-position-next-to-media .btn-container{text-align:center}}@media (min-width: 992px){.before-after-content{max-width:var(--text-max-width-desktop, 100%)}}@media (max-width: 768px){before-after .before-after-heading-row{padding:1em 0}}
/*# sourceMappingURL=/cdn/shop/t/341/assets/component-before-after.css.map */