/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ html { line-height: 1.15; -webkit-text-size-adjust: 100%; } body { margin: 0; } .h1, h1 { font-size: 2em; margin: 0.67em 0; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } [type="button"], [type="reset"], [type="submit"], button { -webkit-appearance: button; } [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; } [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring, button:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } .align-left { justify-content: flex-start; } .align-right { justify-content: flex-end; } .align-center { justify-content: center; } .align-justify { justify-content: space-between; } .align-spaced { justify-content: space-around; } .align-left.vertical.menu > li > a { justify-content: flex-start; } .align-right.vertical.menu > li > a { justify-content: flex-end; } .align-center.vertical.menu > li > a { justify-content: center; } .align-top { align-items: flex-start; } .align-self-top { align-self: flex-start; } .align-bottom { align-items: flex-end; } .align-self-bottom { align-self: flex-end; } .align-middle { align-items: center; } .align-self-middle { align-self: center; } .align-stretch { align-items: stretch; } .align-self-stretch { align-self: stretch; } .align-center-middle { justify-content: center; align-items: center; align-content: center; } .small-order-1 { order: 1; } .small-order-2 { order: 2; } .small-order-3 { order: 3; } .small-order-4 { order: 4; } .small-order-5 { order: 5; } .small-order-6 { order: 6; } @media print, screen and (min-width: 40em) { .medium-order-1 { order: 1; } .medium-order-2 { order: 2; } .medium-order-3 { order: 3; } .medium-order-4 { order: 4; } .medium-order-5 { order: 5; } .medium-order-6 { order: 6; } } @media print, screen and (min-width: 64em) { .large-order-1 { order: 1; } .large-order-2 { order: 2; } .large-order-3 { order: 3; } .large-order-4 { order: 4; } .large-order-5 { order: 5; } .large-order-6 { order: 6; } } @media screen and (min-width: 75em) { .xlarge-order-1 { order: 1; } .xlarge-order-2 { order: 2; } .xlarge-order-3 { order: 3; } .xlarge-order-4 { order: 4; } .xlarge-order-5 { order: 5; } .xlarge-order-6 { order: 6; } } .flex-container { display: flex; } .flex-child-auto { flex: 1 1 auto; } .flex-child-grow { flex: 1 0 auto; } .flex-child-shrink { flex: 0 1 auto; } .flex-dir-row { flex-direction: row; } .flex-dir-row-reverse { flex-direction: row-reverse; } .flex-dir-column { flex-direction: column; } .flex-dir-column-reverse { flex-direction: column-reverse; } @media print, screen and (min-width: 40em) { .medium-flex-container { display: flex; } .medium-flex-child-auto { flex: 1 1 auto; } .medium-flex-child-grow { flex: 1 0 auto; } .medium-flex-child-shrink { flex: 0 1 auto; } .medium-flex-dir-row { flex-direction: row; } .medium-flex-dir-row-reverse { flex-direction: row-reverse; } .medium-flex-dir-column { flex-direction: column; } .medium-flex-dir-column-reverse { flex-direction: column-reverse; } } @media print, screen and (min-width: 64em) { .large-flex-container { display: flex; } .large-flex-child-auto { flex: 1 1 auto; } .large-flex-child-grow { flex: 1 0 auto; } .large-flex-child-shrink { flex: 0 1 auto; } .large-flex-dir-row { flex-direction: row; } .large-flex-dir-row-reverse { flex-direction: row-reverse; } .large-flex-dir-column { flex-direction: column; } .large-flex-dir-column-reverse { flex-direction: column-reverse; } } @media screen and (min-width: 75em) { .xlarge-flex-container { display: flex; } .xlarge-flex-child-auto { flex: 1 1 auto; } .xlarge-flex-child-grow { flex: 1 0 auto; } .xlarge-flex-child-shrink { flex: 0 1 auto; } .xlarge-flex-dir-row { flex-direction: row; } .xlarge-flex-dir-row-reverse { flex-direction: row-reverse; } .xlarge-flex-dir-column { flex-direction: column; } .xlarge-flex-dir-column-reverse { flex-direction: column-reverse; } } .invisible { visibility: hidden; } @media screen and (max-width: 39.99875em) { .hide-for-small-only { display: none !important; } } @media screen and (max-width: 0em), screen and (min-width: 40em) { .show-for-small-only { display: none !important; } } @media print, screen and (min-width: 40em) { .hide-for-medium { display: none !important; } } @media screen and (max-width: 39.99875em) { .show-for-medium { display: none !important; } } @media screen and (min-width: 40em) and (max-width: 63.99875em) { .hide-for-medium-only { display: none !important; } } @media screen and (max-width: 39.99875em), screen and (min-width: 64em) { .show-for-medium-only { display: none !important; } } @media print, screen and (min-width: 64em) { .hide-for-large { display: none !important; } } @media screen and (max-width: 63.99875em) { .show-for-large { display: none !important; } } @media screen and (min-width: 64em) and (max-width: 74.99875em) { .hide-for-large-only { display: none !important; } } @media screen and (max-width: 63.99875em), screen and (min-width: 75em) { .show-for-large-only { display: none !important; } } @media screen and (min-width: 75em) { .hide-for-xlarge { display: none !important; } } @media screen and (max-width: 74.99875em) { .show-for-xlarge { display: none !important; } } @media screen and (min-width: 75em) { .hide-for-xlarge-only { display: none !important; } } @media screen and (max-width: 74.99875em) { .show-for-xlarge-only { display: none !important; } } .show-for-sr, .show-on-focus { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .show-on-focus:active, .show-on-focus:focus { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; } .hide-for-portrait, .show-for-landscape { display: block !important; } @media screen and (orientation: landscape) { .hide-for-portrait, .show-for-landscape { display: block !important; } } @media screen and (orientation: portrait) { .hide-for-portrait, .show-for-landscape { display: none !important; } } .hide-for-landscape, .show-for-portrait { display: none !important; } @media screen and (orientation: landscape) { .hide-for-landscape, .show-for-portrait { display: none !important; } } @media screen and (orientation: portrait) { .hide-for-landscape, .show-for-portrait { display: block !important; } } .grid-container { padding-right: 0.9375rem; padding-left: 0.9375rem; max-width: 1140px; margin: 0 auto; } @media print, screen and (min-width: 40em) { .grid-container { padding-right: 0.9375rem; padding-left: 0.9375rem; } } .grid-container.fluid { padding-right: 0.9375rem; padding-left: 0.9375rem; max-width: 100%; margin: 0 auto; } @media print, screen and (min-width: 40em) { .grid-container.fluid { padding-right: 0.9375rem; padding-left: 0.9375rem; } } .grid-container.full { padding-right: 0; padding-left: 0; max-width: 100%; margin: 0 auto; } .grid-x { display: flex; flex-flow: row wrap; } .cell { flex: 0 0 auto; min-height: 0; min-width: 0; width: 100%; } .cell.auto { flex: 1 1 0px; } .cell.shrink { flex: 0 0 auto; } .grid-x > .auto { width: auto; } .grid-x > .shrink { width: auto; } .grid-x > .small-1, .grid-x > .small-2, .grid-x > .small-3, .grid-x > .small-4, .grid-x > .small-5, .grid-x > .small-6, .grid-x > .small-7, .grid-x > .small-8, .grid-x > .small-9, .grid-x > .small-10, .grid-x > .small-11, .grid-x > .small-12, .grid-x > .small-full, .grid-x > .small-shrink { flex-basis: auto; } @media print, screen and (min-width: 40em) { .grid-x > .medium-1, .grid-x > .medium-2, .grid-x > .medium-3, .grid-x > .medium-4, .grid-x > .medium-5, .grid-x > .medium-6, .grid-x > .medium-7, .grid-x > .medium-8, .grid-x > .medium-9, .grid-x > .medium-10, .grid-x > .medium-11, .grid-x > .medium-12, .grid-x > .medium-full, .grid-x > .medium-shrink { flex-basis: auto; } } @media print, screen and (min-width: 64em) { .grid-x > .large-1, .grid-x > .large-2, .grid-x > .large-3, .grid-x > .large-4, .grid-x > .large-5, .grid-x > .large-6, .grid-x > .large-7, .grid-x > .large-8, .grid-x > .large-9, .grid-x > .large-10, .grid-x > .large-11, .grid-x > .large-12, .grid-x > .large-full, .grid-x > .large-shrink { flex-basis: auto; } } @media screen and (min-width: 75em) { .grid-x > .xlarge-1, .grid-x > .xlarge-2, .grid-x > .xlarge-3, .grid-x > .xlarge-4, .grid-x > .xlarge-5, .grid-x > .xlarge-6, .grid-x > .xlarge-7, .grid-x > .xlarge-8, .grid-x > .xlarge-9, .grid-x > .xlarge-10, .grid-x > .xlarge-11, .grid-x > .xlarge-12, .grid-x > .xlarge-full, .grid-x > .xlarge-shrink { flex-basis: auto; } } .grid-x > .small-1 { flex: 0 0 auto; width: 8.3333333333%; } .grid-x > .small-2 { flex: 0 0 auto; width: 16.6666666667%; } .grid-x > .small-3 { flex: 0 0 auto; width: 25%; } .grid-x > .small-4 { flex: 0 0 auto; width: 33.3333333333%; } .grid-x > .small-5 { flex: 0 0 auto; width: 41.6666666667%; } .grid-x > .small-6 { flex: 0 0 auto; width: 50%; } .grid-x > .small-7 { flex: 0 0 auto; width: 58.3333333333%; } .grid-x > .small-8 { flex: 0 0 auto; width: 66.6666666667%; } .grid-x > .small-9 { flex: 0 0 auto; width: 75%; } .grid-x > .small-10 { flex: 0 0 auto; width: 83.3333333333%; } .grid-x > .small-11 { flex: 0 0 auto; width: 91.6666666667%; } .grid-x > .small-12 { flex: 0 0 auto; width: 100%; } @media print, screen and (min-width: 40em) { .grid-x > .medium-auto { flex: 1 1 0px; width: auto; } .grid-x > .medium-shrink { flex: 0 0 auto; width: auto; } .grid-x > .medium-1 { flex: 0 0 auto; width: 8.3333333333%; } .grid-x > .medium-2 { flex: 0 0 auto; width: 16.6666666667%; } .grid-x > .medium-3 { flex: 0 0 auto; width: 25%; } .grid-x > .medium-4 { flex: 0 0 auto; width: 33.3333333333%; } .grid-x > .medium-5 { flex: 0 0 auto; width: 41.6666666667%; } .grid-x > .medium-6 { flex: 0 0 auto; width: 50%; } .grid-x > .medium-7 { flex: 0 0 auto; width: 58.3333333333%; } .grid-x > .medium-8 { flex: 0 0 auto; width: 66.6666666667%; } .grid-x > .medium-9 { flex: 0 0 auto; width: 75%; } .grid-x > .medium-10 { flex: 0 0 auto; width: 83.3333333333%; } .grid-x > .medium-11 { flex: 0 0 auto; width: 91.6666666667%; } .grid-x > .medium-12 { flex: 0 0 auto; width: 100%; } } @media print, screen and (min-width: 64em) { .grid-x > .large-auto { flex: 1 1 0px; width: auto; } .grid-x > .large-shrink { flex: 0 0 auto; width: auto; } .grid-x > .large-1 { flex: 0 0 auto; width: 8.3333333333%; } .grid-x > .large-2 { flex: 0 0 auto; width: 16.6666666667%; } .grid-x > .large-3 { flex: 0 0 auto; width: 25%; } .grid-x > .large-4 { flex: 0 0 auto; width: 33.3333333333%; } .grid-x > .large-5 { flex: 0 0 auto; width: 41.6666666667%; } .grid-x > .large-6 { flex: 0 0 auto; width: 50%; } .grid-x > .large-7 { flex: 0 0 auto; width: 58.3333333333%; } .grid-x > .large-8 { flex: 0 0 auto; width: 66.6666666667%; } .grid-x > .large-9 { flex: 0 0 auto; width: 75%; } .grid-x > .large-10 { flex: 0 0 auto; width: 83.3333333333%; } .grid-x > .large-11 { flex: 0 0 auto; width: 91.6666666667%; } .grid-x > .large-12 { flex: 0 0 auto; width: 100%; } } @media screen and (min-width: 75em) { .grid-x > .xlarge-auto { flex: 1 1 0px; width: auto; } .grid-x > .xlarge-shrink { flex: 0 0 auto; width: auto; } .grid-x > .xlarge-1 { flex: 0 0 auto; width: 8.3333333333%; } .grid-x > .xlarge-2 { flex: 0 0 auto; width: 16.6666666667%; } .grid-x > .xlarge-3 { flex: 0 0 auto; width: 25%; } .grid-x > .xlarge-4 { flex: 0 0 auto; width: 33.3333333333%; } .grid-x > .xlarge-5 { flex: 0 0 auto; width: 41.6666666667%; } .grid-x > .xlarge-6 { flex: 0 0 auto; width: 50%; } .grid-x > .xlarge-7 { flex: 0 0 auto; width: 58.3333333333%; } .grid-x > .xlarge-8 { flex: 0 0 auto; width: 66.6666666667%; } .grid-x > .xlarge-9 { flex: 0 0 auto; width: 75%; } .grid-x > .xlarge-10 { flex: 0 0 auto; width: 83.3333333333%; } .grid-x > .xlarge-11 { flex: 0 0 auto; width: 91.6666666667%; } .grid-x > .xlarge-12 { flex: 0 0 auto; width: 100%; } } .grid-margin-x:not(.grid-x) > .cell { width: auto; } .grid-margin-y:not(.grid-y) > .cell { height: auto; } .grid-margin-x { margin-left: -0.46875rem; margin-right: -0.46875rem; } @media print, screen and (min-width: 40em) { .grid-margin-x { margin-left: -0.9375rem; margin-right: -0.9375rem; } } .grid-margin-x > .cell { width: calc(100% - 0.9375rem); margin-left: 0.46875rem; margin-right: 0.46875rem; } @media print, screen and (min-width: 40em) { .grid-margin-x > .cell { width: calc(100% - 1.875rem); margin-left: 0.9375rem; margin-right: 0.9375rem; } } .grid-margin-x > .auto { width: auto; } .grid-margin-x > .shrink { width: auto; } .grid-margin-x > .small-1 { width: calc(8.33333% - 0.9375rem); } .grid-margin-x > .small-2 { width: calc(16.66667% - 0.9375rem); } .grid-margin-x > .small-3 { width: calc(25% - 0.9375rem); } .grid-margin-x > .small-4 { width: calc(33.33333% - 0.9375rem); } .grid-margin-x > .small-5 { width: calc(41.66667% - 0.9375rem); } .grid-margin-x > .small-6 { width: calc(50% - 0.9375rem); } .grid-margin-x > .small-7 { width: calc(58.33333% - 0.9375rem); } .grid-margin-x > .small-8 { width: calc(66.66667% - 0.9375rem); } .grid-margin-x > .small-9 { width: calc(75% - 0.9375rem); } .grid-margin-x > .small-10 { width: calc(83.33333% - 0.9375rem); } .grid-margin-x > .small-11 { width: calc(91.66667% - 0.9375rem); } .grid-margin-x > .small-12 { width: calc(100% - 0.9375rem); } @media print, screen and (min-width: 40em) { .grid-margin-x > .auto { width: auto; } .grid-margin-x > .shrink { width: auto; } .grid-margin-x > .small-1 { width: calc(8.33333% - 1.875rem); } .grid-margin-x > .small-2 { width: calc(16.66667% - 1.875rem); } .grid-margin-x > .small-3 { width: calc(25% - 1.875rem); } .grid-margin-x > .small-4 { width: calc(33.33333% - 1.875rem); } .grid-margin-x > .small-5 { width: calc(41.66667% - 1.875rem); } .grid-margin-x > .small-6 { width: calc(50% - 1.875rem); } .grid-margin-x > .small-7 { width: calc(58.33333% - 1.875rem); } .grid-margin-x > .small-8 { width: calc(66.66667% - 1.875rem); } .grid-margin-x > .small-9 { width: calc(75% - 1.875rem); } .grid-margin-x > .small-10 { width: calc(83.33333% - 1.875rem); } .grid-margin-x > .small-11 { width: calc(91.66667% - 1.875rem); } .grid-margin-x > .small-12 { width: calc(100% - 1.875rem); } .grid-margin-x > .medium-auto { width: auto; } .grid-margin-x > .medium-shrink { width: auto; } .grid-margin-x > .medium-1 { width: calc(8.33333% - 1.875rem); } .grid-margin-x > .medium-2 { width: calc(16.66667% - 1.875rem); } .grid-margin-x > .medium-3 { width: calc(25% - 1.875rem); } .grid-margin-x > .medium-4 { width: calc(33.33333% - 1.875rem); } .grid-margin-x > .medium-5 { width: calc(41.66667% - 1.875rem); } .grid-margin-x > .medium-6 { width: calc(50% - 1.875rem); } .grid-margin-x > .medium-7 { width: calc(58.33333% - 1.875rem); } .grid-margin-x > .medium-8 { width: calc(66.66667% - 1.875rem); } .grid-margin-x > .medium-9 { width: calc(75% - 1.875rem); } .grid-margin-x > .medium-10 { width: calc(83.33333% - 1.875rem); } .grid-margin-x > .medium-11 { width: calc(91.66667% - 1.875rem); } .grid-margin-x > .medium-12 { width: calc(100% - 1.875rem); } } @media print, screen and (min-width: 64em) { .grid-margin-x > .large-auto { width: auto; } .grid-margin-x > .large-shrink { width: auto; } .grid-margin-x > .large-1 { width: calc(8.33333% - 1.875rem); } .grid-margin-x > .large-2 { width: calc(16.66667% - 1.875rem); } .grid-margin-x > .large-3 { width: calc(25% - 1.875rem); } .grid-margin-x > .large-4 { width: calc(33.33333% - 1.875rem); } .grid-margin-x > .large-5 { width: calc(41.66667% - 1.875rem); } .grid-margin-x > .large-6 { width: calc(50% - 1.875rem); } .grid-margin-x > .large-7 { width: calc(58.33333% - 1.875rem); } .grid-margin-x > .large-8 { width: calc(66.66667% - 1.875rem); } .grid-margin-x > .large-9 { width: calc(75% - 1.875rem); } .grid-margin-x > .large-10 { width: calc(83.33333% - 1.875rem); } .grid-margin-x > .large-11 { width: calc(91.66667% - 1.875rem); } .grid-margin-x > .large-12 { width: calc(100% - 1.875rem); } } @media screen and (min-width: 75em) { .grid-margin-x > .xlarge-auto { width: auto; } .grid-margin-x > .xlarge-shrink { width: auto; } .grid-margin-x > .xlarge-1 { width: calc(8.33333% - 1.875rem); } .grid-margin-x > .xlarge-2 { width: calc(16.66667% - 1.875rem); } .grid-margin-x > .xlarge-3 { width: calc(25% - 1.875rem); } .grid-margin-x > .xlarge-4 { width: calc(33.33333% - 1.875rem); } .grid-margin-x > .xlarge-5 { width: calc(41.66667% - 1.875rem); } .grid-margin-x > .xlarge-6 { width: calc(50% - 1.875rem); } .grid-margin-x > .xlarge-7 { width: calc(58.33333% - 1.875rem); } .grid-margin-x > .xlarge-8 { width: calc(66.66667% - 1.875rem); } .grid-margin-x > .xlarge-9 { width: calc(75% - 1.875rem); } .grid-margin-x > .xlarge-10 { width: calc(83.33333% - 1.875rem); } .grid-margin-x > .xlarge-11 { width: calc(91.66667% - 1.875rem); } .grid-margin-x > .xlarge-12 { width: calc(100% - 1.875rem); } } .grid-y { display: flex; flex-flow: column nowrap; } .grid-y > .cell { width: auto; max-width: none; } .grid-y > .auto { height: auto; } .grid-y > .shrink { height: auto; } .grid-y > .small-1, .grid-y > .small-2, .grid-y > .small-3, .grid-y > .small-4, .grid-y > .small-5, .grid-y > .small-6, .grid-y > .small-7, .grid-y > .small-8, .grid-y > .small-9, .grid-y > .small-10, .grid-y > .small-11, .grid-y > .small-12, .grid-y > .small-full, .grid-y > .small-shrink { flex-basis: auto; } @media print, screen and (min-width: 40em) { .grid-y > .medium-1, .grid-y > .medium-2, .grid-y > .medium-3, .grid-y > .medium-4, .grid-y > .medium-5, .grid-y > .medium-6, .grid-y > .medium-7, .grid-y > .medium-8, .grid-y > .medium-9, .grid-y > .medium-10, .grid-y > .medium-11, .grid-y > .medium-12, .grid-y > .medium-full, .grid-y > .medium-shrink { flex-basis: auto; } } @media print, screen and (min-width: 64em) { .grid-y > .large-1, .grid-y > .large-2, .grid-y > .large-3, .grid-y > .large-4, .grid-y > .large-5, .grid-y > .large-6, .grid-y > .large-7, .grid-y > .large-8, .grid-y > .large-9, .grid-y > .large-10, .grid-y > .large-11, .grid-y > .large-12, .grid-y > .large-full, .grid-y > .large-shrink { flex-basis: auto; } } @media screen and (min-width: 75em) { .grid-y > .xlarge-1, .grid-y > .xlarge-2, .grid-y > .xlarge-3, .grid-y > .xlarge-4, .grid-y > .xlarge-5, .grid-y > .xlarge-6, .grid-y > .xlarge-7, .grid-y > .xlarge-8, .grid-y > .xlarge-9, .grid-y > .xlarge-10, .grid-y > .xlarge-11, .grid-y > .xlarge-12, .grid-y > .xlarge-full, .grid-y > .xlarge-shrink { flex-basis: auto; } } .grid-y > .small-1 { height: 8.3333333333%; } .grid-y > .small-2 { height: 16.6666666667%; } .grid-y > .small-3 { height: 25%; } .grid-y > .small-4 { height: 33.3333333333%; } .grid-y > .small-5 { height: 41.6666666667%; } .grid-y > .small-6 { height: 50%; } .grid-y > .small-7 { height: 58.3333333333%; } .grid-y > .small-8 { height: 66.6666666667%; } .grid-y > .small-9 { height: 75%; } .grid-y > .small-10 { height: 83.3333333333%; } .grid-y > .small-11 { height: 91.6666666667%; } .grid-y > .small-12 { height: 100%; } @media print, screen and (min-width: 40em) { .grid-y > .medium-auto { flex: 1 1 0px; height: auto; } .grid-y > .medium-shrink { height: auto; } .grid-y > .medium-1 { height: 8.3333333333%; } .grid-y > .medium-2 { height: 16.6666666667%; } .grid-y > .medium-3 { height: 25%; } .grid-y > .medium-4 { height: 33.3333333333%; } .grid-y > .medium-5 { height: 41.6666666667%; } .grid-y > .medium-6 { height: 50%; } .grid-y > .medium-7 { height: 58.3333333333%; } .grid-y > .medium-8 { height: 66.6666666667%; } .grid-y > .medium-9 { height: 75%; } .grid-y > .medium-10 { height: 83.3333333333%; } .grid-y > .medium-11 { height: 91.6666666667%; } .grid-y > .medium-12 { height: 100%; } } @media print, screen and (min-width: 64em) { .grid-y > .large-auto { flex: 1 1 0px; height: auto; } .grid-y > .large-shrink { height: auto; } .grid-y > .large-1 { height: 8.3333333333%; } .grid-y > .large-2 { height: 16.6666666667%; } .grid-y > .large-3 { height: 25%; } .grid-y > .large-4 { height: 33.3333333333%; } .grid-y > .large-5 { height: 41.6666666667%; } .grid-y > .large-6 { height: 50%; } .grid-y > .large-7 { height: 58.3333333333%; } .grid-y > .large-8 { height: 66.6666666667%; } .grid-y > .large-9 { height: 75%; } .grid-y > .large-10 { height: 83.3333333333%; } .grid-y > .large-11 { height: 91.6666666667%; } .grid-y > .large-12 { height: 100%; } } @media screen and (min-width: 75em) { .grid-y > .xlarge-auto { flex: 1 1 0px; height: auto; } .grid-y > .xlarge-shrink { height: auto; } .grid-y > .xlarge-1 { height: 8.3333333333%; } .grid-y > .xlarge-2 { height: 16.6666666667%; } .grid-y > .xlarge-3 { height: 25%; } .grid-y > .xlarge-4 { height: 33.3333333333%; } .grid-y > .xlarge-5 { height: 41.6666666667%; } .grid-y > .xlarge-6 { height: 50%; } .grid-y > .xlarge-7 { height: 58.3333333333%; } .grid-y > .xlarge-8 { height: 66.6666666667%; } .grid-y > .xlarge-9 { height: 75%; } .grid-y > .xlarge-10 { height: 83.3333333333%; } .grid-y > .xlarge-11 { height: 91.6666666667%; } .grid-y > .xlarge-12 { height: 100%; } } .grid-margin-y { margin-top: -0.46875rem; margin-bottom: -0.46875rem; } @media print, screen and (min-width: 40em) { .grid-margin-y { margin-top: -0.9375rem; margin-bottom: -0.9375rem; } } .grid-margin-y > .cell { height: calc(100% - 0.9375rem); margin-top: 0.46875rem; margin-bottom: 0.46875rem; } @media print, screen and (min-width: 40em) { .grid-margin-y > .cell { height: calc(100% - 1.875rem); margin-top: 0.9375rem; margin-bottom: 0.9375rem; } } .grid-margin-y > .auto { height: auto; } .grid-margin-y > .shrink { height: auto; } .grid-margin-y > .small-1 { height: calc(8.33333% - 0.9375rem); } .grid-margin-y > .small-2 { height: calc(16.66667% - 0.9375rem); } .grid-margin-y > .small-3 { height: calc(25% - 0.9375rem); } .grid-margin-y > .small-4 { height: calc(33.33333% - 0.9375rem); } .grid-margin-y > .small-5 { height: calc(41.66667% - 0.9375rem); } .grid-margin-y > .small-6 { height: calc(50% - 0.9375rem); } .grid-margin-y > .small-7 { height: calc(58.33333% - 0.9375rem); } .grid-margin-y > .small-8 { height: calc(66.66667% - 0.9375rem); } .grid-margin-y > .small-9 { height: calc(75% - 0.9375rem); } .grid-margin-y > .small-10 { height: calc(83.33333% - 0.9375rem); } .grid-margin-y > .small-11 { height: calc(91.66667% - 0.9375rem); } .grid-margin-y > .small-12 { height: calc(100% - 0.9375rem); } @media print, screen and (min-width: 40em) { .grid-margin-y > .auto { height: auto; } .grid-margin-y > .shrink { height: auto; } .grid-margin-y > .small-1 { height: calc(8.33333% - 1.875rem); } .grid-margin-y > .small-2 { height: calc(16.66667% - 1.875rem); } .grid-margin-y > .small-3 { height: calc(25% - 1.875rem); } .grid-margin-y > .small-4 { height: calc(33.33333% - 1.875rem); } .grid-margin-y > .small-5 { height: calc(41.66667% - 1.875rem); } .grid-margin-y > .small-6 { height: calc(50% - 1.875rem); } .grid-margin-y > .small-7 { height: calc(58.33333% - 1.875rem); } .grid-margin-y > .small-8 { height: calc(66.66667% - 1.875rem); } .grid-margin-y > .small-9 { height: calc(75% - 1.875rem); } .grid-margin-y > .small-10 { height: calc(83.33333% - 1.875rem); } .grid-margin-y > .small-11 { height: calc(91.66667% - 1.875rem); } .grid-margin-y > .small-12 { height: calc(100% - 1.875rem); } .grid-margin-y > .medium-auto { height: auto; } .grid-margin-y > .medium-shrink { height: auto; } .grid-margin-y > .medium-1 { height: calc(8.33333% - 1.875rem); } .grid-margin-y > .medium-2 { height: calc(16.66667% - 1.875rem); } .grid-margin-y > .medium-3 { height: calc(25% - 1.875rem); } .grid-margin-y > .medium-4 { height: calc(33.33333% - 1.875rem); } .grid-margin-y > .medium-5 { height: calc(41.66667% - 1.875rem); } .grid-margin-y > .medium-6 { height: calc(50% - 1.875rem); } .grid-margin-y > .medium-7 { height: calc(58.33333% - 1.875rem); } .grid-margin-y > .medium-8 { height: calc(66.66667% - 1.875rem); } .grid-margin-y > .medium-9 { height: calc(75% - 1.875rem); } .grid-margin-y > .medium-10 { height: calc(83.33333% - 1.875rem); } .grid-margin-y > .medium-11 { height: calc(91.66667% - 1.875rem); } .grid-margin-y > .medium-12 { height: calc(100% - 1.875rem); } } @media print, screen and (min-width: 64em) { .grid-margin-y > .large-auto { height: auto; } .grid-margin-y > .large-shrink { height: auto; } .grid-margin-y > .large-1 { height: calc(8.33333% - 1.875rem); } .grid-margin-y > .large-2 { height: calc(16.66667% - 1.875rem); } .grid-margin-y > .large-3 { height: calc(25% - 1.875rem); } .grid-margin-y > .large-4 { height: calc(33.33333% - 1.875rem); } .grid-margin-y > .large-5 { height: calc(41.66667% - 1.875rem); } .grid-margin-y > .large-6 { height: calc(50% - 1.875rem); } .grid-margin-y > .large-7 { height: calc(58.33333% - 1.875rem); } .grid-margin-y > .large-8 { height: calc(66.66667% - 1.875rem); } .grid-margin-y > .large-9 { height: calc(75% - 1.875rem); } .grid-margin-y > .large-10 { height: calc(83.33333% - 1.875rem); } .grid-margin-y > .large-11 { height: calc(91.66667% - 1.875rem); } .grid-margin-y > .large-12 { height: calc(100% - 1.875rem); } } @media screen and (min-width: 75em) { .grid-margin-y > .xlarge-auto { height: auto; } .grid-margin-y > .xlarge-shrink { height: auto; } .grid-margin-y > .xlarge-1 { height: calc(8.33333% - 1.875rem); } .grid-margin-y > .xlarge-2 { height: calc(16.66667% - 1.875rem); } .grid-margin-y > .xlarge-3 { height: calc(25% - 1.875rem); } .grid-margin-y > .xlarge-4 { height: calc(33.33333% - 1.875rem); } .grid-margin-y > .xlarge-5 { height: calc(41.66667% - 1.875rem); } .grid-margin-y > .xlarge-6 { height: calc(50% - 1.875rem); } .grid-margin-y > .xlarge-7 { height: calc(58.33333% - 1.875rem); } .grid-margin-y > .xlarge-8 { height: calc(66.66667% - 1.875rem); } .grid-margin-y > .xlarge-9 { height: calc(75% - 1.875rem); } .grid-margin-y > .xlarge-10 { height: calc(83.33333% - 1.875rem); } .grid-margin-y > .xlarge-11 { height: calc(91.66667% - 1.875rem); } .grid-margin-y > .xlarge-12 { height: calc(100% - 1.875rem); } } .glide { position: relative; width: 100%; box-sizing: border-box; } .glide * { box-sizing: inherit; } .glide__slides, .glide__track { overflow: hidden; } .glide__slides { position: relative; width: 100%; list-style: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; touch-action: pan-Y; padding: 0; white-space: nowrap; display: flex; flex-wrap: nowrap; will-change: transform; } .glide__slide, .glide__slides--dragging { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .glide__slide { width: 100%; height: 100%; flex-shrink: 0; white-space: normal; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .glide__slide a { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -moz-user-select: none; -ms-user-select: none; } .glide__arrows, .glide__bullets { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .glide--rtl { direction: rtl; } .glide__arrow { position: absolute; display: block; top: 50%; z-index: 2; color: #fff; text-transform: uppercase; padding: 9px 12px; background-color: transparent; border: 2px solid hsla(0, 0%, 100%, 0.5); border-radius: 4px; box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1); text-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1); opacity: 1; cursor: pointer; transition: opacity 0.15s ease, border 0.3s ease-in-out; -webkit-transform: translateY(-50%); transform: translateY(-50%); line-height: 1; } .glide__arrow:focus { outline: none; } .glide__arrow:hover { border-color: #fff; } .glide__arrow--left { left: 2em; } .glide__arrow--right { right: 2em; } .glide__arrow--disabled { opacity: 0.33; } .glide__bullets { position: absolute; z-index: 2; bottom: 2em; left: 50%; display: inline-flex; list-style: none; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .glide__bullet { background-color: hsla(0, 0%, 100%, 0.5); width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 2px solid transparent; transition: all 0.3s ease-in-out; cursor: pointer; line-height: 0; box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1); margin: 0 0.25em; } .glide__bullet:focus { outline: none; } .glide__bullet:focus, .glide__bullet:hover { border: 2px solid #fff; background-color: hsla(0, 0%, 100%, 0.5); } .glide__bullet--active { background-color: #fff; } .glide--swipeable { cursor: grab; cursor: -webkit-grab; } .glide--dragging { cursor: grabbing; cursor: -webkit-grabbing; } .glide__slides .product-tile__body { white-space: normal; } @media screen and (max-width: 64em) { .products-slider-wrapper { position: relative; margin-left: -15px; margin-right: -15px; width: calc(100% + 30px); } } .overflow-slider-wrapper .glide__track { overflow: visible; } .overflow-slider-wrapper .glide__slides.grid-x.grid-margin-x { margin: 0; } .overflow-slider-wrapper .glide__slides.grid-x.grid-margin-x > .cell { margin: 0; } .slider-wrapper { position: relative; } .slider-wrapper .glide__slides, .slider-wrapper .glide__track { overflow: visible; } .slider-wrapper .product-tile { height: 100%; } .slider-wrapper .glide:not(.glide--slider) .glide__slides.grid-x.grid-margin-x { width: auto !important; flex-wrap: wrap; } .slider-wrapper .glide.glide--slider .glide__track { overflow: visible; } .slider-wrapper .glide.glide--slider .glide__slides.grid-x.grid-margin-x { margin: 0; } .slider-wrapper .glide.glide--slider .glide__slides.grid-x.grid-margin-x > .cell { margin: 0; } .slider-arrows { position: absolute; top: 0; width: 100%; padding-top: 96.875%; pointer-events: none; } .slider-arrow { position: absolute; top: 50%; margin-top: -20px; padding: 10px; width: 40px; height: 40px; pointer-events: auto; } .slider-arrow:before { content: ""; display: block; width: 13px; height: 13px; border-bottom: 3px solid; border-right: 3px solid; } .slider-prev { left: 40px; } .slider-prev:before { -webkit-transform: rotate(135deg); transform: rotate(135deg); } .slider-next { right: 40px; } .slider-next:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .date-wrap, input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], select, textarea { font-size: 1rem; padding: 15px 20px; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; line-height: 1.25rem; border: 2px solid #000; background-color: #fff; outline: none; } .date-wrap::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="search"]::-webkit-input-placeholder, input[type="tel"]::-webkit-input-placeholder, input[type="text"]::-webkit-input-placeholder, select::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #424242; } .date-wrap::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="search"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, input[type="text"]::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder { color: #424242; } .date-wrap:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, input[type="search"]:-ms-input-placeholder, input[type="tel"]:-ms-input-placeholder, input[type="text"]:-ms-input-placeholder, select:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #424242; } .date-wrap::-ms-input-placeholder, input[type="email"]::-ms-input-placeholder, input[type="password"]::-ms-input-placeholder, input[type="search"]::-ms-input-placeholder, input[type="tel"]::-ms-input-placeholder, input[type="text"]::-ms-input-placeholder, select::-ms-input-placeholder, textarea::-ms-input-placeholder { color: #424242; } .date-wrap::placeholder, input[type="email"]::placeholder, input[type="password"]::placeholder, input[type="search"]::placeholder, input[type="tel"]::placeholder, input[type="text"]::placeholder, select::placeholder, textarea::placeholder { color: #424242; } .date-wrap.input-light, form.form-light .date-wrap, form.form-light input[type="email"], form.form-light input[type="password"], form.form-light input[type="search"], form.form-light input[type="tel"], form.form-light input[type="text"], form.form-light select, form.form-light textarea, input[type="email"].input-light, input[type="password"].input-light, input[type="search"].input-light, input[type="tel"].input-light, input[type="text"].input-light, select.input-light, textarea.input-light { background-color: #f8f8f8; border: 2px solid #f8f8f8; } .date-wrap.input-dark, form.form-dark .date-wrap, form.form-dark input[type="email"], form.form-dark input[type="password"], form.form-dark input[type="search"], form.form-dark input[type="tel"], form.form-dark input[type="text"], form.form-dark select, form.form-dark textarea, input[type="email"].input-dark, input[type="password"].input-dark, input[type="search"].input-dark, input[type="tel"].input-dark, input[type="text"].input-dark, select.input-dark, textarea.input-dark { background-color: transparent; border: 2px solid #fff; color: #fff; } .date-wrap.input-dark::-webkit-input-placeholder, form.form-dark .date-wrap::-webkit-input-placeholder, form.form-dark input[type="email"]::-webkit-input-placeholder, form.form-dark input[type="password"]::-webkit-input-placeholder, form.form-dark input[type="search"]::-webkit-input-placeholder, form.form-dark input[type="tel"]::-webkit-input-placeholder, form.form-dark input[type="text"]::-webkit-input-placeholder, form.form-dark select::-webkit-input-placeholder, form.form-dark textarea::-webkit-input-placeholder, input[type="email"].input-dark::-webkit-input-placeholder, input[type="password"].input-dark::-webkit-input-placeholder, input[type="search"].input-dark::-webkit-input-placeholder, input[type="tel"].input-dark::-webkit-input-placeholder, input[type="text"].input-dark::-webkit-input-placeholder, select.input-dark::-webkit-input-placeholder, textarea.input-dark::-webkit-input-placeholder { color: #fff; } .date-wrap.input-dark::-moz-placeholder, form.form-dark .date-wrap::-moz-placeholder, form.form-dark input[type="email"]::-moz-placeholder, form.form-dark input[type="password"]::-moz-placeholder, form.form-dark input[type="search"]::-moz-placeholder, form.form-dark input[type="tel"]::-moz-placeholder, form.form-dark input[type="text"]::-moz-placeholder, form.form-dark select::-moz-placeholder, form.form-dark textarea::-moz-placeholder, input[type="email"].input-dark::-moz-placeholder, input[type="password"].input-dark::-moz-placeholder, input[type="search"].input-dark::-moz-placeholder, input[type="tel"].input-dark::-moz-placeholder, input[type="text"].input-dark::-moz-placeholder, select.input-dark::-moz-placeholder, textarea.input-dark::-moz-placeholder { color: #fff; } .date-wrap.input-dark:-ms-input-placeholder, form.form-dark .date-wrap:-ms-input-placeholder, form.form-dark input[type="email"]:-ms-input-placeholder, form.form-dark input[type="password"]:-ms-input-placeholder, form.form-dark input[type="search"]:-ms-input-placeholder, form.form-dark input[type="tel"]:-ms-input-placeholder, form.form-dark input[type="text"]:-ms-input-placeholder, form.form-dark select:-ms-input-placeholder, form.form-dark textarea:-ms-input-placeholder, input[type="email"].input-dark:-ms-input-placeholder, input[type="password"].input-dark:-ms-input-placeholder, input[type="search"].input-dark:-ms-input-placeholder, input[type="tel"].input-dark:-ms-input-placeholder, input[type="text"].input-dark:-ms-input-placeholder, select.input-dark:-ms-input-placeholder, textarea.input-dark:-ms-input-placeholder { color: #fff; } .date-wrap.input-dark::-ms-input-placeholder, form.form-dark .date-wrap::-ms-input-placeholder, form.form-dark input[type="email"]::-ms-input-placeholder, form.form-dark input[type="password"]::-ms-input-placeholder, form.form-dark input[type="search"]::-ms-input-placeholder, form.form-dark input[type="tel"]::-ms-input-placeholder, form.form-dark input[type="text"]::-ms-input-placeholder, form.form-dark select::-ms-input-placeholder, form.form-dark textarea::-ms-input-placeholder, input[type="email"].input-dark::-ms-input-placeholder, input[type="password"].input-dark::-ms-input-placeholder, input[type="search"].input-dark::-ms-input-placeholder, input[type="tel"].input-dark::-ms-input-placeholder, input[type="text"].input-dark::-ms-input-placeholder, select.input-dark::-ms-input-placeholder, textarea.input-dark::-ms-input-placeholder { color: #fff; } .date-wrap.input-dark::placeholder, form.form-dark .date-wrap::placeholder, form.form-dark input[type="email"]::placeholder, form.form-dark input[type="password"]::placeholder, form.form-dark input[type="search"]::placeholder, form.form-dark input[type="tel"]::placeholder, form.form-dark input[type="text"]::placeholder, form.form-dark select::placeholder, form.form-dark textarea::placeholder, input[type="email"].input-dark::placeholder, input[type="password"].input-dark::placeholder, input[type="search"].input-dark::placeholder, input[type="tel"].input-dark::placeholder, input[type="text"].input-dark::placeholder, select.input-dark::placeholder, textarea.input-dark::placeholder { color: #fff; } @media print, screen and (min-width: 40em) { .date-wrap, input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], select, textarea { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; } } .select-wrap { width: 100%; } select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' class='icon'%3E%3Cpath d='M50 59.45l38.89-37.33c.96-.94 2.55-.92 3.53.04l6.83 6.68c.98.96 1 2.52.04 3.46L51.81 77.89c-.49.49-1.16.71-1.81.67-.67.02-1.32-.2-1.81-.67L.71 32.3c-.96-.94-.94-2.5.04-3.46l6.83-6.68c.98-.96 2.57-.98 3.53-.04L50 59.45z'/%3E%3C/svg%3E"); background-size: 10px; background-position: center right 15px; background-repeat: no-repeat; padding-right: 35px; } .select-wrap select { width: 100%; } select[disabled] { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' class='icon'%3E%3Cpath d='M50 59.45l38.89-37.33c.96-.94 2.55-.92 3.53.04l6.83 6.68c.98.96 1 2.52.04 3.46L51.81 77.89c-.49.49-1.16.71-1.81.67-.67.02-1.32-.2-1.81-.67L.71 32.3c-.96-.94-.94-2.5.04-3.46l6.83-6.68c.98-.96 2.57-.98 3.53-.04L50 59.45z' fill='%23bbb'/%3E%3C/svg%3E"); } .form-dark select, select.input-dark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' class='icon'%3E%3Cpath d='M50 59.45l38.89-37.33c.96-.94 2.55-.92 3.53.04l6.83 6.68c.98.96 1 2.52.04 3.46L51.81 77.89c-.49.49-1.16.71-1.81.67-.67.02-1.32-.2-1.81-.67L.71 32.3c-.96-.94-.94-2.5.04-3.46l6.83-6.68c.98-.96 2.57-.98 3.53-.04L50 59.45z' fill='%FFF'%3E%3C/path%3E%3C/svg%3E"); } input[type="search"]::-ms-clear { display: none; width: 0; height: 0; } input[type="search"]::-ms-reveal { display: none; width: 0; height: 0; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } .date-wrap { display: flex; padding: 0; } .date-wrap .placeholder { font-size: 1rem; padding: 16px 0 16px 16px; margin: 0; font-weight: 400; text-transform: none; color: #424242; } .date-wrap input[type="date"] { flex: 1 1 auto; height: 52px; padding: 13px 16px; background: transparent; -webkit-appearance: none; border: none; outline: none; } .date-wrap input[type="date"]:not(.has-value) { color: #424242; } .checkbox-wrap { display: block; } .checkbox-wrap input[type="checkbox"] { position: absolute; opacity: 0; visibility: hidden; z-index: -100; left: -9999px; } .checkbox-wrap input[type="checkbox"] + label { position: relative; display: inline-block; cursor: pointer; padding-left: 36px; } .checkbox-wrap input[type="checkbox"] + label:before { content: ""; position: absolute; top: 2px; left: 0; display: block; width: 20px; height: 20px; border: 2px solid #000; color: #000; background-color: #fff; transition: background 0.2s, border 0.2s; } .checkbox-wrap input[type="checkbox"]:checked + label:before { border-color: currentColor; background-color: currentColor; background-size: 75%; background-repeat: no-repeat; background-position: 50%; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23fff' class='icon'%3E%3Cpath d='M31.82 72.16L7.95 48.3 0 56.25l31.82 31.82L100 19.89l-7.95-7.96z'/%3E%3C/svg%3E"); } label { display: block; margin: 0 0 8px; font-weight: 700; } .errors { color: #d00000; font-size: 0.875rem; } .errors ul { list-style: none; margin: 0; padding: 0; } .input-error { border-color: #d00000 !important; } .form-footer a { color: #000; display: inline-block; font-size: 0.75rem; text-decoration: none; } .form-footer > div:last-child { text-align: right; } form { outline: none; } .form-success { background: rgba(65, 207, 129, 0.2); } .form-errors, .form-success { padding: 20px; text-align: center; } .form-errors { background: rgba(208, 0, 0, 0.2); } .form-box { padding: 30px; background-color: #fff; } .form-box--alt { background-color: #000; } .form-box--border { border: 2px solid #000; } figure { margin: 0; } img, picture { margin: 0; max-width: 100%; } html { box-sizing: border-box; } *, :after, :before { box-sizing: border-box; } body, html { height: 100%; background-color: #fff; } .rte { margin: 0; } .rte img { height: auto; } .rte table { table-layout: fixed; } .rte ol, .rte ul { margin: 0 0 1em 1em; } .rte > :first-child { margin-top: 0; } .rte > :last-child { margin-bottom: 0; } .rte-table { overflow: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } .rte__video-wrapper { position: relative; overflow: hidden; max-width: 100%; height: 0; height: auto; padding-bottom: 56.25%; } .rte__video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .rte__table-wrapper { overflow: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } .section { position: relative; padding: 30px 0; overflow: hidden; } @media print, screen and (min-width: 40em) { .section { padding: 50px 0; } } .section.no-margin { padding: 0; } .section.no-margin-top { padding-top: 0; } .section.no-margin-bottom { padding-bottom: 0; } .section.theme-light { background: #f8f8f8; } .section.theme-dark { background: #424242; color: #fff; } .section.theme-split:before { content: ""; position: absolute; background: #f8f8f8; width: 100%; height: 250px; left: 0; bottom: 0; } .shopify-challenge__container { position: relative; padding: 30px 0; overflow: hidden; } table { border-collapse: collapse; width: 100%; margin-bottom: 1rem; border-radius: 0; } table thead { border-bottom: 1px solid rgba(0, 0, 0, 0.4); } table thead th { padding: 15px 0; text-align: left; } table tbody tr { border-top: 1px solid rgba(0, 0, 0, 0.4); } table tbody td { padding: 20px 0; } @media screen and (max-width: 39.99875em) { table.stack thead { display: none; } table.stack td, table.stack th, table.stack tr { display: block; } table.stack tr { padding: 10px 0; display: flex; flex-direction: column; flex-wrap: wrap; } table.stack tr td { padding: 5px; } table.stack tr td:before { content: attr(data-label); display: block; font-weight: 700; } } body, html { font-display: fallback; font-family: din-2014, Futura, Century Gothic, sans-serif; font-size: 16px; line-height: 1.5625rem; color: #424242; font-display: swap; } a { color: inherit; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: 700; color: #000; font-style: normal; text-decoration: none; text-transform: uppercase; margin: 0 0 1rem; } .theme-dark .h1, .theme-dark .h2, .theme-dark .h3, .theme-dark .h4, .theme-dark .h5, .theme-dark .h6, .theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark h5, .theme-dark h6 { color: #fff; } .has-divider.h1:after, .has-divider.h2:after, .has-divider.h3:after, .has-divider.h4:after, .has-divider.h5:after, .has-divider.h6:after, h1.has-divider:after, h2.has-divider:after, h3.has-divider:after, h4.has-divider:after, h5.has-divider:after, h6.has-divider:after { content: ""; height: 3px; width: 60px; display: block; background: currentColor; margin-top: 1rem; } .h1, h1 { font-size: 2rem; line-height: 2.5rem; } @media print, screen and (min-width: 40em) { .h1, h1 { font-size: 3.5rem; line-height: 3.75rem; } } .h2, h2 { font-size: 2rem; line-height: 2.1875rem; } .h3, h3 { font-size: 1.25rem; line-height: 1.5625rem; } .h4, .h5, .h6, h4, h5, h6 { font-size: 1rem; line-height: 1.25rem; } p { margin-bottom: 1.6666666667em; } .label-small, .text-small { font-size: 0.75rem; line-height: 0.9375rem; } .label-small { text-transform: uppercase; letter-spacing: 1px; } .overline-uppercase { font-size: 1rem; line-height: 1.25rem; font-weight: 700; text-transform: uppercase; } .lead { font-size: 1.25rem; line-height: 1.875rem; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } @media print, screen and (min-width: 40em) { .medium-text-left { text-align: left; } .medium-text-right { text-align: right; } .medium-text-center { text-align: center; } } .sr-only { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .icon { display: inline-block; vertical-align: middle; width: 1em; height: 1em; fill: currentColor; } .no-svg .icon { display: none; } .emoji { font-weight: 400; } .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) img, 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, 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) img, 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 { max-width: 100%; fill: currentColor; } svg.icon:not(.icon--full-color) rect, symbol.icon:not(.icon--full-color) rect { fill: inherit; stroke: inherit; } .payment-icons { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; } @-webkit-keyframes rainbow { 0% { background-color: #87fd88; } 10% { background-color: #87ffff; } 20% { background-color: #8bb5fe; } 30% { background-color: #d78cff; } 40% { background-color: #fb67f3; } 50% { background-color: #fc6867; } 60% { background-color: #fe6cb7; } 70% { background-color: #fed689; } 80% { background-color: #ff8cff; } 90% { background-color: #ff8d8b; } to { background-color: #87fd88; } } button { background: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; } .button { position: relative; display: inline-flex; justify-content: center; align-items: center; padding: 15px 50px; text-transform: uppercase; cursor: pointer; border: 2px solid transparent; border-radius: 0; text-align: center; font-size: 1rem; text-decoration: none; line-height: 1.25rem; font-weight: 700; min-width: 150px; outline: 0; transition: background 0.2s, color 0.2s, border 0.2s, opacity 0.2s; } .button:disabled { cursor: default; } .button.no-hover { cursor: default; } .button.has-icon { padding-left: 30px; padding-right: 30px; } .button.has-icon i { position: absolute; width: 18px; height: 18px; left: 10px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .button.add-to-cart { height: 54px; text-transform: uppercase; letter-spacing: 1px; padding: 10px; } .button.add-to-cart > span { position: relative; } .button.add-to-cart:before { content: ""; opacity: 0; display: block; position: absolute; width: 100%; height: 100%; background-size: 50px 43px; left: 0; top: 0; background-repeat: no-repeat; background-position: 0 100%; -webkit-animation: rainbow 1s ease-in-out infinite; animation: rainbow 1s ease-in-out infinite; background-image: url(sloth.gif); transition: all 0.2s; } .button.add-to-cart.js-loading { padding-left: 50px; color: #000; background: transparent; } .button.add-to-cart.js-loading:before { content: ""; opacity: 1; } .button.add-to-cart.js-loading img, .button.add-to-cart.js-loading svg { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .button[disabled] { background-color: #ccc; color: #666; cursor: not-allowed; } .button-small { padding: 15px; } .button-medium, .button-small { font-size: 0.75rem; line-height: 0.9375rem; letter-spacing: 1px; } .button-medium { padding: 15px 30px; } .button-expanded { width: 100%; } .button-group.align-right { text-align: right; } .button-group.align-right .inside { justify-content: flex-end; } .button-group.align-center { text-align: center; } .button-group.align-center .inside { justify-content: center; } .button-group .inside { display: inline-flex; flex-wrap: wrap; margin: -4px; width: 100%; } .button-group .button { margin: 4px; } @media screen and (max-width: 39.99875em) { .button-group.small-stacked .inside { width: 100%; margin: -4px 0; } .button-group.small-stacked .button { width: 100%; margin: 4px 0; } } .button-group.stacked .inside { width: 100%; margin: -4px 0; } .button-group.stacked .button { width: 100%; margin: 4px 0; } .button-primary { background: transparent; border-color: #000; color: #000; } .button-primary:hover:not(:disabled):not(.no-hover) { background: #000; border-color: #000; color: #fff; } .button-primary:focus { background: #000; border-color: #000; color: #fff; } .button-secondary { background: #000; border-color: #000; color: #fff; } .button-secondary:hover:not(:disabled):not(.no-hover) { background: transparent; border-color: #000; color: #000; } .button-secondary:focus { background: transparent; border-color: #000; color: #000; } .button-tertiary { background: #f8f8f8; border-color: #f8f8f8; color: #000; } .button-tertiary:hover:not(:disabled):not(.no-hover) { background: #000; border-color: #000; color: #fff; } .button-tertiary:focus { background: #000; border-color: #000; color: #fff; box-shadow: 0 0 5px 1px #000; } .button-white { background: transparent; border-color: #fff; color: #fff; } .button-white:hover:not(:disabled):not(.no-hover) { background: #fff; border-color: #fff; color: #000; } .button-white:focus { background: #fff; border-color: #fff; color: #000; } .button-rainbow { background: transparent; border-color: #000; color: #000; transition: all 0.2s; } .button-rainbow > span { position: relative; } .button-rainbow:before { content: ""; opacity: 0; display: block; position: absolute; width: 100%; height: 100%; background-size: 50px 43px; left: 0; top: 0; background-repeat: no-repeat; background-position: 0 115%; -webkit-animation: rainbow 1s ease-in-out infinite; animation: rainbow 1s ease-in-out infinite; background-image: url(sloth.gif); transition: all 0.2s; } .button-rainbow:hover:not(:disabled):not(.no-hover) { background: transparent; color: #000; } .button-rainbow:hover:not(:disabled):not(.no-hover):before { content: ""; opacity: 1; } .button-rainbow:focus:not(:disabled):not(.no-hover) { background: transparent; color: #000; } .button-rainbow:focus:not(:disabled):not(.no-hover):before { content: ""; opacity: 1; } .button-hollow { background-color: #fff; color: #000; } .button-hollow:hover:not(:disabled):not(.no-hover) { background-color: #000; color: #fff; } .button-hollow:focus { background-color: #000; color: #fff; box-shadow: 0 0 5px 1px #000; } .button-error { background: transparent; border-color: #d00000; color: #d00000; } .button-error:hover:not(:disabled):not(.no-hover) { background: #d00000; border-color: #d00000; color: #fff; } .button-error:focus { background: #d00000; border-color: #d00000; color: #fff; box-shadow: 0 0 5px 1px #d00000; } .js-focus-hidden:focus { outline: none; } .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; } .skip-link:focus { z-index: 10000; background-color: #fff; color: #424242; transition: none; } .cover-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; z-index: 1; } [tabindex="-1"]:focus { outline: none; } .hide { display: none !important; } .db { display: block; } .color-white { color: #fff; } .color-primary, .color-secondary { color: #000; } .color-accent { color: #8c8c8c; } .color-text { color: #424242; } .color-border, .color-secondary-text { color: #000; } .semibold { font-weight: 600; } .bold { font-weight: 700; } .h-100 { height: 100%; } .m-0 { margin: 0; } .mt-5 { margin-top: 5px; } .mt-6 { margin-top: 6px; } .mt-7 { margin-top: 7px; } .mt-8 { margin-top: 8px; } .mt-9 { margin-top: 9px; } .mt-10 { margin-top: 10px; } .mt-11 { margin-top: 11px; } .mt-12 { margin-top: 12px; } .mt-13 { margin-top: 13px; } .mt-14 { margin-top: 14px; } .mt-15 { margin-top: 15px; } .mt-16 { margin-top: 16px; } .mt-17 { margin-top: 17px; } .mt-18 { margin-top: 18px; } .mt-19 { margin-top: 19px; } .mt-20 { margin-top: 20px; } .mt-21 { margin-top: 21px; } .mt-22 { margin-top: 22px; } .mt-23 { margin-top: 23px; } .mt-24 { margin-top: 24px; } .mt-25 { margin-top: 25px; } .mt-26 { margin-top: 26px; } .mt-27 { margin-top: 27px; } .mt-28 { margin-top: 28px; } .mt-29 { margin-top: 29px; } .mt-30 { margin-top: 30px; } .mt-31 { margin-top: 31px; } .mt-32 { margin-top: 32px; } .mt-33 { margin-top: 33px; } .mt-34 { margin-top: 34px; } .mt-35 { margin-top: 35px; } .mt-36 { margin-top: 36px; } .mt-37 { margin-top: 37px; } .mt-38 { margin-top: 38px; } .mt-39 { margin-top: 39px; } .mt-40 { margin-top: 40px; } .mt-41 { margin-top: 41px; } .mt-42 { margin-top: 42px; } .mt-43 { margin-top: 43px; } .mt-44 { margin-top: 44px; } .mt-45 { margin-top: 45px; } .mt-46 { margin-top: 46px; } .mt-47 { margin-top: 47px; } .mt-48 { margin-top: 48px; } .mt-49 { margin-top: 49px; } .mt-50 { margin-top: 50px; } .mt-51 { margin-top: 51px; } .mt-52 { margin-top: 52px; } .mt-53 { margin-top: 53px; } .mt-54 { margin-top: 54px; } .mt-55 { margin-top: 55px; } .mt-56 { margin-top: 56px; } .mt-57 { margin-top: 57px; } .mt-58 { margin-top: 58px; } .mt-59 { margin-top: 59px; } .mt-60 { margin-top: 60px; } .mt-61 { margin-top: 61px; } .mt-62 { margin-top: 62px; } .mt-63 { margin-top: 63px; } .mt-64 { margin-top: 64px; } .mt-65 { margin-top: 65px; } .mt-66 { margin-top: 66px; } .mt-67 { margin-top: 67px; } .mt-68 { margin-top: 68px; } .mt-69 { margin-top: 69px; } .mt-70 { margin-top: 70px; } .mt-71 { margin-top: 71px; } .mt-72 { margin-top: 72px; } .mt-73 { margin-top: 73px; } .mt-74 { margin-top: 74px; } .mt-75 { margin-top: 75px; } .mt-76 { margin-top: 76px; } .mt-77 { margin-top: 77px; } .mt-78 { margin-top: 78px; } .mt-79 { margin-top: 79px; } .mt-80 { margin-top: 80px; } .mt-81 { margin-top: 81px; } .mt-82 { margin-top: 82px; } .mt-83 { margin-top: 83px; } .mt-84 { margin-top: 84px; } .mt-85 { margin-top: 85px; } .mt-86 { margin-top: 86px; } .mt-87 { margin-top: 87px; } .mt-88 { margin-top: 88px; } .mt-89 { margin-top: 89px; } .mt-90 { margin-top: 90px; } .mt-91 { margin-top: 91px; } .mt-92 { margin-top: 92px; } .mt-93 { margin-top: 93px; } .mt-94 { margin-top: 94px; } .mt-95 { margin-top: 95px; } .mt-96 { margin-top: 96px; } .mt-97 { margin-top: 97px; } .mt-98 { margin-top: 98px; } .mt-99 { margin-top: 99px; } .mt-100 { margin-top: 100px; } .mr-5 { margin-right: 5px; } .mr-6 { margin-right: 6px; } .mr-7 { margin-right: 7px; } .mr-8 { margin-right: 8px; } .mr-9 { margin-right: 9px; } .mr-10 { margin-right: 10px; } .mr-11 { margin-right: 11px; } .mr-12 { margin-right: 12px; } .mr-13 { margin-right: 13px; } .mr-14 { margin-right: 14px; } .mr-15 { margin-right: 15px; } .mr-16 { margin-right: 16px; } .mr-17 { margin-right: 17px; } .mr-18 { margin-right: 18px; } .mr-19 { margin-right: 19px; } .mr-20 { margin-right: 20px; } .mr-21 { margin-right: 21px; } .mr-22 { margin-right: 22px; } .mr-23 { margin-right: 23px; } .mr-24 { margin-right: 24px; } .mr-25 { margin-right: 25px; } .mr-26 { margin-right: 26px; } .mr-27 { margin-right: 27px; } .mr-28 { margin-right: 28px; } .mr-29 { margin-right: 29px; } .mr-30 { margin-right: 30px; } .mr-31 { margin-right: 31px; } .mr-32 { margin-right: 32px; } .mr-33 { margin-right: 33px; } .mr-34 { margin-right: 34px; } .mr-35 { margin-right: 35px; } .mr-36 { margin-right: 36px; } .mr-37 { margin-right: 37px; } .mr-38 { margin-right: 38px; } .mr-39 { margin-right: 39px; } .mr-40 { margin-right: 40px; } .mr-41 { margin-right: 41px; } .mr-42 { margin-right: 42px; } .mr-43 { margin-right: 43px; } .mr-44 { margin-right: 44px; } .mr-45 { margin-right: 45px; } .mr-46 { margin-right: 46px; } .mr-47 { margin-right: 47px; } .mr-48 { margin-right: 48px; } .mr-49 { margin-right: 49px; } .mr-50 { margin-right: 50px; } .mr-51 { margin-right: 51px; } .mr-52 { margin-right: 52px; } .mr-53 { margin-right: 53px; } .mr-54 { margin-right: 54px; } .mr-55 { margin-right: 55px; } .mr-56 { margin-right: 56px; } .mr-57 { margin-right: 57px; } .mr-58 { margin-right: 58px; } .mr-59 { margin-right: 59px; } .mr-60 { margin-right: 60px; } .mr-61 { margin-right: 61px; } .mr-62 { margin-right: 62px; } .mr-63 { margin-right: 63px; } .mr-64 { margin-right: 64px; } .mr-65 { margin-right: 65px; } .mr-66 { margin-right: 66px; } .mr-67 { margin-right: 67px; } .mr-68 { margin-right: 68px; } .mr-69 { margin-right: 69px; } .mr-70 { margin-right: 70px; } .mr-71 { margin-right: 71px; } .mr-72 { margin-right: 72px; } .mr-73 { margin-right: 73px; } .mr-74 { margin-right: 74px; } .mr-75 { margin-right: 75px; } .mr-76 { margin-right: 76px; } .mr-77 { margin-right: 77px; } .mr-78 { margin-right: 78px; } .mr-79 { margin-right: 79px; } .mr-80 { margin-right: 80px; } .mr-81 { margin-right: 81px; } .mr-82 { margin-right: 82px; } .mr-83 { margin-right: 83px; } .mr-84 { margin-right: 84px; } .mr-85 { margin-right: 85px; } .mr-86 { margin-right: 86px; } .mr-87 { margin-right: 87px; } .mr-88 { margin-right: 88px; } .mr-89 { margin-right: 89px; } .mr-90 { margin-right: 90px; } .mr-91 { margin-right: 91px; } .mr-92 { margin-right: 92px; } .mr-93 { margin-right: 93px; } .mr-94 { margin-right: 94px; } .mr-95 { margin-right: 95px; } .mr-96 { margin-right: 96px; } .mr-97 { margin-right: 97px; } .mr-98 { margin-right: 98px; } .mr-99 { margin-right: 99px; } .mr-100 { margin-right: 100px; } .mb-5 { margin-bottom: 5px; } .mb-6 { margin-bottom: 6px; } .mb-7 { margin-bottom: 7px; } .mb-8 { margin-bottom: 8px; } .mb-9 { margin-bottom: 9px; } .mb-10 { margin-bottom: 10px; } .mb-11 { margin-bottom: 11px; } .mb-12 { margin-bottom: 12px; } .mb-13 { margin-bottom: 13px; } .mb-14 { margin-bottom: 14px; } .mb-15 { margin-bottom: 15px; } .mb-16 { margin-bottom: 16px; } .mb-17 { margin-bottom: 17px; } .mb-18 { margin-bottom: 18px; } .mb-19 { margin-bottom: 19px; } .mb-20 { margin-bottom: 20px; } .mb-21 { margin-bottom: 21px; } .mb-22 { margin-bottom: 22px; } .mb-23 { margin-bottom: 23px; } .mb-24 { margin-bottom: 24px; } .mb-25 { margin-bottom: 25px; } .mb-26 { margin-bottom: 26px; } .mb-27 { margin-bottom: 27px; } .mb-28 { margin-bottom: 28px; } .mb-29 { margin-bottom: 29px; } .mb-30 { margin-bottom: 30px; } .mb-31 { margin-bottom: 31px; } .mb-32 { margin-bottom: 32px; } .mb-33 { margin-bottom: 33px; } .mb-34 { margin-bottom: 34px; } .mb-35 { margin-bottom: 35px; } .mb-36 { margin-bottom: 36px; } .mb-37 { margin-bottom: 37px; } .mb-38 { margin-bottom: 38px; } .mb-39 { margin-bottom: 39px; } .mb-40 { margin-bottom: 40px; } .mb-41 { margin-bottom: 41px; } .mb-42 { margin-bottom: 42px; } .mb-43 { margin-bottom: 43px; } .mb-44 { margin-bottom: 44px; } .mb-45 { margin-bottom: 45px; } .mb-46 { margin-bottom: 46px; } .mb-47 { margin-bottom: 47px; } .mb-48 { margin-bottom: 48px; } .mb-49 { margin-bottom: 49px; } .mb-50 { margin-bottom: 50px; } .mb-51 { margin-bottom: 51px; } .mb-52 { margin-bottom: 52px; } .mb-53 { margin-bottom: 53px; } .mb-54 { margin-bottom: 54px; } .mb-55 { margin-bottom: 55px; } .mb-56 { margin-bottom: 56px; } .mb-57 { margin-bottom: 57px; } .mb-58 { margin-bottom: 58px; } .mb-59 { margin-bottom: 59px; } .mb-60 { margin-bottom: 60px; } .mb-61 { margin-bottom: 61px; } .mb-62 { margin-bottom: 62px; } .mb-63 { margin-bottom: 63px; } .mb-64 { margin-bottom: 64px; } .mb-65 { margin-bottom: 65px; } .mb-66 { margin-bottom: 66px; } .mb-67 { margin-bottom: 67px; } .mb-68 { margin-bottom: 68px; } .mb-69 { margin-bottom: 69px; } .mb-70 { margin-bottom: 70px; } .mb-71 { margin-bottom: 71px; } .mb-72 { margin-bottom: 72px; } .mb-73 { margin-bottom: 73px; } .mb-74 { margin-bottom: 74px; } .mb-75 { margin-bottom: 75px; } .mb-76 { margin-bottom: 76px; } .mb-77 { margin-bottom: 77px; } .mb-78 { margin-bottom: 78px; } .mb-79 { margin-bottom: 79px; } .mb-80 { margin-bottom: 80px; } .mb-81 { margin-bottom: 81px; } .mb-82 { margin-bottom: 82px; } .mb-83 { margin-bottom: 83px; } .mb-84 { margin-bottom: 84px; } .mb-85 { margin-bottom: 85px; } .mb-86 { margin-bottom: 86px; } .mb-87 { margin-bottom: 87px; } .mb-88 { margin-bottom: 88px; } .mb-89 { margin-bottom: 89px; } .mb-90 { margin-bottom: 90px; } .mb-91 { margin-bottom: 91px; } .mb-92 { margin-bottom: 92px; } .mb-93 { margin-bottom: 93px; } .mb-94 { margin-bottom: 94px; } .mb-95 { margin-bottom: 95px; } .mb-96 { margin-bottom: 96px; } .mb-97 { margin-bottom: 97px; } .mb-98 { margin-bottom: 98px; } .mb-99 { margin-bottom: 99px; } .mb-100 { margin-bottom: 100px; } .ml-5 { margin-left: 5px; } .ml-6 { margin-left: 6px; } .ml-7 { margin-left: 7px; } .ml-8 { margin-left: 8px; } .ml-9 { margin-left: 9px; } .ml-10 { margin-left: 10px; } .ml-11 { margin-left: 11px; } .ml-12 { margin-left: 12px; } .ml-13 { margin-left: 13px; } .ml-14 { margin-left: 14px; } .ml-15 { margin-left: 15px; } .ml-16 { margin-left: 16px; } .ml-17 { margin-left: 17px; } .ml-18 { margin-left: 18px; } .ml-19 { margin-left: 19px; } .ml-20 { margin-left: 20px; } .ml-21 { margin-left: 21px; } .ml-22 { margin-left: 22px; } .ml-23 { margin-left: 23px; } .ml-24 { margin-left: 24px; } .ml-25 { margin-left: 25px; } .ml-26 { margin-left: 26px; } .ml-27 { margin-left: 27px; } .ml-28 { margin-left: 28px; } .ml-29 { margin-left: 29px; } .ml-30 { margin-left: 30px; } .ml-31 { margin-left: 31px; } .ml-32 { margin-left: 32px; } .ml-33 { margin-left: 33px; } .ml-34 { margin-left: 34px; } .ml-35 { margin-left: 35px; } .ml-36 { margin-left: 36px; } .ml-37 { margin-left: 37px; } .ml-38 { margin-left: 38px; } .ml-39 { margin-left: 39px; } .ml-40 { margin-left: 40px; } .ml-41 { margin-left: 41px; } .ml-42 { margin-left: 42px; } .ml-43 { margin-left: 43px; } .ml-44 { margin-left: 44px; } .ml-45 { margin-left: 45px; } .ml-46 { margin-left: 46px; } .ml-47 { margin-left: 47px; } .ml-48 { margin-left: 48px; } .ml-49 { margin-left: 49px; } .ml-50 { margin-left: 50px; } .ml-51 { margin-left: 51px; } .ml-52 { margin-left: 52px; } .ml-53 { margin-left: 53px; } .ml-54 { margin-left: 54px; } .ml-55 { margin-left: 55px; } .ml-56 { margin-left: 56px; } .ml-57 { margin-left: 57px; } .ml-58 { margin-left: 58px; } .ml-59 { margin-left: 59px; } .ml-60 { margin-left: 60px; } .ml-61 { margin-left: 61px; } .ml-62 { margin-left: 62px; } .ml-63 { margin-left: 63px; } .ml-64 { margin-left: 64px; } .ml-65 { margin-left: 65px; } .ml-66 { margin-left: 66px; } .ml-67 { margin-left: 67px; } .ml-68 { margin-left: 68px; } .ml-69 { margin-left: 69px; } .ml-70 { margin-left: 70px; } .ml-71 { margin-left: 71px; } .ml-72 { margin-left: 72px; } .ml-73 { margin-left: 73px; } .ml-74 { margin-left: 74px; } .ml-75 { margin-left: 75px; } .ml-76 { margin-left: 76px; } .ml-77 { margin-left: 77px; } .ml-78 { margin-left: 78px; } .ml-79 { margin-left: 79px; } .ml-80 { margin-left: 80px; } .ml-81 { margin-left: 81px; } .ml-82 { margin-left: 82px; } .ml-83 { margin-left: 83px; } .ml-84 { margin-left: 84px; } .ml-85 { margin-left: 85px; } .ml-86 { margin-left: 86px; } .ml-87 { margin-left: 87px; } .ml-88 { margin-left: 88px; } .ml-89 { margin-left: 89px; } .ml-90 { margin-left: 90px; } .ml-91 { margin-left: 91px; } .ml-92 { margin-left: 92px; } .ml-93 { margin-left: 93px; } .ml-94 { margin-left: 94px; } .ml-95 { margin-left: 95px; } .ml-96 { margin-left: 96px; } .ml-97 { margin-left: 97px; } .ml-98 { margin-left: 98px; } .ml-99 { margin-left: 99px; } .ml-100 { margin-left: 100px; } body.fixed-scroll, body.popup-visible { overflow: hidden; } @keyframes rainbow { 0% { background-color: #87fd88; } 10% { background-color: #87ffff; } 20% { background-color: #8bb5fe; } 30% { background-color: #d78cff; } 40% { background-color: #fb67f3; } 50% { background-color: #fc6867; } 60% { background-color: #fe6cb7; } 70% { background-color: #fed689; } 80% { background-color: #ff8cff; } 90% { background-color: #ff8d8b; } to { background-color: #87fd88; } } .apple-wallet-image, .giftcard-qr img { display: block; margin: 0 auto; } @media print { @page { margin: 0.5cm; } p { orphans: 3; widows: 3; } .apple-wallet, .print-giftcard { display: none; } } .gift-card-image-wrapper { position: relative; margin-bottom: 30px; } .gift-card-image-wrapper img { display: block; } .gift-card-value { font-weight: 700; font-size: 60px; line-height: 1.6; } .gift-card-code { position: absolute; top: 65%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 350px; max-width: 100%; margin: 15px auto; background-color: #fff; color: #000; border: 3px dashed #000; padding: 10px; font-weight: 700; font-size: 1.5em; } .gift-card-expiry { font-size: 12px; font-weight: 300; margin-top: 20px; } .gift-card-footer { margin: 20px 0 60px; } body.template-giftcard { padding-top: 0; } body.template-giftcard .site-header { position: relative; } .product-single__thumbnail-image { border: 2px solid transparent; } .active-thumbnail .product-single__thumbnail-image { border-color: #000; } body.template-password { padding-top: 0; } body.template-password header { margin-bottom: 40px; padding: 20px 0; } .section-article-detail .article__header { position: relative; margin-bottom: 20px; padding: 30px 20px; } @media print, screen and (min-width: 40em) { .section-article-detail .article__header { padding: 30px 0; margin-bottom: 40px; } } @media screen and (max-width: 39.99875em) { .section-article-detail .article__header { margin-left: -15px; margin-right: -15px; width: calc(100% + 30px); } } .section-article-detail .article__header > div { position: relative; } .section-article-detail .article__header:before { content: ""; width: 100%; height: 50%; position: absolute; left: 0; bottom: 0; background: #f8f8f8; } .section-article-detail .article__image { display: block; } .section-article-detail .article__details { padding: 30px 0 0; display: flex; flex-direction: column; height: 100%; } .section-article-detail .article__title { flex-grow: 1; margin-bottom: 40px; } .section-article-detail .article__tags { display: flex; flex-wrap: wrap; justify-content: center; margin: 5px -5px 30px; width: calc(100% + 10px); } @media print, screen and (min-width: 40em) { .section-article-detail .article__tags { margin: 5px -10px 50px; width: calc(100% + 20px); } } .section-article-detail .article__tag { font-size: 1rem; line-height: 1.25rem; padding: 10px 25px; margin: 5px; background: #f8f8f8; text-decoration: none; color: #000; transition: color 0.2s, background 0.2s; text-align: center; text-transform: uppercase; font-weight: 700; border-radius: 40px; } @media print, screen and (min-width: 40em) { .section-article-detail .article__tag { margin: 10px; } } .section-article-detail .article__tag.active, .section-article-detail .article__tag:hover { background: #000; color: #fff; } .section-article-detail .article__content { padding-top: 30px; } @media print, screen and (min-width: 64em) { .section-article-detail .article__content { padding-top: 20px; padding-left: 65px; } } .section-article-detail .article__meta { margin: 40px 0; } .section-article-detail .article__meta-label { margin-bottom: 20px; } .section-article-detail .article__meta-label:after { content: ""; margin: 10px auto; display: block; border-bottom: 1px solid rgba(0, 0, 0, 0.4); width: 80%; } .section-article-detail .article__share { margin: 40px 0; } .section-article-detail .article__share-label { margin-bottom: 20px; } .section-article-detail .article__share-label:after { content: ""; margin: 10px auto; display: block; border-bottom: 1px solid rgba(0, 0, 0, 0.4); width: 80%; } .section-article-detail .article__featured-products { margin: 40px 0; } .section-article-detail .article__featured-products-label { margin-bottom: 20px; } .section-article-detail .article__featured-products-label:after { content: ""; margin: 10px auto; display: block; border-bottom: 1px solid rgba(0, 0, 0, 0.4); width: 80%; } .section-article-listing .article-listing__tags { display: flex; flex-wrap: wrap; margin: 5px -5px 30px; width: calc(100% + 10px); justify-content: center; } @media print, screen and (min-width: 40em) { .section-article-listing .article-listing__tags { margin: 5px -10px 30px; width: calc(100% + 20px); } } .section-article-listing .article-listing__tag { font-size: 1rem; line-height: 1.25rem; padding: 10px 25px; margin: 5px; background: #f8f8f8; text-decoration: none; color: #000; transition: color 0.2s, background 0.2s; text-align: center; text-transform: uppercase; font-weight: 700; border-radius: 40px; } @media print, screen and (min-width: 40em) { .section-article-listing .article-listing__tag { margin: 10px; } } .section-article-listing .article-listing__tag.active, .section-article-listing .article-listing__tag:hover { background: #000; color: #fff; } .section-article-listing .article-tile__image-container { padding-bottom: 137.1428571429%; } .section-article-products .slider-wrapper .glide:not(.glide--slider) .glide__slides.grid-x.grid-margin-x { flex-wrap: nowrap; } .section-banner { position: relative; overflow: hidden; color: #fff; background-color: #424242; height: 300px; } @media print, screen and (min-width: 40em) { .section-banner { height: 530px; } } .section-banner img { display: block; } @media screen and (max-width: 39.99875em) { .section-banner .button { padding: 15px; } .section-banner .button:before { display: none; } } .banner-image { position: absolute; top: 0; left: 0; width: 100%; display: block; } @supports ((-o-object-fit: cover) or (object-fit: cover)) { .banner-image { height: 100%; -o-object-fit: cover; object-fit: cover; } } .banner-slide { position: relative; white-space: normal; } @media screen and (max-width: 63.99875em) { .banner-slide { justify-content: flex-end; } } .banner-slide:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .banner-content-wrapper { position: relative; z-index: 2; padding: 10px 0; } @media print, screen and (min-width: 40em) { .banner-content-wrapper { padding: 45px 0; } } .banner-content { color: #000; } .banner-content h1, .banner-content h2, .banner-content p { color: currentColor; } .banner-content-subtitle { background: #000; padding: 5px 10px; color: #fff; display: inline-block; } @media screen and (max-width: 63.99875em) { .banner-grid .form-box { padding: 20px; } } .banner-slider-pagination { position: absolute; z-index: 2; top: 80px; left: 50%; display: flex; align-items: center; width: 1140px; max-width: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding: 0 30px; pointer-events: none; } .banner-slider-pagination-divider { width: 80px; height: 1px; margin: 0 25px; background-color: currentColor; } .banner-slider-controls { position: absolute; z-index: 1; bottom: 0; pointer-events: none; opacity: 0; transition: opacity 0.2s; } @media print, screen and (min-width: 40em) { .banner-slider-controls { bottom: 30px; } } .glide--active .banner-slider-controls { opacity: 1; } .banner-slider-controls .slider-arrow { pointer-events: auto; cursor: pointer; position: relative; z-index: 1; top: auto; margin: 10px 0; width: 50px; height: 50px; border: 2px solid #000; background-color: #fff; color: #000; display: flex; justify-content: center; align-items: center; } .banner-slider-controls .slider-arrow:before { width: 12px; height: 12px; } @media print, screen and (min-width: 40em) { .banner-slider-controls .slider-arrow { margin: 15px 0; } } @media print, screen and (min-width: 64em) { .banner-slider-controls .slider-arrow:hover { color: #fff; background-color: #000; } } .banner-slider-controls .slider-prev { left: 0; } .banner-slider-controls .slider-prev:before { margin-right: -6px; } .banner-slider-controls .slider-next { right: 0; } .banner-slider-controls .slider-next:before { margin-left: -6px; } .section-cart .button-group.top { margin: 10px 0 20px; } @media print, screen and (min-width: 40em) { .section-cart .button-group.top { margin: 0 0 30px; } } .section-cart .cart-table { margin: 0; } .section-cart .cart-table tbody tr:nth-child(2n) { background: transparent; } .section-cart .cart-table tbody tr + tr { border-top: 1px solid #f1f1f1; } .section-cart .cart-table a { text-decoration: none; } .section-cart .cart-table .column-image { min-width: 100px; max-width: 150px; vertical-align: top; } .section-cart .cart-table .options { margin: 4px 0 0; font-size: 0.75rem; text-transform: uppercase; color: #000; } .section-cart .cart-table .properties { margin: 10px 0 4px; padding: 10px; background: #f4f4f4; } .section-cart .cart-table .property { font-weight: 700; font-size: 0.75rem; margin: 0; } .section-cart .cart-table .property + .property { margin-top: 2px; } .section-cart .cart-table .property .key { text-transform: uppercase; } @media screen and (max-width: 39.99875em) { .section-cart .cart-table .property .key { display: block; } } .section-cart .cart-table .remove { padding: 6px 0; font-size: 0.5rem; text-transform: uppercase; color: #000; } @media screen and (max-width: 39.99875em) { .section-cart .cart-table thead { display: none; } .section-cart .cart-table tr { display: block; padding: 10px 0; } .section-cart .cart-table tr:after, .section-cart .cart-table tr:before { display: table; content: " "; flex-basis: 0; order: 1; } .section-cart .cart-table tr:after { clear: both; } .section-cart .cart-table td { position: relative; display: block; padding: 0; } .section-cart .cart-table td:not(.column-image) { margin-left: 114px; } .section-cart .cart-table .column-image { float: left; min-width: 100px; width: 100px; } .section-cart .cart-table .column-details { padding-right: 16px; } .section-cart .cart-table .remove { position: absolute; top: 0; right: 0; color: currentColor; width: 16px; height: 16px; text-align: right; padding: 0; } .section-cart .cart-table .remove span { display: none; } .section-cart .cart-table .remove svg { display: inline-block; width: 10px; height: 10px; } .section-cart .cart-table h4 { font-size: 12px; max-width: 360px; } .section-cart .cart-table .options { font-size: 0.625rem !important; } .section-cart .cart-table .component-quantity-selector { margin: 10px 0; } .section-cart .cart-table .component-quantity-selector a { min-width: 30px; width: 30px; height: 30px; } .section-cart .cart-table .component-quantity-selector input { height: 30px; } .section-cart .cart-table .column-total { text-transform: uppercase; font-weight: 700; font-size: 0.875rem; } } @media print, screen and (min-width: 40em) { .section-cart .cart-table td:not(.column-image) { padding-top: 10px; padding-bottom: 10px; } } @media print, screen and (min-width: 40em) and (min-width: 40em) { .section-cart .cart-table td:not(.column-image) { padding-right: 20px; } } @media print, screen and (min-width: 40em) and (min-width: 40em) { .section-cart .cart-table td:not(.column-image) { padding-right: 40px; } } @media print, screen and (min-width: 40em) { .section-cart .cart-table .remove svg { display: none; } } @media print, screen and (min-width: 40em) { .section-cart .cart-table .column-total { padding-right: 10px !important; width: 140px; } } .section-cart .cart-ship-bar { background-color: #000; border: 5px solid #000; margin-top: 20px; } .section-cart .cart-ship-progress { background-color: #fff; background-image: linear-gradient( -45deg, #f9f9f9 15%, #fff 0, #fff 50%, #f9f9f9 0, #f9f9f9 65%, #fff 0, #fff ); background-size: 10px 10px; height: 20px; transition: width 0.3s ease-out; } .section-cart .cart-totals { color: #000; } .section-cart .cart-totals .cart-total-price-container { display: flex; flex-direction: column; justify-content: space-between; padding: 15px; border: 2px solid #000; font-weight: 700; text-transform: uppercase; text-align: right; } .section-cart .cart-totals .price-row p { margin-top: 0; margin-bottom: 0; } .section-cart .cart-totals .price { min-width: 80px; margin-left: 40px; padding-left: 0.625rem; } @media print, screen and (min-width: 40em) { .section-cart .cart-totals .price { min-width: 140px; margin-left: 80px; } } .section-cart .cart-totals .total p { font-weight: 700; } .section-cart .shipping-note { margin: 10px 0 0; text-align: center; color: #000; } .section-cart .special-note { margin: 20px 0; } .section-cart .special-note textarea { width: 100%; max-width: 450px; } .section-cart .button-group.bottom { margin-top: 20px; } @media print, screen and (min-width: 40em) { .section-cart .button-group.bottom { margin-top: 30px; } } .grid-x > .grow { width: auto; flex-grow: 1; } .cart-grid { margin-bottom: 30px; } .cart-grid .cell { margin: 10px 0; } @media print, screen and (min-width: 40em) { .cart-grid .cell { width: auto; margin: 10px; } } .cart-grid > .grid-x { align-items: baseline; padding: 20px; margin: 5px 0; background: #fff; position: relative; border: 0; } @media print, screen and (min-width: 40em) { .cart-grid > .grid-x { align-items: center; } } .cart-grid .component-quantity-selector { background: #fff; } .cart-line-title a { text-decoration: none; } .cart-line-original-price { color: #d00000; } .cart-line-variants { margin-right: 10px; } .cart-product-image-wrapper { width: 65px; max-width: 100%; position: relative; padding-bottom: 100%; display: block; } .cart-product-image { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; } .cart-product-remove { cursor: pointer; } @media screen and (max-width: 39.99875em) { .cart-product-remove { position: absolute; top: 10px; right: 10px; padding: 10px; } } .spinner { -webkit-animation: spin 0.7s linear infinite; animation: spin 0.7s linear infinite; height: 1em; width: 1em; border-radius: 50%; border-color: currentcolor transparent; border-style: solid; border-width: 0.1em; box-sizing: border-box; display: inline-block; margin: 0 12px; } .section-collection { overflow: initial; } .section-collection .load-more-group { margin-top: 50px; } #collection-load-more-button { cursor: pointer; } .collection-header { background-size: cover; background-repeat: no-repeat; position: relative; } .collection-header-content { height: 240px; display: flex; align-items: flex-end; justify-content: space-between; position: relative; } @media print, screen and (min-width: 40em) { .collection-header-content { align-items: center; } } @media screen and (max-width: 39.99875em) { .no-image .collection-header-content { height: auto; } } .collection-header-sloth { position: absolute; z-index: 0; height: 100%; width: 100%; } .collection-header-sloth > svg { height: 100%; width: auto; position: absolute; right: 0; } .collection-header-title { position: relative; background: #fff; padding: 15px; border: 2px solid #000; width: 100%; margin: 25px 0; z-index: 1; } @media print, screen and (min-width: 40em) { .collection-header-title { max-width: 445px; } } .collection-body { margin-top: 20px; } @media print, screen and (min-width: 40em) { .collection-body { margin-top: 60px; } } @media screen and (max-width: 39.99875em) { .collection-banner-content-cell { position: relative; z-index: 1; padding: 30px 0; } .collection-banner-content-cell h1 { font-size: 1.875rem; } } .collection-banner-image-wrapper { background-color: #f2f2f2; position: relative; } @supports ((-o-object-fit: cover) or (object-fit: cover)) { .collection-banner-image-wrapper { padding-bottom: 53.1884057971%; } } .collection-banner-image { width: 100%; display: block; transition: opacity 0.35s; } @supports ((-o-object-fit: cover) or (object-fit: cover)) { .collection-banner-image { position: absolute; top: 0; left: 0; height: 100%; -o-object-fit: cover; object-fit: cover; } } .collection-banner-image.lazyload { opacity: 0; } .collection-banner-image.lazyloaded { opacity: 1; } @media print, screen and (min-width: 64em) { .collection-toolbar-container { position: -webkit-sticky; position: sticky; top: 180px; } } .collection-description { background: #fff; border: 2px solid #000; padding: 30px; } .section-collection-quick-links { margin: 3px; } .section-collection-quick-links .collection-card { padding: 3px; } .section-collection-quick-links .collection-card a { display: flex; align-items: center; justify-content: space-between; background: #f8f8f8; padding: 15px 20px; text-decoration: none; cursor: pointer; transition: all 0.2s; } .section-collection-quick-links .collection-card a span { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); font-size: 20px; } .section-customer-addresses .edit-customer-address .edit-address { margin-top: 20px; } .section-customer-addresses .edit-customer-address .button-group { margin: 30px 0 0; } .section-customer-addresses .edit-customer-address .select-wrap, .section-customer-addresses .edit-customer-address input[type="email"], .section-customer-addresses .edit-customer-address input[type="password"], .section-customer-addresses .edit-customer-address input[type="tel"], .section-customer-addresses .edit-customer-address input[type="text"] { margin-bottom: 30px; } .section-customer-addresses .existing-customer-address { height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .section-customer-addresses .existing-customer-address p { flex-grow: 1; } .section-customer-addresses .existing-customer-address.active { background: #e5e5e5; } .section-customer-addresses .existing-customer-address .address-delete, .section-customer-addresses .existing-customer-address .address-edit-toggle { font-size: 0.75rem; text-transform: uppercase; min-width: 0; } .section-customer-addresses .existing-customer-address .address-delete svg, .section-customer-addresses .existing-customer-address .address-edit-toggle svg { height: 10px; width: 10px; margin-right: 5px; } @media print, screen and (min-width: 40em) { .section-customer-form { padding: 100px 0; } } .section-customer-form .errors { margin-top: 10px; } .section-customer-form .tabs-headings { margin: 0; display: flex; flex-wrap: nowrap; } .section-customer-form .tabs-item { flex: 1 1 auto; background-color: #8c8c8c; color: #000; text-transform: uppercase; padding: 20px; text-align: center; font-weight: 700; transition: all 0.2s; } .section-customer-form .tabs-item:first-child { border-top-left-radius: 5px; } .section-customer-form .tabs-item:last-child { border-top-right-radius: 5px; } .section-customer-form .tabs-item.active, .section-customer-form .tabs-item:hover { background-color: #fff; } .section-customer-order .status { position: relative; min-height: 40px; display: flex; align-items: center; justify-content: center; z-index: 1; } .section-customer-order .status__circle { display: block; position: absolute; z-index: -1; left: 50%; top: 50%; width: 40px; height: 40px; background-color: #f8c4c2; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media print, screen and (min-width: 40em) { .section-customer-order table td.total, .section-customer-order table th.total { width: 160px; text-align: right; padding-right: 20px; } } .section-customer-order table td .product-title { font-weight: 700; } .section-customer-order table td .product-title a { text-decoration: none; } @media print, screen and (min-width: 40em) { .section-customer-order table tfoot tr td { width: 160px; text-align: right; padding-right: 20px; } } .section-customer-order table tfoot tr:not(.order-total):not(:first-child) td { padding-top: 0; padding-bottom: 0; } .section-customer-order table tfoot tr:first-child td { padding-top: 30px; padding-bottom: 0; } .section-customer-order table tfoot tr:last-child td { padding-bottom: 30px; } .section-list-collection-image { display: block; width: 100%; transition: opacity 0.4s; margin-bottom: 20px; } .section-list-collection-image.lazyload, .section-list-collection-image.lazyloading { padding-top: 93.3333333333%; background-color: #fefefe; } .section-list-collection-link { display: block; margin-bottom: 1.6666666667em; color: grey; color: #000; letter-spacing: 0.072em; text-decoration: none; text-transform: uppercase; } .section-list-collection-link:focus { text-decoration: underline; } .section-list-collection .collection-item { position: relative; overflow: hidden; } .section-list-collection .collection-link { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; } .section-list-collection .collection-image { background-size: cover; background-position: 50%; background-repeat: no-repeat; width: 100%; padding-top: 120%; transition: -webkit-transform 0.8s; transition: transform 0.8s; transition: transform 0.8s, -webkit-transform 0.8s; } .section-list-collection .collection-content { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; } .section-list-collection .collection-content .button { position: relative; z-index: 4; } .featured-content-image-wrapper { position: relative; background-color: #f2f2f2; } @media screen and (max-width: 39.99875em) { .featured-content-image-wrapper { margin: -30px -15px 0; width: calc(100% + 30px); } } @media print, screen and (min-width: 40em) { .featured-content-image-wrapper { margin-right: -25%; } } .featured-content-image { width: 100%; border: none; transition: opacity 0.3s; display: block; } .featured-content-image.lazyload { opacity: 0; } .featured-content-image.lazyloaded { opacity: 1; } @supports ((-o-object-fit: cover) or (object-fit: cover)) { @media print, screen and (min-width: 40em) { .featured-content-image { position: absolute; top: 0; left: 0; height: 100%; -o-object-fit: cover; object-fit: cover; } } } @supports ((-o-object-fit: cover) or (object-fit: cover)) { .featured-content-grid.align-middle { align-items: stretch; } } .featured-content-text-wrapper { position: relative; background-color: #fff; margin-top: -50px; padding: 30px; z-index: 1; } @media print, screen and (min-width: 40em) { .featured-content-text-wrapper { margin-top: 126px; margin-bottom: 126px; } } .section-featured-products .slider-wrapper .glide:not(.glide--slider) .glide__slides.grid-x.grid-margin-x { flex-wrap: nowrap; } footer { padding: 60px 0; background: #000; color: #fff; } footer .footer-top { border-bottom: 1px solid hsla(0, 0%, 100%, 0.15); padding-bottom: 30px; text-align: center; } @media print, screen and (min-width: 40em) { footer .footer-top { text-align: left; } } footer .footer-bottom { padding-top: 30px; } footer .google-reviews .icon, footer .judgeme-reviews .icon { font-size: 40px; } footer .stars { --percent: calc(var(--rating) / 5 * 100%); display: inline-block; font-size: 1.625rem; line-height: 2rem; } footer .stars:before { content: "\2605\2605\2605\2605\2605"; letter-spacing: 3px; background: linear-gradient(90deg, #fff var(--percent), #666 var(--percent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } footer .menu { list-style: none; padding: 0; } @media print, screen and (min-width: 40em) { footer .menu li.cell { flex: 25%; } footer .menu li.cell.full { flex: 50%; } footer .menu li.cell.full .sub-menu { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } } @media print, screen and (min-width: 64em) { footer .menu li.cell { flex: 1; } footer .menu li.cell.full { flex: 2; } footer .menu li.cell.full .sub-menu { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } } footer .menu a { display: block; text-decoration: none; color: #fff; padding-right: 10px; } footer .accordion-toggle { border: 0; padding: 5px 0; } footer .accordion-toggle-icon { padding: 5px 10px; margin-left: 20px; } footer .accordion-body { border: 0; } footer .sub-menu { list-style: none; padding: 0; line-height: 1.8333333333; margin: 20px 0 0; } footer .sub-menu li { margin-bottom: 10px; } footer .sub-menu .icon { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); height: 0.5em; width: 0.5em; margin-right: 4px; } @media print, screen and (min-width: 40em) { footer .sub-menu.accordion.closed { display: block; } } footer .footer-socials { border-bottom: 1px solid hsla(0, 0%, 100%, 0.15); padding-bottom: 20px; } footer .social-icons-container { display: flex; flex-wrap: nowrap; align-items: center; } footer .social-icons-container > h4 { flex-shrink: 0; margin-right: 10px; margin-bottom: 0; } @media screen and (max-width: 39.99875em) { footer .social-icons { justify-content: center; } } footer .payment-icons { display: flex; justify-content: center; margin: 0 -5px; width: calc(100% + 10px); } footer .payment-icons .icon-coloured { width: 50px; height: 30px; border: 1px solid #fff; margin: 5px; display: flex; align-items: center; justify-content: center; } footer .payment-icons .icon-coloured .icon { font-size: 20px; width: 100%; max-width: 40px; } footer .footer-acknowledgement { border-bottom: 1px solid hsla(0, 0%, 100%, 0.15); } footer .footer-attribution { text-align: center; } @media print, screen and (min-width: 40em) { footer .footer-attribution { padding-top: 30px; } } footer .footer-attribution a { text-decoration: none; } @media screen and (max-width: 39.99875em) { .footer-right-grid { justify-content: flex-start; } } .footer-legals { list-style: none; padding: 0; margin: 40px 0 0; } @media print, screen and (min-width: 40em) { .footer-legals { margin: 16px 0 0; } } .footer-legals a { text-decoration: none; } .footer-legals li { display: inline-block; } .footer-legals li:after { content: "|"; display: inline-block; margin: 0 0.3em; } .footer-legals li:last-of-type:after { display: none; } .section.section-newsletter { background: #080808; color: #fff; padding-bottom: 0; } @media print, screen and (min-width: 64em) { .section.section-newsletter { padding: 10px 0 0; } } body, body.compact-header { padding-top: 140px; } @media print, screen and (min-width: 64em) { body { padding-top: 214px; } body.compact-header { padding-top: 160px; } } .site-header { position: fixed; z-index: 2; left: 0; right: 0; top: 0; background: #fff; } .main-nav-active .site-header { z-index: 11; } .top-nav { list-style: none; color: #000; padding: 0; margin: 0 -10px; display: flex; } .top-nav > li { margin: 0 10px; } .top-nav a { display: flex; align-items: center; text-decoration: none; font-weight: 700; } .header-top { box-shadow: 0 1px 0 0 #f8f8f8; } .header-top-wrapper { height: 0; transition: height 0.4s, margin-top 0.4s, top 0.4s, -webkit-transform 0.4s; transition: transform 0.4s, height 0.4s, margin-top 0.4s, top 0.4s; transition: transform 0.4s, height 0.4s, margin-top 0.4s, top 0.4s, -webkit-transform 0.4s; } @media print, screen and (min-width: 64em) { .header-top-wrapper { height: 54px; } .compact-header .header-top-wrapper { margin-top: -54px; } } .header-bottom { position: relative; background: #fff; } .main-nav-active .header-bottom { background: #f8f8f8; } .header-bottom-wrapper { height: 80px; transition: height 0.4s, margin-top 0.4s, top 0.4s, -webkit-transform 0.4s; transition: transform 0.4s, height 0.4s, margin-top 0.4s, top 0.4s; transition: transform 0.4s, height 0.4s, margin-top 0.4s, top 0.4s, -webkit-transform 0.4s; } .compact-header .header-bottom-wrapper { height: 80px; } @media print, screen and (min-width: 64em) { .compact-header .header-bottom-wrapper, .header-bottom-wrapper { height: 100px; } } @media screen and (max-width: 39.99875em) { .toolbar-items-left { margin-left: -9px; } } .toolbar-items { display: inline-flex; height: 100%; margin: 0; padding: 0; flex-shrink: 0; flex-basis: auto; width: auto; } .toolbar-item { position: relative; transition: box-shadow 0.2s; list-style: none; margin: 0; display: flex; align-items: center; } .toolbar-item.toolbar-item-search { position: static; } .toolbar-item__dropdown { position: absolute; z-index: 1; top: 100%; left: 50%; display: none; min-width: 220px; padding: 20px; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #fff; box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.1); } .main-nav-active .toolbar-item:not(.toolbar-item-mobile-menu) { display: none; } .toolbar-item:hover .toolbar-item__dropdown { display: block; } .toolbar-item:hover a.toolbar-item-inner, .toolbar-item:hover button.toolbar-item-inner { border-color: #000; background: #000; box-shadow: inset 0 0 0 2px #fff; color: #fff; } .toolbar-item:hover .toolbar-item-inner:not(a) > a { border-color: #000; -webkit-animation: rainbow 1s ease-in-out infinite; animation: rainbow 1s ease-in-out infinite; } .toolbar-item-inner { display: flex; justify-content: center; align-items: center; } a.toolbar-item-inner, button.toolbar-item-inner { color: #000; padding: 15px; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: background-color 0.2s, border-color 0.2s; } .toolbar-item-inner > a { padding: 15px; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: all 0.2s; display: flex; } .toolbar-item-inner > .cart-count bo + span, .toolbar-item-inner > svg bo + span { margin-left: 8px; } .toolbar-item-inner > span { text-transform: uppercase; } .toolbar-item-inner > .icon, .toolbar-item-inner > a > .icon { font-size: 1.25rem; display: block; } .main-bar { height: 0; transition: height 0.1s; } @media print, screen and (min-width: 64em) { .main-bar { height: 60px; } } .main-bar > div { height: 100%; } .main-bar-top { position: relative; z-index: 2; } .main-bar-item { align-items: center; height: 0; width: 0; } .main-bar-item a, .main-bar-item button { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; cursor: pointer; } @media print, screen and (min-width: 64em) { .main-bar-items { position: absolute; bottom: -32px; opacity: 0; transition: opacity 0.2s; } body:not(.compact-header) .main-bar-items { opacity: 0; cursor: default; pointer-events: none; } .compact-header .main-bar-items { opacity: 1; } .main-bar-items.left { left: 0; } .main-bar-items.right { right: 0; } } .main-bar-logo { font-weight: 700; align-items: center; display: flex; height: 100%; justify-content: flex-start; z-index: 2; } @media print, screen and (min-width: 40em) { .main-bar-logo { justify-content: center; } } .main-bar-logo a { text-decoration: none; } .main-bar-logo a img, .main-bar-logo a svg { height: 50px; width: auto; transition: height 0.4s, margin-top 0.4s, top 0.4s, -webkit-transform 0.4s; transition: transform 0.4s, height 0.4s, margin-top 0.4s, top 0.4s; transition: transform 0.4s, height 0.4s, margin-top 0.4s, top 0.4s, -webkit-transform 0.4s; } .compact-header .main-bar-logo a img, .compact-header .main-bar-logo a svg { height: 50px; } @media print, screen and (min-width: 64em) { .compact-header .main-bar-logo a img, .compact-header .main-bar-logo a svg, .main-bar-logo a img, .main-bar-logo a svg { height: 68px; } } .main-bar-logo-text { font-size: 1.375rem; line-height: 1; text-transform: uppercase; text-decoration: none; } @media print, screen and (min-width: 64em) { .main-bar-logo-text { font-size: 2.25rem; } } [data-zoomable] { z-index: 4; } .medium-zoom-overlay { z-index: 4; } .section-product .variant-id { display: none; } @media print, screen and (min-width: 64em) { .section-product .product-details-container { padding-left: 30px; } } .section-product .product-details { background: #fff; padding: 30px; border: 2px solid #000; } .section-product .product-vendor a { text-decoration: none; } .section-product .product-vendor a:hover { text-decoration: underline; } .section-product .price-compare { color: #d00000; font-weight: 400; } .section-product .after-pay-info { font-size: 0.875rem; } .section-product .after-pay-info svg { display: inline-block; height: 1.2em; width: 6em; vertical-align: middle; } .section-product .option-label { text-transform: uppercase; font-weight: 700; margin-bottom: 10px; color: #000; } .section-product .color-swatch { display: inline-flex; flex-wrap: wrap; margin: -5px; } .section-product .color-swatch input[type="radio"] { position: absolute; visibility: hidden; left: -9999px; text-indent: -9999px; height: 0; } .section-product .color-swatch input[type="radio"] + label { margin: 5px; background: currentColor; line-height: 1; position: relative; border-radius: 50%; width: 50px; height: 50px; overflow: hidden; border: 2px solid #000; box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 8px #000; transition: all 0.2s ease-in; } .section-product .color-swatch input[type="radio"] + label.has-secondary:before { content: ""; display: block; position: absolute; right: 0; top: 0; background: currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 51%); box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 8px #000; border-radius: 50%; width: 100%; height: 100%; transition: all 0.2s ease-in; } .section-product .color-swatch input[type="radio"] + label span { display: none; } .section-product .color-swatch input[type="radio"]:not(:disabled) + label { cursor: pointer; } .section-product .color-swatch input[type="radio"]:disabled + label { background: transparent; opacity: 0.2; } .section-product .color-swatch input[type="radio"]:checked + label { border-width: 6px; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #000; } .section-product .color-swatch input[type="radio"]:checked + label:before { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #000; } .section-product .input-wrap { margin: 0 -5px; width: calc(100% + 10px); flex-wrap: wrap; display: flex; } .section-product .input-wrap input[type="radio"] { position: absolute; visibility: hidden; left: -9999px; text-indent: -9999px; height: 0; } .section-product .input-wrap input[type="radio"] + label { display: flex; align-items: center; flex: 0 0 calc(25% - 10px); margin: 5px; padding: 10px; border: 2px solid #000; cursor: pointer; transition: all 0.2s; min-height: 45px; } .section-product .input-wrap input[type="radio"] + label svg { width: auto; height: 30px; margin-right: 10px; } .section-product .input-wrap input[type="radio"]:checked + label, .section-product .input-wrap input[type="radio"]:not(:disabled) + label:hover { background: #000; color: #fff; } .section-product .input-wrap input[type="radio"]:disabled + label { opacity: 0.2; cursor: auto; } .section-product .input-wrap input[type="radio"].unavailable + label { position: relative; } .section-product .input-wrap input[type="radio"].unavailable + label:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 45deg, transparent 49%, #000 50%, #000 52%, transparent 53% ); } .section-product .input-wrap.option-fit input[type="radio"] + label { flex-basis: calc(50% - 10px); } .section-product .select-wrap option:disabled { color: #dbdbdb; } .section-product .error-message { display: block; color: #d00000; } .section-product .error-message:not(.visible) { display: none; } .section-product .product-info-label { padding: 11px 10px; background-color: #f1f1f1; } .section-product .product-info-label p { text-transform: uppercase; text-align: center; margin: 0; } .section-product .glide__slide img { width: 100%; } .section-product .quantity-wrapper > .grid-x { margin: 0 -5px; } .section-product .quantity-wrapper > .grid-x > .cell { margin: 0 5px; } .section-product .component-quantity-selector { width: 100%; } .section-product .component-quantity-selector button { width: auto; } .featured-image-slider-container, .product-images { position: relative; } .featured-image-slider-container .zoom-image { display: none; opacity: 0; position: absolute; width: 100%; height: 100%; background-size: cover; background-position: 50%; transition: opacity 0.2s; } .featured-image-slider-container .zoom-image:hover { opacity: 1; } @media print, screen and (min-width: 64em) { .featured-image-slider-container .zoom-image { display: block; } } @media print, screen and (min-width: 64em) { .featured-image-slider-container:hover [data-glide-el="controls"] { opacity: 1; visibility: visible; } .featured-image-slider-container [data-glide-el="controls"] { opacity: 0; visibility: hidden; transition: all 0.2s; } } .featured-image-slider-container .slider-arrow { pointer-events: auto; cursor: pointer; z-index: 1; width: 50px; height: 50px; border: 2px solid #000; background-color: #fff; color: #000; display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 39.99875em) { .featured-image-slider-container .slider-arrow { display: none; } } @media print, screen and (min-width: 40em) { .featured-image-slider-container .slider-arrow { margin: 15px 0; } } @media print, screen and (min-width: 64em) { .featured-image-slider-container .slider-arrow:hover { color: #fff; background-color: #000; } } @media screen and (max-width: 39.99875em) { .featured-image-slider-container .slider-arrow.slider-prev { left: auto; bottom: 0; top: auto; right: 60px; } } @media screen and (max-width: 39.99875em) { .featured-image-slider-container .slider-arrow.slider-next { top: auto; bottom: 0; right: 0; } } .thumbnail-image-slider-arrow { display: none; cursor: pointer; padding: 4px 7.5px; height: 65px; width: 65px; flex: 1 0 65px; border: 2px solid #000; line-height: 40px; align-items: center; justify-content: center; } @media print, screen and (min-width: 64em) { .thumbnail-image-slider-arrow:hover { color: #fff; background-color: #000; } } .thumbnail-image-slider-arrow:before { content: ""; display: block; width: 13px; height: 13px; border-bottom: 3px solid; border-right: 3px solid; } .thumbnail-image-slider-arrow.thumbnail-image-slider-arrow-prev:before { -webkit-transform: rotate(135deg); transform: rotate(135deg); } .thumbnail-image-slider-arrow.thumbnail-image-slider-arrow-next:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .thumbnail-image-slider-container { margin: 15px 0; } @media print, screen and (min-width: 64em) { .thumbnail-image-slider-container { position: relative; margin: 0; display: flex; } } .thumbnail-image-slider-container.overflow .thumbnail-image-slider-arrow { display: flex; } @media print, screen and (min-width: 64em) { .thumbnail-image-slider-container.overflow .thumbnail-image-slider { overflow: hidden; } } .thumbnail-image-slider-container .thumbnail-image-slider { position: relative; display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth; margin: 0 10px; } .thumbnail-image-slider-container .thumbnail-image-slider .thumbnail-image-slide { margin: 0 15px 0 0; position: relative; display: block; cursor: pointer; padding: 0; flex: 0 0 auto; } @media print, screen and (min-width: 40em) { .thumbnail-image-slider-container .thumbnail-image-slider .thumbnail-image-slide { margin: 0 15px 15px 0; } } @media print, screen and (min-width: 64em) { .thumbnail-image-slider-container .thumbnail-image-slider .thumbnail-image-slide { margin: 0 15px 0 0; } } .thumbnail-image-slider-container .thumbnail-image-slider .thumbnail-image-slide img { display: block; width: 65px; border: 2px solid transparent; transition: border-color 0.2s; } .thumbnail-image-slider-container .thumbnail-image-slider .thumbnail-image-slide[aria-current="true"] img { border-color: #000; } .section-product-value-prop .value-prop { border: 2px solid #000; padding: 15px 20px; background: #fff; height: 100%; display: flex; flex-direction: column; white-space: normal; } @media print, screen and (min-width: 64em) { .section-product-value-prop .value-prop { flex-direction: row; align-items: center; } } .section-product-value-prop .value-prop__image { width: 40px; height: 40px; margin: 0 0 20px; } @media print, screen and (min-width: 64em) { .section-product-value-prop .value-prop__image { margin: 0 20px 0 0; } } @media print, screen and (min-width: 40em) { .section-value-prop { padding: 30px 0; } } .section-value-prop .value-prop { height: 100%; padding: 15px 20px; white-space: normal; display: flex; align-items: center; background-color: #f8f8f8; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media print, screen and (min-width: 40em) { .section-value-prop .value-prop { background-color: transparent; padding: 10px; } } .section-value-prop .value-prop__image-container { margin-right: 20px; flex: 0 0 auto; } .section-value-prop .value-prop__image { width: 40px; display: block; } .section-value-prop .value-prop-wrapper { position: relative; } @media screen and (max-width: 39.99875em) { .section-value-prop .value-prop-wrapper .glide__track { overflow: visible; } } @media print, screen and (min-width: 40em) { .section-value-prop .value-prop-wrapper:after { content: ""; display: block; height: 100%; width: 50px; position: absolute; top: 0; right: 0; background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff 65%); } } @media print, screen and (min-width: 40em) and (min-width: 64em) { .section-value-prop .value-prop-wrapper:after { width: 100px; } } .section-wayfinder .wayfinder-tile { height: 100%; padding: 20px; background: #fff; border: 2px solid #000; white-space: normal; display: flex; flex-direction: column; position: relative; } .section-wayfinder .wayfinder-tile.has-link:before { content: ""; width: 100%; height: 100%; position: absolute; z-index: -1; right: -10px; bottom: -10px; -webkit-animation: rainbow 2s ease-in-out infinite; animation: rainbow 2s ease-in-out infinite; opacity: 0; border: 2px solid #000; transition: all 0.2s; } @media (hover: hover) { .section-wayfinder .wayfinder-tile.has-link:hover:before { opacity: 1; } } .accordion.closed { display: none; } @media screen and (max-width: 39.99875em) { .accordion-for-small.closed { display: none; } } @media screen and (max-width: 63.99875em) { .accordion-for-medium.closed { display: none; } } .accordion-toggle { display: flex; align-items: center; padding: 17px 20px; border-top: 1px solid #000; border-bottom: 1px solid #000; cursor: pointer; width: 100%; text-align: left; } .accordion-toggle[aria-expanded="true"] { border-bottom: none; } .accordion-toggle ~ .accordion-toggle { border-top: none; } .accordion-toggle-title { margin: 0; flex: 1 1 0; text-overflow: ellipsis; overflow: hidden; font-weight: 700; } .accordion-body { padding: 20px; border-bottom: 1px solid #000; } .accordion-toggle-icon { position: relative; width: 14px; height: 14px; margin-right: 10px; } .accordion-toggle-icon:after { content: ""; position: absolute; top: 50%; left: 50%; display: block; width: 9.8px; height: 9.8px; border-right: 2px solid; border-bottom: 2px solid; -webkit-transform: translate(-50%, -25%) rotate(225deg); transform: translate(-50%, -25%) rotate(225deg); } .accordion-toggle[aria-expanded="false"] .accordion-toggle-icon:after { -webkit-transform: translate(-50%, -75%) rotate(45deg); transform: translate(-50%, -75%) rotate(45deg); } .accordion-tabs-item { cursor: pointer; text-align: center; } .accordion-tabs-content { padding: 20px 0; } @media print, screen and (min-width: 64em) { .accordion-tabs .accordion-tabs-content:not(.active) { display: none; } } @media screen and (max-width: 63.99875em) { .accordion-tabs .accordion-tabs-content { display: none; } .accordion-tabs .accordion-tabs-toggle[aria-expanded="true"] + .accordion-tabs-content { display: block; } } .accordion-tabs-headings { display: none; } .accordion-tabs-toggle { display: block; display: flex; align-items: center; padding: 17px 20px; border-top: 1px solid #000; border-bottom: 1px solid #000; cursor: pointer; width: 100%; text-align: left; } .accordion-tabs-toggle[aria-expanded="true"] { border-bottom: none; } .accordion-tabs-toggle ~ .accordion-tabs-toggle { border-top: none; } .accordion-tabs-toggle-title { margin: 0; flex: 1 1 0; text-overflow: ellipsis; overflow: hidden; font-weight: 700; } .accordion-tabs-toggle-icon { position: relative; width: 14px; height: 14px; margin-right: 10px; } .accordion-tabs-toggle-icon:after { content: ""; position: absolute; top: 50%; left: 50%; display: block; width: 9.8px; height: 9.8px; border-right: 2px solid; border-bottom: 2px solid; -webkit-transform: translate(-50%, -25%) rotate(225deg); transform: translate(-50%, -25%) rotate(225deg); } .accordion-tabs-toggle[aria-expanded="false"] .accordion-tabs-toggle-icon:after { -webkit-transform: translate(-50%, -75%) rotate(45deg); transform: translate(-50%, -75%) rotate(45deg); } @media print, screen and (min-width: 64em) { .accordion-tabs .accordion-tabs-headings { display: flex; } .accordion-tabs .accordion-tabs-toggle { display: none; } } .component-modal .modal { position: fixed; z-index: 999; background-color: #000; background-color: rgba(0, 0, 0, 0.5); width: 100%; overflow: auto; display: none; justify-content: center; align-items: baseline; top: 0; right: 0; bottom: 0; left: 0; padding: 0; } @media print, screen and (min-width: 40em) { .component-modal .modal { padding: 40px; } } .component-modal .modal-toggle { cursor: pointer; } .component-modal .modal.open { display: flex; } .component-modal .modal__content { position: relative; background-color: #fefefe; padding: 20px; border: 1px solid #888; width: 100%; margin: 20px; max-width: 768px; } .component-modal .modal__image { max-width: 100%; } .component-modal .modal__close { cursor: pointer; padding: 15px; background: #fff; border: 2px solid #000; position: absolute; right: -15px; top: -15px; color: #000; } .component-modal .modal__close svg { display: block; } .component-quantity-selector { display: inline-flex; align-items: center; border-radius: 0; border: 2px solid #000; } .component-quantity-selector button { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; padding: 10px; color: #000; cursor: pointer; transition: border 0.25s, color 0.25s; } .component-quantity-selector button.input-dark { background-color: transparent; color: #fff; } @media print, screen and (min-width: 40em) { .component-quantity-selector button { height: 50px; } } .component-quantity-selector button svg { width: 12px; height: 12px; } .component-quantity-selector button.disabled { color: #e1e1e1; } .component-quantity-selector button:not(.disabled):hover { border-color: #000; } .component-quantity-selector input { width: 50px; min-width: 50px; height: 50px; padding: 0 4px; border-width: 0; border-style: solid; border-radius: 0; -moz-appearance: textfield; -webkit-appearance: none; appearance: none; outline: none; text-align: center; font-size: 1rem; letter-spacing: 0.15em; } .component-quantity-selector input.input-dark { background-color: transparent; color: #fff; } .component-quantity-selector input::-webkit-inner-spin-button { -webkit-appearance: none; } .component-quantity-selector.input-dark, .component-quantity-selector.input-dark button, .component-quantity-selector.input-dark input { background-color: transparent; color: #fff; } .repeated-content .repeated-content-block { padding: 30px 0; } @media print, screen and (min-width: 40em) { .repeated-content .repeated-content-block { padding: 60px 0; } } @media print, screen and (min-width: 40em) { .repeated-content .repeated-content-block.align-right .repeated-content-text-wrapper { order: 1; margin-right: -25%; } } @media print, screen and (min-width: 40em) { .repeated-content .repeated-content-block.align-right .repeated-content-image-wrapper { order: 2; } } @media screen and (max-width: 39.99875em) { .repeated-content .repeated-content-block.align-right .repeated-content-image-wrapper { margin-left: calc(25% + -15px); } } @media print, screen and (min-width: 40em) { .repeated-content .repeated-content-block.align-left .repeated-content-image-wrapper { margin-right: -25%; } } .repeated-content .repeated-content-image-wrapper { position: relative; } @media screen and (max-width: 39.99875em) { .repeated-content .repeated-content-image-wrapper { margin: -30px -15px 0; width: calc(75% + 30px); } } .repeated-content .repeated-content-image { width: 100%; border: none; transition: opacity 0.3s; display: block; } .repeated-content .repeated-content-image.lazyload { opacity: 0; } .repeated-content .repeated-content-image.lazyloaded { opacity: 1; } @supports ((-o-object-fit: cover) or (object-fit: cover)) { @media print, screen and (min-width: 40em) { .repeated-content .repeated-content-image { position: absolute; top: 0; left: 0; height: 100%; -o-object-fit: cover; object-fit: cover; } } } .repeated-content .repeated-content-grid { position: relative; } .repeated-content .repeated-content-grid:before { content: ""; background-image: url(https://localhost:8080/splatter.png); background-repeat: no-repeat; background-size: contain; display: block; position: absolute; left: 0; top: 0; height: 100%; width: 100%; } @supports ((-o-object-fit: cover) or (object-fit: cover)) { .repeated-content .repeated-content-grid.align-middle { align-items: stretch; } } .repeated-content .repeated-content-text-wrapper { position: relative; background-color: #fff; border: 2px solid #000; margin-top: -100px; padding: 30px; z-index: 1; } @media print, screen and (min-width: 40em) { .repeated-content .repeated-content-text-wrapper { margin-top: 126px; margin-bottom: 126px; } } .tabs-item { cursor: pointer; text-align: center; } .tabs-content:not(.active) { display: none; } .article-tile { position: relative; display: flex; height: 100%; } @media print, screen and (min-width: 40em) { .article-tile:hover .article-tile__image { opacity: 0.9; } } .article-tile__image-container { position: relative; width: 100%; height: 0; padding-bottom: 100%; transition: all 0.2s; } .article-tile__image { position: absolute; top: 50%; left: 50%; width: 100%; display: block; opacity: 0; transition: opacity 0.3s; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; height: 100%; max-width: none; } @supports ((-o-object-fit: cover) or (object-fit: cover)) { .article-tile__image { height: 100%; width: 100%; max-width: 100%; -o-object-fit: cover; object-fit: cover; } } .article-tile__image.lazyloaded { opacity: 1; } .article-tile__title { padding: 15px; background: #fff; border: 2px solid #000; position: absolute; width: calc(100% - 30px); bottom: 0; left: 0; margin: 15px; text-align: left; white-space: normal; } .breadcrumb { margin: 0; padding: 0; list-style-type: none; } .breadcrumb li { display: inline-block; } .breadcrumb a { text-decoration: none; } .cart-modal-count { position: relative; padding-left: 5px; line-height: 20px; } .cart-modal-view { position: relative; visibility: hidden; transition: visibility 0.3s; } .cart-modal-view.open { pointer-events: auto; visibility: visible; } .cart-modal-view.open .inside { -webkit-transform: translateX(0); transform: translateX(0); } .cart-modal-view.open .cart-modal-overlay { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 11; display: block; background-color: rgba(0, 0, 0, 0.5); -webkit-animation: fade-in 0.3s both; animation: fade-in 0.3s both; } .cart-modal-view .inside { position: fixed; top: 0; right: 0; z-index: 12; display: flex; flex-direction: column; margin-left: auto; width: 350px; max-width: 100%; background: #fff; padding: 15px; height: 100%; overflow: auto; -webkit-transform: translateX(100%); transform: translateX(100%); transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } .cart-modal-view .product-details { flex-basis: 100px; } .cart-modal-view .totals { text-transform: uppercase; } .cart-modal-view .gift-check, .cart-modal-view .totals { padding: 15px; border: 2px solid #000; } .popup-products { list-style: none; overflow-y: auto; max-height: 200px; flex-shrink: 0; padding: 0; margin-bottom: 20px; } @media print, screen and (min-width: 40em) { .popup-products { flex-shrink: 1; max-height: 400px; } } .popup-product { position: relative; flex-wrap: nowrap; margin: 20px 0; } .popup-product a { text-decoration: none; } .popup-product-right button { cursor: pointer; } .popup-product .spinner-container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; align-items: center; justify-content: center; background: hsla(0, 0%, 100%, 0.8); } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } .popup-product .spinner { -webkit-animation: spin 0.7s linear infinite; animation: spin 0.7s linear infinite; height: 1em; width: 1em; border-radius: 50%; border-color: currentcolor transparent; border-style: solid; border-width: 0.1em; box-sizing: border-box; display: inline-block; margin: 0 12px; } .popup-product.loading .product-edit svg { display: none; } .popup-product.loading .product-edit:before { content: ""; display: inline-block; width: 10px; height: 10px; background: currentColor; border-radius: 50%; -webkit-animation: pulseOut 1s linear infinite; animation: pulseOut 1s linear infinite; } .popup-product-image { width: 60px; margin-right: 10px; flex-shrink: 0; } .popup-product-image img { width: 100%; display: block; height: auto; } .popup-product-image a { text-decoration: none; } .popup-product-right { display: flex; } .popup-product-edit { padding: 10px 15px; } .popup-product-edit .icon { font-size: inherit; } .cart-modal-close { padding: 15px; cursor: pointer; background: #000; color: #fff; display: block; } .cart-modal-close svg { display: block; } .cart-modal-empty { padding: 20px; text-align: center; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%238C8C8CFF' stroke-width='2' stroke-dasharray='9, 12' stroke-linecap='square'/%3E%3C/svg%3E"); } .cart-modal-heading { width: 100%; display: flex; justify-content: space-between; align-items: center; padding-bottom: 30px; } .cart-modal-heading, .cart-modal-ship-notice { background-image: linear-gradient( 90deg, rgba(0, 0, 0, 0.1) 50%, transparent 0 ); background-position: bottom; background-size: 30px 1px; background-repeat: repeat-x; } .cart-modal-ship-notice { padding: 20px 0; } .cart-modal-ship-bar { background-color: #000; border: 5px solid #000; margin-top: 20px; } .cart-modal-ship-progress { background-color: #fff; background-image: linear-gradient( -45deg, #f9f9f9 15%, #fff 0, #fff 50%, #f9f9f9 0, #f9f9f9 65%, #fff 0, #fff ); background-size: 10px 10px; height: 20px; transition: width 0.3s ease-out; } .upsell-product { border: 2px solid #000; padding: 10px; } .js-toggle-cart-modal { color: #000; text-decoration: none; position: relative; z-index: 1; } .js-toggle-cart-modal.active { background-color: #f8f8f8; } .collection-filters-mobile-sticky { position: -webkit-sticky; position: sticky; z-index: 10; bottom: 0; background: #f8f8f8; width: 100%; padding: 20px 15px; } .popup-visible .collection-filters-mobile-sticky { position: fixed; z-index: 4; background: #fff; } .collection-toolbar__sort select { text-transform: uppercase; font-weight: 700; letter-spacing: 1px; } @media print, screen and (min-width: 40em) { .collection-toolbar__sort select { font-size: 0.75rem; } .collection-toolbar__sort select option { font-size: 1rem; } } .collection-toolbar { border-radius: 0; background-color: #fff; margin-bottom: 30px; } @media screen and (max-width: 63.99875em) { .collection-toolbar { position: fixed; z-index: 3; top: 0; right: 0; left: 0; height: 100%; display: none; overflow: auto; padding: 15px 15px 100px; border-radius: 0; } .collection-toolbar.open { display: block; } } .collection-toolbar ul { padding: 0; margin: 5px 0 0; list-style: none; } .collection-toolbar a { text-decoration: none; display: block; padding: 5px 0; line-height: 1.5; text-transform: capitalize; } .collection-toolbar .h6 { margin-bottom: 0; } .collection-toolbar .collection-filter-categories, .collection-toolbar .collection-filter-radios { padding-bottom: 20px; max-height: 300px; overflow: auto; } .collection-filter-title { font-size: 0.875rem; text-transform: uppercase; font-weight: 600; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: flex; justify-content: space-between; align-items: center; width: calc(100% + 40px); padding: 20px; margin: 0 -20px; cursor: pointer; } .collection-filter-title .icon { font-size: 1rem; } .collection-filter-title[aria-expanded="true"] .icon { -webkit-transform: scaleY(-1); transform: scaleY(-1); } .collection-filter-group { padding: 0 20px; border: 2px solid #000; } .collection-filter-group:not(:last-of-type) { border-bottom: none; } .collection-filter-categories li { border-bottom: 2px solid #000; } .collection-filter-categories li:last-of-type { border-bottom: none; } .collection-filter-categories li a[aria-current] { color: #000; font-weight: 600; } .collection-filter-radios:not([hidden]) { display: flex; flex-direction: column; } .collection-filter-radios#size-filters li a { text-transform: uppercase; } .collection-filter-radios a { display: flex; align-items: center; position: relative; } .collection-filter-radios a:focus { outline: none; } .collection-filter-radios a:focus:before { background-color: #000; border: 4px solid #000; } .collection-filter-radios a:before { content: ""; display: inline-block; width: 1.4285714286em; height: 1.4285714286em; margin-right: 10px; border: 2px solid #000; border-radius: 0; } .collection-filter-radios a[aria-current]:before { background-color: #000; border: 4px solid #000; } .collection-filter-color-list { display: flex; flex-flow: row wrap; } .collection-filter-color-list[hidden] { display: none; } .collection-toolbar .collection-filter-color-list { margin: 0 -5px; padding-bottom: 20px; } .collection-filter-color-list a { padding: 0; } .collection-filter-color-list .color-swatch { background: currentColor; position: relative; width: 30px; height: 30px; border-radius: 50%; box-shadow: none; border: 1px solid #000; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: border 0.4s; margin: 5px; cursor: pointer; font-size: 0; overflow: hidden; } .collection-filter-color-list .color-swatch.has-secondary:before { display: block; content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(90deg, currentColor 50%, transparent 51%); } .collection-filter-color-list .color-swatch:checked, .collection-filter-color-list .color-swatch[aria-current] { border-width: 3px; } .collection-filter-color-list .color-swatch:disabled { background: transparent; border: 2px solid; opacity: 0.2; cursor: not-allowed; } .collection-filter-color-list .color-swatch:focus { outline: none; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 0 5px 1px rgba(0, 0, 0, 0.3); } .collection-filter-list { display: flex; flex-flow: row wrap; } .collection-filter-list[hidden] { display: none; } .collection-toolbar .collection-filter-list { margin: 15px -2.5px -5px; } .collection-filter-list li { flex-basis: calc(25% - 5px); flex-grow: 1; margin: 5px 2.5px; } .collection-filter-list a { text-align: center; text-transform: uppercase; font-size: 0.75rem; line-height: 2; width: 100%; border: 1px solid #000; border-radius: 0; color: #000; padding: 3px 5px; height: 100%; display: flex; align-items: center; justify-content: center; } .collection-filter-list a:focus { outline: none; } .collection-filter-list a:hover { border-color: #424242; } .collection-filter-list a[aria-current] { border: 4px solid #000; } .collection-tile { position: relative; width: 100%; background-color: #f8f8f8; } @media print, screen and (min-width: 40em) { .collection-tile:hover .collection-tile__image { opacity: 0.9; } } .collection-tile__image-container { position: relative; width: 100%; height: 0; padding-bottom: 100%; transition: all 0.2s; } .collection-tile__image { position: absolute; top: 50%; left: 50%; width: 100%; display: block; opacity: 0; transition: opacity 0.3s; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @supports ((-o-object-fit: contain) or (object-fit: contain)) { .collection-tile__image { height: 100%; -o-object-fit: contain; object-fit: contain; } } .collection-tile__image.lazyloaded { opacity: 1; } .collection-tile .section-list-collection-image { transition: opacity 0.2s; } .collection-tile__title { padding: 5px; background: #fff; border: 2px solid #000; position: absolute; width: calc(100% - 10px); bottom: 0; left: 0; margin: 5px; text-align: left; white-space: normal; } @media print, screen and (min-width: 40em) { .collection-tile__title { padding: 15px; width: calc(100% - 10px); } } @media screen and (max-width: 39.99875em) { .collection-tile__title h2 { font-size: 0.875rem; } } .currency-switcher { background-color: #fff; color: inherit; font-weight: 700; border: 0; } @media print, screen and (min-width: 40em) { .currency-switcher { font-size: 0.75rem; } } .header-feature-strip { background-color: #f8f8f8; color: #000; text-transform: uppercase; overflow: auto; } .header-feature-strip.theme-pink { background: #fe5da0; } .header-feature-strip.theme-yellow { background: #feee5d; } .header-feature-strip.theme-blue { background: #5debfe; } .header-feature-strip.theme-green { background: #b7fe5d; } .header-feature-strip.theme-orange { background: #febe5d; } .header-feature-strip.theme-white { background: #fff; } .header-feature-strip.theme-black { background: #000; color: #fff; } .header-feature-strip::-webkit-scrollbar { height: 0; width: 0; background: transparent; display: none; } .header-feature-strip-list { list-style: none; padding: 0; height: 30px; margin: 0; } @media screen and (max-width: 39.99875em) { .header-feature-strip-list { flex-wrap: nowrap; justify-content: flex-start; } } .header-feature-strip p { margin: 0; font-size: 0.75rem; line-height: 0.9375rem; letter-spacing: 1px; } .header-feature-strip a { text-decoration: none; } .fit-modal__icon { font-size: 1rem; border-radius: 50%; padding: 5px; color: #000; transition: all 0.2s; } .fit-modal__icon svg { display: block; } .fit-modal__icon:hover { background: #000; color: #fff; } .main-nav { font-weight: 700; text-transform: uppercase; letter-spacing: 0.0716666667em; line-height: 1.4166666667; } .main-nav .icon { height: 1em; width: 1em; margin: 0.1666666667em 0 0.1666666667em 9px; } @media print, screen and (min-width: 64em) { .main-nav a { display: flex; text-decoration: none; transition: color 0.2s linear; justify-content: center; align-items: center; color: #000; } .main-nav ul { list-style: none; margin: 0; padding: 0; } .main-nav-links { display: flex; justify-content: flex-start; } .main-nav-links > li:hover .main-nav-dropdown { display: block; } .main-nav-links > li:hover .main-nav-megamenu { display: flex; } .main-nav-links > li > a { padding: 10px 8px; height: 0; } } @media screen and (min-width: 64em) and (min-width: 75em) { .main-nav-links > li > a { padding: 18px 19px 17px; } } @media print, screen and (min-width: 64em) and (min-width: 64em) { .main-nav-links > li > a { height: 60px; } .compact-header .main-nav-links > li > a { height: 60px; } } @media print, screen and (min-width: 64em) { .main-nav-child-links a { padding: 5px 0; } } @media print, screen and (min-width: 64em) { .main-nav-grandchild-links a { color: #424242; padding: 3px 0; } } @media print, screen and (min-width: 64em) { .main-nav-dropdown { background-color: #fff; } } @media print, screen and (min-width: 64em) { .main-nav-dropdown, .main-nav-megamenu { position: absolute; display: none; text-align: left; margin-top: -1px; transition: top 0.1s; padding: 15px 19px; } .main-nav-megamenu { justify-content: center; background-color: #f8f8f8; width: 100%; left: 0; } .main-nav-megamenu > ul.main-nav-child-links { display: flex; flex-wrap: wrap; max-width: 1140px; margin: auto -15px; width: calc(100% + 30px); } .main-nav-megamenu > ul.main-nav-child-links > li { flex: 0 0 calc(25% - 30px); margin: 10px 15px; } .main-nav-megamenu > ul.main-nav-child-links > li > a { background: #fff; padding: 5px; display: flex; align-items: center; justify-content: left; height: 100%; } .main-nav-megamenu > ul.main-nav-child-links > li > a span { padding: 10px 20px; } } .main-nav .nav-item-new { background: #d45dfe; } .main-nav .nav-item-sale { background: #fe5da0; } .mobile-menu-toggle { position: relative; display: block; width: 40px; height: 40px; border: none; cursor: pointer; transition: -webkit-transform 0.2s ease-in; transition: transform 0.2s ease-in; transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in; color: #000; outline: none; background: none; z-index: 2; } .mobile-menu-toggle:focus { outline: none; color: #000; } .mobile-menu-toggle:focus:not(.mobile-menu-toggle-active) span, .mobile-menu-toggle:focus:not(.mobile-menu-toggle-active) span:after, .mobile-menu-toggle:focus:not(.mobile-menu-toggle-active) span:before { box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); } @media print, screen and (min-width: 64em) { .mobile-menu-toggle { display: none; } } .mobile-menu-toggle span, .mobile-menu-toggle span:after, .mobile-menu-toggle span:before { content: ""; position: absolute; left: 50%; display: block; width: 22px; height: 2px; margin-left: -11px; background: currentColor; transition: all 0.2s ease-in; } .mobile-menu-toggle span { top: 50%; margin-top: -1px; } .mobile-menu-toggle span:before { top: -7px; } .mobile-menu-toggle span:after { bottom: -7px; } .mobile-menu-toggle-active { -webkit-transform: rotate(90deg); transform: rotate(90deg); color: #424242; } .mobile-menu-toggle-active span { background: transparent; } .mobile-menu-toggle-active span:before { -webkit-transform: rotate(45deg) translate(5px, 5px); transform: rotate(45deg) translate(5px, 5px); } .mobile-menu-toggle-active span:after { -webkit-transform: rotate(-45deg) translate(5px, -5px); transform: rotate(-45deg) translate(5px, -5px); } .mobile-nav { display: none; } .mobile-nav-wrapper { overflow: scroll; height: 100%; } @media screen and (max-width: 63.99875em) { .mobile-nav { position: fixed; z-index: 1; top: 80px; right: 100%; bottom: 0; display: block; width: 100%; background-color: #f8f8f8; -webkit-transform: translateX(0); transform: translateX(0); transition: -webkit-transform 0.2s ease-out; transition: transform 0.2s ease-out; transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out; } .compact-header .mobile-nav { top: 80px; } body.has-promo-strip .mobile-nav { top: 125px; } body.has-promo-strip.compact-header .mobile-nav { top: 80px; } .main-nav-active .mobile-nav { -webkit-transform: translateX(100%); transform: translateX(100%); } .mobile-nav-links-title { display: block; padding: 6px 20px; border-top: 1px solid #e4e5e7; border-bottom: 1px solid #e4e5e7; font-size: 10px; text-transform: uppercase; letter-spacing: 0.3em; background: #f6f7f9; } .mobile-nav-links { margin: 0; list-style: none; padding: 0 0 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); color: #000; } .mobile-nav-links ul { margin: 0; padding: 0; list-style: none; } .mobile-nav-links li { position: relative; opacity: 0; } .main-nav-active .mobile-nav-links li { opacity: 1; } .mobile-nav-links a { display: block; overflow: hidden; color: #000; min-height: 40px; padding: 15px 20px; text-transform: uppercase; text-decoration: none; letter-spacing: 0.0833333333em; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; font-size: 0.75rem; letter-spacing: 1px; } .mobile-nav-links a.has-children { padding-right: 50px; } .mobile-nav-links .toggle { position: absolute; top: 0; right: 0; width: 50px; height: 55px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: currentColor; } .mobile-nav-links .toggle svg { width: 20px; height: 20px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .mobile-nav-links .back-toggle svg { width: 20px; height: 20px; -webkit-transform: rotate(90deg); transform: rotate(90deg); margin-right: 10px; } .mobile-nav .child-links .toggle { height: 41px; } .mobile-nav .child-links a { padding: 10px 40px 10px 10px; } .mobile-nav .grandchild-links a { padding-left: 20px; } .mobile-nav .sub-links-title { background: #f8f8f8; color: #000; padding: 15px; font-weight: 700; font-size: 0.75rem; letter-spacing: 1px; display: flex; align-items: center; margin-bottom: 10px; position: -webkit-sticky; position: sticky; top: 0; z-index: 1; } .mobile-nav .sub-links-image { height: 50px; width: 50px; } .mobile-nav .sub-links, .mobile-nav .sub-links-megamenu { -webkit-transform: translateX(-100%); transform: translateX(-100%); background: #fff; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 100; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; overflow: scroll; } .mobile-nav .sub-links-megamenu > li > a, .mobile-nav .sub-links > li > a { background: #fff; padding: 10px 20px; display: flex; align-items: center; justify-content: left; height: 100%; white-space: inherit; } .mobile-nav .sub-links-megamenu > li > a span, .mobile-nav .sub-links > li > a span { padding: 10px 20px; } .mobile-nav .open > .sub-links, .mobile-nav .open > .sub-links-megamenu { -webkit-transform: translateX(0); transform: translateX(0); } .mobile-nav .social-icon-container { overflow: hidden; } .mobile-nav .social-icons { padding: 16px 20px; } .mobile-nav .social-icons svg { width: 24px; height: 24px; } } .mobile-nav .nav-item-new { background: #d45dfe; } .mobile-nav .nav-item-sale { background: #fe5da0; } .mobile-nav .mobile-top-nav { padding: 0 20px; list-style: none; display: flex; margin: 20px -10px; width: calc(100% - 20px); } .mobile-nav .mobile-top-nav a { padding: 10px; text-decoration: none; font-weight: 700; display: block; color: #000; } .mobile-nav-currency-switcher { padding: 0 20px; } .mobile-nav .currency-switcher { background-color: transparent; border: 2px solid #000; color: #000; } @media screen and (max-width: 63.99875em) { .main-nav-active { position: fixed; overflow: hidden; width: 100%; height: 100%; } } .page-item__body { position: relative; } .page-item__body p { margin-bottom: 0; } .page-item__body .button-group { margin-top: 10px; } .pagination { position: relative; color: #000; } .pagination a { text-decoration: none; transition: color 0.2s linear; } .pagination a:hover { color: #424242; } .pagination__pages { display: flex; justify-content: center; } .pagination__pages a, .pagination__pages span { font-size: 0.75rem; font-weight: 700; margin: 7px; height: 30px; width: 30px; border: 2px solid #000; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .pagination__pages a:hover, .pagination__pages span:hover { background: #000; color: #fff; } .pagination__pages span { color: #424242; } .pagination__pages .current { font-weight: 700; background: #000; color: #fff; } .pagination__next a, .pagination__previous a { display: block; text-transform: uppercase; font-size: 0.75rem; line-height: 0.9375rem; font-weight: 700; height: 30px; margin: 7px; padding: 7px 10px; border: 2px solid #000; letter-spacing: 0.0716666667em; } .pagination__next a:hover, .pagination__previous a:hover { background: #000; color: #fff; } .pagination__next { text-align: right; } .product-sticker { position: absolute; top: 0; left: 0; z-index: 1; background-color: #424242; color: #000; display: inline-block; font-size: 0.75rem; line-height: 0.9375rem; border: 2px solid #000; font-weight: 700; text-transform: uppercase; padding: 8px 13px; pointer-events: none; } .product-sticker-nearly-gone { background-color: #b7fe5d; } .product-sticker-new { background-color: #d45dfe; } .product-sticker-sale { background-color: #fe5da0; } .product-sticker-bargain-bin { background-color: #feee5d; } .product-sticker-as-seen-on-tv { background-color: #5debfe; } .product-sticker-limited-item, .product-sticker-low-stock { background-color: #b7fe5d; } .product-sticker-a-warwick-fav, .product-sticker-made-by-you { background-color: #febe5d; } .product-tabs .accordion-tabs-headings, .product-tabs .tabs-headings { display: flex; flex-wrap: nowrap; margin: -10px -10px 20px; overflow: auto; } .product-tabs .accordion-tabs-item, .product-tabs .tabs-item { margin: 10px; padding: 10px; color: #8c8c8c; border-bottom: 2px solid #8c8c8c; cursor: pointer; min-width: 110px; text-align: center; font-weight: 700; transition: all 0.2s; } .product-tabs .accordion-tabs-item.active, .product-tabs .accordion-tabs-item:hover, .product-tabs .tabs-item.active, .product-tabs .tabs-item:hover { color: #000; border-color: #000; } @media screen and (max-width: 63.99875em) { .product-tabs .accordion-tabs-headings { display: none; } } .product-tile { position: relative; width: 100%; height: 100%; z-index: 1; } .product-tile:before { content: ""; width: 100%; height: 100%; position: absolute; z-index: -1; right: -10px; bottom: -10px; -webkit-animation: rainbow 2s ease-in-out infinite; animation: rainbow 2s ease-in-out infinite; opacity: 0; border: 2px solid #000; transition: all 0.2s; } .product-tile .product-sticker { top: 12px; left: 12px; } .product-tile-container { position: relative; z-index: 1; border: 2px solid #000; background: #fff; height: 100%; } .product-tile__title { flex-grow: 1; align-items: flex-start; margin-bottom: 10px; transition: all 0.2s; } .product-tile__image-container { position: relative; width: 100%; height: 0; padding-bottom: 100%; background-color: #fff; overflow: hidden; transition: all 0.2s; } .product-tile__image { position: absolute; top: 50%; left: 50%; display: block; opacity: 0; padding: 2px; transition: opacity 0.3s; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; width: auto; height: 100%; } @supports ((-o-object-fit: contain) or (object-fit: contain)) { .product-tile__image { height: 100%; width: 100%; -o-object-fit: contain; object-fit: contain; } } .product-tile__image.lazyloaded { opacity: 1; } .product-tile__image-hover.lazyloaded { opacity: 0; } .product-tile__body { flex-grow: 1; padding: 20px 15px; } .product-tile__heading { flex-grow: 1; } .product-tile__color-swatches { z-index: 10; } .product-tile__color-swatches .color-swatch { display: inline-flex; flex-wrap: wrap; margin: -3px; } .product-tile__color-swatches .color-swatch input[type="radio"] { position: absolute; visibility: hidden; left: -9999px; text-indent: -9999px; height: 0; } .product-tile__color-swatches .color-swatch input[type="radio"] + label { margin: 3px; background: currentColor; line-height: 1; position: relative; border-radius: 50%; width: 30px; height: 30px; overflow: hidden; border: 1px solid #000; transition: all 0.2s ease-in; } .product-tile__color-swatches .color-swatch input[type="radio"] + label.has-secondary:before { content: ""; display: block; position: absolute; right: 0; top: 0; background: currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 51%); border-radius: 50%; width: 100%; height: 100%; transition: all 0.2s ease-in; } .product-tile__color-swatches .color-swatch input[type="radio"] + label span { display: none; } .product-tile__color-swatches .color-swatch input[type="radio"]:not(:disabled) + label { cursor: pointer; } .product-tile__color-swatches .color-swatch input[type="radio"]:disabled + label { background: transparent; opacity: 0.2; } .product-tile__color-swatches .color-swatch input[type="radio"]:checked + label { border-width: 2px; } .product-tile__compare-price { color: #d00000; font-weight: 400; } .product-tile__wishlist { position: relative; z-index: 2; } @media (hover: hover) { .product-tile:hover:before { opacity: 1; } .product-tile a.cover-link:hover + .product-tile__image-container .product-tile__image-hover { opacity: 1; } } .promo-strip { position: relative; display: flex; justify-content: center; align-items: center; background-color: #000; color: #fff; text-transform: uppercase; padding: 7px 10px 8px; height: 45px; transition: height 0.4s, margin-top 0.4s, top 0.4s, -webkit-transform 0.4s; transition: transform 0.4s, height 0.4s, margin-top 0.4s, top 0.4s; transition: transform 0.4s, height 0.4s, margin-top 0.4s, top 0.4s, -webkit-transform 0.4s; } @media print, screen and (min-width: 64em) { .promo-strip { height: 30px; } } .compact-header .promo-strip { margin-top: -45px; } @media print, screen and (min-width: 64em) { .compact-header .promo-strip { margin-top: -30px; } } .promo-strip p { margin: 0; font-size: 0.75rem; line-height: 0.9375rem; letter-spacing: 1px; } body.has-promo-strip { padding-top: 185px; } body.has-promo-strip.compact-header { padding-top: 140px; } @media print, screen and (min-width: 64em) { body.has-promo-strip { padding-top: 244px; } body.has-promo-strip.compact-header { padding-top: 160px; } } @media print, screen and (min-width: 64em) { .form-wrapper { -webkit-transform: translateY(-100%); transform: translateY(-100%); transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; } .search-focussed .form-wrapper { -webkit-transform: translateY(0); transform: translateY(0); position: relative; background: #fff; padding: 20px 30px; z-index: 4; } } .search-input-wrapper { position: relative; z-index: 3; overflow: hidden; max-width: 1140px; margin: auto; } .search-autocomplete { position: relative; } .search-autocomplete-view { width: 0; position: fixed; left: 0; top: 0; right: 0; z-index: 4; transition: all 0.4s; } .search-autocomplete-view.search-focussed { width: auto; } @media screen and (max-width: 63.99875em) { .search-autocomplete-view { position: fixed; top: 40px; left: 20px; right: 20px; z-index: 4; } } .search-autocomplete .underlay { position: absolute; top: 0; bottom: 0; left: 0; display: flex; padding: 0 0 0 20px; font-size: 20px; letter-spacing: 0.15em; justify-content: center; align-items: center; } .search-autocomplete input { width: 100%; padding: 11px 20px 11px 50px; background: #fff; border: none; outline: none; height: 70px; } @media print, screen and (min-width: 64em) { .search-autocomplete input { padding: 14px 20px 13px 50px; font-size: 1.25rem; line-height: 1.5625rem; font-weight: 700; } } .search-autocomplete input:focus { display: block; } .search-autocomplete input:focus::-webkit-input-placeholder { color: #424242; } .search-autocomplete input:focus::-moz-placeholder { color: #424242; } .search-autocomplete input:focus:-ms-input-placeholder { color: #424242; } .search-autocomplete input:focus::-ms-input-placeholder { color: #424242; } .search-autocomplete input:focus::placeholder { color: #424242; } .search-autocomplete .search-autocomplete-clear { position: absolute; z-index: 4; top: 0; right: 0; left: auto; display: block; width: 40px; height: 100%; cursor: pointer; } .search-autocomplete .search-autocomplete-clear svg { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .search-autocomplete .search-autocomplete-overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; cursor: pointer; background: rgba(26, 21, 23, 0.8); visibility: visible; opacity: 1; transition: visibility 0s, opacity 0.4s linear; } .search-autocomplete .search-autocomplete-overlay:not(.active) { visibility: hidden; opacity: 0; } .search-autocomplete .search-autocomplete-results { position: absolute; z-index: 2; top: 100%; left: 0; width: 100%; max-height: calc(100vh - 100px); overflow-y: auto; background: #fff; box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1); margin-top: 10px; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.4s linear; } @media print, screen and (min-width: 64em) { .search-autocomplete .search-autocomplete-results { margin-left: auto; margin-right: auto; max-width: 1140px; min-width: 340px; width: calc(100% - 60px); left: 30px; right: 30px; } } .search-autocomplete .search-autocomplete-results.open { display: block; visibility: visible; opacity: 1; } .search-autocomplete .results-section { padding: 10px; } @media print, screen and (min-width: 64em) { .search-autocomplete .results-section { padding: 20px; } } .search-autocomplete .results-section + .results-section { padding-top: 0; } .search-autocomplete .results-section ul { padding: 0; list-style: none; } .search-autocomplete .results-section:first-child .results-section-title { padding-top: 20px; } .search-autocomplete .no-results { padding: 20px; } .search-autocomplete .result a { display: flex; align-items: center; justify-content: space-between; text-decoration: none; padding: 10px; color: #000; } .search-autocomplete .result a:focus, .search-autocomplete .result a:hover { background-color: #000; color: #fff; } .search-autocomplete .result a svg { fill: currentColor; margin-left: 10px; } .search-autocomplete .result a h3, .search-autocomplete .result a h4, .search-autocomplete .result a h5, .search-autocomplete .result a h6 { color: currentColor; } .search-autocomplete .result-product-item { position: relative; padding: 0; } .search-autocomplete .result-product-item .result-item-image { width: 65px; margin-right: 20px; } @supports ((-o-object-fit: cover) or (object-fit: cover)) { .search-autocomplete .result-product-item .result-item-image { height: 65px; -o-object-fit: cover; object-fit: cover; } } .search-autocomplete .result-product-item h5 { font-size: 14px; } .search-autocomplete .result-tile { position: relative; padding: 0; } .search-autocomplete .result-tile .result-item-image { width: 80px; height: 80px; margin-right: 10px; } .search-autocomplete .result-tile h5 { font-size: 14px; } .search-autocomplete .buttons { padding: 10px; } @media print, screen and (min-width: 64em) { .search-autocomplete .buttons { padding: 20px; } } .results-section-title { padding: 10px 10px 5px; } body.search-autocomplete-active { overflow: hidden; } .size-guide-modal__image:not(.active) { display: none; } .size-guide-modal .modal__images .size-guide-modal__image:only-child { display: block; } .social-icons { list-style: none; font-size: 1.25rem; padding: 0; margin: -6px; } .social-icons li { padding: 6px; line-height: 0; } .social-icons a { display: block; } .social-icons svg { width: 1em; height: 1em; } .social-sharing { line-height: 1; display: flex; justify-content: center; } .social-sharing a { text-decoration: none; transition: color 0.25s; line-height: 1; padding: 12px; display: block; } .social-sharing a:hover { color: #000; } .social-sharing a svg { width: 20px; height: 20px; } .social-sharing a span { display: none; } .stock-message-box { border: 2px solid #000; position: relative; display: none; } .stock-message-box h4 { color: currentColor; } .stock-message-box-details { padding: 15px; align-self: center; } .stock-message-box-content p { margin: 0; } .stock-message-box-image { height: 100%; width: 25%; min-width: 100px; align-self: flex-end; flex-grow: 1; flex-shrink: 0; } .stock-message-box-image img { display: block; max-height: 100%; width: 100%; padding-top: 10px; } .stock-message.dispatch .stock-message-box.dispatch, .stock-message.in-stock .stock-message-box.in-stock, .stock-message.on-backorder .stock-message-box.on-backorder { display: flex; }