.before-after-image{--color-primary: #032224;--color-bg: #f5f0eb;padding-top:var(--padding-top, 60px);padding-bottom:var(--padding-bottom, 60px)}@media only screen and (max-width:767px){.before-after-image{padding-top:var(--padding-top-mobile, 40px);padding-bottom:var(--padding-bottom-mobile, 40px)}}.section-before-after .row{max-width:100%;padding:0}.section-before-after .row .columns{padding:0 98px}@media only screen and (max-width:1024px){.section-before-after .row .columns{padding:0 20px}}@media only screen and (max-width:767px){.section-before-after .row{padding:0}}.before-after-image--header{text-align:center;padding-bottom:30px}@media only screen and (min-width:768px){.before-after-image--header{padding-bottom:50px}}.before-after-image--header h2{font-family:var(--font-heading-family, "EB Garamond", serif);font-size:32px;font-weight:400;line-height:.9;color:var(--color-primary);margin:0 0 12px}@media only screen and (min-width:768px){.before-after-image--header h2{font-size:48px}}.before-after-image--header p{font-family:var(--font-body-family, "Lato", sans-serif);font-size:14px;line-height:1.2;color:var(--color-primary);margin:0}@media only screen and (min-width:768px){.before-after-image--header p{font-size:16px}}.before-after-image--container{display:block;position:relative;margin:0 auto;width:100%;max-width:none;max-height:90vh}.before-after-image--media{display:block;position:relative;overflow:hidden;height:100%}.before-after-image--1{position:relative;height:100%}.before-after-image--1 .before-after-image--image{height:100%}.before-after-image--media:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;background:rgba(var(--color-overlay-rgb),var(--overlay-opacity))}.before-after-image--image .thb-placeholder,.before-after-image--image img{position:absolute;top:0;left:0;width:100%;height:100%}.before-after-image--image .thb-placeholder svg,.before-after-image--image img svg{object-fit:contain}.before-after-image--image img{object-fit:cover}@media only screen and (min-width:768px)and (max-width:1024px){.before-after-image--container{height:auto;aspect-ratio:1440 / 973}}@media only screen and (max-width:767px){.before-after-image--image.mobile-height-image{aspect-ratio:var(--image-aspect);min-height:unset}.before-after-image .small-12.columns{padding:0 20px}.before-after-image--container .before-after-image--divider-handle{height:20px;width:20px}.before-after-image--container .before-after-image--divider-handle span svg{width:8px;height:8px}.before-after-image--image.mobile-height-350,.before-after-image--image.mobile-height-400,.before-after-image--image.mobile-height-450,.before-after-image--image.mobile-height-500{min-height:274px;aspect-ratio:unset}}@media only screen and (min-width:768px){.before-after-image--image.desktop-height-image{min-height:70vh;aspect-ratio:16/5}.before-after-image--image.desktop-height-450{aspect-ratio:1440 / 450}.before-after-image--image.desktop-height-550{aspect-ratio:1440 / 550}.before-after-image--image.desktop-height-650{aspect-ratio:1440 / 968}.before-after-image--image.desktop-height-750{aspect-ratio:1440 / 750}.before-after-image--image.desktop-height-850{aspect-ratio:1440 / 850}.before-after-image--image.desktop-height-973{aspect-ratio:1440 / 973}}.before-after-image--2{clip-path:inset(0px 0px 0px var(--percent));position:absolute;z-index:3;top:0;left:0;width:100%;height:100%;overflow:hidden}.before-after-image--2 .before-after-image--content{justify-content:flex-end}.before-after-image--content{position:absolute;z-index:2;top:0;left:0;width:100%;height:100%;display:flex;padding:15px}@media only screen and (min-width:768px){.before-after-image--content{padding:30px}}@media only screen and (min-width:1068px){.before-after-image--content{padding:45px}}.before-after-image--content-center{align-items:center}.before-after-image--content-bottom{align-items:flex-end}.before-after-image--content h4{color:var(--color-body, #151515)}.before-after-image--info-card{position:absolute;z-index:2;background:transparent;padding:20px;display:flex;flex-direction:column;gap:12px;max-width:280px}.before-after-image--1 .before-after-image--info-card{left:0;bottom:0;padding-left:10px}@media only screen and (min-width:768px){.before-after-image--1 .before-after-image--info-card{left:42px;bottom:35%;padding-left:0}}.before-after-image--2 .before-after-image--info-card{right:0;bottom:0;padding-right:10px}@media only screen and (min-width:768px){.before-after-image--2 .before-after-image--info-card{right:80px;bottom:35%;padding-right:0}}.before-after-image--info-card h3{font-family:var(--font-heading-family, "EB Garamond", serif);font-size:18px;font-weight:400;line-height:1;color:var(--color-primary);margin:0}@media only screen and (min-width:768px){.before-after-image--info-card h3{font-size:32px}}.before-after-image--features{display:flex;flex-direction:column;gap:6px}@media only screen and (min-width:768px){.before-after-image--features{gap:16px}}.before-after-image--feature{display:flex;align-items:center;gap:8px}.before-after-image--feature-icon{width:24px;height:24px;flex-shrink:0}.before-after-image--feature-icon svg{width:100%;height:100%;color:var(--color-primary)}.before-after-image--feature-icon img{width:100%;height:100%;object-fit:contain}.before-after-image--feature span{color:#032224;font-family:Lato;font-size:10px;font-style:normal;font-weight:400;line-height:120%}@media only screen and (min-width:768px){.before-after-image--feature span{color:#032224;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:120%}}@media only screen and (max-width:767px){.before-after-image--feature:last-child{display:none}}.before-after-image--cta{display:inline-flex;align-items:center;font-family:var(--font-body-family, "Lato", sans-serif);font-size:14px;font-weight:900;color:var(--color-primary);text-decoration:none;border-bottom:1px solid var(--color-primary);padding-bottom:4px;transition:opacity .2s ease;max-width:65px}@media only screen and (max-width:767px){.before-after-image--cta{color:var(--Cyan-Green, #032224);text-align:center;font-family:Lato;font-size:12px;font-style:normal;font-weight:900;line-height:normal;max-width:56px}}.before-after-image--cta:hover{opacity:.7}.before-after-image--slider{position:absolute;top:50%;width:100%;left:0;z-index:40;transform:translateY(-50%);opacity:0;height:54px;cursor:pointer}.before-after-image--divider{position:absolute;top:0;bottom:0;z-index:10;width:2px;left:calc(var(--percent) - 1px);background:var(--color-line, #fff);box-shadow:0 4px 4px #00000040}.before-after-image--divider-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;background:#fff;border-radius:50%;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:2px;box-shadow:0 2px 8px #00000026;cursor:pointer;z-index:20}.before-after-image--divider-handle span{display:inline-flex;align-items:center;justify-content:center}.before-after-image--divider-handle span svg{width:15px;height:18px;color:var(--color-primary)}.before-after-image--divider-handle .arrow-left{transform:rotate(180deg)}.before-after-image--mobile{display:block}@media only screen and (min-width:768px){.before-after-image--mobile{display:none}}.before-after-image--desktop{display:none}@media only screen and (min-width:768px){.before-after-image--desktop{display:block}}
/*# sourceMappingURL=/cdn/shop/t/16/assets/before-after-image.css.map */