.before-after-wrapper{overflow:hidden}.before-after{display:block;position:relative;aspect-ratio:var(--ba-ratio, 1)}.before-after--media{position:absolute;top:0;width:100%;height:100%;overflow:hidden;-moz-user-select:none;-webkit-user-select:none;user-select:none;display:flex;padding:24px}@media screen and (min-width:750px){.before-after--media{padding:32px}}.before-after--media-before{left:0;z-index:1;mask-image:linear-gradient(to right,rgba(0,0,0,1) var(--percent),rgba(0,0,0,0) var(--percent));-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,1) var(--percent),rgba(0,0,0,0) var(--percent))}.before-after--media-after{right:0;z-index:0}.before-after--media.heading-position--top{align-items:start}.before-after--media.heading-position--center{align-items:center}.before-after--media.heading-position--bottom{align-items:end}.before-after--media.heading-alignment--left{justify-content:start}.before-after--media.heading-alignment--center{justify-content:center}.before-after--media.heading-alignment--right{justify-content:end}.before-after--media__mobile{display:block}.before-after--media__desktop{display:none}@media screen and (min-width:750px){.before-after--media__mobile{display:none}.before-after--media__desktop{display:block}}.before-after--media .before-after--media__overlay{position:absolute;display:block;top:0;left:0;bottom:0;right:0;background-color:var(--overlay-color);pointer-events:none;z-index:1}.before-after--media__heading{display:block;margin:0;color:rgb(var(--text-color));z-index:3}.before-after--media img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;-moz-user-select:none;-webkit-user-select:none;user-select:none}.before-after--media svg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;-moz-user-select:none;-webkit-user-select:none;user-select:none}.before-after--media svg.media_placeholder-1{background-color:#f5f5f5}.before-after--media svg.media_placeholder-2{background-color:#ebebeb}.before-after__divider{position:absolute;top:0;bottom:0;left:var(--percent);width:2px;padding:0 5px;transform:translate(-50%);z-index:2;cursor:grab;touch-action:none}.before-after__divider.grab{cursor:grabbing}.before-after__divider:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translate(-50%);box-shadow:0 0 15px rgba(#000,.15);clip-path:inset(0px -5px 0px -5px);background-color:rgb(var(--color-button))}.before-after.divider-color .before-after__divider:before{background-color:rgb(var(--color-line, var(--color-button)))}.before-after__divider-icon{position:absolute;top:50%;left:50%;background-color:rgb(var(--color-button));color:rgb(var(--color-button-text));transform:translate(-50%,-50%);display:flex;justify-content:center;align-items:center;padding:12px;border-radius:50%;z-index:4;box-shadow:0 0 5px rgba(#000,.15)}.before-after.divider-color .before-after__divider-icon{background-color:rgb(var(--color-line, var(--color-button)))}.before-after.divider-icon-color .before-after__divider-icon{color:rgb(var(--color-line-icon, var(--color-button-text)))}.before-after__divider-icon .icon{width:24px;height:24px;z-index:4}.before-after-section{display:flex;flex-direction:column;align-items:stretch;padding:2.4rem}.before-after-section__inner{display:flex;flex-direction:column;gap:3.2rem;width:100%;max-width:112rem}.before-after-section--center{margin-inline:auto}.before-after-section--left{margin-inline-start:0;margin-inline-end:auto}.before-after-section .before-after-wrapper,.before-after-section .row{display:contents}.before-after__header{width:100%;line-height:1}.before-after__header-light{font-weight:300;line-height:1;color:rgb(var(--color-foreground));margin:0}.before-after__header-bold{font-weight:600;line-height:1;color:rgb(var(--color-foreground));text-transform:uppercase;margin:0}.before-after-layout{display:flex;flex-direction:column;gap:2.4rem;width:100%}.before-after-slider-wrap{width:100%;max-width:80rem}.before-after__info{display:flex;flex-direction:column;gap:1.2rem;justify-content:center}.before-after__info-time{font-family:var(--font-body-family);font-size:var(--font-size-xl);font-weight:600;line-height:1.2;color:rgb(var(--color-foreground));text-transform:uppercase;margin:0}.before-after__info-hint{font-family:var(--font-body-family);font-size:var(--text-font-size-small);font-weight:300;line-height:1.6;color:rgb(var(--roc-color-text-secondary));text-transform:uppercase;margin:0}.before-after-labels{display:flex;gap:3.2rem;align-items:flex-start;justify-content:center;text-align:center;width:100%;margin:0}.before-after-labels__item{flex:1 0 0;min-width:0;font-family:var(--font-body-family);font-size:1.6rem;font-weight:600;line-height:2.4rem;color:rgb(var(--color-foreground));margin:0}.before-after-section .before-after{width:100%;max-width:100%}.before-after-caption{width:100%;max-width:34.2rem;margin:0 auto;font-family:var(--font-body-family);font-size:1.4rem;font-weight:400;line-height:1.8rem;color:rgb(var(--roc-color-text-tertiary));text-align:center}@media screen and (min-width:750px){.before-after-layout{flex-direction:row;align-items:center;gap:4rem}.before-after__info{flex:0 0 28rem;max-width:28rem}.before-after-slider-wrap{flex:1 1 0;min-width:0}}.before-after-section .before-after--media__heading{display:none}.before-after--vertical .before-after--media-before{mask-image:linear-gradient(to bottom,rgba(0,0,0,1) var(--percent),rgba(0,0,0,0) var(--percent));-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) var(--percent),rgba(0,0,0,0) var(--percent));top:0;left:0}.before-after--vertical .before-after--media-after{top:auto;bottom:0;left:0;right:auto}.before-after--vertical .before-after__divider{top:var(--percent);left:0;right:auto;bottom:auto;width:100%;height:2px;padding:5px 0;transform:translateY(-50%);cursor:ns-resize}.before-after--vertical .before-after__divider.grab{cursor:grabbing}.before-after--vertical .before-after__divider:before{top:50%;left:0;right:0;width:auto;height:2px;transform:translateY(-50%);clip-path:inset(0px -5px 0px -5px)}.before-after--vertical .before-after__divider-icon svg{transform:rotate(90deg)}.before-after-labels--overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:auto;pointer-events:none;z-index:3}.before-after-labels--overlay .before-after-labels__item{position:absolute;flex:unset;min-width:unset;background-color:rgb(var(--color-background));color:rgb(var(--roc-color-navy));padding:.6rem 1.2rem;line-height:2.4rem}.before-after-labels--overlay .before-after-labels__item--before{top:0;left:0}.before-after-labels--overlay .before-after-labels__item--after{bottom:0;right:0}
/*# sourceMappingURL=/cdn/shop/t/23/assets/before-after-image.css.map */