@media screen and (max-width: 767px){before-after.invert-layout:after{content:"invert-layout";position:absolute;visibility:hidden}}@keyframes sliderAnimation{0%{--position: 50%}1%{--position: 50.18%}2%{--position: 50.35%}3%{--position: 50.53%}4%{--position: 50.7%}5%{--position: 50.88%}6%{--position: 51.05%}7%{--position: 51.23%}8%{--position: 51.4%}9%{--position: 51.58%}10%{--position: 51.75%}11%{--position: 51.93%}12%{--position: 52.1%}13%{--position: 52.28%}14%{--position: 52.45%}15%{--position: 52.63%}16%{--position: 52.8%}17%{--position: 52.98%}18%{--position: 53.15%}19%{--position: 53.33%}20%{--position: 53.5%}21%{--position: 53.68%}22%{--position: 53.85%}23%{--position: 54.03%}24%{--position: 54.2%}25%{--position: 54.38%}26%{--position: 54.55%}27%{--position: 54.73%}28%{--position: 54.9%}29%{--position: 55.08%}30%{--position: 55.25%}31%{--position: 55.43%}32%{--position: 55.6%}33%{--position: 55.78%}34%{--position: 55.95%}35%{--position: 56.13%}36%{--position: 56.3%}37%{--position: 56.48%}38%{--position: 56.65%}39%{--position: 56.83%}40%{--position: 57%}41%{--position: 57%}42%{--position: 57%}43%{--position: 57%}44%{--position: 57%}45%{--position: 57%}46%{--position: 57%}47%{--position: 57%}48%{--position: 56.87%}49%{--position: 56.74%}50%{--position: 56.61%}51%{--position: 56.48%}52%{--position: 56.35%}53%{--position: 56.22%}54%{--position: 56.09%}55%{--position: 55.96%}56%{--position: 55.83%}57%{--position: 55.7%}58%{--position: 55.57%}59%{--position: 55.44%}60%{--position: 55.3%}61%{--position: 55.17%}62%{--position: 55.04%}63%{--position: 54.91%}64%{--position: 54.78%}65%{--position: 54.65%}66%{--position: 54.52%}67%{--position: 54.38%}68%{--position: 54.25%}69%{--position: 54.12%}70%{--position: 53.99%}71%{--position: 53.86%}72%{--position: 53.73%}73%{--position: 53.6%}74%{--position: 53.47%}75%{--position: 53.34%}76%{--position: 53.21%}77%{--position: 53.08%}78%{--position: 52.95%}79%{--position: 52.83%}80%{--position: 52.7%}81%{--position: 52.57%}82%{--position: 52.44%}83%{--position: 52.31%}84%{--position: 52.18%}85%{--position: 52.05%}86%{--position: 51.92%}87%{--position: 51.79%}88%{--position: 51.66%}89%{--position: 51.53%}90%{--position: 51.4%}91%{--position: 51.28%}92%{--position: 51.15%}93%{--position: 51.02%}94%{--position: 50.89%}95%{--position: 50.76%}96%{--position: 50.63%}97%{--position: 50.5%}98%{--position: 50.38%}99%{--position: 50.25%}to{--position: 50%}}.before-after{--position: 50%;position:relative;width:100%;height:60vh}@media screen and (min-width: 768px){.before-after--desktop-small{height:50vh}}@media screen and (min-width: 768px){.before-after--desktop-medium{height:65vh}}@media screen and (min-width: 768px){.before-after--desktop-large{height:80vh}}@media screen and (max-width: 359px){.before-after--mobile-small{height:45vh}.before-after--mobile-medium{height:55vh}.before-after--mobile-large{height:65vh}}@media screen and (min-width: 360px) and (max-width: 399px){.before-after--mobile-small{height:48vh}.before-after--mobile-medium{height:58vh}.before-after--mobile-large{height:68vh}}@media screen and (min-width: 400px) and (max-width: 479px){.before-after--mobile-small{height:50vh}.before-after--mobile-medium{height:60vh}.before-after--mobile-large{height:70vh}}@media screen and (min-width: 480px) and (max-width: 767px){.before-after--mobile-small{height:52vh}.before-after--mobile-medium{height:62vh}.before-after--mobile-large{height:72vh}}.before-after .img{position:absolute;top:0;width:100%;height:100%;overflow:hidden}html[dir=rtl] .before-after .img{right:0}html[dir=ltr] .before-after .img{left:0}.before-after__label-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.before-after__label{display:inline-block;padding:10px 20px;position:absolute;bottom:var(--gutter-regular);z-index:1;border-radius:var(--border-radius-buttons);font-weight:var(--font-weight-body-primary-bold)}html[dir=rtl] .before-after__label{right:var(--gutter-regular)}html[dir=ltr] .before-after__label{left:var(--gutter-regular)}[data-layout=vertical] .before-after__label{left:50%!important;right:auto!important;top:var(--gutter-regular);bottom:auto;transform:translate(-50%)}.before-after--color-style-dark .before-after__label{background-color:var(--color-text-main);color:var(--color-background-main)}.before-after--color-style-light .before-after__label{background-color:var(--color-background-main);color:var(--color-text-main)}.before-after .foreground-img{clip-path:inset(0 0 0 var(--position))}html[dir=rtl] [data-layout=horizontal] .before-after .foreground-img{clip-path:inset(0 0 0 calc(100% - var(--position)))}[data-layout=vertical] .before-after .foreground-img{clip-path:inset(calc(100% - var(--position)) 0 0 0)}html[dir=rtl] .before-after .foreground-img .before-after__label{right:auto;left:var(--gutter-regular)}html[dir=ltr] .before-after .foreground-img .before-after__label{left:auto;right:var(--gutter-regular)}[data-layout=vertical] .before-after .foreground-img .before-after__label{top:auto;left:50%;right:auto;bottom:var(--gutter-regular);transform:translate(-50%)}.before-after .svg-placeholder{display:block;background-color:#d3d3d3}.before-after--handle{position:absolute;z-index:0;width:3px;height:100%;display:block;background-color:#000}html[dir=rtl] .before-after--handle{right:var(--position)}html[dir=ltr] .before-after--handle{left:var(--position)}.before-after--color-style-dark .before-after--handle{background-color:var(--color-text-main)}.before-after--color-style-light .before-after--handle{background-color:var(--color-background-main)}[data-layout=vertical] .before-after--handle{width:100%;height:3px;bottom:var(--position)}html[dir=rtl] [data-layout=vertical] .before-after--handle{right:0}html[dir=ltr] [data-layout=vertical] .before-after--handle{left:0}.before-after--handle-icon{display:inline-block;background-color:#000;content:"";width:2.75rem;height:2.75rem;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:0 0}@media screen and (max-width: 359px){.before-after--handle-icon{width:1.5rem;height:1.5rem}}@media screen and (min-width: 360px) and (max-width: 399px){.before-after--handle-icon{width:1.625rem;height:1.625rem}}@media screen and (min-width: 400px) and (max-width: 479px){.before-after--handle-icon{width:1.75rem;height:1.75rem}}@media screen and (min-width: 480px) and (max-width: 767px){.before-after--handle-icon{width:1.875rem;height:1.875rem}}[data-layout=vertical] .before-after--handle-icon{transform:rotate(90deg) translate(-50%,-50%)}.before-after--handle-icon svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media screen and (max-width: 359px){.before-after--handle-icon svg{transform:translate(-50%,-50%) scale(.6)}}@media screen and (min-width: 360px) and (max-width: 399px){.before-after--handle-icon svg{transform:translate(-50%,-50%) scale(.65)}}@media screen and (min-width: 400px) and (max-width: 479px){.before-after--handle-icon svg{transform:translate(-50%,-50%) scale(.7)}}@media screen and (min-width: 480px) and (max-width: 767px){.before-after--handle-icon svg{transform:translate(-50%,-50%) scale(.75)}}.before-after--color-style-dark .before-after--handle-icon{background-color:var(--color-text-main)}.before-after--color-style-dark .before-after--handle-icon svg path{fill:var(--color-background-main)}.before-after--color-style-light .before-after--handle-icon{background-color:var(--color-background-main)}.before-after--color-style-light .before-after--handle-icon svg path{fill:var(--color-text-main)}.before-after .before-after__slider{position:absolute;z-index:99;-webkit-appearance:none;appearance:none;width:100%;height:100%;background:transparent;outline:none;margin:0;transition:all ease .25s;overflow:hidden;padding:0;border:0;cursor:col-resize}.before-after .before-after__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:2.5rem;height:100vh}.before-after .before-after__slider::-moz-range-thumb,.before-after .before-after__slider::-moz-range-track,.before-after .before-after__slider::-moz-range-progress{opacity:0!important}.before-after .before-after__slider::-webkit-slider-container{opacity:0!important}.before-after .before-after__slider[orient=vertical]{cursor:row-resize;-webkit-appearance:slider-vertical;appearance:slider-vertical;writing-mode:lr;opacity:0}[data-layout=vertical] .before-after .before-after__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:100vw;height:2.5rem;opacity:0}[data-layout=vertical] .before-after .before-after__slider::-moz-range-thumb{width:2.5rem;height:2.5rem}.before-after--color-style-light .before-after__label{background-color:#e9e5da;color:#000}
/*# sourceMappingURL=/cdn/shop/t/23/assets/section-before-after.css.map */