/** Shopify CDN: Minification failed Line 304:36 Expected identifier but found whitespace Line 12473:3 Unexpected "," Line 12476:3 Unexpected "," **/ @charset "UTF-8"; /*! ============================================================================ Story Theme | (c) Groupthought Themes /* SECTION HERO LIQUID */ /* ROOT VARIABLES */ :root { /* Font Sizes */ --font-xs: 7px; --font-sm: 14px; --font-base: 16px; --font-md: 20px; --font-lg: 24px; --font-xmd: 32px; --font-xlg: 38px; --font-40: 40px; --font-xl: 48px; --font-xxl: 60px; --font-3xl: 66px; /* Colors */ --color-dark: #414143; --color-dark-blue: #112D49; --color-dark-2: #222222; --color-light: #f4f4f4; --color-green-100: #f2fcfb; --color-accent: #01c6b5; --color-green: #00c4b3; --color-light-green: #e6faf8; --color-bg-light: #f1f1f1; --color-bg-lighter: #f2f2f2; --color-lighter-gray: #F5F5F5; --color-gray: #00000014; --color-muted: #acacac; --color-dark-gray: #00000073; --color-dark-black: #3b3b3b; --color-accent-black: #4d4d4d; --color-light-black: #646466; --color-light-gray: #dfdfe0; --color-light-white: #FFFBF2; --color-grey-100: #868686; --color-gray-200: #575757; --color-gray-300: #e6e6e6; --color-gray-400: #00000033; --color-gray-500: #e8e8e8; --color-gray-600: #7a7a7b; --color-gray-700: #EBEBEB; --color-gray-800: #676769; --color-gray-900: #ececec; /* Font Weights */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; } /* FONT SIZE CLASSES */ .text-xs { font-size: var(--font-xs) !important; } .text-base { font-size: var(--font-base) !important; } /* COLOR CLASSES */ .text-dark { color: var(--color-dark); } .text-light { color: var(--color-light); } .text-accent { color: var(--color-accent); } .text-accent { color: var(--color-green); } .text-muted { color: var(--color-muted); } .text-lighter-gray { color: var(--color-lighter-gray); } .text-dark-gray { color: var(--color-dark-gray); } .text-gray { color: var(--color-gray); } .text-dark-black { color: var(--color-dark-black); } .text-accent-black { color: var(--color-accent-black); } .text-light-black { color: var(--color-light-black); } .text-light-gray { color: var(--color-light-gray); } .text-light-white { color: var(--color-light-white); } .bg-light { background-color: var(--color-light); } .bg-accent { background-color: var(--color-accent); } .bg-green { background-color: var(--color-green); } .bg-light { background-color: var(--color-bg-light); } .bg-lighter { background-color: var(--color-bg-lighter); } .bg-lighter-gray { background-color: var(--color-lighter-gray); } .bg-dark-gray { background-color: var(--color-dark-gray); } /* FONT WEIGHT CLASSES */ .font-regular { font-weight: var(--font-regular); } .font-medium { font-weight: var(--font-medium); } .font-semibold { font-weight: var(--font-semibold); } .font-bold { font-weight: var(--font-bold); } /* BACK TOP TOP CSS */ @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } #back-to-top { justify-content: center; align-items: center; position: fixed; width: 50px; height: 50px; bottom: 30px; right: 30px; background: var(--color-accent); color: white; font-size: 40px; z-index: 1000; cursor: pointer; text-decoration: none; transition: background 0.3s ease; border-radius: 50%; display: none; animation: bounce 1.5s infinite; } #back-to-top:hover { background: #019e92; } /* related */ .product__related { h1, h2, h3, h4, h5, h6, .h1--body, .h1--accent, .h2--body, .h2--accent, .h3--body, .h3--accent, .h4--body, .h4--accent, .h5--body, .h5--accent, .h6--body, .custom-form__label, .h6--accent, .pagination .page { font-size:var(--font-xl) !important; font-weight:var(--font-semibold) !important; color:black !important; line-height:100%; text-align:center !important; margin-bottom: 30px; text-transform:capitalize; } } @media (max-width:639.98px){ .product__related { h1, h2, h3, h4, h5, h6, .h1--body, .h1--accent, .h2--body, .h2--accent, .h3--body, .h3--accent, .h4--body, .h4--accent, .h5--body, .h5--accent, .h6--body, .custom-form__label, .h6--accent, .pagination .page { font-size:var(--font-xmd) !important; margin-bottom: 20px; } } } .h4--body{ padding: 20px 0px !important; } /* Policies Pages Css Start */ .shopify-policy__container{ max-width:unset !important; margin:0px !important; padding:0px !important; } .shopify-policy__title{ display:none !important; } .returns-policy-container { max-width: 752px !important; margin: 0 auto !important; padding: 100px 20px 120px !important; line-height: 1.6 !important; } .returns-policy-container h2 { font-size: var(--font-xl) !important; font-weight: var(--font-bold) !important; margin-top: 0px !important; margin-bottom: 70px !important; color: black !important; line-height: 120% !important; text-align: center !important; } .returns-policy-container img { width: 100% !important; object-fit: cover !important; margin-bottom: 30px !important; height: 100% !important; } .returns-policy-container h3 { font-size: var(--font-xmd) !important; font-weight: var(--font-semibold) !important; margin-top: 40px !important; margin-bottom: 16px !important; color: black !important; line-height: 120% !important; } .returns-policy-container p { font-size: var(--font-base) !important; margin-bottom: 10px !important; color: var(--color-dark) !important; margin-top: 16px !important; } .returns-policy-container ul { margin: 0px !important; padding-left: 16px !important; } .returns-policy-container ul li { list-style-type: disc !important; margin-bottom: 6px !important; font-size: var(--font-base) !important; color: var(--color-dark) !important; } .returns-policy-container a { color: var(--color-accent) !important; text-decoration: none !important; font-weight: var(--font-medium) !important; transition: all 0.3s ease-in-out !important; } .returns-policy-container a:hover { text-decoration: underline !important; } .returns-policy-container strong { font-weight: var(--font-semibold) !important; color: black !important; } .top_spacing { margin-top: 20px !important; } .para_top_spacing { margin-top: 10px !important; } .text_center { text-align: center !important; } .fw_semibold { font-weight: var(--font-semibold) !important; } @media (max-width: 1023.98px) { .returns-policy-container { padding: 60px 20px !important; } } @media (max-width: 639.98px) { .returns-policy-container h2 { font-size: var(--font-xmd) !important; margin-bottom: 20px !important; } .returns-policy-container h3 { margin-top: 20px !important; font-size: var(--font-md) !important; } .returns-policy-container img { margin-bottom: 20px !important; } } /* Policies Pages Css End */ .standard__cta{ background: #01C6B5 !important; color: #fff !important; } .image__hero__frame { height:805px !important; } .section--image{ width: 100%; margin-left: auto; margin-right: auto; } .subheading-class{ letter-spacing: 4px; font-size: 24px; text-transform: capitalize; color: #FFFFFF; margin-bottom: 16px; } .hero__description { font-size: 20px; } Modified versions of the theme code are not supported by Groupthought. ============================================================================== */ /*================ VENDOR ================*/ /*! Flickity v3.0.0 https://flickity.metafizzy.co ---------------------------------------------- */ .flickity-disabled-mobile:after { content: "flickity" !important; font-size: 0; line-height: 0; position: absolute; } @media only screen and (max-width: 767px) { .flickity-disabled-mobile { scroll-snap-type: x none; overflow: hidden; overflow-x: auto; display: flex; flex-flow: row nowrap !important; scroll-behavior: smooth; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; touch-action: auto; } .flickity-disabled-mobile:after { content: "" !important; } .flickity-disabled-mobile::-webkit-scrollbar { display: none; } .flickity-disabled-mobile > * { flex: 0 0 auto; scroll-snap-align: start; } } .flickity-enabled { position: relative; } .flickity-enabled:focus { outline: none; } .flickity-viewport { overflow: hidden; position: relative; height: 100%; } .flickity-slider { position: absolute; left: 0; padding-top:6px; width: 100%; height: 100%; touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; } .flickity-rtl .flickity-slider { left: unset; right: 0; } /* flickity-cell */ .flickity-cell { position: absolute !important; left: 0; } .flickity-rtl .flickity-cell { left: unset; right: 0; } /* fade */ .flickity-enabled.is-fade .flickity-slider > * { pointer-events: none; z-index: 0; } .flickity-enabled.is-fade .flickity-slider > *.is-selected { pointer-events: auto; z-index: 1; } /* draggable */ .flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-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: #333; } .flickity-button:hover { background: white; cursor: pointer; } .flickity-button:focus { outline: none; box-shadow: 0 0 0 5px #19F; } .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: #333; } /* ---- previous/next buttons ---- */ .flickity-prev-next-button { top: 50%; width: 44px; height: 44px; 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: 20%; top: 20%; width: 60%; height: 60%; } /* ---- page dots ---- */ .flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; } .flickity-rtl .flickity-page-dots { direction: rtl; } .flickity-page-dots .flickity-page-dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: #333; border-radius: 50%; opacity: 0.25; font-size: 0; line-height: 0; cursor: pointer; } .flickity-page-dots .flickity-page-dot.is-selected { opacity: 1; } .slider-arrow { display: block; position: relative; width: 40px; height: 40px; border-radius: 50%; background-color: var(--bg-accent); transition: opacity 0.3s; } .slider-arrow:hover { opacity: 0.7; } .slider-arrow[disabled] { opacity: 0.4; --text: var(--text-light); cursor: default; } .slider-arrow:after { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; } .slider-arrow.slider-arrow--prev:after { border-top: 1.5px solid; border-left: 1.5px solid; margin-left: 2px; transform: translate(-50%, -50%) rotate(-45deg); } .slider-arrow.slider-arrow--next:after { border-top: 1.5px solid; border-right: 1.5px solid; margin-right: 2px; transform: translate(-50%, -50%) rotate(45deg); } .slider-actions { display: flex; /* flex-flow: row wrap; */ justify-content: space-between; align-items: center; /* margin: 0 -10px 0.5em; */ max-width: 120px; } /* .slider-actions > button { margin: 0 10px; } */ @media only screen and (max-width: 767px) { .slider-actions { display: none; } } .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 model-viewer.shopify-model-viewer-ui__disabled { pointer-events: none; } .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:hover .shopify-model-viewer-ui__controls-area, .shopify-model-viewer-ui.shopify-model-viewer-ui--desktop.shopify-model-viewer-ui--child-focused .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(--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(--text); border-radius: 0; border: none; margin: 0px; cursor: pointer; } body:not(.focus-enabled) .shopify-model-viewer-ui .shopify-model-viewer-ui__button:not(.focus-visible) { outline: none; } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control { padding: 0px; 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:active, .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control.focus-visible:focus { 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: 0px; 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(--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:hover, .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:focus { 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 { from { opacity: 0; } to { opacity: 1; } } .plyr { -moz-osx-font-smoothing: auto; -webkit-font-smoothing: subpixel-antialiased; direction: ltr; font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; 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 video, .plyr audio { 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: transparent; } .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; } a.plyr__control::after, a.plyr__control::before { display: none; } .plyr__control:not(.plyr__control--pressed) .icon--pressed, .plyr__control.plyr__control--pressed .icon--not-pressed, .plyr__control:not(.plyr__control--pressed) .label--pressed, .plyr__control.plyr__control--pressed .label--not-pressed { display: none; } .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, .plyr--audio .plyr__control.plyr__tab-focus svg, .plyr--audio .plyr__control:hover svg, .plyr--audio .plyr__control[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:first-child, .plyr__controls .plyr__controls__item.plyr__time + .plyr__time { 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=captions], .plyr [data-plyr=pip], .plyr [data-plyr=airplay], .plyr [data-plyr=fullscreen] { display: none; } .plyr--captions-enabled [data-plyr=captions], .plyr--pip-supported [data-plyr=pip], .plyr--airplay-supported [data-plyr=airplay], .plyr--fullscreen-enabled [data-plyr=fullscreen] { 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; -moz-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: currentColor; right: 5px; } .plyr__menu__container .plyr__control--forward.plyr__tab-focus::after, .plyr__menu__container .plyr__control--forward:hover::after { border-left-color: currentColor; } .plyr__menu__container .plyr__control--back { font-weight: 500; margin: 7px; margin-bottom: 3px; padding-left: 29px; position: relative; width: calc(100% - 14px); } .plyr__menu__container .plyr__control--back::after { border-right-color: currentColor; 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: currentColor; } .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]::before, .plyr__menu__container .plyr__control[role=menuitemradio]::after { 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; /* stylelint-disable-line */ 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: transparent; 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(to right, 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; /* stylelint-disable-line */ } @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: transparent; border: 0; border-radius: 1px; height: 2px; -moz-transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease; -moz-user-select: none; 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 { background-color: transparent; border: 0; border-radius: 1px; height: 2px; -ms-transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease; user-select: none; color: transparent; } .plyr--full-ui input[type=range]::-ms-fill-upper { background-color: transparent; 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; 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: transparent; 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; margin-top: -5px; 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 0.1s ease, opacity 0.2s 0.1s ease; 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:hover .plyr__tooltip, .plyr .plyr__control.plyr__tab-focus .plyr__tooltip, .plyr__tooltip--visible { opacity: 1; transform: translate(-50%, -24px); } .plyr__controls > .plyr__control[data-plyr=mute]:hover .plyr__tooltip, .plyr__controls > .plyr__control[data-plyr=mute].plyr__tab-focus .plyr__tooltip, .plyr__controls > .plyr__control[data-plyr=mute] .plyr__tooltip--visible { transform: translate(-50%, -11px); } .plyr .plyr__control:hover .plyr__tooltip { z-index: 3; } .plyr__controls > .plyr__control:first-child .plyr__tooltip, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip { left: 0; transform: translate(0, 10px) scale(0.8); transform-origin: 0 100%; } .plyr__controls > .plyr__control:first-child .plyr__tooltip::before, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip::before { left: 29px; } .plyr__controls > .plyr__control:last-child .plyr__tooltip { left: auto; right: 0; transform: translate(0, 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: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 + .plyr__control:hover .plyr__tooltip, .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:last-child:hover .plyr__tooltip, .plyr__controls > .plyr__control:last-child.plyr__tab-focus .plyr__tooltip, .plyr__controls > .plyr__control:last-child .plyr__tooltip--visible { transform: translate(0, -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; -moz-user-select: none; user-select: none; width: 100%; } .plyr__progress { left: 6.5px; margin-right: 15px; position: relative; } .plyr__progress input[type=range], .plyr__progress__buffer { 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; /* stylelint-disable-line */ background-color: transparent; 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: transparent; } .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 25%, transparent 50%, rgba(58, 58, 58, 0.6) 50%, rgba(58, 58, 58, 0.6) 75%, transparent 75%, 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 currentColor; 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(to right, currentColor var(--value, 0), rgba(255, 255, 255, 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: rgba(255, 255, 255, 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: rgba(255, 255, 255, 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 rgba(255, 255, 255, 0.25); } .plyr--full-ui .plyr__volume input[type=range].plyr__tab-focus::-moz-range-track { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25); } .plyr--full-ui .plyr__volume input[type=range].plyr__tab-focus::-ms-track { box-shadow: 0 0 0 4px rgba(255, 255, 255, 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 rgba(255, 255, 255, 0.25); } .plyr--full-ui .plyr__volume input[type=range]:active::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); } .plyr--full-ui .plyr__volume input[type=range]:active::-ms-thumb { box-shadow: 0 0 0 3px rgba(255, 255, 255, 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:-webkit-full-screen { border-radius: 0 !important; height: 100%; margin: 0; width: 100%; } .plyr:fullscreen { border-radius: 0 !important; height: 100%; margin: 0; width: 100%; } .plyr:-webkit-full-screen video { height: 100%; } .plyr:fullscreen video { height: 100%; } .plyr:-webkit-full-screen .plyr__video-wrapper { height: 100%; position: static; } .plyr:fullscreen .plyr__video-wrapper { height: 100%; position: static; } .plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen { display: block; } .plyr:fullscreen .plyr__control .icon--exit-fullscreen { display: block; } .plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen + svg { display: none; } .plyr:fullscreen .plyr__control .icon--exit-fullscreen + svg { display: none; } .plyr:-webkit-full-screen.plyr--hide-controls { cursor: 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; } } /* stylelint-disable-next-line */ .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; } } /* stylelint-disable-next-line */ .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; } } /* stylelint-disable-next-line */ .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: 10000000; } .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: translate(0, 10px); transform-origin: 50% 100%; transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease; z-index: 2; } .plyr__preview-thumb--is-shown { opacity: 1; transform: translate(0, -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; -o-object-fit: contain; 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 */ 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 500ms 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 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--bg); opacity: 0; transform: translateZ(0); backface-visibility: hidden; will-change: opacity; } .pswp__scroll-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; 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; -moz-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 250ms 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 { backface-visibility: hidden; z-index: 0; } .pswp__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 0; overflow: hidden; } .pswp__img { position: absolute; width: auto; height: auto; top: 0; left: 0; } .pswp__img--placeholder { 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 svg.icon, .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { width: 2rem; height: 2rem; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-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--close svg, .pswp__button--arrow--left svg, .pswp__button--arrow--right svg { z-index: -1; position: relative; } .pswp__button--arrow--right { justify-self: end; } .pswp__counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; align-self: center; justify-self: center; } .pswp__button--share, .pswp__button--fs, .pswp__button--zoom, .pswp__share-modal, .pswp__share-modal--hidden, .pswp__share-tooltip, .pswp__caption, .pswp__caption--fake, .pswp__caption--empty { 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; } /* Shopify Product Reviews */ .story-apps .spr-container { padding: 0; margin: 0; border: none; } .story-apps .spr-summary-actions-newreview { display: inline-block; padding: var(--btn-top) var(--btn-left); font-weight: var(--FONT-WEIGHT-BODY-MID); margin: 5px 0; line-height: 1; text-decoration: none; text-align: center; border-radius: var(--RADIUS-SM); font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); background-color: rgba(255, 255, 255, 0); color: var(--text); border: 1px solid var(--text); transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .story-apps .spr-summary-actions-newreview:hover, .story-apps .spr-summary-actions-newreview:active, .story-apps .spr-summary-actions-newreview:focus { background-color: var(--hairline); } @media only screen and (max-width: 479px) { .story-apps .spr-summary { display: flex; flex-direction: column; } } lite-youtube { background-color: #000; position: relative; display: block; contain: content; background-position: center center; background-size: cover; cursor: pointer; max-width: 720px; } /* gradient */ lite-youtube::before { content: ""; display: block; position: absolute; top: 0; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==); background-position: top; background-repeat: repeat-x; height: 60px; padding-bottom: 50px; width: 100%; transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); } /* responsive iframe with a 16:9 aspect ratio thanks https://css-tricks.com/responsive-iframes/ */ lite-youtube::after { content: ""; display: block; padding-bottom: 56.25%; } lite-youtube > iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0; } /* play button */ lite-youtube > .lty-playbtn { display: block; width: 68px; height: 48px; position: absolute; cursor: pointer; transform: translate3d(-50%, -50%, 0); top: 50%; left: 50%; z-index: 1; background-color: transparent; /* YT's actual play button svg */ background-image: url('data:image/svg+xml;utf8,'); filter: grayscale(100%); transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1); border: none; } lite-youtube:hover > .lty-playbtn, lite-youtube .lty-playbtn:focus { filter: none; } /* Post-click styles */ lite-youtube.lyt-activated { cursor: unset; } lite-youtube.lyt-activated::before, lite-youtube.lyt-activated > .lty-playbtn { opacity: 0; pointer-events: none; } .lyt-visually-hidden { clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } /*================ COMMON ================*/ /* stylelint-disable */ /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * 1. Remove the bottom border in Chrome 57- and Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { color: var(--text); background: none; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type=button], [type=reset], [type=submit] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } button { border: none; background: none; font-family: inherit; font-size: 100%; margin: 0; text-transform: none; line-height: 1; color: inherit; } button:focus { outline: none; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type=checkbox], [type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } /* stylelint-disable */ /*================ Shopify specific reset ================*/ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body, input, textarea, button, select { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -webkit-appearance: none; border-radius: 0; } img { max-width: 100%; } /*================ Form element helpers ================*/ form { margin: 0; } @media only screen and (max-width: 767px) { input, textarea, select { font-size: 16px; } } button, input[type=submit], label[for] { cursor: pointer; } option { color: var(--text); background-color: var(--bg); } [tabindex="-1"]:focus { outline: none; } legend { display: block; float: initial; margin: 0; padding: 0; width: 100%; } legend + * { clear: both; } fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } /*============================================================================ Fast Tap enables no-delay taps (FastClick-esque) on supporting browsers ==============================================================================*/ a, button, [role=button], input, label, select, textarea { touch-action: manipulation; } 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; } /*============================================================================ Helper Classes ==============================================================================*/ .clearfix:after { content: ""; display: table; clear: both; } .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-placeholder .label-hidden { position: inherit !important; overflow: auto; clip: auto; width: auto; height: auto; margin: 0; } .visually-shown { position: inherit !important; overflow: auto; clip: auto; width: auto; height: auto; margin: 0; } .no-js:not(html) { display: none; } .no-js .no-js:not(html) { display: block; } .no-js .js { display: none; } .supports-no-cookies:not(html) { display: none; } html.supports-no-cookies .supports-no-cookies:not(html) { display: block; } html.supports-no-cookies .supports-cookies { display: none; } .is-hidden { visibility: hidden; max-height: 0; overflow: hidden; opacity: 0; transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); } /*======================= Image shapes ==========================*/ .image-shape-circle { --image-shape: 300px; } .image-shape-keyhole { --image-shape: 100% 100% 0 0; } .image-shape-blob-one { --image-shape: 30% 70% 70% 30% / 53% 30% 70% 47%; } .image-shape-blob-two { --image-shape: 53% 47% 34% 66% / 63% 46% 54% 37%; } .image-shape-blob-three { --image-shape: 37% 63% 56% 44% / 49% 56% 44% 51%; } .image-shape-blob-four { --image-shape: 63% 37% 37% 63% / 43% 37% 63% 57%; } /*================ Responsive Show/Hide Helper ================*/ /*================ Responsive Text Alignment Helper ================*/ ul.unstyled, .list-unstyled { list-style: none; display: inherit; list-style-type: none; margin: 0; padding: 0; } .color-body-text { color: var(--text); } .color-body-text-dark { color: var(--text-dark); } .color-body-text-bright { color: var(--text-light); } .color-border { color: var(--border); } .color-border-light { color: var(--border-light); } .color-border-hairline { color: var(--bg-accent); } .color-accent-cool { color: var(--secondary); } .color-accent-warm { color: var(--primary); } .float-right { float: right; display: inline-block; } .float-left { float: left; display: inline-block; } .flex-column { flex-direction: column; } .flex-column-reverse { flex-direction: column-reverse; } .flex-row { flex-direction: row; } .flex-row-reverse { flex-direction: row-reverse; } @media only screen and (max-width: 767px) { .hidden-small { display: none; } } @media only screen and (max-width: 989px) { .hidden-medium-down { display: none; } } @media only screen and (min-width: 990px) { .hidden-large-up { display: none; } } @media only screen and (min-width: 768px) { .hidden-medium-up { display: none; } } .small, small { font-size: calc(14px * var(--FONT-ADJUST-BODY)); } .xs { font-size: calc(11px * var(--FONT-ADJUST-BODY)); } .inline-block { display: inline-block; } .display-block { display: block; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .capitalize { text-transform: capitalize; } /* ============================================================================ 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: var(--gutter); } .mr1 { margin-right: var(--gutter); } .mb1 { margin-bottom: var(--gutter); } .ml1 { margin-left: var(--gutter); } .mt2 { margin-top: calc(var(--gutter) * 2); } .mr2 { margin-right: calc(var(--gutter) * 2); } .mb2 { margin-bottom: calc(var(--gutter) * 2); } .ml2 { margin-left: calc(var(--gutter) * 2); } .mt3 { margin-top: calc(var(--gutter) * 3); } .mr3 { margin-right: calc(var(--gutter) * 3); } .mb3 { margin-bottom: calc(var(--gutter) * 3); } .ml3 { margin-left: calc(var(--gutter) * 3); } .mt4 { margin-top: calc(var(--gutter) * 4); } .mr4 { margin-right: calc(var(--gutter) * 4); } .mb4 { margin-bottom: calc(var(--gutter) * 4); } .ml4 { margin-left: calc(var(--gutter) * 4); } .pt1 { padding-top: var(--gutter); } .pr1 { padding-right: var(--gutter); } .pb1 { padding-bottom: var(--gutter); } .pl1 { padding-left: var(--gutter); } .pt2 { padding-top: calc(var(--gutter) * 2); } .pr2 { padding-right: calc(var(--gutter) * 2); } .pb2 { padding-bottom: calc(var(--gutter) * 2); } .pl2 { padding-left: calc(var(--gutter) * 2); } .pt3 { padding-top: calc(var(--gutter) * 3); } .pr3 { padding-right: calc(var(--gutter) * 3); } .pb3 { padding-bottom: calc(var(--gutter) * 3); } .pl3 { padding-left: calc(var(--gutter) * 3); } .pt4 { padding-top: calc(var(--gutter) * 4); } .pr4 { padding-right: calc(var(--gutter) * 4); } .pb4 { padding-bottom: calc(var(--gutter) * 4); } .pl4 { padding-left: calc(var(--gutter) * 4); } /*============================================================================ A11Y 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(--text); background-color: var(--bg); padding: calc(var(--gutter) / 2); z-index: 10000; transition: none; } body.focus-enabled *:focus, body.focus-enabled *:focus .product__media { outline: var(--primary) auto 5px; outline-offset: -2px; } [data-scroll-locked] { padding-right: var(--scrollbar-width); } [data-scroll-locked]:not(.container-layout) .js__header__stuck, [data-scroll-locked]:not(.container-layout) .theme__header, [data-scroll-locked]:not(.container-layout) .collection__nav, [data-scroll-locked]:not(.container-layout) .announcement__wrapper, [data-scroll-locked]:not(.container-layout) .announcement__bar-outer, [data-scroll-locked]:not(.container-layout) .search--popdown .search-popdown { width: 100vw; } [data-scroll-locked]:not(.container-layout) .js__header__stuck, [data-scroll-locked]:not(.container-layout) .theme__header, [data-scroll-locked]:not(.container-layout) .collection__nav, [data-scroll-locked]:not(.container-layout) .announcement__bar, [data-scroll-locked]:not(.container-layout) .search--popdown .search-popdown { padding-right:0px; } /* ============================================================================ Grid - Based on CSS Wizardry grid ============================================================================== */ .grid, .grid--full { list-style: none; margin: 0; padding: 0; margin-left: calc(var(--gutter) * -1); } .grid:after, .grid--full:after { content: ""; display: table; clear: both; } @media only screen and (min-width: 768px) { .grid, .grid--full { /* padding-right: var(--gutter); */ margin-right: calc(var(--gutter) * -1); overflow: hidden; } .grid .flickity-viewport, .grid--full .flickity-viewport { overflow: visible; } } .grid__item { /* float: left; */ padding-left: var(--gutter); width: 100%; } /* .grid__item[class*=push-] { position: relative; } */ .js .grid[data-slideshow]:not(.flickity-enabled), .js [data-slideshow].grid--full:not(.flickity-enabled) { display: flex; overflow-x: auto; } .js .grid[data-slideshow]:not(.flickity-enabled) .grid__item, .js [data-slideshow].grid--full:not(.flickity-enabled) .grid__item { flex: 0 0 auto; } /* ============================================================================ 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; } @media only screen and (max-width: 767px) { .grid.flickity-disabled-mobile, .flickity-disabled-mobile.grid--full, .frame .has-padding .gallery { margin-right: calc(var(--outer) * -1); margin-left: calc(var(--outer) * -1); } .grid.flickity-disabled-mobile .grid__item:first-child, .flickity-disabled-mobile.grid--full .grid__item:first-child, .grid.flickity-disabled-mobile .gallery__item:first-child, .flickity-disabled-mobile.grid--full .gallery__item:first-child, .frame .has-padding .gallery .grid__item:first-child, .frame .has-padding .gallery .gallery__item:first-child { margin-left: max(var(--outer) - var(--gutter), 0px); } .grid.flickity-disabled-mobile:after, .flickity-disabled-mobile.grid--full:after, .frame .has-padding .gallery:after { padding: 0 calc(var(--outer) / 2); position: relative; clear: initial; display: block; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .grid.flickity-disabled-mobile .small--one-half, .flickity-disabled-mobile.grid--full .small--one-half, .frame .has-padding .gallery .small--one-half { width: 46%; } } @media only screen and (max-width: 767px) { .frame .has-padding .wrapper--none .gallery { margin-right: 0; } } .grid--inner-offsets .grid__item { margin-bottom: 0; } @media only screen and (max-width: 767px) { .grid--inner-offsets .grid__item { margin-bottom: var(--vertical); } } .grid.grid--custom .grid__item, .grid--custom.grid--full .grid__item { width: var(--grid-large); } @media only screen and (min-width: 768px) and (max-width: 989px) { .grid.grid--custom .grid__item, .grid--custom.grid--full .grid__item { width: var(--grid-medium); } } @media only screen and (min-width: 480px) and (max-width: 767px) { .grid.grid--custom .grid__item, .grid--custom.grid--full .grid__item { width: var(--grid-medium); } } @media only screen and (max-width: 479px) { .grid.grid--custom .grid__item, .grid--custom.grid--full .grid__item { width: var(--grid-mobile); } } @media only screen and (min-width: 990px) { .grid--custom .uniform-large-2:nth-child(2n+1), .grid--custom .uniform-large-3:nth-child(3n+1), .grid--custom .uniform-large-4:nth-child(4n+1), .grid--custom .uniform-large-5:nth-child(5n+1), .grid--custom .uniform-large-6:nth-child(6n+1), .grid--custom .uniform-large-7:nth-child(7n+1), .grid--custom .uniform-large-8:nth-child(8n+1) { clear: both; } } /* ============================================================================ 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: 8.3333333333%; } .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) { /** Whole */ .mobile--one-whole { width: 100%; } /* Halves */ .mobile--one-half { width: 50%; } /* Thirds */ .mobile--one-third { width: 33.3333333333%; } .mobile--two-thirds { width: 66.6666666667%; } /* Quarters */ .mobile--one-quarter { width: 25%; } .mobile--two-quarters { width: 50%; } .mobile--three-quarters { width: 75%; } /* Fifths */ .mobile--one-fifth { width: 20%; } .mobile--two-fifths { width: 40%; } .mobile--three-fifths { width: 60%; } .mobile--four-fifths { width: 80%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .mobile--one-twelfth { width: 8.3333333333%; } .mobile--two-twelfths { width: 8.3333333333%; } .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%; } .grid--uniform .mobile--one-half:nth-child(2n+1), .grid--uniform .mobile--one-third:nth-child(3n+1), .grid--uniform .mobile--one-quarter:nth-child(4n+1), .grid--uniform .mobile--one-fifth:nth-child(5n+1), .grid--uniform .mobile--one-sixth:nth-child(6n+1), .grid--uniform .mobile--two-sixths:nth-child(3n+1), .grid--uniform .mobile--three-sixths:nth-child(2n+1), .grid--uniform .mobile--one-eighth:nth-child(8n+1), .grid--uniform .mobile--two-eighths:nth-child(4n+1), .grid--uniform .mobile--four-eighths:nth-child(2n+1), .grid--uniform .mobile--five-tenths:nth-child(2n+1), .grid--uniform .mobile--one-twelfth:nth-child(12n+1), .grid--uniform .mobile--two-twelfths:nth-child(6n+1), .grid--uniform .mobile--three-twelfths:nth-child(4n+1), .grid--uniform .mobile--four-twelfths:nth-child(3n+1), .grid--uniform .mobile--six-twelfths:nth-child(2n+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) { /** Whole */ .small--one-whole { width: 100%; } /* Halves */ .small--one-half { width: 50%; } /* Thirds */ .small--one-third { width: 33.3333333333%; } .small--two-thirds { width: 66.6666666667%; } /* Quarters */ .small--one-quarter { width: 25%; } .small--two-quarters { width: 50%; } .small--three-quarters { width: 75%; } /* Fifths */ .small--one-fifth { width: 20%; } .small--two-fifths { width: 40%; } .small--three-fifths { width: 60%; } .small--four-fifths { width: 80%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .small--one-twelfth { width: 8.3333333333%; } .small--two-twelfths { width: 8.3333333333%; } .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%; } .grid--uniform .small--one-half:nth-child(2n+1), .grid--uniform .small--one-third:nth-child(3n+1), .grid--uniform .small--one-quarter:nth-child(4n+1), .grid--uniform .small--one-fifth:nth-child(5n+1), .grid--uniform .small--one-sixth:nth-child(6n+1), .grid--uniform .small--two-sixths:nth-child(3n+1), .grid--uniform .small--three-sixths:nth-child(2n+1), .grid--uniform .small--one-eighth:nth-child(8n+1), .grid--uniform .small--two-eighths:nth-child(4n+1), .grid--uniform .small--four-eighths:nth-child(2n+1), .grid--uniform .small--five-tenths:nth-child(2n+1), .grid--uniform .small--one-twelfth:nth-child(12n+1), .grid--uniform .small--two-twelfths:nth-child(6n+1), .grid--uniform .small--three-twelfths:nth-child(4n+1), .grid--uniform .small--four-twelfths:nth-child(3n+1), .grid--uniform .small--six-twelfths:nth-child(2n+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) { /** Whole */ .small-up--one-whole { width: 100%; } /* Halves */ .small-up--one-half { width: 50%; } /* Thirds */ .small-up--one-third { width: 33.3333333333%; } .small-up--two-thirds { width: 66.6666666667%; } /* Quarters */ .small-up--one-quarter { width: 25%; } .small-up--two-quarters { width: 50%; } .small-up--three-quarters { width: 75%; } /* Fifths */ .small-up--one-fifth { width: 20%; } .small-up--two-fifths { width: 40%; } .small-up--three-fifths { width: 60%; } .small-up--four-fifths { width: 80%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .small-up--one-twelfth { width: 8.3333333333%; } .small-up--two-twelfths { width: 8.3333333333%; } .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%; } .grid--uniform .small-up--one-half:nth-child(2n+1), .grid--uniform .small-up--one-third:nth-child(3n+1), .grid--uniform .small-up--one-quarter:nth-child(4n+1), .grid--uniform .small-up--one-fifth:nth-child(5n+1), .grid--uniform .small-up--one-sixth:nth-child(6n+1), .grid--uniform .small-up--two-sixths:nth-child(3n+1), .grid--uniform .small-up--three-sixths:nth-child(2n+1), .grid--uniform .small-up--one-eighth:nth-child(8n+1), .grid--uniform .small-up--two-eighths:nth-child(4n+1), .grid--uniform .small-up--four-eighths:nth-child(2n+1), .grid--uniform .small-up--five-tenths:nth-child(2n+1), .grid--uniform .small-up--one-twelfth:nth-child(12n+1), .grid--uniform .small-up--two-twelfths:nth-child(6n+1), .grid--uniform .small-up--three-twelfths:nth-child(4n+1), .grid--uniform .small-up--four-twelfths:nth-child(3n+1), .grid--uniform .small-up--six-twelfths:nth-child(2n+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) { /** Whole */ .small-down--one-whole { width: 100%; } /* Halves */ .small-down--one-half { width: 50%; } /* Thirds */ .small-down--one-third { width: 33.3333333333%; } .small-down--two-thirds { width: 66.6666666667%; } /* Quarters */ .small-down--one-quarter { width: 25%; } .small-down--two-quarters { width: 50%; } .small-down--three-quarters { width: 75%; } /* Fifths */ .small-down--one-fifth { width: 20%; } .small-down--two-fifths { width: 40%; } .small-down--three-fifths { width: 60%; } .small-down--four-fifths { width: 80%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .small-down--one-twelfth { width: 8.3333333333%; } .small-down--two-twelfths { width: 8.3333333333%; } .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%; } .grid--uniform .small-down--one-half:nth-child(2n+1), .grid--uniform .small-down--one-third:nth-child(3n+1), .grid--uniform .small-down--one-quarter:nth-child(4n+1), .grid--uniform .small-down--one-fifth:nth-child(5n+1), .grid--uniform .small-down--one-sixth:nth-child(6n+1), .grid--uniform .small-down--two-sixths:nth-child(3n+1), .grid--uniform .small-down--three-sixths:nth-child(2n+1), .grid--uniform .small-down--one-eighth:nth-child(8n+1), .grid--uniform .small-down--two-eighths:nth-child(4n+1), .grid--uniform .small-down--four-eighths:nth-child(2n+1), .grid--uniform .small-down--five-tenths:nth-child(2n+1), .grid--uniform .small-down--one-twelfth:nth-child(12n+1), .grid--uniform .small-down--two-twelfths:nth-child(6n+1), .grid--uniform .small-down--three-twelfths:nth-child(4n+1), .grid--uniform .small-down--four-twelfths:nth-child(3n+1), .grid--uniform .small-down--six-twelfths:nth-child(2n+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) { /** Whole */ .small-medium--one-whole { width: 100%; } /* Halves */ .small-medium--one-half { width: 50%; } /* Thirds */ .small-medium--one-third { width: 33.3333333333%; } .small-medium--two-thirds { width: 66.6666666667%; } /* Quarters */ .small-medium--one-quarter { width: 25%; } .small-medium--two-quarters { width: 50%; } .small-medium--three-quarters { width: 75%; } /* Fifths */ .small-medium--one-fifth { width: 20%; } .small-medium--two-fifths { width: 40%; } .small-medium--three-fifths { width: 60%; } .small-medium--four-fifths { width: 80%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .small-medium--one-twelfth { width: 8.3333333333%; } .small-medium--two-twelfths { width: 8.3333333333%; } .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%; } .grid--uniform .small-medium--one-half:nth-child(2n+1), .grid--uniform .small-medium--one-third:nth-child(3n+1), .grid--uniform .small-medium--one-quarter:nth-child(4n+1), .grid--uniform .small-medium--one-fifth:nth-child(5n+1), .grid--uniform .small-medium--one-sixth:nth-child(6n+1), .grid--uniform .small-medium--two-sixths:nth-child(3n+1), .grid--uniform .small-medium--three-sixths:nth-child(2n+1), .grid--uniform .small-medium--one-eighth:nth-child(8n+1), .grid--uniform .small-medium--two-eighths:nth-child(4n+1), .grid--uniform .small-medium--four-eighths:nth-child(2n+1), .grid--uniform .small-medium--five-tenths:nth-child(2n+1), .grid--uniform .small-medium--one-twelfth:nth-child(12n+1), .grid--uniform .small-medium--two-twelfths:nth-child(6n+1), .grid--uniform .small-medium--three-twelfths:nth-child(4n+1), .grid--uniform .small-medium--four-twelfths:nth-child(3n+1), .grid--uniform .small-medium--six-twelfths:nth-child(2n+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) { /** Whole */ .medium--one-whole { width: 100%; } /* Halves */ .medium--one-half { width: 50%; } /* Thirds */ .medium--one-third { width: 33.3333333333%; } .medium--two-thirds { width: 66.6666666667%; } /* Quarters */ .medium--one-quarter { width: 25%; } .medium--two-quarters { width: 50%; } .medium--three-quarters { width: 75%; } /* Fifths */ .medium--one-fifth { width: 20%; } .medium--two-fifths { width: 40%; } .medium--three-fifths { width: 60%; } .medium--four-fifths { width: 80%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .medium--one-twelfth { width: 8.3333333333%; } .medium--two-twelfths { width: 8.3333333333%; } .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%; } .grid--uniform .medium--one-half:nth-child(2n+1), .grid--uniform .medium--one-third:nth-child(3n+1), .grid--uniform .medium--one-quarter:nth-child(4n+1), .grid--uniform .medium--one-fifth:nth-child(5n+1), .grid--uniform .medium--one-sixth:nth-child(6n+1), .grid--uniform .medium--two-sixths:nth-child(3n+1), .grid--uniform .medium--three-sixths:nth-child(2n+1), .grid--uniform .medium--one-eighth:nth-child(8n+1), .grid--uniform .medium--two-eighths:nth-child(4n+1), .grid--uniform .medium--four-eighths:nth-child(2n+1), .grid--uniform .medium--five-tenths:nth-child(2n+1), .grid--uniform .medium--one-twelfth:nth-child(12n+1), .grid--uniform .medium--two-twelfths:nth-child(6n+1), .grid--uniform .medium--three-twelfths:nth-child(4n+1), .grid--uniform .medium--four-twelfths:nth-child(3n+1), .grid--uniform .medium--six-twelfths:nth-child(2n+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) { /** Whole */ .medium-up--one-whole { width: 100%; } /* Halves */ .medium-up--one-half { width: 50%; } /* Thirds */ .medium-up--one-third { width: 33.3333333333%; } /* .medium-up--two-thirds { width: 66.6666666667%; } */ /* Quarters */ .medium-up--one-quarter { width: 25%; } .medium-up--two-quarters { width: 50%; } .medium-up--three-quarters { width: 75%; } /* Fifths */ .medium-up--one-fifth { width: 20%; } .medium-up--two-fifths { width: 40%; } .medium-up--three-fifths { width: 60%; } .medium-up--four-fifths { width: 80%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .medium-up--one-twelfth { width: 8.3333333333%; } .medium-up--two-twelfths { width: 8.3333333333%; } .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%; } .grid--uniform .medium-up--one-half:nth-child(2n+1), .grid--uniform .medium-up--one-third:nth-child(3n+1), .grid--uniform .medium-up--one-quarter:nth-child(4n+1), .grid--uniform .medium-up--one-fifth:nth-child(5n+1), .grid--uniform .medium-up--one-sixth:nth-child(6n+1), .grid--uniform .medium-up--two-sixths:nth-child(3n+1), .grid--uniform .medium-up--three-sixths:nth-child(2n+1), .grid--uniform .medium-up--one-eighth:nth-child(8n+1), .grid--uniform .medium-up--two-eighths:nth-child(4n+1), .grid--uniform .medium-up--four-eighths:nth-child(2n+1), .grid--uniform .medium-up--five-tenths:nth-child(2n+1), .grid--uniform .medium-up--one-twelfth:nth-child(12n+1), .grid--uniform .medium-up--two-twelfths:nth-child(6n+1), .grid--uniform .medium-up--three-twelfths:nth-child(4n+1), .grid--uniform .medium-up--four-twelfths:nth-child(3n+1), .grid--uniform .medium-up--six-twelfths:nth-child(2n+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) { /** Whole */ .medium-down--one-whole { width: 100%; } /* Halves */ .medium-down--one-half { width: 50%; } /* Thirds */ .medium-down--one-third { width: 33.3333333333%; } .medium-down--two-thirds { width: 66.6666666667%; } /* Quarters */ .medium-down--one-quarter { width: 25%; } .medium-down--two-quarters { width: 50%; } .medium-down--three-quarters { width: 75%; } /* Fifths */ .medium-down--one-fifth { width: 20%; } .medium-down--two-fifths { width: 40%; } .medium-down--three-fifths { width: 60%; } .medium-down--four-fifths { width: 80%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .medium-down--one-twelfth { width: 8.3333333333%; } .medium-down--two-twelfths { width: 8.3333333333%; } .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%; } .grid--uniform .medium-down--one-half:nth-child(2n+1), .grid--uniform .medium-down--one-third:nth-child(3n+1), .grid--uniform .medium-down--one-quarter:nth-child(4n+1), .grid--uniform .medium-down--one-fifth:nth-child(5n+1), .grid--uniform .medium-down--one-sixth:nth-child(6n+1), .grid--uniform .medium-down--two-sixths:nth-child(3n+1), .grid--uniform .medium-down--three-sixths:nth-child(2n+1), .grid--uniform .medium-down--one-eighth:nth-child(8n+1), .grid--uniform .medium-down--two-eighths:nth-child(4n+1), .grid--uniform .medium-down--four-eighths:nth-child(2n+1), .grid--uniform .medium-down--five-tenths:nth-child(2n+1), .grid--uniform .medium-down--one-twelfth:nth-child(12n+1), .grid--uniform .medium-down--two-twelfths:nth-child(6n+1), .grid--uniform .medium-down--three-twelfths:nth-child(4n+1), .grid--uniform .medium-down--four-twelfths:nth-child(3n+1), .grid--uniform .medium-down--six-twelfths:nth-child(2n+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) { /** Whole */ .medium-large--one-whole { width: 100%; } /* Halves */ .medium-large--one-half { width: 50%; } /* Thirds */ .medium-large--one-third { width: 33.3333333333%; } .medium-large--two-thirds { width: 66.6666666667%; } /* Quarters */ .medium-large--one-quarter { width: 25%; } .medium-large--two-quarters { width: 50%; } .medium-large--three-quarters { width: 75%; } /* Fifths */ .medium-large--one-fifth { width: 20%; } .medium-large--two-fifths { width: 40%; } .medium-large--three-fifths { width: 60%; } .medium-large--four-fifths { width: 80%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .medium-large--one-twelfth { width: 8.3333333333%; } .medium-large--two-twelfths { width: 8.3333333333%; } .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%; } .grid--uniform .medium-large--one-half:nth-child(2n+1), .grid--uniform .medium-large--one-third:nth-child(3n+1), .grid--uniform .medium-large--one-quarter:nth-child(4n+1), .grid--uniform .medium-large--one-fifth:nth-child(5n+1), .grid--uniform .medium-large--one-sixth:nth-child(6n+1), .grid--uniform .medium-large--two-sixths:nth-child(3n+1), .grid--uniform .medium-large--three-sixths:nth-child(2n+1), .grid--uniform .medium-large--one-eighth:nth-child(8n+1), .grid--uniform .medium-large--two-eighths:nth-child(4n+1), .grid--uniform .medium-large--four-eighths:nth-child(2n+1), .grid--uniform .medium-large--five-tenths:nth-child(2n+1), .grid--uniform .medium-large--one-twelfth:nth-child(12n+1), .grid--uniform .medium-large--two-twelfths:nth-child(6n+1), .grid--uniform .medium-large--three-twelfths:nth-child(4n+1), .grid--uniform .medium-large--four-twelfths:nth-child(3n+1), .grid--uniform .medium-large--six-twelfths:nth-child(2n+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) { /** Whole */ .large--one-whole { width: 100%; } /* Halves */ .large--one-half { width: 50%; } /* Thirds */ .large--one-third { width: 33.3333333333%; } .large--two-thirds { width: 66.6666666667%; } /* Quarters */ .large--one-quarter { width: 25%; } .large--two-quarters { width: 50%; } .large--three-quarters { width: 75%; } /* Fifths */ .large--one-fifth { width: 20%; } .large--two-fifths { width: 40%; } .large--three-fifths { width: 60%; } .large--four-fifths { width: 80%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .large--one-twelfth { width: 8.3333333333%; } .large--two-twelfths { width: 8.3333333333%; } .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%; } .grid--uniform .large--one-half:nth-child(2n+1), .grid--uniform .large--one-third:nth-child(3n+1), .grid--uniform .large--one-quarter:nth-child(4n+1), .grid--uniform .large--one-fifth:nth-child(5n+1), .grid--uniform .large--one-sixth:nth-child(6n+1), .grid--uniform .large--two-sixths:nth-child(3n+1), .grid--uniform .large--three-sixths:nth-child(2n+1), .grid--uniform .large--one-eighth:nth-child(8n+1), .grid--uniform .large--two-eighths:nth-child(4n+1), .grid--uniform .large--four-eighths:nth-child(2n+1), .grid--uniform .large--five-tenths:nth-child(2n+1), .grid--uniform .large--one-twelfth:nth-child(12n+1), .grid--uniform .large--two-twelfths:nth-child(6n+1), .grid--uniform .large--three-twelfths:nth-child(4n+1), .grid--uniform .large--four-twelfths:nth-child(3n+1), .grid--uniform .large--six-twelfths:nth-child(2n+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) { /** Whole */ .large-up--one-whole { width: 100%; } /* Halves */ .large-up--one-half { width: 50%; } /* Thirds */ .large-up--one-third { width: 33.3333333333%; } .large-up--two-thirds { width: 66.6666666667%; } /* Quarters */ .large-up--one-quarter { width: 25%; } .large-up--two-quarters { width: 50%; } /* .large-up--three-quarters { width: 75%; } */ /* Fifths */ .large-up--one-fifth { width: 20%; } .large-up--two-fifths { width: 40%; } .large-up--three-fifths { width: 60%; } .large-up--four-fifths { width: 80%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .large-up--one-twelfth { width: 8.3333333333%; } .large-up--two-twelfths { width: 8.3333333333%; } .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%; } .grid--uniform .large-up--one-half:nth-child(2n+1), .grid--uniform .large-up--one-third:nth-child(3n+1), .grid--uniform .large-up--one-quarter:nth-child(4n+1), .grid--uniform .large-up--one-fifth:nth-child(5n+1), .grid--uniform .large-up--one-sixth:nth-child(6n+1), .grid--uniform .large-up--two-sixths:nth-child(3n+1), .grid--uniform .large-up--three-sixths:nth-child(2n+1), .grid--uniform .large-up--one-eighth:nth-child(8n+1), .grid--uniform .large-up--two-eighths:nth-child(4n+1), .grid--uniform .large-up--four-eighths:nth-child(2n+1), .grid--uniform .large-up--five-tenths:nth-child(2n+1), .grid--uniform .large-up--one-twelfth:nth-child(12n+1), .grid--uniform .large-up--two-twelfths:nth-child(6n+1), .grid--uniform .large-up--three-twelfths:nth-child(4n+1), .grid--uniform .large-up--four-twelfths:nth-child(3n+1), .grid--uniform .large-up--six-twelfths:nth-child(2n+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) { /** Whole */ .large-down--one-whole { width: 100%; } /* Halves */ .large-down--one-half { width: 50%; } /* Thirds */ .large-down--one-third { width: 33.3333333333%; } .large-down--two-thirds { width: 66.6666666667%; } /* Quarters */ .large-down--one-quarter { width: 25%; } .large-down--two-quarters { width: 50%; } .large-down--three-quarters { width: 75%; } /* Fifths */ .large-down--one-fifth { width: 20%; } .large-down--two-fifths { width: 40%; } .large-down--three-fifths { width: 60%; } .large-down--four-fifths { width: 80%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .large-down--one-twelfth { width: 8.3333333333%; } .large-down--two-twelfths { width: 8.3333333333%; } .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%; } .grid--uniform .large-down--one-half:nth-child(2n+1), .grid--uniform .large-down--one-third:nth-child(3n+1), .grid--uniform .large-down--one-quarter:nth-child(4n+1), .grid--uniform .large-down--one-fifth:nth-child(5n+1), .grid--uniform .large-down--one-sixth:nth-child(6n+1), .grid--uniform .large-down--two-sixths:nth-child(3n+1), .grid--uniform .large-down--three-sixths:nth-child(2n+1), .grid--uniform .large-down--one-eighth:nth-child(8n+1), .grid--uniform .large-down--two-eighths:nth-child(4n+1), .grid--uniform .large-down--four-eighths:nth-child(2n+1), .grid--uniform .large-down--five-tenths:nth-child(2n+1), .grid--uniform .large-down--one-twelfth:nth-child(12n+1), .grid--uniform .large-down--two-twelfths:nth-child(6n+1), .grid--uniform .large-down--three-twelfths:nth-child(4n+1), .grid--uniform .large-down--four-twelfths:nth-child(3n+1), .grid--uniform .large-down--six-twelfths:nth-child(2n+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) { /** Whole */ .widescreen--one-whole { width: 100%; } /* Halves */ .widescreen--one-half { width: 50%; } /* Thirds */ .widescreen--one-third { width: 33.3333333333%; } .widescreen--two-thirds { width: 66.6666666667%; } /* Quarters */ .widescreen--one-quarter { width: 25%; } .widescreen--two-quarters { width: 50%; } .widescreen--three-quarters { width: 75%; } /* Fifths */ .widescreen--one-fifth { width: 20%; } .widescreen--two-fifths { width: 40%; } .widescreen--three-fifths { width: 60%; } .widescreen--four-fifths { width: 80%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .widescreen--one-twelfth { width: 8.3333333333%; } .widescreen--two-twelfths { width: 8.3333333333%; } .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%; } .grid--uniform .widescreen--one-half:nth-child(2n+1), .grid--uniform .widescreen--one-third:nth-child(3n+1), .grid--uniform .widescreen--one-quarter:nth-child(4n+1), .grid--uniform .widescreen--one-fifth:nth-child(5n+1), .grid--uniform .widescreen--one-sixth:nth-child(6n+1), .grid--uniform .widescreen--two-sixths:nth-child(3n+1), .grid--uniform .widescreen--three-sixths:nth-child(2n+1), .grid--uniform .widescreen--one-eighth:nth-child(8n+1), .grid--uniform .widescreen--two-eighths:nth-child(4n+1), .grid--uniform .widescreen--four-eighths:nth-child(2n+1), .grid--uniform .widescreen--five-tenths:nth-child(2n+1), .grid--uniform .widescreen--one-twelfth:nth-child(12n+1), .grid--uniform .widescreen--two-twelfths:nth-child(6n+1), .grid--uniform .widescreen--three-twelfths:nth-child(4n+1), .grid--uniform .widescreen--four-twelfths:nth-child(3n+1), .grid--uniform .widescreen--six-twelfths:nth-child(2n+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) { /* Halves */ .mobile--push-one-half { left: 50%; } /* Thirds */ .mobile--push-one-third { left: 33.3333333333%; } .mobile--push-two-thirds { left: 66.6666666667%; } /* Quarters */ .mobile--push-one-quarter { left: 25%; } .mobile--push-two-quarters { left: 50%; } .mobile--push-three-quarters { left: 75%; } /* Fifths */ .mobile--push-one-fifth { left: 20%; } .mobile--push-two-fifths { left: 40%; } .mobile--push-three-fifths { left: 60%; } .mobile--push-four-fifths { left: 80%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .mobile--push-one-twelfth { left: 8.3333333333%; } .mobile--push-two-twelfths { left: 8.3333333333%; } .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) { /* Halves */ .small--push-one-half { left: 50%; } /* Thirds */ .small--push-one-third { left: 33.3333333333%; } .small--push-two-thirds { left: 66.6666666667%; } /* Quarters */ .small--push-one-quarter { left: 25%; } .small--push-two-quarters { left: 50%; } .small--push-three-quarters { left: 75%; } /* Fifths */ .small--push-one-fifth { left: 20%; } .small--push-two-fifths { left: 40%; } .small--push-three-fifths { left: 60%; } .small--push-four-fifths { left: 80%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .small--push-one-twelfth { left: 8.3333333333%; } .small--push-two-twelfths { left: 8.3333333333%; } .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) { /* Halves */ .small-up--push-one-half { left: 50%; } /* Thirds */ .small-up--push-one-third { left: 33.3333333333%; } .small-up--push-two-thirds { left: 66.6666666667%; } /* Quarters */ .small-up--push-one-quarter { left: 25%; } .small-up--push-two-quarters { left: 50%; } .small-up--push-three-quarters { left: 75%; } /* Fifths */ .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%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .small-up--push-one-twelfth { left: 8.3333333333%; } .small-up--push-two-twelfths { left: 8.3333333333%; } .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) { /* Halves */ .small-down--push-one-half { left: 50%; } /* Thirds */ .small-down--push-one-third { left: 33.3333333333%; } .small-down--push-two-thirds { left: 66.6666666667%; } /* Quarters */ .small-down--push-one-quarter { left: 25%; } .small-down--push-two-quarters { left: 50%; } .small-down--push-three-quarters { left: 75%; } /* Fifths */ .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%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .small-down--push-one-twelfth { left: 8.3333333333%; } .small-down--push-two-twelfths { left: 8.3333333333%; } .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) { /* Halves */ .small-medium--push-one-half { left: 50%; } /* Thirds */ .small-medium--push-one-third { left: 33.3333333333%; } .small-medium--push-two-thirds { left: 66.6666666667%; } /* Quarters */ .small-medium--push-one-quarter { left: 25%; } .small-medium--push-two-quarters { left: 50%; } .small-medium--push-three-quarters { left: 75%; } /* Fifths */ .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%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .small-medium--push-one-twelfth { left: 8.3333333333%; } .small-medium--push-two-twelfths { left: 8.3333333333%; } .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) { /* Halves */ .medium--push-one-half { left: 50%; } /* Thirds */ .medium--push-one-third { left: 33.3333333333%; } .medium--push-two-thirds { left: 66.6666666667%; } /* Quarters */ .medium--push-one-quarter { left: 25%; } .medium--push-two-quarters { left: 50%; } .medium--push-three-quarters { left: 75%; } /* Fifths */ .medium--push-one-fifth { left: 20%; } .medium--push-two-fifths { left: 40%; } .medium--push-three-fifths { left: 60%; } .medium--push-four-fifths { left: 80%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .medium--push-one-twelfth { left: 8.3333333333%; } .medium--push-two-twelfths { left: 8.3333333333%; } .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) { /* Halves */ .medium-up--push-one-half { left: 50%; } /* Thirds */ .medium-up--push-one-third { left: 33.3333333333%; } .medium-up--push-two-thirds { left: 66.6666666667%; } /* Quarters */ .medium-up--push-one-quarter { left: 25%; } .medium-up--push-two-quarters { left: 50%; } .medium-up--push-three-quarters { left: 75%; } /* Fifths */ .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%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .medium-up--push-one-twelfth { left: 8.3333333333%; } .medium-up--push-two-twelfths { left: 8.3333333333%; } .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) { /* Halves */ .medium-down--push-one-half { left: 50%; } /* Thirds */ .medium-down--push-one-third { left: 33.3333333333%; } .medium-down--push-two-thirds { left: 66.6666666667%; } /* Quarters */ .medium-down--push-one-quarter { left: 25%; } .medium-down--push-two-quarters { left: 50%; } .medium-down--push-three-quarters { left: 75%; } /* Fifths */ .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%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .medium-down--push-one-twelfth { left: 8.3333333333%; } .medium-down--push-two-twelfths { left: 8.3333333333%; } .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) { /* Halves */ .medium-large--push-one-half { left: 50%; } /* Thirds */ .medium-large--push-one-third { left: 33.3333333333%; } .medium-large--push-two-thirds { left: 66.6666666667%; } /* Quarters */ .medium-large--push-one-quarter { left: 25%; } .medium-large--push-two-quarters { left: 50%; } .medium-large--push-three-quarters { left: 75%; } /* Fifths */ .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%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .medium-large--push-one-twelfth { left: 8.3333333333%; } .medium-large--push-two-twelfths { left: 8.3333333333%; } .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) { /* Halves */ .large--push-one-half { left: 50%; } /* Thirds */ .large--push-one-third { left: 33.3333333333%; } .large--push-two-thirds { left: 66.6666666667%; } /* Quarters */ .large--push-one-quarter { left: 25%; } .large--push-two-quarters { left: 50%; } .large--push-three-quarters { left: 75%; } /* Fifths */ .large--push-one-fifth { left: 20%; } .large--push-two-fifths { left: 40%; } .large--push-three-fifths { left: 60%; } .large--push-four-fifths { left: 80%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .large--push-one-twelfth { left: 8.3333333333%; } .large--push-two-twelfths { left: 8.3333333333%; } .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) { /* Halves */ .large-up--push-one-half { left: 50%; } /* Thirds */ .large-up--push-one-third { left: 33.3333333333%; } .large-up--push-two-thirds { left: 66.6666666667%; } /* Quarters */ .large-up--push-one-quarter { left: 25%; } .large-up--push-two-quarters { left: 50%; } .large-up--push-three-quarters { left: 75%; } /* Fifths */ .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%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .large-up--push-one-twelfth { left: 8.3333333333%; } .large-up--push-two-twelfths { left: 8.3333333333%; } .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) { /* Halves */ .large-down--push-one-half { left: 50%; } /* Thirds */ .large-down--push-one-third { left: 33.3333333333%; } .large-down--push-two-thirds { left: 66.6666666667%; } /* Quarters */ .large-down--push-one-quarter { left: 25%; } .large-down--push-two-quarters { left: 50%; } .large-down--push-three-quarters { left: 75%; } /* Fifths */ .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%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .large-down--push-one-twelfth { left: 8.3333333333%; } .large-down--push-two-twelfths { left: 8.3333333333%; } .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) { /* Halves */ .widescreen--push-one-half { left: 50%; } /* Thirds */ .widescreen--push-one-third { left: 33.3333333333%; } .widescreen--push-two-thirds { left: 66.6666666667%; } /* Quarters */ .widescreen--push-one-quarter { left: 25%; } .widescreen--push-two-quarters { left: 50%; } .widescreen--push-three-quarters { left: 75%; } /* Fifths */ .widescreen--push-one-fifth { left: 20%; } .widescreen--push-two-fifths { left: 40%; } .widescreen--push-three-fifths { left: 60%; } .widescreen--push-four-fifths { left: 80%; } /* Sixths */ .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%; } /* Eighths */ .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%; } /* Tenths */ .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%; } /* Twelfths */ .widescreen--push-one-twelfth { left: 8.3333333333%; } .widescreen--push-two-twelfths { left: 8.3333333333%; } .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; } /*================ General layout styles ================*/ :root { --gutter: var(--LAYOUT-GUTTER); --outer: var(--LAYOUT-OUTER); --vertical: 60px; --inner: 20px; --base: 16px; --line: 1rem; } @media only screen and (min-width: 768px) and (max-width: 989px) { :root { --gutter: calc(var(--LAYOUT-GUTTER) * 0.8); --outer: calc(var(--LAYOUT-OUTER) * 0.8); --vertical: 40px; --inner: 18px; --base: 15px; } } @media only screen and (max-width: 767px) { :root { --gutter: calc(var(--LAYOUT-GUTTER) * 0.6); --outer: calc(var(--LAYOUT-OUTER) * 0.6); --vertical: 24px; --inner: 16px; --base: 14px; --line: 0.66rem; } } /* REM baseline */ html { font-size: var(--base); scroll-behavior: smooth; --scroll-behavior: smooth; } html, body { min-height: 100%; } body { min-width: 320px; line-height: 1.6; font-family: var(--FONT-STACK-BODY); color: var(--text); font-weight: var(--FONT-WEIGHT-BODY); font-size: calc(16px * var(--FONT-ADJUST-BODY)); font-style: normal; text-rendering: optimizelegibility; } body * { -webkit-font-smoothing: antialiased; } [data-scroll-locked] body { width: 100vw; } body:not(.template-index, .template-collection) { background-color: var(--bg); } @media only screen and (min-width: 1400px) { html.container-layout { background-color: #FBFBFB; } html.container-layout body { margin: 0 auto; position: relative; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); } } html.container-layout body, html.container-layout .theme__header, html.container-layout .search-popdown { max-width: var(--LAYOUT-CONTAINER); } html.container-layout .search-popdown { left: 50%; padding-right: 0 !important; margin-left: calc(var(--scrollbar-width) * -1 / 2); transform: translate3d(-50%, -100%, 0); } html.container-layout .search-popdown.is-visible { transform: translate3d(-50%, 0, 0); } .wrapper--none:after { content: ""; display: table; clear: both; } .wrapper { width: 100%; max-width: var(--LAYOUT-WIDTH); margin: 0 auto; } .wrapper:after { content: ""; display: table; clear: both; } .wrapper--full { max-width: none; margin: 0 auto; padding-left: var(--outer); padding-right: var(--outer); width: 100%; } .wrapper--full:after { content: ""; display: table; clear: both; } .wrapper--narrow { margin: 0 auto; padding-left: var(--outer); padding-right: 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--tiny { margin: 0 auto; padding-left: var(--outer); padding-right: var(--outer); width: 100%; max-width: 33%; } .wrapper--tiny:after { content: ""; display: table; clear: both; } @media only screen and (min-width: 990px) and (max-width: 1399px) { .wrapper--tiny { max-width: 45%; } } @media only screen and (min-width: 768px) and (max-width: 989px) { .wrapper--tiny { max-width: 55%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .wrapper--tiny { max-width: 66%; } } @media only screen and (max-width: 479px) { .wrapper--tiny { max-width: 100%; } } .section-padding { --padding-top: var(--PT); --padding-bottom: var(--PB); padding-top: var(--padding-top); padding-bottom: var(--padding-bottom); } @media only screen and (min-width: 768px) and (max-width: 989px) { .section-padding { --padding-top: calc(var(--PT) * 0.8); --padding-bottom: calc(var(--PB) * 0.8); } } @media only screen and (max-width: 767px) { .section-padding { --padding-top: calc(var(--PT) * 0.6); --padding-bottom: calc(var(--PB) * 0.6); } } .wrapper--narrow .section--image, .wrapper .section--image, .wrapper--full .section--image, .wrapper--tiny .section--image { border-radius: var(--RADIUS-XL); perspective: 1px; } .main-content { display: block; min-height: var(--content-min); } .main-content > .shopify-section:only-child .section-padding { min-height: var(--content-min); } .margin-top-vertical { margin-top: var(--vertical); } /*============================================================================ Icons ==============================================================================*/ .icon { display: inline-block; width: 20px; height: 20px; vertical-align: middle; fill: currentcolor; } .no-svg .icon { display: none; } .icon--wide { width: 40px; } svg.icon:not(.icon--full-color) circle, svg.icon:not(.icon--full-color) ellipse, svg.icon:not(.icon--full-color) g, svg.icon:not(.icon--full-color) line, svg.icon:not(.icon--full-color) path, svg.icon:not(.icon--full-color) polygon, svg.icon:not(.icon--full-color) polyline, svg.icon:not(.icon--full-color) rect, symbol.icon:not(.icon--full-color) circle, symbol.icon:not(.icon--full-color) ellipse, symbol.icon:not(.icon--full-color) g, symbol.icon:not(.icon--full-color) line, symbol.icon:not(.icon--full-color) path, symbol.icon:not(.icon--full-color) polygon, symbol.icon:not(.icon--full-color) polyline, symbol.icon:not(.icon--full-color) rect { fill: inherit; stroke: inherit; } /* A generic way to visually hide content while remaining accessible to screen readers (h5bp.com) */ .icon-fallback-text { position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } .no-svg .icon-fallback-text { position: static !important; overflow: auto; clip: auto; width: auto; height: auto; margin: 0; } /*================ Payment Icons ================*/ .payment-icons { -moz-user-select: none; -webkit-user-select: none; user-select: none; cursor: default; } /*================ Shopify icon on password page ================*/ .template-password .icon-shopify-logo { width: 90px; height: 25px; } @media only screen and (max-width: 479px) { .template-password .icon-shopify-logo { width: 100px; height: 40px; } } /* ============================================================================ #Images and Iframes ============================================================================== */ img { border: 0 none; } svg:not(:root) { overflow: hidden; } /* === snippets/image-fill.liquid === */ .image__fill { position: relative; display: block; overflow: hidden; } .image__fill .placeholder-svg { position: absolute; top: 0; left: 0; } /* === 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; } } .no-js .image__hero__frame noscript img { height: 100%; -o-object-fit: cover; object-fit: cover; } /* .image__hero__pane { position: absolute; top: 0px; 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%; } /* === 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; } .fade-in-image .background-size-cover.lazyloaded { opacity: 1; } .fade-in-image .background-size-cover { opacity: 0; transition: opacity 0.5s ease-in; } .no-js .fade-in-image .background-size-cover { opacity: 1; } /* .fade-in-image-zoom .background-size-cover.lazyloaded { opacity: 1; transform: scale(1); } */ /* .fade-in-image-zoom .background-size-cover { opacity: 0; transform: scale(1.06); transition: opacity 0.65s cubic-bezier(0.215, 0.61, 0.355, 1), transform 2s cubic-bezier(0.215, 0.61, 0.355, 1); } .no-js .fade-in-image-zoom .background-size-cover { opacity: 1; transform: scale(1); } */ /* == Link that fills a position: relative image wrapper == */ .link-over-image { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 201; } .link-over-image ~ .image__fill .background-size-cover { transition: transform 1.1s ease-out; } .link-over-image:hover ~ .image__fill .background-size-cover, .link-over-image:focus ~ .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); } .section--image { overflow: hidden; position: relative; color: var(--text); --image-top: var(--inner); --image-bottom: var(--inner); } @media only screen and (max-width: 767px) { .section-timeline .section--image { --image-bottom: calc(var(--inner) * 2); } } .wide-image { overflow: hidden; position: relative; background-color: transparent; } /* .background-size-cover { display: block; background-size: 100% 100%; background-position: center center; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; right: 0; z-index: 1; } */ .responsive-wide-image { width: 100%; display: block; } /*=== Overlays ===*/ .image-overlay--bottom { position: absolute; inset: 0 0 0 0; z-index: 2; opacity: 0.65; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bg) 100%); } .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), rgba(255, 255, 255, 0) 50%); } .image-overlay { position: absolute; inset: 0 0 0 0; z-index: 2; width: 100%; height: 100%; background-color: var(--bg); } .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; } /*=== Alignmnet ===*/ .hero__content__wrapper { position: absolute; display: flex; z-index: 10; top: 0; left: 0; height: 100%; width: 100%; padding-top: var(--image-top); padding-bottom: var(--image-bottom); } .align--top-left { align-items: flex-start; justify-content: flex-start; text-align: left; } .align--top-center { align-items: flex-start; justify-content: center; text-align: center; } .align--top-right { align-items: flex-start; justify-content: flex-end; text-align: right; } .align--middle-left { align-items: center; justify-content: flex-start; text-align: left; } .align--middle-center { align-items: center; justify-content: center; text-align: center; } .align--middle-right { align-items: center; justify-content: flex-end; text-align: right; } .align--bottom-left { align-items: flex-end; justify-content: flex-start; text-align: left; } .align--bottom-center { align-items: flex-end; justify-content: center; text-align: center; } .align--bottom-right { align-items: flex-end; justify-content: flex-end; text-align: right; } .grid__item img, .grid__item iframe { max-width: 100%; } .no-js .image__hero__frame, .no-js .image__fill { padding-top: 0 !important; } .no-js .image__fill .placeholder-svg, .no-js .image__fill .background-size-cover:not(.lazyload) { position: relative; } /* stylelint-disable selector-list-comma-newline-after */ /*================ Typography ================*/ /** * Typography * https://type-scale.com/ */ :root { --leading-none: 1; --leading-hairline: 1.25; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --font-15: 50px; --font-14: 45px; --font-13: 41px; --font-12: 38px; --font-11: 35px; --font-10: 32px; --font-9: 28px; --font-8: 25px; --font-7: 22px; --font-6: 19px; --font-5: 17px; --font-4: 16px; --font-3: 14px; --font-2: 13px; --font-1: 12px; } @media only screen and (min-width: 768px) and (max-width: 989px) { :root { --font-15: 57px; --font-14: 50px; --font-13: 45px; --font-12: 41px; --font-11: 38px; --font-10: 35px; --font-9: 31px; --font-8: 28px; --font-7: 24px; --font-6: 21px; --font-5: 19px; --font-4: 16px; --font-3: 14px; --font-2: 13px; --font-1: 12px; } } @media only screen and (min-width: 990px) { :root { --font-15: 68px; --font-14: 62px; --font-13: 55px; --font-12: 50px; --font-11: 45px; --font-10: 40px; --font-9: 34px; --font-8: 30px; --font-7: 26px; --font-6: 23px; --font-5: 20px; --font-4: 16px; --font-3: 14px; --font-2: 13px; --font-1: 12px; } } body, input, textarea, button, select { font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); line-height: 1.6; font-family: var(--FONT-STACK-BODY); font-weight: var(--FONT-WEIGHT-BODY); color: var(--text); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } .uppercase, .popout--toolbar .popout-list__option, .popout--drawer .popout-list__option, .popout--footer .popout-list__option, .popout__toggle { text-transform: uppercase; letter-spacing: 1.5px; font-size: calc(11px * var(--FONT-ADJUST-BODY)); font-family: var(--FONT-STACK-BODY); color: var(--text); font-weight: var(--FONT-WEIGHT-BODY-MID); } span.strong, p.strong { font-weight: var(--FONT-WEIGHT-BODY-BOLD); } span.midweight, p.midweight { font-weight: var(--FONT-WEIGHT-BODY-MID); } h1, h2, h3, h4, h5, h6, .h1--body, .h1--accent, .h2--body, .h2--accent, .h3--body, .h3--accent, .h4--body, .h4--accent, .h5--body, .h5--accent, .h6--body, .custom-form__label, .h6--accent, .pagination .page { color: var(--text-dark); margin: 0 0 0.5em; line-height: 1.4; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1--body a, .h1--accent a, .h2--body a, .h2--accent a, .h3--body a, .h3--accent a, .h4--body a, .h4--accent a, .h5--body a, .h5--accent a, .h6--body a, .custom-form__label a, .h6--accent a, .pagination .page a { text-decoration: none; font-weight: inherit; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--FONT-STACK-HEADING); font-weight: var(--FONT-WEIGHT-HEADING); font-style: var(--FONT-STYLE-HEADING); } .h1--body, .h2--body, .h3--body, .h4--body, .h5--body, .h6--body, .custom-form__label { font-family: var(--FONT-STACK-BODY); font-weight: var(--FONT-WEIGHT-BODY); font-style: var(--FONT-STYLE-BODY); } .h1--accent, .h2--accent, .h3--accent, .h4--accent, .h5--accent, .h6--accent, .pagination .page { font-family: var(--FONT-STACK-ACCENT); font-weight: var(--FONT-WEIGHT-ACCENT); } small, .small { font-size: calc(var(--font-2) * var(--FONT-ADJUST-BODY)); } /*================ Use calc() Sass function to declare font-size ================*/ h1, .h1 { font-size: calc(var(--font-9) * var(--FONT-ADJUST-HEADING)); line-height: var(--leading-tight); } h2, .h2 { font-size: calc(var(--font-8) * var(--FONT-ADJUST-HEADING)); line-height: var(--leading-tight); } h3, .h3 { font-size: calc(var(--font-7) * var(--FONT-ADJUST-HEADING)); line-height: var(--leading-snug); } h4, .h4 { font-size: calc(var(--font-6) * var(--FONT-ADJUST-HEADING)); line-height: var(--leading-snug); } h5, .h5 { font-size: calc(var(--font-5) * var(--FONT-ADJUST-HEADING)); line-height: var(--leading-snug); } h6, .h6 { font-size: calc(var(--font-4) * var(--FONT-ADJUST-HEADING)); line-height: var(--leading-normal); } .h1--accent { font-size: calc(var(--font-9) * var(--FONT-ADJUST-ACCENT)); line-height: var(--leading-tight); } .h2--accent { font-size: calc(var(--font-8) * var(--FONT-ADJUST-ACCENT)); line-height: var(--leading-tight); } .h3--accent { font-size: calc(var(--font-7) * var(--FONT-ADJUST-ACCENT)); line-height: var(--leading-snug); } .h4--accent { font-size: calc(var(--font-6) * var(--FONT-ADJUST-ACCENT)); line-height: var(--leading-snug); } .h5--accent { font-size: calc(var(--font-5) * var(--FONT-ADJUST-ACCENT)); line-height: var(--leading-snug); } .h6--accent, .pagination .page { font-size: calc(var(--font-4) * var(--FONT-ADJUST-ACCENT)); line-height: var(--leading-normal); } .h1--body { font-size: calc(var(--font-9) * var(--FONT-ADJUST-BODY)); line-height: var(--leading-tight); } .h2--body { font-size: calc(var(--font-8) * var(--FONT-ADJUST-BODY)); line-height: var(--leading-tight); } .h3--body { font-size: calc(var(--font-7) * var(--FONT-ADJUST-BODY)); line-height: var(--leading-snug); } .h4--body { font-size: calc(var(--font-6) * var(--FONT-ADJUST-BODY)); line-height: var(--leading-snug); } .h5--body { font-size: calc(var(--font-5) * var(--FONT-ADJUST-BODY)); line-height: var(--leading-snug); } .h6--body, .custom-form__label { font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); line-height: var(--leading-normal); } .font-heading { font-family: var(--FONT-STACK-HEADING); font-weight: var(--FONT-WEIGHT-HEADING); font-style: var(--FONT-STYLE-HEADING); } .font-body { font-family: var(--FONT-STACK-BODY); font-weight: var(--FONT-WEIGHT-BODY); font-style: var(--FONT-STYLE-BODY); } .font-accent { font-family: var(--FONT-STACK-ACCENT); font-weight: var(--FONT-WEIGHT-ACCENT); font-style: var(--FONT-STYLE-ACCENT); } .body-size-1 { font-size: calc(var(--font-1) * var(--FONT-ADJUST-BODY)); line-height: var(--leading-relaxed); } .body-size-2 { font-size: calc(var(--font-2) * var(--FONT-ADJUST-BODY)); line-height: var(--leading-relaxed); } .body-size-3 { font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY)); line-height: var(--leading-normal); } .body-size-4 { font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); line-height: var(--leading-normal); } .body-size-5 { font-size: calc(var(--font-5) * var(--FONT-ADJUST-BODY)); line-height: var(--leading-snug); } .body-size-6 { font-size: calc(var(--font-6) * var(--FONT-ADJUST-BODY)); line-height: var(--leading-snug); } .body-size-7 { font-size: calc(var(--font-7) * var(--FONT-ADJUST-BODY)); line-height: var(--leading-snug); } .body-size-8 { font-size: calc(var(--font-8) * var(--FONT-ADJUST-BODY)); line-height: var(--leading-tight); } .body-size-9 { font-size: calc(var(--font-9) * var(--FONT-ADJUST-BODY)); line-height: var(--leading-tight); } .body-size-10 { font-size: calc(var(--font-10) * var(--FONT-ADJUST-BODY)); line-height: var(--leading-tight); } .body-size-11 { font-size: calc(var(--font-11) * var(--FONT-ADJUST-BODY)); line-height: var(--leading-hairline); } .body-size-12 { font-size: calc(var(--font-12) * var(--FONT-ADJUST-BODY)); line-height: var(--leading-hairline); } .body-size-13 { font-size: calc(var(--font-13) * var(--FONT-ADJUST-BODY)); line-height: var(--leading-hairline); } .body-size-14 { font-size: calc(var(--font-14) * var(--FONT-ADJUST-BODY)); line-height: var(--leading-none); } .body-size-15 { font-size: calc(var(--font-15) * var(--FONT-ADJUST-BODY)); line-height: var(--leading-none); } .heading-size-1 { font-size: calc(var(--font-1) * var(--FONT-ADJUST-HEADING)); line-height: var(--leading-relaxed); } .heading-size-2 { font-size: calc(var(--font-2) * var(--FONT-ADJUST-HEADING)); line-height: var(--leading-relaxed); } .heading-size-3 { font-size: calc(var(--font-3) * var(--FONT-ADJUST-HEADING)); line-height: var(--leading-normal); } .heading-size-4 { font-size: calc(var(--font-4) * var(--FONT-ADJUST-HEADING)); line-height: var(--leading-normal); } .heading-size-5 { font-size: calc(var(--font-5) * var(--FONT-ADJUST-HEADING)); line-height: var(--leading-snug); } .heading-size-6 { font-size: calc(var(--font-6) * var(--FONT-ADJUST-HEADING)); line-height: var(--leading-snug); } .heading-size-7 { font-size: calc(var(--font-7) * var(--FONT-ADJUST-HEADING)); line-height: var(--leading-snug); } .heading-size-8 { font-size: calc(var(--font-8) * var(--FONT-ADJUST-HEADING)); line-height: var(--leading-tight); } .heading-size-9 { font-size: calc(var(--font-9) * var(--FONT-ADJUST-HEADING)); line-height: var(--leading-tight); } .heading-size-10 { font-size: calc(var(--font-10) * var(--FONT-ADJUST-HEADING)); line-height: var(--leading-tight); } .heading-size-11 { font-size: calc(var(--font-11) * var(--FONT-ADJUST-HEADING)); line-height: var(--leading-hairline); } .heading-size-12 { font-size: calc(var(--font-12) * var(--FONT-ADJUST-HEADING)); line-height: var(--leading-hairline); } .heading-size-13 { font-size: calc(var(--font-13) * var(--FONT-ADJUST-HEADING)); line-height: var(--leading-hairline); } .heading-size-14 { font-size: calc(var(--font-14) * var(--FONT-ADJUST-HEADING)); line-height: var(--leading-none); } .heading-size-15 { font-size: calc(var(--font-15) * var(--FONT-ADJUST-HEADING)); line-height: var(--leading-none); } /* ============================================================================ #Colors Variables set by users have ALL-CAPS and should not be overwritten ============================================================================== */ .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); --hover: var(--COLOR-A95); --muted: var(--COLOR-A40); --dull: var(--COLOR-A20); --border: var(--COLOR-BORDER); --border-light: var(--COLOR-BORDER-LIGHT); --hairline: var(--COLOR-A5); --hairline-hover: var(--COLOR-A10); --contrast: #000; --primary: var(--COLOR-PRIMARY); --primary-fade: var(--COLOR-PRIMARY-FADE); --primary-fade-hover: var(--COLOR-PRIMARY-FADE-HOVER); --primary-hover: var(--COLOR-PRIMARY-HOVER); --primary-opposite: var(--COLOR-PRIMARY-OPPOSITE); --primary-shadow: var(--COLOR-PRIMARY-SHADOW); --secondary: var(--COLOR-SECONDARY); --secondary-hover: var(--COLOR-SECONDARY-HOVER); --secondary-fade: var(--COLOR-SECONDARY-FADE); } .palette--dark, body.default--dark { --bg: var(--INVERSE-BG); --bg-accent: var(--INVERSE-BG-ACCENT); --text-dark: var(--INVERSE-TEXT-DARK); --text: var(--INVERSE-TEXT); --text-light: var(--INVERSE-TEXT-LIGHT); --hover: var(--INVERSE-A95); --muted: var(--INVERSE-A40); --dull: var(--INVERSE-A20); --border: var(--INVERSE-BORDER); --border-light: var(--INVERSE-BORDER-LIGHT); --hairline: var(--INVERSE-A5); --hairline-hover: var(--INVERSE-A10); --contrast: #FFF; --primary: var(--INVERSE-PRIMARY); --primary-fade: var(--INVERSE-PRIMARY-FADE); --primary-fade-hover: var(--INVERSE-PRIMARY-FADE-HOVER); --primary-hover: var(--INVERSE-PRIMARY-HOVER); --primary-opposite: var(--INVERSE-PRIMARY-OPPOSITE); --primary-shadow: var(--INVERSE-PRIMARY-SHADOW); --secondary: var(--INVERSE-SECONDARY); --secondary-hover: var(--INVERSE-SECONDARY-HOVER); --secondary-fade: var(--INVERSE-SECONDARY-FADE); } .palette--dark, .palette--light, .main-content { color: var(--text); background-color: var(--bg); } .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--black { --text: #000; --text-light: #000; --text-dark: #000; } .text--primary { --text: var(--COLOR-PRIMARY); --text-light: var(--COLOR-PRIMARY); --text-dark: var(--COLOR-PRIMARY); } .text--secondary { --text: var(--COLOR-SECONDARY); --text-light: var(--COLOR-SECONDARY); --text-dark: var(--COLOR-SECONDARY); } .text--white { --text: #FFF; --text-light: #FFF; --text-dark: #F7F7F7; } .text--invert--primary { --text: var(--INVERSE-PRIMARY); --text-light: var(--INVERSE-PRIMARY); --text-dark: var(--INVERSE-PRIMARY); } .text--invert--secondary { --text: var(--INVERSE-SECONDARY); --text-light: var(--INVERSE-SECONDARY); --text-dark: var(--INVERSE-SECONDARY); } .text--invert { --text: var(--INVERSE-A90); --text-light: var(--INVERSE-A80); --text-dark: var(--INVERSE-TEXT); } .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); } /*================ Rich Text Editor ================*/ .rte img { height: auto; } .rte ul, .rte ol { margin: 15px 0; padding-left: 20px; } .rte ul { list-style: disc outside; } .rte ul ul { list-style: circle outside; } .rte ul ul ul { list-style: square outside; } .rte blockquote { font-style: italic; color: var(--text-light); border-left: 2px solid var(--bg-accent); margin: 15px 0; padding-left: 15px; } .text-center.rte ul, .text-center.rte ol, .text-center .rte ul, .text-center .rte ol { margin-left: 0; list-style-position: inside; } .rte-table { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } .rte__video-wrapper { position: relative; overflow: hidden; max-width: 100%; padding-bottom: 56.25%; height: 0; height: auto; } .rte__video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .rte__table-wrapper { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } /*============================================================================ Responsive tables, defined with .responsive-table on table element. ==============================================================================*/ @media only screen and (max-width: 767px) { .responsive-table { width: 100%; } .responsive-table thead { display: none; } .responsive-table tr { display: block; } .responsive-table tr, .responsive-table td { float: left; clear: both; width: 100%; } .responsive-table th, .responsive-table td { display: block; text-align: right; padding: 5px 0; margin: 0; } .responsive-table td:before { content: attr(data-label); float: left; text-align: center; padding-right: 10px; } .responsive-table-row + .responsive-table-row, tfoot > .responsive-table-row:first-child { position: relative; margin-top: 10px; padding-top: calc(var(--gutter) / 2); } .responsive-table-row + .responsive-table-row:after, tfoot > .responsive-table-row:first-child:after { content: ""; display: block; position: absolute; top: 0; left: calc(var(--gutter) / 2); right: calc(var(--gutter) / 2); border-bottom: 1px solid var(--border); } } .responsive-table a { text-decoration: underline; } /*================ Responsive images ================*/ .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.25s ease-in-out; } /*================ Javascript disabled ================*/ .no-js .lazyload, .no-js .lazy-image { display: none; } .no-js .wide-image, .no-js .homepage-slideshow { height: auto !important; } .no-js noscript img { display: block; } .no-js .product--long noscript img:nth-child(n+2) { display: none; } .no-js .map__container, .no-js .article__card__image__wrapper--small, .no-js .js-qty__adjust, .no-js .accordion-toggle .icon-plus { display: none; } .no-js .accordion-content { display: block !important; } .no-js .review__image__wrapper noscript img { z-index: 100; position: relative; } @media only screen and (min-width: 768px) { .no-js .section-reviews .grid__item { width: 50%; margin-bottom: 60px; } } a, .text-link { color: white; text-decoration: none; background: transparent; } a:hover, a:focus, .text-link:hover, .text-link:focus { color: white; } .text-link { color: var(--secondary); position: relative; display: inline-block; } .text-link:after { content: ""; position: absolute; display: block; left: 0; width: 100%; bottom: -1px; height: 2px; background-color: currentcolor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } .text-link:hover:after, .text-link:focus:after { transform: scaleX(1); transform-origin: 0 50%; } .text-link.btn--neutral { color: var(--text); } .text-link.btn--primary { color: var(--primary); } .text-link.btn--secondary { color: var(--secondary); } .text-link.btn--white { color: #FFF; } .text-link.btn--black { color: #000; } .rte a:not([class]) { text-decoration: underline; color: var(--secondary); } .rte a:not([class]):hover, .rte a:not([class]):focus { color: var(--secondary-hover); } .border-bottom-link { border-left: none; border-right: none; border-top: none; border-radius: 0; background-color: rgba(255, 255, 255, 0); text-decoration: none !important; cursor: pointer; color: var(--text); border-bottom: 1px solid var(--border-light); padding: 0 0 3px 0; transition: all 0.25s ease-in; } .border-bottom-link:hover { border-bottom: 1px solid var(--dull); padding-bottom: 1px; margin-bottom: 2px; } .border-bottom-link:active, .border-bottom-link:focus { transform: translateY(2px); outline: none; border-bottom: 1px solid var(--dull); border-left: none; border-right: none; border-top: none; box-shadow: none; } button + .border-bottom-link, .btn + .border-bottom-link, .shopify-payment-button .shopify-payment-button__button--unbranded + .border-bottom-link, .product__form__outer:not(.product__form--buybutton) .product__submit__add + .border-bottom-link { margin-left: 15px; } .slide-in-link, .footer__nav a { position: relative; } .slide-in-link:after, .footer__nav a:after { content: ""; position: absolute; display: block; left: 0; width: 100%; bottom: -1px; height: 2px; background-color: currentcolor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } .slide-in-link:hover:after, .footer__nav a:hover:after, .slide-in-link:focus:after, .footer__nav a:focus:after { transform: scaleX(1); transform-origin: 0 50%; } /*================ Links & Buttons ================*/ /* ============================================================================ #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 ============================================================================== */ :root { --btn-top: 12px; --btn-left: 24px; } @media only screen and (max-width: 767px) { :root { --btn-top: 8px; --btn-left: 16px; } } .btn, .shopify-payment-button .shopify-payment-button__button--unbranded, .product__form__outer:not(.product__form--buybutton) .product__submit__add, .btn--soft, .product__form--buybutton .product__submit__add, .btn--outline { display: inline-block; padding: var(--btn-top) var(--btn-left); font-weight: var(--font-medium); line-height: 1; text-decoration: none; text-align: center; vertical-align: middle; white-space: nowrap; border: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: unset; font-size: var(--font-md); color:white !important; } .btn:hover, .shopify-payment-button .shopify-payment-button__button--unbranded:hover, .product__form__outer:not(.product__form--buybutton) .product__submit__add:hover, .btn:focus, .shopify-payment-button .shopify-payment-button__button--unbranded:focus, .product__form__outer:not(.product__form--buybutton) .product__submit__add:focus, .btn--soft:hover, .product__form--buybutton .product__submit__add:hover, .btn--soft:focus, .product__form--buybutton .product__submit__add:focus, .btn--outline:hover, .btn--outline:focus { transform: translateY(-1px); } .btn:active, .shopify-payment-button .shopify-payment-button__button--unbranded:active, .product__form__outer:not(.product__form--buybutton) .product__submit__add:active, .btn--soft:active, .product__form--buybutton .product__submit__add:active, .btn--outline:active { transform: translateY(1px); } .btn, .shopify-payment-button .shopify-payment-button__button--unbranded, .product__form__outer:not(.product__form--buybutton) .product__submit__add, .btn--soft, .product__form--buybutton .product__submit__add { --btn-bg: var(--text); --btn-shadow: var(--hairline); --btn-text: var(--bg); --btn-bg-hover: var(--text-dark); --btn-text-hover: var(--bg); background-color: var(--btn-bg); color: var(--btn-text); transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .btn:hover, .shopify-payment-button .shopify-payment-button__button--unbranded:hover, .product__form__outer:not(.product__form--buybutton) .product__submit__add:hover, .btn:active, .shopify-payment-button .shopify-payment-button__button--unbranded:active, .product__form__outer:not(.product__form--buybutton) .product__submit__add:active, .btn:focus, .shopify-payment-button .shopify-payment-button__button--unbranded:focus, .product__form__outer:not(.product__form--buybutton) .product__submit__add:focus, .btn--soft:hover, .product__form--buybutton .product__submit__add:hover, .btn--soft:active, .product__form--buybutton .product__submit__add:active, .btn--soft:focus, .product__form--buybutton .product__submit__add:focus { color: var(--btn-text-hover); background-color: var(--btn-bg-hover); } .btn, .shopify-payment-button .shopify-payment-button__button--unbranded, .product__form__outer:not(.product__form--buybutton) .product__submit__add { box-shadow: 0 4px 6px var(--btn-shadow), 0 1px 3px var(--btn-shadow); } .btn:hover, .shopify-payment-button .shopify-payment-button__button--unbranded:hover, .product__form__outer:not(.product__form--buybutton) .product__submit__add:hover, .btn:focus, .shopify-payment-button .shopify-payment-button__button--unbranded:focus, .product__form__outer:not(.product__form--buybutton) .product__submit__add:focus { box-shadow: 0 7px 14px var(--btn-shadow), 0 3px 6px var(--btn-shadow); } .btn:active, .shopify-payment-button .shopify-payment-button__button--unbranded:active, .product__form__outer:not(.product__form--buybutton) .product__submit__add:active { box-shadow: 0 1px 3px var(--btn-shadow), 0 1px 2px var(--btn-shadow); } .btn--neutral.btn, .shopify-payment-button .btn--neutral.shopify-payment-button__button--unbranded, .product__form__outer:not(.product__form--buybutton) .btn--neutral.product__submit__add { --btn-bg: var(--COLOR-TEXT); --btn-text: var(--COLOR-BG); --btn-bg-hover: var(--COLOR-A95); --btn-text-hover: var(--COLOR-BG); --btn-shadow: var(--COLOR-A5); } .btn--invert.btn, .shopify-payment-button .btn--invert.shopify-payment-button__button--unbranded, .product__form__outer:not(.product__form--buybutton) .btn--invert.product__submit__add { --btn-bg: var(--INVERSE-TEXT); --btn-text: var(--INVERSE-BG); --btn-bg-hover: var(--INVERSE-A95); --btn-text-hover: var(--INVERSE-BG); --btn-shadow: var(--INVERSE-A5); } .btn--black.btn, .shopify-payment-button .btn--black.shopify-payment-button__button--unbranded, .product__form__outer:not(.product__form--buybutton) .btn--black.product__submit__add { --btn-bg: #000; --btn-text: #FFF; --btn-bg-hover: #000; --btn-text-hover: #F7F7F7; --btn-shadow: rgb(0 0 0 / 5%); } .btn--primary.btn, .shopify-payment-button .btn--primary.shopify-payment-button__button--unbranded, .product__form__outer:not(.product__form--buybutton) .btn--primary.product__submit__add { --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-shadow: var(--COLOR-PRIMARY-FADE); } .btn--secondary.btn, .shopify-payment-button .btn--secondary.shopify-payment-button__button--unbranded, .product__form__outer:not(.product__form--buybutton) .btn--secondary.product__submit__add { --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-shadow: var(--COLOR-SECONDARY-FADE); } .btn--white.btn, .shopify-payment-button .btn--white.shopify-payment-button__button--unbranded, .product__form__outer:not(.product__form--buybutton) .btn--white.product__submit__add { --btn-bg: #FFF; --btn-text: #000; --btn-bg-hover: #FFF; --btn-text-hover: #333; --btn-shadow: rgb(0 0 0 / 0%); } .btn--invert--primary.btn, .shopify-payment-button .btn--invert--primary.shopify-payment-button__button--unbranded, .product__form__outer:not(.product__form--buybutton) .btn--invert--primary.product__submit__add { --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-shadow: var(--INVERSE-PRIMARY-FADE); } .btn--invert--secondary.btn, .shopify-payment-button .btn--invert--secondary.shopify-payment-button__button--unbranded, .product__form__outer:not(.product__form--buybutton) .btn--invert--secondary.product__submit__add { --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-shadow: var(--INVERSE-SECONDARY-FADE); } .btn--soft, .product__form--buybutton .product__submit__add { --btn-bg: var(--hairline); --btn-text: var(--text); --btn-bg-hover: var(--hairline-hover); --btn-text-hover: var(--text); } .btn--neutral.btn--soft, .product__form--buybutton .btn--neutral.product__submit__add { --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, .product__form--buybutton .btn--invert.product__submit__add { --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, .product__form--buybutton .btn--black.product__submit__add { --btn-bg: rgb(0 0 0 / 5%); --btn-text: #000; --btn-bg-hover: rgb(0 0 0 / 10%); --btn-text-hover: #000; } .btn--primary.btn--soft, .product__form--buybutton .btn--primary.product__submit__add { --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, .product__form--buybutton .btn--secondary.product__submit__add { --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, .product__form--buybutton .btn--white.product__submit__add { --btn-bg: rgb(255 255 255 / 5%); --btn-text: #FFF; --btn-bg: rgb(255 255 255 / 10%); --btn-text-hover: #FFF; } .btn--invert--primary.btn--soft, .product__form--buybutton .btn--invert--primary.product__submit__add { --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, .product__form--buybutton .btn--invert--secondary.product__submit__add { --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: rgb(255 255 255 / 0%); --btn-text: var(--COLOR-A90); --btn-bg-hover: var(--COLOR-A5); background-color: rgba(255, 255, 255, 0); border: 1px solid var(--btn-text); transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); color: var(--btn-text); } .btn--outline:hover, .btn--outline:active, .btn--outline:focus { background-color: var(--btn-bg-hover); border: 1px solid var(--btn-text); color: var(--btn-text); } .btn--outline { --btn-text: var(--text); --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: rgb(0 0 0 / 100%); --btn-bg-hover: rgb(0 0 0 / 10%); } .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: rgb(255 255 255 / 10%); } .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--large { font-size: calc(var(--font-5) * var(--FONT-ADJUST-BODY)); padding: calc(var(--btn-top) * 1.4) calc(var(--btn-left) * 1.4); } .btn--medium { padding: calc(var(--btn-top) * 1.4) calc(var(--btn-left) * 1.4); } .btn--small { font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY)); padding: calc(var(--btn-top) / 1.4) calc(var(--btn-left) / 1.4); } .btn[disabled], .shopify-payment-button [disabled].shopify-payment-button__button--unbranded, .product__form__outer:not(.product__form--buybutton) [disabled].product__submit__add, .btn.disabled, .shopify-payment-button .disabled.shopify-payment-button__button--unbranded, .product__form__outer:not(.product__form--buybutton) .disabled.product__submit__add { cursor: default; color: #737B83; background-color: #D7D9DC; border-color: #D7D9DC; box-shadow: none; } .btn[disabled]:hover, .shopify-payment-button [disabled].shopify-payment-button__button--unbranded:hover, .product__form__outer:not(.product__form--buybutton) [disabled].product__submit__add:hover, .btn.disabled:hover, .shopify-payment-button .disabled.shopify-payment-button__button--unbranded:hover, .product__form__outer:not(.product__form--buybutton) .disabled.product__submit__add:hover { transform: none; box-shadow: none; color: #737B83 !important; background-color: #D7D9DC !important; border-color: #D7D9DC !important; } .btn[disabled]:active, .shopify-payment-button [disabled].shopify-payment-button__button--unbranded:active, .product__form__outer:not(.product__form--buybutton) [disabled].product__submit__add:active, .btn[disabled]:focus, .shopify-payment-button [disabled].shopify-payment-button__button--unbranded:focus, .product__form__outer:not(.product__form--buybutton) [disabled].product__submit__add:focus, .btn.disabled:active, .shopify-payment-button .disabled.shopify-payment-button__button--unbranded:active, .product__form__outer:not(.product__form--buybutton) .disabled.product__submit__add:active, .btn.disabled:focus, .shopify-payment-button .disabled.shopify-payment-button__button--unbranded:focus, .product__form__outer:not(.product__form--buybutton) .disabled.product__submit__add:focus { transform: none; } .btn--pill, .link--remove, .link--add:hover { border: none; padding: 3px 10px; background-color: var(--border-light); color: var(--text); border-radius: 300px; box-shadow: none; transition: all 0.15s ease; font-size: calc(14px * var(--FONT-ADJUST-BODY)); } .btn--pill:hover, .link--remove:hover, .link--add:hover { transform: translateY(-1px); box-shadow: none; background-color: var(--border); color: var(--text); } .btn--pill:active, .link--remove:active, .link--add:active:hover, .btn--pill:focus, .link--remove:focus, .link--add:focus:hover { background-color: var(--border); transform: translateY(1px); box-shadow: none; outline: none; } .btn--pill svg, .link--remove svg, .link--add:hover svg { width: 12px; margin-left: 4px; margin-top: -1px; } .btn--half { margin: 0; min-width: 50%; } @media only screen and (max-width: 479px) { .btn--half { width: 100%; } } .btn--full { width: 100%; } .btn--form { padding: 16px 60px; font-size: calc(18px * var(--FONT-ADJUST-BODY)); } .btn--reset { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none; } button.underline { text-decoration: underline; } /* Shopify Shadow-DOM accelerated checkout buttons */ shopify-accelerated-checkout { --shopify-accelerated-checkout-button-block-size: 56px; --shopify-accelerated-checkout-button-border-radius: var(--RADIUS-BTN); --shopify-accelerated-checkout-button-box-shadow: none; } shopify-accelerated-checkout-cart { --shopify-accelerated-checkout-button-block-size: 42px; --shopify-accelerated-checkout-button-inline-size: 54px; --shopify-accelerated-checkout-button-border-radius: 3px; --shopify-accelerated-checkout-button-box-shadow: none; --shopify-accelerated-checkout-inline-alignment: flex-start; --shopify-accelerated-checkout-row-gap: 12px; } .badge { border: none; padding: 3px 6px; background-color: var(--bg-accent); color: var(--text); border-radius: var(--RADIUS-SM); } .badge-bold { 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(var(--font-3) * var(--FONT-ADJUST-BODY)); border: none; padding: 3px 6px; background-color: var(--secondary); color: var(--bg); border-radius: var(--RADIUS-SM); } /*============================================================================ Form scaffolding - Selectors setup for you to style form elements how you want - Focus, error, and disabled states are set to be extended ==============================================================================*/ input, textarea, select, .select, .popout__toggle, .input-group { border: 1px solid var(--border); background-color: var(--bg); border-radius: var(--RADIUS-BTN); max-width: 100%; padding: 9px 16px; margin: 7px 0; } @media only screen and (max-width: 767px) { input, textarea, select, .select, .popout__toggle, .input-group { padding: 7px 14px; } } input:focus, textarea:focus, select:focus, .select:focus, .popout__toggle:focus, .input-group:focus { outline: none; } input[disabled], textarea[disabled], select[disabled], .select[disabled], [disabled].popout__toggle, .input-group[disabled] { cursor: default; background-color: #737B83; background-color: #D7D9DC; border-color: #D7D9DC; } input::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder, .select::-moz-placeholder, .popout__toggle::-moz-placeholder, .input-group::-moz-placeholder { color: inherit; } input::placeholder, textarea::placeholder, select::placeholder, .select::placeholder, .popout__toggle::placeholder, .input-group::placeholder { color: #656566; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus, select:-webkit-autofill:active, .select:-webkit-autofill, .popout__toggle:-webkit-autofill, .select:-webkit-autofill:hover, .select:-webkit-autofill:focus, .select:-webkit-autofill:active, .input-group:-webkit-autofill, .input-group:-webkit-autofill:hover, .input-group:-webkit-autofill:focus, .input-group:-webkit-autofill:active { -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); } textarea { padding: 16px; border-radius: var(--RADIUS-FORM); } input[type=checkbox] { -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox; } input[type=radio] { -webkit-appearance: radio; -moz-appearance: radio; appearance: radio; } textarea { min-height: 100px; } /*================ Float labels ================*/ .form__field { position: relative; } .form__field input, .form__field textarea, .form__field select { width: 100%; line-height: 1.6; } .form__field input:active, .form__field input:focus, .form__field textarea:active, .form__field textarea:focus, .form__field select:active, .form__field select:focus { border: 1px solid var(--secondary); } .form__field[data-aria-hidden=true] { display: none; } .form__field label { background: var(--bg); color: var(--text-light); font-size: calc(12px * var(--FONT-ADJUST-BODY)); font-weight: var(--FONT-WEIGHT-BODY-BOLD); left: 9px; opacity: 0; padding: 0 0.5em; position: absolute; top: 2em; transition: all 0.15s ease-in; z-index: -1; } .form__field label.label--float { opacity: 1; top: -0.4em; z-index: 1; } .custom-form__block--heading { margin-top: 20px; } .custom-form__block--group { margin-top: 10px; margin-bottom: 10px; } .custom-form__block select { min-width: 50%; } .custom-form__button { margin-top: 15px; } .custom-form__label { display: block; margin-bottom: 0; } .form__legal p { font-style: italic; color: var(--text-light); font-size: calc(var(--font-1) * var(--FONT-ADJUST-BODY)); } .form__legal a { color: var(--text); } /*================ Input Group ================*/ .input-group { background-color: var(--bg); position: relative; display: flex; padding: 4px; } .input-group .btn, .input-group .shopify-payment-button .shopify-payment-button__button--unbranded, .shopify-payment-button .input-group .shopify-payment-button__button--unbranded, .input-group .product__form__outer:not(.product__form--buybutton) .product__submit__add, .product__form__outer:not(.product__form--buybutton) .input-group .product__submit__add { box-shadow: none; } .input-group input, .input-group input:focus, .input-group input:active { border: none; box-shadow: none; margin: 0; } .input-group input::-moz-focus-inner, .input-group input:focus::-moz-focus-inner, .input-group input:active::-moz-focus-inner { border: 0; padding: 0; margin-top: -1px; margin-bottom: -1px; } .input-group-field, .input-group-btn { display: table-cell; margin: 0; } .input-group .input-group-field { width: 100%; margin-bottom: 0; } .input-group-btn { position: relative; white-space: nowrap; padding: 0; margin: 0; } .input-group-btn .btn, .input-group-btn .shopify-payment-button .shopify-payment-button__button--unbranded, .shopify-payment-button .input-group-btn .shopify-payment-button__button--unbranded, .input-group-btn .product__form__outer:not(.product__form--buybutton) .product__submit__add, .product__form__outer:not(.product__form--buybutton) .input-group-btn .product__submit__add, .input-group-btn .btn--soft, .input-group-btn .product__form--buybutton .product__submit__add, .product__form--buybutton .input-group-btn .product__submit__add, .input-group-btn .btn--outline { margin: 0; } .input-group-btn .btn:hover, .input-group-btn .shopify-payment-button .shopify-payment-button__button--unbranded:hover, .shopify-payment-button .input-group-btn .shopify-payment-button__button--unbranded:hover, .input-group-btn .product__form__outer:not(.product__form--buybutton) .product__submit__add:hover, .product__form__outer:not(.product__form--buybutton) .input-group-btn .product__submit__add:hover, .input-group-btn .btn:focus, .input-group-btn .shopify-payment-button .shopify-payment-button__button--unbranded:focus, .shopify-payment-button .input-group-btn .shopify-payment-button__button--unbranded:focus, .input-group-btn .product__form__outer:not(.product__form--buybutton) .product__submit__add:focus, .product__form__outer:not(.product__form--buybutton) .input-group-btn .product__submit__add:focus, .input-group-btn .btn--soft:hover, .input-group-btn .product__form--buybutton .product__submit__add:hover, .product__form--buybutton .input-group-btn .product__submit__add:hover, .input-group-btn .btn--soft:focus, .input-group-btn .product__form--buybutton .product__submit__add:focus, .product__form--buybutton .input-group-btn .product__submit__add:focus, .input-group-btn .btn--outline:hover, .input-group-btn .btn--outline:focus { transform: translateY(0); } .input-group-btn .btn:active, .input-group-btn .shopify-payment-button .shopify-payment-button__button--unbranded:active, .shopify-payment-button .input-group-btn .shopify-payment-button__button--unbranded:active, .input-group-btn .product__form__outer:not(.product__form--buybutton) .product__submit__add:active, .product__form__outer:not(.product__form--buybutton) .input-group-btn .product__submit__add:active, .input-group-btn .btn--soft:active, .input-group-btn .product__form--buybutton .product__submit__add:active, .product__form--buybutton .input-group-btn .product__submit__add:active, .input-group-btn .btn--outline:active { transform: translateY(0); } .form--search .input-group-btn button { min-height: 44px; } /*================ Custom select style ================*/ select, .select, .popout__toggle { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; background-position: right center; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: right 14px center; background-color: transparent; background-size: 10px; padding-right: 30px; text-indent: 0.01px; text-overflow: clip; cursor: pointer; /*================ Hide the svg arrow in IE9 ================*/ } .ie9 select, .ie9 .select, .ie9 .popout__toggle { padding-right: 10px; background-image: none; } select::-ms-expand { display: none; } select.btn--pill, select.link--remove, select.link--add:hover { padding: 3px 30px 3px 10px; border: 1px solid var(--border-light); background-color: var(--border-light); font-weight: var(--FONT-WEIGHT-BODY-BOLD); } /*================ Error styles ================*/ input.input-error, select.input-error, textarea.input-error { border: none; background-color: var(--primary-fade); color: var(--primary); } hr { clear: both; border-top: solid var(--border); border-width: 1px 0 0; margin: 30px 0; height: 0; } hr.hr--clear { border-top-color: transparent; } hr.hr--small { margin: 30px auto; width: 50%; } hr.hr--tall { margin: 60px auto; } hr.hr--no-margin { margin: 0; } hr.hr--half-margin { margin: 15px 0; } @media only screen and (min-width: 768px) { .form-padding--medium-up { padding-right: 10px; } } form .errors, .form-errors, .cart__drawer .errors { border: none; border-radius: var(--RADIUS-SM); margin: 30px 0; padding: 10px 20px; background-color: var(--COLOR-ERROR-FADE); color: var(--COLOR-ERROR); } form .errors ul, .form-errors ul, .cart__drawer .errors ul { list-style-type: none; margin: 0; padding: 0; } .form-success { border: none; border-radius: var(--RADIUS-SM); margin: 0 0 30px 0; padding: 15px 30px; color: var(--COLOR-SUCCESS); background-color: var(--COLOR-SUCCESS-FADE); } /*================ Blank States ================*/ .placeholder-svg { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; } .placeholder-svg--small { width: 480px; } .placeholder-noblocks { padding: 40px; text-align: center; } .main-content .placeholder-svg { width: 100%; height: 100%; max-width: 100%; max-height: 100%; } .palette--dark .placeholder-svg, .section-collection .placeholder-svg, .section-mosaic .placeholder-svg, .section-marbles .placeholder-svg, .section-collection-grid .placeholder-svg { border: none; } .placeholder-background { position: absolute; inset: 0 0 0 0; } .placeholder-background .icon { border: 0; } .product-grid-item .placeholder-svg, .section-row .placeholder-svg, .section-columns .placeholder-svg { border: none; border-radius: var(--RADIUS); } .press__image .placeholder-svg { border: none; } .section-hero .background-size-cover[data-bgset*="/assets/blank.svg"], .collection-split .background-size-cover[data-bgset*="/assets/blank.svg"] { background-color: var(--overlay); background-blend-mode: difference; filter: invert(1); } .placeholder-svg { filter: contrast(0.6) brightness(1.2) saturate(0); } /*============================================================================ 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: 99999; opacity: 0; -webkit-font-smoothing: initial; filter: alpha(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 (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 { color: #FFF; text-decoration: underline; } .helper-note a:hover, .helper-note a:active { color: #CCC; } .helper-note a.secondary-action { display: inline-block; line-height: 30px; color: #CCC; text-decoration: none; } .helper-note a.secondary-action:hover, .helper-note a.secondary-action:focus { opacity: 0.7; } .helper-note a.admin-btn-primary { margin-right: 15px; cursor: pointer; display: inline-block; min-height: 32px; line-height: 30px; padding: 0 9px; font-size: 14px; border-radius: 0; text-decoration: none; white-space: nowrap; text-transform: none; vertical-align: middle; background-color: #D86353; border: 1px solid #B74737; color: #FFF; box-sizing: border-box; } .helper-note a.admin-btn-primary:hover, .helper-note a.admin-btn-primary:focus { opacity: 0.7; } .helper-note a.admin-btn-primary:active { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; background-color: #B74737; border-color: #B74737; } .helper-note .helper-icon { float: left; margin-top: 4px; width: 24px; height: 24px; background-size: contain; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjOThhN2I1ICFpbXBvcnRhbnQ7IH08L3N0eWxlPjxwYXRoIGZpbGw9IiM1MjYwNjYiIGQ9Ik01IDloLTN2MWgzdi0xem0xLTJoLTR2MWg0di0xem0tNCA1aDN2LTFoLTN2MXptOCAyLjA0NmwtOS4wMDItLjA0Ni0uMDA0LTloMy4wMDZ2LTNoNnYyaDF2LTEuOTU0bC0xLjA4LTEuMDQ2aC02LjkybC0yLjk5OCAyLjk4Ni0uMDAyIDExLjAxNGgxMXYtNGwtMSAxLjA0NnYyem0tNi45OTYtMTEuNjA1djEuNTg2aC0xLjYwOGwxLjYwOC0xLjU4NnptMi45ODcgOS4wNThsMi4yMDYtLjA1OSA2LjgwNS01LjU1NC0xLjY4OS0yLjEwNC02LjgwNSA1LjU1NC0uNTE3IDIuMTYzem0xLjE2OS0xLjcxNWwuODMxLS4xNTYuMTU1LjgzNS0xLjIwMS41NjUuMjE1LTEuMjQ0eiIvPjwvc3ZnPg=="); display: inline-block; vertical-align: top; } .helper-section { position: relative; clear: both; } .helper-section:hover .helper-note { opacity: 1; filter: alpha(opacity=100); transform: translateY(-20px); } .helper-section .helper-content { opacity: 1; filter: alpha(opacity=100); transform: translateZ(0); transition: opacity 0.25s cubic-bezier(0.67, 0, 1, 1); } .helper-section:hover .helper-content { opacity: 0.2; filter: alpha(opacity=20); transition: opacity 0.3s cubic-bezier(0, 0, 0.33, 1); } /* ================ 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; } .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; } .use_pixels_500 { height: 500px; } /*================ Section spacing ================*/ .newsletter .custom-scrollbar, .section-blog .custom-scrollbar, .section-page .custom-scrollbar, .section-columns .custom-scrollbar, .section-product .custom-scrollbar, .section-reviews .custom-scrollbar, .section-press .custom-scrollbar, .section-newsletter .custom-scrollbar { margin-bottom: var(--gutter); } .section-icons .slider-actions { margin-left: auto; } @media only screen and (max-width: 767px) { .section-columns .flickity-disabled-mobile::-webkit-scrollbar-track, .section-team .flickity-disabled-mobile::-webkit-scrollbar-track, .section-blog .flickity-disabled-mobile::-webkit-scrollbar-track { margin-right: 0; } } .section-team__inner, .section-blog__inner, .section-columns__inner { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; } .section-collection-grid__head:not(:last-child), .section-collection__head:not(:last-child), .section-team__head:not(:last-child), .section-reviews__head:not(:last-child), .section-columns__head:not(:last-child) { width: calc(100% - 140px); } @media only screen and (max-width: 767px) { .section-collection-grid__head:not(:last-child), .section-collection__head:not(:last-child), .section-team__head:not(:last-child), .section-reviews__head:not(:last-child), .section-columns__head:not(:last-child) { width: 100%; } } .section-collection-grid__head:first-child:last-child { width: 100%; } .section-team .grid:not([data-slideshow]), .section-team .grid--full:not([data-slideshow]), .section-collection-grid .grid:not([data-slideshow]), .section-collection-grid .grid--full:not([data-slideshow]), .section-collection .grid:not([data-slideshow]), .section-collection .grid--full:not([data-slideshow]) { overflow: hidden; margin-bottom: calc(var(--vertical) * -1); } .section-team .grid:not([data-slideshow]) .grid__item, .section-team .grid--full:not([data-slideshow]) .grid__item, .section-collection-grid .grid:not([data-slideshow]) .grid__item, .section-collection-grid .grid--full:not([data-slideshow]) .grid__item, .section-collection .grid:not([data-slideshow]) .grid__item, .section-collection .grid--full:not([data-slideshow]) .grid__item { margin-bottom: var(--vertical); } .section-team .grid:not([data-slideshow]) .collection-grid-item, .section-team .grid--full:not([data-slideshow]) .collection-grid-item, .section-collection-grid .grid:not([data-slideshow]) .collection-grid-item, .section-collection-grid .grid--full:not([data-slideshow]) .collection-grid-item, .section-collection .grid:not([data-slideshow]) .collection-grid-item, .section-collection .grid--full:not([data-slideshow]) .collection-grid-item { margin-bottom: 0; } @media only screen and (max-width: 767px) { .section-team .grid:not([data-slideshow]), .section-team .grid--full:not([data-slideshow]), .section-team .grid:not([data-slideshow]) .grid__item, .section-team .grid--full:not([data-slideshow]) .grid__item, .section-collection-grid .grid:not([data-slideshow]), .section-collection-grid .grid--full:not([data-slideshow]), .section-collection-grid .grid:not([data-slideshow]) .grid__item, .section-collection-grid .grid--full:not([data-slideshow]) .grid__item, .section-collection .grid:not([data-slideshow]), .section-collection .grid--full:not([data-slideshow]), .section-collection .grid:not([data-slideshow]) .grid__item, .section-collection .grid--full:not([data-slideshow]) .grid__item { margin-bottom: 0; } .section-team .grid:not([data-slideshow]), .section-team .grid--full:not([data-slideshow]), .section-collection-grid .grid:not([data-slideshow]), .section-collection-grid .grid--full:not([data-slideshow]), .section-collection .grid:not([data-slideshow]), .section-collection .grid--full:not([data-slideshow]) { overflow-x: auto; } .section-team .grid:not([data-slideshow]) .collection-grid-item, .section-team .grid--full:not([data-slideshow]) .collection-grid-item, .section-collection-grid .grid:not([data-slideshow]) .collection-grid-item, .section-collection-grid .grid--full:not([data-slideshow]) .collection-grid-item, .section-collection .grid:not([data-slideshow]) .collection-grid-item, .section-collection .grid--full:not([data-slideshow]) .collection-grid-item { margin-bottom: var(--gutter); } } /*================ MODULES ================*/ /* ============================================================================ #Site Header ============================================================================== */ .header__wrapper { --bg: var(--COLOR-NAV); --border: transparent; --text: var(--COLOR-NAV-TEXT); --text-dark: var(--COLOR-NAV-TEXT-DARK); --text-light: var(--COLOR-NAV-TEXT-BRIGHT); --link: var(--COLOR-NAV-TEXT); --link-hover: var(--COLOR-NAV-TEXT-DARK); --link-highlight: var(--COLOR-HIGHLIGHT-LINK); --text-transparent: var(--COLOR-NAV-TEXT-TRANSPARENT); --underline: var(--COLOR-NAV-BORDER-HAIRLINE); transition: top 0.2s linear; } .header__desktop__upper { background-color: var(--bg); color: var(--text); transition: background-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .header__desktop__lower { background-color: var(--bg); transition: background-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), border-top 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .header__desktop__lower a { color: var(--text); } .header__desktop__lower .navlink--toplevel { padding-top: 6px; } @media (min-width:1225px){ .theme__header { z-index: 500 !important; } } .theme__header { position: absolute; z-index: 5000; width: 100%; border-bottom: 1px solid var(--border); transition: border 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); color: var(--text); } .theme__header:hover, .meganav--visible .theme__header { z-index: 9998; } .header__wrapper:hover, .header__wrapper.meganav--visible { z-index: 9998; } .header__mobile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--bg); min-height: 70px; transition: background-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .header-override-border, [data-header-transparent=true] .theme__header { border-bottom-color: transparent; } .header-override-border .grandparent .header__dropdown, [data-header-transparent=true] .theme__header .grandparent .header__dropdown { border-bottom: none; } [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: start; } .header__logo__link { display: block; text-decoration: none; color: var(--text); position: relative; max-width: 50vw; } .header__logo--image .header__logo__link:before { content: ""; display: block; width: 100%; height: 0; font-size: 0; } .header__logo__text { text-transform: uppercase; letter-spacing: 1.5px; font-size: calc(11px * var(--FONT-ADJUST-BODY)); font-family: var(--FONT-STACK-BODY); color: var(--text); font-weight: var(--FONT-WEIGHT-BODY-MID); font-family: var(--FONT-STACK-NAV); font-style: var(--FONT-STYLE-NAV); font-weight: var(--FONT-WEIGHT-NAV); font-weight: var(--FONT-WEIGHT-NAV-BOLD); font-size: calc(var(--font-4) * var(--FONT-ADJUST-NAV)); height: 50px; display: inline-flex; justify-content: center; align-items: center; padding: 1em 0; color: var(--text); } .header__logo__text span { max-width: calc(50vw - 1em); text-align: center; line-height: 1; height: auto; } .header__logo__text--long { font-size: calc(var(--font-3) * var(--FONT-ADJUST-NAV)); } @media only screen and (max-width: 767px) { .header__logo__text--break.header__logo__text { word-break: break-all; } } .header__mobile__left, .header__mobile__right { display: flex; } .header__mobile__left { justify-content: flex-start; } .header__mobile__left .header__mobile__button .navlink { justify-content: flex-start; } .header__mobile__right { justify-content: flex-end; } .header__mobile__right .header__mobile__button .navlink { justify-content: flex-end; } .header__mobile__button { height: 100%; display: flex; align-items: center; align-content: center; } .header__mobile__button .navlink { padding: 0; height: 100%; display: flex; align-items: center; transition: 0.25s ease-in-out; } .header__mobile__right .header__mobile__button .navlink { padding: 0 0 0 16px; } .header__mobile__right .header__mobile__button .navlink--cart { padding-right: var(--outer); } .header__mobile__button .navlink__mobile__search { margin-left: 16px; } .header__mobile__button .header__mobile__hamburger { /* margin-right: 16px; */ width: calc(22px + var(--outer)); padding-left: var(--outer); } .header__mobile__button:last-child .header__mobile__hamburger, .header__mobile__button:last-child .navlink { margin-right: 0; } .header__wrapper .wrapper { padding-left: var(--outer); padding-right: var(--outer); } .header__desktop__upper .header__desktop-inner, .header__desktop__lower .header__desktop-inner { display: flex; width: 100%; justify-content: space-around; align-items: center; flex-wrap: nowrap; } .header__desktop__bar__l, .header__desktop__bar__c, .header__desktop__bar__r { display: flex; align-self: stretch; } .header__desktop__bar__l { flex: 1 0 0; justify-content: flex-start; align-items: center; } .header__desktop__bar__c { flex-grow: 0; } .header__desktop__buttons { display: flex; } .header__menu__inner { display: flex; height: 100%; } .navlink--toplevel, .header__desktop__button .navlink { align-items: center; display: flex; height: 100%; } .header__desktop__button .navlink { padding: 5px 11px; transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } .header__social { padding: 9px; } .header__social:first-child { padding-left: 0; } .header__social:hover { opacity: 0.85; } .header__desktop { width: 100%; } .header__desktop .icon-search, .header__desktop .icon-account { height: 21px; width: 21px; } .header__desktop .icon-basket { width: 16px; height: 21px; } .navlink { padding: 5px 0; position: relative; transition: color 0.3s; } .navlink .icon-user { margin-top: 2px; } .navlink--child, .navlink--grandchild { color: var(--text-light); transition: color 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } .navlink--child .navtext, .navlink--grandchild .navtext { color: var(--text-light); } .navlink--child:hover .navtext, .navlink--grandchild:hover .navtext { color: var(--link-hover); } .navlink--toplevel { font-family: var(--FONT-STACK-NAV); font-style: var(--FONT-STYLE-NAV); font-weight: var(--FONT-WEIGHT-NAV); position: relative; padding: 15px 20px; transition: opacity 0.25s linear, color 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); z-index: 6; } .navlink--toplevel .navtext { font-weight: var(--FONT-WEIGHT-BODY-MID); position: relative; z-index: 9000; } .navlink--toplevel .navtext:after { content: ""; position: absolute; display: block; left: 0; width: 100%; bottom: 0; height: 1px; background-color: white; transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } .header__dropdown.is-visible .navtext:after, .navlink--toplevel:hover .navtext:after { transform: scaleX(1); transform-origin: 0 50%; } .navtext { font-size: calc(var(--font-3) * var(--FONT-ADJUST-NAV)); display: block; transition: color 0.25s ease-out; } .header__desktop__bar__r { flex: 1 0 0; justify-content: flex-end; } .header__desktop__bar__r > .header__menu__inner, .header__desktop__bar__r > .header__desktop__buttons { margin-right: -10px; } .header__desktop__bar__l .header__menu__inner { margin-left: -10px; } .header__desktop__bar__l .social__links { list-style: none; display: flex; flex-wrap: wrap; margin: 0 0 0 -11px; } .header__desktop__bar__l .social__links li { padding: 0; } .header__desktop__bar__l .social__links a { align-items: center; display: flex; height: 100%; padding: 5px 11px; } .header__desktop__bar__l .social__links svg { fill: var(--text); } .header__desktop__bar__l .social__links a:hover svg { fill: var(--link-hover); } .highlight--link, .highlight--link .navtext { color: var(--link-highlight); --link-hover: var(--link-highlight); } /* ================ Sticky header ================ */ .js__header__stuck { position: fixed; width: 100%; top: 0; z-index: 6000; } .js__header__stuck .theme__header:after { opacity: 1; visibility: visible; transition-delay: 0s; } .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); } .theme__header:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; z-index: -5; transition: opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0s linear 0.2s; opacity: 0; visibility: hidden; background: var(--bg); } /* ================ Transparent header ================ */ .logo__img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; opacity: 0; transition: opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .logo__img--transparent { position: absolute; top: 0; opacity: 0; } .lazyloaded.logo__img--color { opacity: 1; } [data-header-transparent=true]:not(.meganav--visible, .has-drawer-open), [data-header-transparent=true]:not(.meganav--visible, .has-drawer-open) .theme__header__toolbar, [data-header-transparent=true]:not(.meganav--visible, .has-drawer-open) .header__desktop__upper, [data-header-transparent=true]:not(.meganav--visible, .has-drawer-open) .header__desktop__lower, [data-header-transparent=true]:not(.meganav--visible, .has-drawer-open) .header__mobile { --text: var(--text-transparent); --link: var(--text-transparent); --link-hover: var(--text-transparent); --text-dark: var(--text-transparent); --text-light: var(--text-transparent); --underline: var(--text-transparent); background-color: rgba(255, 255, 255, 0); } [data-header-transparent=true]:not(.meganav--visible, .has-drawer-open) .parent .header__dropdown { border: 1px solid rgba(255, 255, 255, 0); } [data-header-transparent=true]:not(.meganav--visible, .has-drawer-open) .header__desktop__lower, [data-header-transparent=true]:not(.meganav--visible, .has-drawer-open) .header__desktop__upper { background-color: rgba(255, 255, 255, 0); } [data-header-transparent=true]:not(.meganav--visible, .has-drawer-open) .navlink--toplevel .navtext:after { background-color: white; } [data-header-transparent=true]:not(.meganav--visible, .has-drawer-open) .header__logo--has-transparent .logo__img--color { opacity: 0; } [data-header-transparent=true]:not(.meganav--visible, .has-drawer-open) .header__logo--has-transparent .logo__img--transparent { opacity: 0; } [data-header-transparent=true]:not(.meganav--visible, .has-drawer-open) .header__logo--has-transparent .logo__img--transparent.lazyloaded { opacity: 1; transition: opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); } .header__menu { z-index: 5; } .header__menu.caps { letter-spacing: 0.1em; text-transform: uppercase; } /* ================ 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); width: 1400px; 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 { --bg: var(--COLOR-NAV); --text: var(--COLOR-NAV-TEXT); --text-dark: var(--COLOR-NAV-TEXT); --text-light: var(--COLOR-NAV-TEXT); --link-hover: var(--COLOR-PRIMARY); color: var(--COLOR-NAV-TEXT); position: absolute; top: 100%; opacity: 0; background-color: var(--bg); border-bottom: 1px solid var(--border); visibility: hidden; pointer-events: none; transition: opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0s 0.2s, background-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), border 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .menu__item:not(.grandparent):hover > .header__dropdown, .menu__item:not(.grandparent):focus-within > .header__dropdown, .header__dropdown.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } .header__dropdown__image { position: relative; opacity: 0; transition: opacity 0.75s cubic-bezier(0.215, 0.61, 0.355, 1); transition-delay: 0s !important; border-radius: var(--RADIUS); overflow: hidden; perspective: 1px; } .header__dropdown__image .hero__title { font-size: calc(var(--font-5) * var(--FONT-ADJUST-HEADING)); } .header__dropdown__image .hero__description { font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); } .header__dropdown__image .hero__content { padding: 30px; margin: 0; max-width: none; background: rgba(255, 255, 255, 0); } .header__dropdown__image a:hover .hero__description, .header__dropdown__image a .hero__description { color: var(--text); } .header__dropdown__image .hero__description:last-child, .header__dropdown__image .hero__title:last-child { margin-bottom: -0.5em; } .header__dropdown__image .backdrop--radial { --bg: #000; } /* ============================================================================ #Large Meganav ============================================================================== */ .grandparent .header__dropdown { width: 100%; left: 0; max-width: 100vw; overflow-y: auto; max-height: calc(100vh - var(--menu-height)); } .grandparent .header__dropdown__inner { display: flex; justify-content: space-between; } .grandparent .header__grandparent__links { flex: 3; display: grid; grid-row-gap: 1.5em; margin-left: calc(var(--gutter) * -1); } .grandparent .menu__block--narrow { flex: 1; } .grandparent .menu__block--wide { flex: 3; } .grandparent .wrapper--full .menu__block--narrow, .grandparent .wrapper--full .menu__block--wide, .grandparent .wrapper .menu__block--narrow, .grandparent .wrapper .menu__block--wide { margin: 33px 0 var(--gutter) var(--gutter); } .grandparent .navlink--child, .grandparent .navlink--grandchild { display: inline-block; will-change: transform; margin-right: auto; padding-right: 5px; } .grandparent .navlink--child { padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px; width: 100%; } .meganav--is-transitioning .grandparent.is-visible:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: var(--header-height); background: rgba(0, 0, 0, 0); z-index: 5; } .dropdown__family { padding: 30px 0; display: flex; flex-direction: column; margin-left: var(--gutter); } .dropdown__family .navlink--child { font-weight: var(--FONT-WEIGHT-BODY-BOLD); } .grandparent.kids-1 .header__grandparent__links { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grandparent.kids-2 .header__grandparent__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grandparent.kids-3 .header__grandparent__links { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grandparent.kids-4 .header__grandparent__links { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grandparent.kids-5 .header__grandparent__links { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grandparent.kids-6 .header__grandparent__links { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grandparent.kids-7 .header__grandparent__links { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grandparent.kids-8 .header__grandparent__links { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grandparent.kids-9 .header__grandparent__links { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grandparent.kids-10 .header__grandparent__links, .grandparent.kids-11 .header__grandparent__links, .grandparent.kids-12 .header__grandparent__links, .grandparent.kids-13 .header__grandparent__links, .grandparent.kids-14 .header__grandparent__links, .grandparent.kids-15 .header__grandparent__links, .grandparent.kids-16 .header__grandparent__links, .grandparent.kids-17 .header__grandparent__links, .grandparent.kids-18 .header__grandparent__links, .grandparent.kids-19 .header__grandparent__links, .grandparent.kids-20 .header__grandparent__links { grid-template-columns: repeat(5, minmax(0, 1fr)); } [class*=images-].grandparent.kids-4 .header__grandparent__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } [class*=images-].grandparent.kids-5 .header__grandparent__links, [class*=images-].grandparent.kids-6 .header__grandparent__links, [class*=images-].grandparent.kids-7 .header__grandparent__links, [class*=images-].grandparent.kids-8 .header__grandparent__links, [class*=images-].grandparent.kids-10 .header__grandparent__links, [class*=images-].grandparent.kids-11 .header__grandparent__links, [class*=images-].grandparent.kids-12 .header__grandparent__links, [class*=images-].grandparent.kids-13 .header__grandparent__links, [class*=images-].grandparent.kids-14 .header__grandparent__links, [class*=images-].grandparent.kids-15 .header__grandparent__links, [class*=images-].grandparent.kids-16 .header__grandparent__links, [class*=images-].grandparent.kids-17 .header__grandparent__links, [class*=images-].grandparent.kids-18 .header__grandparent__links, [class*=images-].grandparent.kids-19 .header__grandparent__links, [class*=images-].grandparent.kids-20 .header__grandparent__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grandparent.kids-2.images-1 .header__grandparent__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grandparent.kids-3.images-1 .header__grandparent__links, .grandparent.kids-4.images-1 .header__grandparent__links, .grandparent.kids-5.images-1 .header__grandparent__links, .grandparent.kids-6.images-1 .header__grandparent__links, .grandparent.kids-7.images-1 .header__grandparent__links, .grandparent.kids-8.images-1 .header__grandparent__links, .grandparent.kids-9.images-1 .header__grandparent__links, .grandparent.kids-10.images-1 .header__grandparent__links, .grandparent.kids-11.images-1 .header__grandparent__links, .grandparent.kids-12.images-1 .header__grandparent__links, .grandparent.kids-13.images-1 .header__grandparent__links, .grandparent.kids-14.images-1 .header__grandparent__links, .grandparent.kids-15.images-1 .header__grandparent__links, .grandparent.kids-16.images-1 .header__grandparent__links, .grandparent.kids-17.images-1 .header__grandparent__links, .grandparent.kids-18.images-1 .header__grandparent__links, .grandparent.kids-19.images-1 .header__grandparent__links, .grandparent.kids-20.images-1 .header__grandparent__links { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grandparent.images-2 .header__grandparent__links, .grandparent.images-2 .menu__block--wide { flex: 2; } .grandparent.grandparent--all-images .header__grandparent__links { flex: 0; } .grandparent.grandparent--all-images.images-1 .menu__block--narrow { flex-grow: 0; flex-basis: 50%; } /* ================ 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), color 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); will-change: transform, opacity; } .menu__item.parent:hover .navlink--child, .menu__item.parent .is-visible .navlink--child, .menu__item.parent:focus-within .navlink--child { opacity: 1; transform: translateY(0); } /* Basic Meganav */ .menu__item.grandparent .navlink--child { opacity: 0; transition: none; } .menu__item.grandparent .navlink--grandchild { opacity: 0; transform: translateY(-5px); transition: none; } .menu__item.grandparent .is-visible .navlink--child, .menu__item.grandparent .is-visible .navlink--grandchild { opacity: 1; transform: translateY(0); 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), color 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } .menu__item.grandparent:not(.is-visible) .header__dropdown { border-bottom-color: transparent; background-color: transparent; } /* Image Meganav */ .header__dropdown:not(.is-visible) .header__dropdown__image, .header__dropdown:not(.is-visible) .background-size-cover { transition-delay: 0s !important; } .header__dropdown__image .background-size-cover { transform: scale(1.06); transform-origin: bottom center; transition: transform 0.75s cubic-bezier(0.215, 0.61, 0.355, 1); will-change: transform; backface-visibility: hidden; } .is-visible .header__dropdown__image { opacity: 1; } .is-visible .header__dropdown__image .background-size-cover { transform: scale(1); transition: transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .is-visible .header__dropdown__image > div, .is-visible .header__dropdown__image .background-size-cover { transition-delay: inherit; } /* Match hover state of button */ .header__dropdown__image:hover .btn--white { background-color: #FFF; color: var(--COLOR-TEXT); border: 1px solid #FFF; box-shadow: none; } .menu__item:not(.grandparent):hover > .header__dropdown, .menu__item:not(.grandparent):focus-within > .header__dropdown, .header__dropdown.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } /* ================ Hover animations ================ */ .parent .header__dropdown { border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); border-top: none; background: var(--bg); padding: 10px 32px 20px 32px; margin-left: -17px; } .parent .header__dropdown__inner { display: flex; flex-direction: column; } .parent .navlink--child { padding: 5px 0; display: inline-block; margin-right: auto; } .navlink[href="#"] { cursor: pointer; } /* ================ Header cart status ================ */ .cart__icon__content { position: relative; display: flex; flex-direction: column; align-items: center; } .cart__icon__content svg { height: 21px; } .header__cart__status { display: none; } .header__desktop__buttons--icons .icon-basket circle.filled-cart, .header__mobile__button .icon-basket circle.filled-cart { fill: rgba(255, 255, 255, 0); } .header__desktop__buttons--icons .header__cart__status:not([data-cart-count="0"]) + .icon-basket .filled-cart, .header__mobile__button .header__cart__status:not([data-cart-count="0"]) + .icon-basket .filled-cart { fill: var(--primary); } /* ================ Icon sizes ================ */ .theme__header [data-glyph=cart] { font-size: calc(1.1875rem * var(--FONT-ADJUST-NAV)); } .theme__header [data-glyph=magnifying-glass] { font-size: calc(1rem * var(--FONT-ADJUST-NAV)); } .no-js .header__dropdown { background-color: var(--bg) !important; } .no-js .menu__item.parent:hover .header__dropdown, .no-js .menu__item.parent:hover .navlink, .no-js .menu__item.grandparent:hover .header__dropdown, .no-js .menu__item.grandparent:hover .navlink, .no-js .menu__item.parent:focus-within .header__dropdown, .no-js .menu__item.parent:focus-within .navlink, .no-js .menu__item.grandparent:focus-within .header__dropdown, .no-js .menu__item.grandparent:focus-within .navlink { opacity: 1 !important; visibility: visible !important; } .no-js .navlink--toplevel:focus + .header__dropdown, .no-js .navlink--toplevel:focus-within + .header__dropdown { opacity: 1 !important; visibility: visible !important; } .no-js .navlink--toplevel:focus + .header__dropdown .navlink, .no-js .navlink--toplevel:focus-within + .header__dropdown .navlink { opacity: 1 !important; visibility: visible !important; } /*================ Site Header Shared ================*/ .icon-basket .basket-core { color: var(--COLOR-PRIMARY); } .header__cart__link:hover .icon-basket .basket-core { color: var(--text-dark); } .header__drawer .drawer__content { --bg: var(--COLOR-NAV); --border: var(--COLOR-NAV-BORDER); --text: var(--COLOR-NAV-TEXT); --text-dark: var(--COLOR-NAV-TEXT-DARK); --text-light: var(--COLOR-NAV-TEXT-BRIGHT); --link: var(--COLOR-NAV-TEXT); --link-hover: var(--COLOR-NAV-TEXT-DARK); --text-transparent: var(--COLOR-NAV-TEXT-TRANSPARENT); --underline: var(--COLOR-NAV-BORDER-HAIRLINE); z-index: 4001; padding-top: var(--header-height); display: flex; flex-direction: column; width: 100vw; max-width: 100vw; visibility: hidden; transition: transform 0.3s ease 0.01s, visibility 0.3s ease 0.01s; border-right: none; } .js__header__stuck .header__drawer .drawer__content { padding-top: var(--menu-height); } .drawer--visible .header__drawer .drawer__content { visibility: visible; transform: translate3d(0, 0, 0); } .header__drawer .drawer__inner { transition: padding-top 0.5s linear; will-change: padding; justify-content: center; -webkit-mask-image: linear-gradient(to top, transparent, black), linear-gradient(to left, transparent var(--scrollbar-width), black var(--scrollbar-width)); mask-image: linear-gradient(to top, transparent, black), linear-gradient(to left, transparent var(--scrollbar-width), black var(--scrollbar-width)); -webkit-mask-size: 100% 20000px; mask-size: 100% 20000px; -webkit-mask-position: left bottom; mask-position: left bottom; transition: mask-position 0.3s, -webkit-mask-position 0.3s; } .header__drawer .drawer__inner:hover { -webkit-mask-position: left top; mask-position: left top; } .is-not-visible .drawer__inner { padding-top: 0; } .header__drawer .drawer__close { height: var(--menu-height); border-radius: 0; width: 100%; border-top: 0; border-right: 0; border-left: 0; cursor: pointer; position: relative; color: var(--text-dark); font-size: calc(1.25rem * var(--FONT-ADJUST-BODY)); font-weight: var(--FONT-WEIGHT-BODY-BOLD); text-align: left; } .header__drawer .drawer__close:before { content: "✕"; right: 25px; top: calc(50% - 15px); position: absolute; } .header__drawer .drawer__close:hover, .header__drawer .drawer__close:focus { outline: none; } .drawer__content > *:not(.drawer__inner) { opacity: 0; transition: opacity 0.8s ease-out; } .drawer--visible .drawer__content > *:not(.drawer__inner) { opacity: 1; } .header__drawer { color: var(--text); } .js__show__mobile .header__drawer { display: block; } .header__wrapper:not([data-header-style=drawer], .js__show__mobile) .header__drawer { display: none; } .header__drawer.caps { --drawer-letter-spacing: 0.1em; text-transform: uppercase; } .header__drawer__selects { display: flex; height: 100%; width: 100%; margin: 0 -20px; } .header__drawer__selects .popout-list { bottom: initial; top: 100%; min-width: calc(100% + 1px); } .header__drawer .drawer__bottom { display: flex; margin-top: auto; border-top: 1px solid var(--border); justify-content: space-between; min-height: 51px; width: 100%; padding: 0 var(--outer); } @media only screen and (max-width: 989px) { .header__drawer .drawer__bottom { flex-wrap: wrap; } .header__drawer .drawer__bottom .drawer__bottom__left { justify-content: center; } .header__drawer .drawer__bottom .drawer__bottom__right { margin: 0 auto; width: unset; } } .header__drawer .drawer__bottom .icon-select { color: var(--text); } .drawer__bottom__left, .drawer__bottom__center { display: flex; justify-content: flex-start; flex-flow: row wrap; min-height: 50px; padding: 10px 0; } @media only screen and (max-width: 989px) { .drawer__bottom__left { order: 2; width: 100%; padding: 0 0 24px 0; } } .drawer__bottom__right { margin-left: auto; } @media only screen and (max-width: 989px) { .drawer__bottom__right { order: 1; width: 100%; min-height: 50px; } } .drawer__bottom__center { display: flex; justify-content: center; width: 100%; } .drawer__search { border-bottom: 1px solid var(--border); } .drawer__bottom .social__links { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: 0; padding-left: 0; } .drawer__bottom .social__links li { display: flex; align-items: center; } .drawer__bottom .social__links svg { fill: var(--text); } @media only screen and (max-width: 767px) { .drawer__bottom .social__links svg { width: 15px; height: 15px; } } .drawer__bottom .social__links a:hover svg { fill: var(--link-hover); } .search__item__generic { display: flex; flex-direction: row; gap: var(--gutter); } .search__item__generic__title { font-weight: var(--FONT-WEIGHT-BODY-MID); font-size: calc(var(--font-5) * var(--FONT-ADJUST-BODY)); margin-top: 0; margin-bottom: 4px; } .search__item__generic__text p { margin-top: 0; margin-bottom: 4px; } .search__item__generic__text p:last-child { margin-bottom: 0; } .search__item__generic__image { min-width: 70px; } .search__item__generic__image img { max-width: 70px; max-height: 70px; border-radius: var(--RADIUS); } predictive-search[open] .header__search__results { max-height: calc(var(--full-screen) - var(--header-height)); opacity: 1; visibility: visible; } .search__results__wrapper { padding-bottom: 30px; } .search__results__outer--groups { display: flex; gap: var(--gutter); flex-direction: column; } .search__results__products { order: -1; } .search__results__heading { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border); } .search__results__products__list { display: flex; gap: var(--gutter); flex-direction: column; margin: var(--gutter) 0; } .product__inline__link { display: flex; gap: var(--gutter); flex-direction: row; } .product__inline__image { flex: 0 0 70px; } .product__inline__image img { aspect-ratio: var(--aspect-ratio, 1); display: block; width: auto; height: auto; max-width: 70px; max-height: 70px; border-radius: var(--RADIUS); } .search__results__title { font-weight: var(--FONT-WEIGHT-BODY-MID); font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); margin-right: 0.5em; } .product__inline__title { font-weight: var(--FONT-WEIGHT-BODY-MID); font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); margin: 0; } .product__inline__price { margin-top: 5px; margin-bottom: 0; color: var(--text-light); font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); } .other__inline__title a { display: block; } .header__search__results .animates { opacity: 0; } .header__search__results { position: absolute; top: 100%; right: 0; left: 0; max-height: 0; opacity: 0; visibility: hidden; transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0.5s; background: var(--bg); overflow: hidden auto; -webkit-overflow-scrolling: smooth; scrollbar-width: none; -ms-overflow-style: none; } .header__search__results::-webkit-scrollbar { display: none; } .header__search__results .product__inline.animates, .header__search__results .other__inline.animates { animation: fade 0.5s ease-in-out; animation-fill-mode: forwards; } .search__results__btn .icon { width: 1.5em; margin-left: 10px; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } /* Null results */ .search__results__empty { text-align: center; padding-bottom: 10px; } /* A11Y */ .other__inline[aria-selected=true] a, .product__inline[aria-selected=true] a, .search__results__btn[aria-selected=true] { outline: 5px auto var(--primary); } /* ============================================================================ #Search popdown ============================================================================== */ .search-popdown { position: fixed; z-index: 30000; top: 0; right: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; max-height: 100%; 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); pointer-events: none; } .search-popdown.is-visible { opacity: 1; visibility: visible; transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0s; transform: translate3d(0, 0, 0); pointer-events: auto; } .search__predictive__actions { display: flex; justify-content: flex-end; height: 100%; width: 100%; margin: 0; } .search__predictive__actions input { width: 100%; margin: 12px 0 8px 0; border: none; font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); } .search__predictive__actions input:focus, .search__predictive__actions input:active { box-shadow: none; } .search__predictive__button { padding: 0 15px; } .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%; height: var(--header-height); display: flex; justify-content: space-between; align-items: center; } .search__predictive__close { text-align: left; width: 30px; height: 100%; } .search__predictive__close__inner { font-size: 16px; cursor: pointer; padding: 20px 0; height: 100%; display: flex; align-items: center; } .search-bar { width: 100%; margin-bottom: 20px; } .popdown__close__inner { font-size: 16px; cursor: pointer; padding: 20px 0; } /* ================ Drawer Menu ================ */ .drawer__inner { --item-height: 50px; --menu-padding: 40px; overflow: hidden; padding: var(--menu-padding) 0; font-size: 0; } .drawer__inner:before { display: inline-block; width: 0; height: 100%; vertical-align: middle; content: ""; } .drawer__menu { display: inline-block; width: 100%; height: auto; vertical-align: middle; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .sliderule__panel { position: absolute; top: 0; left: 0; overflow: hidden; max-height: calc(100vh - var(--header-height)); width: 100%; height: 100%; padding-bottom: var(--menu-padding); font-size: 0; } .sliderule__panel:before { display: inline-block; width: 0; height: 100%; vertical-align: middle; content: ""; } .sliderule__panel__inner { display: inline-block; width: 100%; height: auto; padding-top:100px; vertical-align: sub; } .sliderule__wrapper--secondary { padding-top: 24px; } .sliderule__wrapper--secondary + .sliderule__wrapper--secondary { padding-top: 0; } .sliderow { z-index: 10; display: block; min-height: var(--item-height); width: 100%; background-color: var(--bg); padding: 0; color: var(--text); font-size: calc(var(--font-6) * var(--FONT-ADJUST-NAV)); text-transform: inherit; text-align: left; letter-spacing: var(--drawer-letter-spacing, 0); } .drawer__menu > .sliderule__wrapper > .sliderow { font-weight: var(--FONT-WEIGHT-BODY-MID); } .drawer__menu > .sliderule__wrapper > .sliderow.sliderow--secondary { font-size: calc(var(--font-3) * var(--FONT-ADJUST-NAV)); font-weight: var(--FONT-WEIGHT-BODY); } .sliderow--secondary { min-height: calc(var(--item-height) - 21px); } .sliderow__back { position: relative; top: 0; z-index: 40; background: var(--bg); } .sliderow__back__wrapper { display: flex; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(5px); flex-flow: row nowrap; justify-content: center; align-items: center; position: relative; min-height: inherit; max-width: 550px; width: 100%; padding: 0 var(--outer); margin: 0 auto; font-weight: var(--FONT-WEIGHT-BODY-MID); } .sliderow__back__wrapper .sliderow__title { justify-content: start; max-width: none; width: 100%; padding: 0 25px; margin: 0; text-align: center; } .sliderow__back__button { position: absolute; top: 0; left: var(--outer); z-index: 5; height: 100%; padding: 0; color: var(--text); } .sliderow__back__button:hover { color: var(--primary); } .sliderow__back__button:hover .sliderule__chevron--left:before { transform: translateX(-5px) rotate(45deg); } .sliderow__title { display: flex; align-items: center; justify-content: flex-start; position: relative; min-height: inherit; max-width: 500px; width: calc(100% - var(--outer) * 2); margin: 0 auto; text-align: left; } .sliderow__title:focus { outline: none; } .sliderow__text { transition: color 0.35s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0.35s cubic-bezier(0.215, 0.61, 0.355, 1); } .sliderow:hover .sliderow__text { color: var(--primary); } .sliderule__chevron--left, .sliderule__chevron--right { display: flex; justify-content: flex-end; align-items: center; align-self: stretch; position: relative; width: 40px; } .sliderule__chevron--left:before, .sliderule__chevron--right:before { content: ""; display: inline-block; width: 9px; height: 9px; border-width: 0 0 2px 2px; border-style: solid; border-color: currentColor; margin: 0 5px; vertical-align: middle; transform: rotate(-135deg); transform-origin: 50% 50%; transition: all 1s; will-change: transform; } /* .sliderule__chevron--left:after, .sliderule__chevron--right:after { content: ""; position: absolute; top: 20%; bottom: 20%; left: 8px; width: 2px; background: var(--bg); } */ .sliderule__chevron--right { margin-left: auto; } .sliderow:hover .sliderule__chevron--right:before { transform: translateX(5px) rotate(-135deg); } .sliderule__chevron--left { justify-content: flex-start; height: 100%; } .sliderule__chevron--left:before { transform: rotate(45deg); } .sliderule__chevron--left:after { left: 32px; } [data-sliderule-pane] [data-animates].is-hidden, [data-sliderule-pane] [data-animates].is-hidden.is-visible, [data-sliderule-pane] [data-animates], .header__drawer.drawer--visible [data-animates="0"].is-hidden, [data-animates="0"] { opacity: 0; transform: translateY(-50%); will-change: transform; transition: opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1); } [data-sliderule-pane] .is-hiding .sliderow.sliderow__back [data-animates], [data-sliderule-pane] [data-animates].is-visible, .header__drawer.drawer--visible [data-animates="0"] { opacity: 1; transform: translateY(0%); } [data-animates][class^=menu__block--] { transform: translateY(0) !important; } [data-animate-item] { transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } [data-sliderule] { z-index: -1; visibility: hidden; opacity: 0; transition: opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0.35s cubic-bezier(0.215, 0.61, 0.355, 1); } [data-sliderule-pane="2"] [data-sliderule].is-visible, [data-sliderule-pane="1"] [data-sliderule="1"].is-visible { z-index: 10; visibility: visible; opacity: 1; } [data-sliderule-pane="0"], [data-sliderule-pane="1"] [data-sliderule="1"].is-visible, [data-sliderule-pane="2"] [data-sliderule="2"].is-visible { overflow: hidden auto; } [data-sliderule-pane="1"] [data-sliderule="1"].is-visible [data-animate-item="1"].sliderow__back, [data-sliderule-pane="2"] [data-sliderule="2"].is-visible [data-animate-item="2"].sliderow__back { position: sticky; } [data-sliderule-pane="0"] [data-animate-item="0"], [data-sliderule-pane="1"] [data-sliderule="1"].is-visible [data-animate-item="1"], [data-sliderule-pane="2"] [data-sliderule="2"].is-visible [data-animate-item="2"] { transform: translateX(0); } [data-sliderule-pane="1"] [data-animate-item="0"], [data-sliderule-pane="2"] [data-animate-item="1"] { transform: translateX(-100%); } @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 { display: grid; gap: var(--gutter) var(--gutter); margin: var(--outer); } .sliderule-grid .hero__title { font-weight: var(--FONT-WEIGHT-HEADING-BOLD); } .sliderule-grid .hero__content { max-width: 100%; padding: 30px; margin: 0; } @media only screen and (max-width: 479px) { .sliderule-grid .hero__content { padding: 20px; } } .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(1, 1fr); } .sliderule-grid.blocks-0 { gap: 0 0; margin: 0; } .sliderule-grid .header__dropdown__image { max-width: 500px; margin: 0 auto; } .header__mobile__hamburger { position: relative; width: 22px; height: 22px; left: 0; padding: 0; cursor: pointer; } .header__mobile__hamburger:hover .hamburger__lines span { background-color: white; } .hamburger__lines { display: block; width: 100%; height: 100%; transition: 0.5s ease-in-out; } .hamburger__lines span { display: block; position: absolute; height: 2px; width: 20px; background: white; opacity: 1; transform: rotate(0deg); transition: 0.25s ease-in-out; border-radius: var(--RADIUS-SM); } .hamburger__lines span:nth-child(1) { top: 3px; } .hamburger__lines span:nth-child(2) { top: 10px; } .hamburger__lines span:nth-child(3) { top: 17px; } .has-drawer-open .hamburger__lines span { background: white; } .has-drawer-open .hamburger__lines span:nth-child(1) { top: 12px; transform: rotate(-135deg); } .has-drawer-open .hamburger__lines span:nth-child(3) { top: 12px; transform: rotate(135deg); } .has-drawer-open .hamburger__lines span:nth-child(2) { opacity: 0; transform: rotate(90deg) scale(0, 1); } .theme__header__toolbar { --text: var(--COLOR-NAV-TOOLBAR-TEXT); background-color: var(--COLOR-NAV-TOOLBAR-BG); color: var(--text); transition: background-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); position: relative; } .theme__header__toolbar .theme__header-inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; } .js__show__mobile .theme__header__toolbar, .header__mobile .theme__header__toolbar { grid-column: 1/span 3; } [data-header-transparent=true]:not(.meganav--visible, .has-drawer-open) .theme__header__toolbar { background-color: rgba(255, 255, 255, 0); } [data-header-transparent=true]:not(.meganav--visible, .has-drawer-open) .theme__header__toolbar .theme__header-inner:after { content: ""; height: 1px; background: var(--text); opacity: 0.2; width: 100%; left: 0; bottom: 0; position: absolute; } .header__mobile .theme__header__toolbar .wrapper--full { padding: 0; } .toolbar__links { display: flex; justify-content: flex-end; align-items: center; margin: 0.8em 0 0.8em auto; } .js__show__mobile .theme__header__toolbar .toolbar__links, .header__mobile .theme__header__toolbar .toolbar__links { display: none; } .tollbar__navlink { margin-left: 16px; } .tollbar__navlink .navtext { font-size: calc(var(--font-2) * var(--FONT-ADJUST-NAV)); } .toolbar__localization { display: flex; justify-content: flex-start; align-items: center; height: 100%; } .toolbar__currency button, .toolbar__locale button { font-size: calc(var(--font-2) * var(--FONT-ADJUST-NAV)); text-transform: none; font-weight: var(--FONT-WEIGHT-BODY); letter-spacing: 0; } .toolbar__localization .toolbar__wrap .popout__toggle { padding-left: 0; text-transform: capitalize; } @keyframes ticker { 0% { transform: translate3d(0, 0, 0); visibility: visible; } 100% { transform: translate3d(-100%, 0, 0); } } .js__show__mobile .toolbar__elements, .header__mobile .toolbar__elements { display: none; } @media only screen and (max-width: 479px) { .theme__header__toolbar .wrapper { padding: 0; } } .theme__header__toolbar__text { overflow: hidden; margin-right: auto; font-size: calc(var(--font-2) * var(--FONT-ADJUST-NAV)); } .theme__header__toolbar__text a { text-decoration: underline; } .theme__header__toolbar__text a:hover { text-decoration: none; } .theme__header__toolbar__text:first-child:last-child, .js__show__mobile .theme__header__toolbar .theme__header__toolbar__text, .header__mobile .theme__header__toolbar .theme__header__toolbar__text { margin: 0; text-align: center; } .theme__header__toolbar__text:first-child:last-child { margin: 0 auto; } .js__show__mobile .theme__header__toolbar .theme__header__toolbar__text, .header__mobile .theme__header__toolbar .theme__header__toolbar__text { width: 100%; white-space: nowrap; margin: 0; } .js__show__mobile .ticker__scale, .header__mobile .ticker__scale { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; } .js__show__mobile .ticker__scale.ticker--animated, .header__mobile .ticker__scale.ticker--animated { justify-content: flex-start; } .js__show__mobile .ticker__scale.ticker--animated > div, .header__mobile .ticker__scale.ticker--animated > div { animation-iteration-count: infinite; animation-timing-function: linear; animation-name: ticker; animation-duration: var(--animation-time); animation-play-state: running; display: inline-block; padding: 0 5px; width: -moz-max-content; width: max-content; will-change: transform, padding, width; } .js__show__mobile .ticker__scale.ticker--animated:hover > div, .header__mobile .ticker__scale.ticker--animated:hover > div { animation-play-state: paused; } .drawer__content { position: fixed; visibility: hidden; z-index: 20050; top: 0; left: 0; height: 100%; width: 75vw; max-width: 580px; 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, visibility 0s linear 1s; display: flex; flex-direction: column; } .drawer--visible .drawer__content { visibility: visible; transform: translate3d(0, 0, 0); transition: transform 0.3s ease; } @media only screen and (max-width: 479px) { .drawer__content { width: 100vw; }, .logo__img{ height: 50px !important }, .header__mobile{ height: 60px !important } } @media only screen and (min-width: 1400px) { .drawer__content { --container-space: max(calc(calc(100vw - var(--LAYOUT-CONTAINER)) / 2), 0px); } .container-layout .drawer__content { min-width: calc(var(--LAYOUT-CONTAINER) / 2); max-width: 50vw; } .container-layout .drawer--visible .drawer__content { left: var(--container-space); margin-left: calc(var(--scrollbar-width) / 2); } .container-layout .drawer--right.drawer--visible .drawer__content { right: var(--container-space); left: unset; margin-right: calc(var(--scrollbar-width) / 2); margin-left: 0; } } .drawer--right .drawer__content { left: initial; right: 0; } .drawer--right:not(.drawer--visible) .drawer__content { transform: translate3d(100%, 0, 0); } .drawer--pop .drawer__content { inset: 0 0 0 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 (min-width: 480px) and (max-width: 767px) { .drawer--pop .drawer__content { max-height: calc(100% - 40px); max-width: calc(100vw - 40px); margin: 20px; } } @media only screen and (max-width: 479px) { .drawer--pop .drawer__content { max-height: 100%; max-width: 100vw; margin: 0; } } .drawer--visible.drawer--pop .drawer__content { opacity: 1; transform: translateY(0) scale(1); } .drawer--pop .upsell__modal { top: 50%; right: 50%; transform: translate(50vw, -50vh); } .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: 4000; 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) { .header__drawer .drawer__underlay, .drawer--right .drawer__underlay { display: none; } } .drawer__inner { position: relative; height: 100%; width: 100%; } .drawer__close .icon-close { width: 18px; height: 18px; } .drawer__content > *:not(.drawer__inner) { opacity: 0; transition: opacity 0.8s ease-out; } .drawer--visible .drawer__content > *:not(.drawer__inner) { opacity: 1; } .product__pickup { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .accordion-neighbor + .accordion-neighbor, .accordion-neighbor + .accordion-neighbor .accordion-row:first-child .accordion-toggle { border-top: 1px solid var(--bg); } .accordion-neighbor + .accordion-neighbor .tabs-wrapper, .accordion-neighbor + .accordion-neighbor.product__pickup, .accordion-neighbor + .accordion-neighbor.product-description, .accordion-neighbor + .accordion-neighbor .accordion-row:first-child .accordion-toggle .tabs-wrapper, .accordion-neighbor + .accordion-neighbor .accordion-row:first-child .accordion-toggle.product__pickup, .accordion-neighbor + .accordion-neighbor .accordion-row:first-child .accordion-toggle.product-description { margin-top: 0; border-top: none; } .accordion-neighbor + .accordion-neighbor.product-description .accordion__wrapper:first-child, .accordion-neighbor + .accordion-neighbor .accordion-row:first-child .accordion-toggle.product-description .accordion__wrapper:first-child { border-top: none; } @media only screen and (max-width: 989px) { .product__details { margin-top: 20px; } } .pickup__preview { margin: 0; } .pickup__preview p { margin: 0; } .pickup__info__text { font-weight: var(--FONT-WEIGHT-BODY-MID); } .pickup__preview--primary { display: flex; align-items: flex-start; } .pickup__button { margin: 0; padding: 0; color: var(--text-dark); } .pickup__info__timing { color: var(--text-dark); } .pickup__list__item .icon { width: 15px; } .pickup__preview .icon { width: 12px; } .pickup__list__item .icon, .pickup__preview .icon { margin: 0 0 0 6px; height: calc(0.875rem * var(--FONT-ADJUST-BODY) * 1.5); } .pickup__list__item .icon-in-stock, .pickup__preview .icon-in-stock { color: var(--COLOR-SUCCESS); } .pickup__list__item .icon-out-of-stock, .pickup__preview .icon-out-of-stock { color: var(--COLOR-ERROR); } .pickup__preview .icon-out-of-stock { width: 10px; margin: -1px 0 0 4px; } .pickup__list__item .icon-out-of-stock { width: 12px; margin: -1px 0 0 4px; } .pickup__list__item .icon-in-stock { margin: -2px 0 0 4px; } @media only screen and (min-width: 768px) { .pickup__drawer { --gutter: 20px; } } .pickup__list__item__info { color: var(--text-light); } .pickup__address { font-style: italic; margin: 8px 0 0 0; padding: 0; color: var(--text-dark); } .pickup__content { overflow-y: auto; } .pickup__header { display: flex; justify-content: space-between; margin: 0; padding: var(--gutter); align-items: center; height: auto; position: sticky; top: 0; background: var(--bg); border-bottom: 1px solid var(--border); } .pickup__header .drawer__button { padding-right: 0; } .pickup__header__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); color: var(--text-dark); font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); } .pickup__header__title p { margin: 0; } .pickup__variant { font-size: calc(var(--font-2) * var(--FONT-ADJUST-BODY)); margin: 12px 0 0 0; } .pickup__variant .text-light { color: var(--text-light); } .pickup__variant .divide { color: var(--border); opacity: 0.5; padding: 0 1px; } .pickup__variant .badge { color: var(--text-dark); margin: 8px 8px 8px 0; } .pickup__product__wrap { border-bottom: 1px solid var(--border); padding: var(--gutter); text-align: left; margin-bottom: var(--gutter); } .pickup__product__title { font-size: calc(var(--font-7) * 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); color: var(--text-dark); margin: 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: 0; margin: 0 var(--gutter); } .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); } /*============================================================================ Gift Cards ==============================================================================*/ /*============================================================================ #Base Styles ==============================================================================*/ .template-giftcard, .template-giftcard body { background: var(--bg); } .template-giftcard a, .template-giftcard body a { text-decoration: none; } .template-giftcard .wrapper { max-width: 588px; } .template-giftcard .wrapper img, .template-giftcard .wrapper object, .template-giftcard .wrapper iframe { max-width: 100%; } .giftcard-header { padding: 60px 0; font-size: 1em; text-align: center; animation: fadein 0.5s ease-in-out both 0.4s; } .shop-url { display: none; } .giftcard { animation: slideup 0.8s ease-in-out; } .giftcard__border { background-color: var(--secondary); border-radius: 4px; border: 1px solid var(--secondary-hover); padding: 1em; animation: container-slide 0.8s ease-in-out; } .giftcard__content { background-color: var(--bg); color: var(--secondary); border: 1px solid var(--secondary-hover); border-radius: var(--RADIUS-SM); animation: cardslide 0.8s ease-in-out; } .giftcard__content:after { content: ""; display: table; clear: both; } .giftcard__header { border-bottom: 1px solid var(--border); padding: 16px; } .giftcard__header:after { content: ""; display: table; clear: both; } .giftcard__title { float: left; margin-bottom: 0; } .giftcard__tag { display: block; float: right; background-color: var(--secondary-hover); border: 1px solid transparent; color: var(--bg); padding: 10px; border-radius: 4px; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1; } .giftcard__tag--active { background: transparent; color: var(--secondary); border: 1px solid var(--secondary); } .giftcard__wrap { position: relative; margin: 16px 16px 32px; } .giftcard__wrap img { position: relative; display: block; border-radius: 10px; z-index: 2; } .giftcard__wrap:before, .giftcard__wrap:after { 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; } .lt-ie9 .giftcard__wrap:before, .lt-ie9 .giftcard__wrap:after { display: none; } .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: baseline; background-color: var(--bg); padding: 0.5em; border-radius: 4px; max-width: 450px; box-shadow: 0 0 0 1px var(--hairline-hover); } .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(--text); padding: 0.4em 0.5em; display: inline-block; vertical-align: baseline; color: var(--text-light); line-height: 1; } .disabled .giftcard__code__text { color: var(--muted); text-decoration: line-through; } .giftcard__amount { position: absolute; top: 0; right: 0; color: var(--bg); font-size: 2.75em; line-height: 1.2; padding: 16px; z-index: 50; } .giftcard__amount strong { display: block; text-shadow: 3px 3px 0 var(--hairline-hover); } .giftcard__amount--medium { font-size: 2em; } .tooltip { display: block; position: absolute; top: -50%; right: 50%; margin-top: 16px; z-index: 3; color: var(--bg); text-align: center; white-space: nowrap; animation: popup 0.5s ease-in-out both 0.7s; } .tooltip:before { content: ""; display: block; position: absolute; 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 var(--text-light); } .tooltip__label { display: block; position: relative; right: -50%; border: none; border-radius: 4px; background: var(--text-light); 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(--text); 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(--secondary); margin-top: -10px; } .action-link:hover, .action-link:focus { color: var(--secondary-hover); } .action-link__print { display: inline-block; 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: 60px 0; animation: fadein 0.5s ease-in-out both 0.4s; } .giftcard__icon { width: 45px; display: inline-block; vertical-align: baseline; } #QrCode img { padding: 32px; border: 1px solid var(--text); border-radius: 4px; margin: 0 auto 32px; } /*============================================================================ #Media Queries ==============================================================================*/ /*================ Medium-down width ================*/ @media screen and (width <= 580px) { .giftcard { font-size: 12px; } .giftcard-header { padding: 32px 0; } .header-logo { font-size: 2em; } .giftcard__border { padding: 16px; } .giftcard__actions { padding: 16px; } .giftcard__actions .btn, .giftcard__actions .shopify-payment-button .shopify-payment-button__button--unbranded, .shopify-payment-button .giftcard__actions .shopify-payment-button__button--unbranded, .giftcard__actions .product__form__outer:not(.product__form--buybutton) .product__submit__add, .product__form__outer:not(.product__form--buybutton) .giftcard__actions .product__submit__add { width: 100%; padding-left: 0; padding-right: 0; } .action-link { display: none; } } /*================ Small width ================*/ @media screen and (width <= 400px) { .giftcard__amount strong { text-shadow: 2px 2px 0 var(--hairline-hover); } .giftcard__wrap:before, .giftcard__wrap:after { 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 (height <= 800px) { .header-logo img { max-height: 90px; } } /*============================================================================ #Print Styles ==============================================================================*/ @media print { @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } html, body { background-color: var(--COLOR-BG); } .giftcard-header { padding: 10px 0; } .giftcard__content, .giftcard__border { border: 0 none; } .giftcard__actions, .giftcard__wrap:before, .giftcard__wrap:after, .tooltip, .add-to-apple-wallet { 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; transform: translateY(2000px) rotate(10deg); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0) rotate(0deg); } } @keyframes popup { 0% { opacity: 0; transform: translateY(30px); } 60% { opacity: 1; transform: translateY(-10px); } 80% { transform: translateY(2px); } 100% { transform: translateY(0); } } @keyframes container-slide { 0% { opacity: 0; transform: rotate(0deg); } 100% { transform: rotate(0deg); } } @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 100; } } /*================ Product Grid Item ================*/ .grid__caption { position: relative; padding: 8px 0; background-color: var(--bg); } @media only screen and (max-width: 767px) { .grid__caption { padding-bottom: 0; } } .name_wrapper { color: var(--text-dark); font-weight: var(--font-normal); margin: 0.18rem 0; } .vendor_wrapper { color: var(--text); margin: 0.18rem 0; font-size: calc(11px * var(--FONT-ADJUST-BODY)); font-weight: var(--FONT-WEIGHT-BODY-MID); text-transform: uppercase; } .price_wrapper { overflow: hidden; color: var(--text-light); font-family: var(--FONT-STACK-ACCENT); font-weight: var(--FONT-WEIGHT-ACCENT); font-style: var(--FONT-STYLE-ACCENT); font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT)); margin: 0.18rem 0; white-space: nowrap; text-overflow: ellipsis; } .grid__cutline { overflow: hidden; color: var(--text); font-size: calc(13px * var(--FONT-ADJUST-BODY)); margin: 0 0 5px 0; white-space: nowrap; text-overflow: ellipsis; } .vendor__link { position: relative; z-index: 20; color: var(--text); } .on-sale { color: var(--primary); } .on-sale .compare-at { margin-top: 15px; text-decoration: line-through !important; color: var(--text-light); } .on-sale s, .on-sale del { color: var(--text-light); margin-left: 5px; } .price_wrapper.on-sale { color: var(--primary); } .price_wrapper.on-sale s { color: var(--text-light); } .price-per-unit { color: var(--text-light); } .product__badge { position: absolute; left: 6px; top: 6px; border-radius: var(--RADIUS-SM); padding: 5px 10px; background: var(--COLOR-BADGE); color: var(--COLOR-BADGE-TEXT); z-index: 400; text-transform: uppercase; letter-spacing: 2px; font-size: calc(10.5px * var(--FONT-ADJUST-BODY)); font-weight: var(--FONT-WEIGHT-BODY-MID); } .product-grid-item { position: relative; display: block; margin-bottom: var(--gutter); } @media only screen and (max-width: 767px) { [data-custom-scrollbar-items] .product-grid-item { margin-bottom: 0; } } .product-grid-item .image__fill { border-radius: var(--RADIUS); } .product-grid-item .background-size-cover { transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1); } .product-grid-item:hover .background-size-cover { transform: scale(1.06); } .product-grid-item--link { position: absolute; inset: 0 0 0 0; width: 100%; height: 100%; z-index: 5; } .product-grid-item__slide { position: absolute; inset: 0 0 0 0; width: 100%; height: 100%; background-size: cover; z-index: 5; } .grid__swatch__container { position: absolute; top: -24px; padding-left: 25px; z-index: 5; width: 100%; left: 0; } /*================ Collection Grid Item ================*/ .section-collection-grid { position: relative; overflow: hidden; } .section-collection-grid__inner { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; } .collection-grid-item { position: relative; overflow: hidden; display: flex; width: 100%; color: var(--text); margin-bottom: var(--gutter); } @media only screen and (max-width: 767px) { .collection-grid-item { margin-bottom: 0; } } .collection-grid-item .image__fill { width: 100%; height: 100%; } .collection-grid-item__content__wrapper { z-index: 100; width: 100%; } .collection-grid-item__content { transition: all 0.15s ease-out; padding: 16px 24px; width: 100%; } @media only screen and (max-width: 767px) { .collection-grid-item__content { padding: 16px 10px; } } .collection-grid-item.flex-row .collection-grid-item__content__wrapper, .collection-grid-item.flex-row-reverse .collection-grid-item__content__wrapper { max-width: 50%; display: flex; align-items: center; } .collection-grid-item__title, .collection-grid-item__title p { padding: 0; margin: 0; } .collection-grid-item__title { position: relative; display: inline-block; color: var(--block-text); } .collection-grid-item__title:after { content: ""; position: absolute; display: block; left: 0; width: 100%; bottom: -1px; height: 2px; background-color: var(--block-text); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } .collection-grid-item:hover .collection-grid-item__title:after, .collection-grid-item:focus .collection-grid-item__title:after { transform: scaleX(1); transform-origin: 0 50%; } .collection-grid-item.flex-column .background-size-cover, .collection-grid-item.flex-column .image__fill { border-top-left-radius: var(--RADIUS); border-top-right-radius: var(--RADIUS); overflow: hidden; } .collection-grid-item.flex-column .collection-grid-item__content__wrapper { border-bottom-left-radius: var(--RADIUS); border-bottom-right-radius: var(--RADIUS); } .collection-grid-item.flex-column-reverse .background-size-cover, .collection-grid-item.flex-column-reverse .image__fill { border-bottom-left-radius: var(--RADIUS); border-bottom-right-radius: var(--RADIUS); overflow: hidden; } .collection-grid-item.flex-column-reverse .collection-grid-item__content__wrapper { border-top-left-radius: var(--RADIUS); border-top-right-radius: var(--RADIUS); } .collection-grid-item.flex-row .background-size-cover, .collection-grid-item.flex-row .image__fill { border-bottom-left-radius: var(--RADIUS); border-top-left-radius: var(--RADIUS); overflow: hidden; } .collection-grid-item.flex-row .collection-grid-item__content__wrapper { border-bottom-right-radius: var(--RADIUS); border-top-right-radius: var(--RADIUS); } .collection-grid-item.flex-row-reverse .background-size-cover, .collection-grid-item.flex-row-reverse .image__fill { border-bottom-right-radius: var(--RADIUS); border-top-right-radius: var(--RADIUS); overflow: hidden; } .collection-grid-item.flex-row-reverse .collection-grid-item__content__wrapper { border-bottom-left-radius: var(--RADIUS); border-top-left-radius: var(--RADIUS); } /*================ Article grid item ================*/ .article__card, .article__card--image { margin-bottom: var(--gutter); } .article__card__image, .article__card__image__wrapper { border-radius: var(--RADIUS); } .article__card__image__wrapper { background-color: var(--bg); z-index: 100; position: relative; overflow: hidden; transition: all 0.25s ease-out; } .no-js .article__card__image__wrapper.lazy-image { display: block; } .article__card__content { position: relative; z-index: 50; padding-top: 5px; background-color: var(--bg); } .article__card__title { display: block; color: var(--text-dark); font-weight: var(--FONT-WEIGHT-BODY-MID); line-height: 1.2; margin-bottom: 0.5em; margin-top: 8px; } .article__card__text { margin-bottom: 5px; } .article__card__meta { font-size: calc(13px * var(--FONT-ADJUST-BODY)); margin-top: 5px; margin-bottom: 0; } .article__card__meta--comments { padding-right: 30px; } .meta--light { color: var(--text-light); } .meta--dark { color: var(--text-light); } .article__card__comments { font-weight: var(--FONT-WEIGHT-BODY-BOLD); position: absolute; right: 20px; bottom: 2px; font-size: calc(13px * var(--FONT-ADJUST-BODY)); color: var(--text-light); } .article__card__comments svg { height: 13px; color: var(--text-light); } .article__card__tags { position: relative; z-index: 700; margin-bottom: 3px; margin-top: 20px; } .article__card__tags > a { max-width: 100%; white-space: normal; } .article__card--image .article__card__tags { margin-top: -15px; margin-left: 20px; } .article__card--image svg { border: none; } /*================ Section Icons ================*/ /*================ Icon column ================*/ .icon__column { padding: calc(var(--inner) * 2) var(--inner); border-radius: var(--RADIUS); background-color: var(--bg-accent); } .icon__column.text-center { text-align: center; } .icon__column.text-center .icon__column__icon { margin-left: auto; margin-right: auto; } .icon__column__icon { overflow: hidden; position: relative; display: flex; align-items: center; justify-content: flex-start; width: 46px; height: 46px; background-size: contain; background-repeat: no-repeat; background-position: center; font-size: 0; } .icon__column__icon:last-child { margin-bottom: 0; } .icon__column__icon--rounded { border-radius: 50%; } .icon__column__icon--bg { margin-bottom: var(--inner); } .icon__column__icon--bg:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--stroke); opacity: 0.25; } .icon__column__icon--bg, .text-center .icon__column__icon { justify-content: center; } .icon--large .icon__column__icon { width: 86px; height: 86px; } .icon--medium .icon__column__icon { width: 66px; height: 66px; } .icon__column__icon svg { width: 40%; height: 40%; } .icon__column__icon svg path, .icon__column__icon svg g, .icon__column__icon svg circle { fill: none !important; stroke: var(--stroke) !important; } .icon__column__icon .image__fill { width: 100%; } .icon--left .icon__column { display: flex; } .icon--left .icon__column__icon { flex: 0 0 auto; margin-left: 20px; margin-right: 20px; } .icon__column__text { color: var(--text-light); } .icon__column__text p:last-child { margin-bottom: 0; } .icon__column__text a { text-decoration: underline; color: var(--secondary); } .icon__column__text a:hover, .icon__column__text a:focus { color: var(--secondary-hover); } .icon__column__heading { color: var(--text); font-family: var(--FONT-STACK-HEADING); font-weight: var(--FONT-WEIGHT-HEADING); font-style: var(--FONT-STYLE-HEADING); font-size: calc(var(--font-4) * var(--FONT-ADJUST-HEADING)); margin: 0; } /*================ Collections ================*/ .collection-contents { margin-top: 30px; } @media only screen and (max-width: 989px) { .collection-contents { margin-top: 0; } } .collection__heading__text { color: var(--text-dark); } .collection__heading__text:last-child { margin-bottom: 0; } .collection__heading { padding-top: var(--gutter); } .filter--active { font-weight: var(--FONT-WEIGHT-BODY-BOLD); } .template-collection .main-content { padding-bottom: 0; } .collection__sort .btn--pill, .collection__sort .link--remove, .collection__sort .link--add:hover, .collection__filter .btn--pill, .collection__filter .link--remove, .collection__filter .link--add:hover { margin: 0 0 10px 0; } .collection__label { font-size: calc(14px * var(--FONT-ADJUST-BODY)); vertical-align: text-bottom; margin-bottom: 6px; } .collection__filter { display: flex; align-items: flex-end; justify-content: space-between; } .filter__title { background-color: var(--bg-accent); padding: 4px 8px; font-weight: var(--FONT-WEIGHT-BODY); font-size: calc(14px * var(--FONT-ADJUST-BODY)); margin-bottom: 20px; } @media only screen and (max-width: 767px) { .filter__title { text-align: center; } } .collection-filters { margin-bottom: 20px; } @media only screen and (max-width: 767px) { .collection-filters { margin-bottom: 10px; } } .collection__description { text-align: center; margin-bottom: 30px; } /* toggle collection sidebar */ @media only screen and (max-width: 767px) { .collection__sort select { font-size: calc(16px * var(--FONT-ADJUST-BODY)); } .collection__sort label { display: none; } } @media only screen and (min-width: 990px) { .collection__filters__toggle { display: none; } } .collection__filters__toggle { font-weight: var(--FONT-WEIGHT-BODY-BOLD); font-size: calc(16px * var(--FONT-ADJUST-BODY)); vertical-align: text-bottom; color: var(--text-light); margin-top: 8px; cursor: pointer; padding-bottom: 6px; border-bottom: 2px solid transparent; } .collection__filters__toggle svg { color: var(--text); height: 10px; width: 10px; margin-top: -2px; transform: rotateZ(0deg); transition: transform 0.15s ease-out; } .collection__filters__toggle.is-active { padding-bottom: 8px; border-bottom: 2px solid var(--primary); } .collection__filters__toggle.is-active svg { transform: rotateZ(45deg); } .link--clear, .link--remove, .link--add, .link--disable { font-size: calc(14px * var(--FONT-ADJUST-BODY)); font-weight: var(--FONT-WEIGHT-BODY-BOLD); margin: -3px 15px 15px -10px; color: var(--text-light); padding: 3px 10px; transition: all 0.15s ease; -moz-user-select: none; -webkit-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; width: auto; text-decoration: none; text-align: center; vertical-align: middle; white-space: nowrap; } .link--remove { margin-left: 0; } .link--remove .tiny-x { line-height: 0; font-size: 24px; margin-left: 5px; } .link--disable { color: var(--muted); text-decoration: line-through; cursor: default; } .link--disable:hover { color: var(--muted); } .link--add { background-color: var(--bg); } .link--add:hover { color: var(--text); } .link--remove { color: var(--text); } .collection-list-item { margin: var(--vertical) 0; } .collection-list-item:first-child { margin-top: 0; } .collection-list-item:last-child { margin-bottom: 0; } .modal__overlay { position: fixed; inset: 0 0 0 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(--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; background: var(--bg); max-width: 95vw; max-height: 90vh; overflow: scroll auto; } @media only screen and (max-width: 767px) { .modal__container--inline { margin-top: 30px; } } .modal__container--xl { padding: 90px; background: var(--bg); max-width: 95vw; max-height: 90vh; overflow: scroll auto; } @media only screen and (max-width: 767px) { .modal__container--xl { padding: 30px; } } .modal__container--video { padding: 90px; width: 100%; max-height: 90vh; overflow: auto 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: 17px; width: 50px; height: 50px; border: 0; border-radius: 100%; background-color: rgba(0, 0, 0, 0); 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: bold; transition: background-color 0.5s ease, color 0.2s ease, opacity 0.2s; } .modal__close:before { content: "✕"; } .modal__close:hover, .modal__close:focus { outline: none; } @media only screen and (max-width: 767px) { .modal__close { width: 25px; height: 25px; top: 5px; right: 2.5vw; text-align: right; } } .modal__content { margin-top: 2rem; margin-bottom: 2rem; line-height: 1.5; color: rgba(0, 0, 0, 0.8); } /************************** \ Demo Animation Style \ **************************/ @keyframes mmfadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes mmslideIn { from { transform: translateY(15%); } to { transform: translateY(0); } } @keyframes mmslideOut { from { 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 { height: 100%; width: 100%; padding: 66px 0 0; overflow: auto; } .zoom--images { width: 100%; } .zoom__img { display: block; padding: 16px; width: 100%; max-width: 80vw; margin: 0 auto; } @media only screen and (max-width: 767px) { .zoom__img { max-width: 100%; } } /*================ Footer ================*/ .footer, .subfooter { background-color: var(--COLOR-FOOTER-BG); color: var(--COLOR-FOOTER-TEXT); } .footer a, .footer .rte a:not([class]), .subfooter a, .subfooter .rte a:not([class]) { color: var(--COLOR-FOOTER-TEXT); } .footer a:hover, .footer .rte a:not([class]):hover, .subfooter a:hover, .subfooter .rte a:not([class]):hover { color: var(--COLOR-FOOTER-TEXT-HOVER); } .footer__logo { position: relative; z-index: 100; display: flex; max-width: var(--logo-max-width, 100%); } .footer__logo img { height: auto; } .footer__logo__text { font-family: var(--FONT-STACK-HEADING); font-weight: var(--FONT-WEIGHT-HEADING); font-style: var(--FONT-STYLE-HEADING); font-size: calc(var(--font-5) * var(--FONT-ADJUST-HEADING)); } .footer__description p { font-size: calc(18px * var(--FONT-ADJUST-BODY)); } @media only screen and (min-width: 768px) { .footer__description p { margin-top: 32px; } } @media only screen and (max-width: 767px) { .footer__description p { margin-top: 10px; } } .footer__nav { list-style-type: none; padding: 0; } .footer__nav:first-child { margin-top: 0; } .footer__nav:last-child { margin-bottom: 0; } .footer__nav li { margin-bottom: 10px; } .footer__nav li:last-child { margin-bottom: 0; } .footer__nav a { color: var(--COLOR-FOOTER-TEXT); } .footer__nav a:hover { color: var(--COLOR-FOOTER-TEXT-HOVER); } @media only screen and (min-width: 768px) { .footer__nav { text-align: right; } } /* Subfooter */ .subfooter .section-padding { position: relative; } .subfooter .section-padding:before { content: ""; position: absolute; top: 0; right: var(--outer); left: var(--outer); height: 1px; background-color: var(--COLOR-FOOTER-A8); } .subfooter__content { justify-content: space-between; display: grid; grid-template-columns: 1fr; gap: 15px; } .subfooter__item { display: flex; align-items: center; flex-wrap: wrap; } .subfooter__icon { margin-top: 5px; margin-bottom: 5px; } .subfooter__icon svg, .subfooter__icon img { display: block; } .subfooter__content--3 .subfooter__item:nth-child(2) { align-self: end; grid-row-end: span 2; } .subfooter__icon--social { margin-right: 14px; } .subfooter__icon--payment { margin-right: 5px; } @media only screen and (min-width: 768px) { .subfooter__content { grid-template-columns: repeat(2, 1fr); } .subfooter__item:nth-child(odd) { justify-content: flex-start; } .subfooter__item:nth-child(even) { justify-content: flex-end; } .subfooter__item:nth-child(even).subfooter__item--follow-on-shop { text-align: right; } } .payment-icon { width: 36px; height: auto; } .divider-bar { color: var(--COLOR-FOOTER-A8); margin: 0 5px; } .form__selectors { display: flex; flex-wrap: wrap; margin-right: -5px; } .form__selectors + .form__selectors { margin-top: 30px; } .selector-wrapper { min-width: 50%; flex-grow: 1; padding-right: 5px; margin-bottom: 20px; } .selector-wrapper.selector-wrapper--fullwidth { min-width: 100%; } .selector-wrapper select { width: 100%; } .selector-wrapper label { color: var(--text-light); font-size: calc(14px * var(--FONT-ADJUST-BODY)); font-weight: var(--FONT-WEIGHT-BODY-MID); position: relative; } /* both radio and swatch */ :root { --OPTION-SIZE-SWATCH: 34px; } .radio__legend { display: block; margin: 0 0 5px; padding: 0; width: 100%; font-weight: var(--FONT-WEIGHT-BODY); font-size: calc(14px * var(--FONT-ADJUST-BODY)); } .radio__legend__label { font-size:var(--font-base); color: var(--color-grey-100); font-weight: var(--font-semibold); margin-right: 3px; padding-right: 8px; line-height: 1; position: relative; } .radio__legend__label:not(.radio__legend__label--alt):after { content: none; position: absolute; top: 20%; right: 0; height: 60%; width: 1px; background-color: var(--border); } .radio__legend__value { color: var(--text-light); } .swatch__button input, .radio__button input { opacity: 0; width: 0; height: 0; margin: 0; display: block; } .radio__fieldset { line-height: 1; } .radio__inputs { display: flex; } .radio__inputs--equal { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(75px, 100%), 1fr)); } /* radio buton */ .radio__button { position: relative; display: inline-block; padding: 0px 2px; } .radio__button:first-of-type { padding-left: 0; } .radio__button label { display: flex; align-items: center; justify-content: center; line-height: 1; margin: 5px 7px 0 0; padding: 20px; border-radius: var(--RADIUS-BTN); border: 1px solid transparent; background-color: var(--bg-accent); color: var(--text); } .radio__button label span { white-space: nowrap; } .radio__button input:checked ~ label { background-color: #01C6B5; color: var(--bg); } .radio__button .unavailable + label, .radio__button .sold-out + label { opacity: 0.5; text-decoration: line-through; } /* swatch button specific */ .swatch__button { --swatch: #CCC; --swatch-offset: 2px; --swatch-inner-offset: 10px; --swatch-border-width: 3px; --swatch-size: var(--OPTION-SIZE-SWATCH); --swatch-inner-size: calc(var(--swatch-size) - var(--swatch-inner-offset)); position: relative; display: inline-block; padding: 10px 10px 0 0; } .swatch__button .image__fill { height: 100%; } .selector-wrapper fieldset label { margin-top: unset; width:60px; height:40px; } .swatch__button label { display: block; position: relative; width: var(--swatch-size); height: var(--swatch-size); margin: 0; border-radius: 100%; background-color: var(--swatch); overflow: hidden; } .swatch__button input:checked ~ label:after { content: ""; position: absolute; top: 50%; left: 50%; width: var(--swatch-inner-size); height: var(--swatch-inner-size); border-radius: 100%; border: var(--swatch-border-width) solid var(--bg); transform: translate(-50%, -50%); } .radio-swatch-image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .swatch__button input:disabled:hover, .swatch__button input:disabled ~ label:hover { cursor: default; } .swatch__button input:disabled ~ label:after { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 100%; border-radius: 0; background: var(--bg); transform: rotate(45deg); } /* = handle white swatch = */ .swatch__button label[data-swatch=white i], .swatch__button .swatch__label[data-swatch=white i], .swatch__button label[style*=ffffff i], .swatch__button .swatch__label[style*=ffffff i] { box-shadow: 0 0 0 1px var(--border); } .swatch__button input:checked ~ label[data-swatch=white i], .swatch__button input:checked ~ label[style*=ffffff i] { box-shadow: none; --swatch: var(--text-light) !important; } .swatch__button input:checked ~ label[data-swatch=white i]:after, .swatch__button input:checked ~ label[style*=ffffff i]:after { --swatch: #EEE; } .swatch__button input.sold-out ~ label:before, .swatch__button input.unavailable ~ label:before { content: ""; position: absolute; top: 0; left: 50%; z-index: 2; width: 2px; height: 100%; border-radius: 0; background: #FFF; margin-left: -1px; transform: rotate(45deg); } .select__fieldset .select__label { font-weight: var(--FONT-WEIGHT-ACCENT-BOLD); color: var(--text); opacity: 0.7; } .selector-wrapper { opacity: 1; transition: opacity 0.4s ease-in-out; } .selector-wrapper.selector-wrapper--placeholder { opacity: 0; } .focus-enabled .radio__button .focus-visible ~ label, .focus-enabled .radio__button .focus-visible:checked ~ label, .focus-enabled .radio__button input:focus ~ label, .focus-enabled .swatch__button .focus-visible ~ label, .focus-enabled .swatch__button .focus-visible:checked ~ label, .focus-enabled .swatch__button input:focus ~ label { outline: 2px solid var(--primary-hover); } .product__subs { border: 1px solid var(--border); border-radius: var(--RADIUS-ROUNDED-ONLY); } .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; } .no-js .product__subs__plans.hide { display: block !important; } .product__subs__option { display: flex; width: 100%; padding: 10px; align-items: center; cursor: pointer; } .product__subs__option 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: 0 0.5rem 0 0; cursor: pointer; } .product__subs__option input[type=radio]:before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 1px solid var(--text-dark); box-sizing: border-box; } .product__subs__option 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-2) * var(--FONT-ADJUST-BODY)); background: var(--hairline); margin: 0; padding: 10px 16px; border-radius: var(--RADIUS-SM); margin-top: 8px; font-style: italic; } .product__price--off { text-transform: uppercase; letter-spacing: 1.5px; font-size: calc(11px * var(--FONT-ADJUST-BODY)); font-family: var(--FONT-STACK-BODY); color: var(--text); font-weight: var(--FONT-WEIGHT-BODY-MID); font-size: calc(12px * var(--FONT-ADJUST-BODY)); font-weight: var(--FONT-WEIGHT-BODY-MID); background: var(--primary-fade); color: var(--primary); padding: 8px 16px; margin: 0 0 0 20px; border-radius: var(--RADIUS-ROUNDED-ONLY); } .product__price--off em { font-style: normal; opacity: 0.5; padding: 0 4px; } .product__subs__wrap { margin-bottom: 30px; } [data-subscription-watch-price] { display: none; } .breadcrumbs { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; padding: 0; margin: 0; color: var(--link); } .breadcrumbs__link, .breadcrumbs__separator { margin-right: 5px; } /*================ Product ================*/ .grid--product { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); -moz-column-gap: var(--gutter); column-gap: var(--gutter); } @media only screen and (min-width: 768px) { .grid--product { margin: 0; } .grid--product .flickity-viewport { overflow: hidden; } } .product__wrapper--thumbnails .grid--product { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:56px; } @media only screen and (min-width: 768px) { .grid__item--product { padding-left: 0; } } @media only screen and (max-width: 767px) { .grid__item--product { grid-column: -1/1; } .product__wrapper--thumbnails .grid--product { gap:0px !important; } } .grid__item--product .custom-scrollbar { margin-bottom: var(--gutter); } .product__title-block--mobile, .product__price-block--desktop { margin-bottom: 8px; } @media only screen and (max-width: 767px) { /* .product__title-block--desktop, .product__price-block--desktop { display: none; } */ } .shop-pay-terms { --payment-terms-background-color: var(--bg); margin: 12px 0 20px 0; } .shop-pay-terms:empty { margin: 0; } .product__block { margin-bottom: var(--block-padding-bottom, 8px); } .product__price-per-unit { margin: 0; color: var(--text-light); } .product__title__wrapper { display: flex; flex-direction:column; gap:16px; justify-content: space-between; align-items: start; } .product__title { line-height: 1.3; text-align: left; } .product__title h3 { margin: 0; } .product__title a { transition: opacity 0.3s; } .product__title a:hover { opacity: 0.6; } .product__title:not([class*=heading-size-]) { font-size: calc(var(--font-7) * var(--FONT-ADJUST-HEADING)); } .product__navigation { font-family: var(--FONT-STACK-BODY); font-weight: var(--FONT-WEIGHT-BODY); font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); margin-bottom: var(--inner); } .product__subheading p { font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); font-weight: var(--FONT-WEIGHT-BODY-MID); margin: 0; } .product__subheading a { transition: opacity 0.65s cubic-bezier(0.215, 0.61, 0.355, 1); } .product__subheading a:hover { opacity: 0.8; } .product__subheading--rte a { text-decoration: underline; } .product__subheading--rte a:hover { text-decoration: none; } .product__cutline { font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); font-weight: var(--FONT-WEIGHT-BODY-MID); margin: 0; } .product__form__wrapper { margin: 0 auto; max-width: 600px; } .is-sticky { position: sticky; top: var(--sticky-top, 0); z-index: 10; } @media only screen and (min-width: 480px) and (max-width: 767px) { .is-sticky { position: static; top: 0; } } .product__price__wrap { display: flex; justify-content: flex-start; align-items: center; } .product__price__main { min-height: 40px; display: inline-flex; align-items: center; } .product__price__left { color: var(--text-light); } .product__price { font-family: var(--FONT-STACK-ACCENT); font-weight: var(--FONT-WEIGHT-ACCENT); font-style: var(--FONT-STYLE-ACCENT); font-size: calc(var(--font-5) * var(--FONT-ADJUST-BODY)); } .product__price--sale { color: var(--primary); } .product__price--strike { color: var(--text-light); } .product__price--unit { font-family: var(--FONT-STACK-ACCENT); font-weight: var(--FONT-WEIGHT-ACCENT); font-style: var(--FONT-STYLE-ACCENT); font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY)); color: var(--text-light); margin-left: 20px; } .product__description { margin-top: 30px; } .product__photo { position: relative; } .icon__play--product svg { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100px; color: var(--bg); } .icon__play--product { position: absolute; inset: 0 0 0 0; opacity: 1; transition: all 0.15s ease; } .icon__play--product:hover { opacity: 0.75; } /*================ Related items ================*/ .product__related .index__collection__title { margin-bottom: 30px; } .product__related.section-collection { padding-bottom: 0; } /* ajax buttons */ [data-add-to-cart] { position: relative; } [data-add-to-cart].loading .btn-state-ready, [data-add-to-cart].has-success .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; } @keyframes animate-svg { 0% { stroke-dashoffset: 88; } 100% { stroke-dashoffset: 0; } } .btn-state-loading circle ~ circle { stroke-dashoffset: 88; animation: animate-svg 1s linear infinite; animation-play-state: paused; } .loading .btn-state-loading { visibility: visible; opacity: 1; } .loading .btn-state-loading circle ~ circle { animation-play-state: running; } .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; } .svg-loader { fill: none; } .svg-loader circle { stroke: var(--bg); } .svg-loader circle ~ circle { stroke: var(--primary); } /*================ Smart Shopify Payment Buttons ================*/ .product__submit__add { display: inline-block; padding: var(--btn-top) var(--btn-left); font-weight: var(--FONT-WEIGHT-BODY-MID); margin: 5px 0; line-height: 1; text-decoration: none; text-align: center; vertical-align: middle; white-space: nowrap; border: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: var(--RADIUS-BTN); height: 56px; margin: 0; padding: 8px 60px; font-size: calc(18px * var(--FONT-ADJUST-BODY)); } .product__submit__add:hover, .product__submit__add:focus { transform: translateY(-1px); } .product__submit__add:active { transform: translateY(1px); } .product__form__outer:not(.product__form--buybutton) .product__submit__add { --btn-bg: var(--primary); --btn-shadow: var(--primary-shadow); --btn-text: var(--primary-opposite); --btn-bg-hover: var(--primary-hover); --btn-text-hover: var(--primary-opposite); min-width: 300px; margin: 0; } @media only screen and (max-width: 479px) { .product__form__outer:not(.product__form--buybutton) .product__submit__add { width: 100%; } } .product__form--buybutton .product__submit__add { --btn-bg: var(--primary-fade); --btn-text: var(--primary); --btn-bg-hover: var(--primary-fade-hover); --btn-text-hover: var(--primary); } .product__submit__quick { min-width: 50%; } .product__form--buybutton .product__submit__buttons { display: flex; padding-top:20px; flex-direction:column; gap:17px; flex-wrap: wrap; justify-content: center; } .product__form--buybutton .product__submit__buttons .shopify-payment-button, .product__form--buybutton .product__submit__buttons .product__submit__add { min-width: 155px; flex: auto; } @media only screen and (max-width: 479px) { .product__form--buybutton .product__submit__buttons { width: 100%; flex-direction: column; } .product__form--buybutton .product__submit__buttons .product__submit__add { margin-right: 0; } .product__form--buybutton .product__submit__buttons .shopify-payment-button, .product__form--buybutton .product__submit__buttons .product__submit__quick { width: 100%; } .product__form--buybutton .product__submit__buttons .shopify-payment-button:not(:first-child), .product__form--buybutton .product__submit__buttons .product__submit__quick:not(:first-child) { margin-top: 10px; } } /* button */ .shopify-payment-button { transition: opacity 0.4s ease-out; } .shopify-payment-button .shopify-payment-button__button { min-height: 56px; height: 56px; border-radius: unset !important; overflow: hidden; transition: all 0.15s ease; } .shopify-payment-button .shopify-payment-button__button--unbranded { background:white !important; border:1px solid var(--color-gray-600) !important; width: 100% !important; min-height: 44px !important; margin: 0 !important; font-size: var(--font-md) !important; color: var(--color-gray-600) !important; font-weight:var( --font-medium) !important; } .shopify-payment-button .shopify-payment-button__button--unbranded:hover, .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:not([disabled]) { color: var(--btn-text-hover); background-color: var(--btn-bg); } .shopify-payment-button .shopify-payment-button__more-options { display: none; font-weight: var(--FONT-WEIGHT-BODY-MID); font-size: calc(14px * var(--FONT-ADJUST-BODY)); color: var(--text-light); } .shopify-payment-button .shopify-payment-button__more-options:active { text-decoration: underline; outline: none; transform: translateY(1px); } .shopify-payment-button .shopify-payment-button__button--branded .shopify-cleanslate button { min-height: 56px !important; } .taxes-included-message--product { font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); color: var(--text-light); font-style: italic; } /* disabled */ .product__submit .product__submit__add[disabled], .product__submit .shopify-payment-button__button--unbranded[disabled] { --btn-bg: var(--hairline); --btn-text: var(--text); --btn-bg-hover: var(--hairline); --btn-text-hover: var(--text); } .product__submit .product__submit__add[disabled]:hover, .product__submit .shopify-payment-button__button--unbranded[disabled]:hover { transform: none; cursor: default; } .variant--soldout .quantity__wrapper, .variant--soldout .shopify-payment-button { opacity: 0; } .variant--soldout .quantity__wrapper label, .variant--soldout .quantity__wrapper input, .variant--soldout .quantity__wrapper button, .variant--soldout .shopify-payment-button label, .variant--soldout .shopify-payment-button input, .variant--soldout .shopify-payment-button button { cursor: default; } .variant--unavailable .quantity__wrapper, .variant--unavailable .shopify-payment-button, .variant--unavailable .product__price { opacity: 0; } .variant--unavailable .quantity__wrapper label, .variant--unavailable .quantity__wrapper input, .variant--unavailable .quantity__wrapper button, .variant--unavailable .shopify-payment-button label, .variant--unavailable .shopify-payment-button input, .variant--unavailable .shopify-payment-button button, .variant--unavailable .product__price label, .variant--unavailable .product__price input, .variant--unavailable .product__price button { cursor: default; } .variant--soldout .shopify-payment-button, .variant--unavailable .shopify-payment-button { opacity: 0; } .product__info__link { cursor: pointer; 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-BODY)); background-color: var(--hairline); color: var(--text); padding: 6px 10px; display: flex; align-items: center; margin: 15px 0 12px; } .product__info__link--inline { display: inline-block; margin: -5px 8px 0 8px; vertical-align: middle; } .product-description:first-child .tabs-wrapper { margin-top: 0; } .product__text-with-icon { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; } .product__text-with-icon .icon__column__icon { --icon-size: 20px; flex: 0 0 var(--icon-size, 20px); width: var(--icon-size); height: var(--icon-size); margin: 4px 0 0; } .product__text-with-icon .icon__column__icon--bg { --icon-padding: 13px; --icon-size-outer: calc(var(--icon-size) + var(--icon-padding) * 2); flex-basis: var(--icon-size-outer); width: var(--icon-size-outer); height: var(--icon-size-outer); padding: var(--icon-padding); margin-top: 0; } .product__text-with-icon img { display: inline-block; width: var(--icon-size); height: var(--icon-size); vertical-align: middle; -o-object-fit: contain; object-fit: contain; } .product__text-with-icon .icon { width: var(--icon-size); height: var(--icon-size); } .product__text-with-icon .icon path, .product__text-with-icon .icon g, .product__text-with-icon .icon circle { fill: none !important; stroke: var(--stroke) !important; } .product__text-with-icon p { align-self: center; font-weight: var(--FONT-WEIGHT-BODY-MID); margin: 0; margin-left: 7px; } .product__text-with-icon .icons-row__item p { margin: 0; align-self: flex-start; } .product__text-with-icon .icons-row__item--center p { align-self: center; } .icons-row { width: 100%; } @media only screen and (min-width: 768px) { .icons-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: var(--inner); } } @media only screen and (max-width: 767px) { .icons-row { display: flex; flex-wrap: wrap; margin-bottom: calc(var(--inner) * -1); } } .icons-row__item { display: flex; flex-direction: column; align-items: flex-start; } @media only screen and (max-width: 767px) { .icons-row__item { flex: 1 1 50%; padding-right: var(--inner); margin-bottom: var(--inner); } } .icons-row__item--center { align-items: center; padding-left: var(--inner); } .product__image { width: 100%; } .product__image--right > div { margin-left: auto; } .product__image--center > div { margin: 0 auto; } .product__tag-wrapper { display: flex; -moz-column-gap: var(--inner); column-gap: var(--inner); flex-wrap: wrap; align-items: flex-start; } .product__tag-text { cursor: default; } .product__tag-text:hover { transform: translateY(0); background-color: var(--btn-bg); } .product__tag-text:after { content: none; } .product__tag-text.btn, .product__form__outer:not(.product__form--buybutton) .product__tag-text.product__submit__add, .shopify-payment-button .product__tag-text.shopify-payment-button__button--unbranded { margin: 0; } .product__tag-text.text-link { --btn-left: 0; } /* Variant Countdown */ /* .product__button__meta { margin-top: 30px; } */ .product__button__meta--packed { display: flex; justify-content: space-between; align-items: center; margin: 0; } .variant__countdown { font-size: calc(15px * var(--FONT-ADJUST-BODY)); padding: 0; margin: 20px 0; } .variant__countdown--in { --dot-color: var(--COLOR-SUCCESS); } .variant__countdown--low { --dot-color: var(--COLOR-WARN); } .variant__countdown--out { --dot-color: var(--COLOR-ERROR); } .variant__countdown--unavailable { --dot-color: var(--COLOR-A50); } .count-is-in .variant__countdown--in, .count-is-low .variant__countdown--low, .count-is-out .variant__countdown--out, .count-is-unavailable .variant__countdown--unavailable { display: block; } .variant__countdown--in, .variant__countdown--low, .variant__countdown--out, .variant__countdown--unavailable { display: none; padding-left: 22px; position: relative; } .variant__countdown--in:after, .variant__countdown--in:before, .variant__countdown--low:after, .variant__countdown--low:before, .variant__countdown--out:after, .variant__countdown--out:before, .variant__countdown--unavailable:after, .variant__countdown--unavailable:before { content: ""; display: block; position: absolute; top: 6px; left: -2px; width: 14px; height: 14px; background-color: var(--dot-color); border-radius: 50%; } .variant__countdown--in:after, .variant__countdown--low:after, .variant__countdown--out:after, .variant__countdown--unavailable:after { opacity: 1; } .variant__countdown--in:before, .variant__countdown--low:before, .variant__countdown--out:before, .variant__countdown--unavailable:before { opacity: 0.2; animation: pulse 2.5s linear; animation-iteration-count: infinite; } @keyframes pulse { 0% { transform: scale(0); opacity: 0; } 69% { transform: scale(0); opacity: 0; } 70% { transform: scale(1); opacity: 0.2; } 100% { transform: scale(5); opacity: 0; } } .upsell__holder { width: 100%; } .product-content div:first-child > .upsell__holder { margin: 0 0 2em; } .product-content div:last-child > .upsell__holder { margin: 2em 0 0; } .complimentary__wrapper.js-unloaded { display: none; } .upsell { overflow: hidden; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; border: 1px solid var(--border); border-radius: var(--RADIUS-ROUNDED-ONLY); text-align: left; } .upsell__image { position: relative; width: 90px; min-height: 90px; margin-left: auto; border-left: 1px solid var(--border); } .upsell__image > a { display: block; width: inherit; height: 100%; transition: opacity 0.3s; } .upsell__image > a:hover { opacity: 0.7; } .upsell__image__inner { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .upsell__content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-start; padding: var(--inner) calc(var(--inner) + 32px) var(--inner) var(--inner); width: calc(100% - 90px); } .upsell__content > a { min-width: 100%; } .upsell__title, .upsell__variant-title, .upsell__price { margin: 0; } .upsell__title { color: var(--text); } .upsell__title, .upsell__price { display: inline; } .upsell__variant-title, .upsell__price .old-price, .upsell__price .unit, .upsell__price br { display: none; } .upsell__price { overflow: hidden; color: var(--text); white-space: nowrap; text-overflow: ellipsis; } .upsell__price .old-price { margin-left: 8px; text-decoration: line-through; } .upsell__price .unit { color: var(--text); } .upsell__btn { position: absolute; top: 50%; right: -29px; width: 58px; height: 58px; border: 1px solid var(--border); border-radius: var(--RADIUS-BTN); background-color: var(--bg); font-size: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transform: translateY(-50%); } .upsell__btn:disabled { opacity: 1; } .upsell__btn.loading .btn-state-ready:before, .upsell__btn.loading .btn-state-ready:after, .upsell__btn.has-success .btn-state-ready:before, .upsell__btn.has-success .btn-state-ready:after { background: transparent; } .upsell__btn .svg-loader { fill: none; } .upsell__btn .svg-loader circle { stroke: var(--bg); } .upsell__btn .svg-loader circle ~ circle { stroke: var(--primary); } .upsell__btn .btn-state-ready:before, .upsell__btn .btn-state-ready:after { content: ""; position: absolute; top: 50%; left: 50%; background-color: var(--text); transform: translate(-50%, -50%); } .upsell__btn .btn-state-ready:before { width: 12px; height: 4px; } .upsell__btn .btn-state-ready:after { width: 4px; height: 12px; } .upsell__out-of-stock { display: block; margin: 0; } .upsell__out-of-stock span { display: block; color: var(--text-light); font-weight: 700; } .upsell__errors { display: none; } .upsell__errors.is-visible { display: block; margin-top: 20px; } .add-action-errors--upsell { display: none; padding: var(--inner); border: 1px solid var(--primary); border-radius: var(--RADIUS-SM); background-color: var(--primary-fade); margin-top: 10px; color: var(--primary); text-align: center; font-weight: 700; } .upsell__modal { visibility: hidden; position: fixed; top: 0; right: 0; z-index: 99999; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; width: 100vw; height: 100vh; padding: var(--gutter); opacity: 0; transition: opacity 0.3s, visibility 0.3s; } .upsell__modal.is-open { visibility: visible; opacity: 1; } @media only screen and (max-width: 767px) { .upsell__modal { padding: 0; align-items: flex-end; } .upsell__modal .upsell__modal__content { transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } .upsell__modal.is-open .upsell__modal__content { transform: translateY(0); } } .upsell__modal__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--muted); } .upsell__modal__content { position: relative; z-index: 2; width: 100%; max-width: 700px; border-radius: 6px; background-color: var(--bg); } @media only screen and (max-width: 767px) { .upsell__modal__content { max-width: none; border-radius: 12px 12px 0 0; bottom: 0; right: 0; left: 0; position: fixed; } .upsell__modal__content .product__price__wrap { margin-bottom: 10px; } .upsell__modal__content .form__selectors { margin-top: 15px; } .upsell__modal__content .product__form__outer:not(.product__form--buybutton) .product__submit__add { min-width: 0; } } @media only screen and (max-width: 767px) { .upsell__modal__content product-form { width: 100%; padding: 0; } } .upsell__modal__content .product__title { font-size: calc(var(--font-6) * var(--FONT-ADJUST-HEADING)); } .upsell__modal__content .product__submit__add { width: 100%; } .upsell__modal__content .selector-wrapper { margin-bottom: calc(var(--gutter) / 2); } .upsell__modal__content .upsell__form { overflow-y: auto; position: relative; max-height: calc(100vh - var(--gutter) * 2); } @media only screen and (max-width: 767px) { .upsell__modal__content .upsell__form { max-height: 80vh; } } .upsell__modal__content .select-popout__list { overflow-y: auto; max-height: 108px; top: auto; bottom: 100%; margin: 0 0 -1px; border: 1px solid var(--border); border-bottom: none; } .upsell__modal__content .product__subs__wrap { margin-top: calc(var(--gutter) / 2); } .upsell__modal__close { position: absolute; z-index: 100; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 100%; background-color: rgba(0, 0, 0, 0); color: var(--text-dark); font-size: 20px; cursor: pointer; font-weight: bold; transition: background-color 0.5s ease, color 0.2s ease; } @media only screen and (max-width: 767px) { .upsell__modal__close { display: none; } } .upsell__modal__close:before { content: "✕"; } .upsell__modal__close:hover, .upsell__modal__close:focus { outline: none; } .upsell__modal__drawer__close { margin: var(--gutter) auto; height: 4px; background: var(--border); border-radius: var(--RADIUS); width: 100px; } .upsell__modal__drawer__close:before { content: ""; position: absolute; width: 100%; height: calc(var(--gutter) * 2 + 4px); top: 0; left: 0; } @media only screen and (min-width: 768px) { .upsell__modal__drawer__close { display: none; } } .upsell-product { display: grid; grid-template-columns: minmax(0, 1fr); } @media only screen and (min-width: 768px) { .upsell-product { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .upsell-product .product__media { padding-right: 0; } .upsell-product .product__media img { z-index: -1; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (max-width: 767px) { .upsell-product .product__media { margin-left: 0; padding-left: 0; } } .upsell-product__info { padding: var(--gutter); } .upsell-product__slideshow .product__media { overflow: hidden; width: 100%; } .upsell-product__slideshow { margin: auto 0; } @media only screen and (max-width: 767px) { .upsell-product__slideshow { padding: 0 var(--gutter); } } .upsell-product__slideshow:after { content: "flickity"; display: none; } /*================ Siblings - PDP ================*/ .product__page__siblings { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; } .siblings__link { margin-top: 6px; } .siblings__link--current .sibling__image:after { content: ""; position: absolute; top: 0; left: 0; width: 50px; height: 50px; min-width: 50px; border-radius: 100%; border: 3px solid var(--text); z-index: 10; } .siblings__link--current .sibling__image:before { content: ""; position: absolute; top: 3px; left: 3px; width: 44px; height: 44px; min-width: 44px; border-radius: 100%; border: 3px solid var(--bg); z-index: 10; } .siblings__swatch { overflow: hidden; margin-right: 10px; margin-bottom: 10px; } .siblings__link:last-child .siblings__swatch { margin-right: 0; } .sibling__image { display: block; position: relative; width: 50px; height: 50px; min-width: 50px; } .sibling__image .background-size-cover, .sibling__image .image__fill { overflow: hidden; border-radius: 100%; } /* ============================================================================ #Quantity Selectors ============================================================================== */ .quantity__wrapper { position: relative; display: flex; align-items: center; margin-bottom: 1em; max-width: 120px; min-width: 95px; overflow: visible; backface-visibility: hidden; } .quantity__input { display: block; background: none; text-align: center; color: var(--text-dark); border: 1px solid var(--color-gray-700); width: 100%; padding: 5px 30px; height: 47px; margin: 0 !important; font-family: var(--FONT-STACK-ACCENT); font-weight: var(--FONT-WEIGHT-ACCENT); font-style: var(--FONT-STYLE-ACCENT); } .quantity__button { cursor: pointer; position: absolute; display: flex; justify-content: center; align-items: center; padding: 0 12px; top: 0; bottom: 0; border: 0 none; background: none; text-align: center; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; transition: all 0.2s ease-out; color: var(--text-light); } .quantity__button:hover, .quantity__button:focus { color: var(--primary); outline: none; } .quantity__button:active { color: var(--primary-hover); transform: translateY(1px); outline: none; } .quantity__button--plus { right: 0; } .quantity__button--minus { left: 0; } html.no-js .quantity__button { display: none; } /* ============================================================================ #Tabs ============================================================================== */ .tabs-wrapper { overflow: hidden; position: relative; } .tabs__head { position: relative; z-index: 2; overflow: hidden; } .tabs__head .tabs { padding-bottom: 30px; margin-bottom: -30px; } .tabs__head .tabs__arrow:before { display: block; } .tabs__head.tabs__head--line .tabs { padding-bottom: 5px; margin-bottom: 0; } .tabs__head.tabs__head--line:after { content: ""; position: absolute; bottom: 5px; left: 0; width: 100%; height: 3px; background: var(--hairline); } .tabs__arrow { position: absolute; top: 50%; display: block; width: 26px; height: 26px; max-height: none; margin-top: -17px; border-radius: 0; background-color: var(--bg); box-shadow: none; transition: all 0.2s; } .tabs__arrow:before { position: absolute; top: 50%; left: 0; display: none; width: 100%; height: 200%; transform: translateY(-50%); background-color: var(--bg); content: ""; } .tabs__arrow.tabs__arrow--alt { z-index: 10; margin-top: -15px; background: none; } .tabs__arrow.tabs__arrow--alt:before { height: 42px; } .tabs__arrow.tabs__arrow--alt.tabs__arrow--next:before { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--bg) 40%); } .tabs__arrow.tabs__arrow--alt.tabs__arrow--prev:before { background: linear-gradient(to left, var(--bg) 40%, rgba(255, 255, 255, 0) 100%); } .tabs__arrow:after { content: ""; display: inline-block; width: 8px; height: 8px; border-width: 0 0 2px 2px; border-style: solid; border-color: currentColor; margin: -4px 0 0; vertical-align: middle; transform: rotate(-135deg); transform-origin: 50% 50%; transition: all 0.4s; } .tabs__arrow--prev { left: 0; transform: scale(-1, 1); } .tabs__arrow--next { right: 0; } .tabs { display: block; overflow-x: auto; white-space: nowrap; margin: 0 0 0 0; padding: 0; list-style: none; position: relative; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar { width: 0; height: 0; } .tabs--center { text-align: center; } .tab-link { position: relative; 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; transition: color 0.25s linear; } .tab-link.tab-link--alt { font-weight: var(--FONT-WEIGHT-BODY-MID); position: relative; z-index: 2; } .tab-link.tab-link--alt:after { content: ""; margin: auto; width: 100%; height: 3px; position: absolute; bottom: -3px; left: 0; background: var(--primary); box-shadow: 0 1px 3px var(--primary-shadow), 0 1px 2px var(--primary-shadow); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } .tab-link.current { border-bottom-color: var(--border); color: var(--text-dark); } .tab-link:hover { color: var(--text-dark); } .tab-link.tab-link--alt.current:after, .tab-link.tab-link--alt.current:hover:after { transform: scaleX(1); transform-origin: 0 50%; } .tab-link .icon { display: inline-block; width: 20px; height: 20px; margin-right: 7px; vertical-align: middle; } .tab-link .icon path, .tab-link .icon g, .tab-link .icon circle { fill: none !important; stroke: currentcolor !important; } .tabs--center > .tab-link { margin: 0 15px; } .tabs--pill > .tab-link { 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); color: var(--text); border: none; padding: 6px 16px; border-radius: 100px; margin: 0; } .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 0 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 a:not([class]) { text-decoration: underline; } .tab-content a:not([class]):hover { text-decoration: none; } .tab-content.current { visibility: visible; position: static; opacity: 1; display: inherit; } /* Product Tabs */ .product-tabs { max-width: 100%; } .product-tabs .tabs { padding-bottom: 32px; margin-bottom: -32px; } @media only screen and (max-width: 989px) { .product-tabs .tabs { padding-right: 16px; margin-right: -16px; } } .product-tabs .tabs::-webkit-scrollbar { -webkit-appearance: none; appearance: none; width: 0; height: 0; } .product-tabs .tab-link { 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); padding-bottom: 0; border-bottom-width: 1px; white-space: normal; } .product-tabs .tab-link:last-child { margin-right: 0; } .product-tabs .tab-link.current { border-bottom-color: currentcolor; } .rte .product-tabs a:not([class]), .product-tabs .rte a:not([class]) { text-decoration: underline; } .rte .product-tabs a:not([class]):hover, .product-tabs .rte a:not([class]):hover { text-decoration: none; } .rte .product-tabs a:not([class]):after, .product-tabs .rte a:not([class]):after { display: none; } .product-tabs__head { padding-bottom: 16px; margin-bottom: -13px; } /* Tabs Collections */ .tabs-collections .tabs, .tabs-collections .tabs-collections__head { 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 .tabs { display: block; overflow-x: auto; white-space: nowrap; padding-bottom: calc(var(--gutter) * 3); margin-bottom: calc(var(--gutter) * -1); } .tabs-collections .tabs::-webkit-scrollbar { -webkit-appearance: none; appearance: none; width: 0; height: 0; } .tabs-collections .tab-link { padding: 5px; } .tabs-collections .tab-content { padding: 0; min-height: 0; } /* ================ 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 { font-size: calc(var(--font-5) * var(--FONT-ADJUST-BODY)); font-weight: var(--FONT-WEIGHT-BODY-MID); 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:after { content: ""; position: absolute; top: 50%; right: 5px; content: ""; display: inline-block; width: 8px; height: 8px; border-width: 0 0 2px 2px; border-style: solid; border-color: var(--text-dark); 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__title .icon { width: 20px; height: 20px; margin-right: 7px; vertical-align: middle; } .accordion__title .icon path, .accordion__title .icon g, .accordion__title .icon circle { fill: none !important; stroke: currentcolor !important; } .accordion__body { display: none; overflow: hidden; padding-bottom: 2rem; } .accordion__body p:first-of-type, .accordion__body h3:first-of-type, .accordion__body h4:first-of-type, .accordion__body h5:first-of-type, .accordion__body h6:first-of-type { margin-top: 0; } .no-js .accordion__body { display: block; } .section-faq .accordion__title { font-weight: var(--FONT-WEIGHT-BODY-MID); } .accordion__heading.font--2 { font-size: calc(var(--font-5) * var(--FONT-ADJUST-HEADING)); } .accordion__heading.font--3 { font-size: calc(var(--font-6) * var(--FONT-ADJUST-HEADING)); } .accordion__heading.font--4 { font-size: calc(var(--font-7) * var(--FONT-ADJUST-HEADING)); } .accordion__heading.font--5 { font-size: calc(var(--font-8) * var(--FONT-ADJUST-HEADING)); } .accordion__heading.font--6 { font-size: calc(var(--font-9) * var(--FONT-ADJUST-HEADING)); } .accordion__title.font--2 { font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); } .accordion__title.font--3 { font-size: calc(var(--font-5) * var(--FONT-ADJUST-BODY)); } .accordion__title.font--4 { font-size: calc(var(--font-6) * var(--FONT-ADJUST-BODY)); } .accordion__title.font--5 { font-size: calc(var(--font-7) * var(--FONT-ADJUST-BODY)); } .accordion__title.font--6 { font-size: calc(var(--font-8) * var(--FONT-ADJUST-BODY)); } .accordion__body.font--2 p { font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); } .accordion__body.font--3 p { font-size: calc(var(--font-5) * var(--FONT-ADJUST-BODY)); } .accordion__body.font--4 p { font-size: calc(var(--font-6) * var(--FONT-ADJUST-BODY)); } .accordion__body.font--5 p { font-size: calc(var(--font-7) * var(--FONT-ADJUST-BODY)); } .accordion__body.font--6 p { font-size: calc(var(--font-8) * var(--FONT-ADJUST-BODY)); } /* ================ Cart drawer accordions ================ */ .drawer__accordion { display: block; width: 100%; border: 1px solid var(--border); background: var(--bg); } .drawer__accordion .accordion__title { padding: 1rem var(--gutter); width: 100%; background-color: transparent; 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-4) * var(--FONT-ADJUST-BODY)); text-transform: unset; letter-spacing: unset; } .drawer__accordion .accordion__title:after { content: ""; display: inline-block; width: 8px; height: 8px; border-width: 0 0 1px 1px; border-style: solid; border-color: var(--text); 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: none; } .drawer__accordion:first-of-type { border-top-right-radius: 3px; border-top-left-radius: 3px; } .drawer__accordion:last-of-type { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } .drawer__notes__input { margin-top: 10px; border-radius: var(--RADIUS-SM); } /* ================ Product accordions ================ */ .product-accordion .accordion__title { font-size: 100%; } .product-accordion .accordion__title:after { content: ""; display: inline-block; width: 8px; height: 8px; border-width: 0 0 1px 1px; border-style: solid; border-color: var(--text); margin: -4px 0 0; vertical-align: middle; transform: rotate(-135deg); transform-origin: 50% 50%; transition: all 0.4s; } .product-accordion .accordion-is-open:after { transform: rotate(-45deg); } .product-accordion .accordion__body p:first-child { margin-top: 0; } /* ================ Page accordions ================ */ .page-accordion { padding-bottom: var(--line); } .page-accordion .accordion__title { padding: 0.8em 30px 0.8em 0; } .accordion__heading { margin-bottom: 0.8em; } /* ================ Accordions with images ================ */ .accordion__container:after { display: none; content: none; } .accordion__container .accordion__column:not(:last-child) { margin-bottom: var(--gutter); } .accordion__container .accordion__images { position: relative; display: grid; grid-template-columns: 1fr; align-items: start; height: 100%; } .accordion__container .accordion__image { grid-row-start: 1; grid-column-start: 1; width: 100%; opacity: 0; transition: opacity 0.3s, visibility 0.3s; } .has-sticky-header .accordion__container .accordion__image.use_screen_full { height: calc(var(--full-screen) - var(--header-height)); } .accordion__container .accordion__image .image__fill { overflow: hidden; border-radius: var(--RADIUS-XL); } .accordion__container .accordion__image:not(.use_image) .image__fill { height: 100%; padding-top: 0 !important; } .accordion__container .accordion__image.is-expanded { opacity: 1; visibility: visible; } @media only screen and (min-width: 768px) { .accordion__container--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--gutter); } } @media only screen and (min-width: 768px) { .accordion__container--grid .accordion__image { position: sticky; top: 0; } .has-sticky-header .accordion__container--grid .accordion__image { top: var(--header-height); } } @media only screen and (min-width: 768px) { .accordion__container--grid .page-accordion { padding-bottom: 0; } } @media only screen and (min-width: 768px) { .accordion__container--grid .accordion__column:not(:last-child) { margin-bottom: 0; } } /*================ Pagination ================*/ .pagination { text-align: center; } .pagination .page { margin: 5px; padding: 0 7px; position: relative; } .pagination .page:after { content: ""; height: 2px; position: absolute; bottom: 0; left: 4px; right: 4px; opacity: 0; background: var(--primary); transition: all 0.3s ease-out; box-shadow: 0 1px 3px var(--primary-shadow), 0 1px 2px var(--primary-shadow); } .pagination .page:hover:after, .pagination .page.current:after { bottom: -4px; opacity: 1; } .pagination .page, .pagination .page a, .pagination .page a:hover { color: var(--text-dark); } .pagination .next, .pagination .prev { display: none; } /*================ Social ================*/ .social-sharing { display: flex; align-items: stretch; color: #FFF; border-radius: var(--RADIUS-SM); overflow: hidden; } .product-content .social-sharing { margin: var(--gutter) 0; } .product-content div:first-child > .social-sharing { margin-top: 0; } .product-content div:last-child > .social-sharing { margin-bottom: 0; } .share { flex-grow: 1; text-align: center; color: #FFF; padding: 12px 0 8px 0; text-transform: uppercase; font-weight: var(--FONT-WEIGHT-BODY-BOLD); letter-spacing: 6px; font-size: calc(10px * var(--FONT-ADJUST-BODY)); transition: background-color 0.25s ease-in; } .share svg { transition: transform 0.25s ease-out; display: block; margin: 0 auto 6px auto; } .share:hover svg { transform: translateY(-2px); } .share:hover, .share:active, .share:focus { color: #FFF; } .share--pinterest, .share--twitter, .share--facebook { background-color: var(--bg-accent); color: var(--text); } .share--pinterest:hover, .share--pinterest:active, .share--pinterest:focus { background-color: #BD081C; color: #FFF; } .share--facebook:hover, .share--facebook:active, .share--facebook:focus { background-color: #3B5998; color: #FFF; } .share--twitter:hover, .share--twitter:active, .share--twitter:focus { background-color: #1DA1F2; color: #FFF; } /*================ Blog ================*/ .blog__rss { display: inline-block; position: relative; top: -5px; right: -20px; color: var(--text-light); } .section__blog__grid { margin-top: 10px; } @media only screen and (max-width: 767px) { .section__blog__grid { padding-bottom: 25px; } } .section__blog__grid .article__card { margin-bottom: 0; } /*================ Article ================*/ .article__body { margin-bottom: 50px; } .article__title { color: var(--text-dark); font-size: calc(var(--font-10) * var(--FONT-ADJUST-HEADING)); line-height: 1.2; margin-bottom: 10px; margin-top: var(--gutter); } @media only screen and (max-width: 479px) { .article__title { font-size: calc(var(--font-8) * var(--FONT-ADJUST-HEADING)); } } .article__meta { font-size: calc(13px * var(--FONT-ADJUST-BODY)); font-weight: var(--FONT-WEIGHT-BODY-MID); margin-top: 6px; margin-bottom: var(--gutter); } .rte--article { font-size: calc(17px * var(--FONT-ADJUST-BODY)); } .blog__sidebar__item { margin-bottom: 50px; } .article__tags { margin: 25px 0 40px 0; } .article__sidebar__tags .vertical-nav { margin-bottom: 45px; } .article__arrows { display: flex; justify-content: space-between; align-items: center; margin: 30px 0; } .article__arrows a { padding: 9px 12px 9px 12px !important; } .comments__title { margin-top: 60px; color: var(--text-dark); } .article__comments__wrapper { margin-bottom: 60px; } .article__comment { margin-top: 30px; padding-bottom: 30px; border-bottom: 2px solid var(--bg-accent); } .article__comment .rte { color: var(--text-dark); } .comment__meta { margin-top: 5px; font-weight: var(--FONT-WEIGHT-BODY-BOLD); margin-bottom: 15px; } .comment-count { margin-left: 10px; font-size: calc(14px * var(--FONT-ADJUST-BODY)); background-color: var(--bg-accent); padding: 3px 9px; border-radius: 300px; } .article__form__wrapper { margin-top: 30px; } @media only screen and (max-width: 989px) { .article__form__wrapper { margin: 30px 0 60px 0; } } .article__image__feature { border-radius: var(--RADIUS); overflow: hidden; } .article__card--small { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.06); position: relative; border-radius: var(--RADIUS); overflow: hidden; display: flex; align-items: center; justify-content: flex-start; text-align: left; min-height: 120px; margin-bottom: 30px; transition: all 0.3s ease-out; } .article__card--small .meta--light { font-size: calc(14px * var(--FONT-ADJUST-BODY)); } .article__card--small:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06); } .article__card--small:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); } .article__card__image__wrapper--small { font-weight: var(--FONT-WEIGHT-BODY-MID); width: 33%; } .article__card__image__wrapper--small img { display: block; } .article__card__contents--small { padding: 10px 10px 10px 5%; flex: 1; } .article__card__title--small { font-weight: var(--FONT-WEIGHT-BODY-MID); margin: 0; } .article__card__image--small { display: block; background-size: cover; background-position: center center; width: 33%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 1; } .article__body .share__button { margin-top: 20px; } .article__body .share-button__fallback { margin-top: 10px; } /*================ Inline Nav ================*/ .inline-nav { list-style: none; list-style-type: none; padding: 0; margin: 0 -20px 30px -20px; } @media only screen and (max-width: 479px) { .inline-nav { text-align: left; margin-left: 0; margin-right: -15px; } } .inline-nav li { display: inline-block; padding: 5px 0; margin: 5px 20px; } @media only screen and (max-width: 479px) { .inline-nav li { margin: 5px 15px 5px 0; } } .inline-nav li a { font-weight: var(--FONT-WEIGHT-BODY-MID); color: var(--text-light); transition: color 0.25s linear; position: relative; } .inline-nav li a:after { content: ""; margin: auto; width: 100%; height: 2px; position: absolute; bottom: -4px; left: 0; background: var(--primary); box-shadow: 0 1px 3px var(--primary-shadow), 0 1px 2px var(--primary-shadow); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } .inline-nav li.inline-nav--active a, .inline-nav li a:hover { color: var(--text-dark); } .inline-nav li.inline-nav--active a:after, .inline-nav li a:hover:after { transform: scaleX(1); transform-origin: 0 50%; } .inline-nav--center { text-align: center; } .vertical-nav { padding: 0; list-style-type: none; } .vertical-nav li { border-left: 2px solid var(--bg-accent); margin: 0; padding: 0; } .vertical-nav li:not(:last-child) { padding-bottom: 10px; } .vertical-nav a { display: block; font-weight: var(--FONT-WEIGHT-BODY-MID); color: var(--text-light); padding-left: 15px; margin-left: -2px; border-left: 2px solid transparent; transition: border-left 0.3s linear; } .vertical-nav li a:hover, .vertical-nav .vertical-nav--active a { color: var(--text-dark); border-left: 2px solid var(--primary); cursor: pointer; } /*================ Timeline ================*/ .timeline__wrapper { position: relative; border-left: 2px solid var(--bg-accent); margin-left: 50px; } @media only screen and (max-width: 767px) { .timeline__wrapper { margin-left: 25px; } } .timeline__wrapper:after { content: ""; background: var(--bg-accent); width: 10px; height: 10px; border-radius: 109px; position: absolute; overflow: hidden; bottom: 0; left: -6px; } .timeline__block { position: relative; padding-left: 80px; } .timeline__block:not(:last-child) { margin-bottom: 60px; } @media only screen and (max-width: 767px) { .timeline__block { padding-left: 40px; } } .timeline__image__wrapper { position: absolute; left: -47px; width: 90px; height: 90px; border-radius: 90px; display: inline-block; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.06); } @media only screen and (max-width: 767px) { .timeline__image__wrapper { width: 50px; height: 50px; border-radius: 50px; left: -26px; } .timeline__image__wrapper .background-size-cover { border-radius: 50px; } } .timeline__placemark { position: absolute; left: -11px; top: 19px; width: 20px; height: 20px; border-radius: 20px; background: var(--primary); box-shadow: 0 4px 6px var(--primary-shadow), 0 1px 3px var(--primary-shadow); } .timeline__date { color: var(--text-light); margin-bottom: 0; } .timeline__title { margin: 5px 0; } .timeline__story p { margin: 5px 0; } .timeline__block:last-child .timeline__story p { margin-bottom: 0; } .zoom__link { position: absolute; inset: 0 0 0 0; z-index: 1000; cursor: zoom-in; } .cursor--zoom { cursor: zoom-in; } /*================ Accounts ================*/ .full__page__form__wrapper { padding-top: 120px; padding-bottom: 120px; } .full__page__form { padding: var(--vertical) var(--outer); } @media only screen and (max-width: 479px) { .full__page__form { padding: 0; } } .no-js .template-addresses .hide, .no-js [data-recover-password] { display: block !important; } .dot-spacer { color: var(--border); padding: 0 10px; } .form--additional { text-align: center; margin-top: 30px; } .form--additional .border-bottom-link { border-bottom: transparent; } .order__item__subscription { margin-top: 10px; margin-bottom: 0; } @media only screen and (max-width: 767px) { .account__sidebar__title { padding-top: 32px; } } .account-header { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 0; margin-bottom: 0; } .account-header h1 { margin-bottom: 0; } .account-header button, .account-header .btn, .account-header .product__form__outer:not(.product__form--buybutton) .product__submit__add, .product__form__outer:not(.product__form--buybutton) .account-header .product__submit__add, .account-header .shopify-payment-button .shopify-payment-button__button--unbranded, .shopify-payment-button .account-header .shopify-payment-button__button--unbranded { margin-bottom: 10px; } .account__return { margin: 20px 0; } .back-arrow { content: ""; display: inline-block; width: 8px; height: 8px; border-width: 0 0 2px 2px; border-style: solid; border-color: var(--text); margin: -3px 0 0; vertical-align: middle; transform: rotate(45deg); transform-origin: 50% 50%; transition: all 0.4s; } .order__item--original { color: var(--muted); text-decoration: line-through; } .table--orders tbody tr { border-bottom: 1px solid var(--border-light); } @media only screen and (max-width: 479px) { .table--orders tbody tr { border-bottom: none; } } .table--orders tfoot tr:first-child td { padding-top: 22px; } .table--orders tfoot td { padding-top: 3px; padding-bottom: 3px; } @media only screen and (max-width: 479px) { .column__blank { display: none !important; } } .order__icon--tags svg { width: 0.9em; height: 0.9em; position: relative; } .order__icon--tags svg path { stroke: var(--dull) !important; fill: none !important; } .order__discount__title { font-size: calc(13px * var(--FONT-ADJUST-BODY)); } /*================ decos ================*/ .decos__wrapper { position: relative; } .decos { position: absolute; z-index: 300; } .decos--down { left: -56px; top: -34px; } .animated-deco { width: 2px; height: 2px; margin-right: 12px; margin-top: 12px; background-color: var(--secondary); border-radius: var(--RADIUS-SM); display: block; float: left; } .deco-10, .deco-19, .deco-28, .deco-37 { clear: both; } .section-collection .decos__wrapper, .section-collection-grid .decos__wrapper { left: -134px; top: -7px; } @media only screen and (max-width: 1399px) { .section-collection .decos__wrapper, .section-collection-grid .decos__wrapper { left: auto; right: -90%; top: -10px; } } @media only screen and (min-width: 768px) { .section-collection .decos__wrapper, .section-collection-grid .decos__wrapper { display: none; } } /* prevent deco-text collision */ @media only screen and (max-width: 1399px) { .decoration-modern .index__collection__title, .decoration-modern .index__collection__subtitle { padding-right: 10%; } } @keyframes decos { 0% { transform: scale(1); } 85% { transform: scale(1); } 90% { transform: scale(2); } 98% { transform: scale(1); } } .decos--down .animated-deco, .decos--right .animated-deco { animation: decos 5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite normal none running; } .decos--down .row-1 { animation-delay: 0ms; } .decos--down .row-2 { animation-delay: 100ms; } .decos--down .row-3 { animation-delay: 200ms; } .decos--down .row-4 { animation-delay: 300ms; } .decos--right .column-1 { animation-delay: 0ms; } .decos--right .column-2 { animation-delay: 100ms; } .decos--right .column-3 { animation-delay: 200ms; } .decos--right .column-4 { animation-delay: 300ms; } .decos--right .column-5 { animation-delay: 400ms; } .decos--right .column-6 { animation-delay: 500ms; } .decos--right .column-7 { animation-delay: 600ms; } .decos--right .column-8 { animation-delay: 700ms; } .decos--right .column-9 { animation-delay: 800ms; } /* ================ Decoration ================ */ .decoration-modern .title-decoration { height: 28px; } .container-layout .decoration-modern .title-decoration:after { width: 20%; } .decoration-modern .title-decoration:after { content: ""; height: 50px; background: var(--bg-accent); right: 80%; position: absolute; overflow: hidden; z-index: 0; opacity: 0.5; width: 100%; } .decoration-modern .palette--light.bg--accent .title-decoration:after { background-color: var(--COLOR-A5); } .decoration-modern .palette--dark.bg--invert--accent .title-decoration:after { background-color: var(--COLOR-A5); } .decoration-modern .adjust--white .title-decoration { margin-top: 0; } .decoration-modern .title--decorated { position: relative; z-index: 100; clear: both; } .decoration-modern .main-content .title--decorated { margin-bottom: var(--inner); } .decoration-modern .section-page .title-decoration, .decoration-modern.template-page .grid__item .title-decoration { margin-top: 0; } .decoration-modern .main-content .shopify-section:first-child .decos__wrapper { margin-top: 32px; } .subtitle--decorated { font-size: calc(18px * var(--FONT-ADJUST-BODY)); color: var(--text-light); } .subtitle--decorated p { margin-top: 0; } .subtitle--decorated p:last-child { margin-bottom: 0; } .subtitle--decorated a { text-decoration: underline; } .subtitle--decorated a:hover { color: var(--secondary-hover); } .title--decorated { margin-bottom: 0; } .title--decorated:last-child, .subtitle--decorated:last-child { margin-bottom: 30px; } h1.title--decorated + .subtitle--decorated { margin-top: 10px; } @media only screen and (min-width: 1400px) { html:not(.container-layout) .decoration-modern .title-decoration:after { right: 60%; } } @media only screen and (max-width: 767px) { html:not(.container-layout) .decoration-modern .title-decoration:after { right: 60%; } } @media only screen and (max-width: 767px) { .container-layout .decoration-modern .title-decoration:after { right: 60%; width: 40%; } } /* ================ Index collection ================ */ .section-collection .wrapper, .section-collection-grid .wrapper { position: relative; } .section-collection__foreground { position: relative; z-index: 100; } @media only screen and (max-width: 767px) { .section-collection__foreground { position: initial; } } /*================ Tables ================*/ table { width: 100%; border-collapse: collapse; border-spacing: 0; } table.full { width: 100%; margin-bottom: 1em; } .table-wrap { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } th { font-weight: var(--font-semibold); font-size: var(--font-base); color: var(--color-dark); } th, td { font-weight: var(--font-semibold); font-size: var(--font-base); color: var(--color-dark); text-align: left; padding: 16px; } dt { font-weight: var(--FONT-WEIGHT-BODY-BOLD); color: var(--text-light); } dd { font-weight: var(--FONT-WEIGHT-BODY); color: var(--text-dark); margin-left: 0; } @media (max-width: 639.98px) { th { font-size: var(--font-sm) !important; line-height: 100%; } th, td { padding: 7px; font-size: var(--font-sm) !important; line-height: 100%; } } /*================ Team ================*/ .team__card { max-width: 400px; margin: 0 auto; } .team__blocks { margin-top: 0; } @media only screen and (max-width: 767px) { .team__blocks { padding-bottom: 25px; } } @media only screen and (min-width: 768px) { .flickity-disabled-desktop.team__blocks { display: grid; grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 990px) { .flickity-disabled-desktop.team__blocks--3 { grid-template-columns: repeat(3, 1fr); } } @media only screen and (min-width: 990px) { .flickity-disabled-desktop.team__blocks--4 { grid-template-columns: repeat(4, 1fr); } } @media only screen and (min-width: 480px) { .flickity-disabled-desktop .large-up--one-quarter, .flickity-disabled-desktop .medium--one-half, .flickity-disabled-desktop .small--one-half { width: 100%; } } .team__image__center { display: flex; width: 100%; justify-content: center; align-items: flex-start; } .team__image__wrapper { position: relative; width: 180px; height: 180px; border-radius: 180px; -webkit-clip-path: circle(100%); clip-path: circle(100%); display: block; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.07); } .team__button__wrapper .team__image__wrapper { width: 100px; height: 100px; border-radius: 100px; } .team__card__text { padding: 120px 30px 30px 30px; margin-top: -90px; text-align: center; background-color: var(--bg-accent); border-radius: var(--RADIUS); } .bg--accent .team__card__text, .bg--invert--accent .team__card__text { background-color: var(--hairline); } .team__name { margin-bottom: 0; } .team__title { margin-bottom: 10px; } .team__social { margin: 0; } .team__social li { display: inline-block; padding: 0; margin: 5px 10px; } .team__social a { position: relative; color: var(--text-light); } .team__social a:hover { color: var(--secondary); } .team__description p { margin: 10px 0 0 0; } /*================ Lookbook ================*/ .section-lookbook { margin-top: 35px; } .lookbook__image__one__bg, .lookbook__image__two__bg { position: absolute; z-index: 5; height: 100%; width: 70%; background-color: var(--bg-accent); border-radius: var(--RADIUS-LG); min-height: 130px; } @media only screen and (max-width: 767px) { .lookbook__image__one__bg, .lookbook__image__two__bg { padding-right: 85%; } } .lookbook__image__one__bg { top: -35px; left: 5%; } .lookbook__image__two__bg { bottom: 0; right: 5%; } .lookbook__block__top, .lookbook__block__bottom { position: relative; } .lookbook__block__top { padding-right: 15%; z-index: 200; } @media only screen and (max-width: 767px) { .lookbook__block__top { padding-right: 5%; } } .lookbook__block__bottom { padding-left: 15%; margin-top: -10%; z-index: 100; } @media only screen and (max-width: 767px) { .lookbook__block__bottom { padding-left: 5%; } } .lookbook__image__one, .lookbook__image__two { position: relative; z-index: 100; background-color: var(--bg); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.06); border-radius: var(--RADIUS-LG); } .lookbook__image__one .image__fill, .lookbook__image__two .image__fill { border-radius: var(--RADIUS-LG); } .lookbook__image__one { margin-top: 45px; } .lookbook__image__one:first-child { margin-top: 0; } .lookbook__title, .lookbook__text, .lookbook__button { position: relative; z-index: 200; } .lookbook__title { margin-top: 0; margin-bottom: 0; } .lookbook__text p { margin-top: 0; } .lookbook__button { display: grid; justify-content: center; bottom: -52px; padding-bottom: 30px; } /* ============================================================================ #Gallery ============================================================================== */ .gallery { 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(--gutter) * -1); } .has-padding .gallery__item { padding-left: var(--gutter); } .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% - var(--gutter)); } } /* === 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, .gallery .icon-zoom { position: absolute; bottom: 15px; left: 15px; z-index: 20; fill: #FFF; } .gallery__icon svg, .gallery .icon-zoom svg { fill: #FFF; } .gallery__icon .icon-play { width: 35px; } .has-padding .gallery__item .lazy-image, .has-padding .gallery__item .background-size-cover { border-radius: var(--RADIUS); overflow: hidden; } .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%; } .frame-blocks-1 .custom-scrollbar, .frame-blocks-2 .custom-scrollbar, .frame-blocks-3 .custom-scrollbar, .frame-blocks-4 .custom-scrollbar, .frame-blocks-5 .custom-scrollbar, .frame-blocks-6 .custom-scrollbar { display: none; } @media only screen and (max-width: 989px) { .frame-blocks-4 .slides-mobile-gutter, .frame-blocks-5 .slides-mobile-gutter, .frame-blocks-6 .slides-mobile-gutter { max-width: none; overflow: hidden; } .frame-blocks-4 .slides-mobile-inner, .frame-blocks-5 .slides-mobile-inner, .frame-blocks-6 .slides-mobile-inner { scroll-snap-type: x none; display: flex; flex-wrap: nowrap; overflow: auto hidden; padding-bottom: var(--gutter); scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; } .frame-blocks-4 .slides-mobile-inner::-webkit-scrollbar, .frame-blocks-5 .slides-mobile-inner::-webkit-scrollbar, .frame-blocks-6 .slides-mobile-inner::-webkit-scrollbar { display: none; } .frame-blocks-4 .custom-scrollbar, .frame-blocks-5 .custom-scrollbar, .frame-blocks-6 .custom-scrollbar { display: block; } .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(93% - var(--gutter)); } } @media only screen and (max-width: 767px) { .frame-blocks-2 .slides-mobile-gutter, .frame-blocks-3 .slides-mobile-gutter { max-width: none; overflow: hidden; } .frame-blocks-2 .slides-mobile-inner, .frame-blocks-3 .slides-mobile-inner { scroll-snap-type: x none; display: flex; flex-wrap: nowrap; overflow: auto hidden; padding-bottom: var(--gutter); scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; } .frame-blocks-2 .slides-mobile-inner::-webkit-scrollbar, .frame-blocks-3 .slides-mobile-inner::-webkit-scrollbar { display: none; } .frame-blocks-2 .custom-scrollbar, .frame-blocks-3 .custom-scrollbar { display: block; } .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(93% - var(--gutter)); } } @media only screen and (min-width: 768px) and (max-width: 989px) { .frame-blocks-4 .gallery__item { width: 30%; } .frame-blocks-5 .gallery__item { width: 30%; } .frame-blocks-6 .gallery__item { width: 30%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .frame-blocks-2 .gallery__item { width: 40%; } .frame-blocks-3 .gallery__item { width: 40%; } .frame-blocks-4 .gallery__item { width: 40%; } .frame-blocks-5 .gallery__item { width: 40%; } .frame-blocks-6 .gallery__item { width: 40%; } } .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); } /* ================ Policy Page ================ */ body .shopify-policy__container, body .shopify-email-marketing-confirmation__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(var(--font-8) * var(--FONT-ADJUST-BODY)); text-align: center; margin: 0 0 var(--vertical); } body .shopify-email-marketing-confirmation__container { text-align: center; } /* ================ Marketing unsub ================ */ .shopify-email-marketing-confirmation__container p { font-size: calc(var(--font-7) * var(--FONT-ADJUST-BODY)); } .shopify-email-marketing-confirmation__container a { font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); text-decoration: underline; } .page__content { width: 100%; } .page--policy { display: flex; flex-wrap: wrap; } .page--policy .medium-up--one-half { flex: 1 0; } @media only screen and (max-width: 767px) { .page--policy .medium-up--one-half { flex-basis: 100%; } } .page--policy .page__content { width: 100%; } /* ============================================================================ #Cart Page ============================================================================== */ .template-cart .main-content { min-height: var(--content-full); } .cart__template .wrapper { padding-top: var(--vertical); padding-bottom: var(--vertical); } .cart__return { display: flex; justify-content: flex-start; align-items: center; position: relative; } .cart__return:before { content: ""; display: inline-block; width: 8px; height: 8px; border-width: 0 0 2px 2px; border-style: solid; border-color: currentColor; margin: 0 10px 0; vertical-align: middle; transform: rotate(45deg); transform-origin: 50% 50%; transition: all 0.4s; } .cart__return:hover:before { transform: rotate(45deg) scale(1.2); } .checkout__button { padding: 20px; } .checkout__button em { font-style: normal; opacity: 0.4; padding: 0 4px; } .checkout__button [data-cart-final] { font-family: var(--FONT-STACK-ACCENT); font-weight: var(--FONT-WEIGHT-ACCENT); font-style: var(--FONT-STYLE-ACCENT); } .cart__remove__icon svg { width: 30px; height: 30px; } .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; } .additional-checkout-buttons .dynamic-checkout__content .shopify-cleanslate button, .additional-checkout-buttons .dynamic-checkout__content .shopify-cleanslate div[role=button] { border-radius: var(--RADIUS-BTN) !important; } @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; } } .cart__items__img { border-radius: var(--RADIUS); } .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: var(--RADIUS-SM); 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: rgb(255 255 255 / 0%); --text: rgb(255 255 255 / 0%); } .cart--loading .quantity__input { background-color: var(--hairline); border: 1px solid rgba(255, 255, 255, 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__circle__wrapper { display: flex; justify-content: center; align-items: center; margin-top: -80px; padding-bottom: 20px; flex-direction: column; } .cart__circle { background-color: var(--primary); border-radius: 100%; width: 160px; height: 160px; z-index: 10; display: flex; justify-content: center; align-items: center; color: var(--bg); transition: opacity linear 1.2s, box-shadow linear 0.8s; 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 linear 1.2s; fill: currentcolor; width: 3em; height: 3em; } .cart__continue__link { 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(var(--font-3) * var(--FONT-ADJUST-BODY)); color: var(--text); text-align: center; margin: 0; padding-top: 1.5rem; } .cart__continue__link:after { right: initial; left: 0; width: 0; transition: width 0.9s ease; bottom: -4px; height: 3px; } .cart__circle__wrapper:hover .cart__circle { opacity: 0.9; 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-calculator input { display: block; } .shipping-calculator .form__field label { opacity: 1; top: -0.7em; z-index: 1; } .shipping-calculator .form__field + .form__field { margin-top: 15px; } .shipping__rates__button { margin: 1em 0; } .shipping__rates { background-color: var(--hairline); margin: 1em 0 0 0; padding: 0; } .shipping__rates p { margin: 0; } .shipping__rates li { list-style-type: none; padding: 1em; margin: 0; } .shipping__rates li + li { border-top: 1px solid var(--border); } .shipping__rates.errors { color: var(--COLOR-ERROR); } /*====== Cart Message ======*/ .cart__message { display: flex; position: relative; flex-flow: row nowrap; justify-content: center; align-items: center; padding: 15px var(--gutter); border: 1px solid var(--border); border-radius: var(--RADIUS-SM); margin: 0 var(--gutter) var(--gutter) var(--gutter); 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 .confetti { transition: top 0.4s; } .cart__message.is-success .cart__graph .confetti:before, .cart__message.is-success .cart__graph .confetti:after { transform: scale(1); opacity: 0; transition: top 1s, left 1s, transform 1s, opacity 0.6s 0.4s; } .cart__message.is-success .cart__graph .confetti--1:before { top: -35px; left: 65px; } .cart__message.is-success .cart__graph .confetti--4:after, .cart__message.is-success .cart__graph .confetti--1:after { top: 5px; left: 45px; } .cart__message.is-success .cart__graph .confetti--2:before { top: 35px; left: 15px; } .cart__message.is-success .cart__graph .confetti--5:after, .cart__message.is-success .cart__graph .confetti--2:after { top: 5px; left: -35px; } .cart__message.is-success .cart__graph .confetti--3:before { top: -25px; left: 5px; } .cart__message.is-success .cart__graph .confetti--6:after, .cart__message.is-success .cart__graph .confetti--3:after { top: 45px; left: -45px; } .cart__message.is-success .cart__graph .confetti--4:before { top: -35px; left: 90px; } .cart__message.is-success .cart__graph .confetti--5:before { top: -70px; left: 15px; } .cart__message.is-success .cart__graph .confetti--6:before { top: -50px; left: 55px; } /*====== Cart Graph ======*/ .cart__graph { position: absolute; bottom: 0; width: var(--bar-progress); background-color: var(--border); height: 3px; display: flex; justify-content: center; align-items: center; } .confetti { position: absolute; width: 20px; height: 20px; top: -20px; pointer-events: none; transform: rotate(90deg); } .confetti--2 { color: var(--COLOR-PRIMARY); } .confetti--3 { color: var(--COLOR-SECONDARY); } .confetti--4 { color: var(--INVERSE-PRIMARY); } .confetti--5 { color: var(--INVERSE-SECONDARY); } .confetti--6 { color: var(--COLOR-BG-ACCENT); } .confetti--4, .confetti--5, .confetti--6 { transform: rotate(205deg); } .confetti:before, .confetti:after { position: absolute; top: 0; left: 0; width: 5px; height: 5px; border-radius: 50%; background: currentcolor; transform: scale(0); pointer-events: none; content: ""; } .cart__page__shipping .cart__message { border-bottom: none; flex-direction: row-reverse; } .cart__page__shipping .cart__graph { margin-right: 0; margin-left: 8px; } /* ================ Cart template ================ */ .cart__template .cart__items__row { padding: var(--gutter) 0; margin: 0; border: none; } .cart__template .cart__message { justify-content: flex-start; font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY)); padding: var(--gutter) 0; border: none; } .cart__template .cart__message .cart__graph { display: none; } @media only screen and (min-width: 768px) { .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-gap: 0 var(--gutter); } .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; flex-wrap: wrap; } .cart__template .cart__items__price .line__price { width: 100%; } .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: initial; right: initial; } .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__total, .cart__template .cart__items__row .cart__items__price { 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 { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } .cart__heading__back { grid-column: image/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-gap: 10px var(--gutter); } .template__cart__footer .upsell__holder { grid-area: product; margin-top: 0; } .template__cart__footer .upsell__holder .upsell { border-radius: var(--RADIUS-SM); } .template__cart__footer .cart__footer__notes { grid-area: notes; display: flex; flex-direction: column; } @media only screen and (min-width: 768px) { .template__cart__footer .cart__footer__notes:first-of-type { grid-area: product; } .template__cart__footer .cart__footer__notes:first-of-type + .cart__footer__shipping { 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; } @media only screen and (min-width: 768px) { .template__cart__footer .cart__footer__shipping:first-of-type { grid-area: product; } } .template__cart__footer .cart__footer__shipping .accordion__title { font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); } .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__update { grid-area: update; } .template__cart__footer .cart__footer__additional { grid-area: additional; } .template__cart__footer .cart__footer__additional .additional-checkout-buttons { border-radius: var(--RADIUS-SM); } .template__cart__footer .cart__footer__total p { margin: 0; padding: 5px 0; } .template__cart__footer .cart__footer__label { color: var(--text-light); font-size: calc(15px * 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-right: 6px; } .template__cart__footer .cart__footer__discount { color: var(--primary); } .template__cart__footer .page__footer__subtotal .cart__footer__value { font-size: calc(var(--font-6) * var(--FONT-ADJUST-ACCENT)); font-weight: var(--FONT-WEIGHT-BODY-BOLD); } .template__cart__footer .cart__footer__value { font-size: calc(var(--font-9) * var(--FONT-ADJUST-ACCENT)); font-weight: var(--FONT-WEIGHT-ACCENT-BOLD); } .template__cart__footer .cart__footer__small { font-style: italic; color: var(--text-light); } */ .cart__footer__total, .cart__footer__checkout, .cart__footer__update { text-align: right; } .cart__footer__update { display: none; } .no--ajax .cart__footer__checkout, .no-js .cart__footer__checkout { grid-column: checkout/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-gap: 10px 0; } .template__cart__footer .drawer__bottom__shipping { margin-top: 15px; } .cart__heading__wrapper .cart__items__quantity, .cart__heading__wrapper .cart__items__price { 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__remove__icon { right: 0; } .cart__template .pt2 { padding-top: var(--gutter); } .cart__template .h3--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); font-size: calc(var(--font-6) * var(--FONT-ADJUST-BODY)); text-align: center; } .cart__template .cart__return { display: block; font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); text-align: center; border-top: 1px solid var(--border); padding: 10px 3px; } .cart__template .cart__items__grid.cart__heading__wrapper { grid-row-gap: 0; } } /* ================ No Ajax update animation ================ */ .cart__update { display: none; } .no-js .cart__update, .no--ajax .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 { display: inline; } .no-js .cart__update__icon { display: inline; } .no-js .cart__footer__shipping { display: none; } /* ================ Cart drawer ================ */ .cart__drawer { --cart-drawer-bottom: 150px; } @media only screen and (min-width: 768px) { .cart__drawer { --gutter: 20px; } } @media only screen and (max-width: 479px) { .cart__drawer { --gutter: 16px; } } .cart__drawer .errors { margin: var(--gutter); margin-bottom: 6px; } .cart__drawer .errors p { margin: 0; } .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__top { width: 100%; top: 0; background: var(--bg); z-index: 300; display: flex; justify-content: space-between; } .cart__drawer .drawer__top .icon-arrow-down { color: var(--muted); } .cart__drawer.drawer--visible .drawer__underlay { z-index: 5000; } .cart__drawer .drawer__underlay .drawer__underlay__fill, .cart__drawer .drawer__underlay .drawer__underlay__blur { opacity: 0; } .cart__drawer .drawer__top__left { display: flex; justify-content: flex-start; } .cart__drawer .drawer__button { padding: var(--gutter); color: var(--text); width: 70px; display: flex; align-items: center; justify-content: flex-end; position: relative; z-index: 2; } .cart__drawer .drawer__bottom input, .cart__drawer .drawer__bottom textarea { width: 100%; } .cart__drawer .drawer__bottom__meta, .cart__drawer .drawer__footer__subtotal p { margin-left: 0; margin-right: 0; } .cart__drawer .drawer__announcement__bar { padding: 15px var(--gutter); border: 1px solid var(--secondary); border-radius: var(--RADIUS-SM); margin: 0 var(--gutter) var(--gutter) var(--gutter); background-color: var(--secondary-fade); font-size: calc(0.6875rem * var(--FONT-ADJUST-BODY)); color: var(--secondary); line-height: 1.3; text-align: center; transition: max-height 0.3s, padding 0.3s, border 0.3s, opacity 0.3s, visibility 0.3s; } .cart__drawer .drawer__announcement__bar p { margin: 0; } .cart__drawer .drawer__announcement__bar a { text-decoration: underline; } .cart__drawer .drawer__announcement__bar a:hover { text-decoration: none; } .cart__drawer__title { margin: 0; padding: var(--gutter) 0 0 var(--gutter); font-size: calc(var(--font-5) * var(--FONT-ADJUST-HEADING)); align-items: center; 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); } .drawer__body { overflow-y: auto; flex: 1; width: 100%; min-height: 1px; } .drawer__body .upsell__holder { display: flex; margin: var(--gutter); width: calc(100% - var(--gutter) * 2); } .drawer__body .upsell__holder .upsell { width: 100%; border-radius: var(--RADIUS-SM); } .drawer__bottom { width: 100%; margin-top: auto; padding: var(--gutter); } .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; } .line__price--unit { font-style: italic; color: var(--text-light); } .cart__items__row { display: flex; margin: 0 var(--gutter); padding: var(--gutter); border: 1px solid var(--border); position: relative; } .cart__items__row + .cart__items__row { border-top: none; } .cart__items__row:first-child { border-top-right-radius: 3px; border-top-left-radius: 3px; } .cart__items__row:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } .cart__items__remove { position: absolute; top: var(--gutter); right: var(--gutter); } .cart__items__grid { display: flex; flex-wrap: wrap; grid-template-areas: "image title" "image price" "image quantity" "below below"; grid-template-columns: 90px 1fr; grid-template-rows: auto auto auto auto; grid-gap: 16px; } .cart__items__quantity .quantity__wrapper { margin: 0; } .cart__items__meta { font-family: var(--FONT-STACK-BODY); font-weight: var(--FONT-WEIGHT-BODY); font-style: var(--FONT-STYLE-BODY); color: var(--text-light); } .cart__items__meta em { font-style: normal; opacity: 0.4; padding: 0 1px; } .cart__items__title { grid-area: title; padding-right: 35px; } .cart__items__title a { color: var(--text-dark); } .cart__items__title__product { 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); } .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: 120px; width: auto; height: auto; -o-object-fit: cover; object-fit: cover; } .cart__items__image a { display: block; text-align: center; height: 100px; width: 100px } .cart__items__price { font-family: var(--FONT-STACK-ACCENT); font-weight: var(--FONT-WEIGHT-ACCENT); font-style: var(--FONT-STYLE-ACCENT); } .cart__items__total, .cart__footer__value { font-family: var(--FONT-STACK-ACCENT); font-weight: var(--FONT-WEIGHT-ACCENT); font-style: var(--FONT-STYLE-ACCENT); font-weight: var(--FONT-WEIGHT-ACCENT-BOLD); } .cart__items__total .cart__heading { font-family: var(--FONT-STACK-BODY); font-weight: var(--FONT-WEIGHT-BODY); font-style: var(--FONT-STYLE-BODY); } .drawer__bottom__meta { padding: 0; margin: 1rem var(--gutter); } .drawer__footer__subtotal .cart__footer__itemtotal, .drawer__footer__subtotal .cart__footer__discount { font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY)); margin: 1rem var(--gutter); padding: 0; } .drawer__footer__subtotal .cart__footer__itemtotal .cart__footer__value, .drawer__footer__subtotal .cart__footer__discount .cart__footer__value { font-weight: var(--FONT-WEIGHT-BODY-BOLD); } .drawer__footer__subtotal .cart__footer__discount { color: var(--primary); } .drawer__footer__subtotal .cart__footer__discount .cart__footer__value { background-color: var(--primary-fade); border: 1px solid var(--primary); padding: 4px 8px; border-radius: var(--RADIUS-SM); } .drawer__checkout__additional { margin-top: 16px; } .drawer__checkout__additional .additional-checkout-buttons { border-radius: 3px; border-left: none; border-right: none; margin-bottom: 0; border-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, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 70%) var(--border); background-size: 200% 100%; background-position-x: 180%; animation: 1s shimmer cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } @keyframes shimmer { to { background-position-x: -20%; } } /*================ Newsletter ================*/ .newsletter__wrapper { background-color: var(--bg-accent); text-align: center; border-radius: var(--RADIUS); } .bg--accent .newsletter__wrapper { background-color: var(--bg); } .newsletter__title { margin: 0 0 10px 0; } .newsletter__text { max-width: 600px; margin: 0 auto; } .newsletter__text p { margin: 0; } .newsletter__button { position: relative; bottom: -25px; } .newsletter__button .input-group-btn button { height: 100%; } .newsletter__wrapper .newsletter-form { max-width: 380px; margin: 0 auto; } .shopify-section:last-child .newsletter { padding-bottom: 30px; } .newsletter__message, .has-error:not(.newsletter--default-messages) p:not([class]), .has-success:not(.newsletter--default-messages) p:not([class]) { display: none; } .has-error > .newsletter__message--error, .has-success > .newsletter__message--success { display: block; } .newsletter-form .input-group-btn button { height: 100%; } /*================ Overlap side by side design ================*/ .overlap { display: flex; justify-content: center; align-items: stretch; width: calc(100% + var(--gutter)); height: 100%; margin: calc(var(--gutter) / 2 * -1); } @media only screen and (max-width: 767px) { .overlap { flex-wrap: wrap; } } .overlap__item { width: 100%; display: flex; flex-direction: column; justify-content: center; border-radius: var(--RADIUS-LG); margin: calc(var(--gutter) / 2); perspective: 1px; } .overlap__item .image__fill, .overlap__item .image__fill > .background-size-cover { border-radius: var(--RADIUS-LG); } .overlap__item a:not(.overlap__button) { text-decoration: underline; } .overlap__item a:not(.overlap__button):hover { text-decoration: none; } .overlap__image-wrapper { margin: 0 auto; position: relative; width: 100%; } .overlap__content__wrapper { padding: var(--outer); } @media only screen and (max-width: 767px) { .overlap__content__wrapper { padding-top: calc(var(--outer) + 1rem); } } .overlap__heading { margin-top: 13px; } .overlap__image { display: block; border-radius: var(--RADIUS-LG); } .overlap__image-wrapper .overlap__image { width: 100%; position: absolute; top: 0; } @media only screen and (max-width: 767px) { .overlap__image { order: 1; } } .section-row .overlap__image .image__fill { border-radius: var(--image-shape); } @media only screen and (max-width: 767px) { .overlap__text { order: 2; } } .overlap__button { margin-top: 15px; } .overlap--above { z-index: 200; } .overlap__image.overlap--above { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.07); } .overlap__text.overlap--above { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06); } @media only screen and (max-width: 767px) { .wrapper.overlap { padding: 0; } .wrapper.overlap .overlap__image { box-shadow: none; } .wrapper.overlap .overlap__text { z-index: 400; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06); margin: -25px 15px 0 15px; background-color: var(--bg); } } /*================ Longform Product ================*/ .product__overlap .overlap__text { background-color: var(--bg); padding: 30px 0; } @media only screen and (min-width: 768px) { .product__overlap .overlap__item:last-child.overlap__text { padding-left: 60px; } } @media only screen and (min-width: 768px) { .product__overlap .overlap__item:first-child.overlap__text { padding-right: 60px; } } .section-row.bg--neutral .overlap__text.bg--neutral .overlap__content__wrapper, .section-row.bg--accent .overlap__text.bg--accent .overlap__content__wrapper, .section-row.bg--invert .overlap__text.bg--invert .overlap__content__wrapper, .section-row.bg--invert--accent .overlap__text.bg--invert--accent .overlap__content__wrapper { padding: 0; } .section-map.bg--neutral .overlap__text.bg--neutral .overlap__content__wrapper, .section-map.bg--accent .overlap__text.bg--accent .overlap__content__wrapper, .section-map.bg--invert .overlap__text.bg--invert .overlap__content__wrapper, .section-map.bg--invert--accent .overlap__text.bg--invert--accent .overlap__content__wrapper { padding: 0; } /*============================================================================ #Password Page ==============================================================================*/ .template-password { height: 100vh; text-align: center; } .password-section, .password__outer { width: 100%; height: 100%; } .password__wrapper { display: table; position: relative; height: 100%; width: 100%; color: var(--text-light); background-size: cover; background-repeat: no-repeat; background-position: center center; background-color: var(--text); } .password__wrapper .password__footer__inner { color: #FFF; } .password__wrapper a:not(.share) { color: inherit; } .password__box, .password__footer__inner { position: relative; z-index: 10; } .template-password .social-sharing { width: 101%; overflow: hidden; } .password__main { display: table-row; width: 100%; height: 100%; margin: 0 auto; } .password__main__inner { display: table-cell; vertical-align: middle; padding: var(--gutter); } .password__box { background-color: var(--bg); max-width: 600px; margin: 0 auto; padding: var(--gutter) 0 0 0; } .template-password .newsletter-form { border: 1px solid var(--hairline-hover); } .storefront-password-form { margin-top: var(--gutter); } .password__hero { font-size: calc(var(--font-9) * var(--FONT-ADJUST-HEADING)); line-height: 1.15; letter-spacing: 0; text-rendering: optimizelegibility; padding-bottom: var(--gutter); padding-top: var(--gutter); } .password__hero .logo { max-width: 100%; max-height: 200px; padding: 0 10px; } .password__message { padding-left: 16px; padding-right: 16px; font-size: 120%; } .password__message img { max-width: 100%; } .password__hero, .password__message, .password__login-form, .password__signup-form { max-width: 500px; margin: 0 auto; } .password__login-form .input-group-btn button, .password__signup-form .input-group-btn button { height: 100%; } .password__login-form { text-align: center; } .password__login-form, .password__box { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); border-radius: var(--RADIUS-SM); overflow: hidden; } .password-login { --text: #FFF; } .password__login-form, .password__signup-form { background-color: var(--bg); padding: var(--outer); } .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: var(--gutter); } .password__signup-form__heading { margin-bottom: 0.8em; } .password__social-sharing { margin-top: var(--gutter); } .password__social-sharing__heading { margin-bottom: 0; } .admin-login { margin-top: var(--inner); margin-bottom: 0; } .admin-login a { text-decoration: none; } .admin-login { font-size: 95%; } .password__footer { display: table-row; height: 1px; } .password__footer__inner { display: table-cell; vertical-align: bottom; padding: 50px 30px 30px 30px; line-height: 20px; font-size: 95%; color: var(--text); } .password__footer__inner a { display: inline-block; text-decoration: none; margin: 0 6px; vertical-align: middle; } @media only screen and (max-width: 479px) { .password__footer__inner a { display: block; margin-top: 15px; } } /* ============================================================================ # Index video ============================================================================== */ .video-background-wrapper { position: absolute; top: 0; height: 100%; width: 100%; } .video-background-wrapper video { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; pointer-events: none; } .video-background-wrapper video::-webkit-media-controls { display: none; } /* Fix/hack for vimeo video controls - hide video wrapper without display: none; height: 0; and visibility: hidden; */ .section-video { position: relative; overflow: hidden; } .video-holder { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; overflow: hidden; opacity: 0; } .video-holder:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; } .video-holder iframe { position: absolute; top: 0; left: 0; max-width: 100%; width: 100%; height: 100%; } .video-wrapper { padding-top: var(--VIDEO-ASPECT-RATIO); } .section-video--not-background .video-holder, .section-video--with-background.is-loaded .video-holder { position: relative; z-index: auto; opacity: 1; } .no-js .section-video--not-background .video-holder, .section-video--not-background .video-holder:after, .no-js .section-video--with-background.is-loaded .video-holder, .section-video--with-background.is-loaded .video-holder:after { display: none; } .video__player__inner { position: relative; display: flex; flex-direction: column-reverse; } .section-video--with-background.is-loaded .section--image { display: none; } .section-video--not-background .section-padding:not(.align--middle-center) .section--image:not(.section--image-empty) { min-height: 0 !important; padding-top: 0 !important; } .section-video--not-background .align--middle-center .video__player__inner { display: grid; grid-template-columns: 1fr; } .section-video--not-background .align--middle-center .video-holder, .section-video--not-background .align--middle-center .section--image { grid-row-start: 1; grid-column-start: 1; min-height: 100%; } .section-video--not-background .hero__content__wrapper:not(.align--middle-center) { position: relative; } .section-video--not-background .hero__content { margin: 0; } .section-video--not-background [class*=middle-] .section--image { flex: 0 0 auto; width: 100%; margin: 0 auto; } @media only screen and (min-width: 768px) { .section-video--not-background [class*=middle-] .section--image:not(:only-child) { max-width: calc(50% - var(--outer)); } } .section-video--not-background [class*=middle-] .video__player__inner { align-items: center; } .section-video--not-background .align--middle-right .video__player__inner { flex-direction: row; } @media only screen and (max-width: 767px) { .section-video--not-background .align--middle-right .video__player__inner { flex-direction: column; } } @media only screen and (min-width: 768px) { .section-video--not-background .align--middle-left .video__player__inner { flex-direction: row-reverse; } } .section-video--not-background [class*=bottom-] .video__player__inner { flex-direction: column; } @media only screen and (min-width: 768px) { .section-video--not-background [class*=middle-] .hero__content { max-width: none; } } @media only screen and (min-width: 768px) { .section-video--not-background .align--middle-left .hero__content { padding-right: 60px; } } @media only screen and (min-width: 768px) { .section-video--not-background .align--middle-right .hero__content { padding-left: 60px; } } @media only screen and (min-width: 768px) { .section-video--not-background .align--middle-left .hero__content__wrapper { padding-right: var(--inner); } } @media only screen and (min-width: 768px) { .section-video--not-background .align--middle-right .hero__content__wrapper { padding-left: var(--inner); } } .section-video--with-background .image__fill { min-height: inherit; } /* Play button */ .video__play--set .icon-play { width: var(--PLAY-WIDTH); height: calc(var(--PLAY-WIDTH) * 0.704); } @media only screen and (max-width: 767px) { .video__play--set .icon-play { width: calc(var(--PLAY-WIDTH) * 0.66); height: calc(var(--PLAY-WIDTH) * 0.46464); } } /* stylelint-disable-next-line media-feature-name-no-vendor-prefix */ @media only screen and (width <= 1366px) and (-webkit-min-device-pixel-ratio: 2) and (hover: none) { .section-video .hero__content__wrapper, .section-video .image-overlay { pointer-events: none; touch-action: none; } .section-video .video-background-wrapper video, .section-video .hero__content__wrapper a, .section-video .hero__content__wrapper button { pointer-events: all; } } .section--wrapped { display: flex; flex-wrap: wrap; } @media only screen and (max-width: 989px) { .contact__nav { max-width: 100%; width: 100%; display: block; } .contact__nav .inline-nav { margin-bottom: 15px; } .form__field input { min-height: 3em; } input[type=date] { min-height: 3em; } input::-webkit-calendar-picker-indicator { display: none; } input[type=date]::-webkit-inner-spin-button, input[type=date]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } .custom-form__block svg.icon-calendar { position: absolute; left: 90%; top: 30%; opacity: 0.5; } } @media only screen and (min-width: 768px) { .custom-form__block svg.icon-calendar { display: none; } } .contact__content { flex: 5; display: flex; flex-wrap: wrap; } .contact__form, .contact__faq { width: 50%; } .contact__form:first-child:last-child, .contact__faq:first-child:last-child { margin: 0 auto; } .contact__form { padding-right: 15px; } .contact__faq { padding-left: 15px; } .contact__policy { display: block; width: 100%; } @media only screen and (max-width: 767px) { .contact__form, .contact__faq { display: block; width: 100%; padding: 0; } } @media only screen and (max-width: 767px) { .contact__faq { margin-top: 40px; } } .section-contact .page-accordion { padding-top: 7px; } .policy__block { position: relative; display: block; margin-bottom: 30px; padding: 30px; border-radius: var(--RADIUS); background-color: var(--bg-accent); } @media only screen and (max-width: 767px) { .policy__block { padding: 15px; } } .policy__title { color: var(--text-dark); } .policy__title:last-child { margin-bottom: 0; } .policy__content { color: var(--text-light); } .policy__content a { position: relative; z-index: 50; } .policy__content p:first-child { margin-top: 0; } .policy__content p:last-child { margin-bottom: 0; } .policy__block--linked .policy__title { position: relative; display: inline-block; } .policy__block--linked .policy__title:after { content: ""; position: absolute; display: block; left: 0; width: 100%; bottom: -1px; height: 2px; background-color: var(--text); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } .policy__block--linked:hover .policy__title:after, .policy__block--linked:focus .policy__title:after { transform: scaleX(1); transform-origin: 0 50%; } .popout { position: relative; } .popout__toggle { font-size: calc(10px * var(--FONT-ADJUST-BODY)); margin: 0; white-space: nowrap; padding: 9px 16px; background-image: none; display: flex; align-items: center; } .popout__toggle .icon { margin-left: 5px; width: 8px; fill: currentcolor; } .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(--color-gray-500); bottom: calc(100% + 10px); position: absolute; display: none; margin: 0; padding: 0; min-height: 30px; max-height: 300px; z-index: 100; overflow-y: auto; border-radius: unset; } .popout-list--visible { display: block; } .popout-list__item { display: block; white-space: nowrap; padding: 0; margin: 0; text-align: left; } .popout-list__option { padding: 6px 12px; width: 100%; display: flex; text-decoration: none; font-size: var(--font-base); color: var(--color-gray-600); } .popout-list__option span { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .popout-list__option:hover { background-color: var(--color-accent); } .popout-list__item--current .popout-list__option span { border-bottom: 1px solid var(--secondary); } .popout--footer { display: flex; justify-content: center; --text: var(--COLOR-FOOTER-TEXT); } @media only screen and (max-width: 767px) { .popout--footer { justify-content: flex-start; } } .popout--footer .popout { padding-right: 10px; } .popout--footer .popout__toggle { color: var(--COLOR-FOOTER-TEXT); border-color: var(--COLOR-FOOTER-A15); } .popout--footer .popout-list { background-color: var(--COLOR-FOOTER-BG); border: 1px solid var(--COLOR-FOOTER-A15); } .popout--footer .popout-list__option { font-size: calc(10px * var(--FONT-ADJUST-BODY)); } .popout--footer .popout-list__option:hover { background-color: var(--COLOR-FOOTER-A8); } .popout--drawer { height: 100%; } .popout--drawer .popout { height: 100%; } .popout--drawer .popout-list { background-color: var(--bg); border: 1px solid var(--border); z-index: 1000; max-height: calc(var(--full-screen) - var(--header-height) - 50px); bottom: 100%; top: initial; left: 0; } .popout--drawer .popout-list__option:hover { background-color: var(--border); color: var(--text-dark); } .popout--drawer .popout-list__option { font-size: calc(10px * var(--FONT-ADJUST-BODY)); } .popout--drawer .popout__toggle { padding: 0 20px; height: 100%; color: var(--text); border-color: var(--border); border-radius: 0; border: none; margin: 0; display: flex; align-items: center; } .popout--drawer .popout__toggle .icon { margin-left: 8px; } @media only screen and (max-width: 479px) { .popout--drawer .popout__toggle { padding: 0 15px; } } .popout--toolbar .popout__toggle { padding: 10px 0; height: 100%; color: var(--text); border: none; margin: 0 0 0 16px; display: flex; align-items: center; } .popout--toolbar .popout__toggle .icon { margin-left: 8px; } @media only screen and (max-width: 479px) { .popout--toolbar .popout__toggle { padding: 0 15px; } } .popout--toolbar .popout-list { background-color: var(--bg); border: none; z-index: 1000; max-height: 90vh; top: calc(100% - 1px); left: auto; right: 0; bottom: initial; /* border-radius: var(--RADIUS-SM); */ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.06); } .popout--toolbar .popout-list__option:hover { background-color: var(--hairline); color: var(--text-dark); } .popout--toolbar .popout-list__option { font-size: calc(10px * var(--FONT-ADJUST-BODY)); } .popout--toolbar .popout-list { --bg: var(--COLOR-NAV); --border: var(--COLOR-NAV-BORDER); --text: var(--COLOR-NAV-TEXT); --text-dark: var(--COLOR-NAV-TEXT-DARK); --text-light: var(--COLOR-NAV-TEXT-BRIGHT); --link: var(--COLOR-NAV-TEXT); --link-hover: var(--COLOR-PRIMARY); --text-transparent: var(--COLOR-NAV-TEXT-TRANSPARENT); --hairline: var(--COLOR-NAV-BORDER-HAIRLINE); --underline: var(--COLOR-NAV-BORDER-HAIRLINE); } .popout__flag { display: block; width: 20px; height: 15px; margin-right: 8px; aspect-ratio: 4/3; -o-object-fit: cover; object-fit: cover; } /* ================ Product Media ================ */ .product__media__wrapper { margin-bottom: calc(var(--gutter) * 2); } .product__slides { position: relative; font-size: 0; overflow-y: hidden; } .product__slides:after { content: "flickity"; display: none; } @media only screen and (max-width: 767px) { .product__slides { overflow: hidden; overflow-x: auto; display: flex; flex-flow: row nowrap; padding: 0 calc(var(--gutter) * 2) 10px; margin-left: calc(var(--gutter) * 2 * -1); margin-right: calc(var(--outer) * -1); scroll-behavior: smooth; } .product__slides .product__media:last-child { margin-right: calc(var(--gutter) * -1); } .product__slides .product__media:only-child { margin: 0; } .product__slides:after { content: ""; } } .product__slides:has(.product__media:only-child) { margin: 0; padding: 0; } .product__slides .flickity-viewport { transition: height 0.4s; } .product__slides .flickity-slider > * { 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; } @media only screen and (min-width: 768px) { .product__slides .flickity-slider > * { width: 100% !important; } } @media only screen and (min-width: 992px) { .product__slides .flickity-slider > * { height:414px; } } @media only screen and (min-width: 768px) { .product__wrapper--grid .product__slides, .product__wrapper--mosaic .product__slides { -moz-columns: 2; columns: 2; gap: var(--inner); } } .product__wrapper--grid .product__media, .product__wrapper--mosaic .product__media { padding-bottom: var(--inner); -moz-column-break-inside: avoid; break-inside: avoid; position: relative; } .product__wrapper--grid .product__media:last-child, .product__wrapper--mosaic .product__media:last-child { padding-bottom: 0; } @media only screen and (min-width: 768px) { .product__wrapper--grid .product__media:only-child, .product__wrapper--mosaic .product__media:only-child, .product__wrapper--mosaic .product__media:first-child { -moz-column-span: all; column-span: all; } } @media only screen and (min-width: 768px) { html.js .product__wrapper--thumbnails .product__slides:not(.flickity-enabled) > .product__media:not(:first-child) { display: none; } } .product__slides.flickity-lock-height .flickity-viewport { padding-bottom: var(--default-ratio); } .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; } .shopify-model-viewer-ui, model-viewer, .media__contain lite-youtube, .media__contain .plyr--video, .media__contain > video, .media__contain > iframe { width: 100%; height: 100%; position: absolute !important; top: 0; left: 0; max-width: 100%; z-index: 2; /* IE FIX */ 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 { stroke: none; fill: none; } .btn--ar .icon path.icon-media-model-square { stroke: none; fill: none; } .btn--ar .icon path.icon-media-model-element { fill: currentcolor; opacity: 1; } .product-single__view-in-space-text { display: inline-block; vertical-align: middle; } .thumb--video, .thumb--model { position: relative; } /* zoom button over product image -- additional styles in pswp */ .media__zoom__icon { position: absolute; bottom: 0; left: 0; opacity: 0; z-index: 100; padding: var(--inner); cursor: zoom-in; transition: opacity 250ms cubic-bezier(0.215, 0.61, 0.355, 1); } @media only screen and (max-width: 767px) { .media__zoom__icon { opacity: 1; } } .media__zoom__icon__inner { border-radius: 20px; width: 38px; height: 38px; background: var(--bg); color: var(--text); border: var(--border); display: flex; justify-content: center; align-items: center; } .media__zoom__icon__inner svg { width: 16px; height: auto; } .product__slides:hover .media__zoom__icon, .product__slides:focus .media__zoom__icon, .media__zoom__icon:focus { opacity: 1; } body.focus-enabled .product__wrapper--thumbnails .product__media:not(.is-selected) { visibility: hidden; } .pswp__counter { font-family: var(--FONT-STACK-ACCENT); font-weight: var(--FONT-WEIGHT-ACCENT); font-style: var(--FONT-STYLE-ACCENT); font-weight: var(--FONT-WEIGHT-ACCENT-BOLD); color: var(--text-dark); font-size: calc(var(--font-4) * var(--FONT-ADJUST-ACCENT)); } .pswp--zoom-allowed .pswp__img { cursor: zoom-in; } .pswp--zoomed-in .pswp__img { cursor: zoom-out; } /* removes media players from the tabindex when they are hidden */ body.focus-enabled .product__media:not(.is-selected) .plyr, body.focus-enabled .product__media:not(.is-selected) model-viewer, body.focus-enabled .product__media:not(.is-selected) .shopify-model-viewer-ui, body.focus-enabled .product__media:not(.is-selected) .media__contain iframe { display: none; } .product__media { border-radius: unset; overflow: hidden; } @media only screen and (max-width: 767px) { .product__media { flex: 1 0 auto; padding: 6px var(--gutter) var(--inner) var(--gutter); margin-left: calc(var(--gutter) * -1); min-width: 90%; } } /* .product__media .lazy-image img { border-radius: var(--RADIUS); } */ .product__media.hide { display: none !important; } .product__media .lazy-image img, .media__thumb img, .product-grid-item .image__fill { filter: brightness(var(--PHOTO-CORRECTION)); } .product__slides--single .product__media { margin: 0; } @media only screen and (max-width: 767px) { .product__slides--single .product__media { width: 100%; padding: 0; } } /* Thumbnails */ .media__thumb__wrapper:after { content: "flickity"; display: none; } @media only screen and (max-width: 767px) { .media__thumb__wrapper:after { content: ""; } } .no-js .media__thumb__wrapper { display: none; } .media__thumb { position: relative; display: inline-block; padding: 0; cursor: pointer; width: 128px; height: 131px; margin: 10px 10px 5px 0; border-radius: unset; overflow: hidden; } .media__thumb.hide { display: none !important; } @media only screen and (min-width: 768px) { .media__thumb { margin: 18px 8px 5px 0; } } .media__thumb.is-selected { border: 2px solid var(--COLOR-A50); pointer-events: none; } .media__thumb img { width: 100%; height: 100%; -o-object-fit: cover; 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: baseline; } .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); } .plyr.plyr--full-ui.plyr--video { color: var(--text); background-color: transparent; /* stylelint-disable-next-line */ /* stylelint-disable-next-line */ /* stylelint-disable-next-line */ } body:not(.focus-enabled) .plyr.plyr--full-ui.plyr--video { outline: none; } .plyr.plyr--full-ui.plyr--video .plyr__video-wrapper { background-color: transparent; } .plyr.plyr--full-ui.plyr--video .plyr__poster { background-color: #F7F7F7; } .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__video-wrapper, .plyr.plyr--full-ui.plyr--video:-webkit-full-screen .plyr__poster { background-color: #000; } .plyr.plyr--full-ui.plyr--video:-moz-full-screen .plyr__video-wrapper, .plyr.plyr--full-ui.plyr--video:-moz-full-screen .plyr__poster { background-color: #000; } .plyr.plyr--full-ui.plyr--video:-ms-fullscreen .plyr__video-wrapper, .plyr.plyr--full-ui.plyr--video:-ms-fullscreen .plyr__poster { background-color: #000; } .plyr.plyr--full-ui.plyr--video .plyr--fullscreen-fallback .plyr__video-wrapper, .plyr.plyr--full-ui.plyr--video .plyr--fullscreen-fallback .plyr__poster { background-color: #000; } .plyr.plyr--full-ui.plyr--video .plyr__control.plyr__control--overlaid { background-color: #FFFFFF; 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: #FFFFFF; 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 #FFFFFF; } .plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-ms-thumb { box-shadow: 2px 0 0 0 #FFFFFF; } .plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-webkit-slider-thumb { box-shadow: 2px 0 0 0 #FFFFFF; } .plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-webkit-slider-runnable-track { background-image: linear-gradient(to right, currentColor var(--value, 0), var(--COLOR-A60) var(--value, 0)); } .plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-moz-range-track { background-color: var(--COLOR-A60); } .plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-ms-fill-upper { background-color: var(--COLOR-A60); } .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-A30); } .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-A30); } .plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range].plyr__tab-focus::-ms-track { box-shadow: 0 0 0 4px var(--COLOR-A30); } .plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]:active::-moz-range-thumb { box-shadow: 0 0 0 3px var(--COLOR-A30); } .plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]:active::-ms-thumb { box-shadow: 0 0 0 3px var(--COLOR-A30); } .plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]:active::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--COLOR-A30); } .plyr.plyr--full-ui.plyr--video .plyr__progress .plyr__tooltip { background-color: var(--text); color: #FFFFFF; } .plyr.plyr--full-ui.plyr--video .plyr__progress .plyr__tooltip::before { border-top-color: var(--text); } .plyr.plyr--full-ui.plyr--video.plyr--loading .plyr__progress__buffer { background-image: linear-gradient(-45deg, var(--COLOR-A60) 25%, transparent 25%, transparent 50%, var(--COLOR-A60) 50%, var(--COLOR-A60) 75%, transparent 75%, transparent); } .plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range] { color: #FFFFFF; } .plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]::-moz-range-thumb { box-shadow: 2px 0 0 0 var(--text); } .plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]::-ms-thumb { box-shadow: 2px 0 0 0 var(--text); } .plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]::-webkit-slider-thumb { box-shadow: 2px 0 0 0 var(--text); } .plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]::-webkit-slider-runnable-track { background-image: linear-gradient(to right, currentColor var(--value, 0), rgba(255, 255, 255, 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: rgba(255, 255, 255, 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 rgba(255, 255, 255, 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 rgba(255, 255, 255, 0.25); } .plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range].plyr__tab-focus::-ms-track { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25); } .plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]:active::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); } .plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]:active::-ms-thumb { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); } .plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]:active::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); } .column__heading { margin-top: 20px; margin-bottom: 3px; } .column__text p { margin-top: 0; } @media only screen and (max-width: 767px) { .section-columns .grid__item { margin-bottom: 25px; } .section-columns .grid__item p:last-child { margin-bottom: 0; } .section-columns .grid__item:not(:last-child) a.btn, .section-columns .grid__item:not(:last-child) .product__form__outer:not(.product__form--buybutton) a.product__submit__add, .product__form__outer:not(.product__form--buybutton) .section-columns .grid__item:not(:last-child) a.product__submit__add, .section-columns .grid__item:not(:last-child) .shopify-payment-button a.shopify-payment-button__button--unbranded, .shopify-payment-button .section-columns .grid__item:not(:last-child) a.shopify-payment-button__button--unbranded { margin-bottom: 40px; } } .section-columns .image__fill { overflow: hidden; border-radius: var(--image-shape); } .section-columns .background-size-cover { border-radius: var(--RADIUS-LG); } /*=== Hero Section Layout ==*/ .hero__content__wrapper { display: flex; position: absolute; top: 0; right: 0; z-index: 200; width: 100%; height: 100%; overflow: hidden; } .hero__content__wrapper.align--top-center .standard__image, .hero__content__wrapper.align--middle-center .standard__image, .hero__content__wrapper.align--bottom-center .standard__image { margin-left: auto; margin-right: auto; } .hero__content__wrapper.align--top-center .text-left .standard__image, .hero__content__wrapper.align--middle-center .text-left .standard__image, .hero__content__wrapper.align--bottom-center .text-left .standard__image { margin-left: 0; } .hero__content__wrapper.align--top-center .text-right .standard__image, .hero__content__wrapper.align--middle-center .text-right .standard__image, .hero__content__wrapper.align--bottom-center .text-right .standard__image { margin-right: 0; } .hero__content__wrapper.align--top-right .standard__image, .hero__content__wrapper.align--middle-right .standard__image, .hero__content__wrapper.align--bottom-right .standard__image { margin-left: auto; } .hero__content__wrapper.align--top-right .text-left .standard__image, .hero__content__wrapper.align--middle-right .text-left .standard__image, .hero__content__wrapper.align--bottom-right .text-left .standard__image { margin-left: 0; margin-right: auto; } [data-overlay-header] .hero__content__wrapper { padding-top: var(--header-padding); } .hero__title { color: var(--text); margin-bottom: 0.15em; } .hero__description { margin-bottom: 0.8em; color: var(--text-light); } .hero__description p { font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; margin-bottom: inherit; margin-top: inherit; } .hero__description a { text-decoration: underline; } .hero__description a:hover { text-decoration: none; } .hero__kicker { color: var(--text-light); } .hero__content { margin: var(--outer); padding: 60px; max-width: calc(50% - var(--outer)); background-color: var(--bg); border-radius: var(--RADIUS); } @media only screen and (min-width: 768px) and (max-width: 989px) { .hero__content { max-width: 66%; padding: 45px; } } @media only screen and (max-width: 767px) { .hero__content { max-width: calc(100% - var(--outer)); padding: 30px; } } .hero__content.hero__content--transparent { padding: 0; background-color: rgba(255, 255, 255, 0); box-shadow: none; } .hero__content__link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*=== Manage case where content and arrow overlap ==*/ .use_screen_full .align--bottom-center .hero__content { margin-bottom: 100px; } /*=== Manage case where header and content overlap ==*/ .main-content .borderless:first-child .align--top-left .hero__content, .main-content .borderless:first-child .align--top-right .hero__content, .main-content .borderless:first-child .align--top-center .hero__content { margin-top: 160px; } /*=== text legibility for timeshow overlap ==*/ .timeshow--overlayed .hero__content__wrapper { box-shadow: inset 0 -120px 120px -120px rgba(0, 0, 0, 0.4); } /* === Hero Scroll == */ .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%, 100% { transform: translate3d(0, 0, 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); } } /*================ Index Collection ================*/ .section-collection { position: relative; overflow: hidden; } .section-collection__inner { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; } .index__collection__title { color: var(--text-dark); margin-top: 20px; margin-bottom: 0; font-size: calc(22px * var(--FONT-ADJUST-BODY)); } @media only screen and (min-width: 1400px) { .index__collection__title { margin-top: 35px; } } .index__collection__title:last-child, .index__collection__subtitle:last-child { margin-bottom: 20px; } /* Index collection slideshow */ .section-collection-grid .flickity-button, .section-collection .flickity-button, .section-reviews .flickity-button, .section-icons .flickity-button { background: rgba(255, 255, 255, 0); } .section-collection-grid .flickity-button:hover, .section-collection .flickity-button:hover, .section-reviews .flickity-button:hover, .section-icons .flickity-button:hover { background: rgba(255, 255, 255, 0); } .section-collection-grid .flickity-button:focus, .section-collection .flickity-button:focus, .section-reviews .flickity-button:focus, .section-icons .flickity-button:focus { outline: none; box-shadow: none; } .section-collection-grid .flickity-button-icon, .section-collection .flickity-button-icon, .section-reviews .flickity-button-icon, .section-icons .flickity-button-icon { fill: var(--text-dark); } .section-collection-grid .flickity-prev-next-button, .section-collection .flickity-prev-next-button, .section-reviews .flickity-prev-next-button, .section-icons .flickity-prev-next-button { bottom: 30px; height: 100%; width: 70px; top: 45%; opacity: 0; transition: opacity 0.4s ease-out; } .section-collection-grid .flickity-button:disabled, .section-collection .flickity-button:disabled, .section-reviews .flickity-button:disabled, .section-icons .flickity-button:disabled { opacity: 0 !important; } .section-collection-grid:hover .flickity-prev-next-button, .section-collection:hover .flickity-prev-next-button, .section-reviews:hover .flickity-prev-next-button, .section-icons:hover .flickity-prev-next-button { opacity: 0.2; transition: opacity 0.4s ease-out; } .section-collection-grid:hover .flickity-prev-next-button:hover, .section-collection:hover .flickity-prev-next-button:hover, .section-reviews:hover .flickity-prev-next-button:hover, .section-icons:hover .flickity-prev-next-button:hover { opacity: 1; } .section-collection-grid .flickity-prev-next-button.next, .section-collection .flickity-prev-next-button.next, .section-reviews .flickity-prev-next-button.next, .section-icons .flickity-prev-next-button.next { right: -60px; } .section-collection-grid .flickity-prev-next-button.previous, .section-collection .flickity-prev-next-button.previous, .section-reviews .flickity-prev-next-button.previous, .section-icons .flickity-prev-next-button.previous { left: -60px; } @media only screen and (max-width: 989px) { .section-collection .flickity-prev-next-button.next { top: -30px; right: -6px; opacity: 0.2; width: 45px; } } @media only screen and (max-width: 989px) { .section-reviews .flickity-prev-next-button.next { top: -60px; right: -6px; opacity: 0.2; width: 45px; } } @media only screen and (min-width: 990px) { .reviews--1 .flickity-prev-next-button, .reviews--2 .flickity-prev-next-button, .reviews--3 .flickity-prev-next-button, .section-collection--1 .flickity-prev-next-button, .section-collection--2 .flickity-prev-next-button, .section-collection--3 .flickity-prev-next-button, .section-collection--4 .flickity-prev-next-button { display: none; } .reviews--1 .flickity-enabled.is-draggable .flickity-viewport, .reviews--2 .flickity-enabled.is-draggable .flickity-viewport, .reviews--3 .flickity-enabled.is-draggable .flickity-viewport, .section-collection--1 .flickity-enabled.is-draggable .flickity-viewport, .section-collection--2 .flickity-enabled.is-draggable .flickity-viewport, .section-collection--3 .flickity-enabled.is-draggable .flickity-viewport, .section-collection--4 .flickity-enabled.is-draggable .flickity-viewport { cursor: auto; } .reviews--1 .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down, .reviews--2 .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down, .reviews--3 .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down, .section-collection--1 .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down, .section-collection--2 .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down, .section-collection--3 .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down, .section-collection--4 .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: auto; } } /*================ section-mosaic ================*/ .section-mosaic__inner { display: flex; flex-flow: row wrap; align-items: center; } .section-mosaic__head { width: 100%; } /* mosaic grid */ .grid--mosaic { list-style: none; padding: 0; display: grid; margin-top: var(--inner); margin-left: calc(var(--gutter) * -1); overflow: hidden; } .grid--mosaic:after { content: ""; display: table; clear: both; } @media only screen and (max-width: 767px) { .grid--mosaic { margin-right: calc(var(--gutter) * -1); scroll-snap-type: x none; overflow: hidden; overflow-x: auto; display: flex; flex-flow: row nowrap !important; scroll-behavior: smooth; scrollbar-width: none; } .grid--mosaic:after { padding: 0 calc(var(--gutter) / 2); position: relative; clear: initial; display: block; } } .grid--mosaic .grid__item { margin-bottom: var(--gutter); } @media only screen and (max-width: 989px) { .grid--mosaic .grid__item { flex: 1 1 auto; } } @media only screen and (max-width: 767px) { .grid--mosaic .grid__item { flex: 0 0 46%; } } @media only screen and (max-width: 479px) { .grid--mosaic .grid__item { flex: 0 0 90%; } } .grid--mosaic .grid__item:nth-child(2) { grid-area: item2; } .grid--mosaic .grid__item:nth-child(1) { grid-area: item1; } .grid--mosaic .grid__item:nth-child(3) { grid-area: item3; } .grid--mosaic .grid__item .image__fill { flex: 1; } .grid--mosaic .collection-grid-item { width: 100%; height: 100%; display: flex; margin-bottom: 0; } @media only screen and (min-width: 768px) { .grid--mosaic-1 { grid-template-areas: "item1"; grid-template-rows: auto; grid-template-columns: repeat(1, minmax(0, 1fr)); } } @media only screen and (min-width: 768px) { .grid--mosaic-2 { grid-template-areas: "item1 item2"; grid-template-rows: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media only screen and (min-width: 768px) { .grid--mosaic-3 { grid-template-rows: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "item1 item1 item2" "item1 item1 item3"; } } @media only screen and (max-width: 989px) { .grid--mosaic-3 { display: flex; flex-wrap: wrap; } } @media only screen and (min-width: 768px) { .wrapper--narrow .grid--mosaic-3 { display: flex; flex-wrap: wrap; } .wrapper--narrow .grid--mosaic-3 .grid__item { width: 50%; } .wrapper--narrow .grid--mosaic-3 .grid__item:first-child { width: 100%; } .wrapper--narrow .grid--mosaic-3 .collection-grid-item__content { padding: 16px; } } @media only screen and (max-width: 989px) { .grid--mosaic-3 .grid__item { width: 50%; } .grid--mosaic-3 .grid__item:first-child { width: 100%; } } /*================ Collection Marbles ================*/ .collection-marble-item { position: relative; overflow: hidden; display: flex; width: 100%; flex-flow: row wrap; justify-content: center; align-items: center; margin-bottom: var(--gutter); } @media only screen and (max-width: 767px) { .collection-marble-item { margin-bottom: 0; } } .section-marbles .collection-marble-item { border-radius: 0; } .collection-marble-item .image__fill { width: var(--image-width); border-radius: var(--RADIUS); max-width: none; text-align: center; } .marble--circle .image__fill { -webkit-clip-path: circle(50%); clip-path: circle(50%); } .marbles__title { font-size: var(--font-size-custom); padding: var(--gutter) 0; margin: 0 var(--gutter); word-break: break-all; text-align: center; } .marbles__title.font-body, .marbles__title.font-body p { font-weight: var(--FONT-WEIGHT-BODY-MID); } .marbles__title p { margin: 0; } /* ============================================================================ #Collection Split ============================================================================== */ .collection-split__block { position: relative; color: var(--text); min-height: 415px; } @media only screen and (min-width: 768px) { .collection-split__block { height: 100%; min-height: auto; } } .collection-split__block--sticky { position: sticky; top: 0; max-height: 100vh; } .collection-split .hero__content__wrapper { padding: calc(var(--outer) * 2); } .collection-split .hero__content { max-width: 100%; } .collection-split .image__hero__frame { min-height: 415px; } @media only screen and (min-width: 768px) { .collection-split .image__hero__frame { min-height: auto; height: 100%; } } .collection-split .product-grid-item .placeholder-svg, .collection-split .collection-split__block, .collection-split .product-grid-item .lazy-image { overflow: hidden; border-radius: var(--RADIUS-LG); will-change: transform; } .collection-split .product-grid-item .image__fill { border-radius: 0; } .collection-split .product-grid-item .product__badge { top: 16px; left: 16px; } .collection-split__grid { display: grid; gap: var(--inner) var(--gutter); } @media only screen and (min-width: 768px) { .collection-split__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--gutter); } } @media only screen and (min-width: 768px) { .collection-split__item--last { order: 2; } .wrapper--none .collection-split__item--last + .collection-split__products { padding: 0 0 0 var(--gutter); } } @media only screen and (max-width: 767px) { .collection-split__products { display: flex; flex-flow: row nowrap; margin-left: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .wrapper--full .collection-split__products, .wrapper .collection-split__products { margin: 0 calc(var(--outer) * -1); } .collection-split__products:after { /* Make it work with iOS flex margin collapse */ padding: 0 calc(var(--outer) / 2); } } @media only screen and (min-width: 768px) { .wrapper--none .collection-split__products { padding-right: var(--gutter); } } .collection-split__product { flex: 0 0 var(--product-width); } @media only screen and (min-width: 768px) { .collection-split__product { margin-bottom: 40px; } .collection-split__product:last-child { margin-bottom: 0; } } @media only screen and (max-width: 767px) { .collection-split__product:first-child { margin-left: max(var(--outer) - var(--gutter), 0px); } } @media only screen and (min-width: 990px) { .collection-split__product:nth-last-child(-n+2) { margin-bottom: 0; } } .collection-split__product > .grid__item { padding-left: 0; } @media only screen and (min-width: 990px) { .collection-split__product.large-up--one-half:nth-child(2n+1) { clear: left; } } @media only screen and (min-width: 990px) { .collection-split__product.large-up--one-third:nth-child(3n+1) { clear: left; } } /*================ Map ================*/ .map--display-map .map__image { display: none !important; } .map__image { position: relative; border-radius: var(--RADIUS-LG); overflow: hidden; } @media only screen and (min-width: 990px) { .map--load-error { width: 50%; margin: 0 auto; } } .map--load-error .errors { width: 100%; } .map__container { min-height: 100%; border-radius: var(--RADIUS); } /*================ Logos ================*/ .logo-bar { display: flex; place-content: center space-between; align-items: center; flex-wrap: nowrap; margin: 15px calc(var(--outer) / -2) 0; } .logo-bar__item { display: inline-block; margin: 0 calc(var(--gutter) / 2); flex-grow: 1; flex-basis: 100%; } .logo-bar .logo-bar__item svg, .logo-bar .logo-bar__item .logo-bar__image { max-width: 160px; width: 100%; margin: 0 auto; } @media only screen and (max-width: 989px) { .logo-bar .logo-bar__item svg, .logo-bar .logo-bar__item .logo-bar__image { width: 100px; } } .logo-bar .logo-bar__item svg img, .logo-bar .logo-bar__item .logo-bar__image img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media only screen and (max-width: 989px) { .section-logos .wrapper { max-width: none; overflow: hidden; } .logo-bar { display: flex; flex-wrap: nowrap; overflow: auto hidden; scroll-snap-type: x none; scroll-behavior: smooth; padding-bottom: 30px; margin-left: calc(var(--outer) * -1); margin-right: calc(var(--outer) * -1); -ms-overflow-style: none; scrollbar-width: none; } .logo-bar::-webkit-scrollbar { display: none; } .logo-bar:after { content: ""; padding: calc(var(--outer) / 2); position: relative; clear: initial; display: block; } .logo-bar__item { flex: 0 0 auto; padding: 0 0 0 var(--gutter); margin: 0; } .logo-bar__item:first-child { margin-left: max(var(--outer) - var(--gutter), 0px); } } @media only screen and (max-width: 767px) { .logo-bar { padding-bottom: 0; margin-bottom: var(--gutter); scrollbar-width: none; -ms-overflow-style: none; /* for Internet Explorer, Edge */ } .logo-bar::-webkit-scrollbar { display: none; /* for Chrome, Safari, and Opera */ } } /*================ Index Timeline ================*/ :root { --timeshow-offset: 0; } /* Trick the editor for block position */ .timeshow { padding-top: 300px; margin-top: -300px; } .section-timeline { position: relative; z-index: 200; } .timeshow__wrapper { margin-top: var(--timeshow-offset); position: relative; z-index: 500; } @media only screen and (max-width: 767px) { .timeshow__wrapper p:last-child { margin-bottom: 0; } } .js .section-timeline .timeshow__wrapper { opacity: 0; transition: opacity 0.3s linear; } .js .section-timeline .timeshow__wrapper:not(.flickity-enabled) { display: flex; overflow-x: auto; } .js .section-timeline .flickity-enabled.timeshow__wrapper { opacity: 1; } @media only screen and (max-width: 767px) { .js .section-timeline .timeshow__wrapper { opacity: 1; } } .timeshow__wrapper:not(.flickity-enabled) .timeshow__block { flex: 0 0 auto; } .timeshow__block { width: 85%; padding-left: 16px; padding-right: 15px; } @media only screen and (min-width: 768px) and (max-width: 989px) { .timeshow__block { padding-left: 22px; width: 45%; } } @media only screen and (min-width: 990px) and (max-width: 1399px) { .timeshow__block { width: 33.33%; padding-left: 40px; } } @media only screen and (min-width: 1400px) { .timeshow__block { width: 25%; padding-left: 60px; } } @media only screen and (max-width: 767px) { .timeshow__block { margin-bottom: 25px; } } .timeshow__date { position: relative; padding-top: 7px; padding-bottom: 17px; margin-bottom: 20px; color: var(--text); } .timeshow__date:after { content: ""; height: 5px; background: var(--bg); left: 0; bottom: -1px; position: absolute; overflow: hidden; z-index: 0; width: 30px; } [data-overlay-header] .timeshow__date:after { background: var(--text); } .timeshow__text { color: var(--text); } @media only screen and (max-width: 767px) { .section-timeline .grid, .section-timeline .grid--full { margin-left: -30px; } .section-timeline .grid .grid__item, .section-timeline .grid--full .grid__item { padding-left: 30px; } } /* ---- Custom flickity index timeline ---- */ .timeshow__wrapper .flickity-button { color: var(--text); background: rgba(255, 255, 255, 0); } .timeshow__wrapper .flickity-button:hover { background: rgba(255, 255, 255, 0); } .timeshow__wrapper .flickity-button:focus { outline: none; box-shadow: none; } .timeshow__wrapper .flickity-prev-next-button { width: 90px; height: 300px; transform: none; top: 0; display: flex; align-items: center; } .timeshow__wrapper .flickity-prev-next-button .flickity-button-icon { position: absolute; width: 18px; height: 32px; left: initial; right: initial; top: 5px; } @media only screen and (max-width: 989px) { .timeshow__wrapper .flickity-prev-next-button { display: none; } } .timeshow__wrapper .flickity-prev-next-button.previous { left: 0; justify-content: flex-start; } .timeshow__wrapper .flickity-prev-next-button.previous .flickity-button-icon { left: 15px; } .timeshow__wrapper .flickity-prev-next-button.next { right: 0; justify-content: flex-end; } .timeshow__wrapper .flickity-prev-next-button.next .flickity-button-icon { right: 15px; } .timeshow__wrapper .flickity-button-icon { fill: var(--text-dark); } .timeshow--offset .timeshow__wrapper .flickity-prev-next-button { top: 0; } .timeshow--offset .timeshow__wrapper .flickity-button-icon { fill: var(--bg); } /* ============================================================================ # Home slideshow ============================================================================== */ .homepage-slideshow { position: relative; } .homepage-slideshow.dots--left .flickity-page-dots { left: var(--outer); } .homepage-slideshow.dots--right .flickity-page-dots { right: var(--outer); } .homepage-slideshow.dots--center .flickity-page-dots { right: var(--outer); left: var(--outer); text-align: center; } @media only screen and (max-width: 767px) { .slideshow__wrapper { padding-bottom: 25px; } .slideshow__wrapper ~ .custom-scrollbar { margin-bottom: 25px; } } .slideshow__slide { width: 100%; } .slideshow__slide .hero__content { position: relative; z-index: 50; } @media only screen and (max-width: 767px) { .slideshow__slide .image__hero__frame { min-height: 100% !important; } } /* Slideshow - show only first slide when loading */ @media only screen and (min-width: 768px) { .slideshow__wrapper:not(.flickity-enabled) > .slideshow__slide:not(:first-of-type) { display: none; } } @media only screen and (min-width: 768px) { .no-js .slideshow__wrapper:not(.flickity-enabled) > .slideshow__slide:not(:first-of-type) { display: block; } } /* end */ .homepage-slideshow .flickity-enabled.is-draggable .flickity-viewport { cursor: default; } .homepage-slideshow .flickity-page-dots { position: absolute; width: auto; bottom: var(--outer); } .homepage-slideshow .flickity-page-dots .flickity-page-dot { display: inline-block; width: 15px; height: 15px; margin: 0 20px; border: 1px solid var(--text); background-color: rgba(255, 255, 255, 0); opacity: 1; } .homepage-slideshow .flickity-page-dots .flickity-page-dot.is-selected { background-color: var(--text); } .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; } @media only screen and (max-width: 767px) { .homepage-slideshow--rounded .wrapper .slideshow__wrapper, .homepage-slideshow--rounded .wrapper--full .slideshow__wrapper, .homepage-slideshow--rounded .wrapper--narrow .slideshow__wrapper { margin-right: calc(var(--outer) * -1); margin-left: calc(var(--outer) * -1); } .homepage-slideshow--rounded .wrapper .slideshow__wrapper:after, .homepage-slideshow--rounded .wrapper--full .slideshow__wrapper:after, .homepage-slideshow--rounded .wrapper--narrow .slideshow__wrapper:after { padding: 0 calc(var(--outer) / 2); position: relative; clear: initial; display: block; } } @media only screen and (max-width: 767px) { .homepage-slideshow--rounded .wrapper .slideshow__slide, .homepage-slideshow--rounded .wrapper--full .slideshow__slide, .homepage-slideshow--rounded .wrapper--narrow .slideshow__slide { width: 90%; padding-left: var(--outer); } .homepage-slideshow--rounded .wrapper .slideshow__slide:last-child, .homepage-slideshow--rounded .wrapper--full .slideshow__slide:last-child, .homepage-slideshow--rounded .wrapper--narrow .slideshow__slide:last-child { margin-right: 0; } } /*================ Index Reviews ================*/ .section-reviews { position: relative; overflow: hidden; } .section-reviews__inner { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; } .reviews { margin-top: 30px; position: relative; } .review__dots { position: absolute; right: -70px; z-index: 0; } .review__dots .dots__wrapper { width: 150px; } .review__card { width: 100%; position: relative; z-index: 100; } .review__item { padding-left: 30px; padding-right: 15px; } @media only screen and (min-width: 990px) { .review__item { padding-left: 60px; } } .reviews--1 .review__item { width: 100%; } .reviews--2 .review__item { width: 85%; padding-left: 30px; padding-right: 15px; } @media only screen and (min-width: 768px) { .reviews--2 .review__item { width: 50%; } } .review__image__align { display: flex; width: 100%; justify-content: center; align-items: flex-start; padding-left: 25px; transition: all 0.3s linear; } .review__image__wrapper { position: relative; width: 100px; height: 100px; border-radius: 100px; display: block; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.07); } .team__button__wrapper .review__image__wrapper { width: 100px; height: 100px; border-radius: 100px; } .review__name, .review__title { margin-bottom: 0; } .review__title { margin-top: 4px; } .review__name { margin-top: 18px; } .review__stars { margin-top: 0; margin-bottom: 10px; } .review__stars li { display: inline-block; color: var(--secondary); } .review__stars li svg { width: 15px; } .review__card__text { transition: all 0.3s linear; padding: 30px; margin-top: 50px; position: relative; background: var(--bg-accent); border-radius: var(--RADIUS); } .review__image__align + .review__card__text { margin-top: -50px; padding-top: 50px; } .review__card__text__contents { position: relative; z-index: 10; } .bg--accent .review__card__text { background: var(--bg); } .decoration-modern .review__card__text { padding: 0; margin-top: 0; background: transparent !important; } .decoration-modern .review__card__text:after { content: ""; background: var(--bg-accent); inset: -50px 25px -30px 25px; position: absolute; overflow: hidden; z-index: 0; } .decoration-modern .review__image__align { padding-left: 0 !important; } .decoration-modern .palette--light.bg--accent .review__card__text:after, .decoration-modern .palette--dark.bg--invert--accent .review__card__text:after { background: var(--hairline); } .bg--accent .review__card__text, .bg--invert--accent .review__card__text { background-color: var(--hairline); } .reviews:not(.reviews--1) .slide--left .review__image__align { justify-content: flex-start; padding-left: 25px; } .reviews:not(.reviews--1) .slide--left .review__card__text:after { right: 50px; left: 25px; } .slide--center .review__card__text, .reviews--1 .slide--left .review__card__text { text-align: center; } .slide--right .review__image__align { justify-content: flex-end; } .slide--right .review__card__text { text-align: right; } .slide--right .review__card__text:after { right: 25px; left: 50px; } @media only screen and (max-width: 767px) { .review__card__text { text-align: left !important; padding-right: 15px !important; } .review__image__align { justify-content: flex-start !important; padding-left: 25px; } } /*=== Text sections ==*/ .text__standard *:not(.standard__icon, .standard__cta):last-child { margin-bottom: 0; } .standard__heading { font-family: var(--FONT-STACK-HEADING); font-weight: var(--FONT-WEIGHT-HEADING); font-style: var(--FONT-STYLE-HEADING); } .standard__kicker { font-family: var(--FONT-STACK-ACCENT); font-weight: var(--FONT-WEIGHT-ACCENT); font-style: var(--FONT-STYLE-ACCENT); } .caps-true { text-transform: uppercase; letter-spacing: 1.5px; } .standard__kicker p, .standard__heading p, .standard__rte p { font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; margin-bottom: inherit; margin-top: inherit; } .standard__kicker a, .standard__heading a, .standard__rte a { text-decoration: underline; transition: opacity 0.3s linear; } .standard__kicker a:hover, .standard__heading a:hover, .standard__rte a:hover { opacity: 0.8; text-decoration: none; } .standard__kicker, .standard__heading, .standard__rte, .standard__cta, .standard__icon, .standard__image { margin-bottom: var(--line); } .standard__image img { width: 100%; height: auto; } .standard__kicker { font-weight: var(--FONT-WEIGHT-BODY-MID); margin-top: 0; } .standard__cta.btn--large { margin-top: 1rem; } .standard__cta.btn--large { margin-top: 1rem; } .standard__cta.text-link { display: inline-block; margin: var(--btn-top) 0; font-weight: var(--FONT-WEIGHT-BODY-MID); line-height: 1; padding: 5px 0; } .standard__cta + .standard__cta, .standard__cta + .standard__icon, .standard__icon + .standard__cta { margin-left: 12px; margin-bottom: var(--line); } .section-text .standard__cta.btn--neutral:not(.hero__btn.btn) { --btn-text: var(--text); } .standard__icon { overflow: hidden; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 50%; margin: var(--line) 0; vertical-align: middle; } .standard__icon:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--stroke); opacity: 0.25; } .standard__icon svg { width: 40%; height: 40%; } .standard__icon svg path, .standard__icon svg g, .standard__icon svg circle { fill: none !important; stroke: var(--stroke) !important; } .text-center .standard__image { margin-left: auto; margin-right: auto; } .text-left .standard__image { margin-left: 0; margin-right: auto; } .text-right .standard__image { margin-left: auto; margin-right: 0; } .columns--2 { -moz-columns: 2 180px; columns: 2 180px; -moz-column-gap: var(--gutter); column-gap: var(--gutter); } .columns--3 { -moz-columns: 3 180px; columns: 3 180px; -moz-column-gap: var(--gutter); column-gap: var(--gutter); } .columns--4 { -moz-columns: 4 180px; columns: 4 180px; -moz-column-gap: var(--gutter); column-gap: var(--gutter); } .product__rating { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; color: var(--text); font-weight: var(--FONT-WEIGHT-BODY-MID); } .text-left .product__rating { justify-content: flex-start; } .text-center .product__rating { justify-content: center; } .product__rating__count { color: var(--text-light); } .product__rating__star { color: var(--primary); margin: 0 8px 0px 0px; display: flex; align-items: center; } .jdgm-prev-badge__stars{ display:none !important; } /* Product details page */ .rating__wrapper__title { margin-top: -4px; color: var(--text); } .rating__wrapper__title .product__rating { font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); } .rating__wrapper__title .product__rating__star svg { width: 120px; height: 24px; } /* Product grid item reviews */ .product-grid-item .product__rating__star, .rating__wrapper__search .product__rating__star { margin: -2px 4px 0 4px; } .product-grid-item .product__rating__star svg, .rating__wrapper__search .product__rating__star svg { width: 1em; } .product-grid-item .product__rating, .rating__wrapper__search .product__rating { font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY)); } /* Search reviews */ .rating__wrapper__search .product__rating { justify-content: flex-start; } /* ============================================================================ #Recipient Form ============================================================================== */ .recipient-form { margin-bottom: 12px; } .recipient-fields { margin-top: 7px; } .recipient-form__max-chars { display: block; text-align: right; } .recipient-form input[type=checkbox]:checked ~ .recipient-fields { display: block; } .js .recipient-form .recipient-fields { display: none; } .select-popout { position: relative; margin-bottom: 10px; text-align: left; } .select-popout > .quantity-selector { display: none; } .select-popout.popout-container--alt > *:not(.quantity-selector) { display: none; } .select-popout.popout-container--alt > .quantity-selector { display: block; } .select-popout__toggle { position: relative; overflow: hidden; display: block; width: 100%; padding: 14px 40px 14px 20px; border: 1px solid var(--border); border-radius: var(--RADIUS-SM); line-height: 1.3; text-align: inherit; white-space: nowrap; text-overflow: ellipsis; } .select-popout__toggle:before { position: absolute; top: 50%; right: 20px; content: ""; display: inline-block; width: 6px; height: 6px; border-width: 0 0 1px 1px; border-style: solid; border-color: var(--secondary); margin: -7px 0 0; vertical-align: middle; transform: rotate(-45deg); transform-origin: 50% 50%; transition: all 0.4s; } .select-popout__toggle[aria-expanded=true]:before { margin-top: -4px; transform: rotate(135deg); } .select-popout__list { position: absolute; top: 100%; left: 0; z-index: 1001; overflow: hidden auto; max-height: 350px; width: 100%; border: 1px solid var(--border); border-top: none; margin: -1px 0 0; padding-left: 0; background: var(--bg); list-style: none outside none; opacity: 0; visibility: hidden; height: 0; pointer-events: none; transition: opacity 0.4s, visibility 0.4s; } .select-popout__list.popout-list--visible { opacity: 1; visibility: visible; pointer-events: auto; height: auto; } .select-popout__list .sold-out, .select-popout__list .unavailable { text-decoration: line-through; } .select-popout__item { display: block; margin-bottom: 0; } .select-popout__item--current .select-popout__option { background: var(--hairline); } .select-popout__option { display: block; padding: 14px 20px; color: inherit; transition: background 0.4s; } .select-popout__option:hover { background: var(--color-accent); } .select-popout--small { max-width: 120px; } .range { position: relative; display: block; height: 36px; margin-left: -8px; margin-right: -8px; -webkit-user-select: none; -moz-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: white; border: 3px solid var(--color-accent); 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: 6px; border-radius: 4px; background: var(--border); } .range__line span { display: block; height: 100%; width: 0%; background: var(--color-accent); font-size: 0; } /*================ Collection Filters ================*/ .collection-filters { --padding-filter: 20px 30px 20px 15px; } @media only screen and (max-width: 767px) { .collection-filters { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; margin-bottom: 0; } } .collection-filters__mobile-buttons { --padding-filter: 20px 30px; position: sticky; top: 10px; z-index: 999; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: stretch; clear: both; width: 100%; margin-bottom: 15px; /* padding-left: var(--gutter); */ } .has-sticky-header .collection-filters__mobile-buttons { top: calc(var(--header-height) + 10px); } .collection-filters__mobile-buttons button { width: calc(50% - var(--gutter) / 2); } .collection-filters__mobile-buttons button:first-child:last-child { width: 100%; } /*================ Collection Active Filters ================*/ .collection__active__filters { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; margin: 2em -5px 10px; } .collection__active__filters a { padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--RADIUS-SM); margin: 5px; font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY)); font-weight: var(--FONT-WEIGHT-BODY-MID); color:black !important; } .collection__active__filters span { margin-right: 5px; font-weight: 700; } @media only screen and (max-width: 767px) { .collection__active__filters { overflow-x: auto; display: inline-block; width: 100%; margin: 0em -5px 10px; padding: 10px 0; white-space: nowrap; } } /*================ Collection Filters ================*/ .filters__holder { border: 1px solid var(--color-gray-500); /* border-radius: var(--RADIUS-SM); */ } .filters__holder form .filters__button { display: none; } @media only screen and (max-width: 767px) { .filters__holder { order: 1; width: 49%; border: none; } .filters__holder:first-child:last-child { width: 100%; } .filters__holder form { visibility: hidden; overflow-y: auto; position: fixed; top: 0; left: -100%; z-index: 11000; width: 100%; height: 100%; background-color: var(--bg); opacity: 0; transition: all 0.3s ease; } .filters__holder form.drawer--visible { visibility: visible; left: 0; opacity: 1; } .has-sticky-header .filters__holder form { top: var(--header-height); height: calc(100% - 1px - var(--header-height)); margin-top: 1px; } .filters__holder form .filters__button { position: sticky; top: 0; z-index: 200; display: flex; border: none; border-bottom: 1px solid var(--border); box-shadow: none; } } .filters__button { display: flex; align-items: center; width: 100%; padding: 13px; background-color: var(--bg); font-weight: var(--FONT-WEIGHT-BODY-MID); font-size: var(--font-base); color: var(--color-dark); text-align: left; border-radius: inherit; } /* .popout--sort .filters__button.popout__toggle { font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); } */ @media only screen and (max-width: 767.98px) { .filters__button { justify-content: center; border: 1px solid var(--color-gray-500); border-radius: var(--RADIUS-SM); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .popout--sort .filters__button.popout__toggle { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .filters__button .icon { margin-left: auto; } } .filters__button.drawer--visible { border-radius: 0; } .section-search .filters__button { padding: 14px; } .filters__active-count { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; padding: 3px 5px; margin-left: 5px; border-radius: 3px; line-height: 1; background-color: var(--color-accent); font-size: calc(var(--font-1) * var(--FONT-ADJUST-BODY)); color: var(--bg); } .filters__counter-products { margin-left: auto; font-weight: 400; font-size: var(--font-sm); color: var(--color-dark); } @media only screen and (max-width: 767px) { .filters__counter-products { margin-right: 20px; } } .filter { border-top: 1px solid var(--color-gray-500); } .filter .is-hidden, .filter .filter__option.is-hidden { display: none; } @media only screen and (max-width: 767px) { .filters__button + .filter { border-top: none; } } .filter__heading { position: relative; display: flex; align-items: center; width: 100%; padding: 13px; font-weight: var(--FONT-WEIGHT-BODY-MID); font-size: var(--font-base); color: var(--color-dark); text-align: left; } .filter__heading .icon { position: absolute; top: 50%; right: 14px; width: 12px; height: 12px; transform: translateY(-50%) rotate(0deg); transition: transform 0.3s; } @media only screen and (max-width: 767px) { .filter__heading .icon { right: 20px; } } .filter__heading.accordion-is-open .icon { transform: translateY(-50%) rotate(90deg); } .filter__heading-label { margin-right: 3px; } .filter__heading-value { margin-left: 3px; padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-light); border-left: 1px solid var(--border); line-height: 1; } .filter__heading-value:empty { opacity: 0; } .filter__options { padding: 13px; padding-top: 0; margin: 0; } @media only screen and (max-width: 767px) { .filter__options:not(.filter__price) { padding-right: 0; } } .filter__price__fields { display: flex; align-items: center; justify-content: flex-start; max-width: 100%; margin-top: 10px; } .filter__price__field { display: flex; align-items: center; flex: 1; max-width: calc(50% - 10px); padding: 3.5px 0; border: 1px solid var(--color-gray-500); border-radius: unset; font-size: 12px; } .filter__price__field span { margin: 0 5px; } .filter__price__spacer { flex: 0 0 20px; 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: ""; } .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: 12px; font-weight: inherit; text-align: right; -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } .filter__navigation__list { list-style: none; margin: 0; } .filter__option { position: relative; margin: 0; } .filter__option + .filter__option { margin-top: 12px; } .filter__option input { position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; } .filter__option label { position: relative; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; padding-left: calc(20px * var(--FONT-ADJUST-BODY)); font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); } .filter__option label .icon { visibility: hidden; position: absolute; top: 50%; left: calc(2px * var(--FONT-ADJUST-BODY)); width: calc(10px * var(--FONT-ADJUST-BODY)); height: calc(10px * var(--FONT-ADJUST-BODY)); margin: 0; color: var(--bg); opacity: 0; transform: translateY(-50%); } .filter__option label:before { content: ""; position: absolute; top: 50%; left: 0; width: 12px; height: 12px; border: 1px solid var(--color-gray-600); border-radius: unset; transform: translateY(-50%); } .filter__option input:checked + label:before { background-color: var(--color-accent); border-color: var(--color-accent); } .filter__option input:checked + label .icon { visibility: visible; opacity: 1; } .filter__option input:disabled + label { opacity: 0.5; pointer-events: none; } .filter__button__image { display: flex; align-items: center; justify-content: flex-start; } .filter__show-more { display: none; margin: 0 15px 20px; padding: 0; font-size: calc(var(--font-2) * var(--FONT-ADJUST-BODY)); color: var(--text-light); border-bottom: 1px solid var(--border); font-weight: var(--FONT-WEIGHT-BODY-MID); } .accordion-is-open ~ .filter__show-more { display: block; } .popout--sort { margin-bottom: 20px; } .popout--sort .popout__toggle { position: relative; display: flex; align-items: flex-start; align-items: center; width: 100%; padding: 13px; border: 1px solid var(--color-gray-500); border-radius: unset; background-color: var(--bg); font-size: var(--font-base); text-align: left; font-weight:500; color: var(--color-dark); text-transform: none; letter-spacing: 0; } .popout--sort .icon { position: absolute; top: 50%; right: 10px; width: 12px; height: 12px; transform: translateY(-50%) rotate(90deg); transition: transform 0.3s; } .popout--sort [aria-expanded=true] .icon { transform: translateY(-50%) rotate(-90deg); } .popout--sort .popout-list { bottom: auto; top: 100%; width: 100%; max-height: 350px; /* border-radius: var(--RADIUS-SM); */ margin-top: 10px; } @media only screen and (max-width: 767px) { .popout--sort { order: 2; width: calc(50% - var(--gutter) / 2); margin-bottom: 0; } .popout--sort:first-child:last-child { width: 100%; } .popout--sort .popout__toggle { justify-content: center; height: 100%; box-shadow: 0 2px 5px var(--border); } .popout--sort .icon { display: none; } } /* Tabs/Accordion Truncated/Description */ .accordion__body__entry--truncate, .tab-content__entry--truncate, .product-description__content--truncate { display: none; opacity: 0; visibility: hidden; pointer-events: none; } .accordion__body__actions, .tab-content__actions, .product-description__actions { display: none; } .accordion__body__actions .text-link-default, .tab-content__actions .text-link-default, .product-description__actions .text-link-default { font-style: italic; } .accordion__body__actions button, .tab-content__actions button, .product-description__actions button { padding: 0; } .tab__scroll, .accordion__body__holder, .tab-content__holder { position: relative; word-break: break-word; } .accordion__body__holder.is-expanded .accordion__body__entry:not(.accordion__body__entry--truncate), .accordion__body__holder.is-expanded .tab-content__entry:not(.tab-content__entry--truncate), .accordion__body__holder.is-expanded .product-description__content:not(.product-description__content--truncate), .tab-content__holder.is-expanded .accordion__body__entry:not(.accordion__body__entry--truncate), .tab-content__holder.is-expanded .tab-content__entry:not(.tab-content__entry--truncate), .tab-content__holder.is-expanded .product-description__content:not(.product-description__content--truncate), .product-description__holder.is-expanded .accordion__body__entry:not(.accordion__body__entry--truncate), .product-description__holder.is-expanded .tab-content__entry:not(.tab-content__entry--truncate), .product-description__holder.is-expanded .product-description__content:not(.product-description__content--truncate) { display: none; } .accordion__body__holder.is-expanded .accordion__body__entry--truncate, .accordion__body__holder.is-expanded .tab-content__entry--truncate, .accordion__body__holder.is-expanded .product-description__content--truncate, .tab-content__holder.is-expanded .accordion__body__entry--truncate, .tab-content__holder.is-expanded .tab-content__entry--truncate, .tab-content__holder.is-expanded .product-description__content--truncate, .product-description__holder.is-expanded .accordion__body__entry--truncate, .product-description__holder.is-expanded .tab-content__entry--truncate, .product-description__holder.is-expanded .product-description__content--truncate { position: relative; display: block !important; opacity: 1; visibility: visible; pointer-events: auto; } .accordion__body__holder.is-expanded .accordion__body__actions, .accordion__body__holder.is-expanded .tab-content__actions, .accordion__body__holder.is-expanded .product-description__actions, .tab-content__holder.is-expanded .accordion__body__actions, .tab-content__holder.is-expanded .tab-content__actions, .tab-content__holder.is-expanded .product-description__actions, .product-description__holder.is-expanded .accordion__body__actions, .product-description__holder.is-expanded .tab-content__actions, .product-description__holder.is-expanded .product-description__actions { display: block; } .custom-scrollbar { position: relative; display: none; width: 100%; height: 5px; padding: 0; background-color: var(--bg-accent); border-radius: var(--RADIUS-SM); margin-top: 20px; } .bg--accent .custom-scrollbar { background-color: var(--hairline); } .wrapper--none .custom-scrollbar { width: calc(100% - var(--outer) * 2); margin: 0 var(--outer); } .custom-scrollbar__track { position: absolute; top: 0; left: 0; width: var(--track-width); height: 100%; background-color: var(--dull); border-radius: var(--RADIUS-SM); transform: translateX(var(--position)); transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); will-change: transform; } .popup { position: relative; } .popup .popup__inner { position: fixed; bottom: 0; display: none; max-width: 400px; width: calc(100% - var(--gutter) * 2); padding: 20px; margin: var(--gutter); background: inherit; box-shadow: 0 0 10px var(--COLOR-A5); } .popup .popup__inner.align--middle-left > *:first-child { padding-right: 35px; } .popup .popup__inner.align--middle-center > *:first-child { padding: 0 35px; } .popup .popup__inner.align--middle-right > *:first-child { padding-left: 35px; } .popup .popup__inner.align--middle-right .close { right: auto; left: 0; } #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 form, .popup .input-group, .popup .standard__cta { margin-bottom: 0; } .popup .input-group--inner-button { padding: 0; border: none; border-bottom: 1px solid currentcolor; border-radius: 0; margin: 0; color: inherit; } .popup .input-group { padding-left: 10px; } .popup .input-group .input-group-field { padding-left: 0; color: inherit; } .popup .input-group .input-group-field::-moz-placeholder { 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:hover, .popup .input-group .input-group-field:-webkit-autofill:focus, .popup .input-group .input-group-field:-webkit-autofill:active { -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 .icon--wide { width: 26px; } .popup .popup__title { margin: 0 0 10px; font-size: calc(18px * var(--FONT-ADJUST-BODY)); font-weight: var(--FONT-WEIGHT-BODY-BOLD); } .popup button { margin: 0; } .popup p a { text-decoration: underline; } .popup p a:hover { text-decoration: none; } .popup p { font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); margin-bottom: 15px; } .popup p:first-child:nth-last-child(2) { margin: 0; } .popup button + a { margin-left: 10px; } .popup .close { position: absolute; top: 0; right: 0; padding: 15px; color: inherit; } .popup .close:hover svg { transform: rotate(90deg); } .popup .close svg { transition: transform 0.3s; width: 20px; height: auto; } .popup.popup--left .popup__inner { left: 0; } .popup.popup--right .popup__inner { right: 0; } @media only screen and (min-width: 768px) { .popup.popup--bottom .popup__inner { left: 0; right: 0; bottom: 0; flex-flow: row wrap; max-width: none; width: auto; margin: 0; padding: 10px 36px; } .popup.popup--bottom .popup__inner[style*="display: block"] { display: flex !important; } .popup.popup--bottom .popup__inner > *:first-child, .popup.popup--bottom .popup__inner p, .popup.popup--bottom .popup__inner p:nth-child(2), .popup.popup--bottom .popup__inner > a:not(.btn), .popup.popup--bottom .popup__inner > button:not(.close) { margin: 5px 8px; font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY)); } .popup.popup--bottom .popup__inner > *:first-child:before, .popup.popup--bottom .popup__inner p:before, .popup.popup--bottom .popup__inner p:nth-child(2):before, .popup.popup--bottom .popup__inner > a:not(.btn):before, .popup.popup--bottom .popup__inner > button:not(.close):before { display: none; } .popup.popup--bottom .popup__inner > *:first-child, .popup.popup--bottom .popup__inner p, .popup.popup--bottom .popup__inner p:nth-child(2), .popup.popup--bottom .popup__inner > a:not(.btn) { padding: 0; } } @media only screen and (min-width: 768px) { .popup.popup--bottom .popup__inner .close { top: 50%; padding: 20px; transform: translateY(-50%); } } .popup.popup--center .popup__inner { top: 50%; left: 50%; bottom: auto; margin: 0; max-width: 350px; transform: translate(-50%, -50%); } .popup.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: 0; } .popup:not(.popup--center):first-child:last-child .popup__inner { bottom: 0; } } [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-promo-text][data-popup-delay=always], [data-popup-delay=always] > * { z-index: 9995; } [data-promo-text][data-popup-delay=delay], [data-popup-delay=delayed] > * { z-index: 9994; } [data-popup-delay]:not([data-popup-delay=always], [data-popup-delay=delayed], [data-tracking-consent]) { z-index: 9992; } /*================ Section Press ================*/ .section-press__inner { overflow: hidden; padding: calc(var(--inner) * 2) 0; border-radius: var(--RADIUS-LG); text-align: center; } .section-press__content { display: flex; flex-direction: column; overflow: hidden; } /*================ Press Slider ================*/ .press__slider:after { content: "flickity"; display: none; } @media only screen and (max-width: 989px) { .press__slider:not(.press__slider--text):after { content: ""; } } .press__slider:not(.flickity-enabled) { display: flex; justify-content: center; align-items: center; flex-direction: row; } @media only screen and (max-width: 989px) { .press__slider:not(.flickity-enabled) { overflow-x: auto; display: block; padding-bottom: 30px; margin-bottom: -30px; white-space: nowrap; font-size: 0; text-align: center; -webkit-overflow-scrolling: touch; } .no-js .press__slider:not(.flickity-enabled) { white-space: normal; } } .no-js .press__slider:not(.press__slider--text) { overflow-x: auto; } .press__slider:not(.press__slider--text, :only-child) { order: 1; margin-top: var(--outer); } .press__slider--text { overflow: hidden; } .no-js .press__slider--text { display: block; } .js .press__slider--text:not(.flickity-enabled) .press__slide:not(:first-child) { display: none; } .press__slider--text .flickity-slider { touch-action: pan-y; } .press__slider--text .press__slide, .press__slider--text .press__slide__inner { width: 100%; transition: transform 0.45s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.45s cubic-bezier(0.215, 0.61, 0.355, 1); } .no-js .press__slider--text .press__slide, .no-js .press__slider--text .press__slide__inner { opacity: 1; transform: none; } @media only screen and (min-width: 480px) and (max-width: 767px) { .press__slider--text .press__slide, .press__slider--text .press__slide__inner { backface-visibility: hidden; } } .press__slider--text .press__slide__inner { transform: translateY(-100%); } .press__slider--text .is-selected .press__slide__inner { transform: translateZ(0); transition: none; animation: fadeInUp 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); animation-delay: 0.3s; animation-fill-mode: backwards; } .press__slider:not(.press__slider--text) .press__slide { display: flex; align-items: center; min-height: 100%; } @media only screen and (max-width: 989px) { .press__slider:not(.press__slider--text) .press__slide { display: inline-block; width: auto; vertical-align: middle; } } .press__slide__inner { overflow: hidden; padding: 0 var(--inner); } .press__image { cursor: pointer; opacity: 0.5; width: var(--wid); max-height: var(--wid); margin: 0 var(--pad); transition: opacity 0.3s ease; } .press__image .background-size-cover { background-size: contain; background-repeat: no-repeat; } @media only screen and (max-width: 767px) { .press__image { margin: 0 calc(var(--pad) * 0.75); } } .press__slide a:hover .press__image, .press__slide.is-selected .press__image, .press__slide.is-active .press__image { opacity: 1; } .press__content { width: 100%; max-width: 760px; margin: 0 auto; } @keyframes fadeInUp { 0% { transform: translateY(20%); opacity: 0; } 80% { opacity: 1; } 100% { transform: translateZ(0); opacity: 1; } } /*================ Brick ================*/ .bricks { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; --menu-height: 0; --brick-radius: var(--RADIUS-LG); } @media only screen and (max-width: 767px) { .bricks { height: auto; } } @media only screen and (min-width: 768px) { .bricks .brick:first-child { border-radius: var(--brick-radius) 0 0 var(--brick-radius); } } @media only screen and (min-width: 768px) { .bricks .brick:last-child { border-radius: 0 var(--brick-radius) var(--brick-radius) 0; } } .bricks .brick:only-child { width: 100%; border-radius: var(--brick-radius); } .wrapper--none .bricks { --brick-radius: 0; } .bricks--margin .brick { width: calc(50% - var(--gutter) * 0.5); } @media only screen and (max-width: 767px) { .bricks--margin .brick { width: 100%; } } .bricks--margin .brick:first-child, .bricks--margin .brick:last-child { border-radius: var(--brick-radius); } @media only screen and (min-width: 768px) { .bricks--margin .brick + .brick { margin-left: var(--gutter); } } @media only screen and (max-width: 767px) { .bricks--reverse { flex-direction: column-reverse; } } @media only screen and (max-width: 767px) { .bricks--margin:not(.bricks--reverse) .brick + .brick { margin-top: var(--outer); } .bricks--margin.bricks--reverse .brick + .brick { margin-bottom: var(--outer); } } .brick { display: flex; align-items: stretch; position: relative; width: 50%; border-radius: var(--brick-radius); overflow: hidden; perspective: 1px; } @media only screen and (max-width: 767px) { .brick { width: 100%; } .bricks:not(.bricks--reverse, .bricks--margin) .brick:first-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .bricks:not(.bricks--reverse, .bricks--margin) .brick:last-child { border-top-left-radius: 0; border-top-right-radius: 0; } .bricks--reverse:not(.bricks--margin) .brick:first-child { border-top-left-radius: 0; border-top-right-radius: 0; } .bricks--reverse:not(.bricks--margin) .brick:last-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } .brick .grid__item { float: none; } .brick .newsletter-form { max-width: 380px; } .brick .input-group-btn button { height: 100%; } .brick .hero__content { max-width: 100%; } .brick .input-group--inner-button { border-color: var(--text-dark); } .text-center .newsletter-form { margin: 0 auto; } .text-right .newsletter-form { margin-left: auto; } .brick__image { position: relative; } .brick__text { height: 100%; width: 100%; display: flex; background-color: var(--bg); padding: var(--outer); color: var(--text); } .brick__text--middle { align-items: center; } .brick__text--bottom { align-items: flex-end; } .brick__image { width: 100%; } .brick__video { width: 100%; } .brick__video .image__hero__frame { width: 100%; } .brick__text-inner, .brick__product__wrapper { width: 100%; } .brick__product.palette--dark, .brick__product .grid__caption { background: rgba(255, 255, 255, 0); } .brick__product__wrapper { margin: 0 auto; width: var(--desktop-width); max-width: 350px; display: flex; align-items: center; justify-content: center; } @media only screen and (max-width: 767px) { .brick__product__wrapper { width: var(--mobile-width); } } .brick__product__inner { width: 100%; } .brick__product .grid__item { margin: 0; padding: 0; } .brick__meta { margin-bottom: 1rem; } .brick__meta span { padding: 0 5px; } .brick__author { font-weight: var(--FONT-WEIGHT-BODY-MID); } .brick__author img { vertical-align: middle; margin-bottom: 2px; margin-right: calc(var(--outer) / 2); border-radius: 100px; } /*================ Share ================*/ .share-holder { position: relative; z-index: 999; display: block; width: 100%; } .share-holder .icon { width: 20px; height: 20px; margin-right: 7px; vertical-align: middle; } .share-holder .icon-share path, .share-holder .icon-share g { fill: none !important; stroke: currentcolor !important; } .share-holder .icon-copy path:first-child { stroke: none !important; fill: none !important; } .share-holder .icon-copy path + path, .share-holder .icon-close path { fill: currentcolor !important; } .share-holder .is-hidden + .field__input, .share-holder .is-hidden + .share-button__copy { display: block; } .share__details { position: relative; width: 100%; } .share-button__fallback { position: absolute; top: 100%; left: 0; z-index: 9999; width: 100%; border: none; margin-top: -10px; border-radius: var(--RADIUS-SM); background-color: var(--border-light); } .share-button__fallback .field__input { overflow: hidden; display: none; margin: 0; background: none; border: none; width: 100%; box-sizing: border-box; padding-right: 60px; white-space: nowrap; text-overflow: ellipsis; } .share__button { font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); font-weight: var(--FONT-WEIGHT-BODY-MID); position: relative; display: flex; align-items: center; width: 100%; margin: 0; cursor: pointer; white-space: normal; text-align: left; list-style: none; } .share-button__copy, .share-holder .is-hidden { display: none; } .share-button__copy, .share-button__close { position: absolute; top: 50%; right: 10px; border: none; outline: none; transform: translateY(-50%); } .share-button__message { display: block; padding: 9px 16px; font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); line-height: 1.6; font-family: var(--FONT-STACK-BODY); font-weight: var(--FONT-WEIGHT-BODY); color: var(--text); } .share-button__message.is-hidden { padding: 0; } /*============ Add any custom styles below this line ==================*/ /* @media (max-width:460px){ .section--image { height:600px !important; } } */ .sliderule__wrapper{ display:flex !important; height:34px !important; justify-content:center; } .sliderow__text{ font-size:16px; } .jdgm-rev-widg { padding:30px 0px 0px !important; } .jdgm-row-stars{ display:flex !important; justify-content: space-between; } .jdgm-all-reviews__summary-text--verified { align-items: start !important; justify-content: start !important; } .jdgm-write-rev-link{ font-size:var(--font-md) !important; font-weight:var(--font-medium) !important; color:white !important; line-height:100% !important; padding:17.5px 26px !important; background:var(--color-accent) !important; border:1px solid transparent !important; transition: all 0.3s ease-in-out !important; } .jdgm-write-rev-link:hover{ color:var(--color-accent) !important; background:white !important; border:1px solid var(--color-accent) !important; } .jdgm-row-rating{ width:fit-content !important; display: flex; align-items: center; gap:9px; } .jdgm-rev__timestamp, .jdgm-rev__location{ font-size:var(--font-sm); font-weight:var(--font-medium); color:var(--color-dark); } @media (max-width:1179.98px){ .jdgm-rev-widg { padding:30px 20px !important; } } @media (max-width:689.98px){ .jdgm-row-stars { display: block !important; } .jdgm-rev-widg__header { text-align: start !important; } .jdgm-review-widget--medium .jdgm-write-rev-link, .jdgm-review-widget--medium .jdgm-ask-question-btn { margin: 0 !important; max-width: 100% !important; } a.jdgm-write-rev-link{ text-align:center !important; } .jdgm-write-rev-link { padding: 12.2px 26px !important; font-size:var(--font-base) !important; } .jdgm-rev-widg { padding: 30px 20px 20px !important; } } .jdgm-rev { padding: 16px 0 0 !important; } .jdgm-widget:not(.jdgm-review-widget--small,.jdgm-review-widget--medium) .jdgm-row-stars>div{ align-items:start !important; justify-content:start !important; } .jdgm-rev-widg__title{ text-align: start !important; font-size:22px !important; font-weight:var(--font-semibold); color:var(--color-dark); } .jdgm-rev-widg .jdgm-star, .jdgm-revs-tab .jdgm-star, .jdgm-all-reviews .jdgm-star, .jdgm-gallery-popup .jdgm-star { color:#FFD900 !important; color: #FFD900 !important; } .jdgm-histogram__bar-content { background-color: #FFD900 !important; border-radius: 12px !important; height:8px !important; } .jdgm-histogram__bar { border-radius: 12px !important; height:8px !important; } .jdgm-sort-dropdown-wrapper .jdgm-sort-dropdown, .jdgm-sort-dropdown-wrapper .jdgm-sort-dropdown-arrow { color: black !important; color:black; } .jdgm-rev__icon:before { color:black !important; } .jdgm-rev__author { color:black !important; font-size:16px; } .jdgm-widget .jdgm-verified-checkmark { width: 17px; height: 17px; display: none; } .jdgm-widget:not(.jdgm-review-widget--small,.jdgm-review-widget--medium) .jdgm-write-rev-link, .jdgm-widget:not(.jdgm-review-widget--small,.jdgm-review-widget--medium) .jdgm-ask-question-btn { background: #01C6B5; border: #01C6B5; } .jdgm-rev__icon { width: 66px; height: 66px; border-radius:100px; } /* Masquer le libellé + valeur sélectionnée pour l'option Couleur, sans toucher Taille */ fieldset[data-option-name="Couleur"] > legend, fieldset[data-option-name="Color"] > legend, fieldset[data-option-name="Couleur"] .form__label, fieldset[data-option-name="Color"] .form__label, fieldset[data-option-name="Couleur"] .product-form__selected-value, fieldset[data-option-name="Color"] .product-form__selected-value, fieldset[data-option-name="Couleur"] .product-option__name, fieldset[data-option-name="Color"] .product-option__name, fieldset[data-option-name="Couleur"] .product-option__value, fieldset[data-option-name="Color"] .product-option__value, fieldset[data-option-name="Couleur"] .swatch__header, fieldset[data-option-name="Color"] .swatch__header { display: none !important; }