/** Shopify CDN: Minification failed Line 2884:2 Expected identifier but found "*" Line 7760:2 Expected identifier but found "*" Line 7774:2 Expected identifier but found "*" Line 7787:2 Expected identifier but found "*" Line 9969:2 Expected identifier but found "*" Line 10543:41 Unexpected "=" Line 12563:2 Expected identifier but found "*" Line 12576:2 Expected identifier but found "*" Line 14629:2 Expected identifier but found "*" **/ @charset "UTF-8"; /*! ============================================================================ Pipeline Theme | (c) Groupthought Themes ============================================================================== */ @font-face { font-family: 'LL-Brown-Regular-Web'; src: url('./lineto-brown-regular.eot'); src: url('./lineto-brown-regular.eot#iefix') format('embedded-opentype'), url('./lineto-brown-regular.woff2') format('woff2'), url('./lineto-brown-regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Bookmania'; src: url('./Bookmania-Regular.eot'); src: url('./Bookmania-Regular.eot#iefix') format('embedded-opentype'), url('./Bookmania-Regular.woff2') format('woff2'), url('./Bookmania-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } /*! Pipeline CSS -> */ /*================ Flickity v2.2.2 ================*/ .flickity-enabled { position: relative; } .flickity-enabled:focus { outline: none; } .flickity-viewport { overflow: hidden; position: relative; height: 100%; } .flickity-slider { position: absolute; width: 100%; height: 100%; } /* draggable */ .flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } .flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: grab; } .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: grabbing; } /* ---- flickity-button ---- */ .flickity-button { position: absolute; background: hsla(0, 0%, 100%, 0.75); border: none; color: var(--text); } .flickity-button:hover { background: #fff; cursor: pointer; } .flickity-button:focus { outline: none; } .flickity-button:active { opacity: 0.6; } .flickity-button:disabled { opacity: 0.3; cursor: auto; /* prevent disabled button from capturing pointer up event. #716 */ pointer-events: none; } .flickity-button-icon { fill: currentColor; } /* ---- previous/next buttons ---- */ .flickity-prev-next-button { top: 50%; width: 36px; height: 36px; border-radius: 50%; /* vertically center */ transform: translateY(-50%); } .flickity-prev-next-button.previous { left: 10px; } .flickity-prev-next-button.next { right: 10px; } /* right to left */ .flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 10px; } .flickity-rtl .flickity-prev-next-button.next { right: auto; left: 10px; } .flickity-prev-next-button .flickity-button-icon { position: absolute; left: 33%; top: 33%; width: 35%; height: 35%; } /* ---- page dots ---- */ .flickity-page-dots { position: absolute; width: 100%; bottom: 0; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; } .flickity-rtl .flickity-page-dots { direction: rtl; } .flickity-page-dots .dot { display: inline-block; width: 8px; height: 8px; margin: 0 5px; background: var(---color-primary); border-radius: 50%; opacity: 0.4; cursor: pointer; } .flickity-page-dots .dot.is-selected { opacity: 1; } .flickity-badge-dots .flickity-page-dots { text-align: right; padding: 13px; display: flex; align-items: center; justify-content: flex-end; width: auto; border-radius: 20px; overflow: hidden; } .flickity-badge-dots .flickity-page-dots .dot { display: inline-block; position: relative; z-index: 5; width: 3px; height: 3px; margin: 0 5px; background: var(--bg); border-radius: 50%; opacity: 0.25; cursor: pointer; } .flickity-badge-dots .flickity-page-dots .dot.is-selected { opacity: 1; } /*================ Animate On Scroll ================*/ .aos-initialized [data-aos][data-aos][data-aos-duration='50'], .aos-initialized body[data-aos-duration='50'] [data-aos] { transition-duration: 50ms; } .aos-initialized [data-aos][data-aos][data-aos-delay='50'], .aos-initialized body[data-aos-delay='50'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='50'].aos-animate, .aos-initialized body[data-aos-delay='50'] [data-aos].aos-animate { transition-delay: 50ms; } .aos-initialized [data-aos][data-aos][data-aos-duration='100'], .aos-initialized body[data-aos-duration='100'] [data-aos] { transition-duration: 0.1s; } .aos-initialized [data-aos][data-aos][data-aos-delay='100'], .aos-initialized body[data-aos-delay='100'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='100'].aos-animate, .aos-initialized body[data-aos-delay='100'] [data-aos].aos-animate { transition-delay: 0.1s; } .aos-initialized [data-aos][data-aos][data-aos-duration='150'], .aos-initialized body[data-aos-duration='150'] [data-aos] { transition-duration: 0.15s; } .aos-initialized [data-aos][data-aos][data-aos-delay='150'], .aos-initialized body[data-aos-delay='150'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='150'].aos-animate, .aos-initialized body[data-aos-delay='150'] [data-aos].aos-animate { transition-delay: 0.15s; } .aos-initialized [data-aos][data-aos][data-aos-duration='200'], .aos-initialized body[data-aos-duration='200'] [data-aos] { transition-duration: 0.2s; } .aos-initialized [data-aos][data-aos][data-aos-delay='200'], .aos-initialized body[data-aos-delay='200'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='200'].aos-animate, .aos-initialized body[data-aos-delay='200'] [data-aos].aos-animate { transition-delay: 0.2s; } .aos-initialized [data-aos][data-aos][data-aos-duration='250'], .aos-initialized body[data-aos-duration='250'] [data-aos] { transition-duration: 0.25s; } .aos-initialized [data-aos][data-aos][data-aos-delay='250'], .aos-initialized body[data-aos-delay='250'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='250'].aos-animate, .aos-initialized body[data-aos-delay='250'] [data-aos].aos-animate { transition-delay: 0.25s; } .aos-initialized [data-aos][data-aos][data-aos-duration='300'], .aos-initialized body[data-aos-duration='300'] [data-aos] { transition-duration: 0.3s; } .aos-initialized [data-aos][data-aos][data-aos-delay='300'], .aos-initialized body[data-aos-delay='300'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='300'].aos-animate, .aos-initialized body[data-aos-delay='300'] [data-aos].aos-animate { transition-delay: 0.3s; } .aos-initialized [data-aos][data-aos][data-aos-duration='350'], .aos-initialized body[data-aos-duration='350'] [data-aos] { transition-duration: 0.35s; } .aos-initialized [data-aos][data-aos][data-aos-delay='350'], .aos-initialized body[data-aos-delay='350'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='350'].aos-animate, .aos-initialized body[data-aos-delay='350'] [data-aos].aos-animate { transition-delay: 0.35s; } .aos-initialized [data-aos][data-aos][data-aos-duration='400'], .aos-initialized body[data-aos-duration='400'] [data-aos] { transition-duration: 0.4s; } .aos-initialized [data-aos][data-aos][data-aos-delay='400'], .aos-initialized body[data-aos-delay='400'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='400'].aos-animate, .aos-initialized body[data-aos-delay='400'] [data-aos].aos-animate { transition-delay: 0.4s; } .aos-initialized [data-aos][data-aos][data-aos-duration='450'], .aos-initialized body[data-aos-duration='450'] [data-aos] { transition-duration: 0.45s; } .aos-initialized [data-aos][data-aos][data-aos-delay='450'], .aos-initialized body[data-aos-delay='450'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='450'].aos-animate, .aos-initialized body[data-aos-delay='450'] [data-aos].aos-animate { transition-delay: 0.45s; } .aos-initialized [data-aos][data-aos][data-aos-duration='500'], .aos-initialized body[data-aos-duration='500'] [data-aos] { transition-duration: 0.5s; } .aos-initialized [data-aos][data-aos][data-aos-delay='500'], .aos-initialized body[data-aos-delay='500'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='500'].aos-animate, .aos-initialized body[data-aos-delay='500'] [data-aos].aos-animate { transition-delay: 0.5s; } .aos-initialized [data-aos][data-aos][data-aos-duration='550'], .aos-initialized body[data-aos-duration='550'] [data-aos] { transition-duration: 0.55s; } .aos-initialized [data-aos][data-aos][data-aos-delay='550'], .aos-initialized body[data-aos-delay='550'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='550'].aos-animate, .aos-initialized body[data-aos-delay='550'] [data-aos].aos-animate { transition-delay: 0.55s; } .aos-initialized [data-aos][data-aos][data-aos-duration='600'], .aos-initialized body[data-aos-duration='600'] [data-aos] { transition-duration: 0.6s; } .aos-initialized [data-aos][data-aos][data-aos-delay='600'], .aos-initialized body[data-aos-delay='600'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='600'].aos-animate, .aos-initialized body[data-aos-delay='600'] [data-aos].aos-animate { transition-delay: 0.6s; } .aos-initialized [data-aos][data-aos][data-aos-duration='650'], .aos-initialized body[data-aos-duration='650'] [data-aos] { transition-duration: 0.65s; } .aos-initialized [data-aos][data-aos][data-aos-delay='650'], .aos-initialized body[data-aos-delay='650'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='650'].aos-animate, .aos-initialized body[data-aos-delay='650'] [data-aos].aos-animate { transition-delay: 0.65s; } .aos-initialized [data-aos][data-aos][data-aos-duration='700'], .aos-initialized body[data-aos-duration='700'] [data-aos] { transition-duration: 0.7s; } .aos-initialized [data-aos][data-aos][data-aos-delay='700'], .aos-initialized body[data-aos-delay='700'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='700'].aos-animate, .aos-initialized body[data-aos-delay='700'] [data-aos].aos-animate { transition-delay: 0.7s; } .aos-initialized [data-aos][data-aos][data-aos-duration='750'], .aos-initialized body[data-aos-duration='750'] [data-aos] { transition-duration: 0.75s; } .aos-initialized [data-aos][data-aos][data-aos-delay='750'], .aos-initialized body[data-aos-delay='750'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='750'].aos-animate, .aos-initialized body[data-aos-delay='750'] [data-aos].aos-animate { transition-delay: 0.75s; } .aos-initialized [data-aos][data-aos][data-aos-duration='800'], .aos-initialized body[data-aos-duration='800'] [data-aos] { transition-duration: 0.8s; } .aos-initialized [data-aos][data-aos][data-aos-delay='800'], .aos-initialized body[data-aos-delay='800'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='800'].aos-animate, .aos-initialized body[data-aos-delay='800'] [data-aos].aos-animate { transition-delay: 0.8s; } .aos-initialized [data-aos][data-aos][data-aos-duration='850'], .aos-initialized body[data-aos-duration='850'] [data-aos] { transition-duration: 0.85s; } .aos-initialized [data-aos][data-aos][data-aos-delay='850'], .aos-initialized body[data-aos-delay='850'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='850'].aos-animate, .aos-initialized body[data-aos-delay='850'] [data-aos].aos-animate { transition-delay: 0.85s; } .aos-initialized [data-aos][data-aos][data-aos-duration='900'], .aos-initialized body[data-aos-duration='900'] [data-aos] { transition-duration: 0.9s; } .aos-initialized [data-aos][data-aos][data-aos-delay='900'], .aos-initialized body[data-aos-delay='900'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='900'].aos-animate, .aos-initialized body[data-aos-delay='900'] [data-aos].aos-animate { transition-delay: 0.9s; } .aos-initialized [data-aos][data-aos][data-aos-duration='950'], .aos-initialized body[data-aos-duration='950'] [data-aos] { transition-duration: 0.95s; } .aos-initialized [data-aos][data-aos][data-aos-delay='950'], .aos-initialized body[data-aos-delay='950'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='950'].aos-animate, .aos-initialized body[data-aos-delay='950'] [data-aos].aos-animate { transition-delay: 0.95s; } .aos-initialized [data-aos][data-aos][data-aos-duration='1000'], .aos-initialized body[data-aos-duration='1000'] [data-aos] { transition-duration: 1s; } .aos-initialized [data-aos][data-aos][data-aos-delay='1000'], .aos-initialized body[data-aos-delay='1000'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='1000'].aos-animate, .aos-initialized body[data-aos-delay='1000'] [data-aos].aos-animate { transition-delay: 1s; } .aos-initialized [data-aos][data-aos][data-aos-duration='1050'], .aos-initialized body[data-aos-duration='1050'] [data-aos] { transition-duration: 1.05s; } .aos-initialized [data-aos][data-aos][data-aos-delay='1050'], .aos-initialized body[data-aos-delay='1050'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='1050'].aos-animate, .aos-initialized body[data-aos-delay='1050'] [data-aos].aos-animate { transition-delay: 1.05s; } .aos-initialized [data-aos][data-aos][data-aos-duration='1100'], .aos-initialized body[data-aos-duration='1100'] [data-aos] { transition-duration: 1.1s; } .aos-initialized [data-aos][data-aos][data-aos-delay='1100'], .aos-initialized body[data-aos-delay='1100'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='1100'].aos-animate, .aos-initialized body[data-aos-delay='1100'] [data-aos].aos-animate { transition-delay: 1.1s; } .aos-initialized [data-aos][data-aos][data-aos-duration='1150'], .aos-initialized body[data-aos-duration='1150'] [data-aos] { transition-duration: 1.15s; } .aos-initialized [data-aos][data-aos][data-aos-delay='1150'], .aos-initialized body[data-aos-delay='1150'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='1150'].aos-animate, .aos-initialized body[data-aos-delay='1150'] [data-aos].aos-animate { transition-delay: 1.15s; } .aos-initialized [data-aos][data-aos][data-aos-duration='1200'], .aos-initialized body[data-aos-duration='1200'] [data-aos] { transition-duration: 1.2s; } .aos-initialized [data-aos][data-aos][data-aos-delay='1200'], .aos-initialized body[data-aos-delay='1200'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='1200'].aos-animate, .aos-initialized body[data-aos-delay='1200'] [data-aos].aos-animate { transition-delay: 1.2s; } .aos-initialized [data-aos][data-aos][data-aos-duration='1250'], .aos-initialized body[data-aos-duration='1250'] [data-aos] { transition-duration: 1.25s; } .aos-initialized [data-aos][data-aos][data-aos-delay='1250'], .aos-initialized body[data-aos-delay='1250'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='1250'].aos-animate, .aos-initialized body[data-aos-delay='1250'] [data-aos].aos-animate { transition-delay: 1.25s; } .aos-initialized [data-aos][data-aos][data-aos-duration='1300'], .aos-initialized body[data-aos-duration='1300'] [data-aos] { transition-duration: 1.3s; } .aos-initialized [data-aos][data-aos][data-aos-delay='1300'], .aos-initialized body[data-aos-delay='1300'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='1300'].aos-animate, .aos-initialized body[data-aos-delay='1300'] [data-aos].aos-animate { transition-delay: 1.3s; } .aos-initialized [data-aos][data-aos][data-aos-duration='1350'], .aos-initialized body[data-aos-duration='1350'] [data-aos] { transition-duration: 1.35s; } .aos-initialized [data-aos][data-aos][data-aos-delay='1350'], .aos-initialized body[data-aos-delay='1350'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='1350'].aos-animate, .aos-initialized body[data-aos-delay='1350'] [data-aos].aos-animate { transition-delay: 1.35s; } .aos-initialized [data-aos][data-aos][data-aos-duration='1400'], .aos-initialized body[data-aos-duration='1400'] [data-aos] { transition-duration: 1.4s; } .aos-initialized [data-aos][data-aos][data-aos-delay='1400'], .aos-initialized body[data-aos-delay='1400'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='1400'].aos-animate, .aos-initialized body[data-aos-delay='1400'] [data-aos].aos-animate { transition-delay: 1.4s; } .aos-initialized [data-aos][data-aos][data-aos-duration='1450'], .aos-initialized body[data-aos-duration='1450'] [data-aos] { transition-duration: 1.45s; } .aos-initialized [data-aos][data-aos][data-aos-delay='1450'], .aos-initialized body[data-aos-delay='1450'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='1450'].aos-animate, .aos-initialized body[data-aos-delay='1450'] [data-aos].aos-animate { transition-delay: 1.45s; } .aos-initialized [data-aos][data-aos][data-aos-duration='1500'], .aos-initialized body[data-aos-duration='1500'] [data-aos] { transition-duration: 1.5s; } .aos-initialized [data-aos][data-aos][data-aos-delay='1500'], .aos-initialized body[data-aos-delay='1500'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='1500'].aos-animate, .aos-initialized body[data-aos-delay='1500'] [data-aos].aos-animate { transition-delay: 1.5s; } .aos-initialized [data-aos][data-aos][data-aos-duration='1550'], .aos-initialized body[data-aos-duration='1550'] [data-aos] { transition-duration: 1.55s; } .aos-initialized [data-aos][data-aos][data-aos-delay='1550'], .aos-initialized body[data-aos-delay='1550'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='1550'].aos-animate, .aos-initialized body[data-aos-delay='1550'] [data-aos].aos-animate { transition-delay: 1.55s; } .aos-initialized [data-aos][data-aos][data-aos-duration='1600'], .aos-initialized body[data-aos-duration='1600'] [data-aos] { transition-duration: 1.6s; } .aos-initialized [data-aos][data-aos][data-aos-delay='1600'], .aos-initialized body[data-aos-delay='1600'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='1600'].aos-animate, .aos-initialized body[data-aos-delay='1600'] [data-aos].aos-animate { transition-delay: 1.6s; } .aos-initialized [data-aos][data-aos][data-aos-duration='1650'], .aos-initialized body[data-aos-duration='1650'] [data-aos] { transition-duration: 1.65s; } .aos-initialized [data-aos][data-aos][data-aos-delay='1650'], .aos-initialized body[data-aos-delay='1650'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='1650'].aos-animate, .aos-initialized body[data-aos-delay='1650'] [data-aos].aos-animate { transition-delay: 1.65s; } .aos-initialized [data-aos][data-aos][data-aos-duration='1700'], .aos-initialized body[data-aos-duration='1700'] [data-aos] { transition-duration: 1.7s; } .aos-initialized [data-aos][data-aos][data-aos-delay='1700'], .aos-initialized body[data-aos-delay='1700'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='1700'].aos-animate, .aos-initialized body[data-aos-delay='1700'] [data-aos].aos-animate { transition-delay: 1.7s; } .aos-initialized [data-aos][data-aos][data-aos-duration='1750'], .aos-initialized body[data-aos-duration='1750'] [data-aos] { transition-duration: 1.75s; } .aos-initialized [data-aos][data-aos][data-aos-delay='1750'], .aos-initialized body[data-aos-delay='1750'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='1750'].aos-animate, .aos-initialized body[data-aos-delay='1750'] [data-aos].aos-animate { transition-delay: 1.75s; } .aos-initialized [data-aos][data-aos][data-aos-duration='1800'], .aos-initialized body[data-aos-duration='1800'] [data-aos] { transition-duration: 1.8s; } .aos-initialized [data-aos][data-aos][data-aos-delay='1800'], .aos-initialized body[data-aos-delay='1800'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='1800'].aos-animate, .aos-initialized body[data-aos-delay='1800'] [data-aos].aos-animate { transition-delay: 1.8s; } .aos-initialized [data-aos][data-aos][data-aos-duration='1850'], .aos-initialized body[data-aos-duration='1850'] [data-aos] { transition-duration: 1.85s; } .aos-initialized [data-aos][data-aos][data-aos-delay='1850'], .aos-initialized body[data-aos-delay='1850'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='1850'].aos-animate, .aos-initialized body[data-aos-delay='1850'] [data-aos].aos-animate { transition-delay: 1.85s; } .aos-initialized [data-aos][data-aos][data-aos-duration='1900'], .aos-initialized body[data-aos-duration='1900'] [data-aos] { transition-duration: 1.9s; } .aos-initialized [data-aos][data-aos][data-aos-delay='1900'], .aos-initialized body[data-aos-delay='1900'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='1900'].aos-animate, .aos-initialized body[data-aos-delay='1900'] [data-aos].aos-animate { transition-delay: 1.9s; } .aos-initialized [data-aos][data-aos][data-aos-duration='1950'], .aos-initialized body[data-aos-duration='1950'] [data-aos] { transition-duration: 1.95s; } .aos-initialized [data-aos][data-aos][data-aos-delay='1950'], .aos-initialized body[data-aos-delay='1950'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='1950'].aos-animate, .aos-initialized body[data-aos-delay='1950'] [data-aos].aos-animate { transition-delay: 1.95s; } .aos-initialized [data-aos][data-aos][data-aos-duration='2000'], .aos-initialized body[data-aos-duration='2000'] [data-aos] { transition-duration: 2s; } .aos-initialized [data-aos][data-aos][data-aos-delay='2000'], .aos-initialized body[data-aos-delay='2000'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='2000'].aos-animate, .aos-initialized body[data-aos-delay='2000'] [data-aos].aos-animate { transition-delay: 2s; } .aos-initialized [data-aos][data-aos][data-aos-duration='2050'], .aos-initialized body[data-aos-duration='2050'] [data-aos] { transition-duration: 2.05s; } .aos-initialized [data-aos][data-aos][data-aos-delay='2050'], .aos-initialized body[data-aos-delay='2050'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='2050'].aos-animate, .aos-initialized body[data-aos-delay='2050'] [data-aos].aos-animate { transition-delay: 2.05s; } .aos-initialized [data-aos][data-aos][data-aos-duration='2100'], .aos-initialized body[data-aos-duration='2100'] [data-aos] { transition-duration: 2.1s; } .aos-initialized [data-aos][data-aos][data-aos-delay='2100'], .aos-initialized body[data-aos-delay='2100'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='2100'].aos-animate, .aos-initialized body[data-aos-delay='2100'] [data-aos].aos-animate { transition-delay: 2.1s; } .aos-initialized [data-aos][data-aos][data-aos-duration='2150'], .aos-initialized body[data-aos-duration='2150'] [data-aos] { transition-duration: 2.15s; } .aos-initialized [data-aos][data-aos][data-aos-delay='2150'], .aos-initialized body[data-aos-delay='2150'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='2150'].aos-animate, .aos-initialized body[data-aos-delay='2150'] [data-aos].aos-animate { transition-delay: 2.15s; } .aos-initialized [data-aos][data-aos][data-aos-duration='2200'], .aos-initialized body[data-aos-duration='2200'] [data-aos] { transition-duration: 2.2s; } .aos-initialized [data-aos][data-aos][data-aos-delay='2200'], .aos-initialized body[data-aos-delay='2200'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='2200'].aos-animate, .aos-initialized body[data-aos-delay='2200'] [data-aos].aos-animate { transition-delay: 2.2s; } .aos-initialized [data-aos][data-aos][data-aos-duration='2250'], .aos-initialized body[data-aos-duration='2250'] [data-aos] { transition-duration: 2.25s; } .aos-initialized [data-aos][data-aos][data-aos-delay='2250'], .aos-initialized body[data-aos-delay='2250'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='2250'].aos-animate, .aos-initialized body[data-aos-delay='2250'] [data-aos].aos-animate { transition-delay: 2.25s; } .aos-initialized [data-aos][data-aos][data-aos-duration='2300'], .aos-initialized body[data-aos-duration='2300'] [data-aos] { transition-duration: 2.3s; } .aos-initialized [data-aos][data-aos][data-aos-delay='2300'], .aos-initialized body[data-aos-delay='2300'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='2300'].aos-animate, .aos-initialized body[data-aos-delay='2300'] [data-aos].aos-animate { transition-delay: 2.3s; } .aos-initialized [data-aos][data-aos][data-aos-duration='2350'], .aos-initialized body[data-aos-duration='2350'] [data-aos] { transition-duration: 2.35s; } .aos-initialized [data-aos][data-aos][data-aos-delay='2350'], .aos-initialized body[data-aos-delay='2350'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='2350'].aos-animate, .aos-initialized body[data-aos-delay='2350'] [data-aos].aos-animate { transition-delay: 2.35s; } .aos-initialized [data-aos][data-aos][data-aos-duration='2400'], .aos-initialized body[data-aos-duration='2400'] [data-aos] { transition-duration: 2.4s; } .aos-initialized [data-aos][data-aos][data-aos-delay='2400'], .aos-initialized body[data-aos-delay='2400'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='2400'].aos-animate, .aos-initialized body[data-aos-delay='2400'] [data-aos].aos-animate { transition-delay: 2.4s; } .aos-initialized [data-aos][data-aos][data-aos-duration='2450'], .aos-initialized body[data-aos-duration='2450'] [data-aos] { transition-duration: 2.45s; } .aos-initialized [data-aos][data-aos][data-aos-delay='2450'], .aos-initialized body[data-aos-delay='2450'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='2450'].aos-animate, .aos-initialized body[data-aos-delay='2450'] [data-aos].aos-animate { transition-delay: 2.45s; } .aos-initialized [data-aos][data-aos][data-aos-duration='2500'], .aos-initialized body[data-aos-duration='2500'] [data-aos] { transition-duration: 2.5s; } .aos-initialized [data-aos][data-aos][data-aos-delay='2500'], .aos-initialized body[data-aos-delay='2500'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='2500'].aos-animate, .aos-initialized body[data-aos-delay='2500'] [data-aos].aos-animate { transition-delay: 2.5s; } .aos-initialized [data-aos][data-aos][data-aos-duration='2550'], .aos-initialized body[data-aos-duration='2550'] [data-aos] { transition-duration: 2.55s; } .aos-initialized [data-aos][data-aos][data-aos-delay='2550'], .aos-initialized body[data-aos-delay='2550'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='2550'].aos-animate, .aos-initialized body[data-aos-delay='2550'] [data-aos].aos-animate { transition-delay: 2.55s; } .aos-initialized [data-aos][data-aos][data-aos-duration='2600'], .aos-initialized body[data-aos-duration='2600'] [data-aos] { transition-duration: 2.6s; } .aos-initialized [data-aos][data-aos][data-aos-delay='2600'], .aos-initialized body[data-aos-delay='2600'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='2600'].aos-animate, .aos-initialized body[data-aos-delay='2600'] [data-aos].aos-animate { transition-delay: 2.6s; } .aos-initialized [data-aos][data-aos][data-aos-duration='2650'], .aos-initialized body[data-aos-duration='2650'] [data-aos] { transition-duration: 2.65s; } .aos-initialized [data-aos][data-aos][data-aos-delay='2650'], .aos-initialized body[data-aos-delay='2650'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='2650'].aos-animate, .aos-initialized body[data-aos-delay='2650'] [data-aos].aos-animate { transition-delay: 2.65s; } .aos-initialized [data-aos][data-aos][data-aos-duration='2700'], .aos-initialized body[data-aos-duration='2700'] [data-aos] { transition-duration: 2.7s; } .aos-initialized [data-aos][data-aos][data-aos-delay='2700'], .aos-initialized body[data-aos-delay='2700'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='2700'].aos-animate, .aos-initialized body[data-aos-delay='2700'] [data-aos].aos-animate { transition-delay: 2.7s; } .aos-initialized [data-aos][data-aos][data-aos-duration='2750'], .aos-initialized body[data-aos-duration='2750'] [data-aos] { transition-duration: 2.75s; } .aos-initialized [data-aos][data-aos][data-aos-delay='2750'], .aos-initialized body[data-aos-delay='2750'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='2750'].aos-animate, .aos-initialized body[data-aos-delay='2750'] [data-aos].aos-animate { transition-delay: 2.75s; } .aos-initialized [data-aos][data-aos][data-aos-duration='2800'], .aos-initialized body[data-aos-duration='2800'] [data-aos] { transition-duration: 2.8s; } .aos-initialized [data-aos][data-aos][data-aos-delay='2800'], .aos-initialized body[data-aos-delay='2800'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='2800'].aos-animate, .aos-initialized body[data-aos-delay='2800'] [data-aos].aos-animate { transition-delay: 2.8s; } .aos-initialized [data-aos][data-aos][data-aos-duration='2850'], .aos-initialized body[data-aos-duration='2850'] [data-aos] { transition-duration: 2.85s; } .aos-initialized [data-aos][data-aos][data-aos-delay='2850'], .aos-initialized body[data-aos-delay='2850'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='2850'].aos-animate, .aos-initialized body[data-aos-delay='2850'] [data-aos].aos-animate { transition-delay: 2.85s; } .aos-initialized [data-aos][data-aos][data-aos-duration='2900'], .aos-initialized body[data-aos-duration='2900'] [data-aos] { transition-duration: 2.9s; } .aos-initialized [data-aos][data-aos][data-aos-delay='2900'], .aos-initialized body[data-aos-delay='2900'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='2900'].aos-animate, .aos-initialized body[data-aos-delay='2900'] [data-aos].aos-animate { transition-delay: 2.9s; } .aos-initialized [data-aos][data-aos][data-aos-duration='2950'], .aos-initialized body[data-aos-duration='2950'] [data-aos] { transition-duration: 2.95s; } .aos-initialized [data-aos][data-aos][data-aos-delay='2950'], .aos-initialized body[data-aos-delay='2950'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='2950'].aos-animate, .aos-initialized body[data-aos-delay='2950'] [data-aos].aos-animate { transition-delay: 2.95s; } .aos-initialized [data-aos][data-aos][data-aos-duration='3000'], .aos-initialized body[data-aos-duration='3000'] [data-aos] { transition-duration: 3s; } .aos-initialized [data-aos][data-aos][data-aos-delay='3000'], .aos-initialized body[data-aos-delay='3000'] [data-aos] { transition-delay: 0; } .aos-initialized [data-aos][data-aos][data-aos-delay='3000'].aos-animate, .aos-initialized body[data-aos-delay='3000'] [data-aos].aos-animate { transition-delay: 3s; } .aos-initialized [data-aos][data-aos][data-aos-easing='linear'], .aos-initialized body[data-aos-easing='linear'] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); } .aos-initialized [data-aos][data-aos][data-aos-easing='ease'], .aos-initialized body[data-aos-easing='ease'] [data-aos] { transition-timing-function: ease; } .aos-initialized [data-aos][data-aos][data-aos-easing='ease-in'], .aos-initialized body[data-aos-easing='ease-in'] [data-aos] { transition-timing-function: ease-in; } .aos-initialized [data-aos][data-aos][data-aos-easing='ease-out'], .aos-initialized body[data-aos-easing='ease-out'] [data-aos] { transition-timing-function: ease-out; } .aos-initialized [data-aos][data-aos][data-aos-easing='ease-in-out'], .aos-initialized body[data-aos-easing='ease-in-out'] [data-aos] { transition-timing-function: ease-in-out; } .aos-initialized [data-aos][data-aos][data-aos-easing='ease-in-back'], .aos-initialized body[data-aos-easing='ease-in-back'] [data-aos] { transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045); } .aos-initialized [data-aos][data-aos][data-aos-easing='ease-out-back'], .aos-initialized body[data-aos-easing='ease-out-back'] [data-aos] { transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } .aos-initialized [data-aos][data-aos][data-aos-easing='ease-in-out-back'], .aos-initialized body[data-aos-easing='ease-in-out-back'] [data-aos] { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .aos-initialized [data-aos][data-aos][data-aos-easing='ease-in-sine'], .aos-initialized body[data-aos-easing='ease-in-sine'] [data-aos] { transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); } .aos-initialized [data-aos][data-aos][data-aos-easing='ease-out-sine'], .aos-initialized body[data-aos-easing='ease-out-sine'] [data-aos] { transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); } .aos-initialized [data-aos][data-aos][data-aos-easing='ease-in-out-sine'], .aos-initialized body[data-aos-easing='ease-in-out-sine'] [data-aos] { transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); } .aos-initialized [data-aos][data-aos][data-aos-easing='ease-in-quad'], .aos-initialized body[data-aos-easing='ease-in-quad'] [data-aos] { transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } .aos-initialized [data-aos][data-aos][data-aos-easing='ease-out-quad'], .aos-initialized body[data-aos-easing='ease-out-quad'] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } .aos-initialized [data-aos][data-aos][data-aos-easing='ease-in-out-quad'], .aos-initialized body[data-aos-easing='ease-in-out-quad'] [data-aos] { transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } .aos-initialized [data-aos][data-aos][data-aos-easing='ease-in-cubic'], .aos-initialized body[data-aos-easing='ease-in-cubic'] [data-aos] { transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } .aos-initialized [data-aos][data-aos][data-aos-easing='ease-out-cubic'], .aos-initialized body[data-aos-easing='ease-out-cubic'] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } .aos-initialized [data-aos][data-aos][data-aos-easing='ease-in-out-cubic'], .aos-initialized body[data-aos-easing='ease-in-out-cubic'] [data-aos] { transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } .aos-initialized [data-aos][data-aos][data-aos-easing='ease-in-quart'], .aos-initialized body[data-aos-easing='ease-in-quart'] [data-aos] { transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } .aos-initialized [data-aos][data-aos][data-aos-easing='ease-out-quart'], .aos-initialized body[data-aos-easing='ease-out-quart'] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } .aos-initialized [data-aos][data-aos][data-aos-easing='ease-in-out-quart'], .aos-initialized body[data-aos-easing='ease-in-out-quart'] [data-aos] { transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } .aos-initialized [data-aos^='fade'][data-aos^='fade'] { opacity: 0; transition-property: opacity, transform; } .aos-initialized [data-aos^='fade'][data-aos^='fade'].aos-animate { opacity: 1; transform: translate(0); } .aos-initialized [data-aos='fade-up'] { transform: translateY(50px); } .aos-initialized [data-aos='fade-down'] { transform: translateY(-50px); } .aos-initialized [data-aos='fade-right'] { transform: translate(-50px); } .aos-initialized [data-aos='fade-left'] { transform: translate(50px); } .aos-initialized [data-aos='fade-up-right'] { transform: translate(-50px, 50px); } .aos-initialized [data-aos='fade-up-left'] { transform: translate(50px, 50px); } .aos-initialized [data-aos='fade-down-right'] { transform: translate(-50px, -50px); } .aos-initialized [data-aos='fade-down-left'] { transform: translate(50px, -50px); } .aos-initialized [data-aos^='zoom'][data-aos^='zoom'] { opacity: 0; transition-property: opacity, transform; } .aos-initialized [data-aos^='zoom'][data-aos^='zoom'].aos-animate { opacity: 1; transform: translate(0) scale(1); } .aos-initialized [data-aos='zoom-in'] { transform: scale(0.6); } .aos-initialized [data-aos='zoom-in-up'] { transform: translateY(50px) scale(0.6); } .aos-initialized [data-aos='zoom-in-down'] { transform: translateY(-50px) scale(0.6); } .aos-initialized [data-aos='zoom-in-right'] { transform: translate(-50px) scale(0.6); } .aos-initialized [data-aos='zoom-in-left'] { transform: translate(50px) scale(0.6); } .aos-initialized [data-aos='zoom-out'] { transform: scale(1.2); } .aos-initialized [data-aos='zoom-out-up'] { transform: translateY(50px) scale(1.2); } .aos-initialized [data-aos='zoom-out-down'] { transform: translateY(-50px) scale(1.2); } .aos-initialized [data-aos='zoom-out-right'] { transform: translate(-50px) scale(1.2); } .aos-initialized [data-aos='zoom-out-left'] { transform: translate(50px) scale(1.2); } .aos-initialized [data-aos^='slide'][data-aos^='slide'] { transition-property: transform; } .aos-initialized [data-aos^='slide'][data-aos^='slide'].aos-animate { transform: translate(0); } .aos-initialized [data-aos='slide-up'] { transform: translateY(100%); } .aos-initialized [data-aos='slide-down'] { transform: translateY(-100%); } .aos-initialized [data-aos='slide-right'] { transform: translateX(-100%); } .aos-initialized [data-aos='slide-left'] { transform: translateX(100%); } .aos-initialized [data-aos^='flip'][data-aos^='flip'] { -webkit-backface-visibility: hidden; backface-visibility: hidden; transition-property: transform; } .aos-initialized [data-aos='flip-left'] { transform: perspective(2500px) rotateY(-100deg); } .aos-initialized [data-aos='flip-left'].aos-animate { transform: perspective(2500px) rotateY(0); } .aos-initialized [data-aos='flip-right'] { transform: perspective(2500px) rotateY(100deg); } .aos-initialized [data-aos='flip-right'].aos-animate { transform: perspective(2500px) rotateY(0); } .aos-initialized [data-aos='flip-up'] { transform: perspective(2500px) rotateX(-100deg); } .aos-initialized [data-aos='flip-up'].aos-animate { transform: perspective(2500px) rotateX(0); } .aos-initialized [data-aos='flip-down'] { transform: perspective(2500px) rotateX(100deg); } .aos-initialized [data-aos='flip-down'].aos-animate { transform: perspective(2500px) rotateX(0); } .aos-initialized [data-aos='img-in'] { opacity: 0; transform: scale(1.3); transition-property: transform, opacity; } .aos-initialized [data-aos='img-in'].aos-animate { opacity: 1; transform: scale(1); } .aos-initialized [data-aos='img-in-bg'] .background-size-cover { opacity: 0; transform: scale(1.12); transition-property: transform, opacity; } .aos-initialized [data-aos='img-in-bg'] .background-size-cover.aos-animate .background-size-cover { opacity: 1; transform: scale(1); } .aos-initialized [data-aos='fade'] { opacity: 0; transition-property: opacity; } .aos-initialized [data-aos='fade'].aos-animate { opacity: 1; } .aos-initialized [data-aos='svg-dash'] path { stroke-dasharray: 100; stroke-dashoffset: 100; } .aos-initialized [data-aos='svg-dash'].aos-animate path { animation: dash 1.5s linear 1 forwards; } .aos-initialized [data-aos][data-aos][data-aos-order='1'] { animation-delay: 0ms; } .aos-initialized [data-aos][data-aos][data-aos-order='2'] { animation-delay: 0.25s; } .aos-initialized [data-aos][data-aos][data-aos-order='3'] { animation-delay: 0.5s; } .aos-initialized [data-aos][data-aos][data-aos-order='4'] { animation-delay: 0.75s; } .aos-initialized [data-aos][data-aos][data-aos-order='5'] { animation-delay: 1s; } .aos-initialized [data-aos='hero'] { opacity: 0; will-change: transform, opacity; } .no-js .aos-initialized [data-aos='hero'] { opacity: 1; } .aos-initialized [data-aos='hero'].aos-animate { animation-name: heroFade; animation-duration: 1s; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes heroFade { 0% { opacity: 0; transform: translate3d(0, 15px, 0); } to { opacity: 1; transform: translateZ(0); } } @keyframes dash { 0% { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } @media only screen and (max-width: 479px) { html.iframe [data-aos] { opacity: 1 !important; transform: none !important; } } .shopify-model-viewer-ui { position: relative; display: inline-block; cursor: pointer; } .shopify-model-viewer-ui model-viewer { transform: translateZ(0); z-index: 1; } .shopify-model-viewer-ui.shopify-model-viewer-ui--fullscreen model-viewer { position: relative; width: 100vw; height: 100vh; } .shopify-model-viewer-ui.shopify-model-viewer-ui--fullscreen .shopify-model-viewer-ui__control-icon--exit-fullscreen { display: block; } .shopify-model-viewer-ui.shopify-model-viewer-ui--fullscreen .shopify-model-viewer-ui__control-icon--enter-fullscreen { display: none; } .shopify-model-viewer-ui.shopify-model-viewer-ui--desktop.shopify-model-viewer-ui--child-focused .shopify-model-viewer-ui__controls-area, .shopify-model-viewer-ui.shopify-model-viewer-ui--desktop:hover .shopify-model-viewer-ui__controls-area { opacity: 1; } .shopify-model-viewer-ui:not(.shopify-model-viewer-ui--desktop) .shopify-model-viewer-ui__controls-area { display: none; } .shopify-model-viewer-ui .shopify-model-viewer-ui__controls-overlay { position: absolute; width: 100%; height: 100%; top: 0; } .shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area { display: flex; flex-direction: column; background: var(---color-bg); opacity: 0; border: 1px solid var(---color-a5); position: absolute; bottom: 10px; right: 10px; z-index: 1; transition: opacity 0.1s linear; } .shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area:focus-within { opacity: 1; } .shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area:not(.shopify-model-viewer-ui__controls-area--playing) { display: none; } .shopify-model-viewer-ui .shopify-model-viewer-ui__button { color: var(---color-text-dark); border-radius: 0; border: none; margin: 0; cursor: pointer; } body:not(.focus-enabled) .shopify-model-viewer-ui .shopify-model-viewer-ui__button:not(.focus-enabled) { outline: none; } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control { padding: 0; height: 44px; width: 44px; background: transparent; position: relative; } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:hover { color: var(---color-a50); } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control.focus-enabled:focus, .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:active { color: var(---color-a50); background: var(---color-a5); } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:not(:last-child):after { position: absolute; content: ''; border-bottom: 1px solid var(---color-a5); width: 28px; bottom: 0; right: 8px; } .shopify-model-viewer-ui .shopify-model-viewer-ui__control-icon { width: 44px; height: 44px; fill: none; } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster { background: var(---color-bg); position: absolute; border: 1px solid var(---color-a5); top: 50%; left: 50%; padding: 0; transform: translate3d(-50%, -50%, 0); height: 62px; width: 62px; z-index: 1; } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:focus, .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:hover { color: var(---color-a50); } .shopify-model-viewer-ui .shopify-model-viewer-ui__poster-control-icon { width: 60px; height: 60px; z-index: 1; fill: none; } .shopify-model-viewer-ui .shopify-model-viewer-ui__control-icon--exit-fullscreen { display: none; } .shopify-model-viewer-ui .shopify-model-viewer-ui__control-icon--enter-fullscreen { display: block; } .shopify-model-viewer-ui .shopify-model-viewer-ui__spritesheet { display: none; } .shopify-model-viewer-ui .shopify-model-viewer-ui__sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } @keyframes plyr-progress { to { background-position: 25px 0; } } @keyframes plyr-popup { 0% { opacity: 0.5; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes plyr-fade-in { 0% { opacity: 0; } to { opacity: 1; } } .plyr { -moz-osx-font-smoothing: auto; -webkit-font-smoothing: subpixel-antialiased; direction: ltr; font-family: var(---font-stack-body); font-variant-numeric: tabular-nums; font-weight: 500; line-height: 1.7; max-width: 100%; min-width: 200px; position: relative; text-shadow: none; transition: box-shadow 0.3s ease; } .plyr audio, .plyr video { border-radius: inherit; height: auto; vertical-align: middle; width: 100%; } .plyr button { font: inherit; line-height: inherit; width: auto; } .plyr--full-ui { box-sizing: border-box; } .plyr--full-ui *, .plyr--full-ui :after, .plyr--full-ui :before { box-sizing: inherit; } .plyr--full-ui a, .plyr--full-ui button, .plyr--full-ui input, .plyr--full-ui label { touch-action: manipulation; } .plyr__badge { background: #4a5764; border-radius: 2px; color: #fff; font-size: 9px; line-height: 1; padding: 3px 4px; } .plyr--full-ui ::-webkit-media-text-track-container { display: none; } .plyr__captions { animation: plyr-fade-in 0.3s ease; bottom: 0; color: #fff; display: none; font-size: 14px; left: 0; padding: 10px; position: absolute; text-align: center; transition: transform 0.4s ease-in-out; width: 100%; } .plyr__captions .plyr__caption { background-color: rgba(0, 0, 0, 0.8); border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 185%; padding: 0.2em 0.5em; white-space: pre-wrap; } .plyr__captions .plyr__caption div { display: inline; } .plyr__captions span:empty { display: none; } @media (min-width: 480px) { .plyr__captions { font-size: 16px; padding: 20px; } } @media (min-width: 750px) { .plyr__captions { font-size: 18px; } } .plyr--captions-active .plyr__captions { display: block; } .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions { transform: translateY(-40px); } .plyr__control { border: 0; border-radius: 0; color: inherit; cursor: pointer; flex-shrink: 0; overflow: visible; padding: 0; position: relative; transition: all 0.3s ease; } .plyr__control:not(.plyr__control--overlaid) { background-color: initial; } .plyr__control svg { display: block; fill: currentColor; height: 44px; pointer-events: none; width: 44px; } .plyr__control:focus:not(.plyr__tab-focus) { outline: 0; } a.plyr__control { text-decoration: none; } .plyr__control.plyr__control--pressed .icon--not-pressed, .plyr__control.plyr__control--pressed .label--not-pressed, .plyr__control:not(.plyr__control--pressed) .icon--pressed, .plyr__control:not(.plyr__control--pressed) .label--pressed, a.plyr__control:after, a.plyr__control:before { display: none; } .plyr--audio .plyr__control.plyr__tab-focus svg, .plyr--audio .plyr__control:hover svg, .plyr--audio .plyr__control[aria-expanded='true'] svg, .plyr--video .plyr__control:not(.plyr__control--overlaid).plyr__tab-focus svg, .plyr--video .plyr__control:not(.plyr__control--overlaid):hover svg, .plyr--video .plyr__control:not(.plyr__control--overlaid)[aria-expanded='true'] svg { stroke: currentColor; stroke-width: 0; } .plyr__control--overlaid { background-color: inherit; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 0; color: currentColor; display: none; left: 50%; padding: 4px; position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 2; opacity: 0; visibility: hidden; } .plyr__control--overlaid svg { height: 52px; width: 52px; fill: transparent; position: relative; } .plyr__control--overlaid.plyr__tab-focus, .plyr__control--overlaid:hover { color: rgba(58, 58, 58, 0.55); } .plyr--stopped .plyr__control--overlaid { opacity: 1; visibility: visible; } .plyr--full-ui.plyr--video .plyr__control--overlaid { display: block; } .plyr--full-ui ::-webkit-media-controls { display: none; } .plyr__controls { align-items: center; display: flex; justify-content: flex-end; text-align: center; } .plyr__controls .plyr__progress__container { flex: 1; min-width: 0; } .plyr__controls .plyr__controls__item:first-child { margin-left: 0; margin-right: auto; } .plyr__controls .plyr__controls__item.plyr__progress__container { padding-left: 2.5px; } .plyr__controls .plyr__controls__item.plyr__time { padding: 0 5px; } .plyr__controls .plyr__controls__item.plyr__progress__container:first-child, .plyr__controls .plyr__controls__item.plyr__time + .plyr__time, .plyr__controls .plyr__controls__item.plyr__time:first-child { padding-left: 0; } .plyr__controls .plyr__controls__item.plyr__volume:first-child { padding-right: 0; } .plyr__controls:empty { display: none; } .plyr--audio .plyr__controls { background-color: inherit; border-radius: inherit; color: #3a3a3a; padding: 10px; } .plyr--video .plyr__controls { background-color: inherit; border: 1px solid rgba(58, 58, 58, 0.05); border-radius: 0; bottom: 0; color: currentColor; left: 0; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; opacity: 0.9; padding: 0; position: absolute; right: 0; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; z-index: 3; } @media screen and (-ms-high-contrast: active) { .plyr--video .plyr__controls { background-color: window; } } .plyr--video.plyr--hide-controls .plyr__controls { opacity: 0; pointer-events: none; transform: translateY(100%); } .plyr [data-plyr='airplay'], .plyr [data-plyr='captions'], .plyr [data-plyr='fullscreen'], .plyr [data-plyr='pip'] { display: none; } .plyr--airplay-supported [data-plyr='airplay'], .plyr--captions-enabled [data-plyr='captions'], .plyr--fullscreen-enabled [data-plyr='fullscreen'], .plyr--pip-supported [data-plyr='pip'] { display: inline-block; } .plyr__menu { display: flex; position: relative; } .plyr__menu .plyr__control svg { transition: transform 0.3s ease; } .plyr__menu .plyr__control[aria-expanded='true'] svg { transform: rotate(90deg); } .plyr__menu .plyr__control[aria-expanded='true'] .plyr__tooltip { display: none; } .plyr__menu__container { animation: plyr-popup 0.2s ease; background-color: #3a3a3a; border-radius: 4px; bottom: 100%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); color: #fff; font-size: 16px; margin-bottom: 10px; position: absolute; right: -3px; text-align: left; white-space: nowrap; z-index: 3; } .plyr__menu__container > div { overflow: hidden; transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .plyr__menu__container:after { border: 4px solid transparent; border-top-color: #3a3a3a; content: ''; height: 0; position: absolute; right: 15px; top: 100%; width: 0; } .plyr__menu__container [role='menu'] { padding: 7px; } .plyr__menu__container [role='menuitem'], .plyr__menu__container [role='menuitemradio'] { margin-top: 2px; } .plyr__menu__container [role='menuitem']:first-child, .plyr__menu__container [role='menuitemradio']:first-child { margin-top: 0; } .plyr__menu__container .plyr__control { align-items: center; color: #fff; display: flex; font-size: 14px; padding: 4px 11px; -webkit-user-select: none; user-select: none; width: 100%; } .plyr__menu__container .plyr__control > span { align-items: inherit; display: flex; width: 100%; } .plyr__menu__container .plyr__control:after { border: 4px solid transparent; content: ''; position: absolute; top: 50%; transform: translateY(-50%); } .plyr__menu__container .plyr__control--forward { padding-right: 29px; } .plyr__menu__container .plyr__control--forward:after { border-left-color: initial; right: 5px; } .plyr__menu__container .plyr__control--forward.plyr__tab-focus:after, .plyr__menu__container .plyr__control--forward:hover:after { border-left-color: initial; } .plyr__menu__container .plyr__control--back { font-weight: 500; margin: 7px 7px 3px; padding-left: 29px; position: relative; width: calc(100% - 14px); } .plyr__menu__container .plyr__control--back:after { border-right-color: initial; left: 7px; } .plyr__menu__container .plyr__control--back:before { background: #c1c9d1; box-shadow: 0 1px 0 #fff; content: ''; height: 1px; left: 0; margin-top: 4px; overflow: hidden; position: absolute; right: 0; top: 100%; } .plyr__menu__container .plyr__control--back.plyr__tab-focus:after, .plyr__menu__container .plyr__control--back:hover:after { border-right-color: initial; } .plyr__menu__container .plyr__control.plyr__tab-focus, .plyr__menu__container .plyr__control:hover, .plyr__menu__container .plyr__control[aria-expanded='true'] { background-color: #fff; color: #3a3a3a; } .plyr__menu__container .plyr__control[role='menuitemradio'] { padding-left: 7px; } .plyr__menu__container .plyr__control[role='menuitemradio']:after, .plyr__menu__container .plyr__control[role='menuitemradio']:before { border-radius: 100%; } .plyr__menu__container .plyr__control[role='menuitemradio']:before { background: rgba(0, 0, 0, 0.1); content: ''; display: block; flex-shrink: 0; height: 16px; margin-right: 10px; transition: all 0.3s ease; width: 16px; } .plyr__menu__container .plyr__control[role='menuitemradio']:after { background: #fff; border: 0; height: 6px; left: 12px; opacity: 0; top: 50%; transform: translateY(-50%) scale(0); transition: transform 0.3s ease, opacity 0.3s ease; width: 6px; } .plyr__menu__container .plyr__control[role='menuitemradio'][aria-checked='true']:before { background: #3a3a3a; } .plyr__menu__container .plyr__control[role='menuitemradio'][aria-checked='true']:after { opacity: 1; transform: translateY(-50%) scale(1); } .plyr__menu__container .plyr__control[role='menuitemradio'].plyr__tab-focus:before, .plyr__menu__container .plyr__control[role='menuitemradio']:hover:before { background: rgba(0, 0, 0, 0.1); } .plyr__menu__container .plyr__menu__value { align-items: center; display: flex; margin-left: auto; margin-right: -5px; overflow: hidden; padding-left: 25px; pointer-events: none; } .plyr--full-ui input[type='range'] { -webkit-appearance: none; background: transparent; border: 0; border-radius: 26px; color: inherit; display: block; height: 19px; margin: 0; padding: 0; transition: box-shadow 0.3s ease; width: 100%; } .plyr--full-ui input[type='range']::-webkit-slider-runnable-track { background-color: initial; border: 0; border-radius: 1px; height: 2px; -webkit-transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease; -webkit-user-select: none; user-select: none; background-image: linear-gradient( 90deg, currentColor var(--value, 0), rgba(58, 58, 58, 0.6) var(--value, 0) ); } .plyr--full-ui input[type='range']::-webkit-slider-thumb { background-color: currentColor; border: 0; border-radius: 50%; box-shadow: 2px 0 0 0 #fff; height: 13px; margin-top: -5px; position: relative; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; width: 13px; -webkit-appearance: none; } @media screen and (-ms-high-contrast: active) { .plyr--full-ui input[type='range']::-webkit-slider-thumb { background-color: windowText; } } .plyr--full-ui input[type='range']::-moz-range-track { background-color: initial; border: 0; border-radius: 1px; height: 2px; -moz-transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease; user-select: none; background-color: rgba(58, 58, 58, 0.6); } .plyr--full-ui input[type='range']::-moz-range-thumb { background-color: currentColor; border: 0; border-radius: 50%; box-shadow: 2px 0 0 0 #fff; height: 13px; margin-top: -5px; position: relative; -moz-transition: all 0.2s ease; transition: all 0.2s ease; width: 13px; } @media screen and (-ms-high-contrast: active) { .plyr--full-ui input[type='range']::-moz-range-thumb { background-color: windowText; } } .plyr--full-ui input[type='range']::-moz-range-progress { background-color: currentColor; border-radius: 1px; height: 2px; } .plyr--full-ui input[type='range']::-ms-track { color: transparent; } .plyr--full-ui input[type='range']::-ms-fill-upper, .plyr--full-ui input[type='range']::-ms-track { background-color: initial; border: 0; border-radius: 1px; height: 2px; -ms-transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease; user-select: none; } .plyr--full-ui input[type='range']::-ms-fill-upper { background-color: currentColor; opacity: 0.6; } @media screen and (-ms-high-contrast: active) { .plyr--full-ui input[type='range']::-ms-fill-upper { background-color: windowText; } } .plyr--full-ui input[type='range']::-ms-fill-lower { background-color: initial; border: 0; border-radius: 1px; height: 2px; -ms-transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease; user-select: none; background-color: currentColor; } @media screen and (-ms-high-contrast: active) { .plyr--full-ui input[type='range']::-ms-fill-lower { background-color: windowText; } } .plyr--full-ui input[type='range']::-ms-thumb { background-color: currentColor; border: 0; border-radius: 50%; box-shadow: 2px 0 0 0 #fff; height: 13px; position: relative; -ms-transition: all 0.2s ease; transition: all 0.2s ease; width: 13px; margin-top: 1px; } @media screen and (-ms-high-contrast: active) { .plyr--full-ui input[type='range']::-ms-thumb { background-color: windowText; } } .plyr--full-ui input[type='range']::-ms-tooltip { display: none; } .plyr--full-ui input[type='range']:focus:not(.plyr__tab-focus) { outline: 0; } .plyr--full-ui input[type='range']::-moz-focus-outer { border: 0; } .plyr--full-ui input[type='range'].plyr__tab-focus::-webkit-slider-runnable-track { box-shadow: 0 0 0 4px rgba(58, 58, 58, 0.25); } .plyr--full-ui input[type='range'].plyr__tab-focus::-moz-range-track { box-shadow: 0 0 0 4px rgba(58, 58, 58, 0.25); } .plyr--full-ui input[type='range'].plyr__tab-focus::-ms-track { box-shadow: 0 0 0 4px rgba(58, 58, 58, 0.25); } .plyr--full-ui input[type='range'].plyr__tab-focus::-webkit-slider-thumb { box-shadow: none; } .plyr--full-ui input[type='range'].plyr__tab-focus::-moz-range-thumb { box-shadow: none; } .plyr--full-ui input[type='range'].plyr__tab-focus::-ms-thumb { box-shadow: none; } .plyr--full-ui input[type='range']:active::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(58, 58, 58, 0.25); } .plyr--full-ui input[type='range']:active::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(58, 58, 58, 0.25); } .plyr--full-ui input[type='range']:active::-ms-thumb { box-shadow: 0 0 0 3px rgba(58, 58, 58, 0.25); } .plyr__poster { background-color: #000; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; transition: opacity 0.2s ease; width: 100%; z-index: 1; } .plyr--stopped.plyr__poster-enabled .plyr__poster { opacity: 1; } .plyr__time { font-size: 14px; } .plyr__time + .plyr__time:before { content: '⁄'; margin-right: 10px; } @media (max-width: 749px) { .plyr__time + .plyr__time { display: none; } } .plyr--video .plyr__time { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } .plyr__tooltip { background-color: #3a3a3a; bottom: 100%; color: #fff; font-size: 14px; font-weight: 500; left: 50%; line-height: 1.3; opacity: 0; padding: 5px 15px; pointer-events: none; position: absolute; transform: translate(-50%, 10px); transition: transform 0.2s ease 0.1s, opacity 0.2s ease 0.1s; white-space: nowrap; z-index: 2; } .plyr__tooltip:before { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #3a3a3a; bottom: -4px; content: ''; height: 0; left: 50%; position: absolute; transform: translateX(-50%); width: 0; z-index: 2; } .plyr .plyr__control.plyr__tab-focus .plyr__tooltip, .plyr .plyr__control:hover .plyr__tooltip, .plyr__tooltip--visible { opacity: 1; transform: translate(-50%, -24px); } .plyr__controls > .plyr__control[data-plyr='mute'].plyr__tab-focus .plyr__tooltip, .plyr__controls > .plyr__control[data-plyr='mute'] .plyr__tooltip--visible, .plyr__controls > .plyr__control[data-plyr='mute']:hover .plyr__tooltip { transform: translate(-50%, -11px); } .plyr .plyr__control:hover .plyr__tooltip { z-index: 3; } .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip, .plyr__controls > .plyr__control:first-child .plyr__tooltip { left: 0; transform: translateY(10px) scale(0.8); transform-origin: 0 100%; } .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip:before, .plyr__controls > .plyr__control:first-child .plyr__tooltip:before { left: 29px; } .plyr__controls > .plyr__control:last-child .plyr__tooltip { left: auto; right: 0; transform: translateY(10px); transform-origin: 100% 100%; } .plyr__controls > .plyr__control:last-child .plyr__tooltip:before { left: auto; right: 29px; transform: translateX(50%); } .plyr__controls > .plyr__control:first-child + .plyr__control.plyr__tab-focus .plyr__tooltip, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip--visible, .plyr__controls > .plyr__control:first-child + .plyr__control:hover .plyr__tooltip, .plyr__controls > .plyr__control:first-child.plyr__tab-focus .plyr__tooltip, .plyr__controls > .plyr__control:first-child .plyr__tooltip--visible, .plyr__controls > .plyr__control:first-child:hover .plyr__tooltip, .plyr__controls > .plyr__control:last-child.plyr__tab-focus .plyr__tooltip, .plyr__controls > .plyr__control:last-child .plyr__tooltip--visible, .plyr__controls > .plyr__control:last-child:hover .plyr__tooltip { transform: translateY(-11px); } .plyr--video { background-color: #fff; color: #3a3a3a; overflow: hidden; } .plyr--video.plyr--menu-open { overflow: visible; } .plyr__video-wrapper { background-color: #000; border-radius: inherit; overflow: hidden; position: relative; z-index: 0; } .plyr__video-embed, .plyr__video-wrapper--fixed-ratio { height: 0; padding-bottom: 56.25%; } .plyr__video-embed iframe, .plyr__video-wrapper--fixed-ratio video { border: 0; height: 100%; left: 0; position: absolute; top: 0; -webkit-user-select: none; user-select: none; width: 100%; } .plyr__progress { left: 6.5px; margin-right: 15px; position: relative; } .plyr__progress__buffer, .plyr__progress input[type='range'] { margin-left: -6.5px; margin-right: -6.5px; max-width: calc(100% + 13px); width: calc(100% + 13px); } .plyr__progress input[type='range'] { position: relative; z-index: 2; } .plyr__progress .plyr__tooltip { font-size: 14px; left: 0; } .plyr__progress__buffer { -webkit-appearance: none; background-color: initial; border: 0; border-radius: 100px; color: transparent; height: 2px; left: 0; margin-top: -1px; padding: 0; position: absolute; top: 50%; } .plyr__progress__buffer::-webkit-progress-bar { background-color: initial; } .plyr__progress__buffer::-webkit-progress-value { background-color: currentColor; border-radius: 100px; min-width: 2px; -webkit-transition: width 0.2s ease; transition: width 0.2s ease; } .plyr__progress__buffer::-moz-progress-bar { background-color: currentColor; border-radius: 100px; min-width: 2px; -moz-transition: width 0.2s ease; transition: width 0.2s ease; } .plyr__progress__buffer::-ms-fill { border-radius: 100px; -ms-transition: width 0.2s ease; transition: width 0.2s ease; } .plyr--audio .plyr__progress__buffer { color: rgba(193, 201, 209, 0.66); } .plyr--loading .plyr__progress__buffer { animation: plyr-progress 1s linear infinite; background-image: linear-gradient( -45deg, rgba(58, 58, 58, 0.6) 25%, transparent 0, transparent 50%, rgba(58, 58, 58, 0.6) 0, rgba(58, 58, 58, 0.6) 75%, transparent 0, transparent ); background-repeat: repeat-x; background-size: 25px 25px; color: transparent; } .plyr--audio.plyr--loading .plyr__progress__buffer { background-color: rgba(193, 201, 209, 0.66); } .plyr--full-ui .plyr__volume { background-color: currentColor; bottom: 105px; height: 40px; opacity: 0; padding: 10px 15px; position: absolute; right: -4px; transform: rotate(270deg); transition: visibility 0.4s linear 0.4s, opacity 0.4s linear 0.3s; width: 140px; } .plyr--full-ui .plyr__volume:before { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid; bottom: 18px; content: ''; left: -6px; position: absolute; transform: rotate(90deg); z-index: 2; } .plyr--full-ui .plyr__volume.plyr__volume--is-visible { opacity: 1; transition: visibility 0.4s linear, opacity 0.4s linear; } .plyr--audio .plyr--full-ui .plyr__volume { bottom: 125px; right: -37px; } .plyr--full-ui .plyr__volume:hover { opacity: 1; visibility: visible; } .plyr--full-ui .plyr__volume input[type='range'] { color: #fff; margin: 0 auto; } .plyr--full-ui .plyr__volume input[type='range']::-webkit-slider-runnable-track { background-image: linear-gradient( 90deg, currentColor var(--value, 0), hsla(0, 0%, 100%, 0.6) var(--value, 0) ); } .plyr--full-ui .plyr__volume input[type='range']::-webkit-slider-thumb { box-shadow: 2px 0 0 0 #3a3a3a; } .plyr--full-ui .plyr__volume input[type='range']::-moz-range-track { background-color: hsla(0, 0%, 100%, 0.6); } .plyr--full-ui .plyr__volume input[type='range']::-moz-range-thumb { box-shadow: 2px 0 0 0 #3a3a3a; } .plyr--full-ui .plyr__volume input[type='range']::-ms-fill-upper { background-color: hsla(0, 0%, 100%, 0.6); } .plyr--full-ui .plyr__volume input[type='range']::-ms-thumb { box-shadow: 2px 0 0 0 #3a3a3a; } .plyr--full-ui .plyr__volume input[type='range'].plyr__tab-focus::-webkit-slider-runnable-track { box-shadow: 0 0 0 4px hsla(0, 0%, 100%, 0.25); } .plyr--full-ui .plyr__volume input[type='range'].plyr__tab-focus::-moz-range-track { box-shadow: 0 0 0 4px hsla(0, 0%, 100%, 0.25); } .plyr--full-ui .plyr__volume input[type='range'].plyr__tab-focus::-ms-track { box-shadow: 0 0 0 4px hsla(0, 0%, 100%, 0.25); } .plyr--full-ui .plyr__volume input[type='range'].plyr__tab-focus::-webkit-slider-thumb { box-shadow: none; } .plyr--full-ui .plyr__volume input[type='range'].plyr__tab-focus::-moz-range-thumb { box-shadow: none; } .plyr--full-ui .plyr__volume input[type='range'].plyr__tab-focus::-ms-thumb { box-shadow: none; } .plyr--full-ui .plyr__volume input[type='range']:active::-webkit-slider-thumb { box-shadow: 0 0 0 3px hsla(0, 0%, 100%, 0.25); } .plyr--full-ui .plyr__volume input[type='range']:active::-moz-range-thumb { box-shadow: 0 0 0 3px hsla(0, 0%, 100%, 0.25); } .plyr--full-ui .plyr__volume input[type='range']:active::-ms-thumb { box-shadow: 0 0 0 3px hsla(0, 0%, 100%, 0.25); } @media (min-width: 480px) { .plyr--full-ui .plyr__volume input[type='range'] { max-width: 90px; } } @media (min-width: 750px) { .plyr--full-ui .plyr__volume input[type='range'] { max-width: 110px; } } .plyr--is-android .plyr__volume, .plyr--is-ios .plyr__volume, .plyr--is-mac.plyr--is-touch .plyr__volume { display: none !important; } .plyr__control[data-plyr='mute']:hover + .plyr__volume { opacity: 1; transition: visibility 0.4s linear, opacity 0.4s linear; } .plyr:fullscreen { border-radius: 0 !important; height: 100%; margin: 0; width: 100%; } .plyr:fullscreen video { height: 100%; } .plyr:fullscreen .plyr__video-wrapper { height: 100%; position: static; } .plyr:fullscreen .plyr__control .icon--exit-fullscreen { display: block; } .plyr:fullscreen .plyr__control .icon--exit-fullscreen + svg { display: none; } .plyr:fullscreen.plyr--hide-controls { cursor: none; } @media (min-width: 990px) { .plyr:-webkit-full-screen .plyr__captions { font-size: 21px; } .plyr:fullscreen .plyr__captions { font-size: 21px; } } .plyr:-webkit-full-screen { border-radius: 0 !important; height: 100%; margin: 0; width: 100%; } .plyr:-webkit-full-screen video { height: 100%; } .plyr:-webkit-full-screen .plyr__video-wrapper { height: 100%; position: static; } .plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen { display: block; } .plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen + svg { display: none; } .plyr:-webkit-full-screen.plyr--hide-controls { cursor: none; } @media (min-width: 990px) { .plyr:-webkit-full-screen .plyr__captions { font-size: 21px; } } .plyr:-moz-full-screen { border-radius: 0 !important; height: 100%; margin: 0; width: 100%; } .plyr:-moz-full-screen video { height: 100%; } .plyr:-moz-full-screen .plyr__video-wrapper { height: 100%; position: static; } .plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen { display: block; } .plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen + svg { display: none; } .plyr:-moz-full-screen.plyr--hide-controls { cursor: none; } @media (min-width: 990px) { .plyr:-moz-full-screen .plyr__captions { font-size: 21px; } } .plyr:-ms-fullscreen { border-radius: 0 !important; height: 100%; margin: 0; width: 100%; } .plyr:-ms-fullscreen video { height: 100%; } .plyr:-ms-fullscreen .plyr__video-wrapper { height: 100%; position: static; } .plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen { display: block; } .plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen + svg { display: none; } .plyr:-ms-fullscreen.plyr--hide-controls { cursor: none; } @media (min-width: 990px) { .plyr:-ms-fullscreen .plyr__captions { font-size: 21px; } } .plyr--fullscreen-fallback { border-radius: 0 !important; height: 100%; margin: 0; width: 100%; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 40000; } .plyr--fullscreen-fallback video { height: 100%; } .plyr--fullscreen-fallback .plyr__video-wrapper { height: 100%; position: static; } .plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen { display: block; } .plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen + svg { display: none; } .plyr--fullscreen-fallback.plyr--hide-controls { cursor: none; } @media (min-width: 990px) { .plyr--fullscreen-fallback .plyr__captions { font-size: 21px; } } .plyr__preview-thumb { background-color: #3a3a3a; bottom: 100%; margin-bottom: 10px; opacity: 0; padding: 5px; pointer-events: none; position: absolute; transform: translateY(10px); transform-origin: 50% 100%; transition: transform 0.2s ease 0.1s, opacity 0.2s ease 0.1s; z-index: 2; } .plyr__preview-thumb--is-shown { opacity: 1; transform: translateY(-14px); } .plyr__preview-thumb:before { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #3a3a3a; bottom: -4px; content: ''; height: 0; left: 50%; position: absolute; transform: translateX(-50%); width: 0; z-index: 2; } .plyr__preview-thumb__image-container { background: #c1c9d1; overflow: hidden; position: relative; z-index: 0; } .plyr__preview-thumb__image-container img { height: 100%; left: 0; max-height: none; max-width: none; position: absolute; top: 0; width: 100%; } .plyr__preview-thumb__time-container { bottom: 6px; left: 0; position: absolute; right: 0; white-space: nowrap; z-index: 3; } .plyr__preview-thumb__time-container span { background-color: #3a3a3a; color: #fff; font-size: 14px; padding: 3px 6px; } .plyr__preview-scrubbing { bottom: 0; filter: blur(1px); height: 100%; left: 0; margin: auto; opacity: 0; overflow: hidden; position: absolute; right: 0; top: 0; transition: opacity 0.3s ease; width: 100%; z-index: 1; } .plyr__preview-scrubbing--is-shown { opacity: 1; } .plyr__preview-scrubbing img { height: 100%; left: 0; max-height: none; max-width: none; object-fit: contain; position: absolute; top: 0; width: 100%; } .plyr--no-transition { transition: none !important; } .plyr__sr-only { clip: rect(1px, 1px, 1px, 1px); overflow: hidden; border: 0 !important; height: 1px !important; padding: 0 !important; position: absolute !important; width: 1px !important; } .plyr [hidden] { display: none !important; } /* * PhotoSwipe Zoom Library * MIT license * Created by Dmitry Semenov | photoswipe.com */ .pswp { display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; touch-action: none; z-index: 10000; -webkit-text-size-adjust: 100%; /* create separate layer, to avoid paint on window.onscroll in webkit/blink */ -webkit-backface-visibility: hidden; backface-visibility: hidden; outline: none; } .pswp img { max-width: none; } .pswp--animate_opacity { opacity: 0.001; /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */ will-change: opacity; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.22, 1); } .pswp--open { display: block; } .pswp--zoomed-in .pswp__img { cursor: grab; } .pswp--dragging .pswp__img { cursor: grabbing; } /* Background is added as a separate element. As animating opacity is much faster than animating rgba() background-color. */ .pswp__bg { background: var(--bg); opacity: 0; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .pswp__bg, .pswp__scroll-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .pswp__scroll-wrap { overflow: hidden; } .pswp__container, .pswp__zoom-wrap { touch-action: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } /* Prevent selection and tap highlights */ .pswp__container, .pswp__img { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; } .pswp__zoom-wrap { position: absolute; width: 100%; transform-origin: left top; /* for open/close transition */ transition: transform 0.25s cubic-bezier(0.4, 0, 0.22, 1); } .pswp__bg { will-change: opacity; /* for open/close transition */ transform-origin: 0 0; transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { transition: none; } .pswp__container, .pswp__zoom-wrap { -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 0; } .pswp__item { right: 0; bottom: 0; margin: 0; overflow: hidden; } .pswp__img, .pswp__item { position: absolute; left: 0; top: 0; } .pswp__img { width: auto; height: auto; } .pswp__img--placeholder { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .pswp__img--placeholder--blank { background: var(--bg); } .pswp--ie .pswp__img { width: 100% !important; height: auto !important; left: 0; top: 0; } .pswp__error-msg { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 14px; line-height: 16px; margin-top: -8px; color: var(--muted); } .pswp__error-msg a { color: var(--muted); text-decoration: underline; } /* UI Custom CSS */ .pswp__top-bar { background: var(--bg); position: fixed; bottom: 0; left: 0; width: 100%; padding: 0 1.5em; display: grid; grid-template-columns: repeat(3, 1fr); justify-content: space-around; } .pswp__button { background: none; cursor: pointer; overflow: visible; -webkit-appearance: none; border: 0; padding: 0; margin: 0; box-shadow: none; } .pswp__button:active { outline: none; } .pswp__button::-moz-focus-inner { padding: 0; border: 0; } .pswp__button, .pswp__button--arrow--left:before, .pswp__button--arrow--right:before, .pswp__button svg.icon { width: 2rem; height: 2rem; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } /* increases touch area */ .pswp__button--close { min-width: 60px; margin-right: 1em; } .pswp__close--container { display: grid; justify-content: end; margin: 1em 0.25em; } .pswp__close--container svg { float: right; max-width: 1.5rem; } .pswp__button--arrow--left, .pswp__button--arrow--right { z-index: 10000; height: 10ch; } .pswp__button--arrow--left svg, .pswp__button--arrow--right svg, .pswp__button--close svg { z-index: -1; position: relative; } .pswp__button--arrow--right { justify-self: end; } .pswp__counter { -webkit-user-select: none; user-select: none; align-self: center; justify-self: center; } .pswp__button--fs, .pswp__button--share, .pswp__button--zoom, .pswp__caption, .pswp__caption--empty, .pswp__caption--fake, .pswp__share-modal, .pswp__share-modal--hidden, .pswp__share-tooltip { display: none; } /* root element of UI */ .pswp__ui { -webkit-font-smoothing: auto; visibility: visible; opacity: 1; z-index: 10050; margin: 0; background-color: var(--bg); position: fixed; width: 100%; } /* pswp__ui--one-slide class is added when there is just one item in gallery */ .pswp__ui--one-slide .pswp__button--arrow--left, .pswp__ui--one-slide .pswp__button--arrow--right, .pswp__ui--one-slide .pswp__counter { display: none; } .pswp__element--disabled { display: none !important; } /* ============================================================================ #Normalize ============================================================================== */ *, :after, :before, input { box-sizing: border-box; } body, html { padding: 0; margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: initial; } input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { height: auto; } input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration { -webkit-appearance: none; } /* ============================================================================ Grid - Based on CSS Wizardry grid ============================================================================== */ .direction--column.wrapper { display: flex; } .direction--column .grid { display: flex; flex-direction: column; } .direction--column .standard-text-container { margin-bottom: calc(var(--outer) * 2); } @media only screen and (min-width: 768px) { .direction--column .standard-text-container { margin-bottom: var(--outer); } } .direction--column .icon--left .icon__column__icon { margin-left: 0; } @media only screen and (min-width: 768px) { .direction--column .icon--top.medium-up--icon--left .icon__column__icon { margin-left: 0; } } .direction--column .grid__item { margin-bottom: var(--inner); } .direction--column .grid__item:last-child { margin-bottom: 0; } .grid, .grid--full { *zoom: 1; list-style: none; margin: 0; padding: 0; } @media only screen and (max-width: 767px) { /* remove wrapper outer padding */ .grid.small-down-flush-sides { margin: 0 var(--gutter-offset); } } .grid--full:after, .grid:after { content: ''; display: table; clear: both; } .grid__item { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); float: left; width: 100%; } .grid__item[class*='push-'] { position: relative; } @media only screen and (max-width: 989px) { .grid--my-account .grid__item + .grid__item { margin-top: 2rem; } } @media only screen and (min-width: 990px) { .grid--four-fifths-width .brick__block__text__inner { width: 80%; margin: 0 auto; } } @media only screen and (min-width: 990px) { .grid--three-fifths-width .brick__block__text__inner { width: 60%; margin: 0 auto; } } /* Display as Carousel */ .grid.column--carousel:after { /* Enable Flickity Carousel with watchCSS setting */ content: 'flickity'; display: none; } @media only screen and (min-width: 768px) { .grid.column--carousel:after { /* Disable Flickity Carousel with watchCSS setting */ content: ''; } } @media only screen and (max-width: 767px) { .grid.column--carousel .grid__item { width: 75%; } } /* Display as Horizontal Row */ @media only screen and (max-width: 767px) { .grid.column--horizontal .grid__item { width: 33.33%; } } /* ============================================================================ Reversed grids allow you to structure your source in the opposite order to how your rendered layout will appear. ============================================================================== */ .grid--rev { direction: rtl; text-align: left; } .grid--rev > .grid__item { direction: ltr; text-align: left; float: right; } /* Gutterless grids have all the properties of regular grids, minus any spacing. */ .grid--full { margin-left: 0; } .grid--full > .grid__item { padding-left: 0; } /* ============================================================================ Grid Columns - Create width classes, prepended by the breakpoint name. ============================================================================== */ /** Whole */ .one-whole { width: 100%; } /* Halves */ .one-half { width: 50%; } /* Thirds */ .one-third { width: 33.3333333333%; } .two-thirds { width: 66.6666666667%; } /* Quarters */ .one-quarter { width: 25%; } .two-quarters { width: 50%; } .three-quarters { width: 75%; } /* Fifths */ .one-fifth { width: 20%; } .two-fifths { width: 40%; } .three-fifths { width: 60%; } .four-fifths { width: 80%; } /* Sixths */ .one-sixth { width: 16.6666666667%; } .two-sixths { width: 33.3333333333%; } .three-sixths { width: 50%; } .four-sixths { width: 66.6666666667%; } .five-sixths { width: 83.3333333333%; } /* Eighths */ .one-eighth { width: 12.5%; } .two-eighths { width: 25%; } .three-eighths { width: 37.5%; } .four-eighths { width: 50%; } .five-eighths { width: 62.5%; } .six-eighths { width: 75%; } .seven-eighths { width: 87.5%; } /* Tenths */ .one-tenth { width: 10%; } .two-tenths { width: 20%; } .three-tenths { width: 30%; } .four-tenths { width: 40%; } .five-tenths { width: 50%; } .six-tenths { width: 60%; } .seven-tenths { width: 70%; } .eight-tenths { width: 80%; } .nine-tenths { width: 90%; } /* Twelfths */ .one-twelfth { width: 8.3333333333%; } .two-twelfths { width: 16.6666666667%; } .three-twelfths { width: 25%; } .four-twelfths { width: 33.3333333333%; } .five-twelfths { width: 41.6666666667%; } .six-twelfths { width: 50%; } .seven-twelfths { width: 58.3333333333%; } .eight-twelfths { width: 66.6666666667%; } .nine-twelfths { width: 75%; } .ten-twelfths { width: 83.3333333333%; } .eleven-twelfths { width: 91.6666666667%; } .show { display: block !important; } .hide { display: none !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; } @media only screen and (max-width: 479px) { .mobile--one-whole { width: 100%; } .mobile--one-half { width: 50%; } .mobile--one-third { width: 33.3333333333%; } .mobile--two-thirds { width: 66.6666666667%; } .mobile--one-quarter { width: 25%; } .mobile--two-quarters { width: 50%; } .mobile--three-quarters { width: 75%; } .mobile--one-fifth { width: 20%; } .mobile--two-fifths { width: 40%; } .mobile--three-fifths { width: 60%; } .mobile--four-fifths { width: 80%; } .mobile--one-sixth { width: 16.6666666667%; } .mobile--two-sixths { width: 33.3333333333%; } .mobile--three-sixths { width: 50%; } .mobile--four-sixths { width: 66.6666666667%; } .mobile--five-sixths { width: 83.3333333333%; } .mobile--one-eighth { width: 12.5%; } .mobile--two-eighths { width: 25%; } .mobile--three-eighths { width: 37.5%; } .mobile--four-eighths { width: 50%; } .mobile--five-eighths { width: 62.5%; } .mobile--six-eighths { width: 75%; } .mobile--seven-eighths { width: 87.5%; } .mobile--one-tenth { width: 10%; } .mobile--two-tenths { width: 20%; } .mobile--three-tenths { width: 30%; } .mobile--four-tenths { width: 40%; } .mobile--five-tenths { width: 50%; } .mobile--six-tenths { width: 60%; } .mobile--seven-tenths { width: 70%; } .mobile--eight-tenths { width: 80%; } .mobile--nine-tenths { width: 90%; } .mobile--one-twelfth { width: 8.3333333333%; } .mobile--two-twelfths { width: 16.6666666667%; } .mobile--three-twelfths { width: 25%; } .mobile--four-twelfths { width: 33.3333333333%; } .mobile--five-twelfths { width: 41.6666666667%; } .mobile--six-twelfths { width: 50%; } .mobile--seven-twelfths { width: 58.3333333333%; } .mobile--eight-twelfths { width: 66.6666666667%; } .mobile--nine-twelfths { width: 75%; } .mobile--ten-twelfths { width: 83.3333333333%; } .mobile--eleven-twelfths { width: 91.6666666667%; } .gallery .mobile--five-tenths:nth-child(odd), .gallery .mobile--four-eighths:nth-child(odd), .gallery .mobile--four-twelfths:nth-child(3n + 1), .gallery .mobile--one-eighth:nth-child(8n + 1), .gallery .mobile--one-fifth:nth-child(5n + 1), .gallery .mobile--one-half:nth-child(odd), .gallery .mobile--one-quarter:nth-child(4n + 1), .gallery .mobile--one-sixth:nth-child(6n + 1), .gallery .mobile--one-third:nth-child(3n + 1), .gallery .mobile--one-twelfth:nth-child(12n + 1), .gallery .mobile--six-twelfths:nth-child(odd), .gallery .mobile--three-sixths:nth-child(odd), .gallery .mobile--three-twelfths:nth-child(4n + 1), .gallery .mobile--two-eighths:nth-child(4n + 1), .gallery .mobile--two-sixths:nth-child(3n + 1), .gallery .mobile--two-twelfths:nth-child(6n + 1), .grid--uniform .mobile--five-tenths:nth-child(odd), .grid--uniform .mobile--four-eighths:nth-child(odd), .grid--uniform .mobile--four-twelfths:nth-child(3n + 1), .grid--uniform .mobile--one-eighth:nth-child(8n + 1), .grid--uniform .mobile--one-fifth:nth-child(5n + 1), .grid--uniform .mobile--one-half:nth-child(odd), .grid--uniform .mobile--one-quarter:nth-child(4n + 1), .grid--uniform .mobile--one-sixth:nth-child(6n + 1), .grid--uniform .mobile--one-third:nth-child(3n + 1), .grid--uniform .mobile--one-twelfth:nth-child(12n + 1), .grid--uniform .mobile--six-twelfths:nth-child(odd), .grid--uniform .mobile--three-sixths:nth-child(odd), .grid--uniform .mobile--three-twelfths:nth-child(4n + 1), .grid--uniform .mobile--two-eighths:nth-child(4n + 1), .grid--uniform .mobile--two-sixths:nth-child(3n + 1), .grid--uniform .mobile--two-twelfths:nth-child(6n + 1) { clear: both; } .mobile--show { display: block !important; } .mobile--hide { display: none !important; } .mobile--text-left { text-align: left !important; } .mobile--text-right { text-align: right !important; } .mobile--text-center { text-align: center !important; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .small--one-whole { width: 100%; } .small--one-half { width: 50%; } .small--one-third { width: 33.3333333333%; } .small--two-thirds { width: 66.6666666667%; } .small--one-quarter { width: 25%; } .small--two-quarters { width: 50%; } .small--three-quarters { width: 75%; } .small--one-fifth { width: 20%; } .small--two-fifths { width: 40%; } .small--three-fifths { width: 60%; } .small--four-fifths { width: 80%; } .small--one-sixth { width: 16.6666666667%; } .small--two-sixths { width: 33.3333333333%; } .small--three-sixths { width: 50%; } .small--four-sixths { width: 66.6666666667%; } .small--five-sixths { width: 83.3333333333%; } .small--one-eighth { width: 12.5%; } .small--two-eighths { width: 25%; } .small--three-eighths { width: 37.5%; } .small--four-eighths { width: 50%; } .small--five-eighths { width: 62.5%; } .small--six-eighths { width: 75%; } .small--seven-eighths { width: 87.5%; } .small--one-tenth { width: 10%; } .small--two-tenths { width: 20%; } .small--three-tenths { width: 30%; } .small--four-tenths { width: 40%; } .small--five-tenths { width: 50%; } .small--six-tenths { width: 60%; } .small--seven-tenths { width: 70%; } .small--eight-tenths { width: 80%; } .small--nine-tenths { width: 90%; } .small--one-twelfth { width: 8.3333333333%; } .small--two-twelfths { width: 16.6666666667%; } .small--three-twelfths { width: 25%; } .small--four-twelfths { width: 33.3333333333%; } .small--five-twelfths { width: 41.6666666667%; } .small--six-twelfths { width: 50%; } .small--seven-twelfths { width: 58.3333333333%; } .small--eight-twelfths { width: 66.6666666667%; } .small--nine-twelfths { width: 75%; } .small--ten-twelfths { width: 83.3333333333%; } .small--eleven-twelfths { width: 91.6666666667%; } .gallery .small--five-tenths:nth-child(odd), .gallery .small--four-eighths:nth-child(odd), .gallery .small--four-twelfths:nth-child(3n + 1), .gallery .small--one-eighth:nth-child(8n + 1), .gallery .small--one-fifth:nth-child(5n + 1), .gallery .small--one-half:nth-child(odd), .gallery .small--one-quarter:nth-child(4n + 1), .gallery .small--one-sixth:nth-child(6n + 1), .gallery .small--one-third:nth-child(3n + 1), .gallery .small--one-twelfth:nth-child(12n + 1), .gallery .small--six-twelfths:nth-child(odd), .gallery .small--three-sixths:nth-child(odd), .gallery .small--three-twelfths:nth-child(4n + 1), .gallery .small--two-eighths:nth-child(4n + 1), .gallery .small--two-sixths:nth-child(3n + 1), .gallery .small--two-twelfths:nth-child(6n + 1), .grid--uniform .small--five-tenths:nth-child(odd), .grid--uniform .small--four-eighths:nth-child(odd), .grid--uniform .small--four-twelfths:nth-child(3n + 1), .grid--uniform .small--one-eighth:nth-child(8n + 1), .grid--uniform .small--one-fifth:nth-child(5n + 1), .grid--uniform .small--one-half:nth-child(odd), .grid--uniform .small--one-quarter:nth-child(4n + 1), .grid--uniform .small--one-sixth:nth-child(6n + 1), .grid--uniform .small--one-third:nth-child(3n + 1), .grid--uniform .small--one-twelfth:nth-child(12n + 1), .grid--uniform .small--six-twelfths:nth-child(odd), .grid--uniform .small--three-sixths:nth-child(odd), .grid--uniform .small--three-twelfths:nth-child(4n + 1), .grid--uniform .small--two-eighths:nth-child(4n + 1), .grid--uniform .small--two-sixths:nth-child(3n + 1), .grid--uniform .small--two-twelfths:nth-child(6n + 1) { clear: both; } .small--show { display: block !important; } .small--hide { display: none !important; } .small--text-left { text-align: left !important; } .small--text-right { text-align: right !important; } .small--text-center { text-align: center !important; } } @media only screen and (min-width: 480px) { .small-up--one-whole { width: 100%; } .small-up--one-half { width: 50%; } .small-up--one-third { width: 33.3333333333%; } .small-up--two-thirds { width: 66.6666666667%; } .small-up--one-quarter { width: 25%; } .small-up--two-quarters { width: 50%; } .small-up--three-quarters { width: 75%; } .small-up--one-fifth { width: 20%; } .small-up--two-fifths { width: 40%; } .small-up--three-fifths { width: 60%; } .small-up--four-fifths { width: 80%; } .small-up--one-sixth { width: 16.6666666667%; } .small-up--two-sixths { width: 33.3333333333%; } .small-up--three-sixths { width: 50%; } .small-up--four-sixths { width: 66.6666666667%; } .small-up--five-sixths { width: 83.3333333333%; } .small-up--one-eighth { width: 12.5%; } .small-up--two-eighths { width: 25%; } .small-up--three-eighths { width: 37.5%; } .small-up--four-eighths { width: 50%; } .small-up--five-eighths { width: 62.5%; } .small-up--six-eighths { width: 75%; } .small-up--seven-eighths { width: 87.5%; } .small-up--one-tenth { width: 10%; } .small-up--two-tenths { width: 20%; } .small-up--three-tenths { width: 30%; } .small-up--four-tenths { width: 40%; } .small-up--five-tenths { width: 50%; } .small-up--six-tenths { width: 60%; } .small-up--seven-tenths { width: 70%; } .small-up--eight-tenths { width: 80%; } .small-up--nine-tenths { width: 90%; } .small-up--one-twelfth { width: 8.3333333333%; } .small-up--two-twelfths { width: 16.6666666667%; } .small-up--three-twelfths { width: 25%; } .small-up--four-twelfths { width: 33.3333333333%; } .small-up--five-twelfths { width: 41.6666666667%; } .small-up--six-twelfths { width: 50%; } .small-up--seven-twelfths { width: 58.3333333333%; } .small-up--eight-twelfths { width: 66.6666666667%; } .small-up--nine-twelfths { width: 75%; } .small-up--ten-twelfths { width: 83.3333333333%; } .small-up--eleven-twelfths { width: 91.6666666667%; } .gallery .small-up--five-tenths:nth-child(odd), .gallery .small-up--four-eighths:nth-child(odd), .gallery .small-up--four-twelfths:nth-child(3n + 1), .gallery .small-up--one-eighth:nth-child(8n + 1), .gallery .small-up--one-fifth:nth-child(5n + 1), .gallery .small-up--one-half:nth-child(odd), .gallery .small-up--one-quarter:nth-child(4n + 1), .gallery .small-up--one-sixth:nth-child(6n + 1), .gallery .small-up--one-third:nth-child(3n + 1), .gallery .small-up--one-twelfth:nth-child(12n + 1), .gallery .small-up--six-twelfths:nth-child(odd), .gallery .small-up--three-sixths:nth-child(odd), .gallery .small-up--three-twelfths:nth-child(4n + 1), .gallery .small-up--two-eighths:nth-child(4n + 1), .gallery .small-up--two-sixths:nth-child(3n + 1), .gallery .small-up--two-twelfths:nth-child(6n + 1), .grid--uniform .small-up--five-tenths:nth-child(odd), .grid--uniform .small-up--four-eighths:nth-child(odd), .grid--uniform .small-up--four-twelfths:nth-child(3n + 1), .grid--uniform .small-up--one-eighth:nth-child(8n + 1), .grid--uniform .small-up--one-fifth:nth-child(5n + 1), .grid--uniform .small-up--one-half:nth-child(odd), .grid--uniform .small-up--one-quarter:nth-child(4n + 1), .grid--uniform .small-up--one-sixth:nth-child(6n + 1), .grid--uniform .small-up--one-third:nth-child(3n + 1), .grid--uniform .small-up--one-twelfth:nth-child(12n + 1), .grid--uniform .small-up--six-twelfths:nth-child(odd), .grid--uniform .small-up--three-sixths:nth-child(odd), .grid--uniform .small-up--three-twelfths:nth-child(4n + 1), .grid--uniform .small-up--two-eighths:nth-child(4n + 1), .grid--uniform .small-up--two-sixths:nth-child(3n + 1), .grid--uniform .small-up--two-twelfths:nth-child(6n + 1) { clear: both; } .small-up--show { display: block !important; } .small-up--hide { display: none !important; } .small-up--text-left { text-align: left !important; } .small-up--text-right { text-align: right !important; } .small-up--text-center { text-align: center !important; } } @media only screen and (max-width: 767px) { .small-down--one-whole { width: 100%; } .small-down--one-whole--max-width { max-width: 100%; } .small-down--one-half { width: 50%; } .small-down--one-third { width: 33.3333333333%; } .small-down--two-thirds { width: 66.6666666667%; } .small-down--one-quarter { width: 25%; } .small-down--two-quarters { width: 50%; } .small-down--three-quarters { width: 75%; } .small-down--one-fifth { width: 20%; } .small-down--two-fifths { width: 40%; } .small-down--two-fifths--max-width { max-width: 40%; } .small-down--three-fifths { width: 60%; } .small-down--three-fifths--max-width { max-width: 60%; } .small-down--four-fifths { width: 80%; } .small-down--four-fifths--max-width { max-width: 80%; } .small-down--one-sixth { width: 16.6666666667%; } .small-down--two-sixths { width: 33.3333333333%; } .small-down--three-sixths { width: 50%; } .small-down--four-sixths { width: 66.6666666667%; } .small-down--five-sixths { width: 83.3333333333%; } .small-down--one-eighth { width: 12.5%; } .small-down--two-eighths { width: 25%; } .small-down--three-eighths { width: 37.5%; } .small-down--four-eighths { width: 50%; } .small-down--five-eighths { width: 62.5%; } .small-down--six-eighths { width: 75%; } .small-down--seven-eighths { width: 87.5%; } .small-down--one-tenth { width: 10%; } .small-down--two-tenths { width: 20%; } .small-down--three-tenths { width: 30%; } .small-down--four-tenths { width: 40%; } .small-down--five-tenths { width: 50%; } .small-down--six-tenths { width: 60%; } .small-down--seven-tenths { width: 70%; } .small-down--eight-tenths { width: 80%; } .small-down--nine-tenths { width: 90%; } .small-down--one-twelfth { width: 8.3333333333%; } .small-down--two-twelfths { width: 16.6666666667%; } .small-down--three-twelfths { width: 25%; } .small-down--four-twelfths { width: 33.3333333333%; } .small-down--five-twelfths { width: 41.6666666667%; } .small-down--six-twelfths { width: 50%; } .small-down--seven-twelfths { width: 58.3333333333%; } .small-down--eight-twelfths { width: 66.6666666667%; } .small-down--nine-twelfths { width: 75%; } .small-down--ten-twelfths { width: 83.3333333333%; } .small-down--eleven-twelfths { width: 91.6666666667%; } .gallery .small-down--five-tenths:nth-child(odd), .gallery .small-down--four-eighths:nth-child(odd), .gallery .small-down--four-twelfths:nth-child(3n + 1), .gallery .small-down--one-eighth:nth-child(8n + 1), .gallery .small-down--one-fifth:nth-child(5n + 1), .gallery .small-down--one-half:nth-child(odd), .gallery .small-down--one-quarter:nth-child(4n + 1), .gallery .small-down--one-sixth:nth-child(6n + 1), .gallery .small-down--one-third:nth-child(3n + 1), .gallery .small-down--one-twelfth:nth-child(12n + 1), .gallery .small-down--six-twelfths:nth-child(odd), .gallery .small-down--three-sixths:nth-child(odd), .gallery .small-down--three-twelfths:nth-child(4n + 1), .gallery .small-down--two-eighths:nth-child(4n + 1), .gallery .small-down--two-sixths:nth-child(3n + 1), .gallery .small-down--two-twelfths:nth-child(6n + 1), .grid--uniform .small-down--five-tenths:nth-child(odd), .grid--uniform .small-down--four-eighths:nth-child(odd), .grid--uniform .small-down--four-twelfths:nth-child(3n + 1), .grid--uniform .small-down--one-eighth:nth-child(8n + 1), .grid--uniform .small-down--one-fifth:nth-child(5n + 1), .grid--uniform .small-down--one-half:nth-child(odd), .grid--uniform .small-down--one-quarter:nth-child(4n + 1), .grid--uniform .small-down--one-sixth:nth-child(6n + 1), .grid--uniform .small-down--one-third:nth-child(3n + 1), .grid--uniform .small-down--one-twelfth:nth-child(12n + 1), .grid--uniform .small-down--six-twelfths:nth-child(odd), .grid--uniform .small-down--three-sixths:nth-child(odd), .grid--uniform .small-down--three-twelfths:nth-child(4n + 1), .grid--uniform .small-down--two-eighths:nth-child(4n + 1), .grid--uniform .small-down--two-sixths:nth-child(3n + 1), .grid--uniform .small-down--two-twelfths:nth-child(6n + 1) { clear: both; } .small-down--show { display: block !important; } .small-down--hide { display: none !important; } .small-down--text-left { text-align: left !important; } .small-down--text-right { text-align: right !important; } .small-down--text-center { text-align: center !important; } } @media only screen and (min-width: 480px) and (max-width: 989px) { .small-medium--one-whole { width: 100%; } .small-medium--one-half { width: 50%; } .small-medium--one-third { width: 33.3333333333%; } .small-medium--two-thirds { width: 66.6666666667%; } .small-medium--one-quarter { width: 25%; } .small-medium--two-quarters { width: 50%; } .small-medium--three-quarters { width: 75%; } .small-medium--one-fifth { width: 20%; } .small-medium--two-fifths { width: 40%; } .small-medium--three-fifths { width: 60%; } .small-medium--four-fifths { width: 80%; } .small-medium--one-sixth { width: 16.6666666667%; } .small-medium--two-sixths { width: 33.3333333333%; } .small-medium--three-sixths { width: 50%; } .small-medium--four-sixths { width: 66.6666666667%; } .small-medium--five-sixths { width: 83.3333333333%; } .small-medium--one-eighth { width: 12.5%; } .small-medium--two-eighths { width: 25%; } .small-medium--three-eighths { width: 37.5%; } .small-medium--four-eighths { width: 50%; } .small-medium--five-eighths { width: 62.5%; } .small-medium--six-eighths { width: 75%; } .small-medium--seven-eighths { width: 87.5%; } .small-medium--one-tenth { width: 10%; } .small-medium--two-tenths { width: 20%; } .small-medium--three-tenths { width: 30%; } .small-medium--four-tenths { width: 40%; } .small-medium--five-tenths { width: 50%; } .small-medium--six-tenths { width: 60%; } .small-medium--seven-tenths { width: 70%; } .small-medium--eight-tenths { width: 80%; } .small-medium--nine-tenths { width: 90%; } .small-medium--one-twelfth { width: 8.3333333333%; } .small-medium--two-twelfths { width: 16.6666666667%; } .small-medium--three-twelfths { width: 25%; } .small-medium--four-twelfths { width: 33.3333333333%; } .small-medium--five-twelfths { width: 41.6666666667%; } .small-medium--six-twelfths { width: 50%; } .small-medium--seven-twelfths { width: 58.3333333333%; } .small-medium--eight-twelfths { width: 66.6666666667%; } .small-medium--nine-twelfths { width: 75%; } .small-medium--ten-twelfths { width: 83.3333333333%; } .small-medium--eleven-twelfths { width: 91.6666666667%; } .gallery .small-medium--five-tenths:nth-child(odd), .gallery .small-medium--four-eighths:nth-child(odd), .gallery .small-medium--four-twelfths:nth-child(3n + 1), .gallery .small-medium--one-eighth:nth-child(8n + 1), .gallery .small-medium--one-fifth:nth-child(5n + 1), .gallery .small-medium--one-half:nth-child(odd), .gallery .small-medium--one-quarter:nth-child(4n + 1), .gallery .small-medium--one-sixth:nth-child(6n + 1), .gallery .small-medium--one-third:nth-child(3n + 1), .gallery .small-medium--one-twelfth:nth-child(12n + 1), .gallery .small-medium--six-twelfths:nth-child(odd), .gallery .small-medium--three-sixths:nth-child(odd), .gallery .small-medium--three-twelfths:nth-child(4n + 1), .gallery .small-medium--two-eighths:nth-child(4n + 1), .gallery .small-medium--two-sixths:nth-child(3n + 1), .gallery .small-medium--two-twelfths:nth-child(6n + 1), .grid--uniform .small-medium--five-tenths:nth-child(odd), .grid--uniform .small-medium--four-eighths:nth-child(odd), .grid--uniform .small-medium--four-twelfths:nth-child(3n + 1), .grid--uniform .small-medium--one-eighth:nth-child(8n + 1), .grid--uniform .small-medium--one-fifth:nth-child(5n + 1), .grid--uniform .small-medium--one-half:nth-child(odd), .grid--uniform .small-medium--one-quarter:nth-child(4n + 1), .grid--uniform .small-medium--one-sixth:nth-child(6n + 1), .grid--uniform .small-medium--one-third:nth-child(3n + 1), .grid--uniform .small-medium--one-twelfth:nth-child(12n + 1), .grid--uniform .small-medium--six-twelfths:nth-child(odd), .grid--uniform .small-medium--three-sixths:nth-child(odd), .grid--uniform .small-medium--three-twelfths:nth-child(4n + 1), .grid--uniform .small-medium--two-eighths:nth-child(4n + 1), .grid--uniform .small-medium--two-sixths:nth-child(3n + 1), .grid--uniform .small-medium--two-twelfths:nth-child(6n + 1) { clear: both; } .small-medium--show { display: block !important; } .small-medium--hide { display: none !important; } .small-medium--text-left { text-align: left !important; } .small-medium--text-right { text-align: right !important; } .small-medium--text-center { text-align: center !important; } } @media only screen and (min-width: 768px) and (max-width: 989px) { .medium--one-whole { width: 100%; } .medium--one-half { width: 50%; } .medium--one-third { width: 33.3333333333%; } .medium--two-thirds { width: 66.6666666667%; } .medium--one-quarter { width: 25%; } .medium--two-quarters { width: 50%; } .medium--three-quarters { width: 75%; } .medium--one-fifth { width: 20%; } .medium--two-fifths { width: 40%; } .medium--three-fifths { width: 60%; } .medium--four-fifths { width: 80%; } .medium--one-sixth { width: 16.6666666667%; } .medium--two-sixths { width: 33.3333333333%; } .medium--three-sixths { width: 50%; } .medium--four-sixths { width: 66.6666666667%; } .medium--five-sixths { width: 83.3333333333%; } .medium--one-eighth { width: 12.5%; } .medium--two-eighths { width: 25%; } .medium--three-eighths { width: 37.5%; } .medium--four-eighths { width: 50%; } .medium--five-eighths { width: 62.5%; } .medium--six-eighths { width: 75%; } .medium--seven-eighths { width: 87.5%; } .medium--one-tenth { width: 10%; } .medium--two-tenths { width: 20%; } .medium--three-tenths { width: 30%; } .medium--four-tenths { width: 40%; } .medium--five-tenths { width: 50%; } .medium--six-tenths { width: 60%; } .medium--seven-tenths { width: 70%; } .medium--eight-tenths { width: 80%; } .medium--nine-tenths { width: 90%; } .medium--one-twelfth { width: 8.3333333333%; } .medium--two-twelfths { width: 16.6666666667%; } .medium--three-twelfths { width: 25%; } .medium--four-twelfths { width: 33.3333333333%; } .medium--five-twelfths { width: 41.6666666667%; } .medium--six-twelfths { width: 50%; } .medium--seven-twelfths { width: 58.3333333333%; } .medium--eight-twelfths { width: 66.6666666667%; } .medium--nine-twelfths { width: 75%; } .medium--ten-twelfths { width: 83.3333333333%; } .medium--eleven-twelfths { width: 91.6666666667%; } .gallery .medium--five-tenths:nth-child(odd), .gallery .medium--four-eighths:nth-child(odd), .gallery .medium--four-twelfths:nth-child(3n + 1), .gallery .medium--one-eighth:nth-child(8n + 1), .gallery .medium--one-fifth:nth-child(5n + 1), .gallery .medium--one-half:nth-child(odd), .gallery .medium--one-quarter:nth-child(4n + 1), .gallery .medium--one-sixth:nth-child(6n + 1), .gallery .medium--one-third:nth-child(3n + 1), .gallery .medium--one-twelfth:nth-child(12n + 1), .gallery .medium--six-twelfths:nth-child(odd), .gallery .medium--three-sixths:nth-child(odd), .gallery .medium--three-twelfths:nth-child(4n + 1), .gallery .medium--two-eighths:nth-child(4n + 1), .gallery .medium--two-sixths:nth-child(3n + 1), .gallery .medium--two-twelfths:nth-child(6n + 1), .grid--uniform .medium--five-tenths:nth-child(odd), .grid--uniform .medium--four-eighths:nth-child(odd), .grid--uniform .medium--four-twelfths:nth-child(3n + 1), .grid--uniform .medium--one-eighth:nth-child(8n + 1), .grid--uniform .medium--one-fifth:nth-child(5n + 1), .grid--uniform .medium--one-half:nth-child(odd), .grid--uniform .medium--one-quarter:nth-child(4n + 1), .grid--uniform .medium--one-sixth:nth-child(6n + 1), .grid--uniform .medium--one-third:nth-child(3n + 1), .grid--uniform .medium--one-twelfth:nth-child(12n + 1), .grid--uniform .medium--six-twelfths:nth-child(odd), .grid--uniform .medium--three-sixths:nth-child(odd), .grid--uniform .medium--three-twelfths:nth-child(4n + 1), .grid--uniform .medium--two-eighths:nth-child(4n + 1), .grid--uniform .medium--two-sixths:nth-child(3n + 1), .grid--uniform .medium--two-twelfths:nth-child(6n + 1) { clear: both; } .medium--show { display: block !important; } .medium--hide { display: none !important; } .medium--text-left { text-align: left !important; } .medium--text-right { text-align: right !important; } .medium--text-center { text-align: center !important; } } @media only screen and (min-width: 768px) { .medium-up--one-whole { width: 100%; } .medium-up--one-half { width: 50%; } .medium-up--one-third { width: 33.3333333333%; } .medium-up--two-thirds { width: 66.6666666667%; } .medium-up--one-quarter { width: 25%; } .medium-up--two-quarters { width: 50%; } .medium-up--three-quarters { width: 75%; } .medium-up--one-fifth { width: 20%; } .medium-up--two-fifths { width: 40%; } .medium-up--three-fifths { width: 60%; } .medium-up--four-fifths { width: 80%; } .medium-up--one-sixth { width: 16.6666666667%; } .medium-up--two-sixths { width: 33.3333333333%; } .medium-up--three-sixths { width: 50%; } .medium-up--four-sixths { width: 66.6666666667%; } .medium-up--five-sixths { width: 83.3333333333%; } .medium-up--one-eighth { width: 12.5%; } .medium-up--two-eighths { width: 25%; } .medium-up--three-eighths { width: 37.5%; } .medium-up--four-eighths { width: 50%; } .medium-up--five-eighths { width: 62.5%; } .medium-up--six-eighths { width: 75%; } .medium-up--seven-eighths { width: 87.5%; } .medium-up--one-tenth { width: 10%; } .medium-up--two-tenths { width: 20%; } .medium-up--three-tenths { width: 30%; } .medium-up--four-tenths { width: 40%; } .medium-up--five-tenths { width: 50%; } .medium-up--six-tenths { width: 60%; } .medium-up--seven-tenths { width: 70%; } .medium-up--eight-tenths { width: 80%; } .medium-up--nine-tenths { width: 90%; } .medium-up--one-twelfth { width: 8.3333333333%; } .medium-up--two-twelfths { width: 16.6666666667%; } .medium-up--three-twelfths { width: 25%; } .medium-up--four-twelfths { width: 33.3333333333%; } .medium-up--five-twelfths { width: 41.6666666667%; } .medium-up--six-twelfths { width: 50%; } .medium-up--seven-twelfths { width: 58.3333333333%; } .medium-up--eight-twelfths { width: 66.6666666667%; } .medium-up--nine-twelfths { width: 75%; } .medium-up--ten-twelfths { width: 83.3333333333%; } .medium-up--eleven-twelfths { width: 91.6666666667%; } .gallery .medium-up--five-tenths:nth-child(odd), .gallery .medium-up--four-eighths:nth-child(odd), .gallery .medium-up--four-twelfths:nth-child(3n + 1), .gallery .medium-up--one-eighth:nth-child(8n + 1), .gallery .medium-up--one-fifth:nth-child(5n + 1), .gallery .medium-up--one-half:nth-child(odd), .gallery .medium-up--one-quarter:nth-child(4n + 1), .gallery .medium-up--one-sixth:nth-child(6n + 1), .gallery .medium-up--one-third:nth-child(3n + 1), .gallery .medium-up--one-twelfth:nth-child(12n + 1), .gallery .medium-up--six-twelfths:nth-child(odd), .gallery .medium-up--three-sixths:nth-child(odd), .gallery .medium-up--three-twelfths:nth-child(4n + 1), .gallery .medium-up--two-eighths:nth-child(4n + 1), .gallery .medium-up--two-sixths:nth-child(3n + 1), .gallery .medium-up--two-twelfths:nth-child(6n + 1), .grid--uniform .medium-up--five-tenths:nth-child(odd), .grid--uniform .medium-up--four-eighths:nth-child(odd), .grid--uniform .medium-up--four-twelfths:nth-child(3n + 1), .grid--uniform .medium-up--one-eighth:nth-child(8n + 1), .grid--uniform .medium-up--one-fifth:nth-child(5n + 1), .grid--uniform .medium-up--one-half:nth-child(odd), .grid--uniform .medium-up--one-quarter:nth-child(4n + 1), .grid--uniform .medium-up--one-sixth:nth-child(6n + 1), .grid--uniform .medium-up--one-third:nth-child(3n + 1), .grid--uniform .medium-up--one-twelfth:nth-child(12n + 1), .grid--uniform .medium-up--six-twelfths:nth-child(odd), .grid--uniform .medium-up--three-sixths:nth-child(odd), .grid--uniform .medium-up--three-twelfths:nth-child(4n + 1), .grid--uniform .medium-up--two-eighths:nth-child(4n + 1), .grid--uniform .medium-up--two-sixths:nth-child(3n + 1), .grid--uniform .medium-up--two-twelfths:nth-child(6n + 1) { clear: both; } .medium-up--show { display: block !important; } .medium-up--hide { display: none !important; } .medium-up--text-left { text-align: left !important; } .medium-up--text-right { text-align: right !important; } .medium-up--text-center { text-align: center !important; } } @media only screen and (max-width: 989px) { .medium-down--one-whole { width: 100%; } .medium-down--one-half { width: 50%; } .medium-down--one-third { width: 33.3333333333%; } .medium-down--two-thirds { width: 66.6666666667%; } .medium-down--one-quarter { width: 25%; } .medium-down--two-quarters { width: 50%; } .medium-down--three-quarters { width: 75%; } .medium-down--one-fifth { width: 20%; } .medium-down--two-fifths { width: 40%; } .medium-down--three-fifths { width: 60%; } .medium-down--four-fifths { width: 80%; } .medium-down--one-sixth { width: 16.6666666667%; } .medium-down--two-sixths { width: 33.3333333333%; } .medium-down--three-sixths { width: 50%; } .medium-down--four-sixths { width: 66.6666666667%; } .medium-down--five-sixths { width: 83.3333333333%; } .medium-down--one-eighth { width: 12.5%; } .medium-down--two-eighths { width: 25%; } .medium-down--three-eighths { width: 37.5%; } .medium-down--four-eighths { width: 50%; } .medium-down--five-eighths { width: 62.5%; } .medium-down--six-eighths { width: 75%; } .medium-down--seven-eighths { width: 87.5%; } .medium-down--one-tenth { width: 10%; } .medium-down--two-tenths { width: 20%; } .medium-down--three-tenths { width: 30%; } .medium-down--four-tenths { width: 40%; } .medium-down--five-tenths { width: 50%; } .medium-down--six-tenths { width: 60%; } .medium-down--seven-tenths { width: 70%; } .medium-down--eight-tenths { width: 80%; } .medium-down--nine-tenths { width: 90%; } .medium-down--one-twelfth { width: 8.3333333333%; } .medium-down--two-twelfths { width: 16.6666666667%; } .medium-down--three-twelfths { width: 25%; } .medium-down--four-twelfths { width: 33.3333333333%; } .medium-down--five-twelfths { width: 41.6666666667%; } .medium-down--six-twelfths { width: 50%; } .medium-down--seven-twelfths { width: 58.3333333333%; } .medium-down--eight-twelfths { width: 66.6666666667%; } .medium-down--nine-twelfths { width: 75%; } .medium-down--ten-twelfths { width: 83.3333333333%; } .medium-down--eleven-twelfths { width: 91.6666666667%; } .gallery .medium-down--five-tenths:nth-child(odd), .gallery .medium-down--four-eighths:nth-child(odd), .gallery .medium-down--four-twelfths:nth-child(3n + 1), .gallery .medium-down--one-eighth:nth-child(8n + 1), .gallery .medium-down--one-fifth:nth-child(5n + 1), .gallery .medium-down--one-half:nth-child(odd), .gallery .medium-down--one-quarter:nth-child(4n + 1), .gallery .medium-down--one-sixth:nth-child(6n + 1), .gallery .medium-down--one-third:nth-child(3n + 1), .gallery .medium-down--one-twelfth:nth-child(12n + 1), .gallery .medium-down--six-twelfths:nth-child(odd), .gallery .medium-down--three-sixths:nth-child(odd), .gallery .medium-down--three-twelfths:nth-child(4n + 1), .gallery .medium-down--two-eighths:nth-child(4n + 1), .gallery .medium-down--two-sixths:nth-child(3n + 1), .gallery .medium-down--two-twelfths:nth-child(6n + 1), .grid--uniform .medium-down--five-tenths:nth-child(odd), .grid--uniform .medium-down--four-eighths:nth-child(odd), .grid--uniform .medium-down--four-twelfths:nth-child(3n + 1), .grid--uniform .medium-down--one-eighth:nth-child(8n + 1), .grid--uniform .medium-down--one-fifth:nth-child(5n + 1), .grid--uniform .medium-down--one-half:nth-child(odd), .grid--uniform .medium-down--one-quarter:nth-child(4n + 1), .grid--uniform .medium-down--one-sixth:nth-child(6n + 1), .grid--uniform .medium-down--one-third:nth-child(3n + 1), .grid--uniform .medium-down--one-twelfth:nth-child(12n + 1), .grid--uniform .medium-down--six-twelfths:nth-child(odd), .grid--uniform .medium-down--three-sixths:nth-child(odd), .grid--uniform .medium-down--three-twelfths:nth-child(4n + 1), .grid--uniform .medium-down--two-eighths:nth-child(4n + 1), .grid--uniform .medium-down--two-sixths:nth-child(3n + 1), .grid--uniform .medium-down--two-twelfths:nth-child(6n + 1) { clear: both; } .medium-down--show { display: block !important; } .medium-down--hide { display: none !important; } .medium-down--text-left { text-align: left !important; } .medium-down--text-right { text-align: right !important; } .medium-down--text-center { text-align: center !important; } } @media only screen and (min-width: 768px) and (max-width: 1399px) { .medium-large--one-whole { width: 100%; } .medium-large--one-half { width: 50%; } .medium-large--one-third { width: 33.3333333333%; } .medium-large--two-thirds { width: 66.6666666667%; } .medium-large--one-quarter { width: 25%; } .medium-large--two-quarters { width: 50%; } .medium-large--three-quarters { width: 75%; } .medium-large--one-fifth { width: 20%; } .medium-large--two-fifths { width: 40%; } .medium-large--three-fifths { width: 60%; } .medium-large--four-fifths { width: 80%; } .medium-large--one-sixth { width: 16.6666666667%; } .medium-large--two-sixths { width: 33.3333333333%; } .medium-large--three-sixths { width: 50%; } .medium-large--four-sixths { width: 66.6666666667%; } .medium-large--five-sixths { width: 83.3333333333%; } .medium-large--one-eighth { width: 12.5%; } .medium-large--two-eighths { width: 25%; } .medium-large--three-eighths { width: 37.5%; } .medium-large--four-eighths { width: 50%; } .medium-large--five-eighths { width: 62.5%; } .medium-large--six-eighths { width: 75%; } .medium-large--seven-eighths { width: 87.5%; } .medium-large--one-tenth { width: 10%; } .medium-large--two-tenths { width: 20%; } .medium-large--three-tenths { width: 30%; } .medium-large--four-tenths { width: 40%; } .medium-large--five-tenths { width: 50%; } .medium-large--six-tenths { width: 60%; } .medium-large--seven-tenths { width: 70%; } .medium-large--eight-tenths { width: 80%; } .medium-large--nine-tenths { width: 90%; } .medium-large--one-twelfth { width: 8.3333333333%; } .medium-large--two-twelfths { width: 16.6666666667%; } .medium-large--three-twelfths { width: 25%; } .medium-large--four-twelfths { width: 33.3333333333%; } .medium-large--five-twelfths { width: 41.6666666667%; } .medium-large--six-twelfths { width: 50%; } .medium-large--seven-twelfths { width: 58.3333333333%; } .medium-large--eight-twelfths { width: 66.6666666667%; } .medium-large--nine-twelfths { width: 75%; } .medium-large--ten-twelfths { width: 83.3333333333%; } .medium-large--eleven-twelfths { width: 91.6666666667%; } .gallery .medium-large--five-tenths:nth-child(odd), .gallery .medium-large--four-eighths:nth-child(odd), .gallery .medium-large--four-twelfths:nth-child(3n + 1), .gallery .medium-large--one-eighth:nth-child(8n + 1), .gallery .medium-large--one-fifth:nth-child(5n + 1), .gallery .medium-large--one-half:nth-child(odd), .gallery .medium-large--one-quarter:nth-child(4n + 1), .gallery .medium-large--one-sixth:nth-child(6n + 1), .gallery .medium-large--one-third:nth-child(3n + 1), .gallery .medium-large--one-twelfth:nth-child(12n + 1), .gallery .medium-large--six-twelfths:nth-child(odd), .gallery .medium-large--three-sixths:nth-child(odd), .gallery .medium-large--three-twelfths:nth-child(4n + 1), .gallery .medium-large--two-eighths:nth-child(4n + 1), .gallery .medium-large--two-sixths:nth-child(3n + 1), .gallery .medium-large--two-twelfths:nth-child(6n + 1), .grid--uniform .medium-large--five-tenths:nth-child(odd), .grid--uniform .medium-large--four-eighths:nth-child(odd), .grid--uniform .medium-large--four-twelfths:nth-child(3n + 1), .grid--uniform .medium-large--one-eighth:nth-child(8n + 1), .grid--uniform .medium-large--one-fifth:nth-child(5n + 1), .grid--uniform .medium-large--one-half:nth-child(odd), .grid--uniform .medium-large--one-quarter:nth-child(4n + 1), .grid--uniform .medium-large--one-sixth:nth-child(6n + 1), .grid--uniform .medium-large--one-third:nth-child(3n + 1), .grid--uniform .medium-large--one-twelfth:nth-child(12n + 1), .grid--uniform .medium-large--six-twelfths:nth-child(odd), .grid--uniform .medium-large--three-sixths:nth-child(odd), .grid--uniform .medium-large--three-twelfths:nth-child(4n + 1), .grid--uniform .medium-large--two-eighths:nth-child(4n + 1), .grid--uniform .medium-large--two-sixths:nth-child(3n + 1), .grid--uniform .medium-large--two-twelfths:nth-child(6n + 1) { clear: both; } .medium-large--show { display: block !important; } .medium-large--hide { display: none !important; } .medium-large--text-left { text-align: left !important; } .medium-large--text-right { text-align: right !important; } .medium-large--text-center { text-align: center !important; } } @media only screen and (min-width: 990px) and (max-width: 1399px) { .large--one-whole { width: 100%; } .large--one-half { width: 50%; } .large--one-third { width: 33.3333333333%; } .large--two-thirds { width: 66.6666666667%; } .large--one-quarter { width: 25%; } .large--two-quarters { width: 50%; } .large--three-quarters { width: 75%; } .large--one-fifth { width: 20%; } .large--two-fifths { width: 40%; } .large--three-fifths { width: 60%; } .large--four-fifths { width: 80%; } .large--one-sixth { width: 16.6666666667%; } .large--two-sixths { width: 33.3333333333%; } .large--three-sixths { width: 50%; } .large--four-sixths { width: 66.6666666667%; } .large--five-sixths { width: 83.3333333333%; } .large--one-eighth { width: 12.5%; } .large--two-eighths { width: 25%; } .large--three-eighths { width: 37.5%; } .large--four-eighths { width: 50%; } .large--five-eighths { width: 62.5%; } .large--six-eighths { width: 75%; } .large--seven-eighths { width: 87.5%; } .large--one-tenth { width: 10%; } .large--two-tenths { width: 20%; } .large--three-tenths { width: 30%; } .large--four-tenths { width: 40%; } .large--five-tenths { width: 50%; } .large--six-tenths { width: 60%; } .large--seven-tenths { width: 70%; } .large--eight-tenths { width: 80%; } .large--nine-tenths { width: 90%; } .large--one-twelfth { width: 8.3333333333%; } .large--two-twelfths { width: 16.6666666667%; } .large--three-twelfths { width: 25%; } .large--four-twelfths { width: 33.3333333333%; } .large--five-twelfths { width: 41.6666666667%; } .large--six-twelfths { width: 50%; } .large--seven-twelfths { width: 58.3333333333%; } .large--eight-twelfths { width: 66.6666666667%; } .large--nine-twelfths { width: 75%; } .large--ten-twelfths { width: 83.3333333333%; } .large--eleven-twelfths { width: 91.6666666667%; } .gallery .large--five-tenths:nth-child(odd), .gallery .large--four-eighths:nth-child(odd), .gallery .large--four-twelfths:nth-child(3n + 1), .gallery .large--one-eighth:nth-child(8n + 1), .gallery .large--one-fifth:nth-child(5n + 1), .gallery .large--one-half:nth-child(odd), .gallery .large--one-quarter:nth-child(4n + 1), .gallery .large--one-sixth:nth-child(6n + 1), .gallery .large--one-third:nth-child(3n + 1), .gallery .large--one-twelfth:nth-child(12n + 1), .gallery .large--six-twelfths:nth-child(odd), .gallery .large--three-sixths:nth-child(odd), .gallery .large--three-twelfths:nth-child(4n + 1), .gallery .large--two-eighths:nth-child(4n + 1), .gallery .large--two-sixths:nth-child(3n + 1), .gallery .large--two-twelfths:nth-child(6n + 1), .grid--uniform .large--five-tenths:nth-child(odd), .grid--uniform .large--four-eighths:nth-child(odd), .grid--uniform .large--four-twelfths:nth-child(3n + 1), .grid--uniform .large--one-eighth:nth-child(8n + 1), .grid--uniform .large--one-fifth:nth-child(5n + 1), .grid--uniform .large--one-half:nth-child(odd), .grid--uniform .large--one-quarter:nth-child(4n + 1), .grid--uniform .large--one-sixth:nth-child(6n + 1), .grid--uniform .large--one-third:nth-child(3n + 1), .grid--uniform .large--one-twelfth:nth-child(12n + 1), .grid--uniform .large--six-twelfths:nth-child(odd), .grid--uniform .large--three-sixths:nth-child(odd), .grid--uniform .large--three-twelfths:nth-child(4n + 1), .grid--uniform .large--two-eighths:nth-child(4n + 1), .grid--uniform .large--two-sixths:nth-child(3n + 1), .grid--uniform .large--two-twelfths:nth-child(6n + 1) { clear: both; } .large--show { display: block !important; } .large--hide { display: none !important; } .large--text-left { text-align: left !important; } .large--text-right { text-align: right !important; } .large--text-center { text-align: center !important; } } @media only screen and (min-width: 990px) { .large-up--one-whole { width: 100%; } .large-up--one-half { width: 50%; } .large-up--one-third { width: 33.3333333333%; } .large-up--two-thirds { width: 66.6666666667%; } .large-up--one-quarter { width: 25%; } .large-up--two-quarters { width: 50%; } .large-up--three-quarters { width: 75%; } .large-up--one-fifth { width: 20%; } .large-up--two-fifths { width: 40%; } .large-up--three-fifths { width: 60%; } .large-up--four-fifths { width: 80%; } .large-up--one-sixth { width: 16.6666666667%; } .large-up--two-sixths { width: 33.3333333333%; } .large-up--three-sixths { width: 50%; } .large-up--four-sixths { width: 66.6666666667%; } .large-up--five-sixths { width: 83.3333333333%; } .large-up--one-eighth { width: 12.5%; } .large-up--two-eighths { width: 25%; } .large-up--three-eighths { width: 37.5%; } .large-up--four-eighths { width: 50%; } .large-up--five-eighths { width: 62.5%; } .large-up--six-eighths { width: 75%; } .large-up--seven-eighths { width: 87.5%; } .large-up--one-tenth { width: 10%; } .large-up--two-tenths { width: 20%; } .large-up--three-tenths { width: 30%; } .large-up--four-tenths { width: 40%; } .large-up--five-tenths { width: 50%; } .large-up--six-tenths { width: 60%; } .large-up--seven-tenths { width: 70%; } .large-up--eight-tenths { width: 80%; } .large-up--nine-tenths { width: 90%; } .large-up--one-twelfth { width: 8.3333333333%; } .large-up--two-twelfths { width: 16.6666666667%; } .large-up--three-twelfths { width: 25%; } .large-up--four-twelfths { width: 33.3333333333%; } .large-up--five-twelfths { width: 41.6666666667%; } .large-up--six-twelfths { width: 50%; } .large-up--seven-twelfths { width: 58.3333333333%; } .large-up--eight-twelfths { width: 66.6666666667%; } .large-up--nine-twelfths { width: 75%; } .large-up--ten-twelfths { width: 83.3333333333%; } .large-up--eleven-twelfths { width: 91.6666666667%; } .gallery .large-up--five-tenths:nth-child(odd), .gallery .large-up--four-eighths:nth-child(odd), .gallery .large-up--four-twelfths:nth-child(3n + 1), .gallery .large-up--one-eighth:nth-child(8n + 1), .gallery .large-up--one-fifth:nth-child(5n + 1), .gallery .large-up--one-half:nth-child(odd), .gallery .large-up--one-quarter:nth-child(4n + 1), .gallery .large-up--one-sixth:nth-child(6n + 1), .gallery .large-up--one-third:nth-child(3n + 1), .gallery .large-up--one-twelfth:nth-child(12n + 1), .gallery .large-up--six-twelfths:nth-child(odd), .gallery .large-up--three-sixths:nth-child(odd), .gallery .large-up--three-twelfths:nth-child(4n + 1), .gallery .large-up--two-eighths:nth-child(4n + 1), .gallery .large-up--two-sixths:nth-child(3n + 1), .gallery .large-up--two-twelfths:nth-child(6n + 1), .grid--uniform .large-up--five-tenths:nth-child(odd), .grid--uniform .large-up--four-eighths:nth-child(odd), .grid--uniform .large-up--four-twelfths:nth-child(3n + 1), .grid--uniform .large-up--one-eighth:nth-child(8n + 1), .grid--uniform .large-up--one-fifth:nth-child(5n + 1), .grid--uniform .large-up--one-half:nth-child(odd), .grid--uniform .large-up--one-quarter:nth-child(4n + 1), .grid--uniform .large-up--one-sixth:nth-child(6n + 1), .grid--uniform .large-up--one-third:nth-child(3n + 1), .grid--uniform .large-up--one-twelfth:nth-child(12n + 1), .grid--uniform .large-up--six-twelfths:nth-child(odd), .grid--uniform .large-up--three-sixths:nth-child(odd), .grid--uniform .large-up--three-twelfths:nth-child(4n + 1), .grid--uniform .large-up--two-eighths:nth-child(4n + 1), .grid--uniform .large-up--two-sixths:nth-child(3n + 1), .grid--uniform .large-up--two-twelfths:nth-child(6n + 1) { clear: both; } .large-up--show { display: block !important; } .large-up--hide { display: none !important; } .large-up--text-left { text-align: left !important; } .large-up--text-right { text-align: right !important; } .large-up--text-center { text-align: center !important; } } @media only screen and (max-width: 1399px) { .large-down--one-whole { width: 100%; } .large-down--one-half { width: 50%; } .large-down--one-third { width: 33.3333333333%; } .large-down--two-thirds { width: 66.6666666667%; } .large-down--one-quarter { width: 25%; } .large-down--two-quarters { width: 50%; } .large-down--three-quarters { width: 75%; } .large-down--one-fifth { width: 20%; } .large-down--two-fifths { width: 40%; } .large-down--three-fifths { width: 60%; } .large-down--four-fifths { width: 80%; } .large-down--one-sixth { width: 16.6666666667%; } .large-down--two-sixths { width: 33.3333333333%; } .large-down--three-sixths { width: 50%; } .large-down--four-sixths { width: 66.6666666667%; } .large-down--five-sixths { width: 83.3333333333%; } .large-down--one-eighth { width: 12.5%; } .large-down--two-eighths { width: 25%; } .large-down--three-eighths { width: 37.5%; } .large-down--four-eighths { width: 50%; } .large-down--five-eighths { width: 62.5%; } .large-down--six-eighths { width: 75%; } .large-down--seven-eighths { width: 87.5%; } .large-down--one-tenth { width: 10%; } .large-down--two-tenths { width: 20%; } .large-down--three-tenths { width: 30%; } .large-down--four-tenths { width: 40%; } .large-down--five-tenths { width: 50%; } .large-down--six-tenths { width: 60%; } .large-down--seven-tenths { width: 70%; } .large-down--eight-tenths { width: 80%; } .large-down--nine-tenths { width: 90%; } .large-down--one-twelfth { width: 8.3333333333%; } .large-down--two-twelfths { width: 16.6666666667%; } .large-down--three-twelfths { width: 25%; } .large-down--four-twelfths { width: 33.3333333333%; } .large-down--five-twelfths { width: 41.6666666667%; } .large-down--six-twelfths { width: 50%; } .large-down--seven-twelfths { width: 58.3333333333%; } .large-down--eight-twelfths { width: 66.6666666667%; } .large-down--nine-twelfths { width: 75%; } .large-down--ten-twelfths { width: 83.3333333333%; } .large-down--eleven-twelfths { width: 91.6666666667%; } .gallery .large-down--five-tenths:nth-child(odd), .gallery .large-down--four-eighths:nth-child(odd), .gallery .large-down--four-twelfths:nth-child(3n + 1), .gallery .large-down--one-eighth:nth-child(8n + 1), .gallery .large-down--one-fifth:nth-child(5n + 1), .gallery .large-down--one-half:nth-child(odd), .gallery .large-down--one-quarter:nth-child(4n + 1), .gallery .large-down--one-sixth:nth-child(6n + 1), .gallery .large-down--one-third:nth-child(3n + 1), .gallery .large-down--one-twelfth:nth-child(12n + 1), .gallery .large-down--six-twelfths:nth-child(odd), .gallery .large-down--three-sixths:nth-child(odd), .gallery .large-down--three-twelfths:nth-child(4n + 1), .gallery .large-down--two-eighths:nth-child(4n + 1), .gallery .large-down--two-sixths:nth-child(3n + 1), .gallery .large-down--two-twelfths:nth-child(6n + 1), .grid--uniform .large-down--five-tenths:nth-child(odd), .grid--uniform .large-down--four-eighths:nth-child(odd), .grid--uniform .large-down--four-twelfths:nth-child(3n + 1), .grid--uniform .large-down--one-eighth:nth-child(8n + 1), .grid--uniform .large-down--one-fifth:nth-child(5n + 1), .grid--uniform .large-down--one-half:nth-child(odd), .grid--uniform .large-down--one-quarter:nth-child(4n + 1), .grid--uniform .large-down--one-sixth:nth-child(6n + 1), .grid--uniform .large-down--one-third:nth-child(3n + 1), .grid--uniform .large-down--one-twelfth:nth-child(12n + 1), .grid--uniform .large-down--six-twelfths:nth-child(odd), .grid--uniform .large-down--three-sixths:nth-child(odd), .grid--uniform .large-down--three-twelfths:nth-child(4n + 1), .grid--uniform .large-down--two-eighths:nth-child(4n + 1), .grid--uniform .large-down--two-sixths:nth-child(3n + 1), .grid--uniform .large-down--two-twelfths:nth-child(6n + 1) { clear: both; } .large-down--show { display: block !important; } .large-down--hide { display: none !important; } .large-down--text-left { text-align: left !important; } .large-down--text-right { text-align: right !important; } .large-down--text-center { text-align: center !important; } } @media only screen and (min-width: 1400px) { .widescreen--one-whole { width: 100%; } .widescreen--one-half { width: 50%; } .widescreen--one-third { width: 33.3333333333%; } .widescreen--two-thirds { width: 66.6666666667%; } .widescreen--one-quarter { width: 25%; } .widescreen--two-quarters { width: 50%; } .widescreen--three-quarters { width: 75%; } .widescreen--one-fifth { width: 20%; } .widescreen--two-fifths { width: 40%; } .widescreen--three-fifths { width: 60%; } .widescreen--four-fifths { width: 80%; } .widescreen--one-sixth { width: 16.6666666667%; } .widescreen--two-sixths { width: 33.3333333333%; } .widescreen--three-sixths { width: 50%; } .widescreen--four-sixths { width: 66.6666666667%; } .widescreen--five-sixths { width: 83.3333333333%; } .widescreen--one-eighth { width: 12.5%; } .widescreen--two-eighths { width: 25%; } .widescreen--three-eighths { width: 37.5%; } .widescreen--four-eighths { width: 50%; } .widescreen--five-eighths { width: 62.5%; } .widescreen--six-eighths { width: 75%; } .widescreen--seven-eighths { width: 87.5%; } .widescreen--one-tenth { width: 10%; } .widescreen--two-tenths { width: 20%; } .widescreen--three-tenths { width: 30%; } .widescreen--four-tenths { width: 40%; } .widescreen--five-tenths { width: 50%; } .widescreen--six-tenths { width: 60%; } .widescreen--seven-tenths { width: 70%; } .widescreen--eight-tenths { width: 80%; } .widescreen--nine-tenths { width: 90%; } .widescreen--one-twelfth { width: 8.3333333333%; } .widescreen--two-twelfths { width: 16.6666666667%; } .widescreen--three-twelfths { width: 25%; } .widescreen--four-twelfths { width: 33.3333333333%; } .widescreen--five-twelfths { width: 41.6666666667%; } .widescreen--six-twelfths { width: 50%; } .widescreen--seven-twelfths { width: 58.3333333333%; } .widescreen--eight-twelfths { width: 66.6666666667%; } .widescreen--nine-twelfths { width: 75%; } .widescreen--ten-twelfths { width: 83.3333333333%; } .widescreen--eleven-twelfths { width: 91.6666666667%; } .gallery .widescreen--five-tenths:nth-child(odd), .gallery .widescreen--four-eighths:nth-child(odd), .gallery .widescreen--four-twelfths:nth-child(3n + 1), .gallery .widescreen--one-eighth:nth-child(8n + 1), .gallery .widescreen--one-fifth:nth-child(5n + 1), .gallery .widescreen--one-half:nth-child(odd), .gallery .widescreen--one-quarter:nth-child(4n + 1), .gallery .widescreen--one-sixth:nth-child(6n + 1), .gallery .widescreen--one-third:nth-child(3n + 1), .gallery .widescreen--one-twelfth:nth-child(12n + 1), .gallery .widescreen--six-twelfths:nth-child(odd), .gallery .widescreen--three-sixths:nth-child(odd), .gallery .widescreen--three-twelfths:nth-child(4n + 1), .gallery .widescreen--two-eighths:nth-child(4n + 1), .gallery .widescreen--two-sixths:nth-child(3n + 1), .gallery .widescreen--two-twelfths:nth-child(6n + 1), .grid--uniform .widescreen--five-tenths:nth-child(odd), .grid--uniform .widescreen--four-eighths:nth-child(odd), .grid--uniform .widescreen--four-twelfths:nth-child(3n + 1), .grid--uniform .widescreen--one-eighth:nth-child(8n + 1), .grid--uniform .widescreen--one-fifth:nth-child(5n + 1), .grid--uniform .widescreen--one-half:nth-child(odd), .grid--uniform .widescreen--one-quarter:nth-child(4n + 1), .grid--uniform .widescreen--one-sixth:nth-child(6n + 1), .grid--uniform .widescreen--one-third:nth-child(3n + 1), .grid--uniform .widescreen--one-twelfth:nth-child(12n + 1), .grid--uniform .widescreen--six-twelfths:nth-child(odd), .grid--uniform .widescreen--three-sixths:nth-child(odd), .grid--uniform .widescreen--three-twelfths:nth-child(4n + 1), .grid--uniform .widescreen--two-eighths:nth-child(4n + 1), .grid--uniform .widescreen--two-sixths:nth-child(3n + 1), .grid--uniform .widescreen--two-twelfths:nth-child(6n + 1) { clear: both; } .widescreen--show { display: block !important; } .widescreen--hide { display: none !important; } .widescreen--text-left { text-align: left !important; } .widescreen--text-right { text-align: right !important; } .widescreen--text-center { text-align: center !important; } } @media only screen and (max-width: 479px) { .mobile--push-one-half { left: 50%; } .mobile--push-one-third { left: 33.3333333333%; } .mobile--push-two-thirds { left: 66.6666666667%; } .mobile--push-one-quarter { left: 25%; } .mobile--push-two-quarters { left: 50%; } .mobile--push-three-quarters { left: 75%; } .mobile--push-one-fifth { left: 20%; } .mobile--push-two-fifths { left: 40%; } .mobile--push-three-fifths { left: 60%; } .mobile--push-four-fifths { left: 80%; } .mobile--push-one-sixth { left: 16.6666666667%; } .mobile--push-two-sixths { left: 33.3333333333%; } .mobile--push-three-sixths { left: 50%; } .mobile--push-four-sixths { left: 66.6666666667%; } .mobile--push-five-sixths { left: 83.3333333333%; } .mobile--push-one-eighth { left: 12.5%; } .mobile--push-two-eighths { left: 25%; } .mobile--push-three-eighths { left: 37.5%; } .mobile--push-four-eighths { left: 50%; } .mobile--push-five-eighths { left: 62.5%; } .mobile--push-six-eighths { left: 75%; } .mobile--push-seven-eighths { left: 87.5%; } .mobile--push-one-tenth { left: 10%; } .mobile--push-two-tenths { left: 20%; } .mobile--push-three-tenths { left: 30%; } .mobile--push-four-tenths { left: 40%; } .mobile--push-five-tenths { left: 50%; } .mobile--push-six-tenths { left: 60%; } .mobile--push-seven-tenths { left: 70%; } .mobile--push-eight-tenths { left: 80%; } .mobile--push-nine-tenths { left: 90%; } .mobile--push-one-twelfth { left: 8.3333333333%; } .mobile--push-two-twelfths { left: 16.6666666667%; } .mobile--push-three-twelfths { left: 25%; } .mobile--push-four-twelfths { left: 33.3333333333%; } .mobile--push-five-twelfths { left: 41.6666666667%; } .mobile--push-six-twelfths { left: 50%; } .mobile--push-seven-twelfths { left: 58.3333333333%; } .mobile--push-eight-twelfths { left: 66.6666666667%; } .mobile--push-nine-twelfths { left: 75%; } .mobile--push-ten-twelfths { left: 83.3333333333%; } .mobile--push-eleven-twelfths { left: 91.6666666667%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .small--push-one-half { left: 50%; } .small--push-one-third { left: 33.3333333333%; } .small--push-two-thirds { left: 66.6666666667%; } .small--push-one-quarter { left: 25%; } .small--push-two-quarters { left: 50%; } .small--push-three-quarters { left: 75%; } .small--push-one-fifth { left: 20%; } .small--push-two-fifths { left: 40%; } .small--push-three-fifths { left: 60%; } .small--push-four-fifths { left: 80%; } .small--push-one-sixth { left: 16.6666666667%; } .small--push-two-sixths { left: 33.3333333333%; } .small--push-three-sixths { left: 50%; } .small--push-four-sixths { left: 66.6666666667%; } .small--push-five-sixths { left: 83.3333333333%; } .small--push-one-eighth { left: 12.5%; } .small--push-two-eighths { left: 25%; } .small--push-three-eighths { left: 37.5%; } .small--push-four-eighths { left: 50%; } .small--push-five-eighths { left: 62.5%; } .small--push-six-eighths { left: 75%; } .small--push-seven-eighths { left: 87.5%; } .small--push-one-tenth { left: 10%; } .small--push-two-tenths { left: 20%; } .small--push-three-tenths { left: 30%; } .small--push-four-tenths { left: 40%; } .small--push-five-tenths { left: 50%; } .small--push-six-tenths { left: 60%; } .small--push-seven-tenths { left: 70%; } .small--push-eight-tenths { left: 80%; } .small--push-nine-tenths { left: 90%; } .small--push-one-twelfth { left: 8.3333333333%; } .small--push-two-twelfths { left: 16.6666666667%; } .small--push-three-twelfths { left: 25%; } .small--push-four-twelfths { left: 33.3333333333%; } .small--push-five-twelfths { left: 41.6666666667%; } .small--push-six-twelfths { left: 50%; } .small--push-seven-twelfths { left: 58.3333333333%; } .small--push-eight-twelfths { left: 66.6666666667%; } .small--push-nine-twelfths { left: 75%; } .small--push-ten-twelfths { left: 83.3333333333%; } .small--push-eleven-twelfths { left: 91.6666666667%; } } @media only screen and (min-width: 480px) { .small-up--push-one-half { left: 50%; } .small-up--push-one-third { left: 33.3333333333%; } .small-up--push-two-thirds { left: 66.6666666667%; } .small-up--push-one-quarter { left: 25%; } .small-up--push-two-quarters { left: 50%; } .small-up--push-three-quarters { left: 75%; } .small-up--push-one-fifth { left: 20%; } .small-up--push-two-fifths { left: 40%; } .small-up--push-three-fifths { left: 60%; } .small-up--push-four-fifths { left: 80%; } .small-up--push-one-sixth { left: 16.6666666667%; } .small-up--push-two-sixths { left: 33.3333333333%; } .small-up--push-three-sixths { left: 50%; } .small-up--push-four-sixths { left: 66.6666666667%; } .small-up--push-five-sixths { left: 83.3333333333%; } .small-up--push-one-eighth { left: 12.5%; } .small-up--push-two-eighths { left: 25%; } .small-up--push-three-eighths { left: 37.5%; } .small-up--push-four-eighths { left: 50%; } .small-up--push-five-eighths { left: 62.5%; } .small-up--push-six-eighths { left: 75%; } .small-up--push-seven-eighths { left: 87.5%; } .small-up--push-one-tenth { left: 10%; } .small-up--push-two-tenths { left: 20%; } .small-up--push-three-tenths { left: 30%; } .small-up--push-four-tenths { left: 40%; } .small-up--push-five-tenths { left: 50%; } .small-up--push-six-tenths { left: 60%; } .small-up--push-seven-tenths { left: 70%; } .small-up--push-eight-tenths { left: 80%; } .small-up--push-nine-tenths { left: 90%; } .small-up--push-one-twelfth { left: 8.3333333333%; } .small-up--push-two-twelfths { left: 16.6666666667%; } .small-up--push-three-twelfths { left: 25%; } .small-up--push-four-twelfths { left: 33.3333333333%; } .small-up--push-five-twelfths { left: 41.6666666667%; } .small-up--push-six-twelfths { left: 50%; } .small-up--push-seven-twelfths { left: 58.3333333333%; } .small-up--push-eight-twelfths { left: 66.6666666667%; } .small-up--push-nine-twelfths { left: 75%; } .small-up--push-ten-twelfths { left: 83.3333333333%; } .small-up--push-eleven-twelfths { left: 91.6666666667%; } } @media only screen and (max-width: 767px) { .small-down--push-one-half { left: 50%; } .small-down--push-one-third { left: 33.3333333333%; } .small-down--push-two-thirds { left: 66.6666666667%; } .small-down--push-one-quarter { left: 25%; } .small-down--push-two-quarters { left: 50%; } .small-down--push-three-quarters { left: 75%; } .small-down--push-one-fifth { left: 20%; } .small-down--push-two-fifths { left: 40%; } .small-down--push-three-fifths { left: 60%; } .small-down--push-four-fifths { left: 80%; } .small-down--push-one-sixth { left: 16.6666666667%; } .small-down--push-two-sixths { left: 33.3333333333%; } .small-down--push-three-sixths { left: 50%; } .small-down--push-four-sixths { left: 66.6666666667%; } .small-down--push-five-sixths { left: 83.3333333333%; } .small-down--push-one-eighth { left: 12.5%; } .small-down--push-two-eighths { left: 25%; } .small-down--push-three-eighths { left: 37.5%; } .small-down--push-four-eighths { left: 50%; } .small-down--push-five-eighths { left: 62.5%; } .small-down--push-six-eighths { left: 75%; } .small-down--push-seven-eighths { left: 87.5%; } .small-down--push-one-tenth { left: 10%; } .small-down--push-two-tenths { left: 20%; } .small-down--push-three-tenths { left: 30%; } .small-down--push-four-tenths { left: 40%; } .small-down--push-five-tenths { left: 50%; } .small-down--push-six-tenths { left: 60%; } .small-down--push-seven-tenths { left: 70%; } .small-down--push-eight-tenths { left: 80%; } .small-down--push-nine-tenths { left: 90%; } .small-down--push-one-twelfth { left: 8.3333333333%; } .small-down--push-two-twelfths { left: 16.6666666667%; } .small-down--push-three-twelfths { left: 25%; } .small-down--push-four-twelfths { left: 33.3333333333%; } .small-down--push-five-twelfths { left: 41.6666666667%; } .small-down--push-six-twelfths { left: 50%; } .small-down--push-seven-twelfths { left: 58.3333333333%; } .small-down--push-eight-twelfths { left: 66.6666666667%; } .small-down--push-nine-twelfths { left: 75%; } .small-down--push-ten-twelfths { left: 83.3333333333%; } .small-down--push-eleven-twelfths { left: 91.6666666667%; } } @media only screen and (min-width: 480px) and (max-width: 989px) { .small-medium--push-one-half { left: 50%; } .small-medium--push-one-third { left: 33.3333333333%; } .small-medium--push-two-thirds { left: 66.6666666667%; } .small-medium--push-one-quarter { left: 25%; } .small-medium--push-two-quarters { left: 50%; } .small-medium--push-three-quarters { left: 75%; } .small-medium--push-one-fifth { left: 20%; } .small-medium--push-two-fifths { left: 40%; } .small-medium--push-three-fifths { left: 60%; } .small-medium--push-four-fifths { left: 80%; } .small-medium--push-one-sixth { left: 16.6666666667%; } .small-medium--push-two-sixths { left: 33.3333333333%; } .small-medium--push-three-sixths { left: 50%; } .small-medium--push-four-sixths { left: 66.6666666667%; } .small-medium--push-five-sixths { left: 83.3333333333%; } .small-medium--push-one-eighth { left: 12.5%; } .small-medium--push-two-eighths { left: 25%; } .small-medium--push-three-eighths { left: 37.5%; } .small-medium--push-four-eighths { left: 50%; } .small-medium--push-five-eighths { left: 62.5%; } .small-medium--push-six-eighths { left: 75%; } .small-medium--push-seven-eighths { left: 87.5%; } .small-medium--push-one-tenth { left: 10%; } .small-medium--push-two-tenths { left: 20%; } .small-medium--push-three-tenths { left: 30%; } .small-medium--push-four-tenths { left: 40%; } .small-medium--push-five-tenths { left: 50%; } .small-medium--push-six-tenths { left: 60%; } .small-medium--push-seven-tenths { left: 70%; } .small-medium--push-eight-tenths { left: 80%; } .small-medium--push-nine-tenths { left: 90%; } .small-medium--push-one-twelfth { left: 8.3333333333%; } .small-medium--push-two-twelfths { left: 16.6666666667%; } .small-medium--push-three-twelfths { left: 25%; } .small-medium--push-four-twelfths { left: 33.3333333333%; } .small-medium--push-five-twelfths { left: 41.6666666667%; } .small-medium--push-six-twelfths { left: 50%; } .small-medium--push-seven-twelfths { left: 58.3333333333%; } .small-medium--push-eight-twelfths { left: 66.6666666667%; } .small-medium--push-nine-twelfths { left: 75%; } .small-medium--push-ten-twelfths { left: 83.3333333333%; } .small-medium--push-eleven-twelfths { left: 91.6666666667%; } } @media only screen and (min-width: 768px) and (max-width: 989px) { .medium--push-one-half { left: 50%; } .medium--push-one-third { left: 33.3333333333%; } .medium--push-two-thirds { left: 66.6666666667%; } .medium--push-one-quarter { left: 25%; } .medium--push-two-quarters { left: 50%; } .medium--push-three-quarters { left: 75%; } .medium--push-one-fifth { left: 20%; } .medium--push-two-fifths { left: 40%; } .medium--push-three-fifths { left: 60%; } .medium--push-four-fifths { left: 80%; } .medium--push-one-sixth { left: 16.6666666667%; } .medium--push-two-sixths { left: 33.3333333333%; } .medium--push-three-sixths { left: 50%; } .medium--push-four-sixths { left: 66.6666666667%; } .medium--push-five-sixths { left: 83.3333333333%; } .medium--push-one-eighth { left: 12.5%; } .medium--push-two-eighths { left: 25%; } .medium--push-three-eighths { left: 37.5%; } .medium--push-four-eighths { left: 50%; } .medium--push-five-eighths { left: 62.5%; } .medium--push-six-eighths { left: 75%; } .medium--push-seven-eighths { left: 87.5%; } .medium--push-one-tenth { left: 10%; } .medium--push-two-tenths { left: 20%; } .medium--push-three-tenths { left: 30%; } .medium--push-four-tenths { left: 40%; } .medium--push-five-tenths { left: 50%; } .medium--push-six-tenths { left: 60%; } .medium--push-seven-tenths { left: 70%; } .medium--push-eight-tenths { left: 80%; } .medium--push-nine-tenths { left: 90%; } .medium--push-one-twelfth { left: 8.3333333333%; } .medium--push-two-twelfths { left: 16.6666666667%; } .medium--push-three-twelfths { left: 25%; } .medium--push-four-twelfths { left: 33.3333333333%; } .medium--push-five-twelfths { left: 41.6666666667%; } .medium--push-six-twelfths { left: 50%; } .medium--push-seven-twelfths { left: 58.3333333333%; } .medium--push-eight-twelfths { left: 66.6666666667%; } .medium--push-nine-twelfths { left: 75%; } .medium--push-ten-twelfths { left: 83.3333333333%; } .medium--push-eleven-twelfths { left: 91.6666666667%; } } @media only screen and (min-width: 768px) { .medium-up--push-one-half { left: 50%; } .medium-up--push-one-third { left: 33.3333333333%; } .medium-up--push-two-thirds { left: 66.6666666667%; } .medium-up--push-one-quarter { left: 25%; } .medium-up--push-two-quarters { left: 50%; } .medium-up--push-three-quarters { left: 75%; } .medium-up--push-one-fifth { left: 20%; } .medium-up--push-two-fifths { left: 40%; } .medium-up--push-three-fifths { left: 60%; } .medium-up--push-four-fifths { left: 80%; } .medium-up--push-one-sixth { left: 16.6666666667%; } .medium-up--push-two-sixths { left: 33.3333333333%; } .medium-up--push-three-sixths { left: 50%; } .medium-up--push-four-sixths { left: 66.6666666667%; } .medium-up--push-five-sixths { left: 83.3333333333%; } .medium-up--push-one-eighth { left: 12.5%; } .medium-up--push-two-eighths { left: 25%; } .medium-up--push-three-eighths { left: 37.5%; } .medium-up--push-four-eighths { left: 50%; } .medium-up--push-five-eighths { left: 62.5%; } .medium-up--push-six-eighths { left: 75%; } .medium-up--push-seven-eighths { left: 87.5%; } .medium-up--push-one-tenth { left: 10%; } .medium-up--push-two-tenths { left: 20%; } .medium-up--push-three-tenths { left: 30%; } .medium-up--push-four-tenths { left: 40%; } .medium-up--push-five-tenths { left: 50%; } .medium-up--push-six-tenths { left: 60%; } .medium-up--push-seven-tenths { left: 70%; } .medium-up--push-eight-tenths { left: 80%; } .medium-up--push-nine-tenths { left: 90%; } .medium-up--push-one-twelfth { left: 8.3333333333%; } .medium-up--push-two-twelfths { left: 16.6666666667%; } .medium-up--push-three-twelfths { left: 25%; } .medium-up--push-four-twelfths { left: 33.3333333333%; } .medium-up--push-five-twelfths { left: 41.6666666667%; } .medium-up--push-six-twelfths { left: 50%; } .medium-up--push-seven-twelfths { left: 58.3333333333%; } .medium-up--push-eight-twelfths { left: 66.6666666667%; } .medium-up--push-nine-twelfths { left: 75%; } .medium-up--push-ten-twelfths { left: 83.3333333333%; } .medium-up--push-eleven-twelfths { left: 91.6666666667%; } } @media only screen and (max-width: 989px) { .medium-down--push-one-half { left: 50%; } .medium-down--push-one-third { left: 33.3333333333%; } .medium-down--push-two-thirds { left: 66.6666666667%; } .medium-down--push-one-quarter { left: 25%; } .medium-down--push-two-quarters { left: 50%; } .medium-down--push-three-quarters { left: 75%; } .medium-down--push-one-fifth { left: 20%; } .medium-down--push-two-fifths { left: 40%; } .medium-down--push-three-fifths { left: 60%; } .medium-down--push-four-fifths { left: 80%; } .medium-down--push-one-sixth { left: 16.6666666667%; } .medium-down--push-two-sixths { left: 33.3333333333%; } .medium-down--push-three-sixths { left: 50%; } .medium-down--push-four-sixths { left: 66.6666666667%; } .medium-down--push-five-sixths { left: 83.3333333333%; } .medium-down--push-one-eighth { left: 12.5%; } .medium-down--push-two-eighths { left: 25%; } .medium-down--push-three-eighths { left: 37.5%; } .medium-down--push-four-eighths { left: 50%; } .medium-down--push-five-eighths { left: 62.5%; } .medium-down--push-six-eighths { left: 75%; } .medium-down--push-seven-eighths { left: 87.5%; } .medium-down--push-one-tenth { left: 10%; } .medium-down--push-two-tenths { left: 20%; } .medium-down--push-three-tenths { left: 30%; } .medium-down--push-four-tenths { left: 40%; } .medium-down--push-five-tenths { left: 50%; } .medium-down--push-six-tenths { left: 60%; } .medium-down--push-seven-tenths { left: 70%; } .medium-down--push-eight-tenths { left: 80%; } .medium-down--push-nine-tenths { left: 90%; } .medium-down--push-one-twelfth { left: 8.3333333333%; } .medium-down--push-two-twelfths { left: 16.6666666667%; } .medium-down--push-three-twelfths { left: 25%; } .medium-down--push-four-twelfths { left: 33.3333333333%; } .medium-down--push-five-twelfths { left: 41.6666666667%; } .medium-down--push-six-twelfths { left: 50%; } .medium-down--push-seven-twelfths { left: 58.3333333333%; } .medium-down--push-eight-twelfths { left: 66.6666666667%; } .medium-down--push-nine-twelfths { left: 75%; } .medium-down--push-ten-twelfths { left: 83.3333333333%; } .medium-down--push-eleven-twelfths { left: 91.6666666667%; } } @media only screen and (min-width: 768px) and (max-width: 1399px) { .medium-large--push-one-half { left: 50%; } .medium-large--push-one-third { left: 33.3333333333%; } .medium-large--push-two-thirds { left: 66.6666666667%; } .medium-large--push-one-quarter { left: 25%; } .medium-large--push-two-quarters { left: 50%; } .medium-large--push-three-quarters { left: 75%; } .medium-large--push-one-fifth { left: 20%; } .medium-large--push-two-fifths { left: 40%; } .medium-large--push-three-fifths { left: 60%; } .medium-large--push-four-fifths { left: 80%; } .medium-large--push-one-sixth { left: 16.6666666667%; } .medium-large--push-two-sixths { left: 33.3333333333%; } .medium-large--push-three-sixths { left: 50%; } .medium-large--push-four-sixths { left: 66.6666666667%; } .medium-large--push-five-sixths { left: 83.3333333333%; } .medium-large--push-one-eighth { left: 12.5%; } .medium-large--push-two-eighths { left: 25%; } .medium-large--push-three-eighths { left: 37.5%; } .medium-large--push-four-eighths { left: 50%; } .medium-large--push-five-eighths { left: 62.5%; } .medium-large--push-six-eighths { left: 75%; } .medium-large--push-seven-eighths { left: 87.5%; } .medium-large--push-one-tenth { left: 10%; } .medium-large--push-two-tenths { left: 20%; } .medium-large--push-three-tenths { left: 30%; } .medium-large--push-four-tenths { left: 40%; } .medium-large--push-five-tenths { left: 50%; } .medium-large--push-six-tenths { left: 60%; } .medium-large--push-seven-tenths { left: 70%; } .medium-large--push-eight-tenths { left: 80%; } .medium-large--push-nine-tenths { left: 90%; } .medium-large--push-one-twelfth { left: 8.3333333333%; } .medium-large--push-two-twelfths { left: 16.6666666667%; } .medium-large--push-three-twelfths { left: 25%; } .medium-large--push-four-twelfths { left: 33.3333333333%; } .medium-large--push-five-twelfths { left: 41.6666666667%; } .medium-large--push-six-twelfths { left: 50%; } .medium-large--push-seven-twelfths { left: 58.3333333333%; } .medium-large--push-eight-twelfths { left: 66.6666666667%; } .medium-large--push-nine-twelfths { left: 75%; } .medium-large--push-ten-twelfths { left: 83.3333333333%; } .medium-large--push-eleven-twelfths { left: 91.6666666667%; } } @media only screen and (min-width: 990px) and (max-width: 1399px) { .large--push-one-half { left: 50%; } .large--push-one-third { left: 33.3333333333%; } .large--push-two-thirds { left: 66.6666666667%; } .large--push-one-quarter { left: 25%; } .large--push-two-quarters { left: 50%; } .large--push-three-quarters { left: 75%; } .large--push-one-fifth { left: 20%; } .large--push-two-fifths { left: 40%; } .large--push-three-fifths { left: 60%; } .large--push-four-fifths { left: 80%; } .large--push-one-sixth { left: 16.6666666667%; } .large--push-two-sixths { left: 33.3333333333%; } .large--push-three-sixths { left: 50%; } .large--push-four-sixths { left: 66.6666666667%; } .large--push-five-sixths { left: 83.3333333333%; } .large--push-one-eighth { left: 12.5%; } .large--push-two-eighths { left: 25%; } .large--push-three-eighths { left: 37.5%; } .large--push-four-eighths { left: 50%; } .large--push-five-eighths { left: 62.5%; } .large--push-six-eighths { left: 75%; } .large--push-seven-eighths { left: 87.5%; } .large--push-one-tenth { left: 10%; } .large--push-two-tenths { left: 20%; } .large--push-three-tenths { left: 30%; } .large--push-four-tenths { left: 40%; } .large--push-five-tenths { left: 50%; } .large--push-six-tenths { left: 60%; } .large--push-seven-tenths { left: 70%; } .large--push-eight-tenths { left: 80%; } .large--push-nine-tenths { left: 90%; } .large--push-one-twelfth { left: 8.3333333333%; } .large--push-two-twelfths { left: 16.6666666667%; } .large--push-three-twelfths { left: 25%; } .large--push-four-twelfths { left: 33.3333333333%; } .large--push-five-twelfths { left: 41.6666666667%; } .large--push-six-twelfths { left: 50%; } .large--push-seven-twelfths { left: 58.3333333333%; } .large--push-eight-twelfths { left: 66.6666666667%; } .large--push-nine-twelfths { left: 75%; } .large--push-ten-twelfths { left: 83.3333333333%; } .large--push-eleven-twelfths { left: 91.6666666667%; } } @media only screen and (min-width: 990px) { .large-up--push-one-half { left: 50%; } .large-up--push-one-third { left: 33.3333333333%; } .large-up--push-two-thirds { left: 66.6666666667%; } .large-up--push-one-quarter { left: 25%; } .large-up--push-two-quarters { left: 50%; } .large-up--push-three-quarters { left: 75%; } .large-up--push-one-fifth { left: 20%; } .large-up--push-two-fifths { left: 40%; } .large-up--push-three-fifths { left: 60%; } .large-up--push-four-fifths { left: 80%; } .large-up--push-one-sixth { left: 16.6666666667%; } .large-up--push-two-sixths { left: 33.3333333333%; } .large-up--push-three-sixths { left: 50%; } .large-up--push-four-sixths { left: 66.6666666667%; } .large-up--push-five-sixths { left: 83.3333333333%; } .large-up--push-one-eighth { left: 12.5%; } .large-up--push-two-eighths { left: 25%; } .large-up--push-three-eighths { left: 37.5%; } .large-up--push-four-eighths { left: 50%; } .large-up--push-five-eighths { left: 62.5%; } .large-up--push-six-eighths { left: 75%; } .large-up--push-seven-eighths { left: 87.5%; } .large-up--push-one-tenth { left: 10%; } .large-up--push-two-tenths { left: 20%; } .large-up--push-three-tenths { left: 30%; } .large-up--push-four-tenths { left: 40%; } .large-up--push-five-tenths { left: 50%; } .large-up--push-six-tenths { left: 60%; } .large-up--push-seven-tenths { left: 70%; } .large-up--push-eight-tenths { left: 80%; } .large-up--push-nine-tenths { left: 90%; } .large-up--push-one-twelfth { left: 8.3333333333%; } .large-up--push-two-twelfths { left: 16.6666666667%; } .large-up--push-three-twelfths { left: 25%; } .large-up--push-four-twelfths { left: 33.3333333333%; } .large-up--push-five-twelfths { left: 41.6666666667%; } .large-up--push-six-twelfths { left: 50%; } .large-up--push-seven-twelfths { left: 58.3333333333%; } .large-up--push-eight-twelfths { left: 66.6666666667%; } .large-up--push-nine-twelfths { left: 75%; } .large-up--push-ten-twelfths { left: 83.3333333333%; } .large-up--push-eleven-twelfths { left: 91.6666666667%; } } @media only screen and (max-width: 1399px) { .large-down--push-one-half { left: 50%; } .large-down--push-one-third { left: 33.3333333333%; } .large-down--push-two-thirds { left: 66.6666666667%; } .large-down--push-one-quarter { left: 25%; } .large-down--push-two-quarters { left: 50%; } .large-down--push-three-quarters { left: 75%; } .large-down--push-one-fifth { left: 20%; } .large-down--push-two-fifths { left: 40%; } .large-down--push-three-fifths { left: 60%; } .large-down--push-four-fifths { left: 80%; } .large-down--push-one-sixth { left: 16.6666666667%; } .large-down--push-two-sixths { left: 33.3333333333%; } .large-down--push-three-sixths { left: 50%; } .large-down--push-four-sixths { left: 66.6666666667%; } .large-down--push-five-sixths { left: 83.3333333333%; } .large-down--push-one-eighth { left: 12.5%; } .large-down--push-two-eighths { left: 25%; } .large-down--push-three-eighths { left: 37.5%; } .large-down--push-four-eighths { left: 50%; } .large-down--push-five-eighths { left: 62.5%; } .large-down--push-six-eighths { left: 75%; } .large-down--push-seven-eighths { left: 87.5%; } .large-down--push-one-tenth { left: 10%; } .large-down--push-two-tenths { left: 20%; } .large-down--push-three-tenths { left: 30%; } .large-down--push-four-tenths { left: 40%; } .large-down--push-five-tenths { left: 50%; } .large-down--push-six-tenths { left: 60%; } .large-down--push-seven-tenths { left: 70%; } .large-down--push-eight-tenths { left: 80%; } .large-down--push-nine-tenths { left: 90%; } .large-down--push-one-twelfth { left: 8.3333333333%; } .large-down--push-two-twelfths { left: 16.6666666667%; } .large-down--push-three-twelfths { left: 25%; } .large-down--push-four-twelfths { left: 33.3333333333%; } .large-down--push-five-twelfths { left: 41.6666666667%; } .large-down--push-six-twelfths { left: 50%; } .large-down--push-seven-twelfths { left: 58.3333333333%; } .large-down--push-eight-twelfths { left: 66.6666666667%; } .large-down--push-nine-twelfths { left: 75%; } .large-down--push-ten-twelfths { left: 83.3333333333%; } .large-down--push-eleven-twelfths { left: 91.6666666667%; } } @media only screen and (min-width: 1400px) { .widescreen--push-one-half { left: 50%; } .widescreen--push-one-third { left: 33.3333333333%; } .widescreen--push-two-thirds { left: 66.6666666667%; } .widescreen--push-one-quarter { left: 25%; } .widescreen--push-two-quarters { left: 50%; } .widescreen--push-three-quarters { left: 75%; } .widescreen--push-one-fifth { left: 20%; } .widescreen--push-two-fifths { left: 40%; } .widescreen--push-three-fifths { left: 60%; } .widescreen--push-four-fifths { left: 80%; } .widescreen--push-one-sixth { left: 16.6666666667%; } .widescreen--push-two-sixths { left: 33.3333333333%; } .widescreen--push-three-sixths { left: 50%; } .widescreen--push-four-sixths { left: 66.6666666667%; } .widescreen--push-five-sixths { left: 83.3333333333%; } .widescreen--push-one-eighth { left: 12.5%; } .widescreen--push-two-eighths { left: 25%; } .widescreen--push-three-eighths { left: 37.5%; } .widescreen--push-four-eighths { left: 50%; } .widescreen--push-five-eighths { left: 62.5%; } .widescreen--push-six-eighths { left: 75%; } .widescreen--push-seven-eighths { left: 87.5%; } .widescreen--push-one-tenth { left: 10%; } .widescreen--push-two-tenths { left: 20%; } .widescreen--push-three-tenths { left: 30%; } .widescreen--push-four-tenths { left: 40%; } .widescreen--push-five-tenths { left: 50%; } .widescreen--push-six-tenths { left: 60%; } .widescreen--push-seven-tenths { left: 70%; } .widescreen--push-eight-tenths { left: 80%; } .widescreen--push-nine-tenths { left: 90%; } .widescreen--push-one-twelfth { left: 8.3333333333%; } .widescreen--push-two-twelfths { left: 16.6666666667%; } .widescreen--push-three-twelfths { left: 25%; } .widescreen--push-four-twelfths { left: 33.3333333333%; } .widescreen--push-five-twelfths { left: 41.6666666667%; } .widescreen--push-six-twelfths { left: 50%; } .widescreen--push-seven-twelfths { left: 58.3333333333%; } .widescreen--push-eight-twelfths { left: 66.6666666667%; } .widescreen--push-nine-twelfths { left: 75%; } .widescreen--push-ten-twelfths { left: 83.3333333333%; } .widescreen--push-eleven-twelfths { left: 91.6666666667%; } } .grid__item.clear { clear: both; } /* ============================================================================ #Typography ============================================================================== */ :root { --font-3: 12px; } @media only screen and (min-width: 990px) { :root { --font-3: 13px; } } .popout__toggle, body, button, input, select, textarea { font-size: 16px; line-height: 1.44; font-family: var(---font-stack-body); font-weight: var(---font-weight-body); color: var(--text); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } /* @media (min-width: 480px) { .popout__toggle, body, button, input, select, textarea { font-size: 18px; } } */ /* @media (min-width: 1400px) { .popout__toggle, body, button, input, select, textarea { font-size: calc(14.52678px * var(---font-adjust-body)); } } */ .uppercase { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1.3px; font-size: 13px; } .uppercase.strong, .uppercase .strong { font-weight: var(---font-weight-accent-bold); } /* ================ Title font ================ */ h1, h2, h3, h4, h5, h6 { color: var(--text-dark); font-family: var(---font-stack-heading); font-weight: var(---font-weight-heading); font-style: var(---font-style-heading); letter-spacing: var(---font-heading-space); text-transform: var(---font-heading-caps); } h1 .strong, h1 strong, h1.strong, h2 .strong, h2 strong, h2.strong, h3 .strong, h3 strong, h3.strong, h4 .strong, h4 strong, h4.strong, h5 .strong, h5 strong, h5.strong, h6 .strong, h6 strong, h6.strong { font-weight: var(---font-weight-heading-bold); } .h1, h1 { font-size: calc(31.61134px + 3.05877vw); } @media (min-width: 1400px) { .h1, h1 { font-size: calc(72 / 16 * 1rem); } } .h2, h2 { font-size: 30px; } @media (min-width: 480px) { .h2, h2 { font-size: 40px; } } /* @media (min-width: 1400px) { .h2, h2 { font-size: calc(39.26166px * var(---font-adjust-heading)); } } */ .h3, h3 { font-size: 24px; } /* @media (min-width: 480px) { .h3, h3 { font-size: 2rem; } } */ .h4, h4 { font-size: 22px; } @media (min-width: 480px) { .h4, h4 { font-size: 24px; } } .h5, h5 { font-size: 18px; } @media (min-width: 480px) { .h5, h5 { font-size: 20px; } } .h6, h6 { font-size: 16px; } @media (min-width: 480px) { .h6, h6 { font-size: 18px; } } /* ================ Body font ================ */ .h1--body, .h2--body, .h3--body, .h4--body, .h5--body, .h6--body { font-family: var(---font-stack-body); font-weight: var(---font-weight-body); font-style: var(---font-style-body); } .h1--body.strong, .h1--body .strong, .h1--body strong, .h2--body.strong, .h2--body .strong, .h2--body strong, .h3--body.strong, .h3--body .strong, .h3--body strong, .h4--body.strong, .h4--body .strong, .h4--body strong, .h5--body.strong, .h5--body .strong, .h5--body strong, .h6--body.strong, .h6--body .strong, .h6--body strong { font-weight: var(---font-weight-body-bold); } .h1--body { font-size: calc(35.48363px * var(---font-adjust-body)); } @media (min-width: 480px) { .h1--body { font-size: calc( (35.48363px + (1241.55915vw - 5959.48393px) / 920) * var(---font-adjust-body) ); } } @media (min-width: 1400px) { .h1--body { font-size: calc(47.89922px * var(---font-adjust-body)); } } .h2--body { font-size: calc(30.07087px * var(---font-adjust-body)); } @media (min-width: 480px) { .h2--body { font-size: calc( (30.07087px + (919.07841vw - 4411.57636px) / 920) * var(---font-adjust-body) ); } } @media (min-width: 1400px) { .h2--body { font-size: calc(39.26166px * var(---font-adjust-body)); } } .h3--body { font-size: calc(25.48379px * var(---font-adjust-body)); } @media (min-width: 480px) { .h3--body { font-size: calc( (25.48379px + (669.78954vw - 3214.98981px) / 920) * var(---font-adjust-body) ); } } @media (min-width: 1400px) { .h3--body { font-size: calc(32.18169px * var(---font-adjust-body)); } } .h4--body { font-size: 18px; } /* @media (min-width: 1400px) { .h4--body { font-size: calc(26.37843px * var(---font-adjust-body)); } } */ /* .h5--body { font-size: calc(18.30206px * var(---font-adjust-body)); } @media (min-width: 480px) { .h5--body { font-size: calc( (18.30206px + (331.96033vw - 1593.40956px) / 920) * var(---font-adjust-body) ); } } @media (min-width: 1400px) { .h5--body { font-size: calc(21.62167px * var(---font-adjust-body)); } } */ .h6--body { font-size: calc(15.51022px * var(---font-adjust-body)); } @media (min-width: 480px) { .h6--body { font-size: calc( (15.51022px + (221.24544vw - 1061.97811px) / 920) * var(---font-adjust-body) ); } } /* @media (min-width: 1400px) { .h6--body { font-size: calc(17.72268px * var(---font-adjust-body)); } } */ .hero__description p, .p, p { line-height: 1.44; } .small, p small, small { font-size: calc(var(--font-3) * var(---font-adjust-body)); } .xs { font-size: calc(10px * var(---font-adjust-body)); } .xxs { font-size: calc(9px * var(---font-adjust-body)); } /* ================ Body elements ================ */ h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.2; } .h1--body a, .h2--body a, .h3--body a, .h4--body a, .h5--body a, .h6--body a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none; font-weight: inherit; } .rte .h1--body, .rte .h2--body, .rte .h3--body, .rte .h4--body, .rte .h5--body, .rte .h6--body, .rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6 { margin: 0.75em 0 0; } p { margin-bottom: 0.75em; margin-top: 0; color: var(--text); } p:last-child { margin-bottom: 0; } p img { margin: 0; } .em, em { font-style: italic; } .strong, b, strong { font-weight: var(---font-weight-body-bold); } .sub, .sup, sub, sup { position: relative; font-size: calc(9px * var(---font-adjust-body)); vertical-align: initial; } .sup, sup { top: -0.5em; } .sub, sub { bottom: -0.5em; } .s, s { text-decoration: line-through; opacity: 0.5; } /* ================ Blockquotes ================ */ blockquote { font-size: calc(15.51022px * var(---font-adjust-body)); font-style: italic; margin: 0 0 32px; padding: 0 32px; border-left: 1px solid var(--border); } @media (min-width: 480px) { blockquote { font-size: calc( (15.51022px + (221.24544vw - 1061.97811px) / 920) * var(---font-adjust-body) ); } } @media (min-width: 1400px) { blockquote { font-size: calc(17.72268px * var(---font-adjust-body)); } } blockquote p { margin-bottom: 0; } blockquote p + cite { margin-top: 16px; } blockquote cite { display: block; font-size: calc(var(--font-3) * var(---font-adjust-body)); } blockquote cite:before { content: '— '; } /* ================ Code ================ */ code, pre { font-family: Consolas, monospace; font-size: 1em; border: 0; border-left: 1px solid var(--border); padding: 0 2px; } pre { overflow: auto; padding: 16px; margin: 0 0 32px; } .unicode { font-family: Lucida Sans Unicode, Arial Unicode MS\, Arial; } /* ================ Horizontal Rules ================ */ hr { clear: both; border-top: solid var(--border); border-width: 1px 0 0; margin: 32px 0; height: 0; } hr.hr--perceptual { margin: 27px 0 32px; } hr.hr--small { margin: 16px 0; } hr.hr--double { margin: 64px 0; } hr.hr--clear { border-top-color: transparent; } hr.hr--dash { margin: 32px auto; width: 80px; } hr.hr--thick { border-width: 2px 0 0; } hr.hr--underline { margin-top: 10px; margin-bottom: 20px; } /* ================ Line Breaks ================ */ br.break { display: block; line-height: 0; } br.no-break { display: none; } @media only screen and (min-width: 480px) { br.break-sm { display: block; } br.no-break-sm { display: none; } } @media only screen and (min-width: 768px) { br.break-md { display: block; } br.no-break-md { display: none; } } @media only screen and (min-width: 990px) { br.break-lg { display: block; } br.no-break-lg { display: none; } } /* ============================================================================ #Lists ============================================================================== */ ol, ul { margin: 0 0 32px; padding: 0; } ul { list-style: none outside; } ol { list-style: decimal; } ol ol, ol ul, ul ol, ul ul { margin: 4px 0 5px 20px; } li { margin-bottom: 0.25em; } ol, ul.disc, ul.square { margin-left: 20px; } ul.square { list-style: square outside; } ul.disc { list-style: disc outside; } ol.alpha { list-style: lower-alpha outside; } .inline-list li { display: inline-block; margin-bottom: 0; } /* ============================================================================ #Basic Styles ============================================================================== */ :root { --gutter: 32px; --inner: 20px; --outer: 32px; --wide: 50px; --gutter-offset: -32px; --radius-sm: 3px; --line: 1rem; --content-margin: 24px; } @media only screen and (min-width: 768px) and (max-width: 989px) { :root { --inner: 18px; --outer: 22px; --gutter: 22px; --wide: 40px; --gutter-offset: -22px; } } @media only screen and (max-width: 767px) { :root { --inner: 16px; --gutter: 16px; --outer: 16px; --wide: 30px; --gutter-offset: -16px; --line: 0.66rem; } } /* REM baseline, used for padding, not typography */ html { font-size: 16px; scroll-behavior: smooth; --scroll-behavior: smooth; } [tabindex='-1']:focus { outline: none; } .wrapper, .wrapper .grandparent .header__dropdown__wrapper { *zoom: 1; max-width: 1180px; margin: 0 auto; padding: 0 var(--outer); width: 100%; } .wrapper .grandparent .header__dropdown__wrapper:after, .wrapper:after { content: ''; display: table; clear: both; } .wrapper--full, .wrapper--full .grandparent .header__dropdown__wrapper { *zoom: 1; max-width: none; margin: 0 auto; padding: 0 var(--outer); width: 100%; } .wrapper--full .grandparent .header__dropdown__wrapper:after, .wrapper--full:after { content: ''; display: table; clear: both; } .wrapper--narrow { *zoom: 1; margin: 0 auto; padding: 0 var(--outer); width: 100%; max-width: 50%; } .wrapper--narrow:after { content: ''; display: table; clear: both; } @media only screen and (max-width: 989px) { .wrapper--narrow { max-width: 66%; } } @media only screen and (max-width: 767px) { .wrapper--narrow { max-width: 100%; } } .wrapper.half-padding { padding: 0 calc(var(--outer) / 2); } .main-content { display: block; min-height: var(--content-min); } .main-content .shopify-section:last-child .brick__section, .main-content .shopify-section:last-child .frame, .main-content .shopify-section:last-child .margin--large, .main-content .shopify-section:last-child .margin--medium, .main-content .shopify-section:last-child .margin--small, .main-content .shopify-section:last-child .margin--zero, .template-customers-account .main-content, .template-customers-addresses .main-content, .template-customers-order .main-content { padding-bottom: 64px; } .main-content .shopify-section:last-child .brick__section { padding-bottom: 64px; margin-bottom: 0; } /* ============================================================================ Icons ============================================================================== */ .icon { display: inline-block; width: 18px; height: 18px; vertical-align: middle; fill: currentColor; } .no-svg .icon { display: none; } .showMobile .icon { width: 15px; height: 15px; } .mobile-wrapper .icon { width: 25px; height: 25px; } /* ============================================================================ #Rich Text Editor ============================================================================== */ .rte:not(.rte--column) { font-size: 1rem; } /* @media (min-width: 480px) { .rte:not(.rte--column) { font-size: calc( (15.51022px + (221.24544vw - 1061.97811px) / 920) * var(---font-adjust-body) ); } } */ /* @media (min-width: 1400px) { .rte:not(.rte--column) { font-size: calc(17.72268px * var(---font-adjust-body)); } } */ .rte:not(.rte--column) p { font-size: 1rem; } /* @media (min-width: 480px) { .rte:not(.rte--column) p { font-size: calc( (15.51022px + (221.24544vw - 1061.97811px) / 920) * var(---font-adjust-body) ); } } @media (min-width: 1400px) { .rte:not(.rte--column) p { font-size: calc(17.72268px * var(---font-adjust-body)); } } */ .rte { margin-bottom: 16px; /* Add some top margin to headers from the rich text editor */ word-wrap: break-word; } .rte h1:first-child, .rte h2:first-child, .rte h3:first-child, .rte h4:first-child, .rte h5:first-child, .rte h6:first-child { margin-top: 0; } .rte > div { margin-bottom: 16px; } .rte ol, .rte ul { margin-left: 20px; } .rte ul { list-style: disc outside; } .rte ol ul, .rte ul ul { list-style-type: circle; } .rte ol ol ul, .rte ol ul ul, .rte ul ol ul, .rte ul ul ul { list-style-type: square; } .rte li { text-align: left; margin-bottom: 0.4em; } .rte img { max-width: 100%; height: auto; } .rte img[style*='float:left'], .rte img[style*='float: left'] { margin-right: 16px; } .rte img[style*='float:right'], .rte img[style*='float: right'] { margin-left: 16px; } .rte a:not([class]) { text-decoration: underline; } .rte--header { margin-bottom: 0; } .rte__table-wrapper { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } .columns { column-gap: 48px; column-count: 2; } /* ============================================================================ #Tables ============================================================================== */ table { width: 100%; border-collapse: collapse; border-spacing: 0; } table.full { width: 100%; margin-bottom: var(--outer); } .table-wrap { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } th { color: var(---color-primary); font-weight: var(---font-weight-body-bold); } td, th { border-bottom: 1px solid var(--border); } td, th { text-align: left; padding: var(--inner); } th { padding: 0 var(--inner) var(--inner); } td:first-child, th:first-child { padding-left: 0; } td:last-child, th:last-child { padding-right: 0; } .table--responsive tbody { border-top: 1px solid var(--border); } .table--responsive tbody td:not(:first-child) { border-top: 1px solid var(--hairline); } .table--responsive tfoot { border-top: 1px solid var(--border); border-bottom: 2px solid var(--border); } @media only screen and (max-width: 767px) { .table--responsive thead { display: none; } .table--responsive tr { display: block; } .table--responsive td, .table--responsive tr { float: left; clear: both; width: 100%; border-bottom: none; } .table--responsive td, .table--responsive th { border: none; display: block; text-align: right; padding: 10px 0; } .table--responsive td:before { content: attr(data-label); color: var(---color-primary); float: left; font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent-bold); font-style: var(---font-style-accent); font-size: 1rem; padding-right: 10px; } .table--responsive td:before.strong, .table--responsive td:before .strong { font-weight: var(---font-weight-accent-bold); } } @media only screen and (max-width: 767px) { .table--small-hide { display: none !important; } .table__section + .table__section { position: relative; margin-top: 10px; padding-top: 15px; } .table__section + .table__section:after { content: ''; display: block; position: absolute; top: 0; left: 15px; right: 15px; border-bottom: 1px solid var(--border); } } @media only screen and (min-width: 768px) { .table--responsive tbody tr:last-child td { border: 0; padding-bottom: 0; } } /* ============================================================================ #Links and Buttons three button styles: standard - full color - darkens on hover outline - turns to full color on hover soft - turns to full color on hover Color modifiers Starts as secondary accent color modifier for primary color modifier for text color modifier for contrast (full white or full black) dark modifier doubles color mods style modifiers 100% width small large border-radius-0 watches outer wrapper for dark/light ============================================================================== */ .btn, .btn--soft, .btn--outline, .btn--long { display: inline-block; padding: 0.75rem 1.5rem; margin: 0; line-height: 1.625; text-decoration: none; text-align: center; vertical-align: middle; border: none; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; border-radius: var(---button-radius); font-size: 1rem; background-color: var(--btn-bg); color: var(--btn-text); transition: background-color 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .btn--soft:active, .btn--soft:focus, .btn--soft:hover, .btn:active, .btn:focus, .btn:hover { color: var(--btn-text-hover); background-color: var(--btn-bg-hover); } .btn { --btn-bg: var(--text); --btn-text: var(--bg); --btn-bg-hover: var(--hover); --btn-text-hover: var(--bg); } .btn--neutral.btn { --btn-bg: var(---color-text); --btn-text: var(---color-bg); --btn-bg-hover: var(---color-a95); --btn-text-hover: var(---color-bg); } .btn--invert.btn { --btn-bg: var(---inverse-text); --btn-text: var(---inverse-bg); --btn-bg-hover: var(---inverse-a95); --btn-text-hover: var(---inverse-bg); } .btn--black.btn { --btn-bg: #000; --btn-text: #fff; --btn-bg-hover: #000; --btn-text-hover: #f7f7f7; } .btn--primary.btn, .btn.shopify-challenge__button { --btn-bg: var(---color-primary); --btn-text: var(---color-primary-opposite); --btn-bg-hover: var(---color-primary-hover); --btn-text-hover: var(---color-primary-opposite); } .btn--secondary.btn { --btn-bg: var(---color-secondary); --btn-text: var(---color-secondary-opposite); --btn-bg-hover: var(---color-secondary-hover); --btn-text-hover: var(---color-secondary-opposite); } .btn--white.btn { --btn-bg: #fff; --btn-text: var(---color-primary); --btn-bg-hover: #fff; --btn-text-hover: var(---color-primary-hover); } .btn--invert--primary.btn { --btn-bg: var(---inverse-primary); --btn-text: var(---inverse-primary-opposite); --btn-bg-hover: var(---inverse-primary-hover); --btn-text-hover: var(---inverse-primary-opposite); } .btn--invert--secondary.btn { --btn-bg: var(---inverse-secondary); --btn-text: var(---inverse-secondary-opposite); --btn-bg-hover: var(---inverse-secondary-hover); --btn-text-hover: var(---inverse-secondary-opposite); } .btn--soft { --btn-bg: var(--hairline); --btn-text: var(--text); --btn-bg-hover: var(--hairline-hover); --btn-text-hover: var(--text); } .btn--neutral.btn--soft { --btn-bg: var(---color-a5); --btn-text: var(---color-text); --btn-bg-hover: var(---color-a10); --btn-text-hover: var(---color-text); } .btn--invert.btn--soft { --btn-bg: var(---inverse-a5); --btn-text: var(---inverse-text); --btn-bg-hover: var(---inverse-a10); --btn-text-hover: var(---inverse-text); } .btn--black.btn--soft { --btn-bg: rgba(0, 0, 0, 0.05); --btn-text: #000; --btn-bg-hover: rgba(0, 0, 0, 0.1); --btn-text-hover: #000; } .btn--primary.btn--soft, .btn--soft.shopify-challenge__button { --btn-bg: var(---color-primary-fade); --btn-text: var(---color-primary); --btn-bg-hover: var(---color-primary-fade-hover); --btn-text-hover: var(---color-primary); } .btn--secondary.btn--soft { --btn-bg: var(---color-secondary-fade); --btn-text: var(---color-secondary); --btn-bg-hover: var(---color-secondary-fade-hover); --btn-text-hover: var(---color-secondary); } .btn--white.btn--soft { --btn-bg: hsla(0, 0%, 100%, 0.05); --btn-text: #fff; --btn-bg: hsla(0, 0%, 100%, 0.1); --btn-text-hover: #fff; } .btn--invert--primary.btn--soft { --btn-bg: var(---inverse-primary-fade); --btn-text: var(---inverse-primary); --btn-bg-hover: var(---inverse-primary-fade-hover); --btn-text-hover: var(---inverse-primary); } .btn--invert--secondary.btn--soft { --btn-bg: var(---inverse-secondary-fade); --btn-text: var(---inverse-secondary); --btn-bg-hover: var(---inverse-secondary-fade-hover); --btn-text-hover: var(---inverse-secondary); } .btn--outline { --btn-bg: $transparent; background-color: hsla(0, 0%, 100%, 0); transition: background-color 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); border: 2px solid var(--btn-text); } .btn--outline:active, .btn--outline:focus, .btn--outline:hover { background-color: var(--btn-bg-hover); border: 2px solid var(--btn-text); color: var(--btn-text); } .btn--outline { --btn-text: var(--text-dark); --btn-bg-hover: var(--hairline); } .btn--neutral.btn--outline { --btn-text: var(---color-text); --btn-bg-hover: var(---color-a5); } .btn--invert.btn--outline { --btn-text: var(---inverse-text); --btn-bg-hover: var(---inverse-a5); } .btn--black.btn--outline { --btn-text: #000; --btn-bg-hover: rgba(0, 0, 0, 0.1); } .btn--outline.shopify-challenge__button, .btn--primary.btn--outline { --btn-text: var(---color-primary); --btn-bg-hover: var(---color-primary-fade); } .btn--secondary.btn--outline { --btn-text: var(---color-secondary); --btn-bg-hover: var(---color-secondary-fade); } .btn--white.btn--outline { --btn-text: #fff; --btn-bg-hover: hsla(0, 0%, 100%, 0.1); } .btn--invert--primary.btn--outline { --btn-text: var(---inverse-primary); --btn-bg-hover: var(---inverse-primary-fade); } .btn--invert--secondary.btn--outline { --btn-text: var(---inverse-secondary); --btn-bg-hover: var(---inverse-secondary-fade); } /* ============================================================================ .btn{ @include soft-button(var(---color-secondary)); @include accent-bold; @include font-size-a3; } ============================================================================== */ [class*='btn'].uppercase { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; } [class*='btn'].uppercase, [class*='btn'].uppercase.strong, [class*='btn'].uppercase .strong { font-weight: var(---font-weight-accent-bold); } .btn--small { padding: 0.6rem; } .btn--small.uppercase, .btn--small .uppercase { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-weight: var(---font-weight-accent-bold); } .btn--small.uppercase.strong, .btn--small .uppercase.strong, .btn--small.uppercase .strong, .btn--small .uppercase .strong { font-weight: var(---font-weight-accent-bold); } .btn--large.uppercase, .btn--large .uppercase, .btn--long .uppercase, .uppercase.btn--long { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-weight: var(---font-weight-accent-bold); } .btn--large.uppercase.strong, .btn--large .uppercase.strong, .btn--large.uppercase .strong, .btn--large .uppercase .strong, .btn--long .uppercase.strong, .btn--long .uppercase .strong, .uppercase.btn--long .strong, .uppercase.strong.btn--long { font-weight: var(---font-weight-accent-bold); } .btn--long { min-width: 300px; } .btn--full { width: 100%; } .btn--square { border-radius: 0 !important; } [class*='btn'].disabled, [class*='btn'][disabled] { cursor: not-allowed; opacity: 0.4; } [class*='btn'].disabled:before, [class*='btn'][disabled]:before { content: none; } button.underline { text-decoration: underline; } /* ajax buttons */ [data-add-to-cart] { position: relative; } [data-add-to-cart].has-success .btn-state-ready, [data-add-to-cart].loading .btn-state-ready { color: transparent; pointer-events: none; } .btn-state-loading { visibility: hidden; position: absolute; top: 50%; left: 50%; z-index: 2; opacity: 0; transform: translate(-50%, -50%); transition: opacity 0.2s, visibility 0.2s; } .loading .btn-state-loading { visibility: visible; opacity: 1; } .btn-state-complete { visibility: hidden; position: absolute; top: 50%; left: 50%; width: 14px; height: 8px; border-left: 1px solid var(--primary); border-bottom: 1px solid var(--primary); margin-top: -2px; transform: translate(-50%, -50%) rotate(-45deg); opacity: 0; transition: opacity 0.2s, visibility 0.2s; } .has-success .btn-state-complete { visibility: visible; opacity: 1; } .is--display-price-in-btn .btn-state-ready { display: flex; justify-content: space-between; } .discount-bubble { position: absolute; top: -10px; right: 20px; text-align: center; z-index: 1; border-radius: 10px; width: 75px; background-color: #e9e3db; color: #ee7019; font-size: 8px; padding: 0px 12px; font-weight: bold; display: -ms-grid; display: grid; -ms-flex-line-pack: center; align-content: center; height: 20px; width: 88px; font-size: 12px; } /* Shopify Quick Pay Buttons */ .shopify-product-form { /* max-width: 400px; margin: 0 auto; */ width: 100%; } .variant--soldout .shopify-payment-button, .variant--unavailable .shopify-payment-button { opacity: 0; } .shopify-payment-button .shopify-payment-button__button--unbranded { --btn-bg: var(---color-primary); --btn-text: var(---color-primary-opposite); --btn-bg-hover: var(---color-primary-hover); --btn-text-hover: var(---color-primary-opposite); display: inline-block; padding: 0.8rem 1.6rem; margin: 0; line-height: 1; text-decoration: none; text-align: center; vertical-align: middle; border: none; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; border-radius: var(---button-radius); font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); letter-spacing: 1px; font-weight: var(---font-weight-accent-bold); font-size: 1rem; background-color: var(--btn-bg); color: var(--btn-text); } .shopify-payment-button .shopify-payment-button__button--unbranded.strong, .shopify-payment-button .shopify-payment-button__button--unbranded .strong { font-weight: var(---font-weight-accent-bold); } .shopify-payment-button .shopify-payment-button__button--unbranded:active, .shopify-payment-button .shopify-payment-button__button--unbranded:focus, .shopify-payment-button .shopify-payment-button__button--unbranded:hover, .shopify-payment-button .shopify-payment-button__button--unbranded:hover:not([disabled]) { color: var(--btn-text-hover); background-color: var(--btn-bg); } .btn--add-to-cart { min-height: 54px; } .shopify-payment-button .shopify-payment-button__button { margin-top: 15px; border-radius: var(---button-radius); min-height: 54px; overflow: hidden; } .shopify-payment-button .shopify-payment-button__more-options:active { text-decoration: underline; outline: none; transform: translateY(1px); } /* Green PDP Buttons */ .product-page .btn--add-to-cart { background-color: #55af75 !important; } .product-page .btn--add-to-cart:hover { background-color: #189b46 !important; } /* ============================================================================ #Text links ============================================================================== */ .text-link, a { text-decoration: none; background: transparent; } .text-link, .text-link:focus, .text-link:hover, a, a:focus, a:hover { color: currentColor; } .text-link { white-space: nowrap; } /* links that line up with buttons */ .btn--link { display: inline-block; padding: 0.8rem 1.6rem; margin: 0; line-height: 1; text-decoration: underline; text-align: center; vertical-align: middle; border: none; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; border-radius: var(---button-radius); background-color: hsla(0, 0%, 100%, 0); color: var(--text-dark); font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); font-size: 1rem; } .btn--link:active, .btn--link:focus, .btn--link:hover { background-color: hsla(0, 0%, 100%, 0); color: var(--text-dark); } .btn--link.strong, .btn--link .strong { font-weight: var(---font-weight-accent-bold); } .btn--link span { position: relative; text-decoration: none; } .btn--link span:after { content: ''; right: 0; position: absolute; bottom: -1px; height: 1px; background: currentColor; opacity: 0.25; transition: width 0.2s ease; left: 0; width: 0; } .btn--link span:hover:after { width: 100%; } .btn--link span:after { bottom: -4px; height: 3px; } /* ================ Force an input/button to look like a text link ================ */ .expanding-line { position: relative; text-decoration: none; } .expanding-line:after { content: ''; right: 0; position: absolute; bottom: -1px; height: 1px; background: currentColor; opacity: 0.25; transition: width 0.2s ease; left: 0; width: 0; } .expanding-line:hover:after { width: 100%; } .retracting-line, .text-link { position: relative; text-decoration: none; } .retracting-line:after, .text-link:after { content: ''; right: 0; position: absolute; bottom: -1px; height: 1px; background: currentColor; opacity: 0.25; transition: width 0.2s ease; width: 100%; } .retracting-line:hover:after, .text-link:hover:after { width: 0; } button.text-link, input.text-link { border-radius: 0; color: var(--text); display: inline; border: 0; background: none; padding: 0; margin: 0; overflow: visible; } button.text-link:active, button.text-link:focus, button.text-link:hover, input.text-link:active, input.text-link:focus, input.text-link:hover { border-radius: 0; color: var(--text-dark); display: inline; border: 0; background: none; padding: 0; margin: 0; } .btn + .text-link, button + .text-link { margin-left: 15px !important; } .text-link.uppercase { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: 1rem; position: relative; text-decoration: none; } .text-link.uppercase, .text-link.uppercase.strong, .text-link.uppercase .strong { font-weight: var(---font-weight-accent-bold); } .text-link.uppercase:after { content: ''; right: 0; position: absolute; bottom: -1px; height: 1px; background: currentColor; opacity: 0.25; transition: width 0.2s ease; left: 0; width: 0; } .text-link.uppercase:hover:after { width: 100%; } .text-link.uppercase:after { bottom: -4px; height: 3px; } .caps--link { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(13.14426px * var(---font-adjust-accent)); position: relative; text-decoration: none; } .caps--link, .caps--link.strong, .caps--link .strong { font-weight: var(---font-weight-accent-bold); } .caps--link:after { content: ''; right: 0; position: absolute; bottom: -1px; height: 1px; background: currentColor; opacity: 0.25; transition: width 0.2s ease; left: 0; width: 0; } .caps--link:hover:after { width: 100%; } .caps--link:after { bottom: -6px; height: 3px; } .caps--link.btn--neutral { color: var(--text-light); } .caps--link.btn--primary, .caps--link.shopify-challenge__button { color: var(--primary); } .caps--link.btn--secondary { color: var(--secondary); } .caps--link.btn--black { color: #000; } .caps--link.btn--white { color: #fff; } /* ============================================================================ #Badges ============================================================================== */ .badge { display: inline-block; padding: 0.33em 0.5em; line-height: 1; text-align: center; white-space: nowrap; vertical-align: initial; border-radius: var(--radius-sm); font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(10px * var(---font-adjust-accent)); background-color: var(--hairline); color: var(--text); } .badge, .badge.strong, .badge .strong { font-weight: var(---font-weight-accent-bold); } .modal__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .modal__overlay.modal__overlay--bright { background: var(---color-primary); } .modal__container--small { background-color: var(--bg); max-width: 95vw; max-height: 90vh; overflow-y: auto; box-sizing: border-box; } .modal__container--inline { padding: 30px; } .modal__container--inline, .modal__container--xl { background: var(--bg); max-width: 95vw; max-height: 90vh; overflow-y: auto; overflow-x: auto; } .modal__container--xl { padding: 90px; } @media only screen and (max-width: 767px) { .modal__container--xl { padding: 30px; } } .modal__container--video { padding: 90px; width: 100%; max-height: 90vh; overflow-y: auto; overflow-x: auto; } @media only screen and (max-width: 767px) { .modal__container--video { padding: 10px; } } .modal__header { display: flex; justify-content: space-between; align-items: center; } .modal__close { position: fixed; z-index: 100; top: 5px; right: 5px; width: 50px; height: 50px; border: 0; border-radius: 100%; background-color: transparent; color: #fff; font-size: 20px; cursor: pointer; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2); font-weight: 700; transition: background-color 0.5s ease, color 0.2s ease; } .modal__close:before { content: '✕'; } .modal__close:focus, .modal__close:hover { outline: none; } .modal__content { margin-top: 2rem; margin-bottom: 2rem; line-height: 1.5; color: rgba(0, 0, 0, 0.8); } /************************** \ Demo Animation Style \ **************************/ @keyframes mmfadeIn { 0% { opacity: 0; } to { opacity: 1; } } @keyframes mmfadeOut { 0% { opacity: 1; } to { opacity: 0; } } @keyframes mmslideIn { 0% { transform: translateY(15%); } to { transform: translateY(0); } } @keyframes mmslideOut { 0% { transform: translateY(0); } to { transform: translateY(-10%); } } .micromodal-slide { display: none; } .micromodal-slide.is-open { position: absolute; z-index: 10000; display: block; } .micromodal-slide[aria-hidden='false'] .modal__overlay { animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1); } .micromodal-slide[aria-hidden='false'] .modal__container { animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1); } .micromodal-slide[aria-hidden='true'] .modal__overlay { animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1); } .micromodal-slide[aria-hidden='true'] .modal__container { animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1); } .micromodal-slide .modal__container, .micromodal-slide .modal__overlay { will-change: transform; } .modal__container--zoom { overflow-y: scroll; height: 100%; padding: 50px 0 0; } .zoom--images { width: 100vw; } .zoom__img { display: block; padding: 5px; width: 100%; max-width: 1480px; margin: 0 auto; } /* ============================================================================ #Forms ============================================================================== */ form { margin-bottom: 32px; } @media only screen and (max-width: 767px) { .popout__toggle, input, select, textarea { font-size: 16px; } } .quantity__wrapper input, button, input[type='email'], input[type='file'], input[type='number'], input[type='password'], input[type='search'], input[type='submit'], input[type='tel'], input[type='text'], input[type='url'], textarea { -webkit-appearance: none; -moz-appearance: none; } input[type='number'] { -moz-appearance: textfield; } .popout__toggle, fieldset, input, select, textarea { border-radius: var(--radius-sm); max-width: 100%; } .input-full.popout__toggle, fieldset.input-full, input.input-full, select.input-full, textarea.input-full { width: 100%; } html:not(.no-js) input[type='number']::-webkit-inner-spin-button, html:not(.no-js) input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .popout__toggle, input, select, textarea { padding: 15px; line-height: 1.42; } fieldset { border: 0; padding: 0.01em 0 0; margin: 0; min-width: 0; } legend { border: 0; padding: 0; } optgroup { font-weight: var(---font-weight-body-bold); } input { display: inline-block; width: auto; } button, input[type='submit'] { cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } button { background-color: initial; overflow: visible; border: none; } button[disabled], html input[disabled] { cursor: default; } .hidden-label { clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); overflow: hidden; position: absolute; height: 1px; width: 1px; } /* ================ Input width and border ================ */ .popout__toggle, input[type='email'], input[type='file'], input[type='number'], input[type='password'], input[type='search'], input[type='tel'], input[type='text'], input[type='url'], select, textarea { border: 1px solid var(--border); width: 100%; max-width: 100%; display: block; margin: 0 0 1em; background-color: white; outline: none; color: var(--text-dark); } .popout__toggle:focus, input[type='email']:focus, input[type='file']:focus, input[type='number']:focus, input[type='password']:focus, input[type='search']:focus, input[type='tel']:focus, input[type='text']:focus, input[type='url']:focus, select:focus, textarea:focus { bottom: 1px solid var(--text-dark); box-shadow: 0 1px 5px var(--hairline); } .disabled.popout__toggle, [disabled].popout__toggle, input[type='email'].disabled, input[type='email'][disabled], input[type='file'].disabled, input[type='file'][disabled], input[type='number'].disabled, input[type='number'][disabled], input[type='password'].disabled, input[type='password'][disabled], input[type='search'].disabled, input[type='search'][disabled], input[type='tel'].disabled, input[type='tel'][disabled], input[type='text'].disabled, input[type='text'][disabled], input[type='url'].disabled, input[type='url'][disabled], select.disabled, select[disabled], textarea.disabled, textarea[disabled] { cursor: default; background-color: var(--muted); border-color: var(--text-light); } textarea { min-height: 100px; } input[type='checkbox'], input[type='radio'] { display: inline; margin: 0; padding: 0; } input[type='checkbox'] + label, input[type='radio'] + label { display: inline-block; margin-left: 5px; } .popout__toggle, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-position: 100%; background-image: var(---ico-select); background-repeat: no-repeat; background-position: right 10px center; background-color: white; padding-right: 28px; text-indent: 0.01px; text-overflow: ''; cursor: pointer; } /* Force option color (affects IE only) */ option { color: #000; background-color: #fff; } .popout__toggle::-ms-expand, select::-ms-expand { display: none; } /* ================ Form labels ================ */ label, legend { display: block; } label.inline, legend.inline { display: inline; } .form-horizontal label.label--hidden, .form-horizontal legend.label--hidden, label.label--hidden, legend.label--hidden { height: 0; width: 0; margin-bottom: 0; overflow: hidden; } /* ================ Address and non-float forms ================ */ .form--standard label, .form--standard legend { display: block; margin-bottom: 2px; } .contact__block { margin: 20px 0; display: block; } .contact__check, .contact__radio { display: flex; align-items: center; } label[for] { cursor: pointer; } .label-hint { color: #999; } /* ================ Horizontal Form ================ */ .form-horizontal, form.form-horizontal { margin-bottom: 0; } .form-horizontal .popout__toggle, .form-horizontal input[type='email'], .form-horizontal input[type='file'], .form-horizontal input[type='number'], .form-horizontal input[type='password'], .form-horizontal input[type='search'], .form-horizontal input[type='tel'], .form-horizontal input[type='text'], .form-horizontal input[type='url'], .form-horizontal label, .form-horizontal select, .form-horizontal textarea, form.form-horizontal input[type='email'], form.form-horizontal input[type='file'], form.form-horizontal input[type='number'], form.form-horizontal input[type='password'], form.form-horizontal input[type='search'], form.form-horizontal input[type='tel'], form.form-horizontal input[type='text'], form.form-horizontal input[type='url'], form.form-horizontal label, form.form-horizontal select, form.form-horizontal textarea { display: inline-block; margin-bottom: 0; width: auto; } /* ================ Error styles ================ */ input[type='email'].error, input[type='file'].error, input[type='number'].error, input[type='password'].error, input[type='search'].error, input[type='tel'].error, input[type='text'].error, input[type='url'].error, textarea.error { border-color: #d02e2e; background-color: #fff6f6; color: #d02e2e; } label.error { color: #d02e2e; } .form--additional { text-align: center; margin-top: 30px; } .dot-spacer { opacity: 0.5; padding: 0 10px; } /* ================ Float labels ================ */ .float__wrapper { position: relative; margin: 20px 0; } .float__wrapper input, .float__wrapper textarea { width: 100%; } .float__wrapper input:focus, .float__wrapper textarea:focus { border: 1px solid var(--text-dark); box-shadow: none; } .float__wrapper label { background: var(--bg); color: var(--text); font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(10px * var(---font-adjust-accent)); left: 7px; opacity: 0; padding: 0 4px; position: absolute; transform: translateY(2em); transition: transform 0.2s ease-out, opacity 0.15s linear; z-index: -1; } .float__wrapper label, .float__wrapper label.strong, .float__wrapper label .strong { font-weight: var(---font-weight-accent-bold); } .float__wrapper label.label--float { opacity: 1; transform: translateY(-1em); z-index: 1; padding-bottom: 2px; } .input-group--inner-button.float__wrapper label.label--float { transform: translateY(calc(-1em - 5px)); } /* ============================================================================ #Notes and Form Feedback ============================================================================== */ .errors, .note { border-radius: var(--radius-sm); padding: 24px; margin-top: 20px; border: 1px solid transparent; font-size: 0.9em; text-align: center; } .errors ol, .errors ul, .note ol, .note ul { margin-top: 0; margin-bottom: 0; } .errors li:last-child, .note li:last-child { margin-bottom: 0; } .errors p, .note p { margin: 0; } .errors p + p, .note p + p { margin-top: 0.5em; } .note { background-color: var(--hairline); } .note p { margin: 0; padding: 4px 0; } .note ul { list-style: disc outside; margin-left: 10px; } .errors { color: #d02e2e; background-color: #fff6f6; } .errors ul { list-style: disc outside; margin-left: 20px; } .errors a { color: #d02e2e; text-decoration: underline; } .errors a:hover { text-decoration: none; } .errors p + p { margin-top: 0; } .form__legal { margin-bottom: 10px; } .form__legal p { margin-top: 0; font-style: italic; color: var(--text-light); font-size: calc(var(--font-3) * var(---font-adjust-body)); } .form__legal a { color: var(--text-dark); position: relative; text-decoration: none; } .form__legal a:after { content: ''; right: 0; position: absolute; bottom: -1px; height: 1px; background: currentColor; opacity: 0.25; transition: width 0.2s ease; left: 0; width: 0; } .form__legal a:hover:after { width: 100%; } .form-success { color: #56ad6a; background-color: #ecfef0; border-color: #56ad6a; padding: 10px; margin-bottom: 20px; } .form-success a { color: #56ad6a; text-decoration: underline; } .form-success a:hover { text-decoration: none; } .form-error { color: #d02e2e; background-color: #fff6f6; border-color: #d02e2e; padding: 10px; margin-bottom: 20px; } .form-error a { color: #d02e2e; text-decoration: underline; } .form-error a:hover { text-decoration: none; } /* = both radio and swatch = */ .radio__legend { display: block; margin: 0; padding: 0 0 8px; width: 100%; opacity: 0.7; font-weight: var(---font-weight-body); font-size: calc(var(--font-3) * var(---font-adjust-body)); } .radio__legend__label { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); opacity: 1; padding-right: 6px; margin-right: 5px; border-right: 1px solid var(--border); } .radio__legend__label, .radio__legend__label.strong, .radio__legend__label .strong { font-weight: var(---font-weight-accent-bold); } .radio__fieldset { line-height: 1; } /* = radio button specific = */ .radio__button { display: inline-block; padding: 5px 2px; } .radio__button:first-of-type { padding-left: 0; } /* Radio buttons styled to be grey-on-grey bubbles - currently used on Product modules */ .radio__button.radio__button--bubble { padding: 0; } .radio__fieldset .radio__button.radio__button--bubble label { background-color: var(---color-porcelain); border: 1px solid var(---color-cloudy); border-radius: 16px; color: var(---color-text-dark); font-size: 12px; padding: 8px; } .radio__fieldset .radio__button.radio__button--bubble input:checked ~ label { background-color: var(---color-cloudy); color: var(---color-porcelain); } .radio__fieldset .radio__button label { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); position: relative; margin: 0 4px; padding: 8px 10px 7px; border: 1px solid var(--hairline); color: var(--text-light); border-radius: 2px; transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .radio__fieldset .radio__button label, .radio__fieldset .radio__button label.strong, .radio__fieldset .radio__button label .strong { font-weight: var(---font-weight-accent-bold); } .radio__fieldset .radio__button label:active, .radio__fieldset .radio__button label:focus, .radio__fieldset .radio__button label:hover { color: var(--text-dark); background-color: var(--hairline); border: 1px solid hsla(0, 0%, 100%, 0); } .radio__fieldset .radio__button input:checked ~ label { color: var(--bg); background-color: var(--text-dark); border: 1px solid hsla(0, 0%, 100%, 0); } /* = swatch button specific = */ .swatch__button { --swatch: #ccc; display: inline-block; padding: 5px 10px; } .radio__button input, .swatch__button input { opacity: 0; width: 0; height: 0; display: block; } .selector-wrapper fieldset label { margin-top: unset; } .swatch__button label { position: relative; width: 28px; height: 28px; margin: 4px; border-radius: 100%; background-color: var(--swatch); } .swatch__button input:checked ~ label:after { content: ''; position: absolute; top: -4px; left: -4px; width: 36px; height: 36px; border-radius: 100%; border: 2px solid var(--swatch); opacity: 0.4; } .select__fieldset .select__label { font-weight: var(---font-weight-accent-bold); color: var(--text-dark); opacity: 0.7; } /* = handle white swatch = */ .swatch__button label[data-swatch='white' i] { box-shadow: 0 0 0 1px var(--text-light); } .swatch__button label[data-swatch='white' i]:after { --swatch: var(--text-light); } .swatch__button input:checked ~ label[data-swatch='white' i] { box-shadow: inset 0 0 0 1px var(--text-light); } /* = Tab mode = */ .focus-enabled .swatch__button input:focus ~ label:before { position: absolute; content: ''; left: -3px; bottom: -10px; height: 2px; width: calc(100% + 6px); background: var(--secondary); } .focus-enabled .radio__button input:focus ~ label:before { position: absolute; content: ''; left: 0; bottom: -10px; height: 2px; width: 100%; background: var(--secondary); } .selector-wrapper { opacity: 1; transition: opacity 0.4s ease-in-out; } /* ============================================================================ #Images and Iframes ============================================================================== */ img { border: 0; } svg:not(:root) { overflow: hidden; } /* === snippets/hero.liquid === */ .image__hero__frame { position: relative; overflow: hidden; } .image__hero__frame.mobile { display: none; } @media only screen and (max-width: 767px) { .image__hero__frame.mobile { display: block; } .image__hero__frame.desktop { display: none; } } .image__hero__pane { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .image__hero__scale { position: relative; display: block; width: 100%; height: 100%; min-height: 100%; } [data-parallax-wrapper] .image__hero__pane { display: flex; align-items: center; } [data-parallax-wrapper] .image__hero__scale { min-height: 110%; max-height: 120%; } /* Don't show a dead image symbol */ img.lazyload:not([src]) { visibility: hidden; } /* === image load animations === */ .fade-in-child .background-size-cover.lazyloaded { opacity: 1; } .fade-in-child .background-size-cover { opacity: 0; transition: opacity 0.5s ease-in; } /* == Link that fills a position: relative image wrapper == */ .link-over-image { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 20; } .theme-animate-hover .link-over-image ~ .image__fill .background-size-cover { transition: transform 1.1s ease-out; } .theme-animate-hover .link-over-image:focus ~ .image__fill .background-size-cover, .theme-animate-hover .link-over-image:hover ~ .image__fill .background-size-cover { transform: scale(1.05); } /* ================ Shared Image Classes ================ */ [data-overlay-header].has-overlay { --image-top: var(--menu-height); --image-bottom: calc(var(--menu-height) * 0.66); /* no centering compensation on align bottom images */ } [data-overlay-header].has-overlay .hero__content__wrapper[class*='align--bottom'] { padding-bottom: 0; margin-bottom: var(--inner); } .section--image { overflow: hidden; position: relative; color: var(--text); --image-top: var(--inner); --image-bottom: var(--inner); } .background-size-cover { background-size: cover; background-position: 50%; height: 100%; overflow: hidden; position: absolute; top: 0; right: 0; z-index: 1; } .background-size-cover, .img-object-cover, .responsive-wide-image { display: block; width: 100%; } .img-object-cover { height: 100%; object-fit: cover; } .img-aspect-ratio { display: block; width: 100%; height: auto; } /* Overlays */ .image-overlay--bottom { position: absolute; top: -30px; bottom: 0; left: 0; right: 0; z-index: 2; opacity: var(--opacity); background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), var(--bg)); } .backdrop--radial { position: relative; } .backdrop--radial:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(5); z-index: -1; opacity: 0.25; background: radial-gradient(var(--bg), hsla(0, 0%, 100%, 0) 50%); } .image-overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; background: var(--bg); pointer-events: none; } .image-overlay-0 { opacity: 0; } .image-overlay-5 { opacity: 0.05; } .image-overlay-10 { opacity: 0.1; } .image-overlay-15 { opacity: 0.15; } .image-overlay-20 { opacity: 0.2; } .image-overlay-25 { opacity: 0.35; } .image-overlay-30 { opacity: 0.3; } .image-overlay-35 { opacity: 0.35; } .image-overlay-40 { opacity: 0.4; } .image-overlay-45 { opacity: 0.45; } .image-overlay-50 { opacity: 0.5; } .image-overlay-55 { opacity: 0.55; } .image-overlay-60 { opacity: 0.6; } .image-overlay-65 { opacity: 0.65; } .image-overlay-70 { opacity: 0.7; } .image-overlay-75 { opacity: 0.75; } .image-overlay-80 { opacity: 0.8; } .image-overlay-85 { opacity: 0.85; } .image-overlay-90 { opacity: 0.9; } .image-overlay-95 { opacity: 0.95; } .image-overlay-100 { opacity: 1; } /* Content */ .hero__content { margin: var(--inner); padding: var(--outer); max-width: 100%; } .is--page-hero .hero__content { max-width: 100%; } @media only screen and (min-width: 768px) { .hero__content { max-width: 50%; } } @media only screen and (min-width: 990px) { .hero__content { max-width: calc(44% - var(--outer)); } .hero__content.width--wide { max-width: calc(66% - var(--outer)); } .hero__content.width--extra-wide { max-width: calc(80% - var(--outer)); } } /* Button position for small and medium only */ @media only screen and (max-width: 989px) { .hero__content.position--bottom { display: flex; height: 100%; flex-direction: column; justify-content: space-between; } } /* Alignment */ .hero__content__wrapper { position: absolute; display: flex; z-index: 9; top: 50%; left: 50%; height: 100%; width: 100%; padding-top: var(--image-top); padding-bottom: var(--image-bottom); max-width: var(---page-max-width); transform: translate(-50%, -50%); } /* Defaults / Small size alignment for Section-Hero */ .align--top-left { align-items: flex-start; justify-content: flex-start; } .align--top-center { align-items: flex-start; justify-content: center; } .align--top-right { align-items: flex-start; justify-content: flex-end; } .align--middle-left { align-items: center; justify-content: flex-start; } .align--middle-center { align-items: center; justify-content: center; } .align--middle-right { align-items: center; justify-content: flex-end; } .align--bottom-left { align-items: flex-end; justify-content: flex-start; } .align--bottom-center { align-items: flex-end; justify-content: center; } .align--bottom-right { align-items: flex-end; justify-content: flex-end; } /* Large and up alignment for Section-Hero */ @media only screen and (min-width: 990px) { .align-large--top-left { align-items: flex-start; justify-content: flex-start; } .align-large--top-center { align-items: flex-start; justify-content: center; } .align-large--top-right { align-items: flex-start; justify-content: flex-end; } .align-large--middle-left { align-items: center; justify-content: flex-start; } .align-large--middle-center { align-items: center; justify-content: center; } .align-large--middle-right { align-items: center; justify-content: flex-end; } .align-large--bottom-left { align-items: flex-end; justify-content: flex-start; } .align-large--bottom-center { align-items: flex-end; justify-content: center; } .align-large--bottom-right { align-items: flex-end; justify-content: flex-end; } } .grid__item iframe, .grid__item img, img.auto { max-width: 100%; } .rte__video-wrapper video{ width: 100%; } .rte__video-wrapper, .sky-pilot-embed { position: relative; overflow: hidden; max-width: 1200px; width: 90%; padding-bottom: 56.25%; margin: 0 auto; height: auto; } .rte__video-wrapper iframe, .sky-pilot-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .no-js .image__fill { padding-top: 0 !important; } /* ============================================================================ #Helper Classes ============================================================================== */ .clearfix { *zoom: 1; } .clearfix:after { content: ''; display: table; clear: both; } .left { float: left; } .right { float: right; } .text-center { text-align: center; } .text-right { text-align: right; } .hidden { visibility: hidden; } .display-table { display: table; table-layout: fixed; width: 100%; } .display-none, .hide { display: none; } .display-table-cell { display: table-cell; vertical-align: middle; float: none; } @media only screen and (min-width: 768px) { .medium-up--display-table { display: table; table-layout: fixed; width: 100%; } .medium-up--display-table-cell { display: table-cell; vertical-align: middle; float: none; } } @media only screen and (max-width: 479px) { .hidden-mobile { display: none; } } @media only screen and (min-width: 480px) { .mobile-only { display: none; } } @media only screen and (max-width: 989px) { .hidden-md-down { display: none; } } @media only screen and (min-width: 768px) and (max-width: 989px) { .hidden-md { display: none; } } @media only screen and (min-width: 768px) { .hidden-md-up { display: none; } } @media only screen and (min-width: 990px) { .hidden-lg { display: none; } } /* Hide and show */ .visually-hidden, [data-shopify-xr-hidden] { position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } .js-focus-hidden:focus { outline: none; } .label-hidden { position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; /* No placeholders, so force show labels */ } .no-placeholder .label-hidden, .visually-shown { position: inherit !important; overflow: auto; clip: auto; width: auto; height: auto; margin: 0; } /* Used for JS hide and show */ .is-hidden { visibility: hidden; max-height: 0; overflow: hidden; opacity: 0; transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); } /* Used on product variants */ html.no-js .js { display: none; } html.no-js [data-aos] { opacity: 1 !important; transform: none !important; } html.no-js .lazyload, html.supports-js .no-js { display: none; } .lazywide { display: block; width: 100%; } /* Only show when browser cookies are not supported */ .supports-no-cookies:not(html) { display: none; } html.supports-no-cookies .supports-no-cookies:not(html) { display: block; } /* Only show when browser cookies are supported */ html.supports-no-cookies .supports-cookies { display: none; } /* ============================================================================ Margin and padding resets ============================================================================== */ .mt0 { margin-top: 0; } .mr0 { margin-right: 0; } .mb0 { margin-bottom: 0; } .ml0 { margin-left: 0; } .m0 { margin: 0; } .pt0 { padding-top: 0; } .pr0 { padding-right: 0; } .pb0 { padding-bottom: 0; } .pl0 { padding-left: 0; } .p0 { padding: 0; } .mt1 { margin-top: 32px; } .mr1 { margin-right: 32px; } .mb1 { margin-bottom: 32px; } .ml1 { margin-left: 32px; } .mt2 { margin-top: 64px; } .mr2 { margin-right: 64px; } .mb2 { margin-bottom: 64px; } .ml2 { margin-left: 64px; } .mt3 { margin-top: 96px; } .mr3 { margin-right: 96px; } .mb3 { margin-bottom: 96px; } .ml3 { margin-left: 96px; } .mt4 { margin-top: 128px; } .mr4 { margin-right: 128px; } .mb4 { margin-bottom: 128px; } .ml4 { margin-left: 128px; } .pt1 { padding-top: 32px; } .pr1 { padding-right: 32px; } .pb1 { padding-bottom: 32px; } .pl1 { padding-left: 32px; } .pt2 { padding-top: 64px; } .pr2 { padding-right: 64px; } .pb2 { padding-bottom: 64px; } .pl2 { padding-left: 64px; } .pt3 { padding-top: 96px; } .pr3 { padding-right: 96px; } .pb3 { padding-bottom: 96px; } .pl3 { padding-left: 96px; } .pt4 { padding-top: 128px; } .pr4 { padding-right: 128px; } .pb4 { padding-bottom: 128px; } .pl4 { padding-left: 128px; } .fill-bg { fill: var(--bg); } .fill-text { fill: var(--text); } .fill-text-light { fill: var(--text-light); } .fill-text-dark { fill: var(--text-dark); } /* ============================================================================ Skip to content button - Overrides .visually-hidden when focused ============================================================================== */ .skip-link:focus { position: absolute !important; overflow: auto; clip: auto; width: auto; height: auto; margin: 0; color: var(--secondary); background-color: var(--bg); padding: 20px; z-index: 50000; transition: none; } body.focus-enabled :focus { outline-color: var(--secondary) !important; outline-offset: -2px !important; outline-style: auto !important; outline-width: 5px !important; } html:not(.no-js) body:not(.focus-enabled) :focus { outline: none; } /* ============================================================================ #OOCSS Media Object - http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/ ============================================================================== */ .media, .media-flex { overflow: hidden; _overflow: visible; zoom: 1; } .media-img { float: left; margin-right: 32px; } .media-img-right { float: right; margin-left: 32px; } .media-img-right img, .media-img img { display: block; } /*================ SVG Loader ================*/ @keyframes animate-svg { 0% { stroke-dashoffset: 88; } to { stroke-dashoffset: 0; } } .svg-loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .svg-loader circle { stroke-width: 1; stroke: var(--border); fill: none; } .svg-loader circle ~ circle { stroke: var(--text); stroke-dashoffset: 88; animation: animate-svg 1s linear infinite; animation-play-state: paused; } .loading .svg-loader circle ~ circle { animation-play-state: running; } /* ============================================================================ This file is build around onboarding markup loaded in Shopify-built themes and Timber - Handles empty state hover styles with specific markup ============================================================================== */ .helper-note { position: absolute; top: 50%; left: 50%; margin-top: -80px; margin-left: -255px; max-width: 510px; font-size: 14px; background: #000; border: none; color: #fff; text-align: left; padding: 30px; z-index: 9000; opacity: 0; transform: translateZ(0); box-sizing: border-box; transition: opacity 0.3s cubic-bezier(0, 0, 0.33, 1), transform 0.5s cubic-bezier(0.45, 0, 0, 0.95); } @media only screen and (max-width: 509px) { .helper-note { width: 95%; margin-top: 10%; margin-left: 2.5%; top: 0; left: 0; } } .helper-note p { margin-bottom: 15px; margin-left: 40px; font-size: 14px; line-height: 20px; } .helper-note p:last-child { margin-bottom: 0; } .helper-note h3 { font-size: 19px; color: #fff; margin-left: 40px; text-transform: none; } .helper-note a:active, .helper-note a:hover { color: #ccc; } .helper-note a.secondary-action { display: inline-block; line-height: 30px; color: #ccc; text-decoration: none; } .helper-note a.secondary-action:focus, .helper-note a.secondary-action:hover { opacity: 0.7; } .helper-note .helper-icon { float: left; margin-top: 4px; width: 24px; height: 24px; background-size: contain; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHN0eWxlPjwvc3R5bGU+PHBhdGggZmlsbD0iIzk4YTdiNSIgZD0iTTUgOUgydjFoM1Y5em0xLTJIMnYxaDRWN3ptLTQgNWgzdi0xSDJ2MXptOCAyLjA0NkwuOTk4IDE0IC45OTQgNUg0VjJoNnYyaDFWMi4wNDZMOS45MiAxSDNMLjAwMiAzLjk4NiAwIDE1aDExdi00bC0xIDEuMDQ2djJ6TTMuMDA0IDIuNDQxdjEuNTg2SDEuMzk2bDEuNjA4LTEuNTg2em0yLjk4NyA5LjA1OGwyLjIwNi0uMDU5IDYuODA1LTUuNTU0LTEuNjg5LTIuMTA0LTYuODA1IDUuNTU0LS41MTcgMi4xNjN6TTcuMTYgOS43ODRsLjgzMS0uMTU2LjE1NS44MzUtMS4yMDEuNTY1LjIxNS0xLjI0NHoiLz48L3N2Zz4='); display: inline-block; vertical-align: top; } .helper-section { position: relative; clear: both; } .helper-section:hover .helper-note { opacity: 1; transform: translateY(-20px); } .helper-section .helper-content { opacity: 1; transform: translateZ(0); transition: opacity 0.25s cubic-bezier(0.67, 0, 1, 1); } .helper-section:hover .helper-content { opacity: 0.5; transition: opacity 0.3s cubic-bezier(0, 0, 0.33, 1); } /* ================ Spacing ================ */ .homepage-blog, .homepage-collection, .homepage-newsletter { padding-top: 64px; padding-bottom: 64px; } .homepage-collection-tabs, .homepage-columns, .homepage-page, .section-recent .recent__container__inner:not(.is-hidden), .section-related, .paginate-grid { padding-top: 64px; padding-bottom: 64px; } .homepage-collection-grid { padding-top: 64px; padding-bottom: 96px; } .homepage-product { padding-top: 32px; } .homepage-icons, .homepage-logos.homepage-logos--tall { padding-top: 24px; padding-bottom: 24px; } @media only screen and (max-width: 767px) { .homepage-icons { padding-top: 16px; padding-bottom: 16px; } } .margin--small { padding: var(--outer) 0; } .margin--medium { padding: calc(var(--outer) * 2) 0; } .margin--large { padding: calc(var(--outer) * 3) 0; } .margin--zero { padding: 0; } .is--zero-height .text__standard { padding: 0; /* Used in page.liquid as a hack to force page background-colors */ } .neighbor--black + .neighbor--black .frame, .neighbor--black + .neighbor--black .homepage-blog, .neighbor--black + .neighbor--black .homepage-collection, .neighbor--black + .neighbor--black .homepage-collection-grid, .neighbor--black + .neighbor--black .homepage-collection-tabs, .neighbor--black + .neighbor--black .homepage-columns, .neighbor--black + .neighbor--black .homepage-icons, .neighbor--black + .neighbor--black .homepage-logos, .neighbor--black + .neighbor--black .homepage-newsletter, .neighbor--black + .neighbor--black .homepage-page, .neighbor--black + .neighbor--black .homepage-product, .neighbor--black + .neighbor--black .margin--large, .neighbor--black + .neighbor--black .margin--medium, .neighbor--black + .neighbor--black .margin--small, .neighbor--black + .neighbor--black .margin--zero, .neighbor--black + .neighbor--black .paginate-grid, .neighbor--black + .neighbor--black .section-recent .recent__container__inner:not(.is-hidden), .neighbor--black + .neighbor--black .section-related, .neighbor--dark + .neighbor--dark .frame, .neighbor--dark + .neighbor--dark .homepage-blog, .neighbor--dark + .neighbor--dark .homepage-collection, .neighbor--dark + .neighbor--dark .homepage-collection-grid, .neighbor--dark + .neighbor--dark .homepage-collection-tabs, .neighbor--dark + .neighbor--dark .homepage-columns, .neighbor--dark + .neighbor--dark .homepage-icons, .neighbor--dark + .neighbor--dark .homepage-logos, .neighbor--dark + .neighbor--dark .homepage-newsletter, .neighbor--dark + .neighbor--dark .homepage-page, .neighbor--dark + .neighbor--dark .homepage-product, .neighbor--dark + .neighbor--dark .margin--large, .neighbor--dark + .neighbor--dark .margin--medium, .neighbor--dark + .neighbor--dark .margin--small, .neighbor--dark + .neighbor--dark .margin--zero, .neighbor--dark + .neighbor--dark .paginate-grid, .neighbor--dark + .neighbor--dark .section-recent .recent__container__inner:not(.is-hidden), .neighbor--dark + .neighbor--dark .section-related, .neighbor--light + .neighbor--light .frame, .neighbor--light + .neighbor--light .homepage-blog, .neighbor--light + .neighbor--light .homepage-collection, .neighbor--light + .neighbor--light .homepage-collection-grid, .neighbor--light + .neighbor--light .homepage-collection-tabs, .neighbor--light + .neighbor--light .homepage-columns, .neighbor--light + .neighbor--light .homepage-icons, .neighbor--light + .neighbor--light .homepage-logos, .neighbor--light + .neighbor--light .homepage-newsletter, .neighbor--light + .neighbor--light .homepage-page, .neighbor--light + .neighbor--light .homepage-product, .neighbor--light + .neighbor--light .margin--large, .neighbor--light + .neighbor--light .paginate-grid, .neighbor--light + .neighbor--light .margin--medium:not([data-section-type]='rich-text'), .neighbor--light + .neighbor--light .margin--small, .neighbor--light + .neighbor--light .margin--zero, .neighbor--light + .neighbor--light .section-recent .recent__container__inner:not(.is-hidden), .neighbor--light + .neighbor--light .section-related, .neighbor--white + .neighbor--white .frame, .neighbor--white + .neighbor--white .homepage-blog, .neighbor--white + .neighbor--white .homepage-collection, .neighbor--white + .neighbor--white .homepage-collection-grid, .neighbor--white + .neighbor--white .homepage-collection-tabs, .neighbor--white + .neighbor--white .homepage-columns, .neighbor--white + .neighbor--white .homepage-icons, .neighbor--white + .neighbor--white .homepage-logos, .neighbor--white + .neighbor--white .homepage-newsletter, .neighbor--white + .neighbor--white .homepage-page, .neighbor--white + .neighbor--white .homepage-product, .neighbor--white + .neighbor--white .margin--large, .neighbor--white + .neighbor--white .margin--medium, .neighbor--white + .neighbor--white .margin--small, .neighbor--white + .neighbor--white .margin--zero, .neighbor--white + .neighbor--white .paginate-grid, .neighbor--white + .neighbor--white .section-recent .recent__container__inner:not(.is-hidden), .neighbor--white + .neighbor--white .section-related { padding-top: 0; } /* ================ Section Titles ================ */ .home__subtitle { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1.3px; font-size: 13px; color: var(--text-accent); text-align: center; margin-top: 10px; margin-bottom: 20px; position: relative; } .home__subtitle, .home__subtitle.strong, .home__subtitle .strong { font-weight: var(---font-weight-accent-bold); } /* .home__subtitle:after { content: ''; margin: auto; width: 30px; height: 3px; position: absolute; bottom: 0; background: var(---color-primary); opacity: 0.2; left: 0; right: 0; } */ /* .align--middle-left .home__subtitle:after { right: unset; } .align--middle-right .home__subtitle:after { left: unset; } .palette--dark .home__subtitle:after { background: #fff; } */ /* no margin on the text above buttons. */ .hero__content__wrapper .rte p:last-child { margin-bottom: 0; } .home--uppercase { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1.3px; font-size: calc(13 / 16 * 1rem); color: var(--text-accent); } .home--uppercase, .home--uppercase.strong, .home--uppercase .strong { font-weight: var(---font-weight-accent-bold); } .hero__kicker { color: var(--text-accent); font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1.3px; font-size: calc(13 / 16 * 1rem); margin: 0 0 10px; } .hero__kicker, .hero__kicker.strong, .hero__kicker .strong { font-weight: var(---font-weight-accent-bold); } .hero__title { margin: 0 0 0.5rem; } .is--page-hero .hero__title { line-height: 1.05; font-size: calc(31.61134px + 3.05877vw); } @media (min-width: 1200px) { .is--page-hero .hero__title { font-size: 4.5rem; } } .is--page-hero .hero__description, .is--page-hero .hero__description p { font-size: calc(20 / 16 * 1rem); margin: 0 0 20px; } @media (min-width: 768px) { .is--page-hero .hero__description, .is--page-hero .hero__description p { font-size: 1.375rem; } } .hero__description a, .hero__description p a { text-decoration: underline; } .hero__description a:hover, .hero__description p a:hover { text-decoration: none; } .hero__title + .hero__description { margin: 0 0 var(--content-margin); } /* Button spacing */ .hero__kicker + .hero__btn, .hero__kicker + .hero__cta__wrapper, .hero__title + .hero__btn, .hero__title + .hero__cta__wrapper { display: inline-block; margin-top: 1.35rem; } .hero__cta__wrapper { display: flex; align-items: center; } @media only screen and (max-width: 479px) { .hero__cta__wrapper { flex-direction: column; } } .caps--link + .hero__btn, .hero__btn + .caps--link, .hero__btn + .hero__btn { margin-left: 15px; } @media only screen and (max-width: 479px) { .caps--link + .hero__btn, .hero__btn + .caps--link, .hero__btn + .hero__btn { margin-top: 1.35rem; } } .hero__cta__wrapper:not(:last-child:first-child) .caps--link + .hero__btn, .hero__cta__wrapper:not(:last-child:first-child) .hero__btn + .caps--link, .hero__cta__wrapper:not(:last-child:first-child) .hero__btn + .hero__btn { margin: 1.35rem 0 0; } @media only screen and (min-width: 480px) { .hero__cta__wrapper:not(:last-child:first-child) .caps--link + .hero__btn, .hero__cta__wrapper:not(:last-child:first-child) .hero__btn + .caps--link, .hero__cta__wrapper:not(:last-child:first-child) .hero__btn + .hero__btn { margin: 0 0 0 1rem; } } .align--bottom-right .hero__cta__wrapper, .align--middle-right .hero__cta__wrapper, .align--top-right .hero__cta__wrapper { justify-content: flex-end; } @media only screen and (max-width: 479px) { .align--bottom-right .hero__cta__wrapper, .align--middle-right .hero__cta__wrapper, .align--top-right .hero__cta__wrapper { align-items: flex-end; } } .align--bottom-center .hero__cta__wrapper, .align--middle-center .hero__cta__wrapper, .align--top-center .hero__cta__wrapper { justify-content: center; } .align--bottom-left .hero__cta__wrapper, .align--middle-left .hero__cta__wrapper, .align--top-left .hero__cta__wrapper { justify-content: flex-start; } @media only screen and (max-width: 479px) { .align--bottom-left .hero__cta__wrapper, .align--middle-left .hero__cta__wrapper, .align--top-left .hero__cta__wrapper { align-items: flex-start; } } /*=== Text sections ===*/ @media only screen and (max-width: 767px) { .text__standard { padding-top: 10px; padding-bottom: 10px; } } .text__standard :last-child { margin-bottom: 0; } .standard-text-container { margin: 0 auto var(--outer); } @media only screen and (min-width: 480px) { .standard-text-container { max-width: 500px; } } @media only screen and (min-width: 768px) { .standard-text-container { max-width: 700px; } } .standard__heading:first-child { margin-top: 0; } .standard__heading { color: var(--text-dark); } .standard__heading--light { color: var(---color-text); } .standard__heading + .standard__cta { margin-top: var(--content-margin); } .standard__kicker { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1.3px; font-size: calc(13 / 16 * 1rem); color: var(--text-accent); margin: 0 0 10px; line-height: 1; } .standard__kicker, .standard__kicker.strong, .standard__kicker .strong { font-weight: var(---font-weight-accent-bold); } .standard__kicker--dark { color: var(--text-dark); } .kicker__line { padding-bottom: var(--inner); margin-bottom: var(--gutter); position: relative; } .kicker__line:after { content: ''; margin: auto; width: 30px; height: 3px; position: absolute; bottom: 0; background: var(--text-dark); opacity: 0.2; left: 0; } .text-center .kicker__line:after { right: 0; } .standard__cta, .standard__heading { margin-bottom: 0.5rem; } .standard__rte { margin-bottom: var(--content-margin); } .standard__rte.font--2 p, .standard__rte.font--2 td { font-size: 1rem; } /* @media (min-width: 480px) { .standard__rte.font--2 p, .standard__rte.font--2 td { font-size: 1.125rem; } } */ /* @media (min-width: 1400px) { .standard__rte.font--2 p, .standard__rte.font--2 td { font-size: calc(14.52678px * var(---font-adjust-body)); } } */ .standard__rte.font--3 p, .standard__rte.font--3 td { font-size: 1rem; } /* @media (min-width: 480px) { .standard__rte.font--3 p, .standard__rte.font--3 td { font-size: 1.125rem; } } */ /* @media (min-width: 1400px) { .standard__rte.font--3 p, .standard__rte.font--3 td { font-size: calc(17.72268px * var(---font-adjust-body)); } } */ .standard__rte.font--4 p, .standard__rte.font--4 td { font-size: 1rem; } /* @media (min-width: 480px) { .standard__rte.font--4 p, .standard__rte.font--4 td { font-size: 1.125rem; } } */ /* @media (min-width: 1400px) { .standard__rte.font--4 p, .standard__rte.font--4 td { font-size: calc(21.62167px * var(---font-adjust-body)); } } */ .standard__rte.font--5 p, .standard__rte.font--5 td { font-size: 1rem; } /* @media (min-width: 480px) { .standard__rte.font--5 p, .standard__rte.font--5 td { font-size: 1.125rem; } } */ /* @media (min-width: 1400px) { .standard__rte.font--5 p, .standard__rte.font--5 td { font-size: calc(26.37843px * var(---font-adjust-body)); } } */ .standard__rte.font--6 p, .standard__rte.font--6 td { font-size: 1rem; } .columns--2 { columns: 180px 2; } .columns--2, .columns--3 { column-gap: var(--gutter); } .columns--3 { columns: 180px 3; } .columns--4 { columns: 180px 4; column-gap: var(--gutter); } .standard__rte p { display: block; margin-left: auto; margin-right: auto; margin-top: 0; } .standard__rte p a { text-decoration: underline; } .standard__rte p a:hover { text-decoration: none; } .standard__rte p + p { margin-top: 0.75em; } .text-justify { text-align: justify; text-justify: inter-word; } .standard__rte ul { list-style: disc; margin-block-start: 1em; margin-block-end: 1em; padding-inline-start: 40px; } .poppy__tooltip { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(9px * var(---font-adjust-accent)); padding: 1em; background-color: var(--bg); color: var(--text-light); border: 1px solid var(--border); box-shadow: 0 0 3px var(--hairline), 0 2px 8px var(--hairline); } .poppy__tooltip, .poppy__tooltip.strong, .poppy__tooltip .strong { font-weight: var(---font-weight-accent-bold); } .poppy__tooltip:after, .poppy__tooltip:before { top: calc(100% - 1px); left: 50%; border: solid transparent; content: ' '; height: 0; width: 0; position: absolute; pointer-events: none; } /* CSS arrows */ .poppy__tooltip:after { border-top-color: var(--bg); border-width: 6px; margin-left: -6px; } .poppy__tooltip:before { border-top-color: var(--border); border-width: 7px; margin-left: -7px; } /* Transitions */ .poppy .poppy__tooltip__wrapper { opacity: 0; transform: translateY(0); transition: all 0.2s ease-out; } .poppy.is-visible .poppy__tooltip__wrapper { opacity: 1; transform: translateY(-8px); } /* Required by library */ .poppy { position: absolute; z-index: 3000; top: 0; left: 0; } /* ============================================================================ #Colors ---static vars have three dashes vs --dynamic vars have two ============================================================================== */ .palette--light, :root { --bg: var(---color-bg); --bg-accent: var(---color-bg-accent); --text-dark: var(---color-text-dark); --text: var(---color-text); --text-light: var(---color-text-light); --text-accent: var(---color-text-accent); --hover: var(---color-a95); --muted: var(---color-a35); --border: var(---color-a20); --hairline: var(---color-a5); --hairline-hover: var(---color-a10); --contrast: #000; --primary: var(---color-primary); --primary-fade: var(---color-primary-fade); --secondary: var(---color-secondary); --secondary-fade: var(---color-secondary-fade); } .palette--dark, body.default--dark { --bg: var(---inverse-bg); --bg-accent: var(---inverse-bg-accent); --text-dark: var(---color-text-dark); --text: var(---color-text); --text-light: var(---color-text); --text-accent: var(---color-text-accent); --hover: var(---inverse-a95); --muted: var(---inverse-a35); --border: var(---inverse-a20); --hairline: var(---inverse-a5); --hairline-hover: var(---inverse-a10); --contrast: #fff; --primary: var(---inverse-primary); --primary-fade: var(---inverse-primary-fade); --secondary: var(---inverse-secondary); --secondary-fade: var(---inverse-secondary-fade); } .main-content, .palette--dark, .palette--light { color: var(--text); background-color: var(--bg); } .palette--yellow { background-color: var(---color-feals-yellow); --bg: var(---color-feals-yellow); --text: var(---color-text); } .bg--yellow { --bg: var(---color-feals-yellow); } .palette--bright { background-color: var(---color-primary); --bg: var(---color-primary); --text: var(---color-text); } .default--accent { --bg: var(---color-bg-accent); } .default--accent--inverse { --bg: var(---inverse-bg-accent); } .text--neutral { --text-dark: var(---color-text-dark); --text: var(---color-text); --text-light: var(---color-text-light); --text-accent: var(---color-text-accent); } .text--black { --text: #000; --text-light: #000; --text-dark: #000; --text-accent: #000; } .text--primary { --text: var(---color-primary); --text-light: var(---color-primary); --text-dark: var(---color-primary); --text-accent: var(---color-primary); } .text--secondary { --text: var(---color-secondary); --text-light: var(---color-secondary); --text-dark: var(---color-secondary); --text-accent: var(---color-text-secondary); } .text--white { --text: #fff; --text-light: #fff; --text-dark: #f7f7f7; --text-accent: #fff; } .text--invert--primary { --text: var(---inverse-primary); --text-light: var(---inverse-primary); --text-dark: var(---inverse-primary); --text-accent: var(---inverse-primary); } .text--invert--secondary { --text: var(---inverse-secondary); --text-light: var(---inverse-secondary); --text-dark: var(---inverse-secondary); --text-accent: var(---inverse-secondary); } .text--invert { --text: var(---inverse-a90); --text-light: var(---inverse-a80); --text-dark: var(---inverse-text); --text-accent: var(---inverse-a5); } .bg--neutral { --bg: var(---color-bg); } .bg--accent { --bg: var(---color-bg-accent); } .bg--invert { --bg: var(---inverse-bg); } .bg--invert--accent { --bg: var(---inverse-bg-accent); } .bg--white { --bg: #fff; } .bg--black { --bg: #000; } .bg--primary { --bg: var(---color-primary); } .bg--secondary { --bg: var(---color-secondary); } .bg--invert--primary { --bg: var(---inverse-primary); } .bg--invert--secondary { --bg: var(---inverse-secondary); } /* ================ Heights ================ */ :root { --full-screen: 100vh; --three-quarters: 75vh; --two-thirds: 66vh; --one-half: 50vh; --one-third: 33vh; --one-fifth: 20vh; --header-height: 100px; --footer-height: 500px; --announcement-height: 33px; --content-full: 90vh; --content-min: 90vh; --scrollbar-width: 0; } .use_screen_full { height: var(--full-screen); } .use_screen_three_quarters { height: var(--three-quarters); } .use_screen_two_thirds { height: var(--two-thirds); } .use_screen_one_half { height: var(--one-half); } .use_screen_one_third { height: var(--one-third); } .use_screen_one_fifth { height: var(--one-fifth); } .use_pixels_800 { height: 800px; } .use_pixels_650 { height: 650px; } /*allows section below the hero to peek ATF*/ @media only screen and (max-width: 767px) { .use_pixels_650 { height: 600px; } } .use_pixels_500 { height: 500px; } .use_pixels_480 { height: 480px; } .use_pixels_360 { height: 360px; } .use_pixels_480 .image-ratio--square, .use_pixels_360 .image-ratio--square, .use_pixels_360 .image-ratio--portrait, .use_pixels_480 .image-ratio--portrait { left: 50%; transform: translateX(-50%); } .use_pixels_480 .image-ratio--square { width: 480px; } .use_pixels_360 .image-ratio--square { width: 360px; } .use_pixels_480 .image-ratio--portrait { width: 640; } .use_pixels_360 .image-ratio--portrait { width: 480px; } @media only screen and (max-width: 767px) { .negative-push-top--60 { margin-top: -60px; /* Arbitary number - make a select dropdown with choices if more customized needs occur (only for xsmall and small) */ } } /* Shopify Product Reviews */ .product-reviews { padding: 30px 0; } .product-reviews .spr-container { padding: 0; margin: 0; border: none; } .product-reviews .spr-summary { width: 100%; display: block; position: relative; min-height: 80px; } .product-reviews .spr-summary-actions { float: right; } .product-reviews .spr-summary-actions-newreview { display: inline-block; padding: 0.8rem 1.6rem; margin: 0; line-height: 1; text-decoration: none; text-align: center; vertical-align: middle; border: none; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; border-radius: var(---button-radius); background-color: hsla(0, 0%, 100%, 0); color: var(--text); border: 1px solid var(--text); } @media only screen and (max-width: 479px) { .product-reviews .spr-summary-actions { display: block; margin-top: 35px; } } /* ============================================================================ #Pagination (Including Shopify Product Reviews) ============================================================================== */ .pagination { margin-bottom: 1em; } /* ================ Custom Pagination ================ */ .pagination-custom { display: inline-block; padding-left: 0; margin: 0 0 32px; border-radius: var(--radius-sm); } .pagination-custom > li { display: inline; } .pagination-custom > li:first-child > a, .pagination-custom > li:first-child > span { margin-left: 0; border-bottom-left-radius: var(--radius-sm); border-top-left-radius: var(--radius-sm); } .pagination-custom > li:last-child > a, .pagination-custom > li:last-child > span { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); } .pagination-custom > li > a:focus, .pagination-custom > li > a:hover, .pagination-custom > li > span:focus, .pagination-custom > li > span:hover { color: var(--text-dark); } .pagination-custom > .active > a, .pagination-custom > .active > a:focus, .pagination-custom > .active > a:hover, .pagination-custom > .active > span, .pagination-custom > .active > span:focus, .pagination-custom > .active > span:hover { z-index: 2; cursor: default; color: var(--text-dark); font-weight: var(---font-weight-body-bold); } .pagination-custom > .disabled > a, .pagination-custom > .disabled > a:focus, .pagination-custom > .disabled > a:hover, .pagination-custom > .disabled > span { color: var(--border); cursor: not-allowed; } .pagination-custom .icon { width: 0.45em; height: 0.45em; } .pagination-custom__arr > a, .pagination-custom__arr > span { position: relative; float: left; padding: 10px 20px; line-height: 1.42; text-decoration: none; border: 1px solid var(--border); } .pagination-custom__num > a, .pagination-custom__num > span { position: relative; float: left; padding: 10px 20px; line-height: 1.42; text-decoration: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .pagination-custom__num.active span:after { content: ''; width: 50%; left: 25%; position: absolute; bottom: -1px; height: 1px; background: var(--text-dark); } .pagination-custom__spacer > span { position: relative; float: left; padding: 10px; line-height: 1.42; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .pagination-custom__num--dots > span { padding: 10px 5px; } @media only screen and (max-width: 479px) { .pagination-custom__num--dots > span, .pagination-custom__spacer > span { padding: 10px 0; } .pagination-custom__arr > a, .pagination-custom__arr > span, .pagination-custom__num > a, .pagination-custom__num > span { padding: 10px 15px; } } /* ============================================================================ #Pages ============================================================================== */ /* ================ Page ================ */ .homepage-page hr { width: 75%; margin-left: 12%; } .page__template .rte { margin-bottom: 0; } .page__template .rte :first-child { margin-top: 0; } .page__template .rte p:last-child { margin-bottom: 0; } /* ================ Policy Page ================ */ body .shopify-email-marketing-confirmation__container, body .shopify-policy__container { position: relative; text-align: left; margin: 64px auto; max-width: 670px; padding: 0 var(--outer); } .shopify-policy__title h1, body .shopify-email-marketing-confirmation__container h1 { font-size: calc(25.48379px * var(---font-adjust-heading)); text-align: center; margin: 0 0 var(--outer); } @media (min-width: 480px) { .shopify-policy__title h1, body .shopify-email-marketing-confirmation__container h1 { font-size: calc( (25.48379px + (669.78954vw - 3214.98981px) / 920) * var(---font-adjust-heading) ); } } @media (min-width: 1400px) { .shopify-policy__title h1, body .shopify-email-marketing-confirmation__container h1 { font-size: calc(32.18169px * var(---font-adjust-heading)); } } body .shopify-email-marketing-confirmation__container { text-align: center; } /* ================ Marketing unsub ================ */ .shopify-email-marketing-confirmation__container p { font-size: calc(18.30206px * var(---font-adjust-body)); } @media (min-width: 480px) { .shopify-email-marketing-confirmation__container p { font-size: calc( (18.30206px + (331.96033vw - 1593.40956px) / 920) * var(---font-adjust-body) ); } } @media (min-width: 1400px) { .shopify-email-marketing-confirmation__container p { font-size: calc(21.62167px * var(---font-adjust-body)); } } .shopify-email-marketing-confirmation__container a { font-size: calc(var(--font-3) * var(---font-adjust-body)); position: relative; text-decoration: none; } .shopify-email-marketing-confirmation__container a:after { content: ''; right: 0; position: absolute; bottom: -1px; height: 1px; background: currentColor; opacity: 0.25; transition: width 0.2s ease; width: 100%; } .shopify-email-marketing-confirmation__container a:hover:after { width: 0; } /* ============================================================================ #Site Header ============================================================================== */ .header__wrapper { --bg: var(---color-nav); --border: var(---color-nav-border); --text: var(---color-nav-text); --text-dark: var(---color-nav-text); --text-light: var(---color-nav-text); --text-transparent: var(---color-nav-text-transparent); --underline: var(---color-nav-a10); } .theme__header { position: absolute; z-index: 5000; width: 100%; background-color: var(--bg); color: var(--text); } [data-header-transparent='true'] .theme__header .parent .header__dropdown { padding-top: 18px; } .header__backfill { visibility: hidden; z-index: -1; position: relative; } .header__logo { margin: 0; padding: 15px 0; display: flex; align-items: center; justify-content: center; } .header__logo__link { display: block; text-decoration: none; color: var(--text); position: relative; max-width: 50vw; } .header__logo__link img { height: auto; } .header__logo__text { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(21.59643px * var(---font-adjust-accent)); height: 50px; display: inline-flex; justify-content: center; align-items: center; padding: 1em 0.5em; background: var(---color-nav-text); color: var(---color-nav); } .header__logo__text, .header__logo__text.strong, .header__logo__text .strong { font-weight: var(---font-weight-accent-bold); } .header__logo__text span { max-width: calc(50vw - 1em); text-align: center; line-height: 1; height: auto; } .header__logo__text--long.header__logo__text { font-size: calc(13.14426px * var(---font-adjust-accent)); } @media only screen and (max-width: 767px) { .header__logo__text--break.header__logo__text { word-break: break-all; } } .header__mobile { display: grid; grid-template-columns: repeat(3, 1fr); } .header__mobile__left, .header__mobile__right { display: flex; } .header__mobile__left { display: flex; justify-content: flex-start; } .header__mobile__left .header__mobile__button { display: flex; justify-content: flex-start; padding-left: 0; } .header__mobile__right { display: flex; justify-content: flex-end; } .header__mobile__right .header__mobile__button { display: flex; justify-content: flex-end; padding-right: 0; } .header__mobile__button { height: 100%; min-width: 60px; display: flex; align-items: center; align-content: center; } .header__desktop { display: flex; width: 100%; justify-content: space-around; align-items: center; flex-wrap: nowrap; } .header__desktop__bar__c, .header__desktop__bar__l, .header__desktop__bar__r { display: flex; align-self: stretch; } .header__desktop__bar__l { flex: 1 0 0; justify-content: flex-start; } .header__desktop__bar__c { flex-grow: 0; } .header__desktop__bar__r { flex: 1 0 0; justify-content: flex-end; } .header__desktop__bar__inline { display: flex; align-self: stretch; height: 100%; } .header__desktop__buttons { display: flex; } .header__menu__inner { display: flex; height: 100%; } .header__desktop__button .navlink, .navlink--toplevel { align-items: center; display: flex; height: 100%; } .navtext { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); font-size: 1rem; white-space: nowrap; display: block; } .navtext.strong, .navtext .strong { font-weight: var(---font-weight-accent-bold); } .navlink { padding: 5px 15px; } .navlink .icon { height: 30px; width: 17px; } .header__mobile__left .icon, .header__mobile__right .icon { height: 30px; width: 20px; } /* Fade out non hovered links */ .navlink--toplevel { transition: opacity 0.1s linear; } .menu__item.is-visible .navlink--toplevel:before { position: absolute; top: 0; left: var(--bar-left); bottom: 0; z-index: 2; width: var(--bar-width); content: ''; } .header__menu__inner:hover .menu__item:not(:hover) .navlink--toplevel { opacity: 0.8; } .header__desktop__bar__r > .header__desktop__bar__inline, .header__desktop__bar__r > .header__desktop__buttons, .header__desktop__bar__r > .header__menu__inner { margin-right: -15px; } .header__desktop__bar__l .header__menu__inner { margin-left: -15px; } /* ================ Sticky header ================ */ .js__header__stuck { position: fixed; width: 100%; top: 0; z-index: 6000; } .js__header__stuck .theme__header { transition: background-color 0s cubic-bezier(0.215, 0.61, 0.355, 1); } .js__header__stuck .theme__header:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; z-index: -5; opacity: 0; transition: opacity 0.2s linear; background: var(--bg); } .js__header__stuck.js__header__stuck__backdrop .theme__header { transition: background-color 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); } .js__header__stuck.js__header__stuck__backdrop .theme__header:after { opacity: 0.3; transition: opacity 0s cubic-bezier(0.215, 0.61, 0.355, 1); } .js__header__stuck.js__header__stuck__backdrop .theme__header:hover:after { opacity: 1; } .js__header__stuck--animated .theme__header { transform: translateY(-100%); transition: transform 0.2s linear; } .js__header__stuck--animated.js__header__stuck--trigger-animation .theme__header, .js__header__stuck--trigger-animation .theme__header { transform: translateY(0); transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } /* ================ Icon dot hover ================ */ .header__desktop__buttons--icons .header__desktop__button .navlink { position: relative; } .header__desktop__buttons--icons .header__desktop__button .navlink:after { content: ''; left: 0; width: 100%; padding-bottom: 100%; position: absolute; background: var(--text); border-radius: 100%; opacity: 0; transform: scale(0); transition: opacity 0.7s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.15s linear; } /* ================ account + cart hover .header__desktop__buttons--icons .header__desktop__button .navlink:hover:after { transform: scale(0.9); opacity: 0.05; } ================ */ body:not(.theme-animate-hover) .header__desktop__buttons--icons .header__desktop__button .navlink:hover:after { transform: scale(0); } /* ================ Transparent header ================ */ .logo__img { display: block; width: 100%; opacity: 0; transition: opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .logo__img--transparent { position: absolute; top: 0; height: auto; opacity: 0; } .lazyloaded.logo__img--color { opacity: 1; } [data-header-transparent='true']:not(.meganav--visible) { --text: var(--text-transparent); --text-dark: var(--text-transparent); --text-light: var(--text-transparent); --underline: var(--text-transparent); } [data-header-transparent='true']:not(.meganav--visible) .theme__header { background-color: hsla(0, 0%, 100%, 0); } [data-header-transparent='true']:not(.meganav--visible) .header__logo--has-transparent .logo__img--color, [data-header-transparent='true']:not(.meganav--visible) .header__logo--has-transparent .logo__img--transparent { opacity: 0; } [data-header-transparent='true']:not(.meganav--visible) .header__logo--has-transparent .logo__img--transparent.lazyloaded { opacity: 1; transition: opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); } [data-header-transparent='true'] + .header__backfill { display: none; } /* ================ Large / Small Display Logic ================ */ @media only screen and (max-width: 479px) { .header__mobile { display: grid; } .header__desktop { display: none; } } @media only screen and (min-width: 480px) { .header__desktop { position: static; } .header__mobile { display: none; } } .js__header__clone { position: absolute; transform: translatey(-5000px); visibility: hidden; } .js__show__mobile .header__mobile, [data-header-style='drawer'] .header__mobile { display: grid; } .js__show__mobile .header__desktop, [data-header-style='drawer'] .header__desktop { display: none; } /* ============================================================================ #Site Nav and Dropdowns ============================================================================== */ .header__dropdown { --border: var(---color-nav-border); color: var(---color-nav-text); position: absolute; top: 100%; background-color: var(---color-nav); border-bottom: var(--border); visibility: hidden; } .header__dropdown.is-visible { visibility: visible; } .header__dropdown.is-visible:before { position: absolute; bottom: 100%; left: 0; right: 0; z-index: 1; height: calc(var(--menu-height) / 2 - var(--bar-text)); content: ''; } .navlink--child, .navlink--grandchild { margin: 0; padding: 0; } .navlink--child { font-weight: 700; } .header__dropdown__image { position: relative; } /* ============================================================================ #Large Meganav ============================================================================== */ .grandparent .header__dropdown { width: 100%; left: 0; background: var(--bg); border-bottom: 1px solid var(--border); } .grandparent .header__dropdown__inner { display: grid; padding: 32px 10%; grid-column-gap: 1.5em; grid-row-gap: 1.5em; } .grandparent.kids-4 .header__dropdown__inner { padding-left: 5%; padding-right: 5%; } .grandparent.kids-5 .header__dropdown__inner { padding-left: 1%; padding-right: 1%; } @media screen and (min-width: 990px) { .grandparent .header__dropdown__inner { padding-left: 20%; padding-right: 20%; } } .grandparent .navlink--child { width: 100%; border-bottom: 1px solid var(---color-nav-a10); padding-bottom: 10px; display: block; } .grandparent .navlink--grandchild { display: block; margin-top: 10px; } .grandparent.kids-1 .header__dropdown__inner { grid-template-columns: repeat(2, 1fr); direction: rtl; } .grandparent.kids-2 .header__dropdown__inner { grid-template-columns: repeat(2, 1fr); } .grandparent.kids-3 .header__dropdown__inner { grid-template-columns: repeat(3, 1fr); } .grandparent.kids-4 .header__dropdown__inner { grid-template-columns: repeat(4, 1fr); } .grandparent.kids-5 .header__dropdown__inner { grid-template-columns: repeat(5, 1fr); } .grandparent.kids-6 .header__dropdown__inner { grid-template-columns: repeat(3, 1fr); } .grandparent.kids-7 .header__dropdown__inner, .grandparent.kids-8 .header__dropdown__inner { grid-template-columns: repeat(4, 1fr); } .grandparent.kids-9 .header__dropdown__inner { grid-template-columns: repeat(3, 1fr); } .grandparent.kids-10 .header__dropdown__inner, .grandparent.kids-11 .header__dropdown__inner, .grandparent.kids-12 .header__dropdown__inner, .grandparent.kids-13 .header__dropdown__inner, .grandparent.kids-14 .header__dropdown__inner, .grandparent.kids-15 .header__dropdown__inner, .grandparent.kids-16 .header__dropdown__inner, .grandparent.kids-17 .header__dropdown__inner, .grandparent.kids-18 .header__dropdown__inner, .grandparent.kids-19 .header__dropdown__inner, .grandparent.kids-20 .header__dropdown__inner { grid-template-columns: repeat(5, 1fr); } /* ================ Hover animations ================ */ /* Basic Dropdown */ .menu__item.parent .navlink--child { opacity: 0; transform: translateY(-5px); transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1); } .menu__item.parent .is-visible .navlink--child { opacity: 1; transform: translateY(0); } /* Basic Meganav */ .menu__item.grandparent .navlink--child { opacity: 0; transition: opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1); } .menu__item.grandparent .navlink--grandchild { opacity: 0; transform: translateY(-5px); transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1); } .menu__item.grandparent .is-visible .navlink--child, .menu__item.grandparent .is-visible .navlink--grandchild { opacity: 1; transform: translateY(0); } /* Image Meganav */ .menu__item.grandparent .header__dropdown__image, .menu__item.grandparent .product-grid-item { opacity: 0; transform: translateY(-15px); transition: transform 0.75s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .menu__item.grandparent .is-visible .header__dropdown__image, .menu__item.grandparent .is-visible .product-grid-item { opacity: 1; transform: translateY(0); } /* dropdown inner link */ .header__dropdown .navlink .navtext { transition: color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); white-space: normal; } .header__dropdown .navlink:hover .navtext { color: var(--primary); } .header__dropdown { opacity: 0; transition: opacity 0.1s ease-out; } .header__dropdown.is-visible { opacity: 1; transition: opacity 0.2s ease-out; } /* Override visibility on collection bottom image */ .header__dropdown .product-grid-item { margin-bottom: 0; pointer-events: none; } .header__dropdown.is-visible .product-grid-item { pointer-events: auto; } /* ================ Hover animations ================ */ .parent .header__dropdown { border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg); padding: 6px 32px 18px; margin-left: -17px; } .parent .navlink--child { padding: 5px 0; display: block; } .hover__bar { position: absolute; bottom: var(--bar-bottom); left: 0; height: 2px; z-index: -1; opacity: var(--bar-opacity); background-color: var(--underline); transform: translateX(var(--bar-left)); width: var(--bar-width); transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, width 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } .navlink[href='#'] { cursor: default; } /* ================ Header cart status ================ */ [data-header-cart-count], [data-header-cart-full], [data-header-cart-price] { display: none; } .cart__status__parens [data-header-cart-count]:not([data-header-cart-count='0']) { display: inline-block; } .header__desktop__buttons--icons .header__cart__status, .header__mobile__button .header__cart__status { position: relative; } .header__desktop__buttons--icons .header__cart__status [data-header-cart-count], .header__mobile__button .header__cart__status [data-header-cart-count] { display: inline-block; position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } .header__desktop__buttons--icons .header__cart__status [data-header-cart-full='true'], .header__mobile__button .header__cart__status [data-header-cart-full='true'] { display: inline-block; width: 7px; height: 7px; background-color: var(--text); position: absolute; top: -15px; right: 5px; border-radius: 7px; z-index: -1; } .header__desktop__buttons--icons .header__cart__status [data-header-cart-full='true'] { top: -15px; right: 43px; } .header__desktop__buttons--icons .navlink--cart [data-header-cart-full='true'], .header__mobile__right [data-header-cart-full='true'] { transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); } .header__desktop__buttons--icons .navlink--cart:hover [data-header-cart-full='true'], .header__mobile__right:hover [data-header-cart-full='true'] { transform: translateY(8px); } .no-js .menu__item.grandparent:hover .header__dropdown, .no-js .menu__item.grandparent:hover .navlink, .no-js .menu__item.parent:hover .header__dropdown, .no-js .menu__item.parent:hover .navlink, .no-js .navlink--toplevel:focus + .header__dropdown, .no-js .navlink--toplevel:focus + .header__dropdown .navlink { opacity: 1 !important; visibility: visible !important; } .announcement__wrapper { position: relative; overflow: hidden; z-index: 5500; } @media only screen and (max-width: 767px) { .announcement__wrapper.desktop { display: none; } } .announcement__wrapper.mobile { display: none; } @media only screen and (max-width: 767px) { .announcement__wrapper.mobile { display: block; } } @keyframes ticker { 0% { transform: translateZ(0); visibility: visible; } to { transform: translate3d(-100%, 0, 0); } } .announcement__bar-outer .flickity-button { display: none; } .announcement__bar-outer--high { transform: translateY(var(--menu-height)); } [data-header-transparent='true'][data-header-sticky='static'] + .announcement__bar-outer--high, [data-header-transparent='true'][data-header-sticky='sticky'] + .announcement__bar-outer--high { position: absolute; z-index: 201; width: 100%; background-color: var(--bg); } .announcement__bar { display: flex; justify-content: space-between; align-items: center; text-align: center; background-color: #aba49d; color: var(--text); } .announcement__bar:not(.desktop):not(.mobile) { width: 100%; } .announcement__bar a:hover, .announcement__bar a:link { color: inherit; text-decoration: none; } .announcement__bar .icon { fill: currentColor; } .announcement__bar--error { display: none; } .announcement__bar .cart__message.is-hidden { visibility: visible; max-height: none; padding: 12px; border: none; opacity: 1; } .announcement__text { display: flex; flex-flow: row nowrap; align-items: center; } .announcement__text > * { font-size: inherit; } .announcement__text > div { display: flex; align-items: center; margin: 0 50px; } .announcement__text > .mobile { display: none !important; } @media only screen and (min-width: 480px) and (max-width: 767px) { .announcement__text > .mobile { display: flex !important; } .announcement__text > .desktop { display: none !important; } } .announcement__text * { white-space: nowrap; } .announcement__text a { position: relative; color: var(--text); } .announcement__text a:after { content: ''; position: absolute; left: 50%; bottom: -3px; height: 1px; width: 100%; transform: translateX(-50%); box-shadow: 0 -1px 0 0 currentColor; transition: opacity 0.2s linear; } .announcement__text a:hover:after { opacity: 0.5; } .announcement__text .cart-dropdown__message { padding: 0; border: none; font-size: inherit; } .announcement__text .cart-dropdown__message circle + circle { stroke: currentColor; } .announcement__more, .announcement__text, .announcement__text p, .rte.icon__bar__paragraph p { color: var(--text); font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; } .announcement__more.strong, .announcement__more .strong, .announcement__more strong, .announcement__text.strong, .announcement__text .strong, .announcement__text p.strong, .announcement__text p .strong, .announcement__text p strong, .announcement__text strong, .rte.icon__bar__paragraph p.strong, .rte.icon__bar__paragraph p .strong, .rte.icon__bar__paragraph p strong { font-weight: var(---font-weight-accent-bold); } .announcement__font.font--1 .announcement__more, .announcement__font.font--1 .announcement__text, .announcement__font.font--1 .announcement__text p, .announcement__font.font--1 .rte.icon__bar__paragraph p { font-size: calc(9px * var(---font-adjust-accent)); } .announcement__font.font--2 .announcement__more, .announcement__font.font--2 .announcement__text, .announcement__font.font--2 .announcement__text p, .announcement__font.font--2 .rte.icon__bar__paragraph p { font-size: calc(10px * var(---font-adjust-accent)); } .announcement__font.font--3 .announcement__more, .announcement__font.font--3 .announcement__text, .announcement__font.font--3 .announcement__text p, .announcement__font.font--3 .rte.icon__bar__paragraph p { font-size: calc(12px * var(---font-adjust-accent)); } .announcement__font.font--4 .announcement__more, .announcement__font.font--4 .announcement__text, .announcement__font.font--4 .announcement__text p, .announcement__font.font--4 .rte.icon__bar__paragraph p { font-size: calc(13.14426px * var(---font-adjust-accent)); } .announcement__font.font--5 .announcement__more, .announcement__font.font--5 .announcement__text, .announcement__font.font--5 .announcement__text p, .announcement__font.font--5 .rte.icon__bar__paragraph p { font-size: calc(15.51022px * var(---font-adjust-accent)); } .announcement__font.font--6 .announcement__more, .announcement__font.font--6 .announcement__text, .announcement__font.font--6 .announcement__text p, .announcement__font.font--6 .rte.icon__bar__paragraph p { font-size: calc(18.30206px * var(---font-adjust-accent)); } .announcement__font.font--7 .announcement__more, .announcement__font.font--7 .announcement__text, .announcement__font.font--7 .announcement__text p, .announcement__font.font--7 .rte.icon__bar__paragraph p { font-size: calc(21.59643px * var(---font-adjust-accent)); } .announcement__font.font--8 .announcement__more, .announcement__font.font--8 .announcement__text, .announcement__font.font--8 .announcement__text p, .announcement__font.font--8 .rte.icon__bar__paragraph p { font-size: calc(25.48379px * var(---font-adjust-accent)); } .announcement__font.font--9 .announcement__more, .announcement__font.font--9 .announcement__text, .announcement__font.font--9 .announcement__text p, .announcement__font.font--9 .rte.icon__bar__paragraph p { font-size: calc(30.07087px * var(---font-adjust-accent)); } .announcement__font.font--10 .announcement__more, .announcement__font.font--10 .announcement__text, .announcement__font.font--10 .announcement__text p, .announcement__font.font--10 .rte.icon__bar__paragraph p { font-size: calc(35.48363px * var(---font-adjust-accent)); } .announcement__font.font--1 .announcement__bar, .announcement__font.font--2 .announcement__bar, .announcement__font.font--3 .announcement__bar, .announcement__font.font--4 .announcement__bar { min-height: 36px; } .announcement__text .cart__message { border-bottom: none; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; } .announcement__text .cart__message [data-left-to-spend] { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-weight: var(---font-weight-accent-bold); } .announcement__text .cart__message [data-left-to-spend].strong, .announcement__text .cart__message [data-left-to-spend] .strong { font-weight: var(---font-weight-accent-bold); } .announcement__text .cart__graph { display: none; } .announcement__divider { margin-left: 0.33em; padding-right: 0.33em; width: 0; border-left: 1px solid; height: 10%; } .announcement__message { overflow: hidden; width: 100%; padding: 0 0px; font-size: 0; } @media only screen and (min-width: 480px) and (max-width: 767px) { .announcement__message { padding: 0 25px; } } .announcement__scale { display: inline-flex; transition: opacity 0.5s linear; } .announcement__scale.ticker--unloaded { width: max-content; } html.js [data-announcement-slider]:not(.flickity-enabled) > [data-slide]:not(:first-child) { display: none; } .ticker--animated { animation-iteration-count: infinite; animation-timing-function: linear; animation-name: ticker; animation-duration: var(--animation-time); display: flex; width: max-content; will-change: transform, padding, width; } .ticker--animated, .ticker--animated:hover { animation-play-state: paused; } .flickity-slider > .announcement__bar { min-height: 100%; } .announcement__bar-holder > .announcement__bar:hover .ticker--animated, .announcement__bar-holder > .announcement__bar [data-stop] .ticker--animated, .announcement__bar:hover .ticker--animated { animation-play-state: paused; } .announcement__bar-holder > .announcement__bar .ticker--animated, .is-selected .ticker--animated { animation-play-state: running; } .ticker__comparitor { position: absolute; transform: translatey(-5000px); visibility: hidden; } .ie .announcement__bar--error { display: block; height: auto; padding: 12px; } .announcement__bar--icon { white-space: nowrap; } .announcement__bar--icon .icon { width: auto; height: 1.1em; margin-top: -0.22em; } .announcement__bar--icon .icon__bar__icon { margin: 0 0.5em 0 0; } .announcement__bar--icon .icon__bar__image { margin: 0.5em; } .announcement__bar--icon .icon__bar__paragraph, .announcement__bar--icon .icon__bar__text { margin: 0; } .icon__bar__icon svg circle, .icon__bar__icon svg g, .icon__bar__icon svg path { stroke: var(--stroke); } .announcement__bar--icon .icon__bar__icon, .announcement__bar--icon .icon__bar__text { display: inline-block; vertical-align: middle; } .header__drawer { --border: var(---color-nav-a10); --muted: var(---color-nav-a50); --text: var(---color-nav-text); --text-light: var(---color-nav-text); --text-dark: var(---color-nav-text); --outer: 20px; color: var(--text); } .header__drawer .drawer__content { border: none; } .header__drawer__selects { display: flex; width: 100%; margin: 0; } .header__drawer__selects .popout-list { bottom: auto; top: 100%; min-width: calc(100% + 1px); } .drawer__top { display: flex; justify-content: center; padding: .5rem 0; } .drawer__top .icon-arrow-down { color: var(--muted); } .drawer__top__left { display: flex; justify-content: flex-start; height: 50px; } .drawer__button { height: 20px; color: var(--text); right: 1rem; top: 1.5rem; position: absolute; z-index: 2; } .drawer__account { display: flex; align-items: center; padding: 0 20px; width: 100%; height: 50px; border-bottom: 1px solid var(--border); position: relative; } .drawer__account__title { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); font-size: 18px; margin-left: 16px; white-space: nowrap; } /* ============================================================================ Gift Cards ============================================================================== */ /* Gift Card Colors always on a white background */ /* ============================================================================ #Base Styles ============================================================================== */ .template-giftcard, .template-giftcard body { background: var(---color-bg); } .template-giftcard a, .template-giftcard body a { text-decoration: none; } .template-giftcard .wrapper, .template-giftcard .wrapper .grandparent .header__dropdown__wrapper, .wrapper .grandparent .template-giftcard .header__dropdown__wrapper { max-width: 588px; } .template-giftcard .wrapper .grandparent .header__dropdown__wrapper iframe, .template-giftcard .wrapper .grandparent .header__dropdown__wrapper img, .template-giftcard .wrapper .grandparent .header__dropdown__wrapper object, .template-giftcard .wrapper iframe, .template-giftcard .wrapper img, .template-giftcard .wrapper object, .wrapper .grandparent .template-giftcard .header__dropdown__wrapper iframe, .wrapper .grandparent .template-giftcard .header__dropdown__wrapper img, .wrapper .grandparent .template-giftcard .header__dropdown__wrapper object { max-width: 100%; } .giftcard-header { padding: 30px 0; font-size: 1em; text-align: center; animation: fadein 0.5s ease-in-out 0.4s both; } .shop-url { display: none; } .giftcard { animation: slideup 0.8s ease-in-out; } .giftcard__border { background-color: var(--hairline); border-radius: 4px; border: 1px solid var(--border); padding: 1em; animation: container-slide 0.8s ease-in-out; } .giftcard__content { *zoom: 1; background-color: #fff; color: var(---color-text); border: 1px solid var(--muted); border-radius: 3px; animation: cardslide 0.8s ease-in-out; } .giftcard__content:after { content: ''; display: table; clear: both; } .giftcard__header { *zoom: 1; border-bottom: 1px solid var(--border); padding: 16px; } .giftcard__header:after { content: ''; display: table; clear: both; } .giftcard__title { text-align: center; margin-bottom: 0; } .giftcard__tag { display: block; float: right; background-color: var(--hairline); border: 1px solid transparent; color: #fff; padding: 10.6666666667px; border-radius: 4px; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1; } .giftcard__tag--active { background: transparent; color: var(---color-text); border: 1px solid var(---color-text-light); } .giftcard__wrap { position: relative; margin: 16px 16px 32px; } .giftcard__wrap img { position: relative; display: block; border-radius: 10px; z-index: 2; } .giftcard__wrap:after, .giftcard__wrap:before { content: ''; position: absolute; width: 47px; height: 47px; z-index: 3; } .giftcard__wrap:before { background: url(/cdn/s/assets/gift-card/corner-top-left-2ba3edcd9e97ba146cd01a8161365c5e.svg) 0 0 no-repeat; top: -1px; left: -1px; } .giftcard__wrap:after { background: url(/cdn/s/assets/gift-card/corner-bottom-right-1fb9bf49ff9564325e6b7c0fb0a7ff45.svg) 0 0 no-repeat; bottom: -1px; right: -1px; } .giftcard__code { position: absolute; bottom: 32px; text-align: center; width: 100%; z-index: 50; } .giftcard__code--medium { font-size: 0.875em; } .giftcard__code--small { font-size: 0.75em; } .giftcard__code__inner { display: inline-block; vertical-align: initial; background-color: #fff; padding: 0.5em; border-radius: 4px; max-width: 450px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); } .giftcard__code--small .giftcard__code__inner { overflow: auto; } .giftcard__code__text { font-weight: var(---font-weight-body); font-size: 1.875em; text-transform: uppercase; border-radius: 2px; border: 1px dashed var(--border); padding: 0.4em 0.5em; display: inline-block; vertical-align: initial; color: #777; line-height: 1; } .disabled .giftcard__code__text { color: #999; text-decoration: line-through; } .giftcard__amount { position: absolute; top: 0; right: 0; color: #fff; font-size: 2.75em; line-height: 1.2; padding: 16px; z-index: 50; } .giftcard__amount strong { display: block; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1); } .giftcard__amount--medium { font-size: 2em; } .tooltip { top: -50%; right: 50%; margin-top: 16px; z-index: 3; color: #fff; text-align: center; white-space: nowrap; animation: popup 0.5s ease-in-out 0.7s both; } .tooltip, .tooltip:before { display: block; position: absolute; } .tooltip:before { content: ''; left: 100%; bottom: 0; width: 0; height: 0; margin-left: -5px; margin-bottom: -5px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 5px solid #333; border-top: 5px solid rgba(51, 51, 51, 0.9); } .tooltip__label { display: block; position: relative; right: -50%; border: none; border-radius: 4px; background: #333; background: rgba(51, 51, 51, 0.9); min-height: 14px; font-weight: var(---font-weight-body); font-size: 12px; text-decoration: none; line-height: 16px; text-shadow: none; padding: 0.5em 0.75em; margin-left: 0.25em; } .tooltip__label small { text-transform: uppercase; letter-spacing: 0.1em; color: #b3b3b3; font-size: 0.875em; } .giftcard__instructions { text-align: center; margin: 0 16px 32px; } .giftcard__actions { position: relative; border-top: 1px solid var(--border); padding: 32px 16px; text-align: center; overflow: hidden; } .action-link { position: absolute; left: 16px; top: 50%; font-size: 0.875em; font-weight: var(---font-weight-body-bold); display: block; text-transform: uppercase; letter-spacing: 0.2em; color: var(---color-text-light); margin-top: -10px; } .action-link:focus, .action-link:hover { color: var(---color-text); } .action-link__print { display: inline-block; vertical-align: initial; width: 17px; height: 17px; vertical-align: middle; margin-right: 5px; opacity: 0.25; background-image: url(/cdn/s/assets/gift-card/icon-print-164daa1ae32d10d1f9b83ac21b6f2c70.png); background-repeat: no-repeat; background-position: 0 0; } .svg .action-link__print { background-image: url(/cdn/s/assets/gift-card/icon-print-6a10b2fb86d223b8c783c9696eaf4c31.svg); } .action-link:hover .action-link__print { opacity: 0.4; } .giftcard__footer { text-align: center; padding: 64px 0; animation: fadein 0.5s ease-in-out 0.4s both; } .giftcard__icon { width: 45px; display: inline-block; vertical-align: initial; } #QrCode img { padding: 32px; border: 1px solid var(--border); border-radius: 4px; margin: 0 auto 32px; } /* ============================================================================ #Media Queries ============================================================================== */ /* ================ Medium-down width ================ */ @media screen and (max-width: 580px) { .giftcard { font-size: 12px; } .giftcard-header { padding: 32px 0; } .header-logo { font-size: 2em; } .giftcard__actions, .giftcard__border { padding: 16px; } .giftcard__actions .btn { width: 100%; padding-left: 0; padding-right: 0; } .action-link { display: none; } } /* ================ Small width ================ */ @media screen and (max-width: 400px) { .giftcard__amount strong { text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); } .giftcard__wrap:after, .giftcard__wrap:before { display: none; } .giftcard__code { font-size: 0.75em; } .giftcard__code--medium { font-size: 0.65em; } .giftcard__code--small { font-size: 0.55em; } } /* ================ Small height ================ */ @media screen and (max-height: 800px) { .header-logo img { max-height: 90px; } } /* ============================================================================ #Print Styles ============================================================================== */ @media print { @page { margin: 0.5cm; } h2, h3, p { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } body, html { background-color: #fff; } .giftcard-header { padding: 10px 0; } .giftcard__border, .giftcard__content { border: 0; } .add-to-apple-wallet, .giftcard__actions, .giftcard__wrap:after, .giftcard__wrap:before, .tooltip { display: none; } .giftcard__title { float: none; text-align: center; } .giftcard__code__text { color: #555; } .shop-url { display: block; } .logo { color: #58686f; } } /* ============================================================================ #Keyframe Animations ============================================================================== */ @keyframes slideup { 0% { opacity: 0; -webkit-transform: translateY(2000px) rotate(10deg); } 60% { opacity: 1; -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); } to { -webkit-transform: translateY(0) rotate(0deg); } } @keyframes popup { 0% { opacity: 0; -webkit-transform: translateY(30px); } 60% { opacity: 1; -webkit-transform: translateY(-10px); } 80% { -webkit-transform: translateY(2px); } to { -webkit-transform: translateY(0); } } @keyframes container-slide { 0% { opacity: 0; -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(0deg); } } @keyframes fadein { 0% { opacity: 0; } to { opacity: 1; } } .drawer__menu { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); padding: 0 1rem; } .drawer__menu[data-sliderule-pane='0'] { transform: translateX(0); position: relative; overflow-y: scroll; overflow-x: hidden; } .drawer__menu[data-sliderule-pane='1'] { transform: translateX(-100%); } .drawer__menu[data-sliderule-pane='1'] .sliderule__panel.is-visible { overflow-y: auto; overflow-x: hidden; } .drawer__menu[data-sliderule-pane='1'] .sliderule__panel.is-visible .sliderule__panel { overflow-y: hidden; overflow-x: hidden; } .drawer__menu[data-sliderule-pane='2'] { transform: translateX(-200%); } .drawer__menu[data-sliderule-pane='2'] .sliderule__panel.is-visible { overflow-y: visible; overflow-x: visible; height: auto; } .drawer__menu[data-sliderule-pane='2'] .sliderule__panel.is-visible .sliderule__panel.is-visible { overflow-y: visible; overflow-y: scroll; } .sliderule__panel { position: absolute; top: 0; left: 100%; width: 100%; height: 100%; visibility: hidden; opacity: 0; height: 0; overflow: hidden; } .sliderule__panel, .sliderule__panel.is-visible { transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } .sliderule__panel.is-visible { visibility: visible; opacity: 1; height: auto; } .drawer__menu > .sliderule__wrapper { border-bottom: 1px solid var(--border); } .drawer__menu > .sliderule__wrapper > [data-animates] { opacity: 0; transform: translateY(-50%); transition: opacity 0.65s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s; } .header__drawer.drawer--visible .drawer__menu > .sliderule__wrapper > [data-animates] { opacity: 1; transform: translateY(0); } [data-sliderule-pane] [data-animates] { opacity: 0; transform: translateY(-50%); transition: opacity 0.65s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s; } [data-sliderule-pane] [data-animates].is-visible { opacity: 1; transform: translateY(0); } .sliderule-grid > * { opacity: 0; transition: opacity 2s cubic-bezier(0.215, 0.61, 0.355, 1); } .sliderule-grid > .is-visible { opacity: 1; } .sliderow { width: 100%; height: 60px; display: flex; align-items: center; position: relative; z-index: 10; padding: 0; font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); font-size: 18px; } .mobile__menu__dropdown .sliderow { font-size: 16px; height: 50px; } .mobile__menu__dropdown .sliderow .sliderow__title { justify-content: center; } .sliderow.strong, .sliderow .strong { font-weight: var(---font-weight-accent-bold); } .sliderow__title { position: absolute; padding-left: 20px; padding-right: 34px; height: 100%; width: 100%; display: flex; align-items: center; } .sliderule__panel .sliderow__title { padding: 0 34px; text-align: center; } .sliderule__chevron--left { position: absolute; left: 20px; } .sliderule__chevron--right { position: absolute; right: 20px; transition: all 0.4s; } .sliderule__panel .sliderow { padding-left: 0; } .sliderule__panel .sliderow .sliderow__title { justify-content: center; width: 100%; } .sliderule__panel > * { opacity: 0; transition: opacity 0.05s ease-out; } .sliderule__panel > :last-child { margin-bottom: 150px; } .sliderule__panel.is-visible > * { opacity: 1; transition: opacity 0.2s ease-out; } @media only screen and (max-width: 479px) { .js-grid[data-grid-small='1'] { grid-template-columns: repeat(1, 1fr); } .js-grid[data-grid-small='2'] { grid-template-columns: repeat(2, 1fr); } [data-toggle-grid='3'], [data-toggle-grid='4'], [data-toggle-grid='5'], [data-toggle-grid='6'] { display: none; } } .sliderule-grid { margin: 16px; } @media screen and (min-width: 768px) { .sliderule-grid { display: grid; column-gap: 16px; row-gap: 16px; } } .sliderule-grid.blocks-1 { grid-template-columns: repeat(1, 1fr); } .sliderule-grid.blocks-2, .sliderule-grid.blocks-3, .sliderule-grid.blocks-4, .sliderule-grid.blocks-5, .sliderule-grid.blocks-6, .sliderule-grid.blocks-7, .sliderule-grid.blocks-8, .sliderule-grid.blocks-9, .sliderule-grid.blocks-10 .sliderule-grid.blocks-11, .sliderule-grid.blocks-12, .sliderule-grid.blocks-13, .sliderule-grid.blocks-14, .sliderule-grid.blocks-15, .sliderule-grid.blocks-16, .sliderule-grid.blocks-17, .sliderule-grid.blocks-18, .sliderule-grid.blocks-19, .sliderule-grid.blocks-20 { grid-template-columns: repeat(2, 1fr); } /* ================ Generic accordion ================ */ .accordion__wrapper { border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); } .accordion__wrapper + .accordion__wrapper { border-top: none; } .accordion__title { color: var(--text-dark); font-size: 13px; font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; display: block; text-align: left; width: 100%; position: relative; padding: 1.5rem 30px 1.5rem 0; margin: 0; cursor: pointer; white-space: normal; } .accordion__title, .accordion__title.strong, .accordion__title .strong { font-weight: var(---font-weight-accent-bold); } .accordion__title:after { position: absolute; top: 50%; right: 5px; content: ''; display: inline-block; width: 8px; height: 8px; border-color: var(--text-dark); border-style: solid; border-width: 0 0 2px 2px; margin: -4px 0 0; vertical-align: middle; transform: rotate(-135deg); transform-origin: 50% 50%; transition: all 0.4s; } .accordion__title.accordion-is-open:after { transform: rotate(-45deg); } .accordion__body { display: none; overflow: hidden; padding-bottom: 2rem; text-align: left; } .accordion__body h3:first-of-type, .accordion__body h4:first-of-type, .accordion__body h5:first-of-type, .accordion__body h6:first-of-type, .accordion__body p:first-of-type { margin-top: 0; } .accordion__body.font--2 p { font-size: 1rem; } .accordion__body.font--3 p { font-size: calc(15.51022px * var(---font-adjust-body)); } @media (min-width: 480px) { .accordion__body.font--3 p { font-size: calc( (15.51022px + (221.24544vw - 1061.97811px) / 920) * var(---font-adjust-body) ); } } @media (min-width: 1400px) { .accordion__body.font--3 p { font-size: calc(17.72268px * var(---font-adjust-body)); } } .accordion__body.font--4 p { font-size: calc(18.30206px * var(---font-adjust-body)); } @media (min-width: 480px) { .accordion__body.font--4 p { font-size: calc( (18.30206px + (331.96033vw - 1593.40956px) / 920) * var(---font-adjust-body) ); } } @media (min-width: 1400px) { .accordion__body.font--4 p { font-size: calc(21.62167px * var(---font-adjust-body)); } } .accordion__body.font--5 p { font-size: calc(21.59643px * var(---font-adjust-body)); } @media (min-width: 480px) { .accordion__body.font--5 p { font-size: calc( (21.59643px + (478.19984vw - 2295.35926px) / 920) * var(---font-adjust-body) ); } } @media (min-width: 1400px) { .accordion__body.font--5 p { font-size: calc(26.37843px * var(---font-adjust-body)); } } .accordion__body.font--6 p { font-size: calc(25.48379px * var(---font-adjust-body)); } @media (min-width: 480px) { .accordion__body.font--6 p { font-size: calc( (25.48379px + (669.78954vw - 3214.98981px) / 920) * var(---font-adjust-body) ); } } @media (min-width: 1400px) { .accordion__body.font--6 p { font-size: calc(32.18169px * var(---font-adjust-body)); } } .accordion__body img { width: 100%; } /*====== Single accordion section ======*/ .accordion-neighbor + .accordion-neighbor .accordion__wrapper { border-top: none; } .section-accordion .accordion__body { padding-bottom: 1rem; } @media only screen and (min-width: 480px) and (max-width: 767px) { .section-accordion .section-accordion .accordion__body { margin-left: var(--gutter-offset); margin-right: var(--gutter-offset); } } /*====== Inner FAQ block content ======*/ @media only screen and (min-width: 480px) and (max-width: 767px) { .accordion__grid__wrapper { overflow: hidden; } } .accordion__grid { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; } @media only screen and (min-width: 480px) and (max-width: 767px) { .accordion__grid { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; padding-bottom: 30px; margin-bottom: -30px; -webkit-overflow-scrolling: touch; } } .accordion__block { width: 45%; padding: calc(var(--gutter) / 2) 0; font-size: calc(var(--font-2) * var(---font-adjust-body)); line-height: 1.3; } .accordion__block:first-child:last-child { width: 100%; } @media only screen and (min-width: 480px) and (max-width: 767px) { .accordion__block { flex: 0 0 auto; width: calc(100% - 50px); padding-left: 15px; padding-right: 15px; } } .accordion__grid--3 .accordion__block, .accordion__grid--6 .accordion__block, .accordion__grid--9 .accordion__block { width: 30%; } @media only screen and (min-width: 480px) and (max-width: 767px) { .accordion__grid--3 .accordion__block, .accordion__grid--6 .accordion__block, .accordion__grid--9 .accordion__block { width: calc(100% - 50px); } } .accordion__block-title { margin-bottom: calc(var(--gutter) / 3); font-size: calc(13.14426px * var(---font-adjust-accent)); font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; } .accordion__block-title, .accordion__block-title.strong, .accordion__block-title .strong { font-weight: var(---font-weight-accent-bold); } .accordion__block-image + .accordion__block-description { margin-top: calc(var(--gutter) / 3); } .accordion__block-icon .icon__animated { padding-bottom: calc(var(--inner) / 4); } .accordion__block-icon .icon { height: 25px; width: 25px; } @media only screen and (min-width: 480px) and (max-width: 767px) { .accordion__block-image { margin-left: -15px; margin-right: -15px; } } /* ================ Cart drawer accordions ================ */ .drawer__accordion { display: block; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); width: 100%; } .drawer__accordion .accordion__title { padding: 1rem var(--gutter); width: 100%; background: var(--bg); color: var(--text-dark); font-family: var(---font-stack-body); font-weight: var(---font-weight-body); font-style: var(---font-style-body); font-size: calc(var(--font-3) * var(---font-adjust-body)); text-transform: unset; letter-spacing: unset; } .drawer__accordion .accordion__title:after { content: ''; display: inline-block; width: 8px; height: 8px; border-color: var(--text); border-style: solid; border-width: 0 0 1px 1px; margin: -4px 0 0; vertical-align: middle; transform: rotate(-135deg); transform-origin: 50% 50%; transition: all 0.4s; right: var(--gutter); } .drawer__accordion .accordion__title.accordion-is-open:after { transform: rotate(-45deg); } .drawer__accordion .accordion__body { padding: 0 var(--gutter); } .drawer__accordion + .drawer__accordion { border-top: 1px solid hsla(0, 0%, 100%, 0); } .drawer__notes__input { margin-top: 10px; } /* Product accordion */ .product-accordion .accordion__title { font-size: 13px; padding: 1rem 30px 1rem 0; color: var(--text-dark); } /* ============================================================================ #Tabs ============================================================================== */ .tabs-wrapper { margin-top: 32px; } .tabs-wrapper, .tabs__head { overflow: hidden; position: relative; } .tabs__head { z-index: 2; } .tabs__head ul.tabs { padding-bottom: 30px; margin-bottom: -30px; } .tabs__head .tabs__arrow:before { display: block; } .tabs__arrow { display: block; width: 26px; height: 26px; max-height: none; margin-top: -17px; border-radius: 0; box-shadow: none; transition: all 0.2s; } .tabs__arrow, .tabs__arrow:before { position: absolute; top: 50%; background-color: var(--bg); } .tabs__arrow:before { left: 0; display: none; width: 100%; height: 200%; transform: translateY(-50%); content: ''; } .tabs__arrow:after { content: ''; display: inline-block; width: 8px; height: 8px; border-color: currentcolor; border-style: solid; border-width: 0 0 2px 2px; margin: -4px 0 0; vertical-align: middle; transform: rotate(-135deg); transform-origin: 50% 50%; transition: all 0.4s; } .tabs__arrow--prev { left: 0; transform: scaleX(-1); } .tabs__arrow--next { right: 0; } ul.tabs { display: block; overflow-x: auto; white-space: nowrap; margin: 0; padding: 0; list-style: none; position: relative; scrollbar-width: none; -ms-overflow-style: none; } ul.tabs::-webkit-scrollbar { width: 0; height: 0; } ul.tabs--center { text-align: center; } .tab-link { background: none; color: var(--text-light); display: inline-block; padding: 10px 0; margin: 0 40px 0 0; font-weight: var(---font-weight-body); cursor: pointer; vertical-align: bottom; border-bottom: 3px solid transparent; } .tab-link.current { border-bottom-color: var(--border); color: var(--text-dark); } .tabs--center > .tab-link { margin: 0 15px; } .tabs--pill > .tab-link { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); color: var(--text); border: none; padding: 6px 16px; border-radius: 100px; margin: 0; } .tabs--pill > .tab-link, .tabs--pill > .tab-link.strong, .tabs--pill > .tab-link .strong { font-weight: var(---font-weight-accent-bold); } .tabs--pill > .tab-link.current { border: none; color: var(--text); background-color: var(--hairline); } .tab-content { visibility: hidden; position: absolute; top: 0; width: 100%; opacity: 0; padding: 5px 15px 15px 0; min-height: 6rem; } .no-js .tab-content { visibility: visible; position: static; opacity: 1; display: inherit; } .tab-content:not(.current), .tab-content:not(.current) * { pointer-events: none !important; } .tab-content.current { visibility: visible; position: static; opacity: 1; display: inherit; } /* Product Tabs */ .product-tabs { max-width: 100%; } .product-tabs ul.tabs { padding-bottom: 32px; margin-bottom: -32px; } @media only screen and (max-width: 989px) { .product-tabs ul.tabs { padding-right: 16px; margin-right: -16px; } } .product-tabs ul.tabs::-webkit-scrollbar { -webkit-appearance: none; width: 0; height: 0; } .product-tabs .tab-link { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); padding-bottom: 0; border-bottom-width: 1px; white-space: normal; } .product-tabs .tab-link, .product-tabs .tab-link.strong, .product-tabs .tab-link .strong { font-weight: var(---font-weight-accent-bold); } .product-tabs .tab-link:last-child { margin-right: 0; } .product-tabs .tab-link.current { border-bottom-color: initial; } .product-tabs__head { padding-bottom: 16px; margin-bottom: -13px; } /* Tabs Collections */ .tabs-collections .tabs-collections__head, .tabs-collections ul.tabs { position: relative; margin: 0 auto; padding: var(--gutter) 0; text-align: center; } .tabs-collections .tabs-collections__head { padding-bottom: 0; } .tabs-collections .tabs-collections__head .grid__heading { padding: 0; } .tabs-collections ul.tabs { display: block; overflow-x: auto; white-space: nowrap; padding-bottom: calc(var(--gutter) * 3); margin-bottom: calc(var(--gutter) * -1); } .tabs-collections ul.tabs::-webkit-scrollbar { -webkit-appearance: none; width: 0; height: 0; } .tabs-collections .tab-link { padding: 5px; } .tabs-collections .tab-content { padding: 0; min-height: 0; } /* Tabs/Accordion Truncated */ .accordion-content__entry--truncate, .product-description__content--truncate, .tab-content__entry--truncate { display: none; opacity: 0; visibility: hidden; pointer-events: none; } .accordion-content__actions, .product-description__actions, .tab-content__actions { display: none; } .accordion-content__actions .text-link-default, .product-description__actions .text-link-default, .tab-content__actions .text-link-default { font-style: italic; } .accordion-content__actions button, .product-description__actions button, .tab-content__actions button { padding: 0; } .accordion-content__holder, .tab-content__holder, .tab__scroll { position: relative; } .accordion-content__holder.is-expanded .accordion-content__entry:not(.accordion-content__entry--truncate), .accordion-content__holder.is-expanded .product-description__content:not(.product-description__content--truncate), .accordion-content__holder.is-expanded .tab-content__entry:not(.tab-content__entry--truncate), .product-description__holder.is-expanded .accordion-content__entry:not(.accordion-content__entry--truncate), .product-description__holder.is-expanded .product-description__content:not(.product-description__content--truncate), .product-description__holder.is-expanded .tab-content__entry:not(.tab-content__entry--truncate), .tab-content__holder.is-expanded .accordion-content__entry:not(.accordion-content__entry--truncate), .tab-content__holder.is-expanded .product-description__content:not(.product-description__content--truncate), .tab-content__holder.is-expanded .tab-content__entry:not(.tab-content__entry--truncate) { display: none; } .accordion-content__holder.is-expanded .accordion-content__entry--truncate, .accordion-content__holder.is-expanded .product-description__content--truncate, .accordion-content__holder.is-expanded .tab-content__entry--truncate, .product-description__holder.is-expanded .accordion-content__entry--truncate, .product-description__holder.is-expanded .product-description__content--truncate, .product-description__holder.is-expanded .tab-content__entry--truncate, .tab-content__holder.is-expanded .accordion-content__entry--truncate, .tab-content__holder.is-expanded .product-description__content--truncate, .tab-content__holder.is-expanded .tab-content__entry--truncate { position: relative; display: block !important; opacity: 1; visibility: visible; pointer-events: auto; } .accordion-content__holder.is-expanded .accordion-content__actions, .accordion-content__holder.is-expanded .product-description__actions, .accordion-content__holder.is-expanded .tab-content__actions, .product-description__holder.is-expanded .accordion-content__actions, .product-description__holder.is-expanded .product-description__actions, .product-description__holder.is-expanded .tab-content__actions, .tab-content__holder.is-expanded .accordion-content__actions, .tab-content__holder.is-expanded .product-description__actions, .tab-content__holder.is-expanded .tab-content__actions { display: block; } /* ============================================================================ #Site Homepage ============================================================================== */ .homepage-collection .product-grid-item { margin-bottom: 0; } .placeholder-svg { fill: #b4b6b9; background-color: #f4f4f4; width: 100%; height: 100%; max-width: 100%; max-height: 100%; } .homepage-logos .placeholder-svg { background-color: #f7f7f7; display: block; } /* ================ Logos ================ */ .logo-bar { text-align: center; } @media only screen and (min-width: 990px) { .logo-bar { margin-top: -10px; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; margin-left: var(--gutter-offset); } } .logo-bar::after { /* Enable Flickity Carousel with watchCSS setting */ content: 'flickity'; display: none; } @media only screen and (min-width: 990px) { /* Disable Flickity Carousel */ .logo-bar::after { content: ''; } } .logo-bar__item { margin: 10px auto; padding: 0 15%; } @media only screen and (min-width: 768px) { .logo-bar__item { padding: 0 var(--gutter); } } @media only screen and (min-width: 990px) { .logo-bar__item { display: inline-block; vertical-align: middle; flex: 1; } } .logo-bar__image-wrapper { max-width: 160px; max-height: 160px; margin: 0 auto; } .logo-bar__image { display: block; margin: 0 auto; } .logo-bar__image img { width: 100%; height: 100%; } .logo-bar__link { display: block; } /* ================ Map ================ */ .map-section--display-map .map-section__image { display: none !important; } @media only screen and (min-width: 768px) { .map-section--load-error { width: 50%; margin: 0 auto; } } .map-section--load-error .errors { width: 100%; } .map-section__container { min-height: 100%; } .no-js .lazy-image { display: none; } .no-js .homepage-slideshow, .no-js .section--image:not(.double__block) { height: auto !important; } /* =============== Map Columns =============== */ .homepage-double { background-color: var(--bg); } .homepage-double form { margin-bottom: 0; } .double__block { position: relative; overflow: hidden; } .double__block .home__subtitle { text-align: inherit; margin-bottom: 18px; } .double__block .hero__content__wrapper > .wrapper, .double__block .wrapper .grandparent .hero__content__wrapper > .header__dropdown__wrapper, .wrapper .grandparent .double__block .hero__content__wrapper > .header__dropdown__wrapper { max-width: 526px; } .homepage-double .double__block { height: 100%; } /* .double__block .text-left .home__subtitle:after { right: auto; } .double__block .text-right .home__subtitle:after { left: auto; } */ @media only screen and (max-width: 479px) { .homepage-double.use_screen_full { height: auto !important; } .homepage-double.use_screen_full .double__block { min-height: var(--two-thirds); } .homepage-double.use_screen_three_quarters { height: auto; } .homepage-double.use_screen_three_quarters .double__block { height: var(--one-half); } .homepage-double.use_screen_two_thirds { height: auto; } .homepage-double.use_screen_two_thirds .double__block { height: var(--one-half); } .homepage-double.use_screen_one_half { height: auto; } .homepage-double.use_screen_one_half .double__block { height: var(--one-half); } .homepage-double.use_screen_one_third { height: auto; } .homepage-double.use_screen_one_third .double__block { height: var(--one-third); } .homepage-double.use_screen_one_fifth { height: auto; } .homepage-double.use_screen_one_fifth .double__block { height: 20var --one-fifth; } } /* === Hero Scroll == */ .main-content > .shopify-section:not(:first-child) .scroll_icon_wrap { display: none; } .main-content > .shopify-section:first-child .has-scroll-arrow .hero__content__wrapper[class*='align--bottom'] { padding-bottom: 40px; } .scroll_icon_wrap { text-align: center; position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; bottom: 0; z-index: 400; } .scroll_link { display: flex; position: absolute; justify-content: center; left: 50%; width: 250px; margin-left: -125px; bottom: 0; padding-bottom: 20px; padding-top: 20px; height: 60px; color: currentColor; } .scroll_link:hover .scroll_icon { opacity: 1; } .scroll_link:focus { outline: none; } .scroll_icon { position: absolute; } .scroll_icon svg { fill: currentColor; height: 15px; width: auto; } .bloop { transform-origin: center bottom; animation: bloop 1.8s infinite; } @keyframes bloop { 0%, 20%, 30%, 40%, 50%, 60%, to { transform: translateZ(0); } 15% { animation-timing-function: ease-out; transform: translate3d(0, -12px, 0); } 25% { animation-timing-function: ease-out; transform: translate3d(0, 6px, 0); } 35% { animation-timing-function: ease-out; transform: translate3d(0, -3px, 0); } 45% { animation-timing-function: ease-in; transform: translate3d(0, 2px, 0); } } /* ============================================================================ # Home slideshow ============================================================================== */ .homepage-slideshow { position: relative; } .slideshow__slide { width: 100%; } .slideshow__slide .wrapper, .slideshow__slide .wrapper .grandparent .header__dropdown__wrapper, .wrapper .grandparent .slideshow__slide .header__dropdown__wrapper { padding: 0 var(--outer); max-width: 1244px; } .slideshow__slide .hero__content { position: relative; z-index: 50; } .homepage-slideshow .flickity-enabled.is-draggable .flickity-viewport { cursor: default; } html.js .slideshow__wrapper:not(.flickity-enabled) > .slideshow__slide:not(:first-child) { display: none; } .homepage-slideshow .flickity-page-dots { position: absolute; bottom: var(--outer); right: var(--outer); } .homepage-slideshow .flickity-page-dots:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--text); opacity: 0.5; z-index: 0; } .custom-prev-next-button { position: absolute; top: 0; bottom: 0; opacity: 0; padding: 0; width: 50%; height: 100%; z-index: 10; } @media only screen and (max-width: 767px) { .custom-prev-next-button { width: 0; } } .custom-prev-next-button.previous { left: 0; cursor: url("data:image/svg+xml;utf8,") 5 11, auto; } .custom-prev-next-button.next { right: 0; cursor: url("data:image/svg+xml;utf8,") 15 11, auto; } /* ================ Play button ================ */ .hero__content .play__button { padding: 0; } .hero__content .play__button .icon { height: 60px; width: 60px; } .hero__content .play__button:active, .hero__content .play__button:focus { outline: none; } .play__button--text { padding: 0; font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); color: var(--text); } .play__button--text, .play__button--text.strong, .play__button--text .strong { font-weight: var(---font-weight-accent-bold); } .play__button--text .icon { margin-right: 8px; height: 33px; width: 33px; } .play__button--text:active, .play__button--text:focus { outline: none; } /* ============================================================================ Collection grid section ============================================================================== */ .collection-grid-item { position: relative; width: 100%; margin-top: 30px; } @media only screen and (max-width: 767px) { .collection-grid-item { margin-top: 15px; } } /* ============================================================================ Icon-columns ============================================================================== */ .icon__column { stroke: var(--text-light); } .icon__column.is--icon__column--condensed { align-items: center; } .icon__column__icon { width: 40px; height: 40px; margin-bottom: 1rem; background-size: contain; background-repeat: no-repeat; background-position: 50%; font-size: 0; } .icon__column.is--icon__column--condensed .icon__column__icon { margin-bottom: 0; } .icon__column__icon svg { width: 100%; height: 100%; } .icon__column__icon.color-picker svg circle, .icon__column__icon.color-picker svg g, .icon__column__icon.color-picker svg path { stroke: var(--stroke); } .icon--large .icon__column__icon { width: 60px; height: 60px; } .icon--extra-large .icon__column__icon { width: 80px; height: 80px; } .icon--medium .icon__column__icon { width: 50px; height: 50px; } .icon--left .icon__column { display: flex; } .icon--left .icon__column__icon { flex: 0 0 auto; margin-right: 12px; } /* TODO: Better organize this so extra specificity is not needed */ @media screen and (min-width: 768px) { .medium-up--icon--left .icon__column { display: flex; } .medium-up--text-left .medium-up--icon--left.icon__column .icon__column__icon { flex: 0 0 auto; margin-left: 0; margin-right: 20px; } } .text-center .icon--top .icon__column__icon { margin-left: auto; margin-right: auto; } @media only screen and (min-width: 768px) { .medium-up--text-center .medium-up--icon--top .icon__column__icon { margin-left: auto; margin-right: auto; } } .icon--left.icon--large .icon__column__icon, .icon--left.icon--medium .icon__column__icon { display: flex; align-items: center; } @media only screen and (min-width: 768px) { .medium-up--icon--left.icon--large .icon__column__icon, .medium-up--icon--left.icon--medium .icon__column__icon { display: flex; align-items: center; } } .icon__column__text { overflow: hidden; } .icon__column__heading { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: 13px; color: var(--text-dark); margin-bottom: 0; margin-top: 0; } .icon__column__heading + .rte.icon__column__paragraph { margin-bottom: 0.5rem; } .icon__column__heading, .icon__column__heading.strong, .icon__column__heading .strong { font-weight: var(---font-weight-accent-bold); } .rte.icon__column__paragraph { margin-bottom: 0; } .rte.icon__column__paragraph p { margin-top: 0.25em; font-size: 1rem; color: var(--text); } .homepage-icons .clearfix { padding-bottom: 40px; } .homepage-icons .home__subtitle + .grid { margin-top: 2rem; } .homepage-icons.is--containing-image-block { padding: var(--outer) 0; } @media only screen and (min-width: 768px) { .homepage-icons.is--containing-image-block { padding-top: 64px; padding-bottom: 48px; } } /* ================ Carousel Grid for XSmall and Small ================ */ @media only screen and (max-width: 767px) { .homepage-icons .column--carousel { margin-left: calc(var(--gutter-offset) * 2); margin-right: calc(var(--gutter-offset) * 2); } .homepage-icons .column--carousel .grid__item { margin-bottom: 40px; opacity: 0.5; width: 70vw; transition: opacity ease 0.2s; } .homepage-icons .column--carousel .grid__item.is-selected { opacity: 1; } } /* ================ Direction Row ================ */ /* Stack on Small */ @media only screen and (max-width: 479px) { .direction--row .grid__item:not(:first-child) .icon__column { padding-top: 30px; } } /* Overwrite when Flickity-Enabled */ @media only screen and (max-width: 479px) { .direction--row .flickity-enabled .grid__item .icon__column { padding-top: 0; } } /* =============== Image Columns =============== */ .index__column { padding-bottom: 16px; } @media only screen and (max-width: 479px) { .homepage-columns .grid__item:not(:last-child) a.text-link { margin-bottom: 40px; } } .column__image { position: relative; margin-bottom: 20px; } .column__image .play__button { position: absolute; z-index: 2; cursor: pointer; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; opacity: 1; display: flex; justify-content: center; align-items: center; color: currentColor; } .column__image .play__button .icon { fill: currentColor; width: 60px; height: 60px; } .column__svg { height: 100%; width: 100%; } .column__svg svg { width: 100%; } /* Main purpose is for adding the animated gifs to the "Benefits" section */ .column__image--additional { height: 85px; margin: -40px auto 20px; width: 85px; } .column__image--additional .image__fill { background: transparent !important; /* hide fade-in background as it is causing a white square around icon */ } /* ================ Brick layout ================ */ .brick__section { display: flex; align-items: stretch; --menu-height: 0px; } @media only screen and (max-width: 767px) { .brick__section { flex-direction: column; height: auto; } } @media only screen and (max-width: 767px) { .brick__section--reverse { flex-direction: column-reverse; } } @media only screen and (min-width: 768px) { .brick--2 .brick__block { width: 50%; } } .brick__block { width: 100%; height: 100%; position: relative; } .brick--border .brick__block { border: 1px solid var(--border); } @media only screen and (min-width: 768px) { .brick--border:not(.brick--margin) .brick__block + .brick__block { border-left: none; } } .brick--margin { margin: var(--outer); } @media only screen and (min-width: 768px) { .brick--margin .brick__block + .brick__block { margin-left: var(--outer); } } @media only screen and (max-width: 767px) { .brick--border:not(.brick--margin):not(.brick__section--reverse) .brick__block + .brick__block { border-top: none; } .brick--border.brick__section--reverse:not(.brick--margin) .brick__block + .brick__block { border-bottom: none; } .brick--margin:not(.brick__section--reverse) .brick__block + .brick__block { margin-top: var(--outer); } .brick--margin.brick__section--reverse .brick__block + .brick__block { margin-bottom: var(--outer); } } .homepage-icons .wrapper--brick { margin-top: 0; margin-bottom: 0; } .homepage-icons .brick__section--reverse { flex-direction: column-reverse; } @media only screen and (min-width: 768px) { .homepage-icons .brick__section--reverse { flex-direction: row-reverse; } } .wrapper--brick { /* Changing from margins as they were causing the background to show between sections */ /* Better solution will be needed to provide consistent spacing. /* /* Can't do negative margin hack as that messes with AOS */ padding-top: calc(var(--outer) / 2); padding-bottom: calc(var(--outer) / 2); } @media only screen and (min-width: 768px) { .wrapper--brick { max-width: 1180px; margin-left: auto; margin-right: auto; } .wrapper--brick .brick__block:first-child { margin-left: var(--outer); } .wrapper--brick .brick__block:last-child { margin-right: var(--outer); } } @media only screen and (min-width: 768px) { .wrapper--brick .hero__content { max-width: calc(100% - var(--outer)); } } @media only screen and (max-width: 767px) { .wrapper--brick .brick__section:not(.brick--margin) .brick__block { width: calc(100% - var(--outer) * 2); margin-left: var(--outer); margin-right: var(--outer); } } .brick__block__text { height: 100%; display: flex; /*padding: var(--outer);*/ align-items: center; background-color: var(--bg); } @media only screen and (max-width: 479px) { .brick__block__text--slider { padding: var(--outer) 0 var(--outer) var(--outer); } } .brick__block__text__inner { width: 100%; } .brick--1 .brick__block__text__inner .standard__rte { margin-left: auto; margin-right: auto; max-width: 1180px; } @media only screen and (min-width: 768px) { .brick__block .image__hero__frame, .brick__block .video-background, .brick__block__image, .brick__block__video { height: 100%; } } .brick__section.image-height .brick__block__image .image__hero__frame, .brick__section.image-height .brick__block__video { padding-top: var(--padding-ratio) !important; } .brick__section.image-height .brick__block { height: auto; } .brick__section .hero__content { padding: 0; } .brick__block__image, .brick__block__text, .brick__block__video { color: var(--text); } .brick__block__image { background-color: var(--bg); } .brick__block__svg { display: flex; align-items: center; justify-content: center; height: 100%; } @media only screen and (max-width: 767px) { .brick__block__svg { max-width: 500px; margin-left: auto; margin-right: auto; } } .brick__block__svg svg { height: 100%; width: 100%; } .brick__block__svg__inner { display: flex; align-items: center; justify-content: center; } .brick__block__product__inner { width: 100%; } .brick__block__product__inner .standard__kicker { max-width: 350px; width: 100%; margin: 0 auto; } .brick__product { background-color: var(--bg-accent); padding: var(--inner); display: block; max-width: 350px; margin: var(--outer) auto 0 auto; } .brick__product .product-grid-item .product__grid__info { padding-bottom: 0; } .brick__collection { max-width: 500px; padding: 0 75px 50px; margin: 0 auto; } @media only screen and (max-width: 479px) { .brick__collection { padding: 0; } .brick__collection .flickity-button.flickity-prev-next-button { display: none; } } .brick__collection .brick__product { background-color: var(--bg-accent); width: 100%; margin-right: var(--outer); } @media only screen and (max-width: 479px) { .brick__collection .brick__product { width: 80%; } } .brick__collection .brick__product .product-grid-item { width: 100%; } .brick__collection .flickity-button.flickity-prev-next-button { background: var(--bg-accent); } .brick__collection .flickity-badge-dots .flickity-page-dots:before { opacity: 0; } .brick__collection .flickity-page-dots { background: var(--bg-accent); bottom: 10px; } .brick__collection .flickity-page-dots .dot { background: var(--text); } .brick__collection:not(.flickity-enabled) .brick__product:not(:first-child) { display: none; } .text-center .brick__collection .flickity-page-dots { left: 50%; transform: translateX(-50%); } /* ============================================================================ #Gallery ============================================================================== */ .frame { padding: var(--outer) 0; } .gallery { *zoom: 1; list-style: none; margin: 0; padding: 0; } .gallery:after { content: ''; display: table; clear: both; } /* We use top and left padding to keep consistent padding for items within a single section */ .has-padding .gallery { margin-left: calc(var(--outer) * -1); padding: 0 var(--outer); } .has-padding .gallery__item { padding-left: var(--outer); } .gallery__item { width: 16.666%; float: left; /* These represent min size cutoffs */ } @media only screen and (min-width: 768px) and (max-width: 989px) { .gallery__item { width: 33.33%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .gallery__item { width: 50%; } } @media only screen and (max-width: 479px) { .gallery__item { width: calc(100% - 32px); } } /* Our galleries handle their own padding */ .frame .wrapper, .frame .wrapper .grandparent .header__dropdown__wrapper, .wrapper .grandparent .frame .header__dropdown__wrapper { max-width: 1180px; padding: 0; } /* === snippets/image-fill.liquid === */ .image__fill { position: relative; display: block; overflow: hidden; } /* === sections/gallery.liquid === */ .gallery__video .play__button, .gallery__zoom .zoom__trigger { position: absolute; z-index: 30; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; } .gallery__video .play__button svg { display: none; } .gallery .icon-zoom, .gallery__icon { position: absolute; bottom: 15px; left: 15px; z-index: 20; fill: #fff; } .gallery .icon-zoom svg, .gallery__icon svg { fill: #fff; } .frame-blocks-1 .gallery__item { width: 100%; } .frame-blocks-2 .gallery__item { width: 50%; } .frame-blocks-3 .gallery__item { width: 33.33%; } .frame-blocks-4 .gallery__item { width: 25%; } .frame-blocks-5 .gallery__item { width: 20%; } .frame-blocks-6 .gallery__item { width: 16.666%; } @media only screen and (max-width: 989px) { .frame-blocks-4 .slides-mobile-outer, .frame-blocks-5 .slides-mobile-outer, .frame-blocks-6 .slides-mobile-outer { max-width: none; overflow: hidden; } .frame-blocks-4 .slides-mobile-inner, .frame-blocks-5 .slides-mobile-inner, .frame-blocks-6 .slides-mobile-inner { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 30px; margin-bottom: -30px; } .frame-blocks-4 .has-padding, .frame-blocks-5 .has-padding, .frame-blocks-6 .has-padding { padding-right: 0; } .frame-blocks-4 .gallery__item, .frame-blocks-5 .gallery__item, .frame-blocks-6 .gallery__item { flex: 0 0 auto; width: calc(100% - 32px); } } @media only screen and (max-width: 767px) { .frame-blocks-2 .slides-mobile-outer, .frame-blocks-3 .slides-mobile-outer { max-width: none; overflow: hidden; } .frame-blocks-2 .slides-mobile-inner, .frame-blocks-3 .slides-mobile-inner { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 30px; margin-bottom: -30px; } .frame-blocks-2 .has-padding, .frame-blocks-3 .has-padding { padding-right: 0; } .frame-blocks-2 .gallery__item, .frame-blocks-3 .gallery__item { flex: 0 0 auto; width: calc(100% - 32px); } } @media only screen and (min-width: 768px) and (max-width: 989px) { .frame-blocks-4 .gallery__item, .frame-blocks-5 .gallery__item, .frame-blocks-6 .gallery__item { width: 30%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .frame-blocks-2 .gallery__item, .frame-blocks-3 .gallery__item, .frame-blocks-4 .gallery__item, .frame-blocks-5 .gallery__item, .frame-blocks-6 .gallery__item { width: 40%; } } /* We currently are not using the zoom-animation, but will keep the styles here */ /* Removed as part of FEAL-1094 / this was modified: class="lazy-image has-zoom-animation" */ .theme-animate-hover .lazy-image.has-zoom-animation .gallery__icon { transition: transform 2s cubic-bezier(0, 0, 0.35, 1); transform: translateX(0); } .theme-animate-hover .lazy-image.has-zoom-animation .icon-zoom { transition: transform 2s cubic-bezier(0, 0, 0.35, 1), opacity 0.2s linear; transform: translateX(0); opacity: 0; } .theme-animate-hover .lazy-image.has-zoom-animation .background-size-cover { transition: transform 2s ease-out; transform: scale(1); } .theme-animate-hover .lazy-image.has-zoom-animation:hover .gallery__icon, .theme-animate-hover .lazy-image.has-zoom-animation:hover .icon-zoom { transform: translateX(6px); } .theme-animate-hover .lazy-image.has-zoom-animation:hover .icon-zoom { opacity: 1; } .theme-animate-hover .lazy-image.has-zoom-animation:hover .background-size-cover { transform: scale(1.08); } /* End Zoom Animation */ /* Gallery Text Only */ .custom__title { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent-bold); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1.3px; font-size: 13px; color: var(--text-accent); margin: 0; line-height: 1; } .custom__text p { color: var(--text-dark); font-family: var(---font-stack-body); width: 100%; } .border--line { border-top: 1px solid var(--border); } .gallery__text { display: flex; flex-direction: column; } .gallery__item .lookbook__rte { margin: 0; padding: 0; } .gallery__carousel { padding-top: 32px; padding-bottom: 40px; } .gallery__carousel .gallery__item { max-width: 700px; padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); width: 100%; } @media only screen and (min-width: 768px) { .gallery__carousel .gallery__item { width: 50%; } } @media only screen and (min-width: 990px) { .gallery__carousel .gallery__item { width: 33.33%; } } /* ============================================================================ #Site Footer ============================================================================== */ .site-footer-wrapper { --bg: var(---color-footer-bg); --hairline: var(---color-footer-a5); --text: var(---color-footer-a90); --border: var(---color-footer-a15); --text-dark: var(---color-footer-text); position: relative; background-color: var(--bg); color: var(--text); text-align: left; } .site-footer-wrapper a { color: var(--text-dark); } .site-footer-wrapper a:hover { text-decoration: none; } .site-footer-wrapper .btn--secondary.btn { --btn-text: var(--text); --btn-text-hover: var(--text-dark); --btn-bg: var(--hairline); --btn-bg-hover: var(--border); } .footer-logo-wrapper { width: 100%; height: auto; top: 0; display: flex; justify-content: center; align-items: center; max-width: 80%; margin: 0 auto; padding-top: 32px; flex-direction: column; } .footer-logo img { display: block; position: relative; max-width: 120px; max-height: 80px; height: auto; } .site-footer { padding-top: 44px; padding-bottom: 16px; } .footer-quicklinks li { margin: 0 0 11px; } .footer__title { position: relative; padding-bottom: 10px; font-weight: var(---font-weight-accent-bold); } @media only screen and (max-width: 767px) { .footer__title { margin: 0; padding: 20px 0; } .grid__item:first-child .footer__title { border-top: 1px solid var(--border); } } .footer-quicklinks a, .footer-secondary a { position: relative; text-decoration: none; } .footer-quicklinks a:after, .footer-secondary a:after { content: ''; right: 0; position: absolute; bottom: -1px; height: 1px; background: currentColor; opacity: 0.25; transition: width 0.2s ease; left: 0; width: 0; } .footer-quicklinks a:hover:after, .footer-secondary a:hover:after { width: 100%; } .footer-secondary { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); } .footer-secondary.strong, .footer-secondary .strong { font-weight: var(---font-weight-accent-bold); } .footer-secondary-wrapper { text-align: center; position: relative; margin: 20px 0 0; } .footer-payment, .footer-secondary { margin-bottom: 0; margin-top: 0; } .footer-social { padding: 0; margin-top: 10px; } .footer-payment, .footer-social { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); margin-bottom: 0; display: inline-block; } .footer-payment.strong, .footer-payment .strong, .footer-social.strong, .footer-social .strong { font-weight: var(---font-weight-accent-bold); } .footer-payment a, .footer-social a { text-decoration: none; } .footer-payment, .footer-secondary, .footer-selects, .footer-social { display: block; width: 100%; } @media only screen and (max-width: 767px) { .footer-payment, .footer-secondary, .footer-selects, .footer-social { margin: 15px 0 0; } } .footer-secondary li { margin: 10px 15px; } .footer-payment li, .footer-social li { margin: 10px; } @media only screen and (max-width: 767px) { .footer-payment li, .footer-secondary li, .footer-social li { margin: 5px; } .site-footer { padding-bottom: 32px; } } .site-footer .input-group-field { background: white; color: var(---color-text-dark); } .site-footer .input-group--inner-button { border: none; border-radius: 0; padding: 0; } .site-footer .input-group input:-webkit-autofill, .site-footer .input-group input:-webkit-autofill:active, .site-footer .input-group input:-webkit-autofill:focus, .site-footer .input-group input:-webkit-autofill:hover { -webkit-text-fill-color: var(---color-text-dark) !important; } .footer__disclaimer { font-size: 12px; max-width: 600px; margin: 1rem auto; padding: 5px; } .payment-icon { width: 35px; height: 22px; } .social-icons li { margin: 0 8px 16px; vertical-align: middle; } @media only screen and (max-width: 767px) { .social-icons li { margin: 0 16px 16px; } } .social-icons li svg { width: 20px; height: 20px; } .social-icons li svg path { fill: var(---color-footer-a90); } .social-icons li a:hover path { fill: var(---color-footer-text); } .js-grid { display: grid; column-gap: var(--gutter); row-gap: var(--gutter); } .js-grid > * { min-width: 0; } .js-grid__full-row { grid-column-start: 1; grid-column-end: -1; } @media only screen and (min-width: 990px) { .js-grid[data-grid-large='1'] { grid-template-columns: repeat(1, minmax(0, 1fr)); } .js-grid[data-grid-large='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .js-grid[data-grid-large='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .js-grid[data-grid-large='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); } .js-grid[data-grid-large='5'] { grid-template-columns: repeat(5, minmax(0, 1fr)); } .js-grid[data-grid-large='6'] { grid-template-columns: repeat(6, minmax(0, 1fr)); } .js-grid[data-grid-large='7'], .js-grid[data-grid-large='8'] { grid-template-columns: repeat(4, minmax(0, 1fr)); } [data-toggle-grid='1'] { display: none !important; } } @media only screen and (min-width: 768px) and (max-width: 989px) { .js-grid[data-grid-medium='1'] { grid-template-columns: repeat(1, 1fr); } .js-grid[data-grid-medium='2'] { grid-template-columns: repeat(2, 1fr); } .js-grid[data-grid-medium='3'] { grid-template-columns: repeat(3, 1fr); } [data-toggle-grid='3'], [data-toggle-grid='4'], [data-toggle-grid='5'], [data-toggle-grid='6'] { display: none !important; } } @media only screen and (max-width: 767px) { .js-grid[data-grid-small='1'] { grid-template-columns: repeat(1, 1fr); } .js-grid[data-grid-small='2'] { grid-template-columns: repeat(2, 1fr); } .js-grid[data-grid-small='3'] { grid-template-columns: repeat(3, 1fr); } [data-toggle-grid='3'], [data-toggle-grid='4'], [data-toggle-grid='5'], [data-toggle-grid='6'] { display: none !important; } } [data-toggle-grid] { cursor: pointer; padding: 0 10px; color: var(--text-light); height: 100%; align-items: center; display: flex; } [data-toggle-grid]:hover { color: var(--primary); } [data-toggle-grid]:last-child { padding-right: 20px; } .homepage-collection-tabs { position: relative; overflow: hidden; } .wrapper.collection-tabs, .wrapper .grandparent .collection-tabs.header__dropdown__wrapper { max-width: calc(1180px + var(--gutter)); } @media only screen and (max-width: 479px) { .wrapper.collection-tabs, .wrapper .grandparent .collection-tabs.header__dropdown__wrapper { margin: 0; padding-right: 0; } } .collection-tabs { --buttons-top: 0; } .collection-tabs .flickity-button { top: var(--buttons-top); } @media only screen and (max-width: 479px) { .collection-tabs .flickity-prev-next-button { display: none; } } .collection-tabs .flickity-prev-next-button.previous { left: var(--gutter); } .collection-tabs .flickity-prev-next-button.next { right: var(--gutter); } @media only screen and (min-width: 1400px) { .collection-tabs .flickity-prev-next-button.previous { left: -70px; } .collection-tabs .flickity-prev-next-button.next { right: -70px; } .collection-tabs .flickity-button { background: var(--hairline); color: var(--text); } .collection-tabs .flickity-button:hover { background: var(--hairline-hover); } } .collection-tabs .tab-content { margin-top: var(--wide); padding: 0; } .collection-tabs .tabs__arrow { height: 36px; } .palette--dark .flickity-button { background: var(--bg); color: var(--text); } .palette--dark .flickity-button:hover { background: var(--bg-accent); } .flickity-grid .product-grid-slide { position: relative; overflow: hidden; padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); } @media only screen and (max-width: 479px) { .flickity-grid .product-grid-slide { padding-left: 0; padding-right: var(--gutter); } } .product-grid-slide .product-grid-item { width: 100%; } @media only screen and (min-width: 480px) { .flickity-grid[data-grid-large='1'] .product-grid-slide { width: 100%; } .flickity-grid[data-grid-large='2'] .product-grid-slide { width: 50%; } .flickity-grid[data-grid-large='3'] .product-grid-slide { width: 33.33%; } .flickity-grid[data-grid-large='4'] .product-grid-slide { width: 25%; } .flickity-grid[data-grid-large='5'] .product-grid-slide { width: 20%; } .flickity-grid[data-grid-large='6'] .product-grid-slide { width: 16.66%; } } [data-grid-large] > .product-grid-slide { display: inline-block; } @media only screen and (max-width: 479px) { .flickity-grid[data-grid-large] .product-grid-slide { width: 90%; } } /* Flickity hackfix */ @media only screen and (max-width: 479px) { .tab-content { margin-left: var(--gutter-offset); width: calc(100% + var(--gutter) * 2); } .brick__collection { margin-left: calc(var(--gutter) * -1); width: calc(100% + var(--outer)); } .brick__collection .flickity-page-dots { display: none; } .brick__collection.flickity-enabled, .brick__collection.flickity-enabled .flickity-viewport, .flickity-grid.flickity-enabled, .flickity-grid.flickity-enabled .flickity-viewport { max-width: none; overflow: hidden; position: static !important; } .brick__collection.flickity-enabled .flickity-slider, .flickity-grid.flickity-enabled .flickity-slider { transform: none !important; left: auto !important; position: static !important; display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .brick__collection.flickity-enabled .flickity-slider::-webkit-scrollbar, .flickity-grid.flickity-enabled .flickity-slider::-webkit-scrollbar { display: none; } .brick__collection.flickity-enabled .flickity-slider:before, .flickity-grid.flickity-enabled .flickity-slider:before { content: ''; padding-left: var(--gutter); } .brick__collection.flickity-enabled .flickity-slider:last-child:after, .flickity-grid.flickity-enabled .flickity-slider:last-child:after { content: ''; padding-right: 1px; } .brick__collection.flickity-enabled .brick__product, .brick__collection.flickity-enabled .product-grid-slide, .flickity-grid.flickity-enabled .brick__product, .flickity-grid.flickity-enabled .product-grid-slide { flex: 0 0 auto; position: relative !important; left: auto !important; margin-bottom: 16px; } } /* ============================================================================ #Product and Collection Grids ============================================================================== */ @media screen and (min-width: 990px) { .homepage-collection__grid { padding: 0 100px; } } .product-grid-item { position: relative; text-align: center; cursor: pointer; margin-bottom: calc( var(--outer) * 2 ); /* Move to be just for .mobile__menu__dropdown if necessary */ } .on-sale { color: var(--primary); } .compare-at { margin-top: 16px; text-decoration: line-through !important; color: var(--text-light); } .product__grid__info a { display: block; text-decoration: none; } .price_compare { margin-right: 16px; opacity: 0.8; text-decoration: line-through; } .product-grid-item .form__selectors { padding-bottom: 10px; } .product-grid-item .product__form__outer { margin-top: 10px; } .product-grid-item .radio__fieldset input { display: none; } .product-single .radio__fieldset input { display: none; } /* ================ Collection ================ */ .product__grid__title { color: var(--text-dark); font-family: var(---font-stack-heading); font-weight: var(---font-weight-heading); font-style: var(---font-style-heading); font-size: 1.3rem; line-height: 1.2; margin: 0 0 0.5rem; word-break: break-word; } .product__grid__title.strong, .product__grid__title .strong { font-weight: var(---font-weight-accent-bold); } /* .product__grid__text { margin-bottom: 1rem; } */ .product__grid__price { margin: 1rem 0; color: var(--text-accent); font-weight: var(---font-weight-body); } .grid__swatch__placeholder, .product__grid__price { font-size: 18px; } /* = swatches on collections = */ .grid__swatch__placeholder { margin: 0; padding: 0; } .grid__swatch__container { margin: 4px 0; min-height: 30px; position: relative; display: flex; align-items: flex-start; } .text-center .grid__swatch__container { justify-content: center; } .text-right .grid__swatch__container { justify-content: flex-end; } .grid__swatch__container .swatch__button { padding: 10px 0 0; } .grid__swatch__container .swatch__button label { width: 19px; height: 19px; margin: 0 6px; cursor: pointer; } .grid__swatch__container .swatch__button input:checked ~ label:after { content: ''; position: absolute; top: -4px; left: -4px; width: 27px; height: 27px; } .product__grid__info--under .grid__swatch__hover { position: absolute; margin: 0; opacity: 0; height: 0; } .focus-enabled .grid__swatch__container .grid__swatch__hover, .product-grid-item:hover .grid__swatch__container .grid__swatch__hover { transition: opacity 0.5s linear; visibility: visible; opacity: 1; height: auto; } /* Keep text visible when tabbing */ .focus-enabled .grid__swatch__container .grid__swatch__placeholder, .product-grid-item:hover .grid__swatch__container .grid__swatch__placeholder, .product__grid__info--hover .grid__swatch__placeholder, body:not(.focus-enabled) .product-grid-item:hover .grid__swatch__container .grid__swatch__placeholder { display: none; } .text-left .grid__swatch__container .swatch__button label { margin: 0 10px 0 0; } .text-right .grid__swatch__container .swatch__button label { margin: 0 0 0 10px; } /* = Hover style settings = */ @media only screen and (max-width: 989px) { .product-grid-item .product__grid__info--hover { position: relative; padding: 8px 0; } } @media only screen and (min-width: 768px) { .product-grid-item .product__grid__info--hover { padding: 8px 0; } .product-grid-item .product__grid__info--hover .product__grid__price { opacity: 0; transform: translateY(10px); transition: all 0.2s ease-out; } .product-grid-item:hover .product__grid__info--hover .product__grid__price { opacity: 1; transform: translate(0); } } .product-grid-item .product__grid__info--under { position: relative; padding: 16px 0 0; } /* @media only screen and (min-width: 768px) { .product-grid-item .product__grid__info--under { padding: 16px 16px 0; } } */ .product-grid-item .compare-at { margin-right: 8px; } label.quatity-selector { position: absolute; top: -20px; } .product__badge { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); position: absolute; left: calc(var(--inner) / 2); top: calc(var(--inner) / 2); padding: 5px 10px; background: #9EBDC0; color: #FFFFFF; z-index: 400; border-radius: 4px; } .product__badge, .product__badge.strong, .product__badge .strong { font-weight: var(---font-weight-accent-bold); } .lazy-image { display: block; position: relative; background-size: cover; } .lazy-image img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: auto; } .fade-in.lazyloaded { opacity: 1; } .fade-in { opacity: 0; transition: opacity 0.65s cubic-bezier(0.215, 0.61, 0.355, 1); } .collection__image__top { display: block; } .collection__image__bottom, .collection__image__top { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: 50%; overflow: hidden; } .collection__image__bottom { z-index: 1; opacity: 0; visibility: hidden; transition: opacity 0.85s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0s linear 1s; } .double__image .collection__image__bottom .img-object-cover { height: 100%; } @media only screen and (min-width: 480px) { .double__image:hover .collection__image__bottom { opacity: 1; visibility: visible; height: 100%; width: 100%; transition: opacity 0.85s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0s linear 0s; } .double__image:hover .collection__image__top { opacity: 0; } } @media only screen and (max-width: 479px) { .collection__image__bottom { display: none; } } .product-grid-item__slide { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background-size: cover; background-position: 50%; z-index: 5; } .price-per-unit { opacity: 0.75; } .product-grid-item .spr-badge[data-rating='0.0'] { display: none; } /* ============================================================================ #Collections ============================================================================== */ .collection { margin-top: var(--gutter); padding-bottom: 128px; } .collection__content { display: flex; flex-flow: row; } .collection__products { flex-grow: 1; } .collection__heading { padding-top: var(--gutter); } .collection__heading .collection__heading__text:last-child { margin-bottom: 0; } /* Collection nav bar */ .collection__nav { display: flex; border: 1px solid var(--border); justify-content: space-between; height: 3.3em; margin-bottom: var(--gutter); } .collection__filters__toggle, .popout--navbar .popout__toggle { padding: 0 20px; height: 100%; color: var(--text-light); border-radius: 0; font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-weight: var(---font-weight-accent-bold); font-size: calc(10px * var(---font-adjust-accent)); border: none; border-right: 1px solid var(--border); margin: 0; display: flex; align-items: center; } .collection__filters__toggle.strong, .collection__filters__toggle .strong, .popout--navbar .popout__toggle.strong, .popout--navbar .popout__toggle .strong { font-weight: var(---font-weight-accent-bold); } .collection__filters__toggle .icon, .popout--navbar .popout__toggle .icon { margin-left: 8px; margin-top: -2px; } @media only screen and (max-width: 479px) { .collection__filters__toggle, .popout--navbar .popout__toggle { padding: 0 15px; } } .collection__filters__toggle .badge { margin-left: 5px; margin-right: 2px; } .popout--navbar, .popout--navbar .popout { height: 100%; } .popout--navbar .popout-list { z-index: 1000; max-height: 90vh; top: 100%; bottom: auto; left: -1px; } .collection__layout { display: flex; align-items: center; overflow-x: hidden; } .collection__nav__buttons { display: flex; } .no-js .collection__nav { display: none; } .list__collections { padding-top: 50px; padding-bottom: 128px; } .collection-list-item:not(first-child) { margin-top: 30px; } .collection-list__heading hr { margin: 10px 0; } .collection-list__heading__text { display: flex; justify-content: space-between; } @media only screen and (max-width: 767px) { .collection__filters__outer { position: fixed; z-index: 20050; top: 0; left: 0; height: 100%; min-width: 70%; max-width: 90%; background: var(--bg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 3px 12px rgba(0, 0, 0, 0.02); transform: translate3d(-100%, 0, 0); transition: transform 0.5s ease; } .drawer--visible .collection__filters__outer { transform: translateZ(0); } .collection__filters__inner { padding-bottom: 200px; padding-top: var(--gutter); padding-left: 16px; padding-right: 16px; opacity: 0; transform: translate3d(-100%, 0, 0); transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s; } .collection__filters__inner .sidebar__item .icon { right: 0; } .drawer--visible .collection__filters__outer .collection__filters__inner { opacity: 1; transform: translateZ(0); } } .collection__filters__inner { overflow-y: auto; height: 100%; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .collection__filters__toggle .hide-filters { display: none; } @media only screen and (min-width: 768px) { .collection__filters__wrapper { transition: width 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s; min-width: 250px; max-width: 250px; width: 250px; margin-left: -250px; transition: width 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.01s, margin-left 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.01s; } .drawer--visible.collection__filters__wrapper, .filters--default-visible.collection__filters__wrapper { margin-left: 0; } .drawer--visible .collection__filters__inner, .filters--default-visible .collection__filters__inner { opacity: 1; transform: translateZ(0); transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s; } .drawer--visible .show-filters, .filters--default-visible .show-filters { display: none; } .drawer--visible .hide-filters, .filters--default-visible .hide-filters { display: inline-block; } .collection__filters__inner { transform: translate3d(-100%, 0, 0); opacity: 0; padding-left: 10px; margin-left: -10px; padding-right: 32px; transition: opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .sidebar__heading:first-of-type { margin-top: 0; } .collection__filters__wrapper .drawer__top, .collection__filters__wrapper .drawer__underlay { display: none; } } /* Set thickness of active-state marker */ .sidebar__navigation__list { margin: 0; } @media only screen and (max-width: 767px) { .sidebar__navigation__list { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; } } .sidebar__navigation__list .swatch__button { padding: 0; margin: 8px 6px 0 4px; font-size: 0; } .sidebar__navigation__list .swatch__button label { margin-left: 0; } .sidebar__navigation__list .swatch__button.is-hidden { overflow: hidden; width: 0; padding: 0; } .sidebar__heading { position: relative; display: block; width: 100%; font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); padding: 0; margin: 0 0 4px; color: var(--text); cursor: pointer; text-align: left; } .sidebar__heading, .sidebar__heading.strong, .sidebar__heading .strong { font-weight: var(---font-weight-accent-bold); } .sidebar__heading-chevron { position: absolute; top: 0; right: 10px; transform: rotate(90deg); transition: transform 0.3s; } .accordion-is-open > .sidebar__heading-chevron { transform: rotate(-90deg); } .sidebar__filter__group .icon-box, .sidebar__filter__group .icon-reset { position: absolute; top: 6px; right: 8px; z-index: 0; } .sidebar__filter__group .filter__button { margin: 0; } .sidebar__filter__group .filter__button label, .sidebar__filter__group .sidebar__navigation__list + button { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); width: 100%; margin: 0; padding: 4px 25px 4px 0; display: block; position: relative; z-index: 5; } .sidebar__filter__group .filter__button label.strong, .sidebar__filter__group .filter__button label .strong, .sidebar__filter__group .sidebar__navigation__list + button.strong, .sidebar__filter__group .sidebar__navigation__list + button .strong { font-weight: var(---font-weight-accent-bold); } .sidebar__filter__group .filter__button label:hover .checkbox-core, .sidebar__filter__group .sidebar__navigation__list + button:hover .checkbox-core { fill: var(--border); } .sidebar__filter__group .filter__button input:focus + label { outline-color: var(--secondary) !important; outline-offset: -2px !important; outline-style: auto !important; outline-width: 5px !important; } .sidebar__filter__group .sidebar__navigation__list + button { display: none; padding: 0; margin-top: 4px; color: var(--text); font-weight: var(---font-weight-accent-bold); cursor: pointer; text-transform: uppercase; text-align: left; transition: color 0.3s; } .sidebar__filter__group .sidebar__navigation__list + button:hover { color: var(--border); } .sidebar__filter__group .accordion-is-open ~ button { display: block; } .icon-box { width: 15px; height: 15px; } .icon-reset { opacity: 0; width: 12px; } .checkbox-border { stroke: var(--border); } .checkbox-core { fill: transparent; } .sidebar__heading.has-filters a { text-decoration: none; width: 100%; display: block; } .sidebar__heading.has-filters a:hover > .icon-reset { fill: var(--primary); } .sidebar__heading.has-filters .icon-reset { fill: var(--text-light); opacity: 1; } .sidebar__item { padding: 0; margin: 0; position: relative; } .sidebar__item a, .sidebar__item span { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); padding: 4px 50px 4px 0; text-decoration: none; width: 100%; display: block; position: relative; z-index: 5; } .sidebar__item a.strong, .sidebar__item a .strong, .sidebar__item span.strong, .sidebar__item span .strong { font-weight: var(---font-weight-accent-bold); } .sidebar__item:hover > .icon-box .checkbox-core { fill: var(--border); } .sidebar__item--active > .icon-box .checkbox-core { fill: var(--text-dark) !important; } .collection__active__filters, .sidebar__filter__group { margin-bottom: 32px; } .filter__button input { opacity: 0; width: 0; height: 0; display: block; } .filter__button input .icon-box { opacity: 1; } .filter__button input .icon-reset { opacity: 0; } .filter__button input:checked ~ label .icon-box .checkbox-core { fill: var(--text-dark); } .filter__button input:checked ~ label:hover .icon-box { opacity: 0; } .filter__button input:checked ~ label:hover .icon-reset { opacity: 1; } .filter__button input:disabled ~ label { color: var(--text-light); text-decoration: line-through; cursor: default; } .filter__button input:disabled ~ label .icon-box { opacity: 0; } .active__filters__clear, .active__filters__remove { display: inline-block; line-height: 1; text-align: center; white-space: nowrap; vertical-align: initial; border-radius: var(--radius-sm); font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-weight: var(---font-weight-accent-bold); font-size: calc(10px * var(---font-adjust-accent)); background-color: var(--hairline); color: var(--text); padding: 8px 14px; margin-right: 7px; margin-bottom: 7px; } .active__filters__clear.strong, .active__filters__clear .strong, .active__filters__remove.strong, .active__filters__remove .strong { font-weight: var(---font-weight-accent-bold); } .active__filters__clear { background-color: var(--hairline-hover); } .filter__x { margin-left: 0.5em; } .filter__price__fields { display: flex; align-items: center; justify-content: flex-start; max-width: 100%; margin: 0 0 25px; } .filter__price__fields label { position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } .filter__price__field { display: flex; align-items: center; flex: 1; max-width: calc(50% - 20px); padding: 4px 0; border-bottom: 1px solid var(--border); border-radius: 0; } .filter__price__field span { margin-right: 5px; } .filter__price__spacer { flex: 0 0 40px; position: relative; padding: 5px; font-size: 0; text-align: center; } .filter__price__spacer:before { position: absolute; top: 50%; left: 50%; width: 6px; height: 1px; margin-left: -3px; background: currentColor; content: ''; } input[type='number'].filter__price__input { border: 1px solid transparent; border-radius: 0; margin: 0; -webkit-appearance: auto; -moz-appearance: auto; } .filter__price__input { flex: 1; display: block; min-width: 0; max-width: 100%; width: auto; padding: 0 3px; border: 1px solid transparent; border-radius: 0; margin: 0; font-family: inherit; font-size: inherit; font-weight: inherit; text-align: right; } .range { position: relative; display: block; height: 36px; margin-left: -8px; margin-right: -8px; -webkit-user-select: none; user-select: none; opacity: 0; } .range.is-initialized { opacity: 1; } .range__dot { position: absolute; z-index: 2; display: block; width: 36px; height: 36px; padding: 8px; } .range__dot span { display: block; width: 100%; height: 100%; background: var(--text); border: 2px solid var(--bg); border-radius: 50%; font-size: 0; cursor: pointer; } .range__line { position: absolute; top: 16px; left: 8px; z-index: 0; overflow: hidden; width: calc(100% - 16px); height: 4px; border-radius: 4px; background: var(--border); } .range__line span { display: block; height: 100%; width: 0; background: var(--text); font-size: 0; } /* TEMP TAG FILTERS */ .sidebar__navigation__list--grouped .sidebar__item { position: relative; } .sidebar__navigation__list--grouped .sidebar__item svg { position: absolute; top: 6px; right: 8px; z-index: 0; } .sidebar__navigation__list--grouped .link--disable, .sidebar__navigation__list--grouped .link--disable .icon-box { display: none; } .sidebar__navigation__list--grouped .link--remove .icon-box { opacity: 1; } .sidebar__navigation__list--grouped .link--remove .icon-reset, .sidebar__navigation__list--grouped .link--remove:hover .icon-box { opacity: 0; } .sidebar__navigation__list--grouped .link--remove:hover .icon-reset { opacity: 1; } .sidebar__navigation__list--grouped .sidebar__filter__group { margin-top: 32px; } .sidebar__navigation__list--grouped .sidebar__filter__group:first-child { margin-top: 0; } .sidebar__navigation__list--grouped .sidebar__navigation__list + .collection__filters .sidebar__filter__group:first-child { margin-top: 32px; } .sidebar__navigation__list--grouped .collection__active__filters { margin-bottom: 32px; } /* END TEMP TAG FILTERS */ /** * Subcollection */ .subcollections { position: relative; background-color: var(--bg); } .subcollections__inner { display: grid; column-gap: var(--gutter); padding-top: var(--gutter); grid-template-columns: repeat(4, minmax(0, 1fr)); } .subcollections__inner > * { min-width: 0; } @media only screen and (min-width: 768px) { .subcollections + .collection { padding-top: 0; } } .collection__title + .subcollections .subcollections__inner { padding-top: 0; } .subcollection__item { position: relative; overflow: hidden; } .subcollections__grid--1 .subcollections__inner { grid-template-columns: repeat(1, minmax(0, 1fr)); } .subcollections__grid--2 .subcollections__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .subcollections__grid--3 .subcollections__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } .subcollections__grid--5 .subcollections__inner, .subcollections__grid--6 .subcollections__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--gutter); } @media only screen and (max-width: 767px) { .subcollections:not(.subcollections__grid--1) .subcollections__inner { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-width: 100%; scrollbar-width: none; -ms-overflow-style: none; } .subcollections:not(.subcollections__grid--1) .subcollections__inner::-webkit-scrollbar { width: 0; height: 0; } .subcollections:not(.subcollections__grid--1) .subcollections__inner:after { content: ''; display: block; width: var(--gutter); } .subcollections:not(.subcollections__grid--1) .subcollections__inner .subcollection__item { flex: 0 0 auto; width: 90%; } .subcollections:not(.subcollections__grid--1) .subcollections__inner .subcollection__item:last-child { margin-right: 0; } } .subcollection__item .hero__content__wrapper { padding-top: 0; padding-bottom: 0; } .subcollection__image { width: 100%; height: 100%; overflow-y: hidden; transform: scale(1.06); transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1); } .subcollection__link:hover .subcollection__image { transform: scale(1); } .subcollection__link { display: flex; justify-content: flex-start; align-items: flex-end; width: 100%; height: 100%; } .subcollection__title { padding: var(--gutter); font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(13.14426px * var(---font-adjust-accent)); line-height: 0.8; margin: 1em; } .subcollection__title, .subcollection__title.strong, .subcollection__title .strong { font-weight: var(---font-weight-accent-bold); } /* ============================================================================ #Breadcrumbs ============================================================================== */ .breadcrumb { padding-top: 11px; padding-bottom: 10px; margin-bottom: 32px; margin-top: -32px; font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); } .breadcrumb.strong, .breadcrumb .strong { font-weight: var(---font-weight-accent-bold); } @media only screen and (max-width: 767px) { .breadcrumb { margin-bottom: 0; margin-top: -64px; } } .breadcrumb a, .breadcrumb span { display: inline-block; padding: 7px 7px 6px 0; margin-right: 7px; text-decoration: none; word-break: break-word; } .breadcrumb a:first-child, .breadcrumb span:first-child { padding-left: 0; } .breadcrumb a:hover { text-decoration: underline; } .related__products { position: relative; } .related__products .flickity-button { transition: all 0.3s; } .related__products .flickity-button[disabled] { visibility: hidden; opacity: 0; } .related__products .tab-content:first-child, .related__products .tab-content:first-child ~ .tab-content { margin-top: 0; } .recent__container .related__products.alt .tab-link { display: block; padding: 0; border-bottom: none; margin: 0; cursor: default; pointer-events: none; } .recent__container .tab-content { margin-top: 0; } /* ============================================================================ #Product Page ============================================================================== */ .product-page { padding-top: 24px; padding-bottom: 32px; } @media only screen and (min-width: 768px) { .product-page { padding-top: 64px; } } .product-reviews { padding: 60px 0 !important; margin: 0 !important; } .collection-tabs { position: relative; } @media only screen and (min-width: 768px) { .collection-tabs .product-grid-item { margin-bottom: var(--inner); } } .product__subheading { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1.3px; font-size: calc(13 / 16 * 1rem); color: var(--text-accent); text-align: center; } .product__subheading p { margin: 0; } .product__subheading p + p { margin-top: 0.75em; } .product__headline { display: block; } .product__price__wrap { margin: calc(var(--inner) / 2) 0 0 0; } .product__price__main { display: inline-flex; align-items: center; } .shop-pay-terms { margin-bottom: var(--inner); } .product__price { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(18.30206px * var(---font-adjust-accent)); color: var(--text-dark); display: inline-block; padding: 8px 0 6px; } .product__price.strong, .product__price .strong { font-weight: var(---font-weight-accent-bold); } .product__price--unit { font-size: calc(13.14426px * var(---font-adjust-accent)); font-style: italic; color: var(--text-light); margin-left: 8px; } .product__form__outer { margin: 20px 0 8px 0; } .product__form__outer.product__form--buybutton { margin-bottom: 10px; } .shop-pay-terms { --payment-terms-background-color: var(--bg); margin: 12px 0 20px; } .shop-pay-terms:empty { margin: 0; } .shopify-payment-button .shopify-payment-button__more-options.shopify-payment-button__button--hidden { display: none; } .form__selectors { padding-bottom: 10px; } .product__form__select { margin: 0; border-left: none; border-right: none; border-top: none; border-radius: 0; } .product__form__select:focus { border-bottom: 1px solid var(--primary); box-shadow: none; } .selector-wrapper label { margin-top: 3em; font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); } .selector-wrapper label.strong, .selector-wrapper label .strong { font-weight: var(---font-weight-accent-bold); } .add-to-cart__wrapper { margin-top: 2.7em; } .product__title { color: var(--text-dark); font-size: 30px; margin: 0; word-break: break-word; line-height: 1.2; } .product__price{ line-height: 1em; } .product-description { margin-top: calc(var(--inner) / 2); } .product-badge { text-align: center; } .product-badge svg { max-width: 100%; } @media screen and (min-width: 768px) { .js-grid>* { min-width: 0; display: flex; } .product-grid-item { position: relative; text-align: center; cursor: pointer; margin-bottom: calc(var(--outer) * 1); display: flex; flex-direction: column; justify-content: space-between; } .product-grid-item .product__grid__info--under { position: relative; padding: 16px 0 0; display: flex; flex-grow: 1; } .product__grid__info a { text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; } } @media screen and (min-width: 768px) { .product__details__wrapper { padding-left: 48px; } } .select__label { font-family: var(---font-stack-heading); font-weight: var(---font-weight-heading); font-style: var(---font-style-heading); letter-spacing: var(---font-heading-space); text-transform: var(---font-heading-caps); margin-top: 2em; } /* Above button stockout na size chart */ .product__button__meta { display: flex; justify-content: space-between; align-items: center; margin: 0; } .variant__countdown { opacity: 0; visibility: hidden; font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(10px * var(---font-adjust-accent)); transition: all 0.4s ease-in-out; padding: 0; margin: 15px 0 12px; } .variant__countdown, .variant__countdown.strong, .variant__countdown .strong { font-weight: var(---font-weight-accent-bold); } .variant__countdown.variant__countdown--show { opacity: 1; visibility: visible; } .product__info__link { cursor: pointer; display: inline-block; line-height: 1; text-align: center; white-space: nowrap; vertical-align: initial; border-radius: var(--radius-sm); font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(10px * var(---font-adjust-accent)); background-color: var(--hairline); color: var(--text); padding: 6px 10px; display: flex; align-items: center; margin: 15px 0 12px; } .product__info__link, .product__info__link.strong, .product__info__link .strong { font-weight: var(---font-weight-accent-bold); } .product__info__link--inline { cursor: pointer; margin-left: 10px; display: inline-block; padding: 0.33em 0.5em; line-height: 1; text-align: center; white-space: nowrap; vertical-align: initial; border-radius: var(--radius-sm); font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(10px * var(---font-adjust-accent)); background-color: var(--hairline); color: var(--text); font-style: italic; } .product__info__link--inline, .product__info__link--inline.strong, .product__info__link--inline .strong { font-weight: var(---font-weight-accent-bold); } .select__fieldset { padding: 1em 0; } .product__align-left .swatch__button { display: inline-block; padding: 5px; } .product__align-left .swatch__button:first-of-type { margin-left: -5px; } .product__align-left .radio__button label { margin-left: 0; } .product__align-left .product__form__select { padding-left: 0; } .product__align-left .shopify-payment-button__more-options { text-align: left; padding-left: 0; } .product__align-left .shopify-product-form { margin: 0; } .product__align-left .product__title { margin-bottom: 0; margin-right: 15px; } .product__align-center .product__form__select { text-align-last: center; padding-left: 28px; } .product__align-center .rating__wrapper__title { margin-top: 12px; } .product__align-center .product__details, .product__align-center .product__info__link, .product__align-center .product__price__wrap, .product__align-center .product__subheading, .product__align-center .product__title, .product__align-center .radio__fieldset, .product__align-center .selector-wrapper label, .product__align-center .standard__kicker, .product__align-center .variant__countdown { text-align: center; } .product__align-center .product__button__meta:not(.product__button__meta--packed) { justify-content: center; } .product__align-center .product-single .quantity__wrapper { margin-left: auto; margin-right: auto; } .product__align-center .tabs-wrapper--above .product-tabs-title { display: flex; justify-content: space-evenly; } .product__align-center .tabs-wrapper--above .product-tabs-title .tab-link { margin: 0; } /* no js */ .product__form__select--hidden { display: none; margin-bottom: 30px; } .no-js .product__form__select--hidden { display: block; } .no-js .form__selectors { display: none; } /* ============================================================================ Product Subscription Module ============================================================================== */ /* Keeping the original styles in case we have to go back or want to do a test Styles modified with a --bubble flag are for new design */ .product__subs { border: 1px solid var(--border); border-radius: var(--radius-sm); } .product__subs__group { display: block; padding: 4px 0; } .product__subs__group + .product__subs__group { border-top: none; border-top: 1px solid var(--border); } .product__subs__plans { margin-left: 1.5rem; } .product__subs__plans .product__subs__option { padding-top: 0; } .product__subs__option { } .product__subs__group input[type='radio'] { color: var(--text-dark); width: 1rem; height: 1rem; flex-shrink: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; padding: 0; border: 0; margin: 3px 0 0; cursor: pointer; } .product__subs__group input[type='radio']:before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 1px solid var(--primary); box-sizing: border-box; } .product__subs__group input[type='radio']:checked:before { background-image: radial-gradient(var(--primary) 50%, var(--bg) 51%); } .product__subs__description { color: var(--text-light); font-size: calc(var(--font-3) * var(---font-adjust-body)); background: var(--hairline); padding: 10px 16px; border-radius: var(--radius-sm); margin: 8px 0 0; font-style: italic; } .product__price--off { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); font-size: calc(10px * var(---font-adjust-body)); display: inline-block; border: 1px solid var(--primary); color: var(--primary); padding: 4px 10px; margin: 0 0 0 10px; border-radius: var(--radius-sm); } .product__price--off.strong, .product__price--off .strong { font-weight: var(---font-weight-accent-bold); } .product__price--off em { font-style: normal; opacity: 0.5; padding: 0 4px; } .product__subs__wrap { margin-bottom: 20px; } [data-subscription-watch-price] { display: none; } @media only screen and (min-width: 1024px) { .product__subs__wrap { display: none; } } .product-page .product__form__outer .product__subs__wrap { display: block; } /* OVERRIDES FOR BUBBLE MODIFIER STYLING */ :root { ---bubble-offset: -40px; ---bubble-width: 70%; ---bubble-width-selected: 50%; } @media screen and (min-width: 1400px) { :root { ---bubble-width: 107%; ---bubble-width-selected: 77%; } } /* fieldset */ .product__subs.product__subs--bubble { border: 0 none; border-radius: 0; color: var(---color-text-dark); display: grid; gap: 20px; } /* Each purchase-type bubble */ /* Standard option defaults */ /* First option is NOT selected */ .product__subs.product__subs--bubble .product__subs__group { background-color: white; border: 1px solid var(---color-cloudy); border-radius: 5px; padding: 14px 12px; width: 100%; display: flex; cursor: pointer; } /* Subscription option is selected overrides */ .product__subs.product__subs--bubble .product__subs__group + .product__subs__group.is--selected { margin-right: 0; width: 100%; /* this should be full-width */ } .product__subs__group .product__subs__price{ margin-left: auto; display: grid; align-self: start; } .product__subs__option .product__subs__selector { display: flex; align-items: center; gap: 5px; } .product__subs__option .product__subs__selector span{ white-space: nowrap; } .product__subs__option .product__subs__selector select{ margin-bottom: 0; background-color: var(---color-porcelain); padding-top: 8px; padding-bottom: 8px; border-radius: 40px; } /* ============================================================================ Share Links ============================================================================== */ .share { padding-bottom: var(--gutter); padding-top: var(--gutter); } .share__link { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); text-decoration: none; transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); padding: 10px; color: var(--text-light); } .share__link.strong, .share__link .strong { font-weight: var(---font-weight-accent-bold); } .share__link:hover { color: var(--text-dark); background-color: var(--hairline); border-radius: var(--radius-sm); } .product__align-center .share__link, .text-center .share__link { margin: 0 10px; } .product__align-center .share { text-align: center; } .product__align-left .share__link, .text-left .share__link { margin: 0 20px 0 -7px; } .share__text { margin-left: 6px; } .share__link .icon { width: 1.2em; height: 1.2em; margin-top: -3px; color: var(--text-dark); opacity: 0.7; transition: opacity 0.3s ease-in; } .share__link .icon path { fill: currentColor; } .share__link:hover .icon { opacity: 1; } /* ============================================================================ Popout ============================================================================== */ .popout { position: relative; } .popout__toggle { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); margin: 10px 0; white-space: nowrap; padding: 9px 16px; background-image: none; } .popout__toggle.strong, .popout__toggle .strong { font-weight: var(---font-weight-accent-bold); } .popout__toggle:focus { box-shadow: none; } .popout__toggle .icon-arrow-down { transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } .popout__toggle[aria-expanded='true'] .icon-arrow-down { transform: rotate(180deg) translateY(2px); } .popout-list { background-color: var(--bg); border: 1px solid var(--border); bottom: 100%; position: absolute; visibility: hidden; margin: 0 0 10px; padding: 0; min-height: 30px; max-height: 300px; z-index: 100; overflow-y: auto; } .popout-list--visible { visibility: visible; } .popout-list__item { white-space: nowrap; padding: 0; margin: 0; text-align: left; } .popout-list__option { padding: 8px 15px; width: 100%; display: block; font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); text-decoration: none; } .popout-list__option.strong, .popout-list__option .strong { font-weight: var(---font-weight-accent-bold); } .popout-list__option:hover { background-color: var(--hairline); } .popout .icon-arrow-down { width: 0.8em; margin-left: 4px; margin-top: -1px; } .popout-list__item--current .popout-list__option span { border-bottom: 1px solid var(--border); } .popout--footer { display: flex; justify-content: center; margin: 10px 0 0; } .popout--footer .popout { padding: 0 5px; } .popout--footer .popout__toggle:focus { border: 1px solid var(--muted); box-shadow: 0 1px 4px var(--hairline); } .drawer__content { position: fixed; visibility: hidden; z-index: 20050; top: 0; left: 0; height: 100%; min-width: 33vw; max-width: 600px; background: var(--bg); border-right: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 3px 12px rgba(0, 0, 0, 0.02); transform: translate3d(-100%, 0, 0); transition: transform 0.3s ease; display: flex; flex-direction: column; } .drawer--visible .drawer__content { visibility: visible; transform: translateZ(0); } @media only screen and (max-width: 479px) { .drawer__content { width: 90vw; min-width: 50vw; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .drawer__content { min-width: 50vw; } } .drawer--right .drawer__content { left: auto; right: 0; } .drawer--right:not(.drawer--visible) .drawer__content { transform: translate3d(100%, 0, 0); } .drawer--pop .drawer__content { left: 0; right: 0; top: 0; bottom: 0; margin: auto; max-height: 90%; max-width: 600px; transform: translateY(-50px) scale(0.9); opacity: 0; transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } @media only screen and (max-width: 767px) { .drawer--pop .drawer__content { max-height: calc(100% - 40px); max-width: calc(100vw - 40px); margin: 20px; } } .drawer--visible.drawer--pop .drawer__content { opacity: 1; transform: translateY(0) scale(1); } .drawer__underlay { opacity: 0; position: fixed; visibility: hidden; top: 0; left: 0; height: 100%; width: 100%; } .drawer--visible .drawer__underlay, .drawer__underlay.underlay--visible { z-index: 20000; opacity: 1; visibility: visible; transition: opacity 0.3s ease; } .drawer--visible .drawer__underlay .drawer__underlay__fill, .drawer__underlay.underlay--visible .drawer__underlay__fill { background: var(--bg); opacity: 0.6; } .drawer--visible .drawer__underlay .drawer__underlay__blur, .drawer__underlay.underlay--visible .drawer__underlay__blur { z-index: -1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: -webkit-backdrop-filter 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: backdrop-filter 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: backdrop-filter 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-backdrop-filter 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } .drawer__underlay .drawer__underlay__blur, .drawer__underlay .drawer__underlay__fill { display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; transition: all 0.3s ease; } @media only screen and (max-width: 479px) { .drawer--right .drawer__underlay, .header__drawer .drawer__underlay { display: block; } } .drawer__inner { position: relative; display: flex; flex-direction: column; justify-content: flex-start; flex: 1; height: 100%; width: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .drawer__close .icon-close { width: 16px; height: 16px; } .drawer__content > :not(.drawer__inner) { opacity: 0; transition: opacity 0.8s ease-out; } .drawer--visible .drawer__content > :not(.drawer__inner) { opacity: 1; } .search__page__heading .input-group .btn, .search__page__heading .input-group .input-group-field { height: 48px; } .search__page__heading .input-group .input-group-field { font-size: calc(13.14426px * var(---font-adjust-body)); } @media (min-width: 480px) { .search__page__heading .input-group .input-group-field { font-size: calc( (13.14426px + (138.2528vw - 663.61344px) / 920) * var(---font-adjust-body) ); } } @media (min-width: 1400px) { .search__page__heading .input-group .input-group-field { font-size: calc(14.52678px * var(---font-adjust-body)); } } .search__page__heading .note { padding: 10.5px 22px; } .search__page__heading .note p { font-size: calc(var(--font-3) * var(---font-adjust-body)); } .search-bar { width: 100%; margin-bottom: 20px; } .search__predictive { --text: var(---color-nav-text); --text-dark: var(---color-nav-text); --text-light: var(---color-nav-text); --bg: var(---color-nav); --border: var(---color-nav-border); color: var(--text); background: var(--bg); } .search__predictive__outer { width: 100%; height: 100%; } .search__predictive__main { width: 100%; display: flex; justify-content: space-between; align-items: center; } .search__predictive__close { text-align: left; width: 80px; height: 100%; } .search__predictive__close__inner { font-size: 16px; cursor: pointer; padding: 20px 0; height: 100%; display: flex; align-items: center; } .search__predictive__clear { display: none; padding: 0 15px; margin-top: 3px; position: absolute; right: 40px; } .search__predictive__clear .icon-close { width: 12px; height: 12px; } .dirty.search-drawer .search__predictive__clear { display: flex; } .search-drawer .search__predictive__close { display: none; } .dirty .search__results__outer { display: grid; grid-template-columns: 3fr 1fr; grid-row-gap: var(--gutter); grid-column-gap: var(--gutter); min-height: 0; transition: height 0.35s cubic-bezier(0.215, 0.61, 0.355, 1); } @media only screen and (min-width: 768px) and (max-width: 989px) { .dirty .search__results__outer { grid-template-columns: 2fr 1fr; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .dirty .search__results__outer { grid-template-columns: 1fr 1fr; } } @media only screen and (max-width: 479px) { .dirty .search__results__outer { grid-template-columns: repeat(1, 1fr); } } .search__results__heading { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border); } .search__results__products__list { display: grid; column-gap: var(--gutter); row-gap: var(--gutter); grid-template-columns: repeat(2, 1fr); } @media only screen and (max-width: 989px) { .search__results__products__list { grid-template-columns: repeat(1, 1fr); } } .dirty .header__search__results { padding-bottom: 30px; } .dirty .search__results__products__list { margin: var(--gutter) 0; } .product__inline { display: grid; grid-template-columns: 1fr 4fr; grid-row-gap: var(--gutter); grid-column-gap: var(--inner); } .search__results__title { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); margin-right: 0.5em; } .search__results__title, .search__results__title.strong, .search__results__title .strong { font-weight: var(---font-weight-accent-bold); } .product__inline__title { font-family: var(---font-stack-body); font-weight: var(---font-weight-body); font-style: var(---font-style-body); font-weight: var(---font-weight-body-bold); font-size: calc(15.51022px * var(---font-adjust-body)); margin: 0; } @media (min-width: 480px) { .product__inline__title { font-size: calc( (15.51022px + (221.24544vw - 1061.97811px) / 920) * var(---font-adjust-body) ); } } @media (min-width: 1400px) { .product__inline__title { font-size: calc(17.72268px * var(---font-adjust-body)); } } .product__inline__price { margin-top: 5px; margin-bottom: 0; } .other__inline__title a { display: block; } .header__search__results .animates { opacity: 0; } .header__search__results .other__inline.animates, .header__search__results .product__inline.animates { animation: fade 0.5s ease-in-out; animation-fill-mode: forwards; } @keyframes fade { 0% { opacity: 0; } to { opacity: 1; } } /* Null results */ .search__predictive:not(.search--empty) .search__results__empty { position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } .search--empty .search__results__outer { display: none; } .search--empty .search__results__empty { text-align: center; padding-bottom: 10px; } /* Mobile drawer version */ .drawer__search { position: relative; border-bottom: 1px solid var(--border); } .drawer__search .search__predictive__form__button { position: absolute; right: 0; padding: 0 20px; } .drawer__search .search__predictive__form { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; height: 50px; width: 100%; } .drawer__search .search__predictive__form input, .drawer__search .search__predictive__form input:focus { border: none; box-shadow: none; margin: 0; padding: 0 40px 0 0; } .drawer__search .search__predictive__form input::placeholder { font-style: italic; } /* ============================================================================ #Blogs and Comments ============================================================================== */ .blog__article { border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.1); border-radius: var(--radius-sm); padding: 32px; margin-bottom: 32px; } @media only screen and (max-width: 479px) { .blog__article { padding-left: 16px; padding-right: 16px; } } .blog__article .share { padding-top: 16px; padding-bottom: 0; } .blog__article-header-image { background-size: cover; background-position: 50%; z-index: 0; padding: 192px 32px 32px; margin-top: -32px; margin-left: -32px; width: calc(100% + 64px); position: relative; max-width: none; color: #fff; } @media only screen and (max-width: 479px) { .blog__article-header-image { width: calc(100% + 32px); margin-left: -16px; padding: 96px 16px 16px; } } .blog__article-header-image a { color: #fff; } .blog__article-header-image:after { content: ''; width: 100%; height: 100%; position: absolute; z-index: -1; top: 0; left: 0; background: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.65)); } .blog__article--over-image { border: none; /*margin-top: -140px; no hero overlap on desktop*/ background-color: var(--bg); z-index: 100; position: relative; } @media only screen and (max-width: 767px) { .blog__article--over-image { margin-top: -40px; } } .blog__article__author { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 30px auto; max-width: 450px; } .blog__article__author__image { width: 128px; height: 128px; object-fit: cover; border-radius: 50%; } .blog__article__author__name { margin: 8px 0; } .article__card { margin-top: 32px; margin-bottom: 0; box-shadow: none; border-radius: 0; --image-bottom: 5%; } .article__card__title { padding: 0 21.3333333333px; } @media only screen and (max-width: 767px) { .article__card__title { padding: 0 16px; } } .blog .article__card { margin-top: 0; margin-bottom: 32px; } .blog__article--image { position: relative; overflow: hidden; border: none; } .blog__article__overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background-size: cover; background-position: 50%; border: none; } .blog__article__overlay:after { content: ''; width: 100%; height: 100%; position: absolute; z-index: -1; top: 0; left: 0; background: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.65)); } .blog__article__content { margin-top: 16px; } .blog__article__content h4 { font-family: var(---font-stack-accent); color: var(---color-text-accent); font-weight: 700; font-size: 20px; margin: 2rem 0 1rem 0; } .blog__article__content a { color: var(---color-text-accent); transition: color 0.2s ease-in-out; } .blog__article__content a:hover { color: var(---color-primary-hover); } .blog__article__content div[class^='epilogue-module--epilogue-text'] p { font-style: italic; font-size: 14px; } .blog__article__content div[class^='columnStyles-module--columnLayout'] { justify-content: space-between; align-content: center; align-items: top; margin: 2rem 0; } @media screen and (min-width: 577px) { .blog__article__content div[class^='columnStyles-module--columnLayout'] { display: flex; } .blog__article__content div[class^='columnStyles-module--narrowColumn'] { max-width: 60%; min-width: 60%; margin: 0 auto; } } .blog__article__content div[class^='columnStyles-module--narrowColumn'] h5 { font-family: var(---font-stack-heading); color: var(---color-text-dark); font-weight: 500; font-size: 18px; margin-bottom: 8px; } .blog__article__content div[class^='prologue-module--prologue-text'] { font-style: italic; } .blog__article__content div[class*=post-module--question-and-answer] { margin: 2rem 0; } .blog__article__content div[class*='label-module--fealsLabel__question'] { color: var(---color-primary); font-weight: 700; margin-bottom: 1rem; } .blog__article__content div[class*='label-module--fealsLabel__pullQuotes'] { font-size: 24px; line-height: 1.333; font-family: var(---font-stack-heading); color: var(---color-text-dark); text-align: center; } @media screen and (min-width: 577px) { .blog__article__content div[class*='label-module--fealsLabel__pullQuotes'] { font-size: 32px; line-height: 1.25; } } @media screen and (min-width: 577px) { .blog__article__content div[class^='columnStyles-module--columnLayout'] div[class^='columnStyles-module--column']:first-child:nth-last-child(2), .blog__article__content div[class^='columnStyles-module--columnLayout'] div[class^='columnStyles-module--column']:first-child:nth-last-child(2) ~ * { max-width: 45%; } } .blog__article__content div[class^='image-module--container'] { display: flex; flex-direction: column; align-items: center; width: 100%; } .article__card .blog__article__content { margin: 0; min-height: 200px; } .blog__article--image .blog__article__content { display: table; } .blog__article--image .blog__article__content .blog__article__title { position: relative; display: table-cell; vertical-align: bottom; color: #fff; } .blog__article--image .blog__article__content .blog__article__title a { color: #fff; } .homepage-blog .blog__article--image .blog__article__content { position: absolute; margin: 0; bottom: 0; left: 0; padding: 30px; height: 100%; width: 100%; display: flex; align-items: flex-end; } .homepage-blog__btn { margin-top: 30px; } @media only screen and (min-width: 990px) { .homepage-blog__btn { margin-top: 40px; } } .blog__article header { margin-bottom: 32px; text-align: center; } .blog__article header h1 { font-size: 28px; line-height: 1.2; margin-bottom: 16px; } @media screen and (min-width: 768px) { .blog__article header h1 { font-size: 50px; } } .blog__article--byline .text--dark { color: var(---color-text-dark); } .blog__article header .blog__article--light { opacity: 0.6; } .blog__article footer { margin-bottom: 32px; } .blog__sidebar { position: relative; } .template-article .blog__sidebar { position: relative; margin-top: 40px; } .blog__rss { position: absolute; top: 0; right: 0; } .blog__rss svg { fill: var(--text-dark); } .blog__comments { text-decoration: none; } .blog__comments em { color: var(--text-light); } .blog__comments:hover { text-decoration: underline; } .blog__tag { position: relative; font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(10px * var(---font-adjust-accent)); border-radius: var(--radius-sm); padding: 9px; margin-bottom: 3px; } .blog__tag, .blog__tag.strong, .blog__tag .strong { font-weight: var(---font-weight-accent-bold); } .comment { margin-bottom: 32px; } .comment + .comment { border-top: 1px solid var(--hairline); padding-top: 32px; } .blog__sidebar__title { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(15.51022px * var(---font-adjust-accent)); color: var(--text-light); } .blog__sidebar__title, .blog__sidebar__title.strong, .blog__sidebar__title .strong { font-weight: var(---font-weight-accent-bold); } /* ================ Newsletter ================ */ .newsletter__contain { max-width: 420px; margin: 0 auto; } .standard__newsletter { max-width: 420px; } .text-center .standard__newsletter { margin-left: auto; margin-right: auto; } .text-right .standard__newsletter { margin-left: auto; } .has-error:not(.newsletter--default-messages) p:not([class]), .has-success:not(.newsletter--default-messages) p:not([class]), .newsletter__message { display: none; } .has-error > .newsletter__message--error, .has-success > .newsletter__message--success { display: block; } /* ================ Input Group ================ */ .input-group { position: relative; display: table; border-collapse: initial; } .input-group .input-group-button:first-child, .input-group .input-group-button:first-child > .btn, .input-group .input-group-field:first-child, .input-group input[type='hidden']:first-child + .input-group-button > .btn, .input-group input[type='hidden']:first-child + .input-group-field { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .input-group .input-group-button:last-child > .btn, .input-group .input-group-field:last-child { border-radius: var(--radius-sm); } .input-group input::placeholder { color: inherit; opacity: 0.7; } .input-group input:-webkit-autofill, .input-group input:-webkit-autofill:active, .input-group input:-webkit-autofill:focus, .input-group input:-webkit-autofill:hover { -webkit-transition: background-color 5000s ease-in-out 0s, border-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s, border-color 5000s ease-in-out 0s; -webkit-text-fill-color: var(--text) !important; } .input-group input::-moz-focus-inner { border: 0; padding: 0; margin-top: -1px; margin-bottom: -1px; } .input-group-button, .input-group-field { display: table-cell; vertical-align: middle; margin: 0; } .input-group .btn, .input-group .input-group-field { height: 37px; display: flex; align-items: center; } .input-group .input-group-field { width: 100%; margin-bottom: 0; } .input-group-button { position: relative; white-space: nowrap; width: 1%; padding: 0; } .input-group--inner-button { padding: 5px; border-radius: var(--radius-sm); border: 1px solid var(--border); background-color: var(--bg); } .input-group--inner-button .input-group-button, .input-group--inner-button .input-group-button .btn--outline { border-radius: var(--radius-sm); } .input-group--inner-button input { border: none; } .input-group--inner-button input:active, .input-group--inner-button input:focus { border: none; box-shadow: none; } .popup__inner .input-group-button { position: relative; } .popup__inner .input-group-button button { min-height: 32px; margin: 0; padding: 0 0 0 32px; } .popup__inner .input-group-button button:hover { color: var(--primary); } .popup__inner .input-group-button .icon-arrow-right-long { width: 21px; height: auto; } .standard__newsletter .input-group--inner-button { color: var(--text); } /* ============================================================================ #Cart Page ============================================================================== */ .template-cart .main-content { min-height: var(--content-full); } .cart__return { display: flex; justify-content: flex-start; align-items: center; } .checkout__button { padding: 1.65rem 0.75rem; } .additional-checkout-buttons { margin: 20px 0; padding: 8px; background-color: var(--bg-accent); border: 1px solid var(--border); text-align: right; min-height: 68px; } .additional-checkout-buttons ul { justify-content: center; } @media only screen and (max-width: 767px) { .additional-checkout-buttons { display: flex; justify-content: center; } .additional-checkout-buttons .dynamic-checkout__content { width: 100%; } } @media only screen and (min-width: 480px) { .additional-checkout-buttons { padding: 12px; } } .vendor--hide .item__vendor { display: none; } .cart__notes__label { text-align: left; } .quantity--hide .cart__items__quantity, .quantity--hide .quantity__wrapper { visibility: hidden; } /* ================ Discount text tag ================ */ .item__total__savings { display: inline-block; background-color: var(--primary-fade); color: var(--primary); padding: 3px 6px; border-radius: 3px; font-size: 12px; margin-bottom: 0.25em; width: 100%; } .cart__icon--tags svg { width: 1em; height: 1em; position: relative; } .cart__icon--tags svg path { opacity: 0.75; stroke: var(--primary) !important; fill: none !important; } /* ================ Loading animation ================ */ .cart--loading .quantity__wrapper { --color: $transparent; --text: $transparent; } .cart--loading .quantity__input { background-color: var(--hairline); border: 1px solid hsla(0, 0%, 100%, 0); opacity: 0.6; } .cart--loading .quantity__button { opacity: 0.3; z-index: -2; } .item--loadbar { height: 4px; width: 100%; position: absolute; top: -1px; left: 0; overflow: hidden; background-color: var(--hairline); } .item--loadbar:before { content: ''; display: block; position: absolute; bottom: 0; left: -300px; width: 300px; height: 4px; background-color: var(--primary); animation: loadbar 2s linear infinite; } @keyframes loadbar { 0% { left: -300px; width: 30%; opacity: 0; } 1% { left: -300px; width: 30%; opacity: 1; } 50% { width: 33%; } 70% { width: 66%; } 80% { left: 60%; } 95% { left: 120%; opacity: 1; } 99% { left: 150%; opacity: 0; } } /* ================ Empty ================ */ .cart__template .cart--hidden { display: none; } .cart__empty { height: calc(50vh - var(--header-height)); position: relative; display: flex; justify-content: center; align-items: center; padding-bottom: 80px; } .cart__empty .image-overlay { --bg: var(--text); } .cart__circle__wrapper { margin-top: -80px; padding-bottom: 20px; flex-direction: column; } .cart__circle, .cart__circle__wrapper { display: flex; justify-content: center; align-items: center; } .cart__circle { background-color: var(--bg); border-radius: 100%; width: 160px; height: 160px; z-index: 10; color: var(--text-dark); transition: box-shadow 0.8s linear; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 3px 12px rgba(0, 0, 0, 0.02); } .cart__circle svg { transition: opacity 1.2s linear; opacity: 0.2; width: 3em; height: 3em; } .cart__continue__link { position: relative; text-decoration: none; font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-weight: var(---font-weight-accent-bold); font-size: calc(12px * var(---font-adjust-accent)); text-align: center; margin: 0; padding-top: 1.5rem; } .cart__continue__link:after { content: ''; right: 0; position: absolute; bottom: -1px; height: 1px; background: currentColor; opacity: 0.25; transition: width 0.2s ease; } .cart__continue__link.strong, .cart__continue__link .strong { font-weight: var(---font-weight-accent-bold); } .cart__continue__link:after { right: auto; left: 0; width: 0; transition: width 0.9s ease; bottom: -4px; height: 3px; } .cart__circle__wrapper:hover svg { opacity: 1; } .cart__circle__wrapper:hover .cart__circle { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06), 0 3px 16px rgba(0, 0, 0, 0.02); } .cart__circle__wrapper:hover .cart__continue__link:after { width: 100%; } .shipping-calculator .shipping__rates.errors { margin: 0; } .shipping__rates__button { margin: 1em 0; } .shipping--success { background-color: var(--hairline); margin: 0; } .shipping--success p { margin: 0; } .shipping--success li { padding: 1em; margin: 0; } .shipping--success li + li { border-top: 1px solid var(--border); } /*====== Cart Message ======*/ .cart__message { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; padding: 15px var(--gutter); border-bottom: 1px solid var(--border); margin: 0; font-size: calc(0.6875rem * var(---font-adjust-body)); line-height: 1.3; transition: max-height 0.3s, padding 0.3s, border 0.3s, opacity 0.3s, visibility 0.3s; } .cart__message.is-hidden { overflow: hidden; visibility: hidden; max-height: 0; padding: 0 15px; border: none; opacity: 0; } .cart__message .cart__message-success { display: none; } .cart__message.is-success .cart__message-success { display: inline; } .cart__message.is-success .cart__message-success ~ .cart__message-default { display: none; } .cart__message.is-success .cart__graph .cart__graph-dot { transition: top 0.4s; } .cart__message.is-success .cart__graph .cart__graph-dot:after, .cart__message.is-success .cart__graph .cart__graph-dot:before { transform: scale(1); opacity: 0; transition: top 1s, left 1s, transform 1s, opacity 0.6s 0.4s; } .cart__message.is-success .cart__graph .cart__graph-dot--1:before { top: -35px; left: 65px; } .cart__message.is-success .cart__graph .cart__graph-dot--1:after, .cart__message.is-success .cart__graph .cart__graph-dot--4:after { top: 5px; left: 45px; } .cart__message.is-success .cart__graph .cart__graph-dot--2:before { top: 35px; left: 15px; } .cart__message.is-success .cart__graph .cart__graph-dot--2:after, .cart__message.is-success .cart__graph .cart__graph-dot--5:after { top: 5px; left: -35px; } .cart__message.is-success .cart__graph .cart__graph-dot--3:before { top: -25px; left: 5px; } .cart__message.is-success .cart__graph .cart__graph-dot--3:after, .cart__message.is-success .cart__graph .cart__graph-dot--6:after { top: 45px; left: -45px; } .cart__message.is-success .cart__graph .cart__graph-dot--4:before { top: -35px; left: 90px; } .cart__message.is-success .cart__graph .cart__graph-dot--5:before { top: -70px; left: 15px; } .cart__message.is-success .cart__graph .cart__graph-dot--6:before { top: -50px; left: 55px; } /*====== Cart Graph ======*/ .cart__graph { align-self: flex-start; position: relative; display: block; width: 18px; height: 18px; margin-right: 8px; transform: scaleX(-1); } .cart__graph .cart__graph-dot { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; transform: rotate(90deg); } .cart__graph .cart__graph-dot--2 { color: var(---color-primary); } .cart__graph .cart__graph-dot--3 { color: var(---color-secondary); } .cart__graph .cart__graph-dot--4 { color: var(---inverse-primary); } .cart__graph .cart__graph-dot--5 { color: var(---inverse-secondary); } .cart__graph .cart__graph-dot--6 { color: var(---color-bg-secondary); } .cart__graph .cart__graph-dot--4, .cart__graph .cart__graph-dot--5, .cart__graph .cart__graph-dot--6 { transform: rotate(205deg); } .cart__graph .cart__graph-dot:after, .cart__graph .cart__graph-dot:before { position: absolute; top: 0; left: 0; width: 5px; height: 5px; border-radius: 50%; background: currentColor; transform: scale(0); pointer-events: none; content: ''; } .cart__graph circle { transform-origin: 50% 50%; stroke-width: 2; stroke: var(--primary-fade); fill: none; } .cart__graph .cart__graph-progress { position: absolute; top: 0; left: 0; max-width: 100%; max-height: 100%; stroke: var(--primary); transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 0.3s; } .cart__page__shipping .cart__message { border-bottom: none; flex-direction: row-reverse; } .cart__page__shipping .cart__graph { margin-right: 0; margin-left: 8px; } .cart__page__shipping { overflow: hidden; } /* ================ Cart drawer ================ */ .cart__drawer { --cart-drawer-bottom: 150px; } @media only screen and (min-width: 768px) { .cart__drawer { --gutter: 20px; } } .cart__drawer .errors { margin: var(--gutter); margin-bottom: 2px; } .cart__drawer .cart__items__total { display: none; } .cart__drawer .cart--hidden { opacity: 0; height: 0; visibility: hidden; } .cart__drawer .cart__remove { position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } .cart__drawer .drawer__button { padding-right: var(--gutter); } .cart__drawer__title { display: flex; height: 100%; margin: 0; padding: 0 0 0 var(--gutter); align-items: center; font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); color: var(---color-primary); } .cart__drawer__title, .cart__drawer__title.strong, .cart__drawer__title .strong { font-weight: var(---font-weight-accent-bold); } .drawer__body { overflow-y: auto; flex: 1; width: 100%; min-height: 1px; } .drawer__body .upsell__holder { margin: 15px; } .cart__drawer .drawer__top { position: sticky; width: 100%; top: 0; background: var(--bg); z-index: 300; } .drawer__bottom { width: 100%; margin-top: auto; } .drawer__bottom form { margin: 0; } .cart__drawer .drawer__content { border: none; } /* ======= Cart items // drawer and mobile ======= */ .cart__items { height: calc(100% - var(--cart-drawer-bottom)); } .cart__items p { margin: 0; } .line__price { color: var(--text-light); } .line__price del, .line__price mark { margin-right: 5px; } .line__price del { color: var(--text-light); } .line__price mark { color: var(--primary); background: none; } .cart__items__row { display: flex; padding: var(--gutter); border-bottom: 1px solid var(--border); position: relative; } .cart__items__remove { position: absolute; top: var(--gutter); right: var(--gutter); } .cart__items__grid { display: grid; grid-template-areas: 'image title' 'image price' 'image quantity' 'below below'; grid-template-columns: 90px 1fr; grid-template-rows: auto auto auto auto; grid-column-gap: var(--gutter); grid-row-gap: 6px; } .cart__items__quantity .quantity__wrapper { margin: 0; } .cart__items__meta { font-style: var(---font-style-body); color: var(--text-light); font-style: italic; } .cart__items__meta, .cart__items__title { font-family: var(---font-stack-body); font-weight: var(---font-weight-body); } .cart__items__title { font-style: var(---font-style-body); font-weight: var(---font-weight-body-bold); grid-area: title; padding-right: 25px; } .cart__items__title p { color: var(--text-dark); } .cart__items__price { grid-area: price; } .cart__items__quantity { grid-area: quantity; } .cart__items__savings { grid-area: below; margin-top: 5px; } .cart__items__image { grid-area: image; } .cart__items__image .cart__items__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: cover; } .drawer__bottom__meta { padding: 1rem var(--gutter); margin: 0; } .drawer__footer__subtotal .cart__footer__discount, .drawer__footer__subtotal .cart__footer__itemtotal { font-size: calc(var(--font-3) * var(---font-adjust-body)); padding: 1rem var(--gutter); margin: 0; border-top: 1px solid var(--border); } .drawer__footer__subtotal .cart__footer__discount .cart__footer__value, .drawer__footer__subtotal .cart__footer__itemtotal .cart__footer__value { font-weight: var(---font-weight-body-bold); } .drawer__footer__subtotal .cart__footer__discount { background-color: var(--primary-fade); color: var(--primary); } .drawer__checkout__additional .additional-checkout-buttons { margin-bottom: 0; margin-top: 0; border: none; } /* ================ Cart blank state ================ */ .cart__items--blankstate .cart__items__img { width: 100%; padding-top: 100%; display: block; } .cart__items--blankstate .cart__items__title { width: 120px; padding-top: 1em; } .cart__items--blankstate .cart__items__price { width: 60px; padding-top: 1em; } .cart__items--blankstate .item--loadbar:before { background-color: var(--hairline); } .empty-content { overflow: hidden; background-color: var(--border); background: linear-gradient( 100deg, hsla(0, 0%, 100%, 0) 30%, hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 70% ) var(--border); background-size: 200% 100%; background-position-x: 180%; animation: shimmer 1s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } @keyframes shimmer { to { background-position-x: -20%; } } /* ================ Cart template ================ */ @media only screen and (min-width: 768px) { .cart__template .cart__items__row { padding: var(--gutter) 0; } .cart__template .cart__items__grid { display: grid; width: 100%; grid-template-areas: 'image title price quantity total' 'image remove price quantity total' 'image savings price quantity total'; grid-template-columns: 90px 2fr 1fr 1fr 1fr; grid-template-rows: auto auto auto auto; grid-column-gap: var(--gutter); grid-row-gap: 0; } .cart__template .cart__items__image { grid-area: image; width: 90px; height: 90px; } .cart__template .cart__items__title { grid-area: title; } .cart__template .cart__items__price { grid-area: price; } .cart__template .cart__items__quantity { grid-area: quantity; display: flex; justify-self: center; } .cart__template .cart__items__savings { grid-area: savings; } .cart__template .cart__items__remove { grid-area: remove; position: relative; top: auto; right: auto; } .cart__template .cart__remove__icon { display: none; } .cart__template .cart__items__total { grid-area: total; text-align: right; justify-content: flex-end; } .cart__template .cart__items__row .cart__items__price, .cart__template .cart__items__row .cart__items__total { display: flex; align-items: center; } .cart__template .cart__heading__quantity p { text-align: center; } .cart__template .line__price del, .cart__template .line__price mark { display: block; } .cart__template .cart__items { height: auto; overflow-y: unset; } .cart__template .checkout__button { min-width: 300px; } } @media only screen and (min-width: 768px) and (max-width: 479px) { .cart__template .checkout__button { width: 100%; margin: 10px 0; padding: 22px 10px; } } /* ================ Cart page headings ================ */ .cart__items__grid.cart__heading__wrapper { border-bottom: 1px solid var(--border); grid-row-gap: 5px; } .cart__heading { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); margin: 0; padding: 0; } .cart__heading, .cart__heading.strong, .cart__heading .strong { font-weight: var(---font-weight-accent-bold); } .cart__heading__back { grid-column-start: image; grid-column-end: title; } /* ================ Cart page footer ================ */ .template__cart__footer { margin-top: 2em; display: grid; grid-template-areas: 'product product total total' 'notes notes update checkout' 'shipping shipping empty empty' 'additional additional additional additional'; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto auto auto auto; grid-column-gap: var(--gutter); grid-row-gap: 10px; } .template__cart__footer .upsell__holder { grid-area: product; margin-top: 0; } .template__cart__footer .cart__footer__notes { grid-area: notes; } .template__cart__footer .cart__footer__total { grid-area: total; } .template__cart__footer .cart__footer__checkout { grid-area: checkout; } .template__cart__footer .cart__footer__shipping { grid-area: shipping; } .template__cart__footer .cart__footer__shipping .accordion__title { font-size: calc(13.14426px * var(---font-adjust-accent)); } .template__cart__footer .cart__footer__shipping .drawer__accordion__button, .template__cart__footer .cart__footer__shipping .shipping-calculator { padding: 1em 0; } .template__cart__footer .cart__footer__shipping .drawer__accordion__body { padding: 0; } .template__cart__footer .cart__footer__update { grid-area: update; } .template__cart__footer .cart__footer__additional { grid-area: additional; } .template__cart__footer .cart__footer__total p { margin: 0; padding: 5px 0; } .template__cart__footer .cart__footer__label { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); } .template__cart__footer .cart__footer__label.strong, .template__cart__footer .cart__footer__label .strong { font-weight: var(---font-weight-accent-bold); } .template__cart__footer .cart__footer__value { font-size: calc(18.30206px * var(---font-adjust-body)); font-weight: var(---font-weight-body-bold); } @media (min-width: 480px) { .template__cart__footer .cart__footer__value { font-size: calc( (18.30206px + (331.96033vw - 1593.40956px) / 920) * var(---font-adjust-body) ); } } @media (min-width: 1400px) { .template__cart__footer .cart__footer__value { font-size: calc(21.62167px * var(---font-adjust-body)); } } .template__cart__footer .cart__footer__small { font-style: italic; color: var(--text-light); } .cart__footer__checkout, .cart__footer__total, .cart__footer__update { text-align: right; } .cart__footer__update { display: none; } .no--ajax .cart__footer__checkout, .no-js .cart__footer__checkout { grid-column-start: checkout; grid-column-end: checkout; } .no--ajax .cart__footer__update, .no-js .cart__footer__update { display: flex; align-items: flex-start; padding-top: 15px; justify-content: flex-end; } /* ================ Cart page mobile ================ */ @media only screen and (max-width: 767px) { .template__cart__footer { display: grid; grid-template-areas: 'product' 'total' 'checkout' 'shipping' 'update' 'notes' 'additional'; grid-template-columns: 1fr; grid-template-rows: auto; grid-column-gap: 0; grid-row-gap: 10px; } .template__cart__footer .drawer__bottom__shipping { margin-top: 15px; } .cart__heading__wrapper .cart__items__price, .cart__heading__wrapper .cart__items__quantity { display: none; } .cart__template .cart__remove { position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } .cart__template .cart__items__total { display: none; } .cart__template .checkout__button { width: 100%; } .cart__template .cart__items__row { padding: var(--gutter) 0; } .cart__template .cart__remove__icon { right: 0; } .cart__template .pt2 { padding-top: var(--gutter); } .cart__template .h3--body { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(18.30206px * var(---font-adjust-accent)); text-align: center; } .cart__template .h3--body, .cart__template .h3--body.strong, .cart__template .h3--body .strong { font-weight: var(---font-weight-accent-bold); } .cart__template .cart__return { display: block; font-size: calc(12px * var(---font-adjust-accent)); text-align: center; border-top: 1px solid var(--border); padding: 3px; } .cart__template .cart__items__grid.cart__heading__wrapper { grid-row-gap: 0; } } /* ================ No Ajax update animation ================ */ .cart__update { display: none; } .no--ajax .cart__update, .no-js .cart__update { display: inline-block; } .cart__update__icon { display: none; } .cart__update__icon svg { position: relative; top: 0.2em; width: 1em; height: 1em; margin-right: 0.3em; } .cart__update__icon svg.icon path { stroke: var(--primary); fill: none; } .heartBeat svg { animation-name: heartBeat; animation-duration: 1.3s; animation-timing-function: ease-in-out; animation-fill-mode: both; } @keyframes heartBeat { 0% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.3); } 70% { transform: scale(1); } } .cart--dirty .text-link { border-bottom: 1px solid var(--primary); } .cart--dirty .cart__update__icon, .no-js .cart__update__icon { display: inline; } .no-js .cart__footer__shipping { display: none; } /* ============================================================================ #Quantity Selectors ============================================================================== */ .quantity__wrapper { position: relative; display: flex; align-items: center; margin-bottom: 1em; max-width: 103px; min-width: 75px; overflow: visible; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .quantity__input { display: block; background: none; text-align: center; border: 1px solid var(--border); width: 100%; padding: 8px 30px; margin: 0 !important; } .quantity__button { cursor: pointer; position: absolute; display: flex; justify-content: center; align-items: center; padding: 0 12px; top: 0; bottom: 0; border: 0; background: none; text-align: center; overflow: hidden; -webkit-user-select: none; user-select: none; transition: all 0.2s ease-out; } .quantity__button:active, .quantity__button:focus, .quantity__button:hover { color: var(--primary); outline: none; } .quantity__button:active { opacity: 0.7; } .quantity__button--plus { right: 0; } .quantity__button--minus { left: 0; } html.no-js .quantity__button { display: none; } /* ============================================================================ #Cart Drawer ============================================================================== */ .product-add-popdown { position: fixed; z-index: 18000; top: 0; right: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s; transform: translate3d(0, -100%, 0); color: var(---color-nav-text); background: var(---color-nav); border-bottom: 1px solid var(---color-nav-border); } .product-add-popdown.has-errors { position: static; width: 100%; margin: 2.7em 0 0; border-bottom: none; background: hsla(0, 0%, 100%, 0); } .product-add-popdown.is-visible { opacity: 1; visibility: visible; transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0s; transform: translateZ(0); } .product-add-popdown:not(.has-errors) { min-height: var(--header-height); } .product__popdown__textbar { text-align: center; background: var(---color-announcement-bg); color: var(---color-announcement-text); } .product__popdown__outer { width: 100%; height: 100%; } .product__popdown__inner { width: 100%; height: 100%; margin-top: 15px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; } .product__popdown__cart__wrapper, .product__popdown__close, .product__popdown__image { flex-grow: 1; flex-basis: 0; } .product__popdown__close { text-align: left; } .popdown__close__inner { font-size: 16px; cursor: pointer; padding: 20px 0; } .product__popdown__image { display: flex; justify-content: center; padding: 0 25px; } .product__popdown__image img { width: 80px; height: 80px; border-radius: 100%; object-fit: cover; } @media only screen and (max-width: 767px) { .product__popdown__image img { width: 60px; height: 60px; } } .product__popdown__title { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); margin-bottom: 0; } .product__popdown__title--bold, .product__popdown__title.strong, .product__popdown__title .strong { font-weight: var(---font-weight-accent-bold); } .product__popdown__cart__wrapper { text-align: right; } .product__popdown__added { opacity: 0.8; } .product__add__drawer { width: 100%; } .product__add__image__container { min-height: 200px; } /* ============================================================================ #Search popdown ============================================================================== */ .search-popdown { position: fixed; z-index: 30000; top: 0; right: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; max-height: 100%; overflow-y: scroll; transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s; transform: translate3d(0, -100%, 0); border-bottom: 1px solid var(--border); } .search-popdown.is-visible { opacity: 1; visibility: visible; transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0s; transform: translateZ(0); } .search-popdown .search__predictive__main { height: var(--header-height); } .search-popdown .search__predictive__form { display: flex; justify-content: flex-end; height: 100%; width: 100%; margin: 0; } .search-popdown .search__predictive__form input { margin: 0; border: none; font-size: calc(15.51022px * var(---font-adjust-body)); } @media (min-width: 480px) { .search-popdown .search__predictive__form input { font-size: calc( (15.51022px + (221.24544vw - 1061.97811px) / 920) * var(---font-adjust-body) ); } } @media (min-width: 1400px) { .search-popdown .search__predictive__form input { font-size: calc(17.72268px * var(---font-adjust-body)); } } .search-popdown .search__predictive__form input:active, .search-popdown .search__predictive__form input:focus { box-shadow: none; } .search-popdown .search__predictive__form__button { padding: 0 15px; } /* ============================================================================ #Customer Accounts ============================================================================== */ .full__page__form__wrapper { background: var(---color-bg-accent); min-height: var(--content-full); display: flex; flex-direction: column; justify-content: center; } @media only screen and (max-width: 479px) { .full__page__form__wrapper .wrapper, .full__page__form__wrapper .wrapper .grandparent .header__dropdown__wrapper, .wrapper .grandparent .full__page__form__wrapper .header__dropdown__wrapper { padding: 0; } } .shopify-challenge__container { min-height: var(--content-full); display: flex; flex-direction: column; justify-content: center; } .shopify-challenge__message { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(13.14426px * var(---font-adjust-accent)); color: var(--text); text-align: center; } .shopify-challenge__message, .shopify-challenge__message.strong, .shopify-challenge__message .strong { font-weight: var(---font-weight-accent-bold); } .shopify-challenge__button { margin-top: 1rem !important; width: 300px; } .shopify-challenge__button.strong, .shopify-challenge__button .strong { font-weight: var(---font-weight-accent-bold); } .full__page__form { background-color: var(--bg); padding: 3rem; margin: 3rem 0; } @media only screen and (max-width: 479px) { .full__page__form { padding: 1rem; } } .full__page__form form { margin: 0; padding: 0; } .account__form__title { font-family: var(---font-stack-heading); font-weight: var(---font-weight-heading); font-style: var(---font-style-heading); font-size: 30px; color: var(--text-dark); text-align: center; } .account__form__title.strong, .account__form__title .strong { font-weight: var(---font-weight-accent-bold); } .account__form__title--guest { margin-top: 64px; margin-bottom: 0.5rem; } .order__item__subscription { margin-top: 10px; margin-bottom: 0; font-size: calc(var(--font-3) * var(---font-adjust-body)); } .order__item--original { color: var(--muted); text-decoration: line-through; } .order__table tr { border-bottom: 1px solid var(--border); } @media only screen and (max-width: 479px) { .order__table tbody tr { border-bottom: 2px solid var(--text-dark) !important; } .order__table td { padding: 10px 0 !important; } } /* ================ Account page headers ================ */ .account-header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 20px; } @media only screen and (min-width: 768px) { .account-header { display: table; margin-bottom: calc(var(--outer) * 2); width: 100%; } .account-header__title { margin-bottom: 13px; } .account-header__left { display: table-cell; vertical-align: middle; margin-bottom: 0; } .account-header__left .h1, .account-header__left .h2, .account-header__left .h3, .account-header__left .h4, .account-header__left h1, .account-header__left h2, .account-header__left h3, .account-header__left h4 { margin-bottom: 0; } .account-header__right { display: table-cell; vertical-align: middle; text-align: right; } } @media only screen and (min-width: 768px) and (max-width: 767px) { .account-header__right { margin-bottom: 32px; } } /* ============================================================================ #Password Page ============================================================================== */ .template-password { height: 100%; text-align: center; } .password-section, .password__outer, .password__wrapper { width: 100%; height: 100%; } .password__outer { position: absolute; } .password__wrapper { display: table; position: relative; color: var(--text-dark); background-color: var(--primary); background-size: cover; background-repeat: no-repeat; background-position: 50%; background-color: var(--text-dark); } .password__wrapper .password__footer__inner { color: #fff; } .password__wrapper a { color: inherit; } .password__box, .password__footer__inner { position: relative; z-index: 10; } .password__main { display: table-row; width: 100%; height: 100%; margin: 0 auto; } .password__main__inner { display: table-cell; vertical-align: middle; padding: 16px 32px; } @media only screen and (max-width: 479px) { .password__main__inner { padding: 10.6666666667px; } } @media only screen and (min-width: 480px) { .password__main__inner { padding: 10.6666666667px 32px; } } .password__box { background-color: var(--bg); max-width: 600px; margin: 0 auto; } @media only screen and (max-width: 479px) { .password__box { padding: 32px; } } @media only screen and (min-width: 480px) { .password__box { padding: 32px 0; } } .template-password .input-group--inner-button { border: 1px solid var(--hairline); } .storefront-password-form { margin-top: 32px; } .password__hero { font-family: var(---font-stack-heading); font-weight: var(---font-weight-heading); font-style: var(---font-style-heading); letter-spacing: var(---font-heading-space); text-transform: var(---font-heading-caps); font-size: calc(35.48363px * var(---font-adjust-heading)); line-height: 1.15; letter-spacing: 0; text-rendering: optimizeLegibility; padding-bottom: 32px; padding-top: 32px; } @media (min-width: 480px) { .password__hero { font-size: calc( (35.48363px + (1241.55915vw - 5959.48393px) / 920) * var(---font-adjust-heading) ); } } @media (min-width: 1400px) { .password__hero { font-size: calc(47.89922px * var(---font-adjust-heading)); } } .password__hero .logo { max-width: 100%; max-height: 200px; } .password__message { padding-left: 15px; padding-right: 15px; font-size: 120%; } .password__message img { max-width: 100%; } .password__hero, .password__login-form, .password__message, .password__signup-form { max-width: 500px; margin: 0 auto; } .password__login-form { text-align: center; padding: 64px 32px; } .password__box, .password__login-form { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); border-radius: var(--radius); } .password__login-form, .password__signup-form { background-color: var(--bg); } @media only screen and (min-width: 480px) { .password__login-form, .password__signup-form { padding-left: 32px; padding-right: 32px; } } .password__login-form .input-group, .password__signup-form .input-group { width: 100%; } .password__login-form .errors ul, .password__signup-form .errors ul { list-style-type: none; margin-left: 0; } .password__signup-form { padding-top: 32px; } .password__signup-form__heading { margin-bottom: 0.8em; } .password__social-sharing { margin-top: 32px; } .admin-login, .password__social-sharing__heading { margin-bottom: 0; } .admin-login { margin-top: 16px; font-size: 95%; } .admin-login a { text-decoration: none; } .password__footer { display: table-row; height: 1px; } .password__footer__inner { display: table-cell; vertical-align: bottom; padding: 32px; line-height: 1.5em; font-size: 95%; color: var(---color-footer-text); } .password__footer__inner .password__modal__button, .password__footer__inner a { color: currentColor; text-decoration: none; margin: 0 16px; } @media only screen and (max-width: 767px) { .password__footer__inner .password__modal__button, .password__footer__inner a { display: block; margin-top: 16px; } } .shopify-section.password-section + .shopify-section { padding-top: 100vh; } /* ================ Product Media ================ */ @media screen and (max-width: 479px) { .media__thumb__wrapper { display: none; } } .product__media__wrapper { margin-bottom: calc(var(--gutter) * 2); position: relative; z-index: 99; } .product__slides { position: relative; font-size: 0; overflow-y: hidden; padding-bottom: 16px; /* for creating space for flickity dots */ } @media screen and (min-width: 480) { .product__slides { padding-bottom: 0; } } .product__slides .flickity-viewport { transition: height 0.4s; } .product__slides .flickity-slider > * { width: 100%; opacity: 0 !important; transition: opacity 1s ease !important; } .product__slides .flickity-slider > .is-selected { opacity: 1 !important; } .no-js .product__slides > :not(noscript) { display: none; } body.focus-enabled .product__slides:focus .product__media.is-selected { border: 1px solid var(--secondary); } html.js .product__slides:not(.flickity-enabled) > .product__media:not(:first-child) { display: none; } .product__slides.flickity-enabled .product__media:not(.is-selected) { visibility: hidden; } .product__slides.flickity-lock-height .flickity-viewport { padding-bottom: var(--default-ratio); } @media only screen and (min-width: 480px) { .product__slides .flickity-page-dots { display: none; } } .product__image__placeholder { width: 100%; padding-top: 66%; background-color: var(--bg-accent); } .media__contain { margin: 0 auto; min-height: 1px; width: 100%; height: 0; position: relative; } .media__contain .plyr--video, .media__contain > iframe, .media__contain > video, .shopify-model-viewer-ui, model-viewer { width: 100%; height: 100%; position: absolute !important; top: 0; left: 0; max-width: 100%; min-width: 100%; min-height: 100%; } video::-webkit-media-controls-panel { display: flex !important; opacity: 1 !important; } .btn--ar { width: 100%; position: relative; margin-top: 10px; padding: 10px 15px; display: flex; justify-content: center; align-items: center; border-radius: 0; } [data-shopify-xr-hidden] { width: 0; padding: 0; } @media only screen and (min-width: 768px) { [data-shopify-xr-hidden] { display: none; } } .btn--ar .icon { display: inline-block; height: 20px; width: 20px; color: currentColor; margin-right: 4px; } .btn--ar .icon path { fill: inherit; stroke: inherit; } .btn--ar .icon path.icon-media-model-outline, .btn--ar .icon path.icon-media-model-square { stroke: none; fill: none; } .btn--ar .icon path.icon-media-model-element { fill: currenColor; opacity: 1; } .product-single__view-in-space-text { display: inline-block; vertical-align: middle; } .thumb--model, .thumb--video { position: relative; } .product__usda-organic-badge { position: absolute; z-index: 1; top: 8px; left: 16px; } .product__usda-organic-badge svg{ width: 50px !important; height: 50px !important; } @media screen and (min-width: 768px) { .product__usda-organic-badge { left: 12px; } .product__usda-organic-badge svg{ width: 70px !important; height: 70px !important; } } @media screen and (min-width: 990px) { .product__usda-organic-badge { left: 30px; top: 20px; } } /* zoom button over product image -- additional styles in pswp */ .media__zoom__icon { position: absolute; bottom: 0; right: 0; opacity: 0; z-index: 100; background: none; color: var(--bg); padding: 1em; cursor: zoom-in; transition: opacity 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } @media only screen and (max-width: 767px) { .media__zoom__icon { opacity: 1; } } .media__zoom__icon:focus, .product__slides:focus .media__zoom__icon, .product__slides:hover .media__zoom__icon { opacity: 1; } .media__zoom__icon svg { width: 30px; height: auto; filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.2)); } .pswp__counter { color: var(--text-light); font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); } .pswp__counter.strong, .pswp__counter .strong { font-weight: var(---font-weight-accent-bold); } .pswp--zoom-allowed .pswp__img { cursor: var(---url-zoom) 0 0, zoom-in; cursor: -webkit-image-set(var(---url-zoom) 1x, var(---url-zoom-2x) 2x), zoom-in; } /* removes media players from the tabindex when they are hidden */ body.focus-enabled .product__media:not(.is-selected) .media__contain iframe, body.focus-enabled .product__media:not(.is-selected) .plyr, body.focus-enabled .product__media:not(.is-selected) .shopify-model-viewer-ui, body.focus-enabled .product__media:not(.is-selected) model-viewer { display: none; } /* Thumbnails */ .media__thumb { position: relative; display: inline-block; padding: 0; cursor: pointer; width: 60px; height: 60px; margin: 10px 10px 5px 0; } @media only screen and (min-width: 768px) { .media__thumb { margin: 8px 8px 5px 0; } } .media__thumb.is-selected:after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 100%; pointer-events: none; } .media__thumb img { width: 100%; height: 100%; object-fit: cover; } .media__thumb .icon { position: absolute; top: 2px; right: 2px; margin: 0; height: 20px; width: 20px; color: transparent; fill: var(---color-bg); vertical-align: initial; } .media__thumb .icon path { fill: inherit; stroke: inherit; } .media__thumb .icon path.icon-media-model-outline, .media__thumb .icon path.icon-media-video-outline { stroke: var(---color-a5); } .media__thumb .icon path.icon-media-model-element, .media__thumb .icon path.icon-media-video-element { fill: var(---color-text-dark); } .product__pickup { margin: 32px 0; } .product__details + .product__pickup { margin-top: 26px; } .pickup__preview, .pickup__preview p { margin: 0; } .pickup__info__timing { font-style: italic; } .pickup__preview--primary { display: flex; align-items: flex-start; } .pickup__preview--primary button.pickup__button { margin-left: 4px; font-style: italic; } .pickup__list__item .icon { width: 15px; } .pickup__preview .icon { width: 12px; } .pickup__list__item .icon, .pickup__preview .icon { margin: 0 6px 0 0; height: calc(0.875rem * var(---font-adjust-body) * 1.5); } .pickup__list__item .icon-in-stock path, .pickup__preview .icon-in-stock path { fill: #56ad6a; } .pickup__list__item .icon-out-of-stock, .pickup__preview .icon-out-of-stock { fill: #d02e2e; } .pickup__preview .icon-out-of-stock { width: 9px; margin: 1px 6px 0 0; } .pickup__list__item .icon-out-of-stock { width: 12px; margin: -3px 7px 0 0; } @media only screen and (min-width: 768px) { .pickup__drawer { --gutter: 20px; } } .pickup__address { font-style: normal; margin: 8px 0 0; padding: 0 0 0 15px; border-left: 3px solid var(--bg-accent); } .pickup__content { overflow-y: auto; } .pickup__header { display: flex; margin: 0; padding: var(--gutter); align-items: center; height: auto; } .pickup__header .drawer__button { padding-right: 0; } .pickup__header__title { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); } .pickup__header__title, .pickup__header__title.strong, .pickup__header__title .strong { font-weight: var(---font-weight-accent-bold); } .pickup__header__title p { margin: 0; } .pickup__product__wrap { background-color: var(--bg-accent); padding: var(--gutter); text-align: center; } .pickup__product__title { font-size: calc(18.30206px * var(---font-adjust-body)); font-family: var(---font-stack-body); font-weight: var(---font-weight-body); font-style: var(---font-style-body); font-weight: var(---font-weight-body-bold); margin: 0; } @media (min-width: 480px) { .pickup__product__title { font-size: calc( (18.30206px + (331.96033vw - 1593.40956px) / 920) * var(---font-adjust-body) ); } } @media (min-width: 1400px) { .pickup__product__title { font-size: calc(21.62167px * var(---font-adjust-body)); } } .pickup__variant { font-style: italic; color: var(--text-light); margin: 3px 0 0; } .pickup__drawer-button { position: absolute; top: 0; right: 0; width: 20px; height: 20px; padding: 0; font-size: 0; } .pickup__drawer-button .icon-close { width: 12px; height: 12px; margin: 0; } .pickup__drawer__body { padding: 0; } .pickup__list { padding: var(--gutter); margin: 0; } .pickup__list__item { margin-bottom: 32px; } .pickup__list__item p { margin: 2px 0; } .pickup__list__item + .pickup__list__item { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--bg-accent); } .plyr.plyr--full-ui.plyr--video { color: var(---color-text-dark); background-color: initial; } body:not(.focus-enabled) .plyr.plyr--full-ui.plyr--video { outline: none; } .plyr.plyr--full-ui.plyr--video .plyr__video-wrapper { background-color: initial; } .plyr.plyr--full-ui.plyr--video .plyr__poster { background-color: var(---color_video_bg); } .plyr.plyr--full-ui.plyr--video:-webkit-full-screen .plyr__video-wrapper .plyr.plyr--full-ui.plyr--video:-webkit-full-screen .plyr__poster { background-color: #000; } .plyr.plyr--full-ui.plyr--video:fullscreen .plyr__video-wrapper .plyr.plyr--full-ui.plyr--video:fullscreen .plyr__poster { background-color: #000; } .plyr.plyr--full-ui.plyr--video:-webkit-full-screen .plyr__poster, .plyr.plyr--full-ui.plyr--video:-webkit-full-screen .plyr__video-wrapper { background-color: #000; } .plyr.plyr--full-ui.plyr--video:-moz-full-screen .plyr__poster, .plyr.plyr--full-ui.plyr--video:-moz-full-screen .plyr__video-wrapper { background-color: #000; } .plyr.plyr--full-ui.plyr--video:-ms-fullscreen .plyr__poster, .plyr.plyr--full-ui.plyr--video:-ms-fullscreen .plyr__video-wrapper { background-color: #000; } .plyr.plyr--full-ui.plyr--video .plyr--fullscreen-fallback .plyr__poster, .plyr.plyr--full-ui.plyr--video .plyr--fullscreen-fallback .plyr__video-wrapper { background-color: #000; } .plyr.plyr--full-ui.plyr--video .plyr__control.plyr__control--overlaid { background-color: #fff; border-color: var(---color-a5); } .plyr.plyr--full-ui.plyr--video .plyr__control.plyr__control--overlaid.plyr__tab-focus, .plyr.plyr--full-ui.plyr--video .plyr__control.plyr__control--overlaid:hover { color: var(---color-a50); } .plyr.plyr--full-ui.plyr--video .plyr__controls { background-color: #fff; border-color: var(---color-a5); } .plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']::-moz-range-thumb { box-shadow: 2px 0 0 0 #fff; } .plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']::-ms-thumb { box-shadow: 2px 0 0 0 #fff; } .plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']::-webkit-slider-thumb { box-shadow: 2px 0 0 0 #fff; } .plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']::-webkit-slider-runnable-track { background-image: linear-gradient( 90deg, currentColor var(---value, 0), var(---color-a50) var(---value, 0) ); } .plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']::-moz-range-track { background-color: var(---color-a50); } .plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']::-ms-fill-upper { background-color: var(---color-a50); } .plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range'].plyr__tab-focus::-webkit-slider-runnable-track { box-shadow: 0 0 0 4px var(---color-a20); } .plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range'].plyr__tab-focus::-moz-range-track { box-shadow: 0 0 0 4px var(---color-a20); } .plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range'].plyr__tab-focus::-ms-track { box-shadow: 0 0 0 4px var(---color-a20); } .plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']:active::-moz-range-thumb { box-shadow: 0 0 0 3px var(---color-a20); } .plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']:active::-ms-thumb { box-shadow: 0 0 0 3px var(---color-a20); } .plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']:active::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(---color-a20); } .plyr.plyr--full-ui.plyr--video .plyr__progress .plyr__tooltip { background-color: var(---color-text-dark); color: #fff; } .plyr.plyr--full-ui.plyr--video .plyr__progress .plyr__tooltip:before { border-top-color: var(---color-text-dark); } .plyr.plyr--full-ui.plyr--video.plyr--loading .plyr__progress__buffer { background-image: linear-gradient( -45deg, var(---color-a50) 25%, transparent 0, transparent 50%, var(---color-a50) 0, var(---color-a50) 75%, transparent 0, transparent ); } .plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range'] { color: #fff; } .plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']::-moz-range-thumb { box-shadow: 2px 0 0 0 var(---color-text-dark); } .plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']::-ms-thumb { box-shadow: 2px 0 0 0 var(---color-text-dark); } .plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']::-webkit-slider-thumb { box-shadow: 2px 0 0 0 var(---color-text-dark); } .plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']::-webkit-slider-runnable-track { background-image: linear-gradient( 90deg, currentColor var(---value, 0), hsla(0, 0%, 100%, 0.6) var(---value, 0) ); } .plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']::-moz-range-track, .plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']::-ms-fill-upper { background-color: hsla(0, 0%, 100%, 0.6); } .plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range'].plyr__tab-focus::-webkit-slider-runnable-track { box-shadow: 0 0 0 4px hsla(0, 0%, 100%, 0.25); } .plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range'].plyr__tab-focus::-moz-range-track { box-shadow: 0 0 0 4px hsla(0, 0%, 100%, 0.25); } .plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range'].plyr__tab-focus::-ms-track { box-shadow: 0 0 0 4px hsla(0, 0%, 100%, 0.25); } .plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']:active::-moz-range-thumb { box-shadow: 0 0 0 3px hsla(0, 0%, 100%, 0.25); } .plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']:active::-ms-thumb { box-shadow: 0 0 0 3px hsla(0, 0%, 100%, 0.25); } .plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']:active::-webkit-slider-thumb { box-shadow: 0 0 0 3px hsla(0, 0%, 100%, 0.25); } .popup { position: relative; } .popup .popup__inner { position: fixed; bottom: 0; display: none; max-width: 400px; width: calc(100% - var(--outer) * 2); padding: 32px; margin: var(--outer); background: inherit; box-shadow: 0 0 10px var(---color-a5); } #challenge .popup { display: none !important; } .popup:not([data-promo-text]) { z-index: 9999; transition: z-index 0.3s, opacity 0.3s, visibility 0.3s; } [data-scroll-locked] .popup:not([data-promo-text]) { z-index: -1; visibility: hidden; opacity: 0 !important; pointer-events: none; } .popup .input-group, .popup .standard__cta, .popup form { margin-bottom: 0; } .popup .input-group--inner-button { padding: 0; border: none; border-bottom: 1px solid; border-radius: 0; margin: 0; color: inherit; } .popup .input-group .input-group-field { padding-left: 0; color: inherit; } .popup .input-group .input-group-field::placeholder { color: inherit; } .popup .input-group .input-group-field:-webkit-autofill, .popup .input-group .input-group-field:-webkit-autofill:active, .popup .input-group .input-group-field:-webkit-autofill:focus, .popup .input-group .input-group-field:-webkit-autofill:hover { -webkit-transition: background-color 5000s ease-in-out 0s, border-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s, border-color 5000s ease-in-out 0s; -webkit-text-fill-color: var(--text) !important; } .popup .has-success .icon, .popup .icon + .icon, .popup label { display: none; } .popup .has-success .icon + .icon { display: inline-block; } .popup .popup__title { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(13.14426px * var(---font-adjust-accent)); margin: 0 0 10px; } .popup .popup__title, .popup .popup__title.strong, .popup .popup__title .strong { font-weight: var(---font-weight-accent-bold); } .popup p a { text-decoration: underline; } .popup p a:hover { text-decoration: none; } .popup .popup__inner > :first-child { padding-right: 35px; } .popup p { font-size: calc(13.14426px * var(---font-adjust-accent)); margin-bottom: 15px; } .popup p:first-child:nth-last-child(2) { margin: 0; } .popup .popup__inner p:nth-child(2) { position: relative; padding-top: 17px; } .popup .popup__inner p:nth-child(2):before { content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 20px; background-color: currentColor; opacity: 0.3; } .popup button + a { font-size: calc(12px * var(---font-adjust-accent)); margin-left: 10px; } .popup .close { position: absolute; top: 0; right: 0; padding: 32px 32px 15px 15px; color: inherit; } .popup .close:hover svg { transform: rotate(90deg); } .popup .close svg { transition: transform 0.3s; width: 12px; height: auto; } .popup--left .popup__inner { left: 0; } .popup--right .popup__inner { right: 0; } .popup--bottom .popup__inner { left: 0; right: 0; bottom: 0; flex-flow: row wrap; justify-content: center; align-items: center; max-width: none; width: auto; padding: 10px 30px; margin: 0; } .popup--bottom .popup__inner[style*='block'] { display: flex !important; } .popup--bottom .popup__inner .close { top: 50%; transform: translateY(-50%); } .popup--bottom .popup__inner > :first-child, .popup--bottom .popup__inner > a:not(.btn), .popup--bottom .popup__inner > button:not(.close), .popup--bottom .popup__inner p, .popup--bottom .popup__inner p:nth-child(2) { margin: 5px 8px; font-size: calc(var(--font-2) * var(---font-adjust-body)); } .popup--bottom .popup__inner > :first-child:before, .popup--bottom .popup__inner > a:not(.btn):before, .popup--bottom .popup__inner > button:not(.close):before, .popup--bottom .popup__inner p:before, .popup--bottom .popup__inner p:nth-child(2):before { display: none; } .popup--bottom .popup__inner > :first-child, .popup--bottom .popup__inner > a:not(.btn), .popup--bottom .popup__inner p, .popup--bottom .popup__inner p:nth-child(2) { padding: 0; } .popup--center .popup__inner { top: 50%; left: 50%; bottom: auto; margin: 0; max-width: 350px; text-align: center; transform: translate(-50%, -50%); } .popup--center .popup__inner > :first-child { padding-left: 35px; } .popup--center .popup__inner p:nth-child(2):before { left: 50%; transform: translateX(-50%); } @media only screen and (max-width: 767px) { .popup:not(.popup--center) .popup__inner { max-width: none; bottom: 60px; } .popup--bottom .popup__inner { left: var(--outer); right: var(--outer); } .popup--bottom .popup__inner .close { top: 20px; transform: none; } .popup:not(.popup--center):first-child:last-child .popup__inner { bottom: var(--outer); } } [data-popup-delay].desktop { display: block; } @media only screen and (max-width: 767px) { [data-popup-delay].desktop { display: none; } } [data-popup-delay].mobile { display: none; } @media only screen and (max-width: 767px) { [data-popup-delay].mobile { display: block; } } [data-popup-delay='always'] > *, [data-promo-text][data-popup-delay='always'] { z-index: 9995; } [data-popup-delay='delayed'] > *, [data-promo-text][data-popup-delay='delay'] { z-index: 9994; } [data-popup-delay]:not([data-popup-delay='always']):not([data-popup-delay='delayed']):not([data-tracking-consent]) { z-index: 9992; } .upsell__holder { margin-top: 2em; text-align: center; } .upsell__holder__title { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); display: inline-block; padding: 0 10px; margin-bottom: 0; background-color: var(--bg); transform: translateY(80%); text-transform: uppercase; } .upsell__holder__title.strong, .upsell__holder__title .strong { font-weight: var(---font-weight-accent-bold); } .upsell { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; padding: var(--inner); border: 1px solid var(--border); text-align: left; } .upsell__image { width: 90px; height: 90px; margin-right: 10px; } .upsell__image > a { display: block; transition: opacity 0.3s; } .upsell__image > a:hover { opacity: 0.7; } .upsell__image__inner { display: block; width: 90px; height: 90px; } .upsell__content { display: flex; flex-direction: column; min-height: 90px; justify-content: space-between; } .upsell__price, .upsell__title, .upsell__variant-title { margin-top: 0; margin-bottom: 4px; } .upsell__title { font-family: var(---font-stack-body); font-weight: var(---font-weight-body); font-style: var(---font-style-body); font-weight: var(---font-weight-body-bold); font-size: calc(13.14426px * var(---font-adjust-body)); color: var(--text-dark); } @media (min-width: 480px) { .upsell__title { font-size: calc( (13.14426px + (138.2528vw - 663.61344px) / 920) * var(---font-adjust-body) ); } } @media (min-width: 1400px) { .upsell__title { font-size: calc(14.52678px * var(---font-adjust-body)); } } .upsell__variant-title { font-family: var(---font-stack-body); font-weight: var(---font-weight-body); font-style: var(---font-style-body); display: none; } .upsell__price, .upsell__variant-title { font-size: calc(var(--font-3) * var(---font-adjust-body)); } .upsell__price { color: var(--text-light); } .upsell__price .old-price { margin-left: 8px; text-decoration: line-through; } .upsell__price .unit { color: var(--text-light); } .upsell__btn { padding: 1em 2em; } .upsell__btn:disabled { opacity: 1; } .upsell__btn .svg-loader circle { stroke: var(--bg); } .upsell__btn .svg-loader circle ~ circle { stroke: var(--primary); } .upsell__out-of-stock { margin: 0; } .add-action-errors { margin-top: 20px; margin-bottom: 20px; display: none; } .add-action-errors .errors { margin: 0; } .rating__wrapper__title { margin-top: 2px; font-family: var(---font-stack-body); font-weight: var(---font-weight-body); font-style: var(---font-style-body); font-weight: var(---font-weight-body-bold); font-size: calc(15.51022px * var(---font-adjust-body)); } @media (min-width: 480px) { .rating__wrapper__title { font-size: calc( (15.51022px + (221.24544vw - 1061.97811px) / 920) * var(---font-adjust-body) ); } } @media (min-width: 1400px) { .rating__wrapper__title { font-size: calc(17.72268px * var(---font-adjust-body)); } } .product__rating { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; } .product__rating__count { color: var(--text-light); } .product__rating__star:before { content: '★'; color: var(--primary); margin: 0 4px; } /* Product grid item reviews */ .product__grid__title__wrapper { display: flex; justify-content: space-between; flex-direction: column; } .rating__wrapper__grid { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(12px * var(---font-adjust-accent)); } .rating__wrapper__grid, .rating__wrapper__grid.strong, .rating__wrapper__grid .strong { font-weight: var(---font-weight-accent-bold); } .product__grid__info.text-center .product__grid__title__wrapper { justify-content: center; flex-direction: column; } /* Search reviews */ .rating__wrapper__search { font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(13.14426px * var(---font-adjust-accent)); } .rating__wrapper__search, .rating__wrapper__search.strong, .rating__wrapper__search .strong { font-weight: var(---font-weight-accent-bold); } .rating__wrapper__search .product__rating { justify-content: flex-start; } .richtext-wrapper .icon__column__icon { margin-left: auto; margin-right: auto; } /* ============================================================================ Product Page Toggle ============================================================================== */ .product-toggle { display: flex; padding: 0 0 0.5rem; font-size: 0.8125rem; justify-content: space-between; width: 100%; } .product-toggle__item { display: list-item; margin: 0 0.5rem; width: 100%; } .product-toggle__item:first-child { margin-left: 0; } .product-toggle__item:last-child { margin-right: 0; } .product-toggle__item a { border: 2px solid white; border-radius: 4px; background: white; color: var(---color-primary); display: flex; flex-direction: column; padding: 10px 0; text-align: center; } .product-toggle__item .current { cursor: default; border-color: var(---color-primary); } /* ============================================================================ Anchor Navigation ============================================================================== */ .is--sticky-nav { position: sticky; top: var(--menu-height); z-index: 5000; } @media screen and (min-width: 480px) { .is--sticky-nav { position: static; top: 0; } } .anchor-navigation { align-items: center; display: flex; justify-content: center; width: 100%; } .anchor-navigation nav { background-color: #faf0df; height: var(--menu-height); padding: 1rem; text-align: center; width: 100%; } @media screen and (min-width: 480px) { .anchor-navigation nav { background-color: white; border-radius: 27px; box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%); margin-bottom: calc(var(--outer) * 2); margin-top: 0.5rem; width: auto; } } @media screen and (min-width: 990px) { .anchor-navigation nav { margin: 0; } } @media screen and (min-width: 990px) { .anchor-navigation.is--section-header nav { margin: calc(var(--outer) * 3) 0 0; } } .anchor-navigation__link { padding: 0 1rem; } .anchor-navigation__link:hover { color: var(---color-primary-hover); } .anchor-link-push { padding-top: calc(var(--menu-height) * 2 + var(--outer) * 2); margin-top: -90px; } @media screen and (min-width: 480px) { .anchor-link-push { padding-top: calc(var(--menu-height) + var(--outer)); margin-top: 0; } } /* Fix to allow videos with overlays to allow button clicks */ .homepage-video .hero__content__wrapper { pointer-events: none; } /* But videos with cta buttons should still have click ability */ .homepage-video .hero__cta__wrapper { pointer-events: all; } /* ============================================================================ Landing Page Only Overrides ============================================================================== */ /* Center Feals logo */ body.is--landing-page .header__desktop__bar__l { flex: 0; } /* Hide rest of navigation and footer */ body.is--landing-page .header__desktop__bar__c, body.is--landing-page .header__desktop__bar__r, body.is--landing-page #shopify-section-footer { display: none; } @media only screen and (max-width: 479px) { body.is--landing-page .header__mobile { display: flex; } body.is--landing-page .header__mobile .header__logo { margin: 0 auto; } } body.is--landing-page .header__mobile__right, body.is--landing-page .header__mobile__left { display: none } /* ============================================================================ Paginated Grid Section ============================================================================== */ .paginate-grid .wrapper { padding: 0; } @media screen and (min-width: 990px) { .paginate-grid .wrapper { padding: 0 var(--outer); } } .paginate-grid .standard-text-container { margin-bottom: calc(var(--outer) * 2); } .paginate-grid__carousel { margin-bottom: 0; } .paginate-grid__carousel-item { opacity: 0.5; padding: 0 calc(var(--gutter) / 2) 32px; transition: opacity ease 0.2s; width: 75%; } @media screen and (min-width: 768px) { .paginate-grid__carousel-item { width: 37.5%; } } @media screen and (min-width: 990px) { .paginate-grid__carousel-item { width: 25%; } } .paginate-grid__carousel-item.is-selected { opacity: 1; } .paginate-grid .flickity-prev-next-button, .paginate-grid .flickity-button-icon { display: none; } @media screen and (min-width: 990px) { .paginate-grid .flickity-prev-next-button { display: block; } .paginate-grid .flickity-prev-next-button { background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAdCAYAAACnmDyCAAABD0lEQVR4Ae3UAUQAQRAF0JOEEAQFAgIkkBACCIAACAB27lLRAQsCQAhgZ88FBUgQKlAFFCAg0O5dhSJEso0aAcjfAzQc4J4Z+2eKlOxI35RLRW5Fpr3gzGd0xmRCphYofX9MO1lYcOWaQB8KunRuR3HMmxVB3n4wOk5Hdhwf05sFgZ60s6vXpp6EscdmY1aQe8Xuwv7mDI6169My3q1iD50v52DsuaUJQc4Ue4lcLcNYOrRjghwo9h48reKYJF/G3FXsP7h/rI5p8bczNhfaWf5LYtliOs3KVs9bU/LzjSJB056/f7kX4Rq4CPhTDx++6GgbWAd8QfGg4UcMDxp+VuXny0EOfc/VvCAnGjS4vgA/0FmgnJiZpwAAAABJRU5ErkJggg==) no-repeat 50%; } .paginate-grid .flickity-prev-next-button.previous { left: -32px; transform: translateY(-50%) rotateY(180deg); } .paginate-grid .flickity-prev-next-button.next { right: -32px; } } /* ============================================================================ My Account page ============================================================================== */ .my-account__name { color: var(---color-primary); margin-bottom: 0; } .my-account__email { margin-bottom: 20px; } .my-account__address { margin: 20px 0 16px; } .my-account__orders { background: var(---color-feals-cream); padding: var(--gutter) var(--gutter) 0; } .my-account__orders.is--empty-orders { padding-bottom: var(--gutter); } .my-account__orders tr + tr { border-top: 1px solid var(---color-text); margin-top: 16px; padding-top: 16px; } @media screen and (min-width: 990px) { .my-account__account-details { padding-left: 0; padding-right: var(--gutter); } } /* ============================================================================ Hide the product add popdown ============================================================================== */ .product-add-popdown { display: none !important; } .video-wrapper.is--click-disabled { pointer-events: none; } /* ============================================================================ Hack for hiding consent modal until button click ============================================================================== */ div[aria-label='cookie consent bar'] { display: none; bottom: auto !important; right: auto !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } /* ============================================================================ MVMT styled Carousel List for Logos ============================================================================== */ @media only screen and (min-width: 990px) { .mvmt_carousel_list { padding: 0 0; } } .mvmt_carousel_list__quotes { font-style: italic; font-size: 16px; text-align: center; } @media only screen and (min-width: 768px) { .mvmt_carousel_list__quotes { font-size: 20px; } } .mvmt_carousel_list__quotes .logo-bar__text { margin-bottom: calc(var(--outer) * 3); width: 100%; } @media only screen and (min-width: 990px) { .mvmt_carousel_list__quotes .logo-bar__text { margin-bottom: calc(var(--outer) * 2); } } .mvmt_carousel_list__quotes .logo-bar__text p { width: 80%; margin: 0 auto; } .mvmt_carousel_list__logos { margin: 0 auto calc(var(--outer) * 3); max-width: 480px; } @media only screen and (min-width: 768px) { .mvmt_carousel_list__logos { max-width: 660px; } } @media only screen and (min-width: 990px) { .mvmt_carousel_list__logos { margin-bottom: calc(var(--outer) * 2); } } .mvmt_carousel_list__logos .logo-bar__image-wrapper { width: 25%; opacity: 60%; padding: 0 8px; } @media only screen and (min-width: 768px) { .mvmt_carousel_list__logos .logo-bar__image-wrapper { padding: 0 16px; } } .mvmt_carousel_list__logos .logo-bar__image-wrapper.is-selected { opacity: 100%; } .mvmt_carousel_list__static-text { font-size: 12px; font-weight: 600; letter-spacing: 1.3px; text-align: center; text-transform: uppercase; } .mvmt_carousel_list__svg { color: var(---color-feals-yellow); display: flex; margin: 0 auto; max-width: 100px; } /* ============================================================================ Benefits and Guarantees Sidebar ============================================================================== */ .cart__items__wrapper { display: flex; flex-direction: column; justify-content: space-between; height: calc(100% - 60px); } .checkout-benefits-wrapper { padding: 24px 16px 0; } @media (min-width: 990px) { .checkout-benefits-wrapper { border-top: 1px solid rgba(176, 175, 173, 0.34); } } .checkout-benefits-wrapper h3 { color: var(--text-dark); font-family: var(---font-stack-body); font-size: 18px; font-weight: 600; line-height: 1.2; margin-bottom: 18px; } @media (min-width: 990px) { .checkout-benefits-wrapper h3 { font-size: 20px; } } .checkout-benefits-list { margin-bottom: 0; } .checkout-benefits-list-item { display: flex; align-items: center; } .checkout-benefits-list-item + .checkout-benefits-list-item { margin-top: 14px; } .checkout-benefits-benefit { margin-left: 16px; } .checkout-benefits-benefit h4, .checkout-benefits-benefit p { font-family: var(---font-stack-body); } .checkout-benefits-benefit h4 { color: var(---color-text-dark); font-size: 16px; font-weight: 600; margin-bottom: 6px; } .checkout-benefits-benefit p { color: var(---color-text); font-size: 14px; } /* Tabarnapp Automatic Discount app */ .swal2-title, .swal2-content { color: #746662 !important; } .swal2-content h1 { font-size: 3rem; } /* ================ Brick layout ================ */ .brick__section { display: flex; align-items: stretch; --menu-height: 0px; } @media only screen and (max-width: 767px) { .brick__section { flex-direction: column; height: auto; } } @media only screen and (max-width: 767px) { .brick__section--reverse { flex-direction: column-reverse; } } @media only screen and (min-width: 768px) { .brick--2 .brick__block { width: 50%; } } .brick__block { width: 100%; height: 100%; position: relative; } .brick--border .brick__block { border: 1px solid var(--border); } @media only screen and (min-width: 768px) { .brick--border:not(.brick--margin) .brick__block + .brick__block { border-left: none; } } .brick--margin { margin: var(--outer); } @media only screen and (min-width: 768px) { .brick--margin .brick__block + .brick__block { margin-left: var(--outer); } } @media only screen and (max-width: 767px) { .brick--border:not(.brick--margin):not(.brick__section--reverse) .brick__block + .brick__block { border-top: none; } .brick--border.brick__section--reverse:not(.brick--margin) .brick__block + .brick__block { border-bottom: none; } .brick--margin:not(.brick__section--reverse) .brick__block + .brick__block { margin-top: var(--outer); } .brick--margin.brick__section--reverse .brick__block + .brick__block { margin-bottom: var(--outer); } } .homepage-icons .wrapper--brick { margin-top: 0; margin-bottom: 0; } .homepage-icons .brick__section--reverse { flex-direction: column-reverse; } @media only screen and (min-width: 768px) { .homepage-icons .brick__section--reverse { flex-direction: row-reverse; } } .homepage-icons .button-wrapper a { margin-top: 20px; } .homepage-icons .button-wrapper { text-align: center; } @media only screen and (min-width: 768px) { .homepage-icons .direction--column .button-wrapper { text-align: left; } } .wrapper--brick { /* Changing from margins as they were causing the background to show between sections */ /* Better solution will be needed to provide consistent spacing. /* /* Can't do negative margin hack as that messes with AOS */ padding-top: calc(var(--outer) / 2); padding-bottom: calc(var(--outer) / 2); } @media only screen and (min-width: 768px) { .wrapper--brick { max-width: 1180px; margin-left: auto; margin-right: auto; } .wrapper--brick .brick__block:first-child { margin-left: var(--outer); } .wrapper--brick .brick__block:last-child { margin-right: var(--outer); } } @media only screen and (min-width: 768px) { .wrapper--brick .hero__content { max-width: calc(100% - var(--outer)); } } @media only screen and (max-width: 767px) { .wrapper--brick .brick__section:not(.brick--margin) .brick__block { width: calc(100% - var(--outer) * 2); margin-left: var(--outer); margin-right: var(--outer); } } .brick__block__text { height: 100%; display: flex; padding: var(--outer); align-items: center; background-color: var(--bg); } @media only screen and (max-width: 479px) { .brick__block__text--slider { padding: var(--outer) 0 var(--outer) var(--outer); } } .brick__block__text__inner { width: 100%; } .brick--1 .brick__block__text__inner .standard__rte { margin-left: auto; margin-right: auto; max-width: 1180px; } @media only screen and (min-width: 768px) { .brick__block .image__hero__frame, .brick__block .video-background, .brick__block__image, .brick__block__video { height: 100%; } } .brick__section.image-height .brick__block__image .image__hero__frame, .brick__section.image-height .brick__block__video { padding-top: var(--padding-ratio) !important; } .brick__section.image-height .brick__block { height: auto; } .brick__section .hero__content { padding: 0; } .brick__block__image, .brick__block__text, .brick__block__video { color: var(--text); } .brick__block__image { background-color: var(--bg); } .brick__block__svg { display: flex; align-items: center; justify-content: center; height: 100%; } @media only screen and (max-width: 767px) { .brick__block__svg { max-width: 500px; margin-left: auto; margin-right: auto; } } .brick__block__svg svg { height: 100%; width: 100%; } .brick__block__svg__inner { display: flex; align-items: center; justify-content: center; } .brick__block__product__inner { width: 100%; } .brick__block__product__inner .standard__kicker { max-width: 350px; width: 100%; margin: 0 auto; } .brick__product { background-color: var(--bg-accent); padding: var(--inner); display: block; max-width: 350px; margin: var(--outer) auto 0 auto; } .brick__product .product-grid-item .product__grid__info { padding-bottom: 0; } .brick__collection { max-width: 500px; padding: 0 75px 50px; margin: 0 auto; } @media only screen and (max-width: 479px) { .brick__collection { padding: 0; } .brick__collection .flickity-button.flickity-prev-next-button { display: none; } } .brick__collection .brick__product { background-color: var(--bg-accent); width: 100%; margin-right: var(--outer); } @media only screen and (max-width: 479px) { .brick__collection .brick__product { width: 80%; } } .brick__collection .brick__product .product-grid-item { width: 100%; } .brick__collection .flickity-button.flickity-prev-next-button { background: var(--bg-accent); } .brick__collection .flickity-badge-dots .flickity-page-dots:before { opacity: 0; } .brick__collection .flickity-page-dots { background: var(--bg-accent); bottom: 10px; } .brick__collection .flickity-page-dots .dot { background: var(--text); } .brick__collection:not(.flickity-enabled) .brick__product:not(:first-child) { display: none; } .text-center .brick__collection .flickity-page-dots { left: 50%; transform: translateX(-50%); } .bg-video-wrapper video{ position: absolute; background-size: cover; width: 100%; } .video-wrapper .video-padding{ padding: 56% 0 0; position: relative; } @media only screen and (max-width: 479px){ .video-wrapper .video-padding{ padding: 100% 0 0; } .video-wrapper .video-padding.product{ padding: 62.5% 0 0; } } .video-wrapper video{ width: 100%; position: absolute; top: 0; left: 0; } video::-webkit-media-controls-panel { background-image: linear-gradient(transparent, transparent) !important; background-color: transparent !important; box-shadow: none !important; } /* ================ Shogun ================ */ .shg-box-layer { z-index: 9; } /* ============================================================================ Press Banner ============================================================================== */ .press-wrapper { padding: 1rem 0; } .press-marquee-container { overflow: hidden; } .press-marquee-block { height: 60px; width: 100%; overflow: hidden; box-sizing: border-box; position: relative; } .press-marquee-inner { display: block; width: 200%; position: absolute; white-space: nowrap; } .press-marquee-inner.to-left { animation: toLeft 40s linear infinite; -webkit-animation: toLeft 40s linear infinite; -moz-animation: toLeft 40s linear infinite; } .press-item { width: 120px; height: auto; display: inline-block; margin: 0 50px; transition: all .2s ease-out; vertical-align: middle; } @media only screen and (max-width: 767px) { .press-marquee-inner.to-left { animation: toLeft 15s linear infinite; -webkit-animation: toLeft 15s linear infinite; -moz-animation: toLeft 15s linear infinite; } .press-marquee-block { height: 40px; } .press-marquee-inner .flickity-slider { width: 75% !important; left: 8px !important; } .press-item { width: 80px; margin: 0 30px; } .press-item .logo-bar__image { width: 100px; } } @keyframes toLeft { 0% { left: 0; } 100% { left: -100%; } } /* ============================================================================ Custom Content Alternate Section ============================================================================== */ .custom__block__text { height: 80%; display: flex; padding: var(--outer); background-color: var(--bg); } .rounded-border { border-radius: 1em; } .wrapper--custom { padding-top: 64px; padding-bottom: 64px; } @media only screen and (max-width: 767px) { .alt-custom-content .custom-content-title { order:2; margin-top:32px; margin-bottom:0; } .alt-custom-content .custom__block { order:3; } .alt-custom-content .custom__block:last-child { order:4; } .text_narrow_width { padding-left: 20px; padding-right: 20px; } .wrapper--custom { padding-left: 32px; padding-right: 32px; } .wrapper--custom .btn--long { min-width:100%; } .custom__block__text { align-items: center; } } @media only screen and (min-width: 768px) { .wrapper--custom { margin-bottom:64px; } .custom-content-title { position:absolute; z-index: 9; margin-left: auto; margin-right: auto; left: 0; right: 0; text-align: center; } .alt-custom-content .brick__block { margin-top:100px; } .custom__block__text { margin-left: 16px; align-items: flex-start; } } /* ============================================================================ Rebuy ============================================================================== */ .rebuy-cart__flyout { z-index: 2147483640 !important; } /* ============================================================================ Quantity Dropdown ============================================================================== */ .quantity-dropdown { display: flex; width: 20%; float: left; margin: 0 8px 0 0; height: 54px; } /* ============================================================================ Text below hero button ============================================================================== */ .cta_subtext { display: flex; align-items: center; color: var(--text-dark); font-family: var(---font-stack-accent); font-weight: var(---font-weight-accent-bold); font-style: var(---font-style-accent); text-transform: uppercase; letter-spacing: 1.3px; font-size: calc(13 / 16 * 1rem); margin-top: 10px; } @media screen and (max-width: 768px) { .cta_subtext { justify-content: center; } } /* ============================================================================ Mobile Menu Accordion Dropdown ============================================================================== */ .accordion-is-open .sliderule__chevron--right { transform:rotate(90deg); } .scroll-lock { overflow: hidden; /* Prevent scrolling */ position: fixed; /* Keep the body in place */ width: 100%; /* Ensure no shifting of content */ } /* ============================================================================ Gorgias chat ============================================================================== */ #gorgias-chat-container iframe#chat-window, #gorgias-chat-container iframe#chat-campaigns { z-index: 9 !important; } #gorgias-chat-container iframe#chat-button { z-index: 9 !important; } #chat-button { right: 0px !important; bottom: 4px !important; } #chat-window { right: 0px !important; bottom: 4px !important; } #chat-campaigns { right: 0px !important; bottom: 4px !important; } /* ============================================================================ Judge.me ============================================================================== */ @media only screen and (min-width: 768px) { :not(.jm-mfp-review-wrapper)>.jdgm-rev .jdgm-row-profile { float: left; width: 32%; } :not(.jm-mfp-review-wrapper)>.jdgm-rev .jdgm-rev__content, :not(.jm-mfp-review-wrapper)>.jdgm-rev .jdgm-rev__actions, :not(.jm-mfp-review-wrapper)>.jdgm-rev .jdgm-rev__reply { width: 68%; margin-left: 35% !important; } } .jdgm-rev-widg__title { font-size: 32px !important; } .jdgm-verified-checkmark { display: none !important; } .jdgm-rev__title, .jdgm-rev__replier-wrapper, .jdgm-rev-widg__summary-average, .jdgm-rev__cf-ans__title, .jdgm-rev__cf-ans__title { color: var(--text-dark) !important; } .jdgm-ans, .jdgm-rev__reply, .jdgm-rev__icon { background-color:#FCF7EF !important; } .jdgm-rev__timestamp, .jdgm-rev__location { color: var(--text) !important; } .jdgm-rev__title, .jdgm-rev-widg__summary-average { font-size: 18px; } .jdgm-rev__icon:before, .jdgm-rev__author { color: #9ebdc0 !important; } .jdgm-rev__buyer-badge.jdgm-rev__buyer-badge, .jdgm-rev__icon.jdgm-rev__icon:after { background-color: #9ebdc0 !important; } .jdgm-rev__cf-ans--type { font-size: 14px !important; }