/** Shopify CDN: Minification failed
Line 25810:0 Unexpected "}"
Line 25827:0 Unexpected "}"
**/
@charset "UTF-8";
/* ============================================================================
Pipeline Theme | (c) Groupthought Themes
============================================================================== */
/* ============================================================================
This file is included for advanced development by
Shopify Agencies. Modified versions of the theme
code are not supported by Shopify or Groupthought.
============================================================================== */
/* ================ VENDOR ================ */
/*-- Flickity v3.0.0 -- */
.flickity-disabled-mobile:after {
content: "flickity" !important;
font-size: 0;
line-height: 0;
position: absolute;
display: none;
}
@media only screen and (max-width: 767px) {
.flickity-disabled-mobile:after {
content: "" !important;
}
}
.flickity-enabled {
position: relative;
}
.flickity-enabled:focus {
outline: none;
}
.flickity-viewport {
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
}
.flickity-slider {
position: absolute;
left: 0;
width: 100%;
height: 100%;
touch-action: pan-y;
-webkit-user-select: none;
-webkit-user-drag: none;
}
/* flickity-cell */
.flickity-cell {
position: absolute !important;
left: 0;
}
.flickity-rtl .flickity-cell {
left: unset;
right: 0;
}
/* fade */
.flickity-enabled.is-fade .flickity-slider > * {
pointer-events: none;
z-index: 0;
}
.flickity-enabled.is-fade .flickity-slider > *.is-selected {
pointer-events: auto;
z-index: 1;
}
/* draggable */
.flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
cursor: move;
cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: grabbing;
}
/* ---- flickity-button ---- */
.flickity-button {
position: absolute;
background: hsla(0, 0%, 100%, 0.75);
border: none;
color: var(--text);
}
.flickity-button:hover {
background: white;
cursor: pointer;
}
.flickity-button:focus {
outline: none;
}
.flickity-button:active {
opacity: 0.6;
}
.flickity-button:disabled {
opacity: 0.3;
cursor: auto;
/* prevent disabled button from capturing pointer up event. #716 */
pointer-events: none;
}
.flickity-button-icon {
fill: currentColor;
}
/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
top: 50%;
width: 36px;
height: 36px;
border-radius: 50%;
/* vertically center */
transform: translateY(-50%);
}
.flickity-prev-next-button.previous {
left: 10px;
}
.flickity-prev-next-button.next {
right: 10px;
}
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
left: auto;
right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
right: auto;
left: 10px;
}
.flickity-prev-next-button .flickity-button-icon {
position: absolute;
left: 33%;
top: 33%;
width: 35%;
height: 35%;
}
/* ---- page dots ---- */
.flickity-page-dots {
position: absolute;
width: 100%;
bottom: -25px;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
line-height: 1;
}
.flickity-rtl .flickity-page-dots {
direction: rtl;
}
.flickity-page-dots .dot,
.flickity-page-dots .flickity-page-dot {
display: inline-block;
width: 10px;
height: 10px;
padding: 0;
margin: 0 8px;
background: #333;
border-radius: 50%;
opacity: 0.25;
font-size: 0;
line-height: 0;
cursor: pointer;
}
.flickity-page-dots .is-selected {
opacity: 1;
}
.product__mobile--slideshow .flickity-page-dots,
.flickity-badge-dots .flickity-page-dots {
text-align: right;
padding: 13px;
display: flex;
align-items: center;
justify-content: flex-end;
width: auto;
border-radius: 20px;
overflow: hidden;
gap: 4px;
}
.product__mobile--slideshow .flickity-page-dots .flickity-page-dot,
.flickity-badge-dots .flickity-page-dots .flickity-page-dot {
display: inline-block;
position: relative;
z-index: 5;
width: 3px;
height: 3px;
background: var(--bg);
border-radius: 50%;
opacity: 0.25;
cursor: pointer;
}
.product__mobile--slideshow .flickity-page-dots .flickity-page-dot.is-selected,
.flickity-badge-dots .flickity-page-dots .flickity-page-dot.is-selected {
opacity: 1;
}
.product__mobile--slideshow .flickity-page-dots .flickity-page-dot::before,
.flickity-badge-dots .flickity-page-dots .flickity-page-dot::before {
content: '""';
position: absolute;
inset: -8px;
cursor: inherit;
z-index: -10;
}
[data-carousel] + * {
margin-top: max(var(--gutter), 20px);
}
[data-carousel] .flickity-button {
position: absolute;
top: var(--buttons-top);
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: var(--hairline);
color: var(--text);
transform: translateY(-50%);
transition: all 0.3s;
}
[data-carousel] .flickity-button svg {
position: absolute;
left: 33%;
top: 33%;
width: 35%;
height: 35%;
fill: currentColor;
}
[data-carousel].flickity-rtl .flickity-button.previous, [data-carousel].flickity-rtl .flickity-button.next {
left: auto;
right: auto;
}
[data-carousel] .flickity-button.next, [data-carousel].flickity-rtl .flickity-button.previous {
right: -70px;
}
[data-carousel] .flickity-button.previous, [data-carousel].flickity-rtl .flickity-button.next {
left: -70px;
}
@media only screen and (max-width: 767px) {
[data-carousel] .slide-item:first-child {
margin-left: max(var(--outer) - var(--gutter), 0px);
}
}
@media only screen and (min-width: 768px) {
.js [data-carousel]:not(.flickity-enabled) {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
}
.js [data-carousel]:not(.flickity-enabled) .grid__item,
.js [data-carousel]:not(.flickity-enabled) .gallery__item,
.js [data-carousel]:not(.flickity-enabled) .slide-item {
flex-shrink: 0;
}
}
.no-js [data-carousel] {
display: flex;
flex-wrap: wrap;
}
.flickity-force-arrows-top [data-carousel] .flickity-button,
.wrapper--full [data-carousel] .flickity-button,
.wrapper--none [data-carousel] .flickity-button {
top: auto;
bottom: 100%;
transform: none;
}
.flickity-force-arrows-top [data-carousel] .flickity-button,
.flickity-force-arrows-top [data-carousel]:first-child .flickity-button,
.wrapper--full [data-carousel] .flickity-button,
.wrapper--full [data-carousel]:first-child .flickity-button,
.wrapper--none [data-carousel] .flickity-button,
.wrapper--none [data-carousel]:first-child .flickity-button {
margin-bottom: max(var(--gutter), var(--padding-top) / 2);
}
.flickity-force-arrows-top [data-carousel] .flickity-button.next, .flickity-force-arrows-top.title-center [data-carousel] .flickity-button.next,
.flickity-force-arrows-top [data-carousel].flickity-rtl .flickity-button.previous, .flickity-force-arrows-top.title-center [data-carousel].flickity-rtl .flickity-button.previous,
.wrapper--full [data-carousel] .flickity-button.next,
.wrapper--full.title-center [data-carousel] .flickity-button.next,
.wrapper--full [data-carousel].flickity-rtl .flickity-button.previous,
.wrapper--full.title-center [data-carousel].flickity-rtl .flickity-button.previous,
.wrapper--none [data-carousel] .flickity-button.next,
.wrapper--none.title-center [data-carousel] .flickity-button.next,
.wrapper--none [data-carousel].flickity-rtl .flickity-button.previous,
.wrapper--none.title-center [data-carousel].flickity-rtl .flickity-button.previous {
right: calc(var(--gutter) / 2);
left: auto;
}
.flickity-force-arrows-top [data-carousel] .flickity-button.previous, .flickity-force-arrows-top.title-center [data-carousel] .flickity-button.previous,
.flickity-force-arrows-top [data-carousel].flickity-rtl .flickity-button.next, .flickity-force-arrows-top.title-center [data-carousel] .flickity-rtl .flickity-button.next,
.wrapper--full [data-carousel] .flickity-button.previous,
.wrapper--full.title-center [data-carousel] .flickity-button.previous,
.wrapper--full [data-carousel].flickity-rtl .flickity-button.next,
.wrapper--full.title-center [data-carousel] .flickity-rtl .flickity-button.next,
.wrapper--full .grandparent .title-center.header__dropdown__wrapper [data-carousel] .flickity-rtl .flickity-button.next,
.wrapper--none [data-carousel] .flickity-button.previous,
.wrapper--none.title-center [data-carousel] .flickity-button.previous,
.wrapper--none [data-carousel].flickity-rtl .flickity-button.next,
.wrapper--none.title-center [data-carousel] .flickity-rtl .flickity-button.next {
left: calc(var(--gutter) / 2);
right: auto;
}
.flickity-force-arrows-top.title-left [data-carousel] .flickity-button.next, .flickity-force-arrows-top.title-left [data-carousel].flickity-rtl .flickity-button.previous,
.wrapper--full.title-left [data-carousel] .flickity-button.next,
.wrapper--full .grandparent .title-left.header__dropdown__wrapper [data-carousel] .flickity-button.next,
.wrapper--full.title-left [data-carousel].flickity-rtl .flickity-button.previous,
.wrapper--full .grandparent .title-left.header__dropdown__wrapper [data-carousel].flickity-rtl .flickity-button.previous,
.wrapper--none.title-left [data-carousel] .flickity-button.next,
.wrapper--none.title-left [data-carousel].flickity-rtl .flickity-button.previous {
right: calc(var(--gutter) / 2);
left: auto;
}
.flickity-force-arrows-top.title-left [data-carousel] .flickity-button.previous, .flickity-force-arrows-top.title-left [data-carousel].flickity-rtl .flickity-button.next,
.wrapper--full.title-left [data-carousel] .flickity-button.previous,
.wrapper--full .grandparent .title-left.header__dropdown__wrapper [data-carousel] .flickity-button.previous,
.wrapper--full.title-left [data-carousel].flickity-rtl .flickity-button.next,
.wrapper--full .grandparent .title-left.header__dropdown__wrapper [data-carousel].flickity-rtl .flickity-button.next,
.wrapper--none.title-left [data-carousel] .flickity-button.previous,
.wrapper--none.title-left [data-carousel].flickity-rtl .flickity-button.next {
right: calc(46px + var(--gutter) / 2);
left: auto;
}
.wrapper--none [data-carousel] .flickity-button.next, .wrapper--none.title-center [data-carousel] .flickity-button.next, [data-carousel].flickity-rtl .flickity-button.previous .wrapper--none.title-center [data-carousel].flickity-rtl .flickity-button.previous {
right: var(--gutter);
}
.wrapper--none [data-carousel] .flickity-button.previous, .wrapper--none.title-center [data-carousel] .flickity-button.previous,
.wrapper--none [data-carousel].flickity-rtl .flickity-button.next, .wrapper--none.title-center [data-carousel].flickity-rtl .flickity-button.next {
left: var(--gutter);
}
.wrapper--none.title-left [data-carousel] .flickity-button.next, .wrapper--none.title-left [data-carousel].flickity-rtl .flickity-button.previous {
right: var(--gutter);
left: auto;
}
.wrapper--none.title-left [data-carousel] .flickity-button.previous, .wrapper--none.title-left [data-carousel].flickity-rtl .flickity-button.next {
right: calc(36px + var(--gutter));
}
.aos-initialized [data-aos][data-aos][data-aos-duration="50"], .aos-initialized body[data-aos-duration="50"] [data-aos] {
transition-duration: 50ms;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="50"], .aos-initialized body[data-aos-delay="50"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="50"].aos-animate, .aos-initialized body[data-aos-delay="50"] [data-aos].aos-animate {
transition-delay: 50ms;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="100"], .aos-initialized body[data-aos-duration="100"] [data-aos] {
transition-duration: 0.1s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="100"], .aos-initialized body[data-aos-delay="100"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="100"].aos-animate, .aos-initialized body[data-aos-delay="100"] [data-aos].aos-animate {
transition-delay: 0.1s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="150"], .aos-initialized body[data-aos-duration="150"] [data-aos] {
transition-duration: 0.15s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="150"], .aos-initialized body[data-aos-delay="150"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="150"].aos-animate, .aos-initialized body[data-aos-delay="150"] [data-aos].aos-animate {
transition-delay: 0.15s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="200"], .aos-initialized body[data-aos-duration="200"] [data-aos] {
transition-duration: 0.2s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="200"], .aos-initialized body[data-aos-delay="200"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="200"].aos-animate, .aos-initialized body[data-aos-delay="200"] [data-aos].aos-animate {
transition-delay: 0.2s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="250"], .aos-initialized body[data-aos-duration="250"] [data-aos] {
transition-duration: 0.25s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="250"], .aos-initialized body[data-aos-delay="250"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="250"].aos-animate, .aos-initialized body[data-aos-delay="250"] [data-aos].aos-animate {
transition-delay: 0.25s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="300"], .aos-initialized body[data-aos-duration="300"] [data-aos] {
transition-duration: 0.3s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="300"], .aos-initialized body[data-aos-delay="300"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="300"].aos-animate, .aos-initialized body[data-aos-delay="300"] [data-aos].aos-animate {
transition-delay: 0.3s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="350"], .aos-initialized body[data-aos-duration="350"] [data-aos] {
transition-duration: 0.35s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="350"], .aos-initialized body[data-aos-delay="350"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="350"].aos-animate, .aos-initialized body[data-aos-delay="350"] [data-aos].aos-animate {
transition-delay: 0.35s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="400"], .aos-initialized body[data-aos-duration="400"] [data-aos] {
transition-duration: 0.4s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="400"], .aos-initialized body[data-aos-delay="400"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="400"].aos-animate, .aos-initialized body[data-aos-delay="400"] [data-aos].aos-animate {
transition-delay: 0.4s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="450"], .aos-initialized body[data-aos-duration="450"] [data-aos] {
transition-duration: 0.45s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="450"], .aos-initialized body[data-aos-delay="450"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="450"].aos-animate, .aos-initialized body[data-aos-delay="450"] [data-aos].aos-animate {
transition-delay: 0.45s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="500"], .aos-initialized body[data-aos-duration="500"] [data-aos] {
transition-duration: 0.5s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="500"], .aos-initialized body[data-aos-delay="500"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="500"].aos-animate, .aos-initialized body[data-aos-delay="500"] [data-aos].aos-animate {
transition-delay: 0.5s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="550"], .aos-initialized body[data-aos-duration="550"] [data-aos] {
transition-duration: 0.55s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="550"], .aos-initialized body[data-aos-delay="550"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="550"].aos-animate, .aos-initialized body[data-aos-delay="550"] [data-aos].aos-animate {
transition-delay: 0.55s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="600"], .aos-initialized body[data-aos-duration="600"] [data-aos] {
transition-duration: 0.6s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="600"], .aos-initialized body[data-aos-delay="600"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="600"].aos-animate, .aos-initialized body[data-aos-delay="600"] [data-aos].aos-animate {
transition-delay: 0.6s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="650"], .aos-initialized body[data-aos-duration="650"] [data-aos] {
transition-duration: 0.65s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="650"], .aos-initialized body[data-aos-delay="650"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="650"].aos-animate, .aos-initialized body[data-aos-delay="650"] [data-aos].aos-animate {
transition-delay: 0.65s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="700"], .aos-initialized body[data-aos-duration="700"] [data-aos] {
transition-duration: 0.7s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="700"], .aos-initialized body[data-aos-delay="700"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="700"].aos-animate, .aos-initialized body[data-aos-delay="700"] [data-aos].aos-animate {
transition-delay: 0.7s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="750"], .aos-initialized body[data-aos-duration="750"] [data-aos] {
transition-duration: 0.75s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="750"], .aos-initialized body[data-aos-delay="750"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="750"].aos-animate, .aos-initialized body[data-aos-delay="750"] [data-aos].aos-animate {
transition-delay: 0.75s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="800"], .aos-initialized body[data-aos-duration="800"] [data-aos] {
transition-duration: 0.8s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="800"], .aos-initialized body[data-aos-delay="800"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="800"].aos-animate, .aos-initialized body[data-aos-delay="800"] [data-aos].aos-animate {
transition-delay: 0.8s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="850"], .aos-initialized body[data-aos-duration="850"] [data-aos] {
transition-duration: 0.85s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="850"], .aos-initialized body[data-aos-delay="850"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="850"].aos-animate, .aos-initialized body[data-aos-delay="850"] [data-aos].aos-animate {
transition-delay: 0.85s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="900"], .aos-initialized body[data-aos-duration="900"] [data-aos] {
transition-duration: 0.9s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="900"], .aos-initialized body[data-aos-delay="900"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="900"].aos-animate, .aos-initialized body[data-aos-delay="900"] [data-aos].aos-animate {
transition-delay: 0.9s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="950"], .aos-initialized body[data-aos-duration="950"] [data-aos] {
transition-duration: 0.95s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="950"], .aos-initialized body[data-aos-delay="950"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="950"].aos-animate, .aos-initialized body[data-aos-delay="950"] [data-aos].aos-animate {
transition-delay: 0.95s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="1000"], .aos-initialized body[data-aos-duration="1000"] [data-aos] {
transition-duration: 1s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1000"], .aos-initialized body[data-aos-delay="1000"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1000"].aos-animate, .aos-initialized body[data-aos-delay="1000"] [data-aos].aos-animate {
transition-delay: 1s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="1050"], .aos-initialized body[data-aos-duration="1050"] [data-aos] {
transition-duration: 1.05s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1050"], .aos-initialized body[data-aos-delay="1050"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1050"].aos-animate, .aos-initialized body[data-aos-delay="1050"] [data-aos].aos-animate {
transition-delay: 1.05s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="1100"], .aos-initialized body[data-aos-duration="1100"] [data-aos] {
transition-duration: 1.1s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1100"], .aos-initialized body[data-aos-delay="1100"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1100"].aos-animate, .aos-initialized body[data-aos-delay="1100"] [data-aos].aos-animate {
transition-delay: 1.1s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="1150"], .aos-initialized body[data-aos-duration="1150"] [data-aos] {
transition-duration: 1.15s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1150"], .aos-initialized body[data-aos-delay="1150"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1150"].aos-animate, .aos-initialized body[data-aos-delay="1150"] [data-aos].aos-animate {
transition-delay: 1.15s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="1200"], .aos-initialized body[data-aos-duration="1200"] [data-aos] {
transition-duration: 1.2s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1200"], .aos-initialized body[data-aos-delay="1200"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1200"].aos-animate, .aos-initialized body[data-aos-delay="1200"] [data-aos].aos-animate {
transition-delay: 1.2s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="1250"], .aos-initialized body[data-aos-duration="1250"] [data-aos] {
transition-duration: 1.25s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1250"], .aos-initialized body[data-aos-delay="1250"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1250"].aos-animate, .aos-initialized body[data-aos-delay="1250"] [data-aos].aos-animate {
transition-delay: 1.25s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="1300"], .aos-initialized body[data-aos-duration="1300"] [data-aos] {
transition-duration: 1.3s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1300"], .aos-initialized body[data-aos-delay="1300"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1300"].aos-animate, .aos-initialized body[data-aos-delay="1300"] [data-aos].aos-animate {
transition-delay: 1.3s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="1350"], .aos-initialized body[data-aos-duration="1350"] [data-aos] {
transition-duration: 1.35s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1350"], .aos-initialized body[data-aos-delay="1350"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1350"].aos-animate, .aos-initialized body[data-aos-delay="1350"] [data-aos].aos-animate {
transition-delay: 1.35s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="1400"], .aos-initialized body[data-aos-duration="1400"] [data-aos] {
transition-duration: 1.4s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1400"], .aos-initialized body[data-aos-delay="1400"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1400"].aos-animate, .aos-initialized body[data-aos-delay="1400"] [data-aos].aos-animate {
transition-delay: 1.4s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="1450"], .aos-initialized body[data-aos-duration="1450"] [data-aos] {
transition-duration: 1.45s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1450"], .aos-initialized body[data-aos-delay="1450"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1450"].aos-animate, .aos-initialized body[data-aos-delay="1450"] [data-aos].aos-animate {
transition-delay: 1.45s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="1500"], .aos-initialized body[data-aos-duration="1500"] [data-aos] {
transition-duration: 1.5s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1500"], .aos-initialized body[data-aos-delay="1500"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1500"].aos-animate, .aos-initialized body[data-aos-delay="1500"] [data-aos].aos-animate {
transition-delay: 1.5s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="1550"], .aos-initialized body[data-aos-duration="1550"] [data-aos] {
transition-duration: 1.55s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1550"], .aos-initialized body[data-aos-delay="1550"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1550"].aos-animate, .aos-initialized body[data-aos-delay="1550"] [data-aos].aos-animate {
transition-delay: 1.55s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="1600"], .aos-initialized body[data-aos-duration="1600"] [data-aos] {
transition-duration: 1.6s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1600"], .aos-initialized body[data-aos-delay="1600"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1600"].aos-animate, .aos-initialized body[data-aos-delay="1600"] [data-aos].aos-animate {
transition-delay: 1.6s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="1650"], .aos-initialized body[data-aos-duration="1650"] [data-aos] {
transition-duration: 1.65s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1650"], .aos-initialized body[data-aos-delay="1650"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1650"].aos-animate, .aos-initialized body[data-aos-delay="1650"] [data-aos].aos-animate {
transition-delay: 1.65s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="1700"], .aos-initialized body[data-aos-duration="1700"] [data-aos] {
transition-duration: 1.7s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1700"], .aos-initialized body[data-aos-delay="1700"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1700"].aos-animate, .aos-initialized body[data-aos-delay="1700"] [data-aos].aos-animate {
transition-delay: 1.7s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="1750"], .aos-initialized body[data-aos-duration="1750"] [data-aos] {
transition-duration: 1.75s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1750"], .aos-initialized body[data-aos-delay="1750"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1750"].aos-animate, .aos-initialized body[data-aos-delay="1750"] [data-aos].aos-animate {
transition-delay: 1.75s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="1800"], .aos-initialized body[data-aos-duration="1800"] [data-aos] {
transition-duration: 1.8s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1800"], .aos-initialized body[data-aos-delay="1800"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1800"].aos-animate, .aos-initialized body[data-aos-delay="1800"] [data-aos].aos-animate {
transition-delay: 1.8s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="1850"], .aos-initialized body[data-aos-duration="1850"] [data-aos] {
transition-duration: 1.85s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1850"], .aos-initialized body[data-aos-delay="1850"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1850"].aos-animate, .aos-initialized body[data-aos-delay="1850"] [data-aos].aos-animate {
transition-delay: 1.85s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="1900"], .aos-initialized body[data-aos-duration="1900"] [data-aos] {
transition-duration: 1.9s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1900"], .aos-initialized body[data-aos-delay="1900"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1900"].aos-animate, .aos-initialized body[data-aos-delay="1900"] [data-aos].aos-animate {
transition-delay: 1.9s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="1950"], .aos-initialized body[data-aos-duration="1950"] [data-aos] {
transition-duration: 1.95s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1950"], .aos-initialized body[data-aos-delay="1950"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="1950"].aos-animate, .aos-initialized body[data-aos-delay="1950"] [data-aos].aos-animate {
transition-delay: 1.95s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="2000"], .aos-initialized body[data-aos-duration="2000"] [data-aos] {
transition-duration: 2s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2000"], .aos-initialized body[data-aos-delay="2000"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2000"].aos-animate, .aos-initialized body[data-aos-delay="2000"] [data-aos].aos-animate {
transition-delay: 2s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="2050"], .aos-initialized body[data-aos-duration="2050"] [data-aos] {
transition-duration: 2.05s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2050"], .aos-initialized body[data-aos-delay="2050"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2050"].aos-animate, .aos-initialized body[data-aos-delay="2050"] [data-aos].aos-animate {
transition-delay: 2.05s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="2100"], .aos-initialized body[data-aos-duration="2100"] [data-aos] {
transition-duration: 2.1s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2100"], .aos-initialized body[data-aos-delay="2100"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2100"].aos-animate, .aos-initialized body[data-aos-delay="2100"] [data-aos].aos-animate {
transition-delay: 2.1s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="2150"], .aos-initialized body[data-aos-duration="2150"] [data-aos] {
transition-duration: 2.15s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2150"], .aos-initialized body[data-aos-delay="2150"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2150"].aos-animate, .aos-initialized body[data-aos-delay="2150"] [data-aos].aos-animate {
transition-delay: 2.15s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="2200"], .aos-initialized body[data-aos-duration="2200"] [data-aos] {
transition-duration: 2.2s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2200"], .aos-initialized body[data-aos-delay="2200"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2200"].aos-animate, .aos-initialized body[data-aos-delay="2200"] [data-aos].aos-animate {
transition-delay: 2.2s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="2250"], .aos-initialized body[data-aos-duration="2250"] [data-aos] {
transition-duration: 2.25s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2250"], .aos-initialized body[data-aos-delay="2250"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2250"].aos-animate, .aos-initialized body[data-aos-delay="2250"] [data-aos].aos-animate {
transition-delay: 2.25s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="2300"], .aos-initialized body[data-aos-duration="2300"] [data-aos] {
transition-duration: 2.3s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2300"], .aos-initialized body[data-aos-delay="2300"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2300"].aos-animate, .aos-initialized body[data-aos-delay="2300"] [data-aos].aos-animate {
transition-delay: 2.3s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="2350"], .aos-initialized body[data-aos-duration="2350"] [data-aos] {
transition-duration: 2.35s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2350"], .aos-initialized body[data-aos-delay="2350"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2350"].aos-animate, .aos-initialized body[data-aos-delay="2350"] [data-aos].aos-animate {
transition-delay: 2.35s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="2400"], .aos-initialized body[data-aos-duration="2400"] [data-aos] {
transition-duration: 2.4s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2400"], .aos-initialized body[data-aos-delay="2400"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2400"].aos-animate, .aos-initialized body[data-aos-delay="2400"] [data-aos].aos-animate {
transition-delay: 2.4s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="2450"], .aos-initialized body[data-aos-duration="2450"] [data-aos] {
transition-duration: 2.45s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2450"], .aos-initialized body[data-aos-delay="2450"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2450"].aos-animate, .aos-initialized body[data-aos-delay="2450"] [data-aos].aos-animate {
transition-delay: 2.45s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="2500"], .aos-initialized body[data-aos-duration="2500"] [data-aos] {
transition-duration: 2.5s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2500"], .aos-initialized body[data-aos-delay="2500"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2500"].aos-animate, .aos-initialized body[data-aos-delay="2500"] [data-aos].aos-animate {
transition-delay: 2.5s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="2550"], .aos-initialized body[data-aos-duration="2550"] [data-aos] {
transition-duration: 2.55s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2550"], .aos-initialized body[data-aos-delay="2550"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2550"].aos-animate, .aos-initialized body[data-aos-delay="2550"] [data-aos].aos-animate {
transition-delay: 2.55s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="2600"], .aos-initialized body[data-aos-duration="2600"] [data-aos] {
transition-duration: 2.6s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2600"], .aos-initialized body[data-aos-delay="2600"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2600"].aos-animate, .aos-initialized body[data-aos-delay="2600"] [data-aos].aos-animate {
transition-delay: 2.6s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="2650"], .aos-initialized body[data-aos-duration="2650"] [data-aos] {
transition-duration: 2.65s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2650"], .aos-initialized body[data-aos-delay="2650"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2650"].aos-animate, .aos-initialized body[data-aos-delay="2650"] [data-aos].aos-animate {
transition-delay: 2.65s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="2700"], .aos-initialized body[data-aos-duration="2700"] [data-aos] {
transition-duration: 2.7s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2700"], .aos-initialized body[data-aos-delay="2700"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2700"].aos-animate, .aos-initialized body[data-aos-delay="2700"] [data-aos].aos-animate {
transition-delay: 2.7s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="2750"], .aos-initialized body[data-aos-duration="2750"] [data-aos] {
transition-duration: 2.75s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2750"], .aos-initialized body[data-aos-delay="2750"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2750"].aos-animate, .aos-initialized body[data-aos-delay="2750"] [data-aos].aos-animate {
transition-delay: 2.75s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="2800"], .aos-initialized body[data-aos-duration="2800"] [data-aos] {
transition-duration: 2.8s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2800"], .aos-initialized body[data-aos-delay="2800"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2800"].aos-animate, .aos-initialized body[data-aos-delay="2800"] [data-aos].aos-animate {
transition-delay: 2.8s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="2850"], .aos-initialized body[data-aos-duration="2850"] [data-aos] {
transition-duration: 2.85s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2850"], .aos-initialized body[data-aos-delay="2850"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2850"].aos-animate, .aos-initialized body[data-aos-delay="2850"] [data-aos].aos-animate {
transition-delay: 2.85s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="2900"], .aos-initialized body[data-aos-duration="2900"] [data-aos] {
transition-duration: 2.9s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2900"], .aos-initialized body[data-aos-delay="2900"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2900"].aos-animate, .aos-initialized body[data-aos-delay="2900"] [data-aos].aos-animate {
transition-delay: 2.9s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="2950"], .aos-initialized body[data-aos-duration="2950"] [data-aos] {
transition-duration: 2.95s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2950"], .aos-initialized body[data-aos-delay="2950"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="2950"].aos-animate, .aos-initialized body[data-aos-delay="2950"] [data-aos].aos-animate {
transition-delay: 2.95s;
}
.aos-initialized [data-aos][data-aos][data-aos-duration="3000"], .aos-initialized body[data-aos-duration="3000"] [data-aos] {
transition-duration: 3s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="3000"], .aos-initialized body[data-aos-delay="3000"] [data-aos] {
transition-delay: 0s;
}
.aos-initialized [data-aos][data-aos][data-aos-delay="3000"].aos-animate, .aos-initialized body[data-aos-delay="3000"] [data-aos].aos-animate {
transition-delay: 3s;
}
.aos-initialized [data-aos][data-aos][data-aos-easing=linear], .aos-initialized body[data-aos-easing=linear] [data-aos] {
transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}
.aos-initialized [data-aos][data-aos][data-aos-easing=ease], .aos-initialized body[data-aos-easing=ease] [data-aos] {
transition-timing-function: ease;
}
.aos-initialized [data-aos][data-aos][data-aos-easing=ease-in], .aos-initialized body[data-aos-easing=ease-in] [data-aos] {
transition-timing-function: ease-in;
}
.aos-initialized [data-aos][data-aos][data-aos-easing=ease-out], .aos-initialized body[data-aos-easing=ease-out] [data-aos] {
transition-timing-function: ease-out;
}
.aos-initialized [data-aos][data-aos][data-aos-easing=ease-in-out], .aos-initialized body[data-aos-easing=ease-in-out] [data-aos] {
transition-timing-function: ease-in-out;
}
.aos-initialized [data-aos][data-aos][data-aos-easing=ease-in-back], .aos-initialized body[data-aos-easing=ease-in-back] [data-aos] {
transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.aos-initialized [data-aos][data-aos][data-aos-easing=ease-out-back], .aos-initialized body[data-aos-easing=ease-out-back] [data-aos] {
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.aos-initialized [data-aos][data-aos][data-aos-easing=ease-in-out-back], .aos-initialized body[data-aos-easing=ease-in-out-back] [data-aos] {
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.aos-initialized [data-aos][data-aos][data-aos-easing=ease-in-sine], .aos-initialized body[data-aos-easing=ease-in-sine] [data-aos] {
transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
}
.aos-initialized [data-aos][data-aos][data-aos-easing=ease-out-sine], .aos-initialized body[data-aos-easing=ease-out-sine] [data-aos] {
transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}
.aos-initialized [data-aos][data-aos][data-aos-easing=ease-in-out-sine], .aos-initialized body[data-aos-easing=ease-in-out-sine] [data-aos] {
transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.aos-initialized [data-aos][data-aos][data-aos-easing=ease-in-quad], .aos-initialized body[data-aos-easing=ease-in-quad] [data-aos] {
transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.aos-initialized [data-aos][data-aos][data-aos-easing=ease-out-quad], .aos-initialized body[data-aos-easing=ease-out-quad] [data-aos] {
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.aos-initialized [data-aos][data-aos][data-aos-easing=ease-in-out-quad], .aos-initialized body[data-aos-easing=ease-in-out-quad] [data-aos] {
transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.aos-initialized [data-aos][data-aos][data-aos-easing=ease-in-cubic], .aos-initialized body[data-aos-easing=ease-in-cubic] [data-aos] {
transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.aos-initialized [data-aos][data-aos][data-aos-easing=ease-out-cubic], .aos-initialized body[data-aos-easing=ease-out-cubic] [data-aos] {
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.aos-initialized [data-aos][data-aos][data-aos-easing=ease-in-out-cubic], .aos-initialized body[data-aos-easing=ease-in-out-cubic] [data-aos] {
transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.aos-initialized [data-aos][data-aos][data-aos-easing=ease-in-quart], .aos-initialized body[data-aos-easing=ease-in-quart] [data-aos] {
transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.aos-initialized [data-aos][data-aos][data-aos-easing=ease-out-quart], .aos-initialized body[data-aos-easing=ease-out-quart] [data-aos] {
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.aos-initialized [data-aos][data-aos][data-aos-easing=ease-in-out-quart], .aos-initialized body[data-aos-easing=ease-in-out-quart] [data-aos] {
transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.aos-initialized [data-aos^=fade][data-aos^=fade] {
opacity: 0;
transition-property: opacity, transform;
}
.aos-initialized [data-aos^=fade][data-aos^=fade].aos-animate {
opacity: 1;
transform: translate(0);
}
.aos-initialized [data-aos=fade-up] {
transform: translateY(50px);
}
.aos-initialized [data-aos=fade-down] {
transform: translateY(-50px);
}
.aos-initialized [data-aos=fade-right] {
transform: translate(-50px);
}
.aos-initialized [data-aos=fade-left] {
transform: translate(50px);
}
.aos-initialized [data-aos=fade-up-right] {
transform: translate(-50px, 50px);
}
.aos-initialized [data-aos=fade-up-left] {
transform: translate(50px, 50px);
}
.aos-initialized [data-aos=fade-down-right] {
transform: translate(-50px, -50px);
}
.aos-initialized [data-aos=fade-down-left] {
transform: translate(50px, -50px);
}
.aos-initialized [data-aos^=zoom][data-aos^=zoom] {
opacity: 0;
transition-property: opacity, transform;
}
.aos-initialized [data-aos^=zoom][data-aos^=zoom].aos-animate {
opacity: 1;
transform: translate(0) scale(1);
}
.aos-initialized [data-aos=zoom-in] {
transform: scale(0.6);
}
.aos-initialized [data-aos=zoom-in-up] {
transform: translateY(50px) scale(0.6);
}
.aos-initialized [data-aos=zoom-in-down] {
transform: translateY(-50px) scale(0.6);
}
.aos-initialized [data-aos=zoom-in-right] {
transform: translate(-50px) scale(0.6);
}
.aos-initialized [data-aos=zoom-in-left] {
transform: translate(50px) scale(0.6);
}
.aos-initialized [data-aos=zoom-out] {
transform: scale(1.2);
}
.aos-initialized [data-aos=zoom-out-up] {
transform: translateY(50px) scale(1.2);
}
.aos-initialized [data-aos=zoom-out-down] {
transform: translateY(-50px) scale(1.2);
}
.aos-initialized [data-aos=zoom-out-right] {
transform: translate(-50px) scale(1.2);
}
.aos-initialized [data-aos=zoom-out-left] {
transform: translate(50px) scale(1.2);
}
.aos-initialized [data-aos^=slide][data-aos^=slide] {
transition-property: transform;
}
.aos-initialized [data-aos^=slide][data-aos^=slide].aos-animate {
transform: translate(0);
}
.aos-initialized [data-aos=slide-up] {
transform: translateY(100%);
}
.aos-initialized [data-aos=slide-down] {
transform: translateY(-100%);
}
.aos-initialized [data-aos=slide-right] {
transform: translateX(-100%);
}
.aos-initialized [data-aos=slide-left] {
transform: translateX(100%);
}
.aos-initialized [data-aos^=flip][data-aos^=flip] {
backface-visibility: hidden;
transition-property: transform;
}
.aos-initialized [data-aos=flip-left] {
transform: perspective(2500px) rotateY(-100deg);
}
.aos-initialized [data-aos=flip-left].aos-animate {
transform: perspective(2500px) rotateY(0);
}
.aos-initialized [data-aos=flip-right] {
transform: perspective(2500px) rotateY(100deg);
}
.aos-initialized [data-aos=flip-right].aos-animate {
transform: perspective(2500px) rotateY(0);
}
.aos-initialized [data-aos=flip-up] {
transform: perspective(2500px) rotateX(-100deg);
}
.aos-initialized [data-aos=flip-up].aos-animate {
transform: perspective(2500px) rotateX(0);
}
.aos-initialized [data-aos=flip-down] {
transform: perspective(2500px) rotateX(100deg);
}
.aos-initialized [data-aos=flip-down].aos-animate {
transform: perspective(2500px) rotateX(0);
}
.aos-initialized [data-aos=img-in] {
opacity: 0;
transform: scale(1.3);
transition-property: transform, opacity;
}
.aos-initialized [data-aos=img-in].aos-animate {
opacity: 1;
transform: scale(1);
}
.aos-initialized [data-aos=fade] {
opacity: 0;
transition-property: opacity;
}
.aos-initialized [data-aos=fade].aos-animate {
opacity: 1;
}
.aos-initialized [data-aos=svg-dash] path {
stroke-dasharray: 100;
stroke-dashoffset: 100;
}
.aos-initialized [data-aos=svg-dash].aos-animate path, .aos-initialized [data-aos=svg-dash].aos-animate ellipse, .aos-initialized [data-aos=svg-dash].aos-animate circle {
animation: dash 1.5s linear forwards 1;
}
.aos-initialized [data-aos][data-aos][data-aos-order="1"] {
--aos-delay: 0ms;
animation-delay: 0ms;
}
.aos-initialized [data-aos][data-aos][data-aos-order="2"] {
--aos-delay: 250ms;
animation-delay: 250ms;
}
.aos-initialized [data-aos][data-aos][data-aos-order="3"] {
--aos-delay: 500ms;
animation-delay: 500ms;
}
.aos-initialized [data-aos][data-aos][data-aos-order="4"] {
--aos-delay: 750ms;
animation-delay: 750ms;
}
.aos-initialized [data-aos][data-aos][data-aos-order="5"] {
--aos-delay: 1000ms;
animation-delay: 1000ms;
}
.aos-initialized [data-aos][data-aos][data-aos-order="6"] {
--aos-delay: 1250ms;
animation-delay: 1250ms;
}
.aos-initialized [data-aos][data-aos][data-aos-order="7"] {
--aos-delay: 1500ms;
animation-delay: 1500ms;
}
.aos-initialized [data-aos][data-aos][data-aos-order="8"] {
--aos-delay: 1750ms;
animation-delay: 1750ms;
}
.aos-initialized [data-aos][data-aos][data-aos-order="9"] {
--aos-delay: 2000ms;
animation-delay: 2000ms;
}
.aos-initialized [data-aos][data-aos][data-aos-order="10"] {
--aos-delay: 2250ms;
animation-delay: 2250ms;
}
.aos-initialized [data-aos=hero] {
opacity: 0;
will-change: transform, opacity;
}
.no-js .aos-initialized [data-aos=hero] {
opacity: 1;
}
.aos-initialized .main-content .shopify-section:nth-child(1) [data-aos=hero],
.aos-initialized .main-content .shopify-section:nth-child(2) [data-aos=hero],
.aos-initialized [data-aos=hero].aos-animate {
animation-name: heroFade;
animation-duration: 1s;
animation-fill-mode: both;
backface-visibility: hidden;
}
.aos-initialized [data-aos-icon="1"] {
animation-delay: calc(var(--aos-delay) + 0ms);
}
.aos-initialized [data-aos-icon="1"] path, .aos-initialized [data-aos-icon="1"] ellipse, .aos-initialized [data-aos-icon="1"] circle {
animation-delay: calc(var(--aos-delay) + 320ms);
}
.aos-initialized [data-aos-icon="2"] {
animation-delay: calc(var(--aos-delay) + 80ms);
}
.aos-initialized [data-aos-icon="2"] path, .aos-initialized [data-aos-icon="2"] ellipse, .aos-initialized [data-aos-icon="2"] circle {
animation-delay: calc(var(--aos-delay) + 400ms);
}
.aos-initialized [data-aos-icon="3"] {
animation-delay: calc(var(--aos-delay) + 160ms);
}
.aos-initialized [data-aos-icon="3"] path, .aos-initialized [data-aos-icon="3"] ellipse, .aos-initialized [data-aos-icon="3"] circle {
animation-delay: calc(var(--aos-delay) + 480ms);
}
.aos-initialized [data-aos-icon="4"] {
animation-delay: calc(var(--aos-delay) + 240ms);
}
.aos-initialized [data-aos-icon="4"] path, .aos-initialized [data-aos-icon="4"] ellipse, .aos-initialized [data-aos-icon="4"] circle {
animation-delay: calc(var(--aos-delay) + 560ms);
}
.aos-initialized [data-aos-icon="5"] {
animation-delay: calc(var(--aos-delay) + 320ms);
}
.aos-initialized [data-aos-icon="5"] path, .aos-initialized [data-aos-icon="5"] ellipse, .aos-initialized [data-aos-icon="5"] circle {
animation-delay: calc(var(--aos-delay) + 640ms);
}
.aos-initialized [data-aos-icon="6"] {
animation-delay: calc(var(--aos-delay) + 400ms);
}
.aos-initialized [data-aos-icon="6"] path, .aos-initialized [data-aos-icon="6"] ellipse, .aos-initialized [data-aos-icon="6"] circle {
animation-delay: calc(var(--aos-delay) + 720ms);
}
.aos-initialized [data-aos-icon="7"] {
animation-delay: calc(var(--aos-delay) + 480ms);
}
.aos-initialized [data-aos-icon="7"] path, .aos-initialized [data-aos-icon="7"] ellipse, .aos-initialized [data-aos-icon="7"] circle {
animation-delay: calc(var(--aos-delay) + 800ms);
}
.aos-initialized [data-aos-icon="8"] {
animation-delay: calc(var(--aos-delay) + 560ms);
}
.aos-initialized [data-aos-icon="8"] path, .aos-initialized [data-aos-icon="8"] ellipse, .aos-initialized [data-aos-icon="8"] circle {
animation-delay: calc(var(--aos-delay) + 880ms);
}
.aos-initialized [data-aos-icon="9"] {
animation-delay: calc(var(--aos-delay) + 640ms);
}
.aos-initialized [data-aos-icon="9"] path, .aos-initialized [data-aos-icon="9"] ellipse, .aos-initialized [data-aos-icon="9"] circle {
animation-delay: calc(var(--aos-delay) + 960ms);
}
.aos-initialized [data-aos-icon="10"] {
animation-delay: calc(var(--aos-delay) + 720ms);
}
.aos-initialized [data-aos-icon="10"] path, .aos-initialized [data-aos-icon="10"] ellipse, .aos-initialized [data-aos-icon="10"] circle {
animation-delay: calc(var(--aos-delay) + 1040ms);
}
.aos-initialized [data-aos=icons] [data-aos-icon] {
opacity: 0;
will-change: transform, opacity;
}
.no-js .aos-initialized [data-aos=icons] [data-aos-icon] {
opacity: 1;
}
.aos-initialized [data-aos=icons] [data-aos-icon] path, .aos-initialized [data-aos=icons] [data-aos-icon] ellipse, .aos-initialized [data-aos=icons] [data-aos-icon] circle {
stroke-dasharray: 100;
stroke-dashoffset: 100;
}
.aos-initialized [data-aos=icons].aos-animate [data-aos-icon] {
animation-name: heroFade;
animation-duration: 1s;
animation-fill-mode: both;
backface-visibility: hidden;
}
.aos-initialized [data-aos=icons].aos-animate [data-aos-icon] path, .aos-initialized [data-aos=icons].aos-animate [data-aos-icon] ellipse, .aos-initialized [data-aos=icons].aos-animate [data-aos-icon] circle {
animation-name: dash;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes heroFade {
from {
opacity: 0;
transform: translate3d(0, 15px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes dash {
from {
stroke-dashoffset: 100;
}
to {
stroke-dashoffset: 0;
}
}
@media only screen and (max-width: 479px) {
html.iframe [data-aos] {
opacity: 1 !important;
transform: none !important;
}
}
.shopify-model-viewer-ui {
position: relative;
display: inline-block;
cursor: pointer;
}
.shopify-model-viewer-ui model-viewer {
transform: translateZ(0);
z-index: 1;
}
.shopify-model-viewer-ui.shopify-model-viewer-ui--fullscreen model-viewer {
position: relative;
width: 100vw;
height: 100vh;
}
.shopify-model-viewer-ui.shopify-model-viewer-ui--fullscreen .shopify-model-viewer-ui__control-icon--exit-fullscreen {
display: block;
}
.shopify-model-viewer-ui.shopify-model-viewer-ui--fullscreen .shopify-model-viewer-ui__control-icon--enter-fullscreen {
display: none;
}
.shopify-model-viewer-ui.shopify-model-viewer-ui--desktop:hover .shopify-model-viewer-ui__controls-area, .shopify-model-viewer-ui.shopify-model-viewer-ui--desktop.shopify-model-viewer-ui--child-focused .shopify-model-viewer-ui__controls-area {
opacity: 1;
}
.shopify-model-viewer-ui:not(.shopify-model-viewer-ui--desktop) .shopify-model-viewer-ui__controls-area {
display: none;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__controls-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area {
display: flex;
flex-direction: column;
background: var(--COLOR-BG);
opacity: 0;
border: 1px solid var(--COLOR-A5);
position: absolute;
bottom: 10px;
right: 10px;
z-index: 1;
transition: opacity 0.1s linear;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area:focus-within {
opacity: 1;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area:not(.shopify-model-viewer-ui__controls-area--playing) {
display: none;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button {
color: var(--COLOR-TEXT-DARK);
border-radius: 0;
border: none;
margin: 0px;
cursor: pointer;
}
body:not(.focus-enabled) .shopify-model-viewer-ui .shopify-model-viewer-ui__button:not(.focus-enabled) {
outline: none;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control {
padding: 0px;
height: 44px;
width: 44px;
background: transparent;
position: relative;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:hover {
color: var(--COLOR-A50);
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:active, .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control.focus-enabled:focus {
color: var(--COLOR-A50);
background: var(--COLOR-A5);
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:not(:last-child):after {
position: absolute;
content: "";
border-bottom: 1px solid var(--COLOR-A5);
width: 28px;
bottom: 0px;
right: 8px;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__control-icon {
width: 44px;
height: 44px;
fill: none;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster {
background: var(--COLOR-BG);
position: absolute;
border: 1px solid var(--COLOR-A5);
top: 50%;
left: 50%;
padding: 0;
transform: translate3d(-50%, -50%, 0);
height: 62px;
width: 62px;
z-index: 1;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:hover, .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:focus {
color: var(--COLOR-A50);
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__poster-control-icon {
width: 60px;
height: 60px;
z-index: 1;
fill: none;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__control-icon--exit-fullscreen {
display: none;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__control-icon--enter-fullscreen {
display: block;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__spritesheet {
display: none;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
@keyframes plyr-progress {
to {
background-position: 25px 0;
}
}
@keyframes plyr-popup {
0% {
opacity: 0.5;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes plyr-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.plyr {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
direction: ltr;
font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
font-variant-numeric: tabular-nums;
font-weight: 500;
line-height: 1.7;
max-width: 100%;
min-width: 200px;
position: relative;
text-shadow: none;
transition: box-shadow 0.3s ease;
}
.plyr video,
.plyr audio {
border-radius: inherit;
height: auto;
vertical-align: middle;
width: 100%;
}
.plyr button {
font: inherit;
line-height: inherit;
width: auto;
}
.plyr--full-ui {
box-sizing: border-box;
}
.plyr--full-ui *,
.plyr--full-ui *::after,
.plyr--full-ui *::before {
box-sizing: inherit;
}
.plyr--full-ui a,
.plyr--full-ui button,
.plyr--full-ui input,
.plyr--full-ui label {
touch-action: manipulation;
}
.plyr__badge {
background: #4a5764;
border-radius: 2px;
color: #FFF;
font-size: 9px;
line-height: 1;
padding: 3px 4px;
}
.plyr--full-ui ::-webkit-media-text-track-container {
display: none;
}
.plyr__captions {
animation: plyr-fade-in 0.3s ease;
bottom: 0;
color: #FFF;
display: none;
font-size: 14px;
left: 0;
padding: 10px;
position: absolute;
text-align: center;
transition: transform 0.4s ease-in-out;
width: 100%;
}
.plyr__captions .plyr__caption {
background-color: rgba(0, 0, 0, 0.8);
border-radius: 2px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
line-height: 185%;
padding: 0.2em 0.5em;
white-space: pre-wrap;
}
.plyr__captions .plyr__caption div {
display: inline;
}
.plyr__captions span:empty {
display: none;
}
@media (min-width: 480px) {
.plyr__captions {
font-size: 16px;
padding: 20px;
}
}
@media (min-width: 750px) {
.plyr__captions {
font-size: 18px;
}
}
.plyr--captions-active .plyr__captions {
display: block;
}
.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
transform: translateY(-40px);
}
.plyr__control {
border: 0;
border-radius: 0;
color: inherit;
cursor: pointer;
flex-shrink: 0;
overflow: visible;
padding: 0;
position: relative;
transition: all 0.3s ease;
}
.plyr__control:not(.plyr__control--overlaid) {
background-color: transparent;
}
.plyr__control svg {
display: block;
fill: currentColor;
height: 44px;
pointer-events: none;
width: 44px;
}
.plyr__control:focus:not(.plyr__tab-focus) {
outline: 0;
}
a.plyr__control {
text-decoration: none;
}
a.plyr__control::after, a.plyr__control::before {
display: none;
}
.plyr__control:not(.plyr__control--pressed) .icon--pressed,
.plyr__control.plyr__control--pressed .icon--not-pressed,
.plyr__control:not(.plyr__control--pressed) .label--pressed,
.plyr__control.plyr__control--pressed .label--not-pressed {
display: none;
}
.plyr--video .plyr__control:not(.plyr__control--overlaid).plyr__tab-focus svg, .plyr--video .plyr__control:not(.plyr__control--overlaid):hover svg, .plyr--video .plyr__control:not(.plyr__control--overlaid)[aria-expanded=true] svg,
.plyr--audio .plyr__control.plyr__tab-focus svg,
.plyr--audio .plyr__control:hover svg,
.plyr--audio .plyr__control[aria-expanded=true] svg {
stroke: currentColor;
stroke-width: 0;
}
.plyr__control--overlaid {
background-color: inherit;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 0;
color: currentColor;
display: none;
left: 50%;
padding: 4px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
opacity: 0;
visibility: hidden;
}
.plyr__control--overlaid svg {
height: 52px;
width: 52px;
fill: transparent;
position: relative;
}
.plyr__control--overlaid.plyr__tab-focus, .plyr__control--overlaid:hover {
color: rgba(58, 58, 58, 0.55);
}
.plyr--stopped .plyr__control--overlaid {
opacity: 1;
visibility: visible;
}
.plyr--full-ui.plyr--video .plyr__control--overlaid {
display: block;
}
.plyr--full-ui ::-webkit-media-controls {
display: none;
}
.plyr__controls {
align-items: center;
display: flex;
justify-content: flex-end;
text-align: center;
}
.plyr__controls .plyr__progress__container {
flex: 1;
min-width: 0;
}
.plyr__controls .plyr__controls__item:first-child {
margin-left: 0;
margin-right: auto;
}
.plyr__controls .plyr__controls__item.plyr__progress__container {
padding-left: 2.5px;
}
.plyr__controls .plyr__controls__item.plyr__time {
padding: 0 5px;
}
.plyr__controls .plyr__controls__item.plyr__progress__container:first-child, .plyr__controls .plyr__controls__item.plyr__time:first-child, .plyr__controls .plyr__controls__item.plyr__time + .plyr__time {
padding-left: 0;
}
.plyr__controls .plyr__controls__item.plyr__volume:first-child {
padding-right: 0;
}
.plyr__controls:empty {
display: none;
}
.plyr--audio .plyr__controls {
background-color: inherit;
border-radius: inherit;
color: #3a3a3a;
padding: 10px;
}
.plyr--video .plyr__controls {
background-color: inherit;
border: 1px solid rgba(58, 58, 58, 0.05);
border-radius: 0;
bottom: 0;
color: currentColor;
left: 0;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
opacity: 0.9;
padding: 0;
position: absolute;
right: 0;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
z-index: 3;
}
@media screen and (-ms-high-contrast: active) {
.plyr--video .plyr__controls {
background-color: window;
}
}
.plyr--video.plyr--hide-controls .plyr__controls {
opacity: 0;
pointer-events: none;
transform: translateY(100%);
}
.plyr [data-plyr=captions],
.plyr [data-plyr=pip],
.plyr [data-plyr=airplay],
.plyr [data-plyr=fullscreen] {
display: none;
}
.plyr--captions-enabled [data-plyr=captions],
.plyr--pip-supported [data-plyr=pip],
.plyr--airplay-supported [data-plyr=airplay],
.plyr--fullscreen-enabled [data-plyr=fullscreen] {
display: inline-block;
}
.plyr__menu {
display: flex;
position: relative;
}
.plyr__menu .plyr__control svg {
transition: transform 0.3s ease;
}
.plyr__menu .plyr__control[aria-expanded=true] svg {
transform: rotate(90deg);
}
.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip {
display: none;
}
.plyr__menu__container {
animation: plyr-popup 0.2s ease;
background-color: #3a3a3a;
border-radius: 4px;
bottom: 100%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
color: #FFF;
font-size: 16px;
margin-bottom: 10px;
position: absolute;
right: -3px;
text-align: left;
white-space: nowrap;
z-index: 3;
}
.plyr__menu__container > div {
overflow: hidden;
transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.plyr__menu__container::after {
border: 4px solid transparent;
border-top-color: #3a3a3a;
content: "";
height: 0;
position: absolute;
right: 15px;
top: 100%;
width: 0;
}
.plyr__menu__container [role=menu] {
padding: 7px;
}
.plyr__menu__container [role=menuitem],
.plyr__menu__container [role=menuitemradio] {
margin-top: 2px;
}
.plyr__menu__container [role=menuitem]:first-child,
.plyr__menu__container [role=menuitemradio]:first-child {
margin-top: 0;
}
.plyr__menu__container .plyr__control {
align-items: center;
color: #FFF;
display: flex;
font-size: 14px;
padding: 4px 11px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: 100%;
}
.plyr__menu__container .plyr__control > span {
align-items: inherit;
display: flex;
width: 100%;
}
.plyr__menu__container .plyr__control::after {
border: 4px solid transparent;
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.plyr__menu__container .plyr__control--forward {
padding-right: 29px;
}
.plyr__menu__container .plyr__control--forward::after {
border-left-color: currentColor;
right: 5px;
}
.plyr__menu__container .plyr__control--forward.plyr__tab-focus::after, .plyr__menu__container .plyr__control--forward:hover::after {
border-left-color: currentColor;
}
.plyr__menu__container .plyr__control--back {
font-weight: 500;
margin: 7px;
margin-bottom: 3px;
padding-left: 29px;
position: relative;
width: calc(100% - 14px);
}
.plyr__menu__container .plyr__control--back::after {
border-right-color: currentColor;
left: 7px;
}
.plyr__menu__container .plyr__control--back::before {
background: #c1c9d1;
box-shadow: 0 1px 0 #FFF;
content: "";
height: 1px;
left: 0;
margin-top: 4px;
overflow: hidden;
position: absolute;
right: 0;
top: 100%;
}
.plyr__menu__container .plyr__control--back.plyr__tab-focus::after, .plyr__menu__container .plyr__control--back:hover::after {
border-right-color: currentColor;
}
.plyr__menu__container .plyr__control.plyr__tab-focus, .plyr__menu__container .plyr__control:hover, .plyr__menu__container .plyr__control[aria-expanded=true] {
background-color: #FFF;
color: #3a3a3a;
}
.plyr__menu__container .plyr__control[role=menuitemradio] {
padding-left: 7px;
}
.plyr__menu__container .plyr__control[role=menuitemradio]::before, .plyr__menu__container .plyr__control[role=menuitemradio]::after {
border-radius: 100%;
}
.plyr__menu__container .plyr__control[role=menuitemradio]::before {
background: rgba(0, 0, 0, 0.1);
content: "";
display: block;
flex-shrink: 0;
height: 16px;
margin-right: 10px;
transition: all 0.3s ease;
width: 16px;
}
.plyr__menu__container .plyr__control[role=menuitemradio]::after {
background: #FFF;
border: 0;
height: 6px;
left: 12px;
opacity: 0;
top: 50%;
transform: translateY(-50%) scale(0);
transition: transform 0.3s ease, opacity 0.3s ease;
width: 6px;
}
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
background: #3a3a3a;
}
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::after {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.plyr__menu__container .plyr__control[role=menuitemradio].plyr__tab-focus::before, .plyr__menu__container .plyr__control[role=menuitemradio]:hover::before {
background: rgba(0, 0, 0, 0.1);
}
.plyr__menu__container .plyr__menu__value {
align-items: center;
display: flex;
margin-left: auto;
margin-right: -5px;
overflow: hidden;
padding-left: 25px;
pointer-events: none;
}
.plyr--full-ui input[type=range] {
-webkit-appearance: none;
/* stylelint-disable-line */
background: transparent;
border: 0;
border-radius: 26px;
color: inherit;
display: block;
height: 19px;
margin: 0;
padding: 0;
transition: box-shadow 0.3s ease;
width: 100%;
}
.plyr--full-ui input[type=range]::-webkit-slider-runnable-track {
background-color: transparent;
border: 0;
border-radius: 1px;
height: 2px;
-webkit-transition: box-shadow 0.3s ease;
transition: box-shadow 0.3s ease;
-webkit-user-select: none;
user-select: none;
background-image: linear-gradient(to right, currentColor var(--value, 0%), rgba(58, 58, 58, 0.6) var(--value, 0%));
}
.plyr--full-ui input[type=range]::-webkit-slider-thumb {
background-color: currentColor;
border: 0;
border-radius: 50%;
box-shadow: 2px 0 0 0 #FFF;
height: 13px;
margin-top: -5px;
position: relative;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
width: 13px;
-webkit-appearance: none;
/* stylelint-disable-line */
}
@media screen and (-ms-high-contrast: active) {
.plyr--full-ui input[type=range]::-webkit-slider-thumb {
background-color: windowText;
}
}
.plyr--full-ui input[type=range]::-moz-range-track {
background-color: transparent;
border: 0;
border-radius: 1px;
height: 2px;
-moz-transition: box-shadow 0.3s ease;
transition: box-shadow 0.3s ease;
-moz-user-select: none;
user-select: none;
background-color: rgba(58, 58, 58, 0.6);
}
.plyr--full-ui input[type=range]::-moz-range-thumb {
background-color: currentColor;
border: 0;
border-radius: 50%;
box-shadow: 2px 0 0 0 #FFF;
height: 13px;
margin-top: -5px;
position: relative;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
width: 13px;
}
@media screen and (-ms-high-contrast: active) {
.plyr--full-ui input[type=range]::-moz-range-thumb {
background-color: windowText;
}
}
.plyr--full-ui input[type=range]::-moz-range-progress {
background-color: currentColor;
border-radius: 1px;
height: 2px;
}
.plyr--full-ui input[type=range]::-ms-track {
background-color: transparent;
border: 0;
border-radius: 1px;
height: 2px;
-ms-transition: box-shadow 0.3s ease;
transition: box-shadow 0.3s ease;
user-select: none;
color: transparent;
}
.plyr--full-ui input[type=range]::-ms-fill-upper {
background-color: transparent;
border: 0;
border-radius: 1px;
height: 2px;
-ms-transition: box-shadow 0.3s ease;
transition: box-shadow 0.3s ease;
user-select: none;
background-color: currentColor;
opacity: 0.6;
}
@media screen and (-ms-high-contrast: active) {
.plyr--full-ui input[type=range]::-ms-fill-upper {
background-color: windowText;
}
}
.plyr--full-ui input[type=range]::-ms-fill-lower {
background-color: transparent;
border: 0;
border-radius: 1px;
height: 2px;
-ms-transition: box-shadow 0.3s ease;
transition: box-shadow 0.3s ease;
user-select: none;
background-color: currentColor;
}
@media screen and (-ms-high-contrast: active) {
.plyr--full-ui input[type=range]::-ms-fill-lower {
background-color: windowText;
}
}
.plyr--full-ui input[type=range]::-ms-thumb {
background-color: currentColor;
border: 0;
border-radius: 50%;
box-shadow: 2px 0 0 0 #FFF;
height: 13px;
position: relative;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
width: 13px;
margin-top: 1px;
}
@media screen and (-ms-high-contrast: active) {
.plyr--full-ui input[type=range]::-ms-thumb {
background-color: windowText;
}
}
.plyr--full-ui input[type=range]::-ms-tooltip {
display: none;
}
.plyr--full-ui input[type=range]:focus:not(.plyr__tab-focus) {
outline: 0;
}
.plyr--full-ui input[type=range]::-moz-focus-outer {
border: 0;
}
.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
box-shadow: 0 0 0 4px rgba(58, 58, 58, 0.25);
}
.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track {
box-shadow: 0 0 0 4px rgba(58, 58, 58, 0.25);
}
.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track {
box-shadow: 0 0 0 4px rgba(58, 58, 58, 0.25);
}
.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-thumb {
box-shadow: none;
}
.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-thumb {
box-shadow: none;
}
.plyr--full-ui input[type=range].plyr__tab-focus::-ms-thumb {
box-shadow: none;
}
.plyr--full-ui input[type=range]:active::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba(58, 58, 58, 0.25);
}
.plyr--full-ui input[type=range]:active::-moz-range-thumb {
box-shadow: 0 0 0 3px rgba(58, 58, 58, 0.25);
}
.plyr--full-ui input[type=range]:active::-ms-thumb {
box-shadow: 0 0 0 3px rgba(58, 58, 58, 0.25);
}
.plyr__poster {
background-color: #000;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: opacity 0.2s ease;
width: 100%;
z-index: 1;
}
.plyr--stopped.plyr__poster-enabled .plyr__poster {
opacity: 1;
}
.plyr__time {
font-size: 14px;
}
.plyr__time + .plyr__time::before {
content: "â„";
margin-right: 10px;
}
@media (max-width: 749px) {
.plyr__time + .plyr__time {
display: none;
}
}
.plyr--video .plyr__time {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.plyr__tooltip {
background-color: #3a3a3a;
bottom: 100%;
color: #FFF;
font-size: 14px;
font-weight: 500;
left: 50%;
line-height: 1.3;
opacity: 0;
padding: 5px 15px;
pointer-events: none;
position: absolute;
transform: translate(-50%, 10px);
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
white-space: nowrap;
z-index: 2;
}
.plyr__tooltip::before {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #3a3a3a;
bottom: -4px;
content: "";
height: 0;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 0;
z-index: 2;
}
.plyr .plyr__control:hover .plyr__tooltip,
.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,
.plyr__tooltip--visible {
opacity: 1;
transform: translate(-50%, -24px);
}
.plyr__controls > .plyr__control[data-plyr=mute]:hover .plyr__tooltip, .plyr__controls > .plyr__control[data-plyr=mute].plyr__tab-focus .plyr__tooltip,
.plyr__controls > .plyr__control[data-plyr=mute] .plyr__tooltip--visible {
transform: translate(-50%, -11px);
}
.plyr .plyr__control:hover .plyr__tooltip {
z-index: 3;
}
.plyr__controls > .plyr__control:first-child .plyr__tooltip,
.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
left: 0;
transform: translate(0, 10px) scale(0.8);
transform-origin: 0 100%;
}
.plyr__controls > .plyr__control:first-child .plyr__tooltip::before,
.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip::before {
left: 29px;
}
.plyr__controls > .plyr__control:last-child .plyr__tooltip {
left: auto;
right: 0;
transform: translate(0, 10px);
transform-origin: 100% 100%;
}
.plyr__controls > .plyr__control:last-child .plyr__tooltip::before {
left: auto;
right: 29px;
transform: translateX(50%);
}
.plyr__controls > .plyr__control:first-child:hover .plyr__tooltip, .plyr__controls > .plyr__control:first-child.plyr__tab-focus .plyr__tooltip,
.plyr__controls > .plyr__control:first-child .plyr__tooltip--visible,
.plyr__controls > .plyr__control:first-child + .plyr__control:hover .plyr__tooltip,
.plyr__controls > .plyr__control:first-child + .plyr__control.plyr__tab-focus .plyr__tooltip,
.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip--visible,
.plyr__controls > .plyr__control:last-child:hover .plyr__tooltip,
.plyr__controls > .plyr__control:last-child.plyr__tab-focus .plyr__tooltip,
.plyr__controls > .plyr__control:last-child .plyr__tooltip--visible {
transform: translate(0, -11px);
}
.plyr--video {
background-color: #FFF;
color: #3a3a3a;
overflow: hidden;
}
.plyr--video.plyr--menu-open {
overflow: visible;
}
.plyr__video-wrapper {
background-color: #000;
border-radius: inherit;
overflow: hidden;
position: relative;
z-index: 0;
}
.plyr__video-embed,
.plyr__video-wrapper--fixed-ratio {
height: 0;
padding-bottom: 56.25%;
}
.plyr__video-embed iframe,
.plyr__video-wrapper--fixed-ratio video {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: 100%;
}
.plyr__progress {
left: 6.5px;
margin-right: 15px;
position: relative;
}
.plyr__progress input[type=range], .plyr__progress__buffer {
margin-left: -6.5px;
margin-right: -6.5px;
max-width: calc(100% + 13px);
width: calc(100% + 13px);
}
.plyr__progress input[type=range] {
position: relative;
z-index: 2;
}
.plyr__progress .plyr__tooltip {
font-size: 14px;
left: 0;
}
.plyr__progress__buffer {
-webkit-appearance: none;
/* stylelint-disable-line */
background-color: transparent;
border: 0;
border-radius: 100px;
color: transparent;
height: 2px;
left: 0;
margin-top: -1px;
padding: 0;
position: absolute;
top: 50%;
}
.plyr__progress__buffer::-webkit-progress-bar {
background-color: transparent;
}
.plyr__progress__buffer::-webkit-progress-value {
background-color: currentColor;
border-radius: 100px;
min-width: 2px;
-webkit-transition: width 0.2s ease;
transition: width 0.2s ease;
}
.plyr__progress__buffer::-moz-progress-bar {
background-color: currentColor;
border-radius: 100px;
min-width: 2px;
-moz-transition: width 0.2s ease;
transition: width 0.2s ease;
}
.plyr__progress__buffer::-ms-fill {
border-radius: 100px;
-ms-transition: width 0.2s ease;
transition: width 0.2s ease;
}
.plyr--audio .plyr__progress__buffer {
color: rgba(193, 201, 209, 0.66);
}
.plyr--loading .plyr__progress__buffer {
animation: plyr-progress 1s linear infinite;
background-image: linear-gradient(-45deg, rgba(58, 58, 58, 0.6) 25%, transparent 25%, transparent 50%, rgba(58, 58, 58, 0.6) 50%, rgba(58, 58, 58, 0.6) 75%, transparent 75%, transparent);
background-repeat: repeat-x;
background-size: 25px 25px;
color: transparent;
}
.plyr--audio.plyr--loading .plyr__progress__buffer {
background-color: rgba(193, 201, 209, 0.66);
}
.plyr--full-ui .plyr__volume {
background-color: currentColor;
bottom: 105px;
height: 40px;
opacity: 0;
padding: 10px 15px;
position: absolute;
right: -4px;
transform: rotate(270deg);
transition: visibility 0.4s linear 0.4s, opacity 0.4s linear 0.3s;
width: 140px;
}
.plyr--full-ui .plyr__volume::before {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid currentColor;
bottom: 18px;
content: "";
left: -6px;
position: absolute;
transform: rotate(90deg);
z-index: 2;
}
.plyr--full-ui .plyr__volume.plyr__volume--is-visible {
opacity: 1;
transition: visibility 0.4s linear, opacity 0.4s linear;
}
.plyr--audio .plyr--full-ui .plyr__volume {
bottom: 125px;
right: -37px;
}
.plyr--full-ui .plyr__volume:hover {
opacity: 1;
visibility: visible;
}
.plyr--full-ui .plyr__volume input[type=range] {
color: #FFF;
margin: 0 auto;
}
.plyr--full-ui .plyr__volume input[type=range]::-webkit-slider-runnable-track {
background-image: linear-gradient(to right, currentColor var(--value, 0), rgba(255, 255, 255, 0.6) var(--value, 0));
}
.plyr--full-ui .plyr__volume input[type=range]::-webkit-slider-thumb {
box-shadow: 2px 0 0 0 #3a3a3a;
}
.plyr--full-ui .plyr__volume input[type=range]::-moz-range-track {
background-color: rgba(255, 255, 255, 0.6);
}
.plyr--full-ui .plyr__volume input[type=range]::-moz-range-thumb {
box-shadow: 2px 0 0 0 #3a3a3a;
}
.plyr--full-ui .plyr__volume input[type=range]::-ms-fill-upper {
background-color: rgba(255, 255, 255, 0.6);
}
.plyr--full-ui .plyr__volume input[type=range]::-ms-thumb {
box-shadow: 2px 0 0 0 #3a3a3a;
}
.plyr--full-ui .plyr__volume input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}
.plyr--full-ui .plyr__volume input[type=range].plyr__tab-focus::-moz-range-track {
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}
.plyr--full-ui .plyr__volume input[type=range].plyr__tab-focus::-ms-track {
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}
.plyr--full-ui .plyr__volume input[type=range].plyr__tab-focus::-webkit-slider-thumb {
box-shadow: none;
}
.plyr--full-ui .plyr__volume input[type=range].plyr__tab-focus::-moz-range-thumb {
box-shadow: none;
}
.plyr--full-ui .plyr__volume input[type=range].plyr__tab-focus::-ms-thumb {
box-shadow: none;
}
.plyr--full-ui .plyr__volume input[type=range]:active::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
.plyr--full-ui .plyr__volume input[type=range]:active::-moz-range-thumb {
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
.plyr--full-ui .plyr__volume input[type=range]:active::-ms-thumb {
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
@media (min-width: 480px) {
.plyr--full-ui .plyr__volume input[type=range] {
max-width: 90px;
}
}
@media (min-width: 750px) {
.plyr--full-ui .plyr__volume input[type=range] {
max-width: 110px;
}
}
.plyr--is-android .plyr__volume,
.plyr--is-ios .plyr__volume,
.plyr--is-mac.plyr--is-touch .plyr__volume {
display: none !important;
}
.plyr__control[data-plyr=mute]:hover + .plyr__volume {
opacity: 1;
transition: visibility 0.4s linear, opacity 0.4s linear;
}
.plyr:fullscreen {
border-radius: 0 !important;
height: 100%;
margin: 0;
width: 100%;
}
.plyr:fullscreen video {
height: 100%;
}
.plyr:fullscreen .plyr__video-wrapper {
height: 100%;
position: static;
}
.plyr:fullscreen .plyr__control .icon--exit-fullscreen {
display: block;
}
.plyr:fullscreen .plyr__control .icon--exit-fullscreen + svg {
display: none;
}
.plyr:fullscreen.plyr--hide-controls {
cursor: none;
}
@media (min-width: 1100px) {
.plyr:fullscreen .plyr__captions {
font-size: 21px;
}
}
/* stylelint-disable-next-line */
.plyr:-webkit-full-screen {
border-radius: 0 !important;
height: 100%;
margin: 0;
width: 100%;
}
.plyr:-webkit-full-screen video {
height: 100%;
}
.plyr:-webkit-full-screen .plyr__video-wrapper {
height: 100%;
position: static;
}
.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {
display: block;
}
.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen + svg {
display: none;
}
.plyr:-webkit-full-screen.plyr--hide-controls {
cursor: none;
}
@media (min-width: 1100px) {
.plyr:-webkit-full-screen .plyr__captions {
font-size: 21px;
}
}
/* stylelint-disable-next-line */
.plyr:-moz-full-screen {
border-radius: 0 !important;
height: 100%;
margin: 0;
width: 100%;
}
.plyr:-moz-full-screen video {
height: 100%;
}
.plyr:-moz-full-screen .plyr__video-wrapper {
height: 100%;
position: static;
}
.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen {
display: block;
}
.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen + svg {
display: none;
}
.plyr:-moz-full-screen.plyr--hide-controls {
cursor: none;
}
@media (min-width: 1100px) {
.plyr:-moz-full-screen .plyr__captions {
font-size: 21px;
}
}
/* stylelint-disable-next-line */
.plyr:-ms-fullscreen {
border-radius: 0 !important;
height: 100%;
margin: 0;
width: 100%;
}
.plyr:-ms-fullscreen video {
height: 100%;
}
.plyr:-ms-fullscreen .plyr__video-wrapper {
height: 100%;
position: static;
}
.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen {
display: block;
}
.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen + svg {
display: none;
}
.plyr:-ms-fullscreen.plyr--hide-controls {
cursor: none;
}
@media (min-width: 1100px) {
.plyr:-ms-fullscreen .plyr__captions {
font-size: 21px;
}
}
.plyr--fullscreen-fallback {
border-radius: 0 !important;
height: 100%;
margin: 0;
width: 100%;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 40000;
}
.plyr--fullscreen-fallback video {
height: 100%;
}
.plyr--fullscreen-fallback .plyr__video-wrapper {
height: 100%;
position: static;
}
.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen {
display: block;
}
.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen + svg {
display: none;
}
.plyr--fullscreen-fallback.plyr--hide-controls {
cursor: none;
}
@media (min-width: 1100px) {
.plyr--fullscreen-fallback .plyr__captions {
font-size: 21px;
}
}
.plyr__preview-thumb {
background-color: #3a3a3a;
bottom: 100%;
margin-bottom: 10px;
opacity: 0;
padding: 5px;
pointer-events: none;
position: absolute;
transform: translate(0, 10px);
transform-origin: 50% 100%;
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
z-index: 2;
}
.plyr__preview-thumb--is-shown {
opacity: 1;
transform: translate(0, -14px);
}
.plyr__preview-thumb::before {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #3a3a3a;
bottom: -4px;
content: "";
height: 0;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 0;
z-index: 2;
}
.plyr__preview-thumb__image-container {
background: #c1c9d1;
overflow: hidden;
position: relative;
z-index: 0;
}
.plyr__preview-thumb__image-container img {
height: 100%;
left: 0;
max-height: none;
max-width: none;
position: absolute;
top: 0;
width: 100%;
}
.plyr__preview-thumb__time-container {
bottom: 6px;
left: 0;
position: absolute;
right: 0;
white-space: nowrap;
z-index: 3;
}
.plyr__preview-thumb__time-container span {
background-color: #3a3a3a;
color: #FFF;
font-size: 14px;
padding: 3px 6px;
}
.plyr__preview-scrubbing {
bottom: 0;
filter: blur(1px);
height: 100%;
left: 0;
margin: auto;
opacity: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
transition: opacity 0.3s ease;
width: 100%;
z-index: 1;
}
.plyr__preview-scrubbing--is-shown {
opacity: 1;
}
.plyr__preview-scrubbing img {
height: 100%;
left: 0;
max-height: none;
max-width: none;
-o-object-fit: contain;
object-fit: contain;
position: absolute;
top: 0;
width: 100%;
}
.plyr--no-transition {
transition: none !important;
}
.plyr__sr-only {
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
border: 0 !important;
height: 1px !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
.plyr [hidden] {
display: none !important;
}
/*
* PhotoSwipe Zoom Library
* MIT license
* Created by Dmitry Semenov | photoswipe.com */
.pswp {
display: none;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
touch-action: none;
z-index: 10000;
-webkit-text-size-adjust: 100%;
/* create separate layer, to avoid paint on window.onscroll in webkit/blink */
backface-visibility: hidden;
outline: none;
}
.pswp img {
max-width: none;
}
.pswp--animate_opacity {
opacity: 0.001;
/* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
will-change: opacity;
transition: opacity 500ms cubic-bezier(0.4, 0, 0.22, 1);
}
.pswp--open {
display: block;
}
.pswp--zoomed-in .pswp__img {
cursor: grab;
}
.pswp--dragging .pswp__img {
cursor: grabbing;
}
/*
Background is added as a separate element.
As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--bg);
opacity: 0;
transform: translateZ(0);
backface-visibility: hidden;
will-change: opacity;
}
.pswp__scroll-wrap {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.pswp__container,
.pswp__zoom-wrap {
touch-action: none;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
}
.pswp__zoom-wrap {
position: absolute;
width: 100%;
transform-origin: left top;
/* for open/close transition */
transition: transform 250ms cubic-bezier(0.4, 0, 0.22, 1);
}
.pswp__bg {
will-change: opacity;
/* for open/close transition */
transform-origin: 0 0;
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
transition: none;
}
.pswp__container,
.pswp__zoom-wrap {
backface-visibility: hidden;
z-index: 0;
}
.pswp__item {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 0;
overflow: hidden;
}
.pswp__img {
position: absolute;
width: auto;
height: auto;
top: 0;
left: 0;
}
.pswp__img--placeholder {
backface-visibility: hidden;
}
.pswp__img--placeholder--blank {
background: var(--bg);
}
.pswp--ie .pswp__img {
width: 100% !important;
height: auto !important;
left: 0;
top: 0;
}
.pswp__error-msg {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 14px;
line-height: 16px;
margin-top: -8px;
color: var(--muted);
}
.pswp__error-msg a {
color: var(--muted);
text-decoration: underline;
}
/* UI Custom CSS */
.pswp__top-bar {
background: var(--bg);
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 0 1.5em;
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: space-around;
}
.pswp__button {
background: none;
cursor: pointer;
overflow: visible;
-webkit-appearance: none;
border: 0;
padding: 0;
margin: 0;
box-shadow: none;
transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.pswp__button:hover {
transform: scale(1.15);
}
.pswp__button:active {
outline: none;
}
.pswp__button::-moz-focus-inner {
padding: 0;
border: 0;
}
.pswp__button,
.pswp__button svg.icon,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
width: var(--space-9);
height: var(--space-9);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* increases touch area */
.pswp__button--close {
min-width: 60px;
margin-right: 1em;
}
.pswp__close--container {
display: grid;
justify-content: end;
margin: 1em 0.25em;
}
.pswp__close--container svg {
float: right;
}
.pswp__button--arrow--left,
.pswp__button--arrow--right {
z-index: 10000;
height: 10ch;
}
.pswp__button--close svg,
.pswp__button--arrow--left svg,
.pswp__button--arrow--right svg {
z-index: -1;
position: relative;
}
.pswp__button--arrow--right {
justify-self: end;
}
.pswp__counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
align-self: center;
justify-self: center;
}
.pswp__button--share,
.pswp__button--fs,
.pswp__button--zoom,
.pswp__share-modal,
.pswp__share-modal--hidden,
.pswp__share-tooltip,
.pswp__caption,
.pswp__caption--fake,
.pswp__caption--empty {
display: none;
}
/* root element of UI */
.pswp__ui {
-webkit-font-smoothing: auto;
visibility: visible;
opacity: 1;
z-index: 10050;
margin: 0;
background-color: var(--bg);
position: fixed;
width: 100%;
}
/* pswp__ui--one-slide class is added when there is just one item in gallery */
.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
display: none;
}
.pswp__element--disabled {
display: none !important;
}
/* pswp chrome clickedClass target specificity issue */
.pswp__button {
height: auto;
}
.pswp__button .icon-theme {
pointer-events: none;
}
/* ================ Tailwind ================ */
/* ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: currentColor; /* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-moz-tab-size: 4; /* 3 */
-o-tab-size: 4;
tab-size: 4; /* 3 */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
font-feature-settings: normal; /* 5 */
font-variation-settings: normal; /* 6 */
-webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
font-feature-settings: normal; /* 2 */
font-variation-settings: normal; /* 3 */
font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-feature-settings: inherit; /* 1 */
font-variation-settings: inherit; /* 1 */
font-size: 100%; /* 1 */
font-weight: inherit; /* 1 */
line-height: inherit; /* 1 */
letter-spacing: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}
:root{
--space-1: 2px;
--space-2: 4px;
--space-3: 6px;
--space-4: 8px;
--space-5: 12px;
--space-6: 14px;
--space-7: 16px;
--space-8: 20px;
--space-9: 25px;
--space-10: 32px;
--space-11: 40px;
--space-12: 50px;
--space-13: 60px;
--space-14: 80px;
--space-15: 120px;
}
@media (min-width: 768px){
:root{
--space-1: 2px;
--space-2: 4px;
--space-3: 6px;
--space-4: 8px;
--space-5: 12px;
--space-6: 15px;
--space-7: 18px;
--space-8: 22px;
--space-9: 27px;
--space-10: 35px;
--space-11: 45px;
--space-12: 56px;
--space-13: 75px;
--space-14: 105px;
--space-15: 150px;
}
}
@media (min-width: 1100px){
:root{
--space-1: 2px;
--space-2: 4px;
--space-3: 6px;
--space-4: 8px;
--space-5: 12px;
--space-6: 16px;
--space-7: 20px;
--space-8: 24px;
--space-9: 32px;
--space-10: 38px;
--space-11: 50px;
--space-12: 68px;
--space-13: 96px;
--space-14: 128px;
--space-15: 192px;
}
}
:root{
--leading-none: 1;
--leading-hairline: 1.25;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
}
*, ::before, ::after{
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
::backdrop{
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
.\!container{
width: 100% !important;
}
.container{
width: 100%;
}
@media (min-width: 480px){
.\!container{
max-width: 480px !important;
}
.container{
max-width: 480px;
}
}
@media (min-width: 768px){
.\!container{
max-width: 768px !important;
}
.container{
max-width: 768px;
}
}
@media (min-width: 1100px){
.\!container{
max-width: 1100px !important;
}
.container{
max-width: 1100px;
}
}
@media (min-width: 1400px){
.\!container{
max-width: 1400px !important;
}
.container{
max-width: 1400px;
}
}
@media (min-width: 1536px){
.\!container{
max-width: 1536px !important;
}
.container{
max-width: 1536px;
}
}
.type-accent{
--font-adjust: var(--FONT-ADJUST-ACCENT);
--font-family: var(--FONT-STACK-ACCENT);
--font-style: var(--FONT-STYLE-ACCENT);
--font-weight: var(--FONT-WEIGHT-ACCENT);
--font-weight-bold: var(--FONT-WEIGHT-ACCENT-BOLD);
--font-transform: var(--FONT-ACCENT-TRANSFORM);
--font-letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-family: var(--font-family);
font-style: var(--font-style);
font-weight: var(--font-weight);
text-transform: var(--font-transform);
letter-spacing: var(--font-letter-spacing);
}
.type-body{
--font-adjust: var(--FONT-ADJUST-BODY);
--font-family: var(--FONT-STACK-BODY);
--font-style: var(--FONT-STYLE-BODY);
--font-weight: var(--FONT-WEIGHT-BODY);
--font-weight-bold: var(--FONT-WEIGHT-BODY-BOLD);
--font-transform: var(--FONT-BODY-TRANSFORM);
--font-letter-spacing: var(--FONT-BODY-LETTER-SPACING);
font-family: var(--font-family);
font-style: var(--font-style);
font-weight: var(--font-weight);
text-transform: var(--font-transform);
letter-spacing: var(--font-letter-spacing);
}
.type-heading{
--font-adjust: var(--FONT-ADJUST-HEADING);
--font-family: var(--FONT-STACK-HEADING);
--font-style: var(--FONT-STYLE-HEADING);
--font-weight: var(--FONT-WEIGHT-HEADING);
--font-weight-bold: var(--FONT-WEIGHT-HEADING-BOLD);
--font-transform: var(--FONT-HEADING-TRANSFORM);
--font-letter-spacing: var(--FONT-HEADING-LETTER-SPACING);
font-family: var(--font-family);
font-style: var(--font-style);
font-weight: var(--font-weight);
text-transform: var(--font-transform);
letter-spacing: var(--font-letter-spacing);
}
.text-stroke{
-webkit-text-fill-color: var(--tw-text-stroke-fill-color, transparent);
-webkit-text-stroke-width: var(--tw-text-stroke-width, 1px);
-webkit-text-stroke-color: var(--tw-text-stroke-color, black);
}
.sr-only{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.pointer-events-none{
pointer-events: none;
}
.pointer-events-auto{
pointer-events: auto;
}
.visible{
visibility: visible;
}
.invisible{
visibility: hidden;
}
.collapse{
visibility: collapse;
}
.static{
position: static;
}
.fixed{
position: fixed;
}
.\!absolute{
position: absolute !important;
}
.absolute{
position: absolute;
}
.relative{
position: relative;
}
.sticky{
position: sticky;
}
.inset-0{
inset: 0px;
}
.inset-\[--inset\]{
inset: var(--inset);
}
.-left-1\/2{
left: -50%;
}
.-right-1\/2{
right: -50%;
}
.bottom-0{
bottom: 0px;
}
.bottom-\[calc\(var\(--inner\)\/2\)\]{
bottom: calc(var(--inner) / 2);
}
.left-0{
left: 0px;
}
.left-\[--float-left-mobile\]{
left: var(--float-left-mobile);
}
.left-\[--float-left\]{
left: var(--float-left);
}
.left-\[calc\(var\(--inner\)\/2\)\]{
left: calc(var(--inner) / 2);
}
.right-0{
right: 0px;
}
.right-\[calc\(var\(--inner\)\/2\)\]{
right: calc(var(--inner) / 2);
}
.start-\[-1\.5px\]{
inset-inline-start: -1.5px;
}
.start-\[calc\(50\%\+\(var\(--thumb-size\)\/-2\)\)\]{
inset-inline-start: calc(50% + (var(--thumb-size) / -2));
}
.start-\[calc\(var\(--thumb-size\)\/-2\)\]{
inset-inline-start: calc(var(--thumb-size) / -2);
}
.top-0{
top: 0px;
}
.top-\[--float-top-mobile\]{
top: var(--float-top-mobile);
}
.top-\[--float-top\]{
top: var(--float-top);
}
.top-\[--top\]{
top: var(--top);
}
.top-\[calc\(var\(--inner\)\/2\)\]{
top: calc(var(--inner) / 2);
}
.top-auto{
top: auto;
}
.\!z-10{
z-index: 10 !important;
}
.\!z-20{
z-index: 20 !important;
}
.\!z-40{
z-index: 40 !important;
}
.z-0{
z-index: 0;
}
.z-10{
z-index: 10;
}
.z-20{
z-index: 20;
}
.z-30{
z-index: 30;
}
.z-40{
z-index: 40;
}
.z-\[5500\]{
z-index: 5500;
}
.col-span-1{
grid-column: span 1 / span 1;
}
.col-span-10{
grid-column: span 10 / span 10;
}
.col-span-11{
grid-column: span 11 / span 11;
}
.col-span-12{
grid-column: span 12 / span 12;
}
.col-span-2{
grid-column: span 2 / span 2;
}
.col-span-3{
grid-column: span 3 / span 3;
}
.col-span-4{
grid-column: span 4 / span 4;
}
.col-span-5{
grid-column: span 5 / span 5;
}
.col-span-6{
grid-column: span 6 / span 6;
}
.m-0{
margin: 0px;
}
.m-r4{
margin: var(--space-4);
}
.m-r5{
margin: var(--space-5);
}
.mx-auto{
margin-left: auto;
margin-right: auto;
}
.my-\[5px\]{
margin-top: 5px;
margin-bottom: 5px;
}
.my-r4{
margin-top: var(--space-4);
margin-bottom: var(--space-4);
}
.my-r5{
margin-top: var(--space-5);
margin-bottom: var(--space-5);
}
.my-r6{
margin-top: var(--space-6);
margin-bottom: var(--space-6);
}
.my-r8{
margin-top: var(--space-8);
margin-bottom: var(--space-8);
}
.-mt-r4{
margin-top: calc(var(--space-4) * -1);
}
.mb-0{
margin-bottom: 0px;
}
.mb-r11{
margin-bottom: var(--space-11);
}
.mb-r2{
margin-bottom: var(--space-2);
}
.mb-r4{
margin-bottom: var(--space-4);
}
.mb-r5{
margin-bottom: var(--space-5);
}
.mb-r6{
margin-bottom: var(--space-6);
}
.mb-r8{
margin-bottom: var(--space-8);
}
.ml-\[0\.33em\]{
margin-left: 0.33em;
}
.ml-auto{
margin-left: auto;
}
.ml-r2{
margin-left: var(--space-2);
}
.mr-\[0\.5em\]{
margin-right: 0.5em;
}
.mr-r4{
margin-right: var(--space-4);
}
.mt-r11{
margin-top: var(--space-11);
}
.mt-r12{
margin-top: var(--space-12);
}
.mt-r2{
margin-top: var(--space-2);
}
.mt-r5{
margin-top: var(--space-5);
}
.mt-r6{
margin-top: var(--space-6);
}
.mt-r8{
margin-top: var(--space-8);
}
.block{
display: block;
}
.inline-block{
display: inline-block;
}
.inline{
display: inline;
}
.flex{
display: flex;
}
.inline-flex{
display: inline-flex;
}
.table{
display: table;
}
.grid{
display: grid;
}
.contents{
display: contents;
}
.hidden{
display: none;
}
.h-0{
height: 0px;
}
.h-\[--height-mobile\]{
height: var(--height-mobile);
}
.h-\[--thumb-size\]{
height: var(--thumb-size);
}
.h-\[--wh-ratio\]{
height: var(--wh-ratio);
}
.h-\[1\.5px\]{
height: 1.5px;
}
.h-\[1px\]{
height: 1px;
}
.h-fit{
height: -moz-fit-content;
height: fit-content;
}
.h-full{
height: 100%;
}
.h-r11{
height: var(--space-11);
}
.max-h-\[--image-max-height\]{
max-height: var(--image-max-height);
}
.max-h-full{
max-height: 100%;
}
.min-h-\[40px\]{
min-height: 40px;
}
.w-0{
width: 0px;
}
.w-\[--ellapsed-time-percentage\]{
width: var(--ellapsed-time-percentage);
}
.w-\[--thumb-size\]{
width: var(--thumb-size);
}
.w-\[--width\]{
width: var(--width);
}
.w-\[1\.5px\]{
width: 1.5px;
}
.w-fit{
width: -moz-fit-content;
width: fit-content;
}
.w-full{
width: 100%;
}
.w-max{
width: -moz-max-content;
width: max-content;
}
.w-r11{
width: var(--space-11);
}
.w-r12{
width: var(--space-12);
}
.min-w-\[180px\]{
min-width: 180px;
}
.min-w-\[40px\]{
min-width: 40px;
}
.max-w-\[--image-max-width\]{
max-width: var(--image-max-width);
}
.max-w-\[--max-width\]{
max-width: var(--max-width);
}
.max-w-\[140px\]{
max-width: 140px;
}
.max-w-full{
max-width: 100%;
}
.max-w-page{
max-width: var(--max-w-page);
}
.max-w-page-narrow{
max-width: var(--max-w-page-narrow);
}
.flex-1{
flex: 1 1 0%;
}
.shrink-0{
flex-shrink: 0;
}
.flex-grow-0{
flex-grow: 0;
}
.flex-grow-1{
flex-grow: 1;
}
.flex-grow-2{
flex-grow: 2;
}
.flex-grow-3{
flex-grow: 3;
}
.origin-bottom{
transform-origin: bottom;
}
.origin-center{
transform-origin: center;
}
.-translate-x-1\/2{
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2{
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0{
--tw-translate-y: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1\/2{
--tw-translate-y: 50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-full{
--tw-translate-y: 100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90{
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-\[--float-rotation\]{
--tw-rotate: var(--float-rotation);
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-\[--rotation\]{
--tw-rotate: var(--rotation);
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform{
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\!cursor-not-allowed{
cursor: not-allowed !important;
}
.cursor-col-resize{
cursor: col-resize;
}
.cursor-pointer{
cursor: pointer;
}
.cursor-row-resize{
cursor: row-resize;
}
.select-none{
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.resize{
resize: both;
}
.grid-cols-3{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.flex-row{
flex-direction: row;
}
.flex-row-reverse{
flex-direction: row-reverse;
}
.flex-col{
flex-direction: column;
}
.flex-col-reverse{
flex-direction: column-reverse;
}
.flex-wrap{
flex-wrap: wrap;
}
.items-start{
align-items: flex-start;
}
.items-end{
align-items: flex-end;
}
.items-center{
align-items: center;
}
.items-stretch{
align-items: stretch;
}
.justify-start{
justify-content: flex-start;
}
.justify-end{
justify-content: flex-end;
}
.justify-center{
justify-content: center;
}
.justify-between{
justify-content: space-between;
}
.gap{
gap: var(--grid-gutter);
}
.gap-\[--gap\]{
gap: var(--gap);
}
.gap-r1{
gap: var(--space-1);
}
.gap-r10{
gap: var(--space-10);
}
.gap-r11{
gap: var(--space-11);
}
.gap-r12{
gap: var(--space-12);
}
.gap-r13{
gap: var(--space-13);
}
.gap-r14{
gap: var(--space-14);
}
.gap-r15{
gap: var(--space-15);
}
.gap-r2{
gap: var(--space-2);
}
.gap-r3{
gap: var(--space-3);
}
.gap-r4{
gap: var(--space-4);
}
.gap-r5{
gap: var(--space-5);
}
.gap-r6{
gap: var(--space-6);
}
.gap-r7{
gap: var(--space-7);
}
.gap-r8{
gap: var(--space-8);
}
.gap-r9{
gap: var(--space-9);
}
.gap-x-\[--gap\]{
-moz-column-gap: var(--gap);
column-gap: var(--gap);
}
.space-x-r11 > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 0;
margin-right: calc(var(--space-11) * var(--tw-space-x-reverse));
margin-left: calc(var(--space-11) * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-r2 > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 0;
margin-right: calc(var(--space-2) * var(--tw-space-x-reverse));
margin-left: calc(var(--space-2) * calc(1 - var(--tw-space-x-reverse)));
}
.overflow-hidden{
overflow: hidden;
}
.overflow-scroll{
overflow: scroll;
}
.overflow-x-auto{
overflow-x: auto;
}
.whitespace-normal{
white-space: normal;
}
.whitespace-nowrap{
white-space: nowrap;
}
.rounded{
border-radius: 3px;
}
.rounded-full{
border-radius: 9999px;
}
.rounded-lg{
border-radius: 36px;
}
.border{
border-width: 1px;
}
.border-0{
border-width: 0px;
}
.border-2{
border-width: 2px;
}
.border-\[1\.5px\]{
border-width: 1.5px;
}
.border-y{
border-top-width: 1px;
border-bottom-width: 1px;
}
.border-b-\[3px\]{
border-bottom-width: 3px;
}
.border-l{
border-left-width: 1px;
}
.\!border-solid{
border-style: solid !important;
}
.border-\[--badge-border\]{
border-color: var(--badge-border);
}
.border-\[--handle-color\]{
border-color: var(--handle-color);
}
.border-content\/20{
border-color: rgb(var(--rgb-content) / 0.2);
}
.border-transparent{
border-color: transparent;
}
.bg-\[--badge-bg\]{
background-color: var(--badge-bg);
}
.bg-\[--bg\]{
background-color: var(--bg);
}
.bg-\[--handle-color\]{
background-color: var(--handle-color);
}
.bg-\[--placeholder-bg\]{
background-color: var(--placeholder-bg);
}
.bg-button{
--tw-bg-opacity: 1;
background-color: rgb(var(--rgb-button-main) / var(--tw-bg-opacity));
}
.bg-canvas{
--tw-bg-opacity: 1;
background-color: rgb(var(--rgb-canvas) / var(--tw-bg-opacity));
}
.bg-content\/5{
background-color: rgb(var(--rgb-content) / 0.05);
}
.bg-white{
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-white\/10{
background-color: rgb(255 255 255 / 0.1);
}
.fill-\[--border\]{
fill: var(--border);
}
.fill-\[--hairline\]{
fill: var(--hairline);
}
.fill-\[--placeholder-fill\]{
fill: var(--placeholder-fill);
}
.object-contain{
-o-object-fit: contain;
object-fit: contain;
}
.object-cover{
-o-object-fit: cover;
object-fit: cover;
}
.\!p-0{
padding: 0px !important;
}
.p-\[--inset\]{
padding: var(--inset);
}
.p-\[--padding\]{
padding: var(--padding);
}
.p-r2{
padding: var(--space-2);
}
.p-r5{
padding: var(--space-5);
}
.p-r6{
padding: var(--space-6);
}
.p-r7{
padding: var(--space-7);
}
.px-\[--items-spacing\]{
padding-left: var(--items-spacing);
padding-right: var(--items-spacing);
}
.px-\[--outer\]{
padding-left: var(--outer);
padding-right: var(--outer);
}
.px-\[10px\]{
padding-left: 10px;
padding-right: 10px;
}
.px-r2{
padding-left: var(--space-2);
padding-right: var(--space-2);
}
.px-r4{
padding-left: var(--space-4);
padding-right: var(--space-4);
}
.px-r6{
padding-left: var(--space-6);
padding-right: var(--space-6);
}
.py-\[--space-8\]{
padding-top: var(--space-8);
padding-bottom: var(--space-8);
}
.py-\[--spacer-half\]{
padding-top: var(--spacer-half);
padding-bottom: var(--spacer-half);
}
.py-r2{
padding-top: var(--space-2);
padding-bottom: var(--space-2);
}
.py-r4{
padding-top: var(--space-4);
padding-bottom: var(--space-4);
}
.py-r5{
padding-top: var(--space-5);
padding-bottom: var(--space-5);
}
.py-r9{
padding-top: var(--space-9);
padding-bottom: var(--space-9);
}
.pb-0{
padding-bottom: 0px;
}
.pb-\[--PB\]{
padding-bottom: var(--PB);
}
.pb-\[--space-8\]{
padding-bottom: var(--space-8);
}
.pb-\[1px\]{
padding-bottom: 1px;
}
.pb-r1{
padding-bottom: var(--space-1);
}
.pb-r10{
padding-bottom: var(--space-10);
}
.pb-r11{
padding-bottom: var(--space-11);
}
.pb-r12{
padding-bottom: var(--space-12);
}
.pb-r13{
padding-bottom: var(--space-13);
}
.pb-r14{
padding-bottom: var(--space-14);
}
.pb-r15{
padding-bottom: var(--space-15);
}
.pb-r2{
padding-bottom: var(--space-2);
}
.pb-r3{
padding-bottom: var(--space-3);
}
.pb-r4{
padding-bottom: var(--space-4);
}
.pb-r5{
padding-bottom: var(--space-5);
}
.pb-r6{
padding-bottom: var(--space-6);
}
.pb-r7{
padding-bottom: var(--space-7);
}
.pb-r8{
padding-bottom: var(--space-8);
}
.pb-r9{
padding-bottom: var(--space-9);
}
.pr-\[--gap\]{
padding-right: var(--gap);
}
.pr-\[0\.33em\]{
padding-right: 0.33em;
}
.pt-\[2px\]{
padding-top: 2px;
}
.pt-r1{
padding-top: var(--space-1);
}
.pt-r10{
padding-top: var(--space-10);
}
.pt-r11{
padding-top: var(--space-11);
}
.pt-r12{
padding-top: var(--space-12);
}
.pt-r13{
padding-top: var(--space-13);
}
.pt-r14{
padding-top: var(--space-14);
}
.pt-r15{
padding-top: var(--space-15);
}
.pt-r2{
padding-top: var(--space-2);
}
.pt-r3{
padding-top: var(--space-3);
}
.pt-r4{
padding-top: var(--space-4);
}
.pt-r5{
padding-top: var(--space-5);
}
.pt-r6{
padding-top: var(--space-6);
}
.pt-r7{
padding-top: var(--space-7);
}
.pt-r8{
padding-top: var(--space-8);
}
.pt-r9{
padding-top: var(--space-9);
}
.align-middle{
vertical-align: middle;
}
.font-mono{
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-\[0\]{
font-size: 0;
}
.text-r1{
font-size: calc(var(--font-1) * var(--font-adjust, 1.0));
line-height: var(--leading-relaxed);
}
.text-r10{
font-size: calc(var(--font-10) * var(--font-adjust, 1.0));
line-height: var(--leading-tight);
}
.text-r11{
font-size: calc(var(--font-11) * var(--font-adjust, 1.0));
line-height: var(--leading-hairline);
}
.text-r12{
font-size: calc(var(--font-12) * var(--font-adjust, 1.0));
line-height: var(--leading-hairline);
}
.text-r13{
font-size: calc(var(--font-13) * var(--font-adjust, 1.0));
line-height: var(--leading-hairline);
}
.text-r14{
font-size: calc(var(--font-14) * var(--font-adjust, 1.0));
line-height: var(--leading-none);
}
.text-r15{
font-size: calc(var(--font-15) * var(--font-adjust, 1.0));
line-height: var(--leading-none);
}
.text-r2{
font-size: calc(var(--font-2) * var(--font-adjust, 1.0));
line-height: var(--leading-relaxed);
}
.text-r3{
font-size: calc(var(--font-3) * var(--font-adjust, 1.0));
line-height: var(--leading-normal);
}
.text-r4{
font-size: calc(var(--font-4) * var(--font-adjust, 1.0));
line-height: var(--leading-normal);
}
.text-r5{
font-size: calc(var(--font-5) * var(--font-adjust, 1.0));
line-height: var(--leading-snug);
}
.text-r6{
font-size: calc(var(--font-6) * var(--font-adjust, 1.0));
line-height: var(--leading-snug);
}
.text-r7{
font-size: calc(var(--font-7) * var(--font-adjust, 1.0));
line-height: var(--leading-snug);
}
.text-r8{
font-size: calc(var(--font-8) * var(--font-adjust, 1.0));
line-height: var(--leading-tight);
}
.text-r9{
font-size: calc(var(--font-9) * var(--font-adjust, 1.0));
line-height: var(--leading-tight);
}
.font-bold{
font-weight: var(--font-weight-bold);
}
.font-normal{
font-weight: var(--font-weight);
}
.uppercase{
text-transform: uppercase;
}
.capitalize{
text-transform: capitalize;
}
.italic{
font-style: italic;
}
.text-\[--badge-text\]{
color: var(--badge-text);
}
.text-\[--handle-color\]{
color: var(--handle-color);
}
.text-\[--text-color\]{
color: var(--text-color);
}
.text-\[--text\]{
color: var(--text);
}
.text-\[color\:--text-color\]{
color: var(--text-color);
}
.text-\[color\:var\(--text\)\]{
color: var(--text);
}
.text-button{
--tw-text-opacity: 1;
color: rgb(var(--rgb-button-main) / var(--tw-text-opacity));
}
.text-button-contrast{
--tw-text-opacity: 1;
color: rgb(var(--rgb-button-contrast) / var(--tw-text-opacity));
}
.text-content\/100{
color: rgb(var(--rgb-content) / 1);
}
.text-content\/50{
color: rgb(var(--rgb-content) / 0.5);
}
.underline{
text-decoration-line: underline;
}
.line-through{
text-decoration-line: line-through;
}
.\!opacity-0{
opacity: 0 !important;
}
.\!opacity-100{
opacity: 1 !important;
}
.opacity-0{
opacity: 0;
}
.opacity-100{
opacity: 1;
}
.opacity-50{
opacity: 0.5;
}
.opacity-70{
opacity: 0.7;
}
.shadow{
--tw-shadow:
calc(sin(var(--light-source-angle)) * var(--light-source-distance) * 0.3) calc(cos(var(--light-source-angle)) * var(--light-source-distance) * 0.3) 0.8px hsl(var(--shadow-color-hsl) / 0.16),
calc(sin(var(--light-source-angle)) * var(--light-source-distance) * 0.9) calc(cos(var(--light-source-angle)) * var(--light-source-distance) * 0.9) 1.8px -2px hsl(var(--shadow-color-hsl) / 0.11),
calc(sin(var(--light-source-angle)) * var(--light-source-distance) * 4.3) calc(cos(var(--light-source-angle)) * var(--light-source-distance) * 4.3) 8.6px -4px hsl(var(--shadow-color-hsl) / 0.08)
;
--tw-shadow-colored: calc(sin(var(--light-source-angle)) * var(--light-source-distance) * 0.3) calc(cos(var(--light-source-angle)) * var(--light-source-distance) * 0.3) 0.8px hsl(var(--shadow-color-hsl) / 0.16), 1.8px -2px var(--tw-shadow-color), 8.6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline{
outline-style: solid;
}
.ring-1{
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-offset-1{
--tw-ring-offset-width: 1px;
}
.ring-offset-transparent{
--tw-ring-offset-color: transparent;
}
.blur{
--tw-blur: blur(8px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur{
--tw-backdrop-blur: blur(8px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-md{
--tw-backdrop-blur: blur(12px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition{
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, visibility, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, visibility;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, visibility, -webkit-backdrop-filter;
transition-timing-function: var(--ease-out-fast);
transition-duration: 300ms;
}
.transition-opacity{
transition-property: opacity;
transition-timing-function: var(--ease-out-fast);
transition-duration: 300ms;
}
.delay-0{
transition-delay: 0s;
}
.delay-\[--exit-animation-duration\]{
transition-delay: var(--exit-animation-duration);
}
.delay-\[--slide-transition-duration\]{
transition-delay: var(--slide-transition-duration);
}
.delay-\[calc\(var\(--enter-animation-duration\)\/2\)\]{
transition-delay: calc(var(--enter-animation-duration) / 2);
}
.delay-\[calc\(var\(--exit-animation-duration\)\)\]{
transition-delay: calc(var(--exit-animation-duration));
}
.delay-\[calc\(var\(--exit-animation-duration\)\/4\)\]{
transition-delay: calc(var(--exit-animation-duration) / 4);
}
.duration-150{
transition-duration: 150ms;
}
.duration-200{
transition-duration: 200ms;
}
.duration-300{
transition-duration: 300ms;
}
.duration-400{
transition-duration: 400ms;
}
.duration-500{
transition-duration: 500ms;
}
.duration-\[--enter-animation-duration\]{
transition-duration: var(--enter-animation-duration);
}
.duration-\[--exit-animation-duration\]{
transition-duration: var(--exit-animation-duration);
}
.duration-\[--slide-transition-duration\]{
transition-duration: var(--slide-transition-duration);
}
.duration-\[calc\(var\(--enter-animation-duration\)\*2\)\]{
transition-duration: calc(var(--enter-animation-duration) * 2);
}
.duration-\[calc\(var\(--exit-animation-duration\)\)\]{
transition-duration: calc(var(--exit-animation-duration));
}
.duration-\[calc\(var\(--exit-animation-duration\)\*2\)\]{
transition-duration: calc(var(--exit-animation-duration) * 2);
}
.\!ease-out-fast{
transition-timing-function: var(--ease-out-fast) !important;
}
.scrollbar-hide{
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar{
display: none;
}
@keyframes enterOpacity{
from{
opacity: var(--tw-enter-opacity, 1);
}
}
@keyframes exitOpacity{
to{
opacity: var(--tw-exit-opacity, 1);
}
}
@keyframes enterTransform{
from{
transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale-x, 1), var(--tw-enter-scale-y, 1), var(--tw-enter-scale-z, 1)) rotate(var(--tw-enter-rotate, 0));
}
}
@keyframes exitTransform{
to{
transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale-x, 1), var(--tw-exit-scale-y, 1), var(--tw-exit-scale-z, 1)) rotate(var(--tw-exit-rotate, 0));
}
}
.paused{
animation-play-state: paused;
}
.gradient-mask-r-10{
-webkit-mask-image: linear-gradient(
to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1.0) 10%, rgba(0, 0, 0, 1.0) 90%, rgba(0, 0, 0, 0) 100%
);
mask-image: linear-gradient(
to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1.0) 10%, rgba(0, 0, 0, 1.0) 90%, rgba(0, 0, 0, 0) 100%
);
}
.gradient-mask-l-10{
-webkit-mask-image: linear-gradient(
to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1.0) 10%, rgba(0, 0, 0, 1.0) 90%, rgba(0, 0, 0, 0) 100%
);
mask-image: linear-gradient(
to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1.0) 10%, rgba(0, 0, 0, 1.0) 90%, rgba(0, 0, 0, 0) 100%
);
}
.gradient-mask-x-10{
-webkit-mask-image: linear-gradient(
to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1.0) 10%, rgba(0, 0, 0, 1.0) 90%, rgba(0, 0, 0, 0) 100%
);
mask-image: linear-gradient(
to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1.0) 10%, rgba(0, 0, 0, 1.0) 90%, rgba(0, 0, 0, 0) 100%
);
}
.scrollbar-hide{
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar{
display: none;
}
.text-left{
text-align: left !important;
}
[dir=rtl] .text-left{
text-align: right !important;
}
.text-center{
text-align: center !important;
}
.text-right{
text-align: right !important;
}
[dir=rtl] .text-right{
text-align: left !important;
}
.text-justify{
text-align: justify !important;
text-justify: inter-word;
}
.text-start{
text-align: start;
}
.text-end{
text-align: end;
}
@supports (aspect-ratio: auto){
.aspect-\[--wh-ratio-mobile\]{
aspect-ratio: var(--wh-ratio-mobile);
}
}
@supports not (aspect-ratio: auto){
.aspect-\[--wh-ratio-mobile\]::before{
content: "";
width: 1px;
margin-left: -1px;
float: left;
height: 0;
padding-top: calc((1 / (var(--wh-ratio-mobile))) * 100%);
}
.aspect-\[--wh-ratio-mobile\]::after{
content: "";
display: table;
clear: both;
}
}
@supports (aspect-ratio: auto){
.aspect-\[--wh-ratio\]{
aspect-ratio: var(--wh-ratio);
}
}
@supports not (aspect-ratio: auto){
.aspect-\[--wh-ratio\]::before{
content: "";
width: 1px;
margin-left: -1px;
float: left;
height: 0;
padding-top: calc((1 / (var(--wh-ratio))) * 100%);
}
.aspect-\[--wh-ratio\]::after{
content: "";
display: table;
clear: both;
}
}
@supports (aspect-ratio: auto){
.aspect-square{
aspect-ratio: 1 / 1;
}
}
@supports not (aspect-ratio: auto){
.aspect-square::before{
content: "";
width: 1px;
margin-left: -1px;
float: left;
height: 0;
padding-top: calc((1 / (1 / 1)) * 100%);
}
.aspect-square::after{
content: "";
display: table;
clear: both;
}
}
@supports (aspect-ratio: auto){
.aspect-video{
aspect-ratio: 16 / 9;
}
}
@supports not (aspect-ratio: auto){
.aspect-video::before{
content: "";
width: 1px;
margin-left: -1px;
float: left;
height: 0;
padding-top: calc((1 / (16 / 9)) * 100%);
}
.aspect-video::after{
content: "";
display: table;
clear: both;
}
}
.reverse-z-stack > *:nth-child(1){
z-index: 20;
}
.reverse-z-stack > *:nth-child(2){
z-index: 19;
}
.reverse-z-stack > *:nth-child(3){
z-index: 18;
}
.reverse-z-stack > *:nth-child(4){
z-index: 17;
}
.reverse-z-stack > *:nth-child(5){
z-index: 16;
}
.reverse-z-stack > *:nth-child(6){
z-index: 15;
}
.reverse-z-stack > *:nth-child(7){
z-index: 14;
}
.reverse-z-stack > *:nth-child(8){
z-index: 13;
}
.reverse-z-stack > *:nth-child(9){
z-index: 12;
}
.reverse-z-stack > *:nth-child(10){
z-index: 11;
}
.reverse-z-stack > *:nth-child(11){
z-index: 10;
}
.reverse-z-stack > *:nth-child(12){
z-index: 9;
}
.reverse-z-stack > *:nth-child(13){
z-index: 8;
}
.reverse-z-stack > *:nth-child(14){
z-index: 7;
}
.reverse-z-stack > *:nth-child(15){
z-index: 6;
}
.reverse-z-stack > *:nth-child(16){
z-index: 5;
}
.reverse-z-stack > *:nth-child(17){
z-index: 4;
}
.reverse-z-stack > *:nth-child(18){
z-index: 3;
}
.reverse-z-stack > *:nth-child(19){
z-index: 2;
}
.reverse-z-stack > *:nth-child(20){
z-index: 1;
}
.text-stroke-\[color\:--text-color\]{
--tw-text-stroke-color: var(--text-color);
}
.\!\[--bg\:transparent\]{
--bg: transparent !important;
}
.\!\[--bg\:var\(--bg-accent\)\]{
--bg: var(--bg-accent) !important;
}
.\[--content-alignment-default\:center\]{
--content-alignment-default: center;
}
.\[--content-alignment-default\:flex-end\]{
--content-alignment-default: flex-end;
}
.\[--content-alignment-default\:flex-start\]{
--content-alignment-default: flex-start;
}
.\[--gap\:--grid-lg\]{
--gap: var(--grid-lg);
}
.\[--gap\:--grid-md\]{
--gap: var(--grid-md);
}
.\[--gap\:--grid-sm\]{
--gap: var(--grid-sm);
}
.\[--gap\:--grid-xl\]{
--gap: var(--grid-xl);
}
.\[--gap\:--grid-xs\]{
--gap: var(--grid-xs);
}
.\[--gap\:0\]{
--gap: 0;
}
.\[--gap\:0px\]{
--gap: 0px;
}
.\[--gap\:theme\(\'spacing\.r12\'\)\]{
--gap: var(--space-12);
}
.\[--gap\:theme\(\'spacing\.r15\'\)\]{
--gap: var(--space-15);
}
.\[--gap\:theme\(\'spacing\.r2\'\)\]{
--gap: var(--space-2);
}
.\[--gap\:theme\(\'spacing\.r4\'\)\]{
--gap: var(--space-4);
}
.\[--gap\:theme\(\'spacing\.r8\'\)\]{
--gap: var(--space-8);
}
.\[--inset\:--grid-lg\]{
--inset: var(--grid-lg);
}
.\[--inset\:--grid-md\]{
--inset: var(--grid-md);
}
.\[--inset\:--grid-sm\]{
--inset: var(--grid-sm);
}
.\[--inset\:--grid-xl\]{
--inset: var(--grid-xl);
}
.\[--inset\:--grid-xs\]{
--inset: var(--grid-xs);
}
.\[--inset\:0px\]{
--inset: 0px;
}
.\[--padding\:--grid-lg\]{
--padding: var(--grid-lg);
}
.\[--padding\:--grid-md\]{
--padding: var(--grid-md);
}
.\[--padding\:--grid-sm\]{
--padding: var(--grid-sm);
}
.\[--padding\:--grid-xl\]{
--padding: var(--grid-xl);
}
.\[--padding\:--grid-xs\]{
--padding: var(--grid-xs);
}
.\[--padding\:0px\]{
--padding: 0px;
}
.\[--slide-transition-duration\:800ms\]{
--slide-transition-duration: 800ms;
}
.\!\[--text-dark\:\#000\]{
--text-dark: #000 !important;
}
.\!\[--text-dark\:\#fff\]{
--text-dark: #fff !important;
}
.\!\[--text-dark\:var\(--primary\)\]{
--text-dark: var(--primary) !important;
}
.\!\[--text-dark\:var\(--secondary\)\]{
--text-dark: var(--secondary) !important;
}
.\!\[--text-light\:\#000\]{
--text-light: #000 !important;
}
.\!\[--text-light\:\#fff\]{
--text-light: #fff !important;
}
.\!\[--text-light\:var\(--primary\)\]{
--text-light: var(--primary) !important;
}
.\!\[--text-light\:var\(--secondary\)\]{
--text-light: var(--secondary) !important;
}
.\!\[--text\:\#000\]{
--text: #000 !important;
}
.\!\[--text\:\#fff\]{
--text: #fff !important;
}
.\!\[--text\:var\(--primary\)\]{
--text: var(--primary) !important;
}
.\!\[--text\:var\(--secondary\)\]{
--text: var(--secondary) !important;
}
.\[writing-mode\:vertical-lr\]{
writing-mode: vertical-lr;
}
html {
line-height: var(--leading-norma);
font-family: var(--FONT-STACK-BODY);
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: var(--muted);
}
input::-moz-placeholder,
textarea::-moz-placeholder,
input::placeholder,
textarea::placeholder {
color: var(--muted);
}
[x-cloak] {
display: none !important;
}
/* ================ COMMON ================ */
/* ============================================================================
#Normalize
============================================================================== */
*,
input,
:before,
:after {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
}
body {
min-height: var(--full-screen);
display: flex;
flex-direction: column;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
mark {
color: var(--text);
background: none;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
height: auto;
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
/* ============================================================================
Grid
- Based on CSS Wizardry grid
============================================================================== */
.float-grid, .grid--full {
list-style: none;
margin: 0;
padding: 0;
margin-left: calc(var(--gutter-offset) / 2);
margin-right: calc(var(--gutter-offset) / 2);
}
.float-grid:after, .grid--full:after {
content: "";
display: table;
clear: both;
}
.grid__item {
float: left;
padding-left: calc(var(--gutter) / 2);
padding-right: calc(var(--gutter) / 2);
width: 100%;
}
.grid__item[class*=push-] {
position: relative;
}
[dir=rtl] .grid__item {
float: right;
}
/* ============================================================================
Reversed grids allow you to structure your source in the opposite
order to how your rendered layout will appear.
============================================================================== */
.grid--rev {
direction: rtl;
text-align: left;
}
.grid--rev > .grid__item {
direction: ltr;
text-align: left;
float: right;
}
/* Gutterless grids have all the properties of regular grids, minus any spacing. */
.grid--full {
margin-left: 0;
margin-right: 0;
}
.grid--full > .grid__item {
padding-left: 0;
padding-right: 0;
}
.grid--full > .grid__item:only-child {
width: 100%;
}
@media only screen and (min-width: 768px) {
.grid--articles:not([data-grid]),
.grid--articles[data-grid]:not([data-grid-no-gutters]):not([data-grid]) {
margin-top: -63px;
float: left;
}
.grid--articles:not([data-grid]) .article__item,
.grid--articles[data-grid]:not([data-grid-no-gutters]):not([data-grid]) .article__item {
margin-top: 63px;
}
}
.grid--articles .article__item,
.grid--articles[data-grid]:not([data-grid-no-gutters]) .article__item {
margin-bottom: 0;
}
/* ============================================================================
Grid Columns
- Create width classes, prepended by the breakpoint name.
============================================================================== */
/** Whole */
.one-whole {
width: 100%;
}
/* Halves */
.one-half {
width: 50%;
}
/* Thirds */
.one-third {
width: 33.3333333333%;
}
.two-thirds {
width: 66.6666666667%;
}
/* Quarters */
.one-quarter {
width: 25%;
}
.two-quarters {
width: 50%;
}
.three-quarters {
width: 75%;
}
/* Fifths */
.one-fifth {
width: 20%;
}
.two-fifths {
width: 40%;
}
.three-fifths {
width: 60%;
}
.four-fifths {
width: 80%;
}
/* Sixths */
.one-sixth {
width: 16.6666666667%;
}
.two-sixths {
width: 33.3333333333%;
}
.three-sixths {
width: 50%;
}
.four-sixths {
width: 66.6666666667%;
}
.five-sixths {
width: 83.3333333333%;
}
/* Eighths */
.one-eighth {
width: 12.5%;
}
.two-eighths {
width: 25%;
}
.three-eighths {
width: 37.5%;
}
.four-eighths {
width: 50%;
}
.five-eighths {
width: 62.5%;
}
.six-eighths {
width: 75%;
}
.seven-eighths {
width: 87.5%;
}
/* Tenths */
.one-tenth {
width: 10%;
}
.two-tenths {
width: 20%;
}
.three-tenths {
width: 30%;
}
.four-tenths {
width: 40%;
}
.five-tenths {
width: 50%;
}
.six-tenths {
width: 60%;
}
.seven-tenths {
width: 70%;
}
.eight-tenths {
width: 80%;
}
.nine-tenths {
width: 90%;
}
/* Twelfths */
.one-twelfth {
width: 8.3333333333%;
}
.two-twelfths {
width: 8.3333333333%;
}
.three-twelfths {
width: 25%;
}
.four-twelfths {
width: 33.3333333333%;
}
.five-twelfths {
width: 41.6666666667%;
}
.six-twelfths {
width: 50%;
}
.seven-twelfths {
width: 58.3333333333%;
}
.eight-twelfths {
width: 66.6666666667%;
}
.nine-twelfths {
width: 75%;
}
.ten-twelfths {
width: 83.3333333333%;
}
.eleven-twelfths {
width: 91.6666666667%;
}
.show {
display: block !important;
}
.hide {
display: none !important;
}
@media only screen and (max-width: 479px) {
/** Whole */
.mobile--one-whole {
width: 100%;
}
/* Halves */
.mobile--one-half {
width: 50%;
}
/* Thirds */
.mobile--one-third {
width: 33.3333333333%;
}
.mobile--two-thirds {
width: 66.6666666667%;
}
/* Quarters */
.mobile--one-quarter {
width: 25%;
}
.mobile--two-quarters {
width: 50%;
}
.mobile--three-quarters {
width: 75%;
}
/* Fifths */
.mobile--one-fifth {
width: 20%;
}
.mobile--two-fifths {
width: 40%;
}
.mobile--three-fifths {
width: 60%;
}
.mobile--four-fifths {
width: 80%;
}
/* Sixths */
.mobile--one-sixth {
width: 16.6666666667%;
}
.mobile--two-sixths {
width: 33.3333333333%;
}
.mobile--three-sixths {
width: 50%;
}
.mobile--four-sixths {
width: 66.6666666667%;
}
.mobile--five-sixths {
width: 83.3333333333%;
}
/* Eighths */
.mobile--one-eighth {
width: 12.5%;
}
.mobile--two-eighths {
width: 25%;
}
.mobile--three-eighths {
width: 37.5%;
}
.mobile--four-eighths {
width: 50%;
}
.mobile--five-eighths {
width: 62.5%;
}
.mobile--six-eighths {
width: 75%;
}
.mobile--seven-eighths {
width: 87.5%;
}
/* Tenths */
.mobile--one-tenth {
width: 10%;
}
.mobile--two-tenths {
width: 20%;
}
.mobile--three-tenths {
width: 30%;
}
.mobile--four-tenths {
width: 40%;
}
.mobile--five-tenths {
width: 50%;
}
.mobile--six-tenths {
width: 60%;
}
.mobile--seven-tenths {
width: 70%;
}
.mobile--eight-tenths {
width: 80%;
}
.mobile--nine-tenths {
width: 90%;
}
/* Twelfths */
.mobile--one-twelfth {
width: 8.3333333333%;
}
.mobile--two-twelfths {
width: 8.3333333333%;
}
.mobile--three-twelfths {
width: 25%;
}
.mobile--four-twelfths {
width: 33.3333333333%;
}
.mobile--five-twelfths {
width: 41.6666666667%;
}
.mobile--six-twelfths {
width: 50%;
}
.mobile--seven-twelfths {
width: 58.3333333333%;
}
.mobile--eight-twelfths {
width: 66.6666666667%;
}
.mobile--nine-twelfths {
width: 75%;
}
.mobile--ten-twelfths {
width: 83.3333333333%;
}
.mobile--eleven-twelfths {
width: 91.6666666667%;
}
.grid--uniform .mobile--one-half:nth-child(2n+1),
.grid--uniform .mobile--one-third:nth-child(3n+1),
.grid--uniform .mobile--one-quarter:nth-child(4n+1),
.grid--uniform .mobile--one-fifth:nth-child(5n+1),
.grid--uniform .mobile--one-sixth:nth-child(6n+1),
.grid--uniform .mobile--two-sixths:nth-child(3n+1),
.grid--uniform .mobile--three-sixths:nth-child(2n+1),
.grid--uniform .mobile--one-eighth:nth-child(8n+1),
.grid--uniform .mobile--two-eighths:nth-child(4n+1),
.grid--uniform .mobile--four-eighths:nth-child(2n+1),
.grid--uniform .mobile--five-tenths:nth-child(2n+1),
.grid--uniform .mobile--one-twelfth:nth-child(12n+1),
.grid--uniform .mobile--two-twelfths:nth-child(6n+1),
.grid--uniform .mobile--three-twelfths:nth-child(4n+1),
.grid--uniform .mobile--four-twelfths:nth-child(3n+1),
.grid--uniform .mobile--six-twelfths:nth-child(2n+1),
.gallery .mobile--one-half:nth-child(2n+1),
.gallery .mobile--one-third:nth-child(3n+1),
.gallery .mobile--one-quarter:nth-child(4n+1),
.gallery .mobile--one-fifth:nth-child(5n+1),
.gallery .mobile--one-sixth:nth-child(6n+1),
.gallery .mobile--two-sixths:nth-child(3n+1),
.gallery .mobile--three-sixths:nth-child(2n+1),
.gallery .mobile--one-eighth:nth-child(8n+1),
.gallery .mobile--two-eighths:nth-child(4n+1),
.gallery .mobile--four-eighths:nth-child(2n+1),
.gallery .mobile--five-tenths:nth-child(2n+1),
.gallery .mobile--one-twelfth:nth-child(12n+1),
.gallery .mobile--two-twelfths:nth-child(6n+1),
.gallery .mobile--three-twelfths:nth-child(4n+1),
.gallery .mobile--four-twelfths:nth-child(3n+1),
.gallery .mobile--six-twelfths:nth-child(2n+1) {
clear: both;
}
.mobile--show {
display: block !important;
}
.mobile--hide {
display: none !important;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
/** Whole */
.small--one-whole {
width: 100%;
}
/* Halves */
.small--one-half {
width: 50%;
}
/* Thirds */
.small--one-third {
width: 33.3333333333%;
}
.small--two-thirds {
width: 66.6666666667%;
}
/* Quarters */
.small--one-quarter {
width: 25%;
}
.small--two-quarters {
width: 50%;
}
.small--three-quarters {
width: 75%;
}
/* Fifths */
.small--one-fifth {
width: 20%;
}
.small--two-fifths {
width: 40%;
}
.small--three-fifths {
width: 60%;
}
.small--four-fifths {
width: 80%;
}
/* Sixths */
.small--one-sixth {
width: 16.6666666667%;
}
.small--two-sixths {
width: 33.3333333333%;
}
.small--three-sixths {
width: 50%;
}
.small--four-sixths {
width: 66.6666666667%;
}
.small--five-sixths {
width: 83.3333333333%;
}
/* Eighths */
.small--one-eighth {
width: 12.5%;
}
.small--two-eighths {
width: 25%;
}
.small--three-eighths {
width: 37.5%;
}
.small--four-eighths {
width: 50%;
}
.small--five-eighths {
width: 62.5%;
}
.small--six-eighths {
width: 75%;
}
.small--seven-eighths {
width: 87.5%;
}
/* Tenths */
.small--one-tenth {
width: 10%;
}
.small--two-tenths {
width: 20%;
}
.small--three-tenths {
width: 30%;
}
.small--four-tenths {
width: 40%;
}
.small--five-tenths {
width: 50%;
}
.small--six-tenths {
width: 60%;
}
.small--seven-tenths {
width: 70%;
}
.small--eight-tenths {
width: 80%;
}
.small--nine-tenths {
width: 90%;
}
/* Twelfths */
.small--one-twelfth {
width: 8.3333333333%;
}
.small--two-twelfths {
width: 8.3333333333%;
}
.small--three-twelfths {
width: 25%;
}
.small--four-twelfths {
width: 33.3333333333%;
}
.small--five-twelfths {
width: 41.6666666667%;
}
.small--six-twelfths {
width: 50%;
}
.small--seven-twelfths {
width: 58.3333333333%;
}
.small--eight-twelfths {
width: 66.6666666667%;
}
.small--nine-twelfths {
width: 75%;
}
.small--ten-twelfths {
width: 83.3333333333%;
}
.small--eleven-twelfths {
width: 91.6666666667%;
}
.grid--uniform .small--one-half:nth-child(2n+1),
.grid--uniform .small--one-third:nth-child(3n+1),
.grid--uniform .small--one-quarter:nth-child(4n+1),
.grid--uniform .small--one-fifth:nth-child(5n+1),
.grid--uniform .small--one-sixth:nth-child(6n+1),
.grid--uniform .small--two-sixths:nth-child(3n+1),
.grid--uniform .small--three-sixths:nth-child(2n+1),
.grid--uniform .small--one-eighth:nth-child(8n+1),
.grid--uniform .small--two-eighths:nth-child(4n+1),
.grid--uniform .small--four-eighths:nth-child(2n+1),
.grid--uniform .small--five-tenths:nth-child(2n+1),
.grid--uniform .small--one-twelfth:nth-child(12n+1),
.grid--uniform .small--two-twelfths:nth-child(6n+1),
.grid--uniform .small--three-twelfths:nth-child(4n+1),
.grid--uniform .small--four-twelfths:nth-child(3n+1),
.grid--uniform .small--six-twelfths:nth-child(2n+1),
.gallery .small--one-half:nth-child(2n+1),
.gallery .small--one-third:nth-child(3n+1),
.gallery .small--one-quarter:nth-child(4n+1),
.gallery .small--one-fifth:nth-child(5n+1),
.gallery .small--one-sixth:nth-child(6n+1),
.gallery .small--two-sixths:nth-child(3n+1),
.gallery .small--three-sixths:nth-child(2n+1),
.gallery .small--one-eighth:nth-child(8n+1),
.gallery .small--two-eighths:nth-child(4n+1),
.gallery .small--four-eighths:nth-child(2n+1),
.gallery .small--five-tenths:nth-child(2n+1),
.gallery .small--one-twelfth:nth-child(12n+1),
.gallery .small--two-twelfths:nth-child(6n+1),
.gallery .small--three-twelfths:nth-child(4n+1),
.gallery .small--four-twelfths:nth-child(3n+1),
.gallery .small--six-twelfths:nth-child(2n+1) {
clear: both;
}
.small--show {
display: block !important;
}
.small--hide {
display: none !important;
}
}
@media only screen and (min-width: 480px) {
/** Whole */
.small-up--one-whole {
width: 100%;
}
/* Halves */
.small-up--one-half {
width: 50%;
}
/* Thirds */
.small-up--one-third {
width: 33.3333333333%;
}
.small-up--two-thirds {
width: 66.6666666667%;
}
/* Quarters */
.small-up--one-quarter {
width: 25%;
}
.small-up--two-quarters {
width: 50%;
}
.small-up--three-quarters {
width: 75%;
}
/* Fifths */
.small-up--one-fifth {
width: 20%;
}
.small-up--two-fifths {
width: 40%;
}
.small-up--three-fifths {
width: 60%;
}
.small-up--four-fifths {
width: 80%;
}
/* Sixths */
.small-up--one-sixth {
width: 16.6666666667%;
}
.small-up--two-sixths {
width: 33.3333333333%;
}
.small-up--three-sixths {
width: 50%;
}
.small-up--four-sixths {
width: 66.6666666667%;
}
.small-up--five-sixths {
width: 83.3333333333%;
}
/* Eighths */
.small-up--one-eighth {
width: 12.5%;
}
.small-up--two-eighths {
width: 25%;
}
.small-up--three-eighths {
width: 37.5%;
}
.small-up--four-eighths {
width: 50%;
}
.small-up--five-eighths {
width: 62.5%;
}
.small-up--six-eighths {
width: 75%;
}
.small-up--seven-eighths {
width: 87.5%;
}
/* Tenths */
.small-up--one-tenth {
width: 10%;
}
.small-up--two-tenths {
width: 20%;
}
.small-up--three-tenths {
width: 30%;
}
.small-up--four-tenths {
width: 40%;
}
.small-up--five-tenths {
width: 50%;
}
.small-up--six-tenths {
width: 60%;
}
.small-up--seven-tenths {
width: 70%;
}
.small-up--eight-tenths {
width: 80%;
}
.small-up--nine-tenths {
width: 90%;
}
/* Twelfths */
.small-up--one-twelfth {
width: 8.3333333333%;
}
.small-up--two-twelfths {
width: 8.3333333333%;
}
.small-up--three-twelfths {
width: 25%;
}
.small-up--four-twelfths {
width: 33.3333333333%;
}
.small-up--five-twelfths {
width: 41.6666666667%;
}
.small-up--six-twelfths {
width: 50%;
}
.small-up--seven-twelfths {
width: 58.3333333333%;
}
.small-up--eight-twelfths {
width: 66.6666666667%;
}
.small-up--nine-twelfths {
width: 75%;
}
.small-up--ten-twelfths {
width: 83.3333333333%;
}
.small-up--eleven-twelfths {
width: 91.6666666667%;
}
.grid--uniform .small-up--one-half:nth-child(2n+1),
.grid--uniform .small-up--one-third:nth-child(3n+1),
.grid--uniform .small-up--one-quarter:nth-child(4n+1),
.grid--uniform .small-up--one-fifth:nth-child(5n+1),
.grid--uniform .small-up--one-sixth:nth-child(6n+1),
.grid--uniform .small-up--two-sixths:nth-child(3n+1),
.grid--uniform .small-up--three-sixths:nth-child(2n+1),
.grid--uniform .small-up--one-eighth:nth-child(8n+1),
.grid--uniform .small-up--two-eighths:nth-child(4n+1),
.grid--uniform .small-up--four-eighths:nth-child(2n+1),
.grid--uniform .small-up--five-tenths:nth-child(2n+1),
.grid--uniform .small-up--one-twelfth:nth-child(12n+1),
.grid--uniform .small-up--two-twelfths:nth-child(6n+1),
.grid--uniform .small-up--three-twelfths:nth-child(4n+1),
.grid--uniform .small-up--four-twelfths:nth-child(3n+1),
.grid--uniform .small-up--six-twelfths:nth-child(2n+1),
.gallery .small-up--one-half:nth-child(2n+1),
.gallery .small-up--one-third:nth-child(3n+1),
.gallery .small-up--one-quarter:nth-child(4n+1),
.gallery .small-up--one-fifth:nth-child(5n+1),
.gallery .small-up--one-sixth:nth-child(6n+1),
.gallery .small-up--two-sixths:nth-child(3n+1),
.gallery .small-up--three-sixths:nth-child(2n+1),
.gallery .small-up--one-eighth:nth-child(8n+1),
.gallery .small-up--two-eighths:nth-child(4n+1),
.gallery .small-up--four-eighths:nth-child(2n+1),
.gallery .small-up--five-tenths:nth-child(2n+1),
.gallery .small-up--one-twelfth:nth-child(12n+1),
.gallery .small-up--two-twelfths:nth-child(6n+1),
.gallery .small-up--three-twelfths:nth-child(4n+1),
.gallery .small-up--four-twelfths:nth-child(3n+1),
.gallery .small-up--six-twelfths:nth-child(2n+1) {
clear: both;
}
.small-up--show {
display: block !important;
}
.small-up--hide {
display: none !important;
}
}
@media only screen and (max-width: 767px) {
/** Whole */
.small-down--one-whole {
width: 100%;
}
/* Halves */
.small-down--one-half {
width: 50%;
}
/* Thirds */
.small-down--one-third {
width: 33.3333333333%;
}
.small-down--two-thirds {
width: 66.6666666667%;
}
/* Quarters */
.small-down--one-quarter {
width: 25%;
}
.small-down--two-quarters {
width: 50%;
}
.small-down--three-quarters {
width: 75%;
}
/* Fifths */
.small-down--one-fifth {
width: 20%;
}
.small-down--two-fifths {
width: 40%;
}
.small-down--three-fifths {
width: 60%;
}
.small-down--four-fifths {
width: 80%;
}
/* Sixths */
.small-down--one-sixth {
width: 16.6666666667%;
}
.small-down--two-sixths {
width: 33.3333333333%;
}
.small-down--three-sixths {
width: 50%;
}
.small-down--four-sixths {
width: 66.6666666667%;
}
.small-down--five-sixths {
width: 83.3333333333%;
}
/* Eighths */
.small-down--one-eighth {
width: 12.5%;
}
.small-down--two-eighths {
width: 25%;
}
.small-down--three-eighths {
width: 37.5%;
}
.small-down--four-eighths {
width: 50%;
}
.small-down--five-eighths {
width: 62.5%;
}
.small-down--six-eighths {
width: 75%;
}
.small-down--seven-eighths {
width: 87.5%;
}
/* Tenths */
.small-down--one-tenth {
width: 10%;
}
.small-down--two-tenths {
width: 20%;
}
.small-down--three-tenths {
width: 30%;
}
.small-down--four-tenths {
width: 40%;
}
.small-down--five-tenths {
width: 50%;
}
.small-down--six-tenths {
width: 60%;
}
.small-down--seven-tenths {
width: 70%;
}
.small-down--eight-tenths {
width: 80%;
}
.small-down--nine-tenths {
width: 90%;
}
/* Twelfths */
.small-down--one-twelfth {
width: 8.3333333333%;
}
.small-down--two-twelfths {
width: 8.3333333333%;
}
.small-down--three-twelfths {
width: 25%;
}
.small-down--four-twelfths {
width: 33.3333333333%;
}
.small-down--five-twelfths {
width: 41.6666666667%;
}
.small-down--six-twelfths {
width: 50%;
}
.small-down--seven-twelfths {
width: 58.3333333333%;
}
.small-down--eight-twelfths {
width: 66.6666666667%;
}
.small-down--nine-twelfths {
width: 75%;
}
.small-down--ten-twelfths {
width: 83.3333333333%;
}
.small-down--eleven-twelfths {
width: 91.6666666667%;
}
.grid--uniform .small-down--one-half:nth-child(2n+1),
.grid--uniform .small-down--one-third:nth-child(3n+1),
.grid--uniform .small-down--one-quarter:nth-child(4n+1),
.grid--uniform .small-down--one-fifth:nth-child(5n+1),
.grid--uniform .small-down--one-sixth:nth-child(6n+1),
.grid--uniform .small-down--two-sixths:nth-child(3n+1),
.grid--uniform .small-down--three-sixths:nth-child(2n+1),
.grid--uniform .small-down--one-eighth:nth-child(8n+1),
.grid--uniform .small-down--two-eighths:nth-child(4n+1),
.grid--uniform .small-down--four-eighths:nth-child(2n+1),
.grid--uniform .small-down--five-tenths:nth-child(2n+1),
.grid--uniform .small-down--one-twelfth:nth-child(12n+1),
.grid--uniform .small-down--two-twelfths:nth-child(6n+1),
.grid--uniform .small-down--three-twelfths:nth-child(4n+1),
.grid--uniform .small-down--four-twelfths:nth-child(3n+1),
.grid--uniform .small-down--six-twelfths:nth-child(2n+1),
.gallery .small-down--one-half:nth-child(2n+1),
.gallery .small-down--one-third:nth-child(3n+1),
.gallery .small-down--one-quarter:nth-child(4n+1),
.gallery .small-down--one-fifth:nth-child(5n+1),
.gallery .small-down--one-sixth:nth-child(6n+1),
.gallery .small-down--two-sixths:nth-child(3n+1),
.gallery .small-down--three-sixths:nth-child(2n+1),
.gallery .small-down--one-eighth:nth-child(8n+1),
.gallery .small-down--two-eighths:nth-child(4n+1),
.gallery .small-down--four-eighths:nth-child(2n+1),
.gallery .small-down--five-tenths:nth-child(2n+1),
.gallery .small-down--one-twelfth:nth-child(12n+1),
.gallery .small-down--two-twelfths:nth-child(6n+1),
.gallery .small-down--three-twelfths:nth-child(4n+1),
.gallery .small-down--four-twelfths:nth-child(3n+1),
.gallery .small-down--six-twelfths:nth-child(2n+1) {
clear: both;
}
.small-down--show {
display: block !important;
}
.small-down--hide {
display: none !important;
}
}
@media only screen and (min-width: 480px) and (max-width: 1099px) {
/** Whole */
.small-medium--one-whole {
width: 100%;
}
/* Halves */
.small-medium--one-half {
width: 50%;
}
/* Thirds */
.small-medium--one-third {
width: 33.3333333333%;
}
.small-medium--two-thirds {
width: 66.6666666667%;
}
/* Quarters */
.small-medium--one-quarter {
width: 25%;
}
.small-medium--two-quarters {
width: 50%;
}
.small-medium--three-quarters {
width: 75%;
}
/* Fifths */
.small-medium--one-fifth {
width: 20%;
}
.small-medium--two-fifths {
width: 40%;
}
.small-medium--three-fifths {
width: 60%;
}
.small-medium--four-fifths {
width: 80%;
}
/* Sixths */
.small-medium--one-sixth {
width: 16.6666666667%;
}
.small-medium--two-sixths {
width: 33.3333333333%;
}
.small-medium--three-sixths {
width: 50%;
}
.small-medium--four-sixths {
width: 66.6666666667%;
}
.small-medium--five-sixths {
width: 83.3333333333%;
}
/* Eighths */
.small-medium--one-eighth {
width: 12.5%;
}
.small-medium--two-eighths {
width: 25%;
}
.small-medium--three-eighths {
width: 37.5%;
}
.small-medium--four-eighths {
width: 50%;
}
.small-medium--five-eighths {
width: 62.5%;
}
.small-medium--six-eighths {
width: 75%;
}
.small-medium--seven-eighths {
width: 87.5%;
}
/* Tenths */
.small-medium--one-tenth {
width: 10%;
}
.small-medium--two-tenths {
width: 20%;
}
.small-medium--three-tenths {
width: 30%;
}
.small-medium--four-tenths {
width: 40%;
}
.small-medium--five-tenths {
width: 50%;
}
.small-medium--six-tenths {
width: 60%;
}
.small-medium--seven-tenths {
width: 70%;
}
.small-medium--eight-tenths {
width: 80%;
}
.small-medium--nine-tenths {
width: 90%;
}
/* Twelfths */
.small-medium--one-twelfth {
width: 8.3333333333%;
}
.small-medium--two-twelfths {
width: 8.3333333333%;
}
.small-medium--three-twelfths {
width: 25%;
}
.small-medium--four-twelfths {
width: 33.3333333333%;
}
.small-medium--five-twelfths {
width: 41.6666666667%;
}
.small-medium--six-twelfths {
width: 50%;
}
.small-medium--seven-twelfths {
width: 58.3333333333%;
}
.small-medium--eight-twelfths {
width: 66.6666666667%;
}
.small-medium--nine-twelfths {
width: 75%;
}
.small-medium--ten-twelfths {
width: 83.3333333333%;
}
.small-medium--eleven-twelfths {
width: 91.6666666667%;
}
.grid--uniform .small-medium--one-half:nth-child(2n+1),
.grid--uniform .small-medium--one-third:nth-child(3n+1),
.grid--uniform .small-medium--one-quarter:nth-child(4n+1),
.grid--uniform .small-medium--one-fifth:nth-child(5n+1),
.grid--uniform .small-medium--one-sixth:nth-child(6n+1),
.grid--uniform .small-medium--two-sixths:nth-child(3n+1),
.grid--uniform .small-medium--three-sixths:nth-child(2n+1),
.grid--uniform .small-medium--one-eighth:nth-child(8n+1),
.grid--uniform .small-medium--two-eighths:nth-child(4n+1),
.grid--uniform .small-medium--four-eighths:nth-child(2n+1),
.grid--uniform .small-medium--five-tenths:nth-child(2n+1),
.grid--uniform .small-medium--one-twelfth:nth-child(12n+1),
.grid--uniform .small-medium--two-twelfths:nth-child(6n+1),
.grid--uniform .small-medium--three-twelfths:nth-child(4n+1),
.grid--uniform .small-medium--four-twelfths:nth-child(3n+1),
.grid--uniform .small-medium--six-twelfths:nth-child(2n+1),
.gallery .small-medium--one-half:nth-child(2n+1),
.gallery .small-medium--one-third:nth-child(3n+1),
.gallery .small-medium--one-quarter:nth-child(4n+1),
.gallery .small-medium--one-fifth:nth-child(5n+1),
.gallery .small-medium--one-sixth:nth-child(6n+1),
.gallery .small-medium--two-sixths:nth-child(3n+1),
.gallery .small-medium--three-sixths:nth-child(2n+1),
.gallery .small-medium--one-eighth:nth-child(8n+1),
.gallery .small-medium--two-eighths:nth-child(4n+1),
.gallery .small-medium--four-eighths:nth-child(2n+1),
.gallery .small-medium--five-tenths:nth-child(2n+1),
.gallery .small-medium--one-twelfth:nth-child(12n+1),
.gallery .small-medium--two-twelfths:nth-child(6n+1),
.gallery .small-medium--three-twelfths:nth-child(4n+1),
.gallery .small-medium--four-twelfths:nth-child(3n+1),
.gallery .small-medium--six-twelfths:nth-child(2n+1) {
clear: both;
}
.small-medium--show {
display: block !important;
}
.small-medium--hide {
display: none !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 1099px) {
/** Whole */
.medium--one-whole {
width: 100%;
}
/* Halves */
.medium--one-half {
width: 50%;
}
/* Thirds */
.medium--one-third {
width: 33.3333333333%;
}
.medium--two-thirds {
width: 66.6666666667%;
}
/* Quarters */
.medium--one-quarter {
width: 25%;
}
.medium--two-quarters {
width: 50%;
}
.medium--three-quarters {
width: 75%;
}
/* Fifths */
.medium--one-fifth {
width: 20%;
}
.medium--two-fifths {
width: 40%;
}
.medium--three-fifths {
width: 60%;
}
.medium--four-fifths {
width: 80%;
}
/* Sixths */
.medium--one-sixth {
width: 16.6666666667%;
}
.medium--two-sixths {
width: 33.3333333333%;
}
.medium--three-sixths {
width: 50%;
}
.medium--four-sixths {
width: 66.6666666667%;
}
.medium--five-sixths {
width: 83.3333333333%;
}
/* Eighths */
.medium--one-eighth {
width: 12.5%;
}
.medium--two-eighths {
width: 25%;
}
.medium--three-eighths {
width: 37.5%;
}
.medium--four-eighths {
width: 50%;
}
.medium--five-eighths {
width: 62.5%;
}
.medium--six-eighths {
width: 75%;
}
.medium--seven-eighths {
width: 87.5%;
}
/* Tenths */
.medium--one-tenth {
width: 10%;
}
.medium--two-tenths {
width: 20%;
}
.medium--three-tenths {
width: 30%;
}
.medium--four-tenths {
width: 40%;
}
.medium--five-tenths {
width: 50%;
}
.medium--six-tenths {
width: 60%;
}
.medium--seven-tenths {
width: 70%;
}
.medium--eight-tenths {
width: 80%;
}
.medium--nine-tenths {
width: 90%;
}
/* Twelfths */
.medium--one-twelfth {
width: 8.3333333333%;
}
.medium--two-twelfths {
width: 8.3333333333%;
}
.medium--three-twelfths {
width: 25%;
}
.medium--four-twelfths {
width: 33.3333333333%;
}
.medium--five-twelfths {
width: 41.6666666667%;
}
.medium--six-twelfths {
width: 50%;
}
.medium--seven-twelfths {
width: 58.3333333333%;
}
.medium--eight-twelfths {
width: 66.6666666667%;
}
.medium--nine-twelfths {
width: 75%;
}
.medium--ten-twelfths {
width: 83.3333333333%;
}
.medium--eleven-twelfths {
width: 91.6666666667%;
}
.grid--uniform .medium--one-half:nth-child(2n+1),
.grid--uniform .medium--one-third:nth-child(3n+1),
.grid--uniform .medium--one-quarter:nth-child(4n+1),
.grid--uniform .medium--one-fifth:nth-child(5n+1),
.grid--uniform .medium--one-sixth:nth-child(6n+1),
.grid--uniform .medium--two-sixths:nth-child(3n+1),
.grid--uniform .medium--three-sixths:nth-child(2n+1),
.grid--uniform .medium--one-eighth:nth-child(8n+1),
.grid--uniform .medium--two-eighths:nth-child(4n+1),
.grid--uniform .medium--four-eighths:nth-child(2n+1),
.grid--uniform .medium--five-tenths:nth-child(2n+1),
.grid--uniform .medium--one-twelfth:nth-child(12n+1),
.grid--uniform .medium--two-twelfths:nth-child(6n+1),
.grid--uniform .medium--three-twelfths:nth-child(4n+1),
.grid--uniform .medium--four-twelfths:nth-child(3n+1),
.grid--uniform .medium--six-twelfths:nth-child(2n+1),
.gallery .medium--one-half:nth-child(2n+1),
.gallery .medium--one-third:nth-child(3n+1),
.gallery .medium--one-quarter:nth-child(4n+1),
.gallery .medium--one-fifth:nth-child(5n+1),
.gallery .medium--one-sixth:nth-child(6n+1),
.gallery .medium--two-sixths:nth-child(3n+1),
.gallery .medium--three-sixths:nth-child(2n+1),
.gallery .medium--one-eighth:nth-child(8n+1),
.gallery .medium--two-eighths:nth-child(4n+1),
.gallery .medium--four-eighths:nth-child(2n+1),
.gallery .medium--five-tenths:nth-child(2n+1),
.gallery .medium--one-twelfth:nth-child(12n+1),
.gallery .medium--two-twelfths:nth-child(6n+1),
.gallery .medium--three-twelfths:nth-child(4n+1),
.gallery .medium--four-twelfths:nth-child(3n+1),
.gallery .medium--six-twelfths:nth-child(2n+1) {
clear: both;
}
.medium--show {
display: block !important;
}
.medium--hide {
display: none !important;
}
}
@media only screen and (min-width: 768px) {
/** Whole */
.medium-up--one-whole {
width: 100%;
}
/* Halves */
.medium-up--one-half {
width: 50%;
}
/* Thirds */
.medium-up--one-third {
width: 33.3333333333%;
}
.medium-up--two-thirds {
width: 66.6666666667%;
}
/* Quarters */
.medium-up--one-quarter {
width: 25%;
}
.medium-up--two-quarters {
width: 50%;
}
.medium-up--three-quarters {
width: 75%;
}
/* Fifths */
.medium-up--one-fifth {
width: 20%;
}
.medium-up--two-fifths {
width: 40%;
}
.medium-up--three-fifths {
width: 60%;
}
.medium-up--four-fifths {
width: 80%;
}
/* Sixths */
.medium-up--one-sixth {
width: 16.6666666667%;
}
.medium-up--two-sixths {
width: 33.3333333333%;
}
.medium-up--three-sixths {
width: 50%;
}
.medium-up--four-sixths {
width: 66.6666666667%;
}
.medium-up--five-sixths {
width: 83.3333333333%;
}
/* Eighths */
.medium-up--one-eighth {
width: 12.5%;
}
.medium-up--two-eighths {
width: 25%;
}
.medium-up--three-eighths {
width: 37.5%;
}
.medium-up--four-eighths {
width: 50%;
}
.medium-up--five-eighths {
width: 62.5%;
}
.medium-up--six-eighths {
width: 75%;
}
.medium-up--seven-eighths {
width: 87.5%;
}
/* Tenths */
.medium-up--one-tenth {
width: 10%;
}
.medium-up--two-tenths {
width: 20%;
}
.medium-up--three-tenths {
width: 30%;
}
.medium-up--four-tenths {
width: 40%;
}
.medium-up--five-tenths {
width: 50%;
}
.medium-up--six-tenths {
width: 60%;
}
.medium-up--seven-tenths {
width: 70%;
}
.medium-up--eight-tenths {
width: 80%;
}
.medium-up--nine-tenths {
width: 90%;
}
/* Twelfths */
.medium-up--one-twelfth {
width: 8.3333333333%;
}
.medium-up--two-twelfths {
width: 8.3333333333%;
}
.medium-up--three-twelfths {
width: 25%;
}
.medium-up--four-twelfths {
width: 33.3333333333%;
}
.medium-up--five-twelfths {
width: 41.6666666667%;
}
.medium-up--six-twelfths {
width: 50%;
}
.medium-up--seven-twelfths {
width: 58.3333333333%;
}
.medium-up--eight-twelfths {
width: 66.6666666667%;
}
.medium-up--nine-twelfths {
width: 75%;
}
.medium-up--ten-twelfths {
width: 83.3333333333%;
}
.medium-up--eleven-twelfths {
width: 91.6666666667%;
}
.grid--uniform .medium-up--one-half:nth-child(2n+1),
.grid--uniform .medium-up--one-third:nth-child(3n+1),
.grid--uniform .medium-up--one-quarter:nth-child(4n+1),
.grid--uniform .medium-up--one-fifth:nth-child(5n+1),
.grid--uniform .medium-up--one-sixth:nth-child(6n+1),
.grid--uniform .medium-up--two-sixths:nth-child(3n+1),
.grid--uniform .medium-up--three-sixths:nth-child(2n+1),
.grid--uniform .medium-up--one-eighth:nth-child(8n+1),
.grid--uniform .medium-up--two-eighths:nth-child(4n+1),
.grid--uniform .medium-up--four-eighths:nth-child(2n+1),
.grid--uniform .medium-up--five-tenths:nth-child(2n+1),
.grid--uniform .medium-up--one-twelfth:nth-child(12n+1),
.grid--uniform .medium-up--two-twelfths:nth-child(6n+1),
.grid--uniform .medium-up--three-twelfths:nth-child(4n+1),
.grid--uniform .medium-up--four-twelfths:nth-child(3n+1),
.grid--uniform .medium-up--six-twelfths:nth-child(2n+1),
.gallery .medium-up--one-half:nth-child(2n+1),
.gallery .medium-up--one-third:nth-child(3n+1),
.gallery .medium-up--one-quarter:nth-child(4n+1),
.gallery .medium-up--one-fifth:nth-child(5n+1),
.gallery .medium-up--one-sixth:nth-child(6n+1),
.gallery .medium-up--two-sixths:nth-child(3n+1),
.gallery .medium-up--three-sixths:nth-child(2n+1),
.gallery .medium-up--one-eighth:nth-child(8n+1),
.gallery .medium-up--two-eighths:nth-child(4n+1),
.gallery .medium-up--four-eighths:nth-child(2n+1),
.gallery .medium-up--five-tenths:nth-child(2n+1),
.gallery .medium-up--one-twelfth:nth-child(12n+1),
.gallery .medium-up--two-twelfths:nth-child(6n+1),
.gallery .medium-up--three-twelfths:nth-child(4n+1),
.gallery .medium-up--four-twelfths:nth-child(3n+1),
.gallery .medium-up--six-twelfths:nth-child(2n+1) {
clear: both;
}
.medium-up--show {
display: block !important;
}
.medium-up--hide {
display: none !important;
}
}
@media only screen and (max-width: 1099px) {
/** Whole */
.medium-down--one-whole {
width: 100%;
}
/* Halves */
.medium-down--one-half {
width: 50%;
}
/* Thirds */
.medium-down--one-third {
width: 33.3333333333%;
}
.medium-down--two-thirds {
width: 66.6666666667%;
}
/* Quarters */
.medium-down--one-quarter {
width: 25%;
}
.medium-down--two-quarters {
width: 50%;
}
.medium-down--three-quarters {
width: 75%;
}
/* Fifths */
.medium-down--one-fifth {
width: 20%;
}
.medium-down--two-fifths {
width: 40%;
}
.medium-down--three-fifths {
width: 60%;
}
.medium-down--four-fifths {
width: 80%;
}
/* Sixths */
.medium-down--one-sixth {
width: 16.6666666667%;
}
.medium-down--two-sixths {
width: 33.3333333333%;
}
.medium-down--three-sixths {
width: 50%;
}
.medium-down--four-sixths {
width: 66.6666666667%;
}
.medium-down--five-sixths {
width: 83.3333333333%;
}
/* Eighths */
.medium-down--one-eighth {
width: 12.5%;
}
.medium-down--two-eighths {
width: 25%;
}
.medium-down--three-eighths {
width: 37.5%;
}
.medium-down--four-eighths {
width: 50%;
}
.medium-down--five-eighths {
width: 62.5%;
}
.medium-down--six-eighths {
width: 75%;
}
.medium-down--seven-eighths {
width: 87.5%;
}
/* Tenths */
.medium-down--one-tenth {
width: 10%;
}
.medium-down--two-tenths {
width: 20%;
}
.medium-down--three-tenths {
width: 30%;
}
.medium-down--four-tenths {
width: 40%;
}
.medium-down--five-tenths {
width: 50%;
}
.medium-down--six-tenths {
width: 60%;
}
.medium-down--seven-tenths {
width: 70%;
}
.medium-down--eight-tenths {
width: 80%;
}
.medium-down--nine-tenths {
width: 90%;
}
/* Twelfths */
.medium-down--one-twelfth {
width: 8.3333333333%;
}
.medium-down--two-twelfths {
width: 8.3333333333%;
}
.medium-down--three-twelfths {
width: 25%;
}
.medium-down--four-twelfths {
width: 33.3333333333%;
}
.medium-down--five-twelfths {
width: 41.6666666667%;
}
.medium-down--six-twelfths {
width: 50%;
}
.medium-down--seven-twelfths {
width: 58.3333333333%;
}
.medium-down--eight-twelfths {
width: 66.6666666667%;
}
.medium-down--nine-twelfths {
width: 75%;
}
.medium-down--ten-twelfths {
width: 83.3333333333%;
}
.medium-down--eleven-twelfths {
width: 91.6666666667%;
}
.grid--uniform .medium-down--one-half:nth-child(2n+1),
.grid--uniform .medium-down--one-third:nth-child(3n+1),
.grid--uniform .medium-down--one-quarter:nth-child(4n+1),
.grid--uniform .medium-down--one-fifth:nth-child(5n+1),
.grid--uniform .medium-down--one-sixth:nth-child(6n+1),
.grid--uniform .medium-down--two-sixths:nth-child(3n+1),
.grid--uniform .medium-down--three-sixths:nth-child(2n+1),
.grid--uniform .medium-down--one-eighth:nth-child(8n+1),
.grid--uniform .medium-down--two-eighths:nth-child(4n+1),
.grid--uniform .medium-down--four-eighths:nth-child(2n+1),
.grid--uniform .medium-down--five-tenths:nth-child(2n+1),
.grid--uniform .medium-down--one-twelfth:nth-child(12n+1),
.grid--uniform .medium-down--two-twelfths:nth-child(6n+1),
.grid--uniform .medium-down--three-twelfths:nth-child(4n+1),
.grid--uniform .medium-down--four-twelfths:nth-child(3n+1),
.grid--uniform .medium-down--six-twelfths:nth-child(2n+1),
.gallery .medium-down--one-half:nth-child(2n+1),
.gallery .medium-down--one-third:nth-child(3n+1),
.gallery .medium-down--one-quarter:nth-child(4n+1),
.gallery .medium-down--one-fifth:nth-child(5n+1),
.gallery .medium-down--one-sixth:nth-child(6n+1),
.gallery .medium-down--two-sixths:nth-child(3n+1),
.gallery .medium-down--three-sixths:nth-child(2n+1),
.gallery .medium-down--one-eighth:nth-child(8n+1),
.gallery .medium-down--two-eighths:nth-child(4n+1),
.gallery .medium-down--four-eighths:nth-child(2n+1),
.gallery .medium-down--five-tenths:nth-child(2n+1),
.gallery .medium-down--one-twelfth:nth-child(12n+1),
.gallery .medium-down--two-twelfths:nth-child(6n+1),
.gallery .medium-down--three-twelfths:nth-child(4n+1),
.gallery .medium-down--four-twelfths:nth-child(3n+1),
.gallery .medium-down--six-twelfths:nth-child(2n+1) {
clear: both;
}
.medium-down--show {
display: block !important;
}
.medium-down--hide {
display: none !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 1399px) {
/** Whole */
.medium-large--one-whole {
width: 100%;
}
/* Halves */
.medium-large--one-half {
width: 50%;
}
/* Thirds */
.medium-large--one-third {
width: 33.3333333333%;
}
.medium-large--two-thirds {
width: 66.6666666667%;
}
/* Quarters */
.medium-large--one-quarter {
width: 25%;
}
.medium-large--two-quarters {
width: 50%;
}
.medium-large--three-quarters {
width: 75%;
}
/* Fifths */
.medium-large--one-fifth {
width: 20%;
}
.medium-large--two-fifths {
width: 40%;
}
.medium-large--three-fifths {
width: 60%;
}
.medium-large--four-fifths {
width: 80%;
}
/* Sixths */
.medium-large--one-sixth {
width: 16.6666666667%;
}
.medium-large--two-sixths {
width: 33.3333333333%;
}
.medium-large--three-sixths {
width: 50%;
}
.medium-large--four-sixths {
width: 66.6666666667%;
}
.medium-large--five-sixths {
width: 83.3333333333%;
}
/* Eighths */
.medium-large--one-eighth {
width: 12.5%;
}
.medium-large--two-eighths {
width: 25%;
}
.medium-large--three-eighths {
width: 37.5%;
}
.medium-large--four-eighths {
width: 50%;
}
.medium-large--five-eighths {
width: 62.5%;
}
.medium-large--six-eighths {
width: 75%;
}
.medium-large--seven-eighths {
width: 87.5%;
}
/* Tenths */
.medium-large--one-tenth {
width: 10%;
}
.medium-large--two-tenths {
width: 20%;
}
.medium-large--three-tenths {
width: 30%;
}
.medium-large--four-tenths {
width: 40%;
}
.medium-large--five-tenths {
width: 50%;
}
.medium-large--six-tenths {
width: 60%;
}
.medium-large--seven-tenths {
width: 70%;
}
.medium-large--eight-tenths {
width: 80%;
}
.medium-large--nine-tenths {
width: 90%;
}
/* Twelfths */
.medium-large--one-twelfth {
width: 8.3333333333%;
}
.medium-large--two-twelfths {
width: 8.3333333333%;
}
.medium-large--three-twelfths {
width: 25%;
}
.medium-large--four-twelfths {
width: 33.3333333333%;
}
.medium-large--five-twelfths {
width: 41.6666666667%;
}
.medium-large--six-twelfths {
width: 50%;
}
.medium-large--seven-twelfths {
width: 58.3333333333%;
}
.medium-large--eight-twelfths {
width: 66.6666666667%;
}
.medium-large--nine-twelfths {
width: 75%;
}
.medium-large--ten-twelfths {
width: 83.3333333333%;
}
.medium-large--eleven-twelfths {
width: 91.6666666667%;
}
.grid--uniform .medium-large--one-half:nth-child(2n+1),
.grid--uniform .medium-large--one-third:nth-child(3n+1),
.grid--uniform .medium-large--one-quarter:nth-child(4n+1),
.grid--uniform .medium-large--one-fifth:nth-child(5n+1),
.grid--uniform .medium-large--one-sixth:nth-child(6n+1),
.grid--uniform .medium-large--two-sixths:nth-child(3n+1),
.grid--uniform .medium-large--three-sixths:nth-child(2n+1),
.grid--uniform .medium-large--one-eighth:nth-child(8n+1),
.grid--uniform .medium-large--two-eighths:nth-child(4n+1),
.grid--uniform .medium-large--four-eighths:nth-child(2n+1),
.grid--uniform .medium-large--five-tenths:nth-child(2n+1),
.grid--uniform .medium-large--one-twelfth:nth-child(12n+1),
.grid--uniform .medium-large--two-twelfths:nth-child(6n+1),
.grid--uniform .medium-large--three-twelfths:nth-child(4n+1),
.grid--uniform .medium-large--four-twelfths:nth-child(3n+1),
.grid--uniform .medium-large--six-twelfths:nth-child(2n+1),
.gallery .medium-large--one-half:nth-child(2n+1),
.gallery .medium-large--one-third:nth-child(3n+1),
.gallery .medium-large--one-quarter:nth-child(4n+1),
.gallery .medium-large--one-fifth:nth-child(5n+1),
.gallery .medium-large--one-sixth:nth-child(6n+1),
.gallery .medium-large--two-sixths:nth-child(3n+1),
.gallery .medium-large--three-sixths:nth-child(2n+1),
.gallery .medium-large--one-eighth:nth-child(8n+1),
.gallery .medium-large--two-eighths:nth-child(4n+1),
.gallery .medium-large--four-eighths:nth-child(2n+1),
.gallery .medium-large--five-tenths:nth-child(2n+1),
.gallery .medium-large--one-twelfth:nth-child(12n+1),
.gallery .medium-large--two-twelfths:nth-child(6n+1),
.gallery .medium-large--three-twelfths:nth-child(4n+1),
.gallery .medium-large--four-twelfths:nth-child(3n+1),
.gallery .medium-large--six-twelfths:nth-child(2n+1) {
clear: both;
}
.medium-large--show {
display: block !important;
}
.medium-large--hide {
display: none !important;
}
}
@media only screen and (min-width: 1100px) and (max-width: 1399px) {
/** Whole */
.large--one-whole {
width: 100%;
}
/* Halves */
.large--one-half {
width: 50%;
}
/* Thirds */
.large--one-third {
width: 33.3333333333%;
}
.large--two-thirds {
width: 66.6666666667%;
}
/* Quarters */
.large--one-quarter {
width: 25%;
}
.large--two-quarters {
width: 50%;
}
.large--three-quarters {
width: 75%;
}
/* Fifths */
.large--one-fifth {
width: 20%;
}
.large--two-fifths {
width: 40%;
}
.large--three-fifths {
width: 60%;
}
.large--four-fifths {
width: 80%;
}
/* Sixths */
.large--one-sixth {
width: 16.6666666667%;
}
.large--two-sixths {
width: 33.3333333333%;
}
.large--three-sixths {
width: 50%;
}
.large--four-sixths {
width: 66.6666666667%;
}
.large--five-sixths {
width: 83.3333333333%;
}
/* Eighths */
.large--one-eighth {
width: 12.5%;
}
.large--two-eighths {
width: 25%;
}
.large--three-eighths {
width: 37.5%;
}
.large--four-eighths {
width: 50%;
}
.large--five-eighths {
width: 62.5%;
}
.large--six-eighths {
width: 75%;
}
.large--seven-eighths {
width: 87.5%;
}
/* Tenths */
.large--one-tenth {
width: 10%;
}
.large--two-tenths {
width: 20%;
}
.large--three-tenths {
width: 30%;
}
.large--four-tenths {
width: 40%;
}
.large--five-tenths {
width: 50%;
}
.large--six-tenths {
width: 60%;
}
.large--seven-tenths {
width: 70%;
}
.large--eight-tenths {
width: 80%;
}
.large--nine-tenths {
width: 90%;
}
/* Twelfths */
.large--one-twelfth {
width: 8.3333333333%;
}
.large--two-twelfths {
width: 8.3333333333%;
}
.large--three-twelfths {
width: 25%;
}
.large--four-twelfths {
width: 33.3333333333%;
}
.large--five-twelfths {
width: 41.6666666667%;
}
.large--six-twelfths {
width: 50%;
}
.large--seven-twelfths {
width: 58.3333333333%;
}
.large--eight-twelfths {
width: 66.6666666667%;
}
.large--nine-twelfths {
width: 75%;
}
.large--ten-twelfths {
width: 83.3333333333%;
}
.large--eleven-twelfths {
width: 91.6666666667%;
}
.grid--uniform .large--one-half:nth-child(2n+1),
.grid--uniform .large--one-third:nth-child(3n+1),
.grid--uniform .large--one-quarter:nth-child(4n+1),
.grid--uniform .large--one-fifth:nth-child(5n+1),
.grid--uniform .large--one-sixth:nth-child(6n+1),
.grid--uniform .large--two-sixths:nth-child(3n+1),
.grid--uniform .large--three-sixths:nth-child(2n+1),
.grid--uniform .large--one-eighth:nth-child(8n+1),
.grid--uniform .large--two-eighths:nth-child(4n+1),
.grid--uniform .large--four-eighths:nth-child(2n+1),
.grid--uniform .large--five-tenths:nth-child(2n+1),
.grid--uniform .large--one-twelfth:nth-child(12n+1),
.grid--uniform .large--two-twelfths:nth-child(6n+1),
.grid--uniform .large--three-twelfths:nth-child(4n+1),
.grid--uniform .large--four-twelfths:nth-child(3n+1),
.grid--uniform .large--six-twelfths:nth-child(2n+1),
.gallery .large--one-half:nth-child(2n+1),
.gallery .large--one-third:nth-child(3n+1),
.gallery .large--one-quarter:nth-child(4n+1),
.gallery .large--one-fifth:nth-child(5n+1),
.gallery .large--one-sixth:nth-child(6n+1),
.gallery .large--two-sixths:nth-child(3n+1),
.gallery .large--three-sixths:nth-child(2n+1),
.gallery .large--one-eighth:nth-child(8n+1),
.gallery .large--two-eighths:nth-child(4n+1),
.gallery .large--four-eighths:nth-child(2n+1),
.gallery .large--five-tenths:nth-child(2n+1),
.gallery .large--one-twelfth:nth-child(12n+1),
.gallery .large--two-twelfths:nth-child(6n+1),
.gallery .large--three-twelfths:nth-child(4n+1),
.gallery .large--four-twelfths:nth-child(3n+1),
.gallery .large--six-twelfths:nth-child(2n+1) {
clear: both;
}
.large--show {
display: block !important;
}
.large--hide {
display: none !important;
}
}
@media only screen and (min-width: 1100px) {
/** Whole */
.large-up--one-whole {
width: 100%;
}
/* Halves */
.large-up--one-half {
width: 50%;
}
/* Thirds */
.large-up--one-third {
width: 33.3333333333%;
}
.large-up--two-thirds {
width: 66.6666666667%;
}
/* Quarters */
.large-up--one-quarter {
width: 25%;
}
.large-up--two-quarters {
width: 50%;
}
.large-up--three-quarters {
width: 75%;
}
/* Fifths */
.large-up--one-fifth {
width: 20%;
}
.large-up--two-fifths {
width: 40%;
}
.large-up--three-fifths {
width: 60%;
}
.large-up--four-fifths {
width: 80%;
}
/* Sixths */
.large-up--one-sixth {
width: 16.6666666667%;
}
.large-up--two-sixths {
width: 33.3333333333%;
}
.large-up--three-sixths {
width: 50%;
}
.large-up--four-sixths {
width: 66.6666666667%;
}
.large-up--five-sixths {
width: 83.3333333333%;
}
/* Eighths */
.large-up--one-eighth {
width: 12.5%;
}
.large-up--two-eighths {
width: 25%;
}
.large-up--three-eighths {
width: 37.5%;
}
.large-up--four-eighths {
width: 50%;
}
.large-up--five-eighths {
width: 62.5%;
}
.large-up--six-eighths {
width: 75%;
}
.large-up--seven-eighths {
width: 87.5%;
}
/* Tenths */
.large-up--one-tenth {
width: 10%;
}
.large-up--two-tenths {
width: 20%;
}
.large-up--three-tenths {
width: 30%;
}
.large-up--four-tenths {
width: 40%;
}
.large-up--five-tenths {
width: 50%;
}
.large-up--six-tenths {
width: 60%;
}
.large-up--seven-tenths {
width: 70%;
}
.large-up--eight-tenths {
width: 80%;
}
.large-up--nine-tenths {
width: 90%;
}
/* Twelfths */
.large-up--one-twelfth {
width: 8.3333333333%;
}
.large-up--two-twelfths {
width: 8.3333333333%;
}
.large-up--three-twelfths {
width: 25%;
}
.large-up--four-twelfths {
width: 33.3333333333%;
}
.large-up--five-twelfths {
width: 41.6666666667%;
}
.large-up--six-twelfths {
width: 50%;
}
.large-up--seven-twelfths {
width: 58.3333333333%;
}
.large-up--eight-twelfths {
width: 66.6666666667%;
}
.large-up--nine-twelfths {
width: 75%;
}
.large-up--ten-twelfths {
width: 83.3333333333%;
}
.large-up--eleven-twelfths {
width: 91.6666666667%;
}
.grid--uniform .large-up--one-half:nth-child(2n+1),
.grid--uniform .large-up--one-third:nth-child(3n+1),
.grid--uniform .large-up--one-quarter:nth-child(4n+1),
.grid--uniform .large-up--one-fifth:nth-child(5n+1),
.grid--uniform .large-up--one-sixth:nth-child(6n+1),
.grid--uniform .large-up--two-sixths:nth-child(3n+1),
.grid--uniform .large-up--three-sixths:nth-child(2n+1),
.grid--uniform .large-up--one-eighth:nth-child(8n+1),
.grid--uniform .large-up--two-eighths:nth-child(4n+1),
.grid--uniform .large-up--four-eighths:nth-child(2n+1),
.grid--uniform .large-up--five-tenths:nth-child(2n+1),
.grid--uniform .large-up--one-twelfth:nth-child(12n+1),
.grid--uniform .large-up--two-twelfths:nth-child(6n+1),
.grid--uniform .large-up--three-twelfths:nth-child(4n+1),
.grid--uniform .large-up--four-twelfths:nth-child(3n+1),
.grid--uniform .large-up--six-twelfths:nth-child(2n+1),
.gallery .large-up--one-half:nth-child(2n+1),
.gallery .large-up--one-third:nth-child(3n+1),
.gallery .large-up--one-quarter:nth-child(4n+1),
.gallery .large-up--one-fifth:nth-child(5n+1),
.gallery .large-up--one-sixth:nth-child(6n+1),
.gallery .large-up--two-sixths:nth-child(3n+1),
.gallery .large-up--three-sixths:nth-child(2n+1),
.gallery .large-up--one-eighth:nth-child(8n+1),
.gallery .large-up--two-eighths:nth-child(4n+1),
.gallery .large-up--four-eighths:nth-child(2n+1),
.gallery .large-up--five-tenths:nth-child(2n+1),
.gallery .large-up--one-twelfth:nth-child(12n+1),
.gallery .large-up--two-twelfths:nth-child(6n+1),
.gallery .large-up--three-twelfths:nth-child(4n+1),
.gallery .large-up--four-twelfths:nth-child(3n+1),
.gallery .large-up--six-twelfths:nth-child(2n+1) {
clear: both;
}
.large-up--show {
display: block !important;
}
.large-up--hide {
display: none !important;
}
}
@media only screen and (max-width: 1399px) {
/** Whole */
.large-down--one-whole {
width: 100%;
}
/* Halves */
.large-down--one-half {
width: 50%;
}
/* Thirds */
.large-down--one-third {
width: 33.3333333333%;
}
.large-down--two-thirds {
width: 66.6666666667%;
}
/* Quarters */
.large-down--one-quarter {
width: 25%;
}
.large-down--two-quarters {
width: 50%;
}
.large-down--three-quarters {
width: 75%;
}
/* Fifths */
.large-down--one-fifth {
width: 20%;
}
.large-down--two-fifths {
width: 40%;
}
.large-down--three-fifths {
width: 60%;
}
.large-down--four-fifths {
width: 80%;
}
/* Sixths */
.large-down--one-sixth {
width: 16.6666666667%;
}
.large-down--two-sixths {
width: 33.3333333333%;
}
.large-down--three-sixths {
width: 50%;
}
.large-down--four-sixths {
width: 66.6666666667%;
}
.large-down--five-sixths {
width: 83.3333333333%;
}
/* Eighths */
.large-down--one-eighth {
width: 12.5%;
}
.large-down--two-eighths {
width: 25%;
}
.large-down--three-eighths {
width: 37.5%;
}
.large-down--four-eighths {
width: 50%;
}
.large-down--five-eighths {
width: 62.5%;
}
.large-down--six-eighths {
width: 75%;
}
.large-down--seven-eighths {
width: 87.5%;
}
/* Tenths */
.large-down--one-tenth {
width: 10%;
}
.large-down--two-tenths {
width: 20%;
}
.large-down--three-tenths {
width: 30%;
}
.large-down--four-tenths {
width: 40%;
}
.large-down--five-tenths {
width: 50%;
}
.large-down--six-tenths {
width: 60%;
}
.large-down--seven-tenths {
width: 70%;
}
.large-down--eight-tenths {
width: 80%;
}
.large-down--nine-tenths {
width: 90%;
}
/* Twelfths */
.large-down--one-twelfth {
width: 8.3333333333%;
}
.large-down--two-twelfths {
width: 8.3333333333%;
}
.large-down--three-twelfths {
width: 25%;
}
.large-down--four-twelfths {
width: 33.3333333333%;
}
.large-down--five-twelfths {
width: 41.6666666667%;
}
.large-down--six-twelfths {
width: 50%;
}
.large-down--seven-twelfths {
width: 58.3333333333%;
}
.large-down--eight-twelfths {
width: 66.6666666667%;
}
.large-down--nine-twelfths {
width: 75%;
}
.large-down--ten-twelfths {
width: 83.3333333333%;
}
.large-down--eleven-twelfths {
width: 91.6666666667%;
}
.grid--uniform .large-down--one-half:nth-child(2n+1),
.grid--uniform .large-down--one-third:nth-child(3n+1),
.grid--uniform .large-down--one-quarter:nth-child(4n+1),
.grid--uniform .large-down--one-fifth:nth-child(5n+1),
.grid--uniform .large-down--one-sixth:nth-child(6n+1),
.grid--uniform .large-down--two-sixths:nth-child(3n+1),
.grid--uniform .large-down--three-sixths:nth-child(2n+1),
.grid--uniform .large-down--one-eighth:nth-child(8n+1),
.grid--uniform .large-down--two-eighths:nth-child(4n+1),
.grid--uniform .large-down--four-eighths:nth-child(2n+1),
.grid--uniform .large-down--five-tenths:nth-child(2n+1),
.grid--uniform .large-down--one-twelfth:nth-child(12n+1),
.grid--uniform .large-down--two-twelfths:nth-child(6n+1),
.grid--uniform .large-down--three-twelfths:nth-child(4n+1),
.grid--uniform .large-down--four-twelfths:nth-child(3n+1),
.grid--uniform .large-down--six-twelfths:nth-child(2n+1),
.gallery .large-down--one-half:nth-child(2n+1),
.gallery .large-down--one-third:nth-child(3n+1),
.gallery .large-down--one-quarter:nth-child(4n+1),
.gallery .large-down--one-fifth:nth-child(5n+1),
.gallery .large-down--one-sixth:nth-child(6n+1),
.gallery .large-down--two-sixths:nth-child(3n+1),
.gallery .large-down--three-sixths:nth-child(2n+1),
.gallery .large-down--one-eighth:nth-child(8n+1),
.gallery .large-down--two-eighths:nth-child(4n+1),
.gallery .large-down--four-eighths:nth-child(2n+1),
.gallery .large-down--five-tenths:nth-child(2n+1),
.gallery .large-down--one-twelfth:nth-child(12n+1),
.gallery .large-down--two-twelfths:nth-child(6n+1),
.gallery .large-down--three-twelfths:nth-child(4n+1),
.gallery .large-down--four-twelfths:nth-child(3n+1),
.gallery .large-down--six-twelfths:nth-child(2n+1) {
clear: both;
}
.large-down--show {
display: block !important;
}
.large-down--hide {
display: none !important;
}
}
@media only screen and (min-width: 1400px) {
/** Whole */
.widescreen--one-whole {
width: 100%;
}
/* Halves */
.widescreen--one-half {
width: 50%;
}
/* Thirds */
.widescreen--one-third {
width: 33.3333333333%;
}
.widescreen--two-thirds {
width: 66.6666666667%;
}
/* Quarters */
.widescreen--one-quarter {
width: 25%;
}
.widescreen--two-quarters {
width: 50%;
}
.widescreen--three-quarters {
width: 75%;
}
/* Fifths */
.widescreen--one-fifth {
width: 20%;
}
.widescreen--two-fifths {
width: 40%;
}
.widescreen--three-fifths {
width: 60%;
}
.widescreen--four-fifths {
width: 80%;
}
/* Sixths */
.widescreen--one-sixth {
width: 16.6666666667%;
}
.widescreen--two-sixths {
width: 33.3333333333%;
}
.widescreen--three-sixths {
width: 50%;
}
.widescreen--four-sixths {
width: 66.6666666667%;
}
.widescreen--five-sixths {
width: 83.3333333333%;
}
/* Eighths */
.widescreen--one-eighth {
width: 12.5%;
}
.widescreen--two-eighths {
width: 25%;
}
.widescreen--three-eighths {
width: 37.5%;
}
.widescreen--four-eighths {
width: 50%;
}
.widescreen--five-eighths {
width: 62.5%;
}
.widescreen--six-eighths {
width: 75%;
}
.widescreen--seven-eighths {
width: 87.5%;
}
/* Tenths */
.widescreen--one-tenth {
width: 10%;
}
.widescreen--two-tenths {
width: 20%;
}
.widescreen--three-tenths {
width: 30%;
}
.widescreen--four-tenths {
width: 40%;
}
.widescreen--five-tenths {
width: 50%;
}
.widescreen--six-tenths {
width: 60%;
}
.widescreen--seven-tenths {
width: 70%;
}
.widescreen--eight-tenths {
width: 80%;
}
.widescreen--nine-tenths {
width: 90%;
}
/* Twelfths */
.widescreen--one-twelfth {
width: 8.3333333333%;
}
.widescreen--two-twelfths {
width: 8.3333333333%;
}
.widescreen--three-twelfths {
width: 25%;
}
.widescreen--four-twelfths {
width: 33.3333333333%;
}
.widescreen--five-twelfths {
width: 41.6666666667%;
}
.widescreen--six-twelfths {
width: 50%;
}
.widescreen--seven-twelfths {
width: 58.3333333333%;
}
.widescreen--eight-twelfths {
width: 66.6666666667%;
}
.widescreen--nine-twelfths {
width: 75%;
}
.widescreen--ten-twelfths {
width: 83.3333333333%;
}
.widescreen--eleven-twelfths {
width: 91.6666666667%;
}
.grid--uniform .widescreen--one-half:nth-child(2n+1),
.grid--uniform .widescreen--one-third:nth-child(3n+1),
.grid--uniform .widescreen--one-quarter:nth-child(4n+1),
.grid--uniform .widescreen--one-fifth:nth-child(5n+1),
.grid--uniform .widescreen--one-sixth:nth-child(6n+1),
.grid--uniform .widescreen--two-sixths:nth-child(3n+1),
.grid--uniform .widescreen--three-sixths:nth-child(2n+1),
.grid--uniform .widescreen--one-eighth:nth-child(8n+1),
.grid--uniform .widescreen--two-eighths:nth-child(4n+1),
.grid--uniform .widescreen--four-eighths:nth-child(2n+1),
.grid--uniform .widescreen--five-tenths:nth-child(2n+1),
.grid--uniform .widescreen--one-twelfth:nth-child(12n+1),
.grid--uniform .widescreen--two-twelfths:nth-child(6n+1),
.grid--uniform .widescreen--three-twelfths:nth-child(4n+1),
.grid--uniform .widescreen--four-twelfths:nth-child(3n+1),
.grid--uniform .widescreen--six-twelfths:nth-child(2n+1),
.gallery .widescreen--one-half:nth-child(2n+1),
.gallery .widescreen--one-third:nth-child(3n+1),
.gallery .widescreen--one-quarter:nth-child(4n+1),
.gallery .widescreen--one-fifth:nth-child(5n+1),
.gallery .widescreen--one-sixth:nth-child(6n+1),
.gallery .widescreen--two-sixths:nth-child(3n+1),
.gallery .widescreen--three-sixths:nth-child(2n+1),
.gallery .widescreen--one-eighth:nth-child(8n+1),
.gallery .widescreen--two-eighths:nth-child(4n+1),
.gallery .widescreen--four-eighths:nth-child(2n+1),
.gallery .widescreen--five-tenths:nth-child(2n+1),
.gallery .widescreen--one-twelfth:nth-child(12n+1),
.gallery .widescreen--two-twelfths:nth-child(6n+1),
.gallery .widescreen--three-twelfths:nth-child(4n+1),
.gallery .widescreen--four-twelfths:nth-child(3n+1),
.gallery .widescreen--six-twelfths:nth-child(2n+1) {
clear: both;
}
.widescreen--show {
display: block !important;
}
.widescreen--hide {
display: none !important;
}
}
@media only screen and (max-width: 479px) {
/* Halves */
.mobile--push-one-half {
left: 50%;
}
/* Thirds */
.mobile--push-one-third {
left: 33.3333333333%;
}
.mobile--push-two-thirds {
left: 66.6666666667%;
}
/* Quarters */
.mobile--push-one-quarter {
left: 25%;
}
.mobile--push-two-quarters {
left: 50%;
}
.mobile--push-three-quarters {
left: 75%;
}
/* Fifths */
.mobile--push-one-fifth {
left: 20%;
}
.mobile--push-two-fifths {
left: 40%;
}
.mobile--push-three-fifths {
left: 60%;
}
.mobile--push-four-fifths {
left: 80%;
}
/* Sixths */
.mobile--push-one-sixth {
left: 16.6666666667%;
}
.mobile--push-two-sixths {
left: 33.3333333333%;
}
.mobile--push-three-sixths {
left: 50%;
}
.mobile--push-four-sixths {
left: 66.6666666667%;
}
.mobile--push-five-sixths {
left: 83.3333333333%;
}
/* Eighths */
.mobile--push-one-eighth {
left: 12.5%;
}
.mobile--push-two-eighths {
left: 25%;
}
.mobile--push-three-eighths {
left: 37.5%;
}
.mobile--push-four-eighths {
left: 50%;
}
.mobile--push-five-eighths {
left: 62.5%;
}
.mobile--push-six-eighths {
left: 75%;
}
.mobile--push-seven-eighths {
left: 87.5%;
}
/* Tenths */
.mobile--push-one-tenth {
left: 10%;
}
.mobile--push-two-tenths {
left: 20%;
}
.mobile--push-three-tenths {
left: 30%;
}
.mobile--push-four-tenths {
left: 40%;
}
.mobile--push-five-tenths {
left: 50%;
}
.mobile--push-six-tenths {
left: 60%;
}
.mobile--push-seven-tenths {
left: 70%;
}
.mobile--push-eight-tenths {
left: 80%;
}
.mobile--push-nine-tenths {
left: 90%;
}
/* Twelfths */
.mobile--push-one-twelfth {
left: 8.3333333333%;
}
.mobile--push-two-twelfths {
left: 8.3333333333%;
}
.mobile--push-three-twelfths {
left: 25%;
}
.mobile--push-four-twelfths {
left: 33.3333333333%;
}
.mobile--push-five-twelfths {
left: 41.6666666667%;
}
.mobile--push-six-twelfths {
left: 50%;
}
.mobile--push-seven-twelfths {
left: 58.3333333333%;
}
.mobile--push-eight-twelfths {
left: 66.6666666667%;
}
.mobile--push-nine-twelfths {
left: 75%;
}
.mobile--push-ten-twelfths {
left: 83.3333333333%;
}
.mobile--push-eleven-twelfths {
left: 91.6666666667%;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* Halves */
.small--push-one-half {
left: 50%;
}
/* Thirds */
.small--push-one-third {
left: 33.3333333333%;
}
.small--push-two-thirds {
left: 66.6666666667%;
}
/* Quarters */
.small--push-one-quarter {
left: 25%;
}
.small--push-two-quarters {
left: 50%;
}
.small--push-three-quarters {
left: 75%;
}
/* Fifths */
.small--push-one-fifth {
left: 20%;
}
.small--push-two-fifths {
left: 40%;
}
.small--push-three-fifths {
left: 60%;
}
.small--push-four-fifths {
left: 80%;
}
/* Sixths */
.small--push-one-sixth {
left: 16.6666666667%;
}
.small--push-two-sixths {
left: 33.3333333333%;
}
.small--push-three-sixths {
left: 50%;
}
.small--push-four-sixths {
left: 66.6666666667%;
}
.small--push-five-sixths {
left: 83.3333333333%;
}
/* Eighths */
.small--push-one-eighth {
left: 12.5%;
}
.small--push-two-eighths {
left: 25%;
}
.small--push-three-eighths {
left: 37.5%;
}
.small--push-four-eighths {
left: 50%;
}
.small--push-five-eighths {
left: 62.5%;
}
.small--push-six-eighths {
left: 75%;
}
.small--push-seven-eighths {
left: 87.5%;
}
/* Tenths */
.small--push-one-tenth {
left: 10%;
}
.small--push-two-tenths {
left: 20%;
}
.small--push-three-tenths {
left: 30%;
}
.small--push-four-tenths {
left: 40%;
}
.small--push-five-tenths {
left: 50%;
}
.small--push-six-tenths {
left: 60%;
}
.small--push-seven-tenths {
left: 70%;
}
.small--push-eight-tenths {
left: 80%;
}
.small--push-nine-tenths {
left: 90%;
}
/* Twelfths */
.small--push-one-twelfth {
left: 8.3333333333%;
}
.small--push-two-twelfths {
left: 8.3333333333%;
}
.small--push-three-twelfths {
left: 25%;
}
.small--push-four-twelfths {
left: 33.3333333333%;
}
.small--push-five-twelfths {
left: 41.6666666667%;
}
.small--push-six-twelfths {
left: 50%;
}
.small--push-seven-twelfths {
left: 58.3333333333%;
}
.small--push-eight-twelfths {
left: 66.6666666667%;
}
.small--push-nine-twelfths {
left: 75%;
}
.small--push-ten-twelfths {
left: 83.3333333333%;
}
.small--push-eleven-twelfths {
left: 91.6666666667%;
}
}
@media only screen and (min-width: 480px) {
/* Halves */
.small-up--push-one-half {
left: 50%;
}
/* Thirds */
.small-up--push-one-third {
left: 33.3333333333%;
}
.small-up--push-two-thirds {
left: 66.6666666667%;
}
/* Quarters */
.small-up--push-one-quarter {
left: 25%;
}
.small-up--push-two-quarters {
left: 50%;
}
.small-up--push-three-quarters {
left: 75%;
}
/* Fifths */
.small-up--push-one-fifth {
left: 20%;
}
.small-up--push-two-fifths {
left: 40%;
}
.small-up--push-three-fifths {
left: 60%;
}
.small-up--push-four-fifths {
left: 80%;
}
/* Sixths */
.small-up--push-one-sixth {
left: 16.6666666667%;
}
.small-up--push-two-sixths {
left: 33.3333333333%;
}
.small-up--push-three-sixths {
left: 50%;
}
.small-up--push-four-sixths {
left: 66.6666666667%;
}
.small-up--push-five-sixths {
left: 83.3333333333%;
}
/* Eighths */
.small-up--push-one-eighth {
left: 12.5%;
}
.small-up--push-two-eighths {
left: 25%;
}
.small-up--push-three-eighths {
left: 37.5%;
}
.small-up--push-four-eighths {
left: 50%;
}
.small-up--push-five-eighths {
left: 62.5%;
}
.small-up--push-six-eighths {
left: 75%;
}
.small-up--push-seven-eighths {
left: 87.5%;
}
/* Tenths */
.small-up--push-one-tenth {
left: 10%;
}
.small-up--push-two-tenths {
left: 20%;
}
.small-up--push-three-tenths {
left: 30%;
}
.small-up--push-four-tenths {
left: 40%;
}
.small-up--push-five-tenths {
left: 50%;
}
.small-up--push-six-tenths {
left: 60%;
}
.small-up--push-seven-tenths {
left: 70%;
}
.small-up--push-eight-tenths {
left: 80%;
}
.small-up--push-nine-tenths {
left: 90%;
}
/* Twelfths */
.small-up--push-one-twelfth {
left: 8.3333333333%;
}
.small-up--push-two-twelfths {
left: 8.3333333333%;
}
.small-up--push-three-twelfths {
left: 25%;
}
.small-up--push-four-twelfths {
left: 33.3333333333%;
}
.small-up--push-five-twelfths {
left: 41.6666666667%;
}
.small-up--push-six-twelfths {
left: 50%;
}
.small-up--push-seven-twelfths {
left: 58.3333333333%;
}
.small-up--push-eight-twelfths {
left: 66.6666666667%;
}
.small-up--push-nine-twelfths {
left: 75%;
}
.small-up--push-ten-twelfths {
left: 83.3333333333%;
}
.small-up--push-eleven-twelfths {
left: 91.6666666667%;
}
}
@media only screen and (max-width: 767px) {
/* Halves */
.small-down--push-one-half {
left: 50%;
}
/* Thirds */
.small-down--push-one-third {
left: 33.3333333333%;
}
.small-down--push-two-thirds {
left: 66.6666666667%;
}
/* Quarters */
.small-down--push-one-quarter {
left: 25%;
}
.small-down--push-two-quarters {
left: 50%;
}
.small-down--push-three-quarters {
left: 75%;
}
/* Fifths */
.small-down--push-one-fifth {
left: 20%;
}
.small-down--push-two-fifths {
left: 40%;
}
.small-down--push-three-fifths {
left: 60%;
}
.small-down--push-four-fifths {
left: 80%;
}
/* Sixths */
.small-down--push-one-sixth {
left: 16.6666666667%;
}
.small-down--push-two-sixths {
left: 33.3333333333%;
}
.small-down--push-three-sixths {
left: 50%;
}
.small-down--push-four-sixths {
left: 66.6666666667%;
}
.small-down--push-five-sixths {
left: 83.3333333333%;
}
/* Eighths */
.small-down--push-one-eighth {
left: 12.5%;
}
.small-down--push-two-eighths {
left: 25%;
}
.small-down--push-three-eighths {
left: 37.5%;
}
.small-down--push-four-eighths {
left: 50%;
}
.small-down--push-five-eighths {
left: 62.5%;
}
.small-down--push-six-eighths {
left: 75%;
}
.small-down--push-seven-eighths {
left: 87.5%;
}
/* Tenths */
.small-down--push-one-tenth {
left: 10%;
}
.small-down--push-two-tenths {
left: 20%;
}
.small-down--push-three-tenths {
left: 30%;
}
.small-down--push-four-tenths {
left: 40%;
}
.small-down--push-five-tenths {
left: 50%;
}
.small-down--push-six-tenths {
left: 60%;
}
.small-down--push-seven-tenths {
left: 70%;
}
.small-down--push-eight-tenths {
left: 80%;
}
.small-down--push-nine-tenths {
left: 90%;
}
/* Twelfths */
.small-down--push-one-twelfth {
left: 8.3333333333%;
}
.small-down--push-two-twelfths {
left: 8.3333333333%;
}
.small-down--push-three-twelfths {
left: 25%;
}
.small-down--push-four-twelfths {
left: 33.3333333333%;
}
.small-down--push-five-twelfths {
left: 41.6666666667%;
}
.small-down--push-six-twelfths {
left: 50%;
}
.small-down--push-seven-twelfths {
left: 58.3333333333%;
}
.small-down--push-eight-twelfths {
left: 66.6666666667%;
}
.small-down--push-nine-twelfths {
left: 75%;
}
.small-down--push-ten-twelfths {
left: 83.3333333333%;
}
.small-down--push-eleven-twelfths {
left: 91.6666666667%;
}
}
@media only screen and (min-width: 480px) and (max-width: 1099px) {
/* Halves */
.small-medium--push-one-half {
left: 50%;
}
/* Thirds */
.small-medium--push-one-third {
left: 33.3333333333%;
}
.small-medium--push-two-thirds {
left: 66.6666666667%;
}
/* Quarters */
.small-medium--push-one-quarter {
left: 25%;
}
.small-medium--push-two-quarters {
left: 50%;
}
.small-medium--push-three-quarters {
left: 75%;
}
/* Fifths */
.small-medium--push-one-fifth {
left: 20%;
}
.small-medium--push-two-fifths {
left: 40%;
}
.small-medium--push-three-fifths {
left: 60%;
}
.small-medium--push-four-fifths {
left: 80%;
}
/* Sixths */
.small-medium--push-one-sixth {
left: 16.6666666667%;
}
.small-medium--push-two-sixths {
left: 33.3333333333%;
}
.small-medium--push-three-sixths {
left: 50%;
}
.small-medium--push-four-sixths {
left: 66.6666666667%;
}
.small-medium--push-five-sixths {
left: 83.3333333333%;
}
/* Eighths */
.small-medium--push-one-eighth {
left: 12.5%;
}
.small-medium--push-two-eighths {
left: 25%;
}
.small-medium--push-three-eighths {
left: 37.5%;
}
.small-medium--push-four-eighths {
left: 50%;
}
.small-medium--push-five-eighths {
left: 62.5%;
}
.small-medium--push-six-eighths {
left: 75%;
}
.small-medium--push-seven-eighths {
left: 87.5%;
}
/* Tenths */
.small-medium--push-one-tenth {
left: 10%;
}
.small-medium--push-two-tenths {
left: 20%;
}
.small-medium--push-three-tenths {
left: 30%;
}
.small-medium--push-four-tenths {
left: 40%;
}
.small-medium--push-five-tenths {
left: 50%;
}
.small-medium--push-six-tenths {
left: 60%;
}
.small-medium--push-seven-tenths {
left: 70%;
}
.small-medium--push-eight-tenths {
left: 80%;
}
.small-medium--push-nine-tenths {
left: 90%;
}
/* Twelfths */
.small-medium--push-one-twelfth {
left: 8.3333333333%;
}
.small-medium--push-two-twelfths {
left: 8.3333333333%;
}
.small-medium--push-three-twelfths {
left: 25%;
}
.small-medium--push-four-twelfths {
left: 33.3333333333%;
}
.small-medium--push-five-twelfths {
left: 41.6666666667%;
}
.small-medium--push-six-twelfths {
left: 50%;
}
.small-medium--push-seven-twelfths {
left: 58.3333333333%;
}
.small-medium--push-eight-twelfths {
left: 66.6666666667%;
}
.small-medium--push-nine-twelfths {
left: 75%;
}
.small-medium--push-ten-twelfths {
left: 83.3333333333%;
}
.small-medium--push-eleven-twelfths {
left: 91.6666666667%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1099px) {
/* Halves */
.medium--push-one-half {
left: 50%;
}
/* Thirds */
.medium--push-one-third {
left: 33.3333333333%;
}
.medium--push-two-thirds {
left: 66.6666666667%;
}
/* Quarters */
.medium--push-one-quarter {
left: 25%;
}
.medium--push-two-quarters {
left: 50%;
}
.medium--push-three-quarters {
left: 75%;
}
/* Fifths */
.medium--push-one-fifth {
left: 20%;
}
.medium--push-two-fifths {
left: 40%;
}
.medium--push-three-fifths {
left: 60%;
}
.medium--push-four-fifths {
left: 80%;
}
/* Sixths */
.medium--push-one-sixth {
left: 16.6666666667%;
}
.medium--push-two-sixths {
left: 33.3333333333%;
}
.medium--push-three-sixths {
left: 50%;
}
.medium--push-four-sixths {
left: 66.6666666667%;
}
.medium--push-five-sixths {
left: 83.3333333333%;
}
/* Eighths */
.medium--push-one-eighth {
left: 12.5%;
}
.medium--push-two-eighths {
left: 25%;
}
.medium--push-three-eighths {
left: 37.5%;
}
.medium--push-four-eighths {
left: 50%;
}
.medium--push-five-eighths {
left: 62.5%;
}
.medium--push-six-eighths {
left: 75%;
}
.medium--push-seven-eighths {
left: 87.5%;
}
/* Tenths */
.medium--push-one-tenth {
left: 10%;
}
.medium--push-two-tenths {
left: 20%;
}
.medium--push-three-tenths {
left: 30%;
}
.medium--push-four-tenths {
left: 40%;
}
.medium--push-five-tenths {
left: 50%;
}
.medium--push-six-tenths {
left: 60%;
}
.medium--push-seven-tenths {
left: 70%;
}
.medium--push-eight-tenths {
left: 80%;
}
.medium--push-nine-tenths {
left: 90%;
}
/* Twelfths */
.medium--push-one-twelfth {
left: 8.3333333333%;
}
.medium--push-two-twelfths {
left: 8.3333333333%;
}
.medium--push-three-twelfths {
left: 25%;
}
.medium--push-four-twelfths {
left: 33.3333333333%;
}
.medium--push-five-twelfths {
left: 41.6666666667%;
}
.medium--push-six-twelfths {
left: 50%;
}
.medium--push-seven-twelfths {
left: 58.3333333333%;
}
.medium--push-eight-twelfths {
left: 66.6666666667%;
}
.medium--push-nine-twelfths {
left: 75%;
}
.medium--push-ten-twelfths {
left: 83.3333333333%;
}
.medium--push-eleven-twelfths {
left: 91.6666666667%;
}
}
@media only screen and (min-width: 768px) {
/* Halves */
.medium-up--push-one-half {
left: 50%;
}
/* Thirds */
.medium-up--push-one-third {
left: 33.3333333333%;
}
.medium-up--push-two-thirds {
left: 66.6666666667%;
}
/* Quarters */
.medium-up--push-one-quarter {
left: 25%;
}
.medium-up--push-two-quarters {
left: 50%;
}
.medium-up--push-three-quarters {
left: 75%;
}
/* Fifths */
.medium-up--push-one-fifth {
left: 20%;
}
.medium-up--push-two-fifths {
left: 40%;
}
.medium-up--push-three-fifths {
left: 60%;
}
.medium-up--push-four-fifths {
left: 80%;
}
/* Sixths */
.medium-up--push-one-sixth {
left: 16.6666666667%;
}
.medium-up--push-two-sixths {
left: 33.3333333333%;
}
.medium-up--push-three-sixths {
left: 50%;
}
.medium-up--push-four-sixths {
left: 66.6666666667%;
}
.medium-up--push-five-sixths {
left: 83.3333333333%;
}
/* Eighths */
.medium-up--push-one-eighth {
left: 12.5%;
}
.medium-up--push-two-eighths {
left: 25%;
}
.medium-up--push-three-eighths {
left: 37.5%;
}
.medium-up--push-four-eighths {
left: 50%;
}
.medium-up--push-five-eighths {
left: 62.5%;
}
.medium-up--push-six-eighths {
left: 75%;
}
.medium-up--push-seven-eighths {
left: 87.5%;
}
/* Tenths */
.medium-up--push-one-tenth {
left: 10%;
}
.medium-up--push-two-tenths {
left: 20%;
}
.medium-up--push-three-tenths {
left: 30%;
}
.medium-up--push-four-tenths {
left: 40%;
}
.medium-up--push-five-tenths {
left: 50%;
}
.medium-up--push-six-tenths {
left: 60%;
}
.medium-up--push-seven-tenths {
left: 70%;
}
.medium-up--push-eight-tenths {
left: 80%;
}
.medium-up--push-nine-tenths {
left: 90%;
}
/* Twelfths */
.medium-up--push-one-twelfth {
left: 8.3333333333%;
}
.medium-up--push-two-twelfths {
left: 8.3333333333%;
}
.medium-up--push-three-twelfths {
left: 25%;
}
.medium-up--push-four-twelfths {
left: 33.3333333333%;
}
.medium-up--push-five-twelfths {
left: 41.6666666667%;
}
.medium-up--push-six-twelfths {
left: 50%;
}
.medium-up--push-seven-twelfths {
left: 58.3333333333%;
}
.medium-up--push-eight-twelfths {
left: 66.6666666667%;
}
.medium-up--push-nine-twelfths {
left: 75%;
}
.medium-up--push-ten-twelfths {
left: 83.3333333333%;
}
.medium-up--push-eleven-twelfths {
left: 91.6666666667%;
}
}
@media only screen and (max-width: 1099px) {
/* Halves */
.medium-down--push-one-half {
left: 50%;
}
/* Thirds */
.medium-down--push-one-third {
left: 33.3333333333%;
}
.medium-down--push-two-thirds {
left: 66.6666666667%;
}
/* Quarters */
.medium-down--push-one-quarter {
left: 25%;
}
.medium-down--push-two-quarters {
left: 50%;
}
.medium-down--push-three-quarters {
left: 75%;
}
/* Fifths */
.medium-down--push-one-fifth {
left: 20%;
}
.medium-down--push-two-fifths {
left: 40%;
}
.medium-down--push-three-fifths {
left: 60%;
}
.medium-down--push-four-fifths {
left: 80%;
}
/* Sixths */
.medium-down--push-one-sixth {
left: 16.6666666667%;
}
.medium-down--push-two-sixths {
left: 33.3333333333%;
}
.medium-down--push-three-sixths {
left: 50%;
}
.medium-down--push-four-sixths {
left: 66.6666666667%;
}
.medium-down--push-five-sixths {
left: 83.3333333333%;
}
/* Eighths */
.medium-down--push-one-eighth {
left: 12.5%;
}
.medium-down--push-two-eighths {
left: 25%;
}
.medium-down--push-three-eighths {
left: 37.5%;
}
.medium-down--push-four-eighths {
left: 50%;
}
.medium-down--push-five-eighths {
left: 62.5%;
}
.medium-down--push-six-eighths {
left: 75%;
}
.medium-down--push-seven-eighths {
left: 87.5%;
}
/* Tenths */
.medium-down--push-one-tenth {
left: 10%;
}
.medium-down--push-two-tenths {
left: 20%;
}
.medium-down--push-three-tenths {
left: 30%;
}
.medium-down--push-four-tenths {
left: 40%;
}
.medium-down--push-five-tenths {
left: 50%;
}
.medium-down--push-six-tenths {
left: 60%;
}
.medium-down--push-seven-tenths {
left: 70%;
}
.medium-down--push-eight-tenths {
left: 80%;
}
.medium-down--push-nine-tenths {
left: 90%;
}
/* Twelfths */
.medium-down--push-one-twelfth {
left: 8.3333333333%;
}
.medium-down--push-two-twelfths {
left: 8.3333333333%;
}
.medium-down--push-three-twelfths {
left: 25%;
}
.medium-down--push-four-twelfths {
left: 33.3333333333%;
}
.medium-down--push-five-twelfths {
left: 41.6666666667%;
}
.medium-down--push-six-twelfths {
left: 50%;
}
.medium-down--push-seven-twelfths {
left: 58.3333333333%;
}
.medium-down--push-eight-twelfths {
left: 66.6666666667%;
}
.medium-down--push-nine-twelfths {
left: 75%;
}
.medium-down--push-ten-twelfths {
left: 83.3333333333%;
}
.medium-down--push-eleven-twelfths {
left: 91.6666666667%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1399px) {
/* Halves */
.medium-large--push-one-half {
left: 50%;
}
/* Thirds */
.medium-large--push-one-third {
left: 33.3333333333%;
}
.medium-large--push-two-thirds {
left: 66.6666666667%;
}
/* Quarters */
.medium-large--push-one-quarter {
left: 25%;
}
.medium-large--push-two-quarters {
left: 50%;
}
.medium-large--push-three-quarters {
left: 75%;
}
/* Fifths */
.medium-large--push-one-fifth {
left: 20%;
}
.medium-large--push-two-fifths {
left: 40%;
}
.medium-large--push-three-fifths {
left: 60%;
}
.medium-large--push-four-fifths {
left: 80%;
}
/* Sixths */
.medium-large--push-one-sixth {
left: 16.6666666667%;
}
.medium-large--push-two-sixths {
left: 33.3333333333%;
}
.medium-large--push-three-sixths {
left: 50%;
}
.medium-large--push-four-sixths {
left: 66.6666666667%;
}
.medium-large--push-five-sixths {
left: 83.3333333333%;
}
/* Eighths */
.medium-large--push-one-eighth {
left: 12.5%;
}
.medium-large--push-two-eighths {
left: 25%;
}
.medium-large--push-three-eighths {
left: 37.5%;
}
.medium-large--push-four-eighths {
left: 50%;
}
.medium-large--push-five-eighths {
left: 62.5%;
}
.medium-large--push-six-eighths {
left: 75%;
}
.medium-large--push-seven-eighths {
left: 87.5%;
}
/* Tenths */
.medium-large--push-one-tenth {
left: 10%;
}
.medium-large--push-two-tenths {
left: 20%;
}
.medium-large--push-three-tenths {
left: 30%;
}
.medium-large--push-four-tenths {
left: 40%;
}
.medium-large--push-five-tenths {
left: 50%;
}
.medium-large--push-six-tenths {
left: 60%;
}
.medium-large--push-seven-tenths {
left: 70%;
}
.medium-large--push-eight-tenths {
left: 80%;
}
.medium-large--push-nine-tenths {
left: 90%;
}
/* Twelfths */
.medium-large--push-one-twelfth {
left: 8.3333333333%;
}
.medium-large--push-two-twelfths {
left: 8.3333333333%;
}
.medium-large--push-three-twelfths {
left: 25%;
}
.medium-large--push-four-twelfths {
left: 33.3333333333%;
}
.medium-large--push-five-twelfths {
left: 41.6666666667%;
}
.medium-large--push-six-twelfths {
left: 50%;
}
.medium-large--push-seven-twelfths {
left: 58.3333333333%;
}
.medium-large--push-eight-twelfths {
left: 66.6666666667%;
}
.medium-large--push-nine-twelfths {
left: 75%;
}
.medium-large--push-ten-twelfths {
left: 83.3333333333%;
}
.medium-large--push-eleven-twelfths {
left: 91.6666666667%;
}
}
@media only screen and (min-width: 1100px) and (max-width: 1399px) {
/* Halves */
.large--push-one-half {
left: 50%;
}
/* Thirds */
.large--push-one-third {
left: 33.3333333333%;
}
.large--push-two-thirds {
left: 66.6666666667%;
}
/* Quarters */
.large--push-one-quarter {
left: 25%;
}
.large--push-two-quarters {
left: 50%;
}
.large--push-three-quarters {
left: 75%;
}
/* Fifths */
.large--push-one-fifth {
left: 20%;
}
.large--push-two-fifths {
left: 40%;
}
.large--push-three-fifths {
left: 60%;
}
.large--push-four-fifths {
left: 80%;
}
/* Sixths */
.large--push-one-sixth {
left: 16.6666666667%;
}
.large--push-two-sixths {
left: 33.3333333333%;
}
.large--push-three-sixths {
left: 50%;
}
.large--push-four-sixths {
left: 66.6666666667%;
}
.large--push-five-sixths {
left: 83.3333333333%;
}
/* Eighths */
.large--push-one-eighth {
left: 12.5%;
}
.large--push-two-eighths {
left: 25%;
}
.large--push-three-eighths {
left: 37.5%;
}
.large--push-four-eighths {
left: 50%;
}
.large--push-five-eighths {
left: 62.5%;
}
.large--push-six-eighths {
left: 75%;
}
.large--push-seven-eighths {
left: 87.5%;
}
/* Tenths */
.large--push-one-tenth {
left: 10%;
}
.large--push-two-tenths {
left: 20%;
}
.large--push-three-tenths {
left: 30%;
}
.large--push-four-tenths {
left: 40%;
}
.large--push-five-tenths {
left: 50%;
}
.large--push-six-tenths {
left: 60%;
}
.large--push-seven-tenths {
left: 70%;
}
.large--push-eight-tenths {
left: 80%;
}
.large--push-nine-tenths {
left: 90%;
}
/* Twelfths */
.large--push-one-twelfth {
left: 8.3333333333%;
}
.large--push-two-twelfths {
left: 8.3333333333%;
}
.large--push-three-twelfths {
left: 25%;
}
.large--push-four-twelfths {
left: 33.3333333333%;
}
.large--push-five-twelfths {
left: 41.6666666667%;
}
.large--push-six-twelfths {
left: 50%;
}
.large--push-seven-twelfths {
left: 58.3333333333%;
}
.large--push-eight-twelfths {
left: 66.6666666667%;
}
.large--push-nine-twelfths {
left: 75%;
}
.large--push-ten-twelfths {
left: 83.3333333333%;
}
.large--push-eleven-twelfths {
left: 91.6666666667%;
}
}
@media only screen and (min-width: 1100px) {
/* Halves */
.large-up--push-one-half {
left: 50%;
}
/* Thirds */
.large-up--push-one-third {
left: 33.3333333333%;
}
.large-up--push-two-thirds {
left: 66.6666666667%;
}
/* Quarters */
.large-up--push-one-quarter {
left: 25%;
}
.large-up--push-two-quarters {
left: 50%;
}
.large-up--push-three-quarters {
left: 75%;
}
/* Fifths */
.large-up--push-one-fifth {
left: 20%;
}
.large-up--push-two-fifths {
left: 40%;
}
.large-up--push-three-fifths {
left: 60%;
}
.large-up--push-four-fifths {
left: 80%;
}
/* Sixths */
.large-up--push-one-sixth {
left: 16.6666666667%;
}
.large-up--push-two-sixths {
left: 33.3333333333%;
}
.large-up--push-three-sixths {
left: 50%;
}
.large-up--push-four-sixths {
left: 66.6666666667%;
}
.large-up--push-five-sixths {
left: 83.3333333333%;
}
/* Eighths */
.large-up--push-one-eighth {
left: 12.5%;
}
.large-up--push-two-eighths {
left: 25%;
}
.large-up--push-three-eighths {
left: 37.5%;
}
.large-up--push-four-eighths {
left: 50%;
}
.large-up--push-five-eighths {
left: 62.5%;
}
.large-up--push-six-eighths {
left: 75%;
}
.large-up--push-seven-eighths {
left: 87.5%;
}
/* Tenths */
.large-up--push-one-tenth {
left: 10%;
}
.large-up--push-two-tenths {
left: 20%;
}
.large-up--push-three-tenths {
left: 30%;
}
.large-up--push-four-tenths {
left: 40%;
}
.large-up--push-five-tenths {
left: 50%;
}
.large-up--push-six-tenths {
left: 60%;
}
.large-up--push-seven-tenths {
left: 70%;
}
.large-up--push-eight-tenths {
left: 80%;
}
.large-up--push-nine-tenths {
left: 90%;
}
/* Twelfths */
.large-up--push-one-twelfth {
left: 8.3333333333%;
}
.large-up--push-two-twelfths {
left: 8.3333333333%;
}
.large-up--push-three-twelfths {
left: 25%;
}
.large-up--push-four-twelfths {
left: 33.3333333333%;
}
.large-up--push-five-twelfths {
left: 41.6666666667%;
}
.large-up--push-six-twelfths {
left: 50%;
}
.large-up--push-seven-twelfths {
left: 58.3333333333%;
}
.large-up--push-eight-twelfths {
left: 66.6666666667%;
}
.large-up--push-nine-twelfths {
left: 75%;
}
.large-up--push-ten-twelfths {
left: 83.3333333333%;
}
.large-up--push-eleven-twelfths {
left: 91.6666666667%;
}
}
@media only screen and (max-width: 1399px) {
/* Halves */
.large-down--push-one-half {
left: 50%;
}
/* Thirds */
.large-down--push-one-third {
left: 33.3333333333%;
}
.large-down--push-two-thirds {
left: 66.6666666667%;
}
/* Quarters */
.large-down--push-one-quarter {
left: 25%;
}
.large-down--push-two-quarters {
left: 50%;
}
.large-down--push-three-quarters {
left: 75%;
}
/* Fifths */
.large-down--push-one-fifth {
left: 20%;
}
.large-down--push-two-fifths {
left: 40%;
}
.large-down--push-three-fifths {
left: 60%;
}
.large-down--push-four-fifths {
left: 80%;
}
/* Sixths */
.large-down--push-one-sixth {
left: 16.6666666667%;
}
.large-down--push-two-sixths {
left: 33.3333333333%;
}
.large-down--push-three-sixths {
left: 50%;
}
.large-down--push-four-sixths {
left: 66.6666666667%;
}
.large-down--push-five-sixths {
left: 83.3333333333%;
}
/* Eighths */
.large-down--push-one-eighth {
left: 12.5%;
}
.large-down--push-two-eighths {
left: 25%;
}
.large-down--push-three-eighths {
left: 37.5%;
}
.large-down--push-four-eighths {
left: 50%;
}
.large-down--push-five-eighths {
left: 62.5%;
}
.large-down--push-six-eighths {
left: 75%;
}
.large-down--push-seven-eighths {
left: 87.5%;
}
/* Tenths */
.large-down--push-one-tenth {
left: 10%;
}
.large-down--push-two-tenths {
left: 20%;
}
.large-down--push-three-tenths {
left: 30%;
}
.large-down--push-four-tenths {
left: 40%;
}
.large-down--push-five-tenths {
left: 50%;
}
.large-down--push-six-tenths {
left: 60%;
}
.large-down--push-seven-tenths {
left: 70%;
}
.large-down--push-eight-tenths {
left: 80%;
}
.large-down--push-nine-tenths {
left: 90%;
}
/* Twelfths */
.large-down--push-one-twelfth {
left: 8.3333333333%;
}
.large-down--push-two-twelfths {
left: 8.3333333333%;
}
.large-down--push-three-twelfths {
left: 25%;
}
.large-down--push-four-twelfths {
left: 33.3333333333%;
}
.large-down--push-five-twelfths {
left: 41.6666666667%;
}
.large-down--push-six-twelfths {
left: 50%;
}
.large-down--push-seven-twelfths {
left: 58.3333333333%;
}
.large-down--push-eight-twelfths {
left: 66.6666666667%;
}
.large-down--push-nine-twelfths {
left: 75%;
}
.large-down--push-ten-twelfths {
left: 83.3333333333%;
}
.large-down--push-eleven-twelfths {
left: 91.6666666667%;
}
}
@media only screen and (min-width: 1400px) {
/* Halves */
.widescreen--push-one-half {
left: 50%;
}
/* Thirds */
.widescreen--push-one-third {
left: 33.3333333333%;
}
.widescreen--push-two-thirds {
left: 66.6666666667%;
}
/* Quarters */
.widescreen--push-one-quarter {
left: 25%;
}
.widescreen--push-two-quarters {
left: 50%;
}
.widescreen--push-three-quarters {
left: 75%;
}
/* Fifths */
.widescreen--push-one-fifth {
left: 20%;
}
.widescreen--push-two-fifths {
left: 40%;
}
.widescreen--push-three-fifths {
left: 60%;
}
.widescreen--push-four-fifths {
left: 80%;
}
/* Sixths */
.widescreen--push-one-sixth {
left: 16.6666666667%;
}
.widescreen--push-two-sixths {
left: 33.3333333333%;
}
.widescreen--push-three-sixths {
left: 50%;
}
.widescreen--push-four-sixths {
left: 66.6666666667%;
}
.widescreen--push-five-sixths {
left: 83.3333333333%;
}
/* Eighths */
.widescreen--push-one-eighth {
left: 12.5%;
}
.widescreen--push-two-eighths {
left: 25%;
}
.widescreen--push-three-eighths {
left: 37.5%;
}
.widescreen--push-four-eighths {
left: 50%;
}
.widescreen--push-five-eighths {
left: 62.5%;
}
.widescreen--push-six-eighths {
left: 75%;
}
.widescreen--push-seven-eighths {
left: 87.5%;
}
/* Tenths */
.widescreen--push-one-tenth {
left: 10%;
}
.widescreen--push-two-tenths {
left: 20%;
}
.widescreen--push-three-tenths {
left: 30%;
}
.widescreen--push-four-tenths {
left: 40%;
}
.widescreen--push-five-tenths {
left: 50%;
}
.widescreen--push-six-tenths {
left: 60%;
}
.widescreen--push-seven-tenths {
left: 70%;
}
.widescreen--push-eight-tenths {
left: 80%;
}
.widescreen--push-nine-tenths {
left: 90%;
}
/* Twelfths */
.widescreen--push-one-twelfth {
left: 8.3333333333%;
}
.widescreen--push-two-twelfths {
left: 8.3333333333%;
}
.widescreen--push-three-twelfths {
left: 25%;
}
.widescreen--push-four-twelfths {
left: 33.3333333333%;
}
.widescreen--push-five-twelfths {
left: 41.6666666667%;
}
.widescreen--push-six-twelfths {
left: 50%;
}
.widescreen--push-seven-twelfths {
left: 58.3333333333%;
}
.widescreen--push-eight-twelfths {
left: 66.6666666667%;
}
.widescreen--push-nine-twelfths {
left: 75%;
}
.widescreen--push-ten-twelfths {
left: 83.3333333333%;
}
.widescreen--push-eleven-twelfths {
left: 91.6666666667%;
}
}
.grid__item.clear {
clear: both;
}
[data-grid-flex] {
display: flex;
flex-flow: row wrap;
}
[data-grid-offset]:after {
content: "" !important;
position: static;
}
[data-grid] {
position: relative;
width: calc(100% - var(--gutter-offset));
margin: 0 calc(var(--gutter-offset) / 2);
}
[data-grid][data-grid-no-gutters] {
padding: 0 calc(var(--gutter) / 2);
}
[data-grid]:not([data-grid-no-gutters]) [data-item] {
padding: 0 calc(var(--gutter) / 2);
}
[data-grid] [data-item].index__column {
padding-bottom: 30px;
}
[data-grid][data-grid-large] [data-item] {
width: calc(100% / var(--grid-large-items));
}
[data-grid] .article__card {
margin-top: 0;
}
@media only screen and (max-width: 1099px) {
[data-grid][data-grid-large] [data-item] {
width: 25%;
}
[data-grid][data-grid-medium] [data-item] {
width: calc(100% / var(--grid-medium-items));
}
}
@media only screen and (max-width: 767px) {
[data-grid]:not([data-grid-no-gutters]), [data-grid][data-grid-no-gutters], [data-grid] {
position: relative;
width: calc(100% + var(--outer) * 2);
margin: 0 var(--outer-offset);
padding-right: 0;
padding-left: var(--outer);
scroll-padding: var(--outer);
}
[data-grid]:not([data-grid-no-gutters]):after, [data-grid][data-grid-no-gutters]:after, [data-grid]:after {
content: "";
display: block;
padding-right: var(--outer);
position: relative;
}
[data-grid]:not([data-grid-no-gutters]) [data-item], [data-grid][data-grid-no-gutters] [data-item], [data-grid] [data-item] {
padding: 0;
margin-left: 0;
}
[data-grid]:not([data-grid-no-gutters]).flickity-enabled, [data-grid][data-grid-no-gutters].flickity-enabled, [data-grid].flickity-enabled {
padding-right: var(--outer);
}
[data-grid]:not([data-grid-no-gutters]).flickity-enabled [data-item], [data-grid][data-grid-no-gutters].flickity-enabled [data-item], [data-grid].flickity-enabled [data-item] {
width: calc(100% / var(--grid-small-items) - var(--gutter) / var(--grid-small-items) * (var(--grid-small-items) - 1));
}
[data-grid]:not([data-grid-no-gutters]) .flickity-viewport, [data-grid][data-grid-no-gutters] .flickity-viewport, [data-grid] .flickity-viewport {
overflow: visible;
}
[data-grid]:not([data-grid-no-gutters]) [data-item], [data-grid][data-grid-no-gutters] .grid__item {
margin-right: calc(var(--gutter) + 1px);
}
[data-grid]:not([data-grid-no-gutters]) [data-item]:last-child, [data-grid][data-grid-no-gutters] .grid__item:last-child {
margin-right: 0;
}
[data-grid] [data-item].index__column {
padding-bottom: 30px;
}
[data-grid][data-grid-large] [data-item], [data-grid][data-grid-medium] [data-item] {
width: 50%;
}
[data-grid][data-grid-small] [data-item] {
width: calc((100% - var(--outer)) / var(--grid-small-items) - (var(--gutter) - 1px / var(--grid-small-items) * (var(--grid-small-items) - 1)));
}
}
@media only screen and (max-width: 1099px) {
.section-no-slider-mobile [data-grid] {
margin: 0 auto;
padding-right: calc(var(--outer) - var(--gutter));
padding-left: 0;
}
}
@media only screen and (max-width: 479px) {
.section-no-slider-mobile [data-grid] {
margin: 0 auto;
padding-right: 0;
padding-left: 0;
}
}
@media only screen and (max-width: 767px) {
[data-custom-scrollbar-items] {
margin-right: calc(var(--outer) * -1);
margin-left: calc(var(--outer) * -1);
scroll-snap-type: x mandatory;
overflow: hidden;
overflow-x: auto;
display: flex;
flex-flow: row nowrap !important;
scroll-behavior: smooth;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none;
touch-action: auto;
scroll-padding: max(var(--outer) - var(--IMAGE-SPACING), 0px);
}
[data-custom-scrollbar-items]::-webkit-scrollbar {
display: none;
}
[data-custom-scrollbar-items] .product__media:first-child {
margin-left: max(var(--outer) - var(--IMAGE-SPACING), 0px);
}
[data-custom-scrollbar-items] > * {
flex: 0 0 auto;
scroll-snap-align: start;
}
[data-custom-scrollbar-items]:after {
content: "";
display: block;
position: relative;
padding: 0 calc(max(var(--outer) - var(--IMAGE-SPACING), 0px) / 2);
}
}
/* ============================================================================
#Typography
============================================================================== */
/* stylelint-disable selector-list-comma-newline-after */
:root {
--leading-none: 1;
--leading-hairline: 1.25;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
}
.accent-title {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
}
.accent-title .strong, .accent-title.strong, .accent-title strong {
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
}
.accent-title-large {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-4) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
}
.accent-title-large .strong, .accent-title-large.strong, .accent-title-large strong {
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
}
.body-size-1,
.body-size-2,
.body-size-3,
.body-size-4,
.body-size-5,
.body-size-6,
.body-size-7,
.body-size-8,
.body-size-9,
.body-size-10,
.body-size-11,
.body-size-12,
.body-size-13,
.body-size-14,
.body-size-15 {
font-family: var(--FONT-STACK-BODY);
font-style: var(--FONT-STYLE-BODY);
font-weight: var(--FONT-WEIGHT-BODY);
letter-spacing: var(--FONT-BODY-LETTER-SPACING);
text-transform: var(--FONT-BODY-TRANSFORM);
}
.body-size-1 .strong, .body-size-1.strong, .body-size-1 strong,
.body-size-2 .strong,
.body-size-2.strong,
.body-size-2 strong,
.body-size-3 .strong,
.body-size-3.strong,
.body-size-3 strong,
.body-size-4 .strong,
.body-size-4.strong,
.body-size-4 strong,
.body-size-5 .strong,
.body-size-5.strong,
.body-size-5 strong,
.body-size-6 .strong,
.body-size-6.strong,
.body-size-6 strong,
.body-size-7 .strong,
.body-size-7.strong,
.body-size-7 strong,
.body-size-8 .strong,
.body-size-8.strong,
.body-size-8 strong,
.body-size-9 .strong,
.body-size-9.strong,
.body-size-9 strong,
.body-size-10 .strong,
.body-size-10.strong,
.body-size-10 strong,
.body-size-11 .strong,
.body-size-11.strong,
.body-size-11 strong,
.body-size-12 .strong,
.body-size-12.strong,
.body-size-12 strong,
.body-size-13 .strong,
.body-size-13.strong,
.body-size-13 strong,
.body-size-14 .strong,
.body-size-14.strong,
.body-size-14 strong,
.body-size-15 .strong,
.body-size-15.strong,
.body-size-15 strong {
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
}
.body-size-1 {
font-size: calc(var(--font-1) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-relaxed);
}
.body-size-2 {
font-size: calc(var(--font-2) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-relaxed);
}
.body-size-3 {
font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
}
.body-size-4 {
font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
}
.body-size-5 {
font-size: calc(var(--font-5) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-snug);
}
.body-size-6 {
font-size: calc(var(--font-6) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-snug);
}
.body-size-7 {
font-size: calc(var(--font-7) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-snug);
}
.body-size-8 {
font-size: calc(var(--font-8) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-tight);
}
.body-size-9 {
font-size: calc(var(--font-9) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-tight);
}
.body-size-10 {
font-size: calc(var(--font-10) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-tight);
}
.body-size-11 {
font-size: calc(var(--font-11) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-hairline);
}
.body-size-12 {
font-size: calc(var(--font-12) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-hairline);
}
.body-size-13 {
font-size: calc(var(--font-13) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-hairline);
}
.body-size-14 {
font-size: calc(var(--font-14) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-none);
}
.body-size-15 {
font-size: calc(var(--font-15) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-none);
}
.accent-size-1,
.accent-size-2,
.accent-size-3,
.accent-size-4,
.accent-size-5,
.accent-size-6,
.accent-size-7,
.accent-size-8,
.accent-size-9,
.accent-size-10,
.accent-size-11,
.accent-size-12,
.accent-size-13,
.accent-size-14,
.accent-size-15 {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
}
.accent-size-1 .strong, .accent-size-1.strong, .accent-size-1 strong,
.accent-size-2 .strong,
.accent-size-2.strong,
.accent-size-2 strong,
.accent-size-3 .strong,
.accent-size-3.strong,
.accent-size-3 strong,
.accent-size-4 .strong,
.accent-size-4.strong,
.accent-size-4 strong,
.accent-size-5 .strong,
.accent-size-5.strong,
.accent-size-5 strong,
.accent-size-6 .strong,
.accent-size-6.strong,
.accent-size-6 strong,
.accent-size-7 .strong,
.accent-size-7.strong,
.accent-size-7 strong,
.accent-size-8 .strong,
.accent-size-8.strong,
.accent-size-8 strong,
.accent-size-9 .strong,
.accent-size-9.strong,
.accent-size-9 strong,
.accent-size-10 .strong,
.accent-size-10.strong,
.accent-size-10 strong,
.accent-size-11 .strong,
.accent-size-11.strong,
.accent-size-11 strong,
.accent-size-12 .strong,
.accent-size-12.strong,
.accent-size-12 strong,
.accent-size-13 .strong,
.accent-size-13.strong,
.accent-size-13 strong,
.accent-size-14 .strong,
.accent-size-14.strong,
.accent-size-14 strong,
.accent-size-15 .strong,
.accent-size-15.strong,
.accent-size-15 strong {
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
}
.accent-size-1 {
font-size: calc(var(--font-1) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-relaxed);
}
.accent-size-2 {
font-size: calc(var(--font-2) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-relaxed);
}
.accent-size-3 {
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
}
.accent-size-4 {
font-size: calc(var(--font-4) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
}
.accent-size-5 {
font-size: calc(var(--font-5) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-snug);
}
.accent-size-6 {
font-size: calc(var(--font-6) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-snug);
}
.accent-size-7 {
font-size: calc(var(--font-7) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-snug);
}
.accent-size-8 {
font-size: calc(var(--font-8) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-tight);
}
.accent-size-9 {
font-size: calc(var(--font-9) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-tight);
}
.accent-size-10 {
font-size: calc(var(--font-10) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-tight);
}
.accent-size-11 {
font-size: calc(var(--font-11) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-hairline);
}
.accent-size-12 {
font-size: calc(var(--font-12) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-hairline);
}
.accent-size-13 {
font-size: calc(var(--font-13) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-hairline);
}
.accent-size-14 {
font-size: calc(var(--font-14) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-none);
}
.accent-size-15 {
font-size: calc(var(--font-15) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-none);
}
.heading-size-1,
.heading-size-2,
.heading-size-3,
.heading-size-4,
.heading-size-5,
.heading-size-6,
.heading-size-7,
.heading-size-8,
.heading-size-9,
.heading-size-10,
.heading-size-11,
.heading-size-12,
.heading-size-13,
.heading-size-14,
.heading-size-15 {
font-family: var(--FONT-STACK-HEADING);
font-style: var(--FONT-STYLE-HEADING);
font-weight: var(--FONT-WEIGHT-HEADING);
letter-spacing: var(--FONT-HEADING-LETTER-SPACING);
text-transform: var(--FONT-HEADING-TRANSFORM);
}
.heading-size-1 .strong, .heading-size-1.strong, .heading-size-1 strong,
.heading-size-2 .strong,
.heading-size-2.strong,
.heading-size-2 strong,
.heading-size-3 .strong,
.heading-size-3.strong,
.heading-size-3 strong,
.heading-size-4 .strong,
.heading-size-4.strong,
.heading-size-4 strong,
.heading-size-5 .strong,
.heading-size-5.strong,
.heading-size-5 strong,
.heading-size-6 .strong,
.heading-size-6.strong,
.heading-size-6 strong,
.heading-size-7 .strong,
.heading-size-7.strong,
.heading-size-7 strong,
.heading-size-8 .strong,
.heading-size-8.strong,
.heading-size-8 strong,
.heading-size-9 .strong,
.heading-size-9.strong,
.heading-size-9 strong,
.heading-size-10 .strong,
.heading-size-10.strong,
.heading-size-10 strong,
.heading-size-11 .strong,
.heading-size-11.strong,
.heading-size-11 strong,
.heading-size-12 .strong,
.heading-size-12.strong,
.heading-size-12 strong,
.heading-size-13 .strong,
.heading-size-13.strong,
.heading-size-13 strong,
.heading-size-14 .strong,
.heading-size-14.strong,
.heading-size-14 strong,
.heading-size-15 .strong,
.heading-size-15.strong,
.heading-size-15 strong {
font-weight: var(--FONT-WEIGHT-HEADING-BOLD);
}
.heading-size-1 {
font-size: calc(var(--font-1) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-relaxed);
}
.heading-size-2 {
font-size: calc(var(--font-2) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-relaxed);
}
.heading-size-3 {
font-size: calc(var(--font-3) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-normal);
}
.heading-size-4 {
font-size: calc(var(--font-4) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-normal);
}
.heading-size-5 {
font-size: calc(var(--font-5) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-snug);
}
.heading-size-6 {
font-size: calc(var(--font-6) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-snug);
}
.heading-size-7 {
font-size: calc(var(--font-7) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-snug);
}
.heading-size-8 {
font-size: calc(var(--font-8) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-tight);
}
.heading-size-9 {
font-size: calc(var(--font-9) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-tight);
}
.heading-size-10 {
font-size: calc(var(--font-10) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-tight);
}
.heading-size-11 {
font-size: calc(var(--font-11) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-hairline);
}
.heading-size-12 {
font-size: calc(var(--font-12) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-hairline);
}
.heading-size-13 {
font-size: calc(var(--font-13) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-hairline);
}
.heading-size-14 {
font-size: calc(var(--font-14) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-none);
}
.heading-size-15 {
font-size: calc(var(--font-15) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-none);
}
/* ============================================================================
#HTML Standard Elements
============================================================================== */
/* stylelint-disable selector-list-comma-newline-after */
/* REM baseline, used for padding, not typography */
html {
font-size: 16px;
scroll-behavior: smooth;
--scroll-behavior: smooth;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
html {
font-size: 15px;
}
}
@media only screen and (max-width: 479px) {
html {
font-size: 14px;
}
}
body {
font-family: var(--FONT-STACK-BODY);
font-style: var(--FONT-STYLE-BODY);
font-weight: var(--FONT-WEIGHT-BODY);
letter-spacing: var(--FONT-BODY-LETTER-SPACING);
text-transform: var(--FONT-BODY-TRANSFORM);
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
color: var(--text);
}
body,
input,
textarea,
select,
.popout__toggle {
font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
color: var(--text);
}
/* ================ Title font ================ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--FONT-STACK-HEADING);
font-style: var(--FONT-STYLE-HEADING);
font-weight: var(--FONT-WEIGHT-HEADING);
letter-spacing: var(--FONT-HEADING-LETTER-SPACING);
text-transform: var(--FONT-HEADING-TRANSFORM);
}
h1 .strong, h1.strong, h1 strong, h2 .strong, h2.strong, h2 strong, h3 .strong, h3.strong, h3 strong, h4 .strong, h4.strong, h4 strong, h5 .strong, h5.strong, h5 strong, h6 .strong, h6.strong, h6 strong {
font-weight: var(--FONT-WEIGHT-HEADING-BOLD);
}
h1 {
font-size: calc(var(--font-10) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-tight);
}
h2 {
font-size: calc(var(--font-9) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-tight);
}
h3 {
font-size: calc(var(--font-8) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-tight);
}
h4 {
font-size: calc(var(--font-7) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-snug);
}
h5 {
font-size: calc(var(--font-6) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-snug);
}
h6 {
font-size: calc(var(--font-5) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-snug);
}
small {
font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
}
/* ================ Body elements ================ */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.75em;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
text-decoration: none;
font-weight: inherit;
}
.rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6 {
margin: 0.75em 0 0 0;
}
p {
margin: 0;
}
em,
.em {
font-style: italic;
}
b,
strong,
.strong {
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
}
sup,
sub,
.sup,
.sub {
position: relative;
font-size: calc(var(--font-1) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-relaxed);
vertical-align: baseline;
}
sup,
.sup {
top: -0.5em;
}
sub,
.sub {
bottom: -0.5em;
}
s,
.s {
text-decoration: line-through;
opacity: 0.5;
}
/* ================ Blockquotes ================ */
blockquote {
font-size: calc(var(--font-5) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-snug);
font-style: italic;
margin: 0 0 var(--gutter);
padding: 0 var(--gutter);
border-left: 1px solid var(--border);
}
blockquote p {
margin-bottom: 0;
}
blockquote p + cite {
margin-top: calc(var(--gutter) / 2);
}
blockquote cite {
display: block;
font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
}
blockquote cite:before {
content: "— ";
}
/* ================ Code ================ */
code,
pre {
font-family: Consolas, monospace;
font-size: 1em;
border: 0 none;
border-left: 1px solid var(--border);
padding: 0 2px;
}
pre {
overflow: auto;
padding: var(--inner);
margin: 0 0 var(--gutter);
}
.unicode {
font-family: "Lucida Sans Unicode", "Arial Unicode MS, Arial";
}
/* ================ Horizontal Rules ================ */
hr {
clear: both;
border-top: solid var(--border);
border-width: 1px 0 0;
margin: var(--gutter) 0;
height: 0;
}
hr.hr--small {
margin: calc(var(--gutter) / 2) 0;
}
hr.hr--none {
margin: 0;
}
hr.hr--double {
margin: calc(var(--gutter) * 2) 0;
}
hr.hr--clear {
border-top-color: transparent;
}
hr.hr--dash {
margin: var(--gutter) auto;
width: 80px;
}
hr.hr--thick {
border-width: 2px 0 0;
}
hr.hr--underline {
margin-top: 10px;
margin-bottom: 20px;
}
/* ============================================================================
#Lists
============================================================================== */
ul,
ol {
margin: 0 0 var(--gutter);
padding: 0;
}
ul {
list-style: none outside;
}
ol {
list-style: decimal;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin: 4px 0 5px 20px;
}
li {
margin-bottom: 0.25em;
}
ol,
ul.square,
ul.disc {
margin-left: 20px;
}
ul.square {
list-style: square outside;
}
ul.disc {
list-style: disc outside;
}
ol.alpha {
list-style: lower-alpha outside;
}
.inline-list li {
display: inline-block;
margin-bottom: 0;
}
/* ============================================================================
#Basic Styles
============================================================================== */
:root {
--gutter: var(--LAYOUT-GUTTER);
--outer: var(--LAYOUT-OUTER);
--inner: 20px;
--nav-gutter: var(--NAV-GUTTER);
--gutter-offset: var(--LAYOUT-GUTTER-OFFSET);
--outer-offset: calc(var(--LAYOUT-OUTER) * -1);
--radius-sm: 3px;
--radius-md: 12px;
--radius-lg: 36px;
/* New grid minus card-specific vars */
--page-width: var(--LAYOUT-WIDTH);
--grid-xl: 50px;
--grid-lg: 32px;
--grid-md: 22px;
--grid-sm: 16px;
--grid-0: 0px;
--grid-standard-page-margin: var(--outer);
--grid-standard-gutter: var(--gutter);
--grid-page-margin: var(--grid-standard-page-margin);
--grid-gutter: var(--grid-standard-gutter);
}
@media only screen and (min-width: 768px) and (max-width: 1099px) {
:root {
--grid-xl: 32px;
--grid-lg: 22px;
--grid-md: 18px;
--grid-sm: 12px;
--inner: 18px;
--gutter: calc(var(--LAYOUT-GUTTER) * 0.8);
--outer: calc(var(--LAYOUT-OUTER) * 0.8);
--gutter-offset: calc(var(--LAYOUT-GUTTER-OFFSET) * 0.8);
--outer-offset: calc(var(--LAYOUT-OUTER) * -0.8);
}
}
@media only screen and (max-width: 767px) {
:root {
--grid-xl: 22px;
--grid-lg: 22px;
--grid-md: 16px;
--grid-sm: 12px;
--inner: 16px;
--gutter: calc(var(--LAYOUT-GUTTER) * 0.6);
--outer: calc(var(--LAYOUT-OUTER) * 0.6);
--gutter-offset: calc(var(--LAYOUT-GUTTER-OFFSET) * 0.6);
--outer-offset: calc(var(--LAYOUT-OUTER) * -0.6);
}
}
@media only screen and (max-width: 479px) {
:root {
--grid-xl: 16px;
--grid-lg: 16px;
--grid-md: 16px;
--grid-sm: 12px;
--inner: 16px;
--gutter: max(calc(var(--LAYOUT-GUTTER) * 0.6), 16px);
--outer: 16px;
--gutter-offset: min(calc(var(--LAYOUT-GUTTER-OFFSET) * 0.6), -16px);
--outer-offset: -16px;
}
}
:root {
--max-w-page: var(--LAYOUT-WIDTH);
--max-w-page-narrow: 50%;
--max-w-page-tiny: 33%;
}
@media only screen and (max-width: 1099px) {
:root {
--max-w-page-narrow: 66%;
}
}
@media only screen and (max-width: 767px) {
:root {
--max-w-page-narrow: 100%;
}
}
@media only screen and (min-width: 1100px) and (max-width: 1399px) {
:root {
--max-w-page-tiny: 45%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1099px) {
:root {
--max-w-page-tiny: 55%;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
:root {
--max-w-page-tiny: 66%;
}
}
@media only screen and (max-width: 479px) {
:root {
--max-w-page-tiny: 100%;
}
}
[tabindex="-1"]:focus {
outline: none;
}
[data-scroll-locked] body {
width: 100vw;
}
[data-scroll-locked] .js__header__stuck,
[data-scroll-locked] .theme__header,
[data-scroll-locked] .search-popdown {
padding-right: var(--scrollbar-width);
}
.wrapper--none:after {
content: "";
display: table;
clear: both;
}
.wrapper, .wrapper .grandparent .header__dropdown__wrapper {
width: 100%;
max-width: var(--LAYOUT-WIDTH);
margin: 0 auto;
padding-left: var(--outer);
padding-right: var(--outer);
}
.wrapper:after, .wrapper .grandparent .header__dropdown__wrapper:after {
content: "";
display: table;
clear: both;
}
.wrapper--full, .wrapper--full .grandparent .header__dropdown__wrapper {
max-width: none;
margin: 0 auto;
padding-left: var(--outer);
padding-right: var(--outer);
width: 100%;
}
.wrapper--full:after, .wrapper--full .grandparent .header__dropdown__wrapper:after {
content: "";
display: table;
clear: both;
}
.wrapper--narrow {
margin: 0 auto;
padding-left: var(--outer);
padding-right: var(--outer);
width: 100%;
max-width: 50%;
}
.wrapper--narrow:after {
content: "";
display: table;
clear: both;
}
@media only screen and (max-width: 1099px) {
.wrapper--narrow {
max-width: 66%;
}
}
@media only screen and (max-width: 767px) {
.wrapper--narrow {
max-width: 100%;
}
}
.wrapper--tiny {
margin: 0 auto;
padding-left: var(--outer);
padding-right: var(--outer);
width: 100%;
max-width: 33%;
}
.wrapper--tiny:after {
content: "";
display: table;
clear: both;
}
@media only screen and (min-width: 1100px) and (max-width: 1399px) {
.wrapper--tiny {
max-width: 45%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1099px) {
.wrapper--tiny {
max-width: 55%;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.wrapper--tiny {
max-width: 66%;
}
}
@media only screen and (max-width: 479px) {
.wrapper--tiny {
max-width: 100%;
}
}
.main-content {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.main-content .announcement__wrapper {
z-index: unset;
}
.main-content > .shopify-section:only-child {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.main-content > .shopify-section:only-child .section-padding {
flex-grow: 1;
}
.hero__content__wrapper.section-padding,
.brick__section .section-padding,
.section-padding,
.section-without-title:not(.section-without-title--skip) {
--padding-top: var(--PT);
--padding-bottom: var(--PB);
padding-top: var(--padding-top);
padding-bottom: var(--padding-bottom);
}
@media only screen and (min-width: 768px) and (max-width: 1099px) {
.hero__content__wrapper.section-padding,
.brick__section .section-padding,
.section-padding,
.section-without-title:not(.section-without-title--skip) {
--padding-top: calc(var(--PT) * 0.8);
--padding-bottom: calc(var(--PB) * 0.8);
}
}
@media only screen and (max-width: 767px) {
.hero__content__wrapper.section-padding,
.brick__section .section-padding,
.section-padding,
.section-without-title:not(.section-without-title--skip) {
--padding-top: calc(var(--PT) * 0.6);
--padding-bottom: calc(var(--PB) * 0.6);
}
}
.section-padding-custom {
--padding-top: var(--PT);
--padding-bottom: var(--PB);
}
@media only screen and (min-width: 768px) and (max-width: 1099px) {
.section-padding-custom {
--padding-top: calc(var(--PT) * 0.8);
--padding-bottom: calc(var(--PB) * 0.8);
}
}
@media only screen and (max-width: 767px) {
.section-padding-custom {
--padding-top: calc(var(--PT) * 0.6);
--padding-bottom: calc(var(--PB) * 0.6);
}
}
.section-without-title:not(.section-without-title--skip) {
--arrows-height: 36px;
}
.section-without-title:not(.section-without-title--skip).hidden-arrows {
--arrows-height: 0;
}
.section-without-title:not(.section-without-title--skip) .section-padding {
padding-top: 0;
padding-bottom: 0;
}
.section-without-title:not(.not-moved-arrows):not(.hidden-arrows):not(.section-without-title--skip) {
--arrows-margin-offset: max(calc(var(--gutter) * 2 + var(--arrows-height)), var(--padding-top));
padding-top: var(--arrows-margin-offset);
}
@media only screen and (max-width: 767px) {
.section-without-title:not(.not-moved-arrows):not(.hidden-arrows):not(.section-without-title--skip).section-without-padding-mobile {
padding-top: var(--padding-top);
}
}
.section-without-title:not(.not-moved-arrows):not(.hidden-arrows):not(.section-without-title--skip) .wrapper--full [data-carousel] .flickity-button, .wrapper--full .grandparent .section-without-title:not(.not-moved-arrows):not(.hidden-arrows):not(.section-without-title--skip) .header__dropdown__wrapper [data-carousel] .flickity-button,
.section-without-title:not(.not-moved-arrows):not(.hidden-arrows):not(.section-without-title--skip) .wrapper--full [data-carousel]:first-child .flickity-button,
.section-without-title:not(.not-moved-arrows):not(.hidden-arrows):not(.section-without-title--skip) .wrapper--none [data-carousel] .flickity-button,
.section-without-title:not(.not-moved-arrows):not(.hidden-arrows):not(.section-without-title--skip) .wrapper--none [data-carousel]:first-child .flickity-button {
margin-bottom: calc(var(--arrows-margin-offset) / 2 - var(--arrows-height) / 2);
}
.list__collections [data-grid] {
display: flex;
flex-wrap: wrap;
margin-bottom: calc(var(--gutter) * -1);
}
@media only screen and (min-width: 768px) {
.list__collections [data-grid]:not([data-carousel]) {
overflow: hidden;
}
}
.list__collections [data-grid] + * {
margin-top: max(var(--gutter), 20px);
}
.list__collections [data-grid] .grid__item {
margin-bottom: var(--gutter);
}
.list__collections [data-grid] .collection-grid-item {
margin-bottom: 0;
}
/* ============================================================================
Icons
============================================================================== */
.icon {
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
fill: currentColor;
}
.icon-stateful {
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
fill: currentColor;
}
.icon-theme {
display: flex;
align-items: center;
width: 1em;
height: 1em;
}
.icon-theme-stroke {
fill: none;
stroke: currentColor;
stroke-miterlimit: 10;
stroke-width: var(--ICON-STROKE-WIDTH);
}
.icon-theme-fill {
fill: currentColor;
stroke: none;
}
.icon-social {
display: flex;
align-items: center;
width: 1em;
height: 1em;
}
.collection__layout .icon-theme {
fill: currentColor;
stroke: none;
stroke-width: 0;
}
.navlink .icon-theme {
stroke-width: min(var(--ICON-STROKE-WIDTH), 2.2px);
}
.icon-cart-full {
fill: none;
stroke: none;
stroke-width: 0;
}
[data-header-cart-full=true] .icon-cart-full {
fill: var(--primary);
stroke: none;
stroke-width: 0;
}
.pswp__button .icon-theme {
font-size: 45px;
stroke-width: calc(var(--ICON-STROKE-WIDTH) / 2);
}
/* ============================================================================
#Rich Text Editor
============================================================================== */
.rte:not([class*=body-size-], [class*=accent-size-], [class*=heading-size-]) {
font-size: calc(var(--font-5) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-snug);
}
.rte:not([class*=body-size-], [class*=accent-size-], [class*=heading-size-]) p {
font-size: calc(var(--font-5) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-snug);
}
*[class*=-size-] > p,
.rte *[class*=-size-] > p {
font-size: inherit;
}
.rte {
margin-bottom: var(--space-5);
word-wrap: break-word;
/* Add some top margin to headers from the rich text editor */
}
.rte:last-child {
margin-bottom: 0;
}
.rte h1:first-child,
.rte h2:first-child,
.rte h3:first-child,
.rte h4:first-child,
.rte h5:first-child,
.rte h6:first-child {
margin-top: 0;
}
.rte > div {
margin-bottom: var(--inner);
}
.rte ul,
.rte ol {
margin-left: 20px;
}
.rte ul:last-child,
.rte ol:last-child {
margin-bottom: 0;
}
.rte ul {
list-style: disc outside;
}
.rte ul ul,
.rte ol ul {
list-style-type: circle;
}
.rte ol ol ul,
.rte ol ul ul,
.rte ul ol ul,
.rte ul ul ul {
list-style-type: square;
}
.rte li {
text-align: left;
margin-bottom: 0.4em;
}
.rte li:last-child {
margin-bottom: 0;
}
.rte img {
max-width: 100%;
height: auto;
}
.rte p img {
margin: 0;
}
.rte img[style*="float: left"],
.rte img[style*="float:left"] {
margin-right: calc(var(--gutter) / 2);
}
.rte img[style*="float: right"],
.rte img[style*="float:right"] {
margin-left: calc(var(--gutter) / 2);
}
.rte a:not([class]) {
text-decoration: underline;
}
.rte a:not([class]):hover {
text-decoration: none;
}
.rte p {
margin: 0 0 var(--space-4);
}
.rte p:last-child {
margin-bottom: 0;
}
.rte--lock-font h1,
.rte--lock-font h2,
.rte--lock-font h3,
.rte--lock-font h4,
.rte--lock-font h5,
.rte--lock-font h6 {
margin: 0 0 var(--space-4);
font-family: inherit;
line-height: inherit;
font-weight: inherit;
font-style: inherit;
letter-spacing: inherit;
text-transform: inherit;
}
.rte--lock-font h1:last-child,
.rte--lock-font h2:last-child,
.rte--lock-font h3:last-child,
.rte--lock-font h4:last-child,
.rte--lock-font h5:last-child,
.rte--lock-font h6:last-child {
margin-bottom: 0;
}
.rte--lock-size h1,
.rte--lock-size h2,
.rte--lock-size h3,
.rte--lock-size h4,
.rte--lock-size h5,
.rte--lock-size h6 {
font-size: inherit;
}
.product-tabs .tab-content a {
text-decoration: underline;
}
.product-tabs .tab-content a:after {
display: none;
}
.product-tabs .tab-content a:hover {
text-decoration: none;
}
.rte__table-wrapper {
max-width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/* ============================================================================
#Tables
============================================================================== */
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
table.table-full-width {
width: 100%;
margin-bottom: 1em;
}
.table-wrap {
max-width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
th {
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
border-bottom: 1px solid var(--border);
}
th,
td {
border-bottom: 1px solid var(--border);
text-align: left;
padding: var(--inner);
}
th:first-child,
td:first-child {
padding-left: 0;
}
th:last-child,
td:last-child {
padding-right: 0;
}
table[border] td:first-child,
table[border] th:first-child,
table[border] td:last-child,
table[border] td:last-child {
padding: var(--inner);
}
.table--responsive tbody {
border-top: 1px solid var(--border);
}
.table--responsive tbody td:not(:first-child) {
border-top: 1px solid var(--hairline);
}
.table--responsive tfoot {
border-top: 2px solid var(--border);
border-bottom: 2px solid var(--border);
}
@media only screen and (max-width: 479px) {
.table--responsive thead {
display: none;
}
.table--responsive tr {
display: block;
}
.table--responsive tr,
.table--responsive td {
float: left;
clear: both;
width: 100%;
border-bottom: none;
}
.table--responsive th,
.table--responsive td {
border: none;
display: block;
text-align: right;
padding: 10px 0;
}
.table--responsive td:before {
content: attr(data-label);
float: left;
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
padding-right: 10px;
}
.table--small-hide {
display: none !important;
}
.table__section + .table__section {
position: relative;
margin-top: 10px;
padding-top: 15px;
}
.table__section + .table__section:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 15px;
right: 15px;
border-bottom: 1px solid var(--border);
}
}
/* ============================================================================
#Links and Buttons
three button styles:
standard - full color - darkens on hover
outline - turns to full color on hover
soft - turns to full color on hover
Color modifiers
Starts as secondary accent color
modifier for primary color
modifier for text color
modifier for contrast (full white or full black)
dark modifier doubles color mods
style modifiers
100% width
small
large
border-radius-0
watches outer wrapper for dark/light
============================================================================== */
.btn, .shopify-challenge__button,
.btn--soft {
font-family: var(--TYPE-STACK-BUTTON);
font-style: var(--TYPE-STYLE-BUTTON);
font-weight: var(--TYPE-WEIGHT-BUTTON);
text-transform: var(--FONT-BUTTON-TRANSFORM);
letter-spacing: var(--FONT-BUTTON-LETTER-SPACING);
display: inline-block;
padding: var(--space-5) var(--space-8);
margin: 0;
line-height: 1;
text-decoration: none;
text-align: center;
vertical-align: middle;
border: none;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: var(--BUTTON-RADIUS);
font-size: calc(var(--font-3) * var(--TYPE-ADJUST-BUTTON));
background-color: var(--btn-bg);
color: var(--btn-text);
transition: background-color 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.btn:hover, .shopify-challenge__button:hover, .btn:active, .shopify-challenge__button:active, .btn:focus, .shopify-challenge__button:focus,
.btn--soft:hover,
.btn--soft:active,
.btn--soft:focus {
color: var(--btn-text-hover);
background-color: var(--btn-bg-hover);
}
.btn, .shopify-challenge__button {
--btn-bg: var(--text);
--btn-text: var(--bg);
--btn-bg-hover: var(--hover);
--btn-text-hover: var(--bg);
}
.btn--neutral.btn, .btn--neutral.shopify-challenge__button {
--btn-bg: var(--COLOR-TEXT);
--btn-text: var(--COLOR-BG);
--btn-bg-hover: var(--COLOR-A95);
--btn-text-hover: var(--COLOR-BG);
}
.btn--invert.btn, .btn--invert.shopify-challenge__button {
--btn-bg: var(--INVERSE-TEXT);
--btn-text: var(--INVERSE-BG);
--btn-bg-hover: var(--INVERSE-A95);
--btn-text-hover: var(--INVERSE-BG);
}
.btn--black.btn, .btn--black.shopify-challenge__button {
--btn-bg: #000;
--btn-text: #FFF;
--btn-bg-hover: #000;
--btn-text-hover: #F7F7F7;
}
.btn--primary.btn, .shopify-challenge__button {
--btn-bg: var(--COLOR-PRIMARY);
--btn-text: var(--COLOR-PRIMARY-OPPOSITE);
--btn-bg-hover: var(--COLOR-PRIMARY-HOVER);
--btn-text-hover: var(--COLOR-PRIMARY-OPPOSITE);
}
.btn--secondary.btn, .btn--secondary.shopify-challenge__button {
--btn-bg: var(--COLOR-SECONDARY);
--btn-text: var(--COLOR-SECONDARY-OPPOSITE);
--btn-bg-hover: var(--COLOR-SECONDARY-HOVER);
--btn-text-hover: var(--COLOR-SECONDARY-OPPOSITE);
}
.btn--white.btn, .btn--white.shopify-challenge__button {
--btn-bg: #FFF;
--btn-text: #000;
--btn-bg-hover: #FFF;
--btn-text-hover: #333;
}
.btn--invert--primary.btn, .btn--invert--primary.shopify-challenge__button {
--btn-bg: var(--INVERSE-PRIMARY);
--btn-text: var(--INVERSE-PRIMARY-OPPOSITE);
--btn-bg-hover: var(--INVERSE-PRIMARY-HOVER);
--btn-text-hover: var(--INVERSE-PRIMARY-OPPOSITE);
}
.btn--invert--secondary.btn, .btn--invert--secondary.shopify-challenge__button {
--btn-bg: var(--INVERSE-SECONDARY);
--btn-text: var(--INVERSE-SECONDARY-OPPOSITE);
--btn-bg-hover: var(--INVERSE-SECONDARY-HOVER);
--btn-text-hover: var(--INVERSE-SECONDARY-OPPOSITE);
}
.btn--soft {
--btn-bg: var(--hairline);
--btn-text: var(--text);
--btn-bg-hover: var(--hairline-hover);
--btn-text-hover: var(--text);
}
.btn--neutral.btn--soft {
--btn-bg: var(--COLOR-A5);
--btn-text: var(--COLOR-TEXT);
--btn-bg-hover: var(--COLOR-A10);
--btn-text-hover: var(--COLOR-TEXT);
}
.btn--invert.btn--soft {
--btn-bg: var(--INVERSE-A5);
--btn-text: var(--INVERSE-TEXT);
--btn-bg-hover: var(--INVERSE-A10);
--btn-text-hover: var(--INVERSE-TEXT);
}
.btn--black.btn--soft {
--btn-bg: rgb(0 0 0 / 5%);
--btn-text: #000;
--btn-bg-hover: rgb(0 0 0 / 10%);
--btn-text-hover: #000;
}
.btn--primary.btn--soft, .btn--soft.shopify-challenge__button {
--btn-bg: var(--COLOR-PRIMARY-FADE);
--btn-text: var(--COLOR-PRIMARY);
--btn-bg-hover: var(--COLOR-PRIMARY-FADE-HOVER);
--btn-text-hover: var(--COLOR-PRIMARY);
}
.btn--secondary.btn--soft {
--btn-bg: var(--COLOR-SECONDARY-FADE);
--btn-text: var(--COLOR-SECONDARY);
--btn-bg-hover: var(--COLOR-SECONDARY-FADE-HOVER);
--btn-text-hover: var(--COLOR-SECONDARY);
}
.btn--white.btn--soft {
--btn-bg: rgb(255 255 255 / 5%);
--btn-text: #FFF;
--btn-bg: rgb(255 255 255 / 10%);
--btn-text-hover: #FFF;
}
.btn--invert--primary.btn--soft {
--btn-bg: var(--INVERSE-PRIMARY-FADE);
--btn-text: var(--INVERSE-PRIMARY);
--btn-bg-hover: var(--INVERSE-PRIMARY-FADE-HOVER);
--btn-text-hover: var(--INVERSE-PRIMARY);
}
.btn--invert--secondary.btn--soft {
--btn-bg: var(--INVERSE-SECONDARY-FADE);
--btn-text: var(--INVERSE-SECONDARY);
--btn-bg-hover: var(--INVERSE-SECONDARY-FADE-HOVER);
--btn-text-hover: var(--INVERSE-SECONDARY);
}
.btn--outline {
font-family: var(--TYPE-STACK-BUTTON);
font-style: var(--TYPE-STYLE-BUTTON);
font-weight: var(--TYPE-WEIGHT-BUTTON);
text-transform: var(--FONT-BUTTON-TRANSFORM);
letter-spacing: var(--FONT-BUTTON-LETTER-SPACING);
display: inline-block;
padding: var(--space-5) var(--space-8);
margin: 0;
line-height: 1;
text-decoration: none;
text-align: center;
vertical-align: middle;
border: none;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: var(--BUTTON-RADIUS);
--btn-bg: rgb(255 255 255 / 0%);
font-size: calc(var(--font-3) * var(--TYPE-ADJUST-BUTTON));
background-color: rgba(255, 255, 255, 0);
transition: background-color 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
border: 1px solid var(--btn-text);
color: var(--btn-text);
}
.btn--outline:hover, .btn--outline:active, .btn--outline:focus {
background-color: var(--btn-bg-hover);
border: 1px solid var(--btn-text);
color: var(--btn-text);
}
.btn--outline {
--btn-text: var(--text);
--btn-bg-hover: var(--hairline);
}
.btn--neutral.btn--outline {
--btn-text: var(--COLOR-TEXT);
--btn-bg-hover: var(--COLOR-A5);
}
.btn--invert.btn--outline {
--btn-text: var(--INVERSE-TEXT);
--btn-bg-hover: var(--INVERSE-A5);
}
.btn--black.btn--outline {
--btn-text: rgb(0 0 0 / 100%);
--btn-bg-hover: rgb(0 0 0 / 10%);
}
.btn--primary.btn--outline, .btn--outline.shopify-challenge__button {
--btn-text: var(--COLOR-PRIMARY);
--btn-bg-hover: var(--COLOR-PRIMARY-FADE);
}
.btn--secondary.btn--outline {
--btn-text: var(--COLOR-SECONDARY);
--btn-bg-hover: var(--COLOR-SECONDARY-FADE);
}
.btn--white.btn--outline {
--btn-text: #FFF;
--btn-bg-hover: rgb(255 255 255 / 10%);
}
.btn--invert--primary.btn--outline {
--btn-text: var(--INVERSE-PRIMARY);
--btn-bg-hover: var(--INVERSE-PRIMARY-FADE);
}
.btn--invert--secondary.btn--outline {
--btn-text: var(--INVERSE-SECONDARY);
--btn-bg-hover: var(--INVERSE-SECONDARY-FADE);
}
.btn--small {
padding: var(--space-4);
font-size: calc(var(--font-2) * var(--TYPE-ADJUST-BUTTON));
}
.btn--large, .shopify-challenge__button {
padding: var(--space-6) var(--space-8);
}
.btn--long {
padding: var(--space-8) var(--space-11);
max-width: 100%;
min-width: min(220px, 100%);
}
.btn--full {
width: 100%;
}
.btn--square {
border-radius: 0 !important;
}
[class*=btn][disabled],
[class*=btn].disabled {
cursor: not-allowed;
opacity: 0.4;
}
[class*=btn][disabled]:before,
[class*=btn].disabled:before {
content: none;
}
button.button-with-underline {
text-decoration: underline;
}
/* ajax buttons */
.btn-state-ready {
transition: color 0.2s, opacity 0.2s, visibility 0.2s;
}
[data-add-to-cart] {
position: relative;
}
[data-add-to-cart].loading .btn-state-ready, [data-add-to-cart].has-success .btn-state-ready {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.btn-state-loading {
visibility: hidden;
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
opacity: 0;
transform: translate(-50%, -50%);
transition: opacity 0.2s, visibility 0.2s;
}
.loading .btn-state-loading {
visibility: visible;
opacity: 1;
}
.btn-state-complete {
visibility: hidden;
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 8px;
border-left: 1px solid var(--primary);
border-bottom: 1px solid var(--primary);
margin-top: -2px;
transform: translate(-50%, -50%) rotate(-45deg);
opacity: 0;
transition: opacity 0.2s, visibility 0.2s;
}
.has-success .btn-state-complete {
visibility: visible;
opacity: 1;
}
.cta__dot {
opacity: 0.5;
padding-left: 4px;
padding-right: 4px;
transition: opacity 1s;
}
button:hover .cta__dot {
opacity: 0.8;
}
/* Shopify Quick Pay Buttons */
.product__inner .shopify-product-form {
max-width: 450px;
margin: 0 auto;
}
.variant--soldout .shopify-payment-button,
.variant--unavailable .shopify-payment-button {
opacity: 0;
}
.shopify-payment-button .shopify-payment-button__button--unbranded {
--btn-bg: var(--COLOR-PRIMARY);
--btn-text: var(--COLOR-PRIMARY-OPPOSITE);
--btn-bg-hover: var(--COLOR-PRIMARY-HOVER);
--btn-text-hover: var(--COLOR-PRIMARY-OPPOSITE);
font-family: var(--TYPE-STACK-BUTTON);
font-style: var(--TYPE-STYLE-BUTTON);
font-weight: var(--TYPE-WEIGHT-BUTTON);
text-transform: var(--FONT-BUTTON-TRANSFORM);
letter-spacing: var(--FONT-BUTTON-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--TYPE-ADJUST-BUTTON));
background-color: var(--btn-bg);
color: var(--btn-text);
}
.shopify-payment-button .shopify-payment-button__button--unbranded:hover, .shopify-payment-button .shopify-payment-button__button--unbranded:active, .shopify-payment-button .shopify-payment-button__button--unbranded:focus, .shopify-payment-button .shopify-payment-button__button--unbranded:hover:not([disabled]) {
color: var(--btn-text-hover);
background-color: var(--btn-bg);
}
.product-section.palette--dark .btn--primary.btn--outline, .product-section.palette--dark .btn--outline.shopify-challenge__button {
--btn-text: var(--INVERSE-PRIMARY);
--btn-bg-hover: var(--INVERSE-PRIMARY-FADE);
}
.product-section.palette--dark .shopify-payment-button .shopify-payment-button__button--unbranded {
--btn-bg: var(--INVERSE-PRIMARY);
--btn-text: var(--INVERSE-PRIMARY-OPPOSITE);
--btn-bg-hover: var(--INVERSE-PRIMARY-HOVER);
--btn-text-hover: var(--INVERSE-PRIMARY-OPPOSITE);
}
.btn--add-to-cart {
min-height: 54px;
white-space: normal;
line-height: normal;
}
.variant--soldout .btn--add-to-cart,
.variant--unavailable .btn--add-to-cart {
cursor: not-allowed;
opacity: 0.4;
}
.variant--soldout .btn--add-to-cart:hover,
.variant--unavailable .btn--add-to-cart:hover {
background-color: rgba(255, 255, 255, 0);
}
.shopify-payment-button .shopify-payment-button__button {
margin-top: 15px;
border-radius: var(--BUTTON-RADIUS);
min-height: 54px;
overflow: hidden;
}
.shopify-payment-button .shopify-payment-button__button > .shopify-cleanslate,
.shopify-payment-button .shopify-payment-button__button > .shopify-cleanslate > form,
.shopify-payment-button .shopify-payment-button__button > .shopify-cleanslate > form > button {
min-height: inherit !important;
}
.shopify-payment-button .shopify-payment-button__more-options:active {
text-decoration: underline;
outline: none;
transform: translateY(1px);
}
@keyframes move-right {
0%, 100% {
transform: translateX(0) translateY(-50%) rotate(45deg);
}
50% {
transform: translateX(3px) translateY(-50%) rotate(45deg);
}
}
.add-action-errors {
margin-top: 20px;
margin-bottom: 20px;
display: none;
}
.add-action-errors .errors {
margin: 0;
}
/* Shopify Shadow-DOM accelerated checkout buttons */
.shopify-payment-button {
margin-top: 15px;
}
shopify-accelerated-checkout {
--shopify-accelerated-checkout-button-block-size: 54px;
--shopify-accelerated-checkout-button-border-radius: 2px;
--shopify-accelerated-checkout-button-box-shadow: none;
--shopify-accelerated-checkout-inline-alignment: right;
}
shopify-accelerated-checkout-cart {
--shopify-accelerated-checkout-button-block-size: 42px;
--shopify-accelerated-checkout-button-inline-size: 54px;
--shopify-accelerated-checkout-button-border-radius: 2px;
--shopify-accelerated-checkout-button-box-shadow: none;
--shopify-accelerated-checkout-inline-alignment: flex-start;
--shopify-accelerated-checkout-row-gap: 12px;
--shopify-accelerated-checkout-inline-alignment: right;
}
/* ============================================================================
#Text links
============================================================================== */
a,
.text-link-bare {
color: currentcolor;
text-decoration: none;
background: transparent;
}
a:hover, a:focus,
.text-link-bare:hover,
.text-link-bare:focus {
color: currentcolor;
}
/* Button font links with arrows */
.text-btn-arrow-right {
font-family: var(--TYPE-STACK-BUTTON);
font-style: var(--TYPE-STYLE-BUTTON);
font-weight: var(--TYPE-WEIGHT-BUTTON);
text-transform: var(--FONT-BUTTON-TRANSFORM);
letter-spacing: var(--FONT-BUTTON-LETTER-SPACING);
position: relative;
display: inline-block;
padding-right: 10px;
}
.text-btn-arrow-right:not([class*=body-size-], [class*=accent-size-], [class*=heading-size-]) {
font-size: calc(var(--font-3) * var(--TYPE-ADJUST-BUTTON));
}
.text-btn-arrow-right:after {
content: "";
position: absolute;
top: 50%;
right: 1px;
transform: translateY(-50%) rotate(45deg);
width: 6px;
height: 6px;
border-width: 1.5px 1.5px 0 0;
border-style: solid;
border-color: currentcolor;
margin-top: 0;
}
.text-btn-arrow-right:hover:after {
animation: move-right 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
.text-btn-arrow-right.btn--neutral {
color: var(--text);
}
.text-btn-arrow-right.btn--primary, .text-btn-arrow-right.shopify-challenge__button {
color: var(--primary);
}
.text-btn-arrow-right.btn--secondary {
color: var(--secondary);
}
.text-btn-arrow-right.btn--black {
color: #000;
}
.text-btn-arrow-right.btn--white {
color: #FFF;
}
/* ================ Force an input/button to look like a text link ================ */
.expanding-line {
position: relative;
text-decoration: none;
}
.expanding-line:after {
content: "";
left: 0;
width: 100%;
display: block;
position: absolute;
bottom: -1px;
height: 1px;
background: currentcolor;
transition: transform 0.2s ease, opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
.expanding-line:after {
height: 0.5px;
}
}
.expanding-line:after {
opacity: 0.25;
transform: scaleX(0);
transform-origin: 100% 50%;
}
.expanding-line:hover:after {
transform: scaleX(1);
transform-origin: 0 50%;
opacity: 1;
}
.text-link-bare,
.retracting-line {
position: relative;
text-decoration: none;
}
.text-link-bare:after,
.retracting-line:after {
content: "";
left: 0;
width: 100%;
display: block;
position: absolute;
bottom: -1px;
height: 1px;
background: currentcolor;
transition: transform 0.2s ease, opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
.text-link-bare:after,
.retracting-line:after {
height: 0.5px;
}
}
.text-link-bare:after,
.retracting-line:after {
transform: scaleX(1);
transform-origin: 0 50%;
}
.text-link-bare:hover:after,
.retracting-line:hover:after {
transform: scaleX(0);
transform-origin: 100% 50%;
}
input.text-link-bare,
button.text-link-bare,
input.btn-text-thick-line,
button.btn-text-thick-line {
border-radius: 0;
color: var(--text);
display: inline;
border: 0 none;
background: none;
padding: 0;
margin: 0;
overflow: visible;
}
input.text-link-bare:hover, input.text-link-bare:active, input.text-link-bare:focus,
button.text-link-bare:hover,
button.text-link-bare:active,
button.text-link-bare:focus,
input.btn-text-thick-line:hover,
input.btn-text-thick-line:active,
input.btn-text-thick-line:focus,
button.btn-text-thick-line:hover,
button.btn-text-thick-line:active,
button.btn-text-thick-line:focus {
border-radius: 0;
color: var(--text-dark);
display: inline;
border: 0 none;
background: none;
padding: 0;
margin: 0;
}
button + .text-link-bare,
.btn + .text-link-bare,
.shopify-challenge__button + .text-link-bare,
button + .btn-text-thick-line,
.btn + .btn-text-thick-line,
.shopify-challenge__button + .btn-text-thick-line {
margin-right: 15px;
margin-left: 15px;
}
@media only screen and (max-width: 479px) {
button + .text-link-bare,
.btn + .text-link-bare,
.shopify-challenge__button + .text-link-bare,
button + .btn-text-thick-line,
.btn + .btn-text-thick-line,
.shopify-challenge__button + .btn-text-thick-line {
margin-right: 15px !important;
margin-left: 15px !important;
}
}
.btn-block-text-underline,
.btn-text-thick-line {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
position: relative;
text-decoration: none;
}
.btn-block-text-underline:after,
.btn-text-thick-line:after {
content: "";
left: 0;
width: 100%;
display: block;
position: absolute;
bottom: -1px;
height: 1px;
background: currentcolor;
transition: transform 0.2s ease, opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
.btn-block-text-underline:after,
.btn-text-thick-line:after {
height: 0.5px;
}
}
.btn-block-text-underline:after,
.btn-text-thick-line:after {
opacity: 0.25;
transform: scaleX(0);
transform-origin: 100% 50%;
}
.btn-block-text-underline:hover:after,
.btn-text-thick-line:hover:after {
transform: scaleX(1);
transform-origin: 0 50%;
opacity: 1;
}
.btn-block-text-underline:after,
.btn-text-thick-line:after {
bottom: -3px;
height: 2px;
}
.btn-block-text-underline {
padding: 0;
}
.btn-block-text-underline.btn--neutral,
.btn-text-thick-line.btn--neutral {
color: var(--text);
}
.btn-block-text-underline.btn--primary, .btn-block-text-underline.shopify-challenge__button,
.btn-text-thick-line.btn--primary,
.btn-text-thick-line.shopify-challenge__button {
color: var(--primary);
}
.btn-block-text-underline.btn--secondary,
.btn-text-thick-line.btn--secondary {
color: var(--secondary);
}
.btn-block-text-underline.btn--black,
.btn-text-thick-line.btn--black {
color: #000;
}
.btn-block-text-underline.btn--white,
.btn-text-thick-line.btn--white {
color: #FFF;
}
/* Make the hero link underline full opacity */
.btn-block-text-underline:after,
.btn-text-thick-line.hero__btn:after {
opacity: 1;
}
/* ============================================================================
#Badges
============================================================================== */
.badge {
display: inline-block;
padding: 0.33em 0.5em;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: var(--radius-sm);
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-2) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-relaxed);
background-color: var(--hairline);
color: var(--text);
}
.modal__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
}
@media only screen and (min-width: 480px) {
.modal__overlay {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
}
.modal__overlay.modal__overlay--bright {
background: var(--COLOR-PRIMARY);
}
.modal__container--small {
background-color: var(--bg);
max-width: 95vw;
max-height: 90vh;
overflow-y: auto;
box-sizing: border-box;
}
.modal__container--inline {
padding: 30px;
background: var(--bg);
max-width: 95vw;
max-height: 90vh;
overflow-y: auto;
overflow-x: auto;
}
.modal__container--xl {
padding: 90px;
background: var(--bg);
max-width: 95vw;
max-height: 90vh;
overflow-y: auto;
overflow-x: auto;
}
@media only screen and (max-width: 767px) {
.modal__container--xl {
padding: 30px;
}
}
.modal__container--video {
padding: 90px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
overflow-x: auto;
}
@media only screen and (max-width: 767px) {
.modal__container--video {
padding: 10px;
}
}
.modal__container .rte__video-wrapper {
min-width: 300px;
}
.modal__header {
display: flex;
justify-content: space-between;
align-items: center;
}
.modal__close {
position: fixed;
z-index: 100;
top: 5px;
right: 5px;
width: 50px;
height: 50px;
border: 0;
border-radius: 100%;
background-color: rgba(0, 0, 0, 0);
color: #FFF;
font-size: 20px;
cursor: pointer;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
font-weight: bold;
transition: background-color 0.5s ease, color 0.2s ease;
}
.modal__close:before {
content: "✕";
}
.modal__close:hover, .modal__close:focus {
outline: none;
}
.modal__content {
margin-top: var(--space-9);
margin-bottom: var(--space-9);
line-height: 1.5;
color: rgba(0, 0, 0, 0.8);
}
/************************** \
Demo Animation Style
\ **************************/
@keyframes mmfadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes mmfadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes mmslideIn {
from {
transform: translateY(15%);
}
to {
transform: translateY(0);
}
}
@keyframes mmslideOut {
from {
transform: translateY(0);
}
to {
transform: translateY(-10%);
}
}
.micromodal-slide {
display: none;
}
.micromodal-slide.is-open {
position: absolute;
z-index: 10000;
display: block;
}
.micromodal-slide[aria-hidden=false] .modal__overlay {
animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide[aria-hidden=false] .modal__container {
animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide[aria-hidden=true] .modal__overlay {
animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide[aria-hidden=true] .modal__container {
animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
will-change: transform;
}
.modal__container--zoom {
overflow-y: scroll;
height: 100%;
padding: var(--outer) 0 0;
}
.zoom--images {
width: 100%;
}
.zoom__img {
display: block;
padding: var(--outer);
width: 100%;
max-width: 1480px;
margin: 0 auto;
height: auto;
}
/* ============================================================================
#Forms
============================================================================== */
form {
margin-bottom: var(--gutter);
}
form:last-child {
margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
input,
textarea,
select,
.popout__toggle {
font-size: 16px;
}
}
button,
input[type=text],
input[type=search],
input[type=password],
input[type=email],
input[type=file],
input[type=number],
input[type=tel],
input[type=submit],
input[type=url],
.quantity__wrapper input,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type=number] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input,
textarea,
select,
.popout__toggle,
fieldset {
border-radius: var(--radius-sm);
max-width: 100%;
}
input.input-full,
textarea.input-full,
select.input-full,
.input-full.popout__toggle,
fieldset.input-full {
width: 100%;
}
html:not(.no-js) input[type=number]::-webkit-inner-spin-button,
html:not(.no-js) input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
input,
select,
.popout__toggle,
textarea {
padding: 8px 10px;
font-family: inherit;
line-height: 1.42;
}
fieldset {
border: 0;
padding: 0.01em 0 0 0;
margin: 0;
min-width: 0;
}
legend {
border: 0;
padding: 0;
}
optgroup {
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
}
input {
display: inline-block;
width: auto;
}
button,
input[type=submit] {
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: inherit;
}
button {
background-color: transparent;
overflow: visible;
border: none;
font-family: inherit;
}
button[disabled],
html input[disabled] {
cursor: default;
}
.hidden-label {
clip: rect(0 0 0 0);
clip: rect(0, 0, 0, 0);
overflow: hidden;
position: absolute;
height: 1px;
width: 1px;
}
/* ================ Input width and border ================ */
input[type=text],
input[type=search],
input[type=password],
input[type=email],
input[type=file],
input[type=number],
input[type=tel],
input[type=url],
input[type=date],
textarea,
select,
.popout__toggle {
border: 1px solid var(--border);
width: 100%;
max-width: 100%;
display: block;
margin: 0 0 1em;
background-color: transparent;
outline: none;
color: var(--text-dark);
}
input[type=text]:focus,
input[type=search]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=file]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=date]:focus,
textarea:focus,
select:focus,
.popout__toggle:focus {
bottom: 1px solid var(--text-dark);
box-shadow: 0 1px 5px var(--hairline);
}
input[type=text][disabled], input[type=text].disabled,
input[type=search][disabled],
input[type=search].disabled,
input[type=password][disabled],
input[type=password].disabled,
input[type=email][disabled],
input[type=email].disabled,
input[type=file][disabled],
input[type=file].disabled,
input[type=number][disabled],
input[type=number].disabled,
input[type=tel][disabled],
input[type=tel].disabled,
input[type=url][disabled],
input[type=url].disabled,
input[type=date][disabled],
input[type=date].disabled,
textarea[disabled],
textarea.disabled,
select[disabled],
[disabled].popout__toggle,
select.disabled,
.disabled.popout__toggle {
cursor: default;
background-color: var(--muted);
border-color: var(--text-light);
}
textarea {
min-height: 100px;
}
input[type=checkbox],
input[type=radio] {
display: inline;
margin: 0;
padding: 0;
}
input[type=checkbox] + label,
input[type=radio] + label {
display: inline-block;
margin-left: 5px;
}
select, .popout__toggle {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-position: right center;
background-image: var(--ICO-SELECT);
background-repeat: no-repeat;
background-position: right 10px center;
background-color: transparent;
padding-right: 28px;
text-indent: 0.01px;
text-overflow: clip;
cursor: pointer;
}
/* Force option color (affects IE only) */
option {
color: #000;
background-color: #FFF;
}
select::-ms-expand, .popout__toggle::-ms-expand {
display: none;
}
/* ================ Form labels ================ */
label,
legend {
display: block;
}
.form-horizontal label.label--hidden, label.label--hidden,
.form-horizontal legend.label--hidden,
legend.label--hidden {
height: 0;
width: 0;
margin-bottom: 0;
overflow: hidden;
}
/* ================ Address and non-float forms ================ */
.form--standard label,
.form--standard legend {
display: block;
margin-bottom: 2px;
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
}
.contact__block {
margin: 20px 0;
display: block;
}
.contact__radio,
.contact__check {
display: flex;
align-items: center;
}
label[for] {
cursor: pointer;
}
.label-hint {
color: #999;
}
/* ================ Horizontal Form ================ */
form.form-horizontal,
.form-horizontal {
margin-bottom: 0;
}
form.form-horizontal input[type=text],
form.form-horizontal input[type=search],
form.form-horizontal input[type=password],
form.form-horizontal input[type=email],
form.form-horizontal input[type=file],
form.form-horizontal input[type=number],
form.form-horizontal input[type=tel],
form.form-horizontal input[type=url],
form.form-horizontal textarea,
form.form-horizontal select,
form.form-horizontal label,
.form-horizontal input[type=text],
.form-horizontal input[type=search],
.form-horizontal input[type=password],
.form-horizontal input[type=email],
.form-horizontal input[type=file],
.form-horizontal input[type=number],
.form-horizontal input[type=tel],
.form-horizontal input[type=url],
.form-horizontal textarea,
.form-horizontal select,
.form-horizontal .popout__toggle,
.form-horizontal label {
display: inline-block;
margin-bottom: 0;
width: auto;
}
/* ================ Error styles ================ */
input[type=text].error,
input[type=search].error,
input[type=password].error,
input[type=email].error,
input[type=file].error,
input[type=number].error,
input[type=tel].error,
input[type=url].error,
textarea.error {
border-color: #D02E2E;
background-color: #FFF6F6;
color: #D02E2E;
}
label.error {
color: #D02E2E;
}
.form--additional {
text-align: center;
margin-top: 30px;
}
.dot-spacer {
opacity: 0.5;
padding: 0 10px;
}
/* ================ Float labels ================ */
.float__wrapper {
position: relative;
margin: 20px 0;
}
.float__wrapper:first-of-type, .float__wrapper:first-child {
margin-top: 0;
}
.float__wrapper:last-of-type, .float__wrapper:last-child {
margin-bottom: 0;
}
.float__wrapper input,
.float__wrapper textarea {
width: 100%;
}
.float__wrapper input:focus,
.float__wrapper textarea:focus {
border: 1px solid var(--text-dark);
box-shadow: none;
}
.float__wrapper label {
background: var(--bg);
color: var(--text);
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-2) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-relaxed);
left: 7px;
opacity: 0;
padding: 0 4px;
position: absolute;
transform: translateY(2em);
transition: transform 0.2s ease-out, opacity 0.15s linear;
z-index: -1;
}
.float__wrapper label.label--float {
opacity: 1;
transform: translateY(-1em);
z-index: 1;
padding-bottom: 2px;
}
.input-group--inner-button.float__wrapper label.label--float {
transform: translateY(calc(-1em - 5px));
}
/* ============================================================================
#Notes and Form Feedback
============================================================================== */
.note,
.errors {
border-radius: var(--radius-sm);
padding: 12px;
margin-bottom: 20px;
border: 1px solid transparent;
font-size: 0.9em;
text-align: left;
}
.note ul,
.note ol,
.errors ul,
.errors ol {
margin-top: 0;
margin-bottom: 0;
}
.note li:last-child,
.errors li:last-child {
margin-bottom: 0;
}
.note p,
.errors p {
margin: 0;
}
.note p + p,
.errors p + p {
margin-top: 0.5em;
}
.note {
background-color: var(--hairline);
}
.note p {
margin: 0;
padding: 4px 0;
}
.note ul {
list-style: disc outside;
margin-left: 10px;
}
.errors {
color: #D02E2E;
background-color: #FFF6F6;
}
.errors ul {
list-style: disc outside;
margin-left: 20px;
}
.errors a {
color: #D02E2E;
text-decoration: underline;
}
.errors a:hover {
text-decoration: none;
}
.errors p + p {
margin-top: 0;
}
.form__legal {
margin-bottom: 10px;
}
.form__legal p {
margin-top: 0;
font-style: italic;
color: var(--text-light);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
}
.form__legal a {
color: var(--text-dark);
position: relative;
text-decoration: none;
}
.form__legal a:after {
content: "";
left: 0;
width: 100%;
display: block;
position: absolute;
bottom: -1px;
height: 1px;
background: currentcolor;
transition: transform 0.2s ease, opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
.form__legal a:after {
height: 0.5px;
}
}
.form__legal a:after {
opacity: 0.25;
transform: scaleX(0);
transform-origin: 100% 50%;
}
.form__legal a:hover:after {
transform: scaleX(1);
transform-origin: 0 50%;
opacity: 1;
}
.section-contact .form__legal {
margin-top: 10px;
}
.form-success {
color: #56AD6A;
background-color: #ECFEF0;
border-color: #56AD6A;
padding: 10px;
margin-bottom: 20px;
}
.form-success a {
color: #56AD6A;
text-decoration: underline;
}
.form-success a:hover {
text-decoration: none;
}
.form-error {
color: #D02E2E;
background-color: #FFF6F6;
border-color: #D02E2E;
padding: 10px;
margin-bottom: 20px;
}
.form-error a {
color: #D02E2E;
text-decoration: underline;
}
.form-error a:hover {
text-decoration: none;
}
/* = both radio and swatch = */
:root {
--OPTION-SIZE-SWATCH: 34px;
--OPTION-SIZE-RADIO: 50px;
}
.radio__legend {
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
margin: 0;
padding: 0 0 10px 0;
width: 100%;
opacity: 0.7;
line-height: 1.4;
font-weight: var(--FONT-WEIGHT-BODY);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
}
.radio__legend span {
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
}
.radio__legend span:not(.radio__legend__label) {
padding-left: 5px;
border-left: 1px solid var(--border);
margin-left: 6px;
}
.radio__legend span:not(.radio__legend__label):empty {
border-left-color: transparent;
}
.radio__legend span:not(.radio__legend__label):empty:before {
content: "Â ";
}
.radio__legend span:first-child {
flex: 0 0 auto;
}
.radio__legend__label {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
opacity: 1;
}
.radio__inputs {
display: flex;
flex-wrap: wrap;
-moz-column-gap: 10px;
column-gap: 10px;
row-gap: 10px;
}
.radio__inputs--swatch {
-moz-column-gap: 15px;
column-gap: 15px;
row-gap: 15px;
}
.radio__inputs--equal {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max((var(--OPTION-SIZE-RADIO)), 6em + 4px), 1fr));
}
.product__align-center .radio__inputs--equal {
display: flex;
grid-template-columns: unset;
}
/* = radio button specific = */
.radio__button {
display: inline-block;
}
.radio__button:first-of-type {
padding-left: 0;
}
.radio__fieldset {
line-height: 1;
}
.radio__fieldset .radio__button label {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
position: relative;
padding: calc(var(--OPTION-SIZE-RADIO) / 2 - 1em) max(2px, var(--OPTION-SIZE-RADIO) / 2 - 1em);
min-width: 60px;
display: flex;
justify-content: center;
border: 1px solid var(--border);
color: var(--text-light);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.radio__fieldset .radio__button label:hover, .radio__fieldset .radio__button label:active, .radio__fieldset .radio__button label:focus {
color: var(--text-dark);
background-color: var(--hairline);
border: 1px solid var(--border);
}
.radio__fieldset .radio__button input:checked ~ label {
color: var(--bg);
background-color: var(--text-dark);
border: 1px solid rgba(255, 255, 255, 0);
}
/* = swatch button specific = */
.swatch__button {
--swatch: #CCC;
--swatch-offset: 2px;
--swatch-border-width: 2px;
--swatch-size: var(--OPTION-SIZE-SWATCH);
display: inline-block;
}
.form__selectors .swatch__button {
--swatch-offset: 3px;
}
@media only screen and (max-width: 767px) {
.form__selectors .swatch__button {
--swatch-size: calc(var(--OPTION-SIZE-SWATCH) - 4px);
}
}
.swatch__button input,
.radio__button input {
opacity: 0;
width: 0;
height: 0;
display: block;
}
.selector-wrapper fieldset label {
display: block;
margin-top: unset;
margin-left: unset;
}
.swatch__button label,
.swatch__label {
position: relative;
overflow: hidden;
width: var(--swatch-size);
height: var(--swatch-size);
border-radius: var(--swatch-border-radius, 100%);
background-color: var(--swatch);
}
.swatch__button input:checked ~ label:after,
.swatch__label[aria-selected=true]:after {
content: "";
position: absolute;
top: var(--swatch-offset);
right: var(--swatch-offset);
bottom: var(--swatch-offset);
left: var(--swatch-offset);
border-radius: var(--swatch-border-radius, 100%);
border: var(--swatch-border-width) solid var(--bg);
}
/* = square swatch button = */
.swatch__button--square {
--swatch-border-radius: 0;
}
.swatch__button input:disabled:hover,
.swatch__button input:disabled ~ label:hover {
cursor: default;
}
.swatch__button.sold-out a:before,
.swatch__button input.sold-out ~ label:before,
.swatch__button input.unavailable ~ label:before,
.swatch__button input:disabled ~ label:before,
.radio__button .sold-out + label:before,
.radio__button .unavailable + label:before {
content: "";
position: absolute;
top: 0;
left: 50%;
z-index: 2;
width: 2px;
height: 100%;
border-radius: 0;
background: var(--bg);
margin-left: -1px;
transform: rotate(45deg);
}
.radio__button .sold-out + label:before,
.radio__button .unavailable + label:before {
background: var(--text-light);
}
/* = handle white swatch = */
.swatch__button label[data-swatch=white i],
.swatch__button .swatch__label[data-swatch=white i],
.swatch__button label[style*=ffffff i],
.swatch__button .swatch__label[style*=ffffff i] {
box-shadow: 0 0 0 1px var(--text-light) inset;
}
.swatch__button label[data-swatch=white i]:after,
.swatch__button .swatch__label[data-swatch=white i]:after,
.swatch__button label[style*=ffffff i]:after,
.swatch__button .swatch__label[style*=ffffff i]:after {
--bg: var(--text-light);
}
.swatch__button label[data-swatch=white i]:before,
.swatch__button .swatch__label[data-swatch=white i]:before,
.swatch__button label[style*=ffffff i]:before,
.swatch__button .swatch__label[style*=ffffff i]:before {
--bg: var(--text-light);
}
.swatch__button input:checked ~ label[data-swatch=white i] {
box-shadow: 0 0 0 1px var(--text-light) inset;
}
/* = Tab mode = */
.focus-enabled .swatch__button input:focus ~ label:before {
position: absolute;
content: "";
left: -3px;
bottom: -10px;
height: 2px;
width: calc(100% + 6px);
background: var(--secondary);
}
.focus-enabled .radio__button input:focus ~ label:before {
position: absolute;
content: "";
left: 0;
bottom: -10px;
height: 2px;
width: 100%;
background: var(--secondary);
}
.selector-wrapper {
margin-top: var(--OPTION-SPACE);
opacity: 1;
transition: opacity 0.4s ease-in-out;
}
.selector-wrapper:first-child {
margin-top: 0;
}
/* ============================================================================
#Images and Iframes
============================================================================== */
img {
border: 0 none;
}
svg:not(:root) {
overflow: hidden;
}
:root {
--placeholder-bg: #eeeeee;
--placeholder-fill: #B4B6B9 ;
}
.image__hero__scale {
--placeholder-bg: #ffffff;
--placeholder-fill: #eeeeee ;
}
.bare-placeholder-colors .image__hero__scale,
.look {
--placeholder-bg: #e0e0e0;
--placeholder-fill: #cfcfcf ;
}
svg.placeholder-svg {
fill: var(--placeholder-fill);
background-color: var(--placeholder-bg);
}
@keyframes imgLoadingShimmer {
0% {
transform: translateX(-100%) rotate(32deg);
}
100% {
transform: translateX(100%) rotate(8deg);
}
}
.loading-shimmer {
position: relative;
background-color: var(--hairline);
}
.loading-shimmer img {
opacity: 0;
}
.loading-shimmer:after {
content: "";
position: absolute;
top: -30%;
left: -30%;
right: -30%;
bottom: -30%;
animation-duration: 2.4s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: imgLoadingShimmer;
animation-timing-function: linear;
background: linear-gradient(to right, transparent 16%, var(--bg) 32%, transparent 48%);
transform: translateX(-100%) rotate(32deg);
}
.no-js .loading-shimmer:after {
display: none;
}
.no-js .loading-shimmer img {
opacity: 1;
}
/* Nested pro banner with split images */
/* Hide section-level image if overlayed by split images to prevent hidden image from loading */
.nested-banner:has(.block-split-image) .nested-banner__section-image img,
.nested-banner:has(.block-split-image) .nested-banner__section-image svg {
display: none !important;
}
/* === snippets/hero.liquid === */
.image__hero__frame {
position: relative;
overflow: hidden;
max-width: 100%;
}
.image__hero__frame noscript,
.image__hero__pane {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.image__hero__scale {
position: relative;
display: block;
width: 100%;
height: 100%;
min-height: 100%;
}
[data-parallax-wrapper] .image__hero__pane {
display: flex;
align-items: center;
}
[data-parallax-wrapper] .image__hero__scale {
min-height: 110%;
max-height: 120%;
}
.reposition-background-mobile {
--focal-point: var(--OBJECT-POSITION-DESKTOP);
}
@media only screen and (max-width: 767px) {
.reposition-background-mobile {
--focal-point: var(--OBJECT-POSITION-MOBILE);
--wh-ratio: var(--ASPECT-RATIO-MOBILE);
}
}
/* == Link that fills a position: relative image wrapper == */
.link-over-image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 20;
}
.theme-animate-hover .link-over-image ~ img,
.theme-animate-hover .link-over-image ~ .image__hero__frame .image__hero__scale {
transition: transform 1.1s ease-out;
}
.theme-animate-hover .link-over-image:hover ~ img,
.theme-animate-hover .link-over-image:focus ~ img,
.theme-animate-hover .link-over-image:hover ~ .image__hero__frame .image__hero__scale,
.theme-animate-hover .link-over-image:focus ~ .image__hero__frame .image__hero__scale {
transform: scale(1.05);
}
/* ================ Shared Image Classes ================ */
[data-overlay-header].has-overlay {
--image-top: var(--menu-height);
--image-bottom: calc(var(--menu-height) * 0.66);
/* no centering compensation on align bottom images */
}
[data-overlay-header].has-overlay .hero__content__wrapper[class*=align--bottom] {
padding-bottom: 0;
margin-bottom: var(--inner);
}
.section--image {
overflow: hidden;
position: relative;
color: var(--text);
--image-top: var(--inner);
--image-bottom: var(--inner);
}
.section--image .section__inner {
position: relative;
overflow: hidden;
}
.responsive-wide-image {
width: 100%;
display: block;
}
.img-object-cover {
display: block;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%;
min-height: 100%;
}
.img-object-contain {
display: block;
-o-object-fit: contain;
object-fit: contain;
width: 100%;
height: 100%;
min-height: 100%;
}
.img-aspect-ratio {
display: block;
width: 100%;
height: auto;
}
/* Overlays */
.image-overlay--bottom {
position: absolute;
top: -30px;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
opacity: var(--opacity);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bg) 100%);
}
.backdrop--wide {
position: relative;
}
.backdrop--wide:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(5);
z-index: -1;
opacity: var(--opacity);
background: radial-gradient(var(--bg), rgba(255, 255, 255, 0) 50%);
pointer-events: none;
}
.backdrop--hero {
position: relative;
}
.backdrop--hero:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
width: 200%;
height: 200%;
background: radial-gradient(ellipse at center, var(--bg) 0%, rgba(255, 255, 255, 0) 50%);
opacity: var(--opacity);
transform: translate(-50%, -50%);
}
.image-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
background-color: var(--bg);
opacity: var(--overlay-opacity, 0);
}
/* Content */
.hero__content {
--default-max-width: calc(66% - var(--outer));
--content-width-fallback: var(--CONTENT-WIDTH, var(--default-max-width));
max-width: min(var(--content-width-fallback), var(--default-max-width));
width: 100%;
margin: var(--inner);
padding: var(--outer);
color: var(--text);
}
@media only screen and (max-width: 1099px) {
.hero__content {
--default-max-width: 66%;
}
}
@media only screen and (max-width: 767px) {
.hero__content {
--default-max-width: 100%;
}
}
.hero__content.hero__content--large {
--default-max-width: 100%;
}
/* Alignmnet */
.hero__content__wrapper {
position: absolute;
display: flex;
z-index: 10;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding-top: var(--image-top);
padding-bottom: var(--image-bottom);
}
.hero__content__wrapper.align--top-center .standard__image, .hero__content__wrapper.align--middle-center .standard__image, .hero__content__wrapper.align--bottom-center .standard__image {
margin-left: auto;
margin-right: auto;
}
.hero__content__wrapper.align--top-right .standard__image, .hero__content__wrapper.align--middle-right .standard__image, .hero__content__wrapper.align--bottom-right .standard__image {
margin-left: auto;
}
.align--top-left {
align-items: flex-start;
justify-content: flex-start;
text-align: left;
}
.align--top-center {
align-items: flex-start;
justify-content: center;
text-align: center;
}
.align--top-right {
align-items: flex-start;
justify-content: flex-end;
text-align: right;
}
.align--middle-left {
align-items: center;
justify-content: flex-start;
text-align: left;
}
.align--middle-center {
align-items: center;
justify-content: center;
text-align: center;
}
.align--middle-right {
align-items: center;
justify-content: flex-end;
text-align: right;
}
.align--bottom-left {
align-items: flex-end;
justify-content: flex-start;
text-align: left;
}
.align--bottom-center {
align-items: flex-end;
justify-content: center;
text-align: center;
}
.align--bottom-right {
align-items: flex-end;
justify-content: flex-end;
text-align: right;
}
.align-space-between-vertical {
justify-content: space-between;
align-items: center;
flex-flow: column;
}
.standard__image img {
width: 100%;
height: auto;
}
img.auto,
.grid__item img,
.grid__item iframe {
max-width: 100%;
}
.rte__video-wrapper,
.sky-pilot-embed {
position: relative;
overflow: hidden;
max-width: 100%;
padding-bottom: 56.25%;
height: 0;
height: auto;
}
.rte__video-wrapper iframe,
.sky-pilot-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.standard__collage {
position: absolute;
z-index: 1;
transform: translate(-50%, -50%);
max-width: 100%;
width: var(--COLLAGE-WIDTH);
top: var(--COLLAGE-TOP);
left: var(--COLLAGE-LEFT);
}
/* ============================================================================
#Helper Classes
============================================================================== */
.clearfix:after {
content: "";
display: table;
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.display-table {
display: table;
table-layout: fixed;
width: 100%;
}
.hide,
.display-none {
display: none;
}
.display-table-cell {
display: table-cell;
vertical-align: middle;
float: none;
}
@media only screen and (min-width: 768px) {
.medium-up--display-table {
display: table;
table-layout: fixed;
width: 100%;
}
.medium-up--display-table-cell {
display: table-cell;
vertical-align: middle;
float: none;
}
}
@media only screen and (max-width: 479px) {
.hidden-mobile {
display: none;
}
}
@media only screen and (min-width: 480px) {
.mobile-only {
display: none;
}
}
@media only screen and (max-width: 1099px) {
.hidden-md-down {
display: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 1099px) {
.hidden-md {
display: none;
}
}
@media only screen and (min-width: 768px) {
.hidden-md-up {
display: none;
}
}
@media only screen and (min-width: 1100px) {
.hidden-lg {
display: none;
}
}
/* Hide and show */
.visually-hidden, [data-shopify-xr-hidden] {
position: absolute !important;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
.js-focus-hidden:focus {
outline: none;
}
.label-hidden {
position: absolute !important;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
/* No placeholders, so force show labels */
}
.no-placeholder .label-hidden {
position: inherit !important;
overflow: auto;
clip: auto;
width: auto;
height: auto;
margin: 0;
}
.visually-shown {
position: inherit !important;
overflow: auto;
clip: auto;
width: auto;
height: auto;
margin: 0;
}
/* Used for JS hide and show */
.is-hidden {
visibility: hidden;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}
/* Used on product variants */
html.no-js .js {
display: none;
}
html.no-js [data-aos] {
opacity: 1 !important;
transform: none !important;
}
html.no-js .no-js-checkbox {
visibility: hidden;
opacity: 0;
position: absolute;
}
html.no-js .no-js-checkbox + label {
margin-left: 0;
}
html.no-js .no-js-dropdown,
html.no-js .no-js-accordion {
display: none;
}
html.no-js .no-js-checkbox:checked ~ .no-js-dropdown,
html.no-js .no-js-checkbox:checked ~ .no-js-accordion {
display: block;
}
html.no-js .no-js-checkbox + label:after {
transform: rotate(-135deg);
}
html.no-js .no-js-checkbox:checked + label:after {
transform: rotate(-45deg);
}
html.js .no-js {
display: none;
}
.lazywide {
display: block;
width: 100%;
}
/* Only show when browser cookies are not supported */
.supports-no-cookies:not(html) {
display: none;
}
html.supports-no-cookies .supports-no-cookies:not(html) {
display: block;
}
/* Only show when browser cookies are supported */
html.supports-no-cookies .supports-cookies {
display: none;
}
/* ============================================================================
Skip to content button
- Overrides .visually-hidden when focused
============================================================================== */
.skip-link:focus {
position: absolute !important;
overflow: auto;
clip: auto;
width: auto;
height: auto;
margin: 0;
color: var(--secondary);
background-color: var(--bg);
padding: 20px;
z-index: 50000;
transition: none;
}
body.focus-enabled *:focus {
outline-color: var(--secondary) !important;
outline-offset: -2px !important;
outline-style: auto !important;
outline-width: 5px !important;
}
body.focus-enabled .flickity-badge-dots .flickity-page-dots .flickity-page-dot:focus,
body.focus-enabled .other__inline__title a:focus,
body.focus-enabled .product__inline__image a:focus,
body.focus-enabled .product__inline__title a:focus,
body.focus-enabled .rte a:not([class]):focus,
body.focus-enabled .blog__rss:focus,
body.focus-enabled .article__item a:focus,
body.focus-enabled .text-link-bare:focus,
body.focus-enabled .collection__filters__wrapper *:focus,
body.focus-enabled .upsell a:focus,
body.focus-enabled .cart__heading__back a:focus,
body.focus-enabled .cart__items__title a:focus,
body.focus-enabled .product__popdown__cart:focus,
body.focus-enabled .cart__items__remove:focus,
body.focus-enabled .navlink--grandchild:focus,
body.focus-enabled .navlink--child:focus,
body.focus-enabled .newsletter-block .input-group .input-group-field:focus,
body.focus-enabled .footer a:not(.popout-list__option):focus,
body.focus-enabled .breadcrumb a:focus,
body.focus-enabled .accordion__title:focus,
body.focus-enabled .btn-text-thick-line:focus {
outline-offset: 2px !important;
}
html:not(.no-js) body:not(.focus-enabled) *:focus {
outline: none;
}
/* ============================================================================
#OOCSS Media Object
- http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
============================================================================== */
.media,
.media-flex {
overflow: hidden;
_overflow: visible;
zoom: 1;
}
.media-img {
float: left;
margin-right: var(--gutter);
}
.media-img-right {
float: right;
margin-left: var(--gutter);
}
.media-img img,
.media-img-right img {
display: block;
}
/*================ SVG Loader ================*/
@keyframes animate-svg {
0% {
stroke-dashoffset: 88;
}
100% {
stroke-dashoffset: 0;
}
}
.svg-loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.svg-loader circle {
stroke-width: 1;
stroke: var(--border);
fill: none;
}
.svg-loader circle ~ circle {
stroke: var(--text);
stroke-dashoffset: 88;
animation: animate-svg 1s linear infinite;
animation-play-state: paused;
}
.loading .svg-loader circle ~ circle {
animation-play-state: running;
}
.is-loading .svg-loader circle ~ circle {
animation-play-state: running;
}
/*======================= Image shapes ==========================*/
.radius-keyhole,
.radius-blob-1,
.radius-blob-2,
.radius-blob-3,
.radius-blob-4 {
overflow: hidden;
border-radius: var(--radius-shape);
}
.radius-keyhole {
--radius-shape: 100% 100% 0 0;
}
.radius-blob-1 {
--radius-shape: 30% 70% 70% 30% / 53% 30% 70% 47%;
}
.radius-blob-2 {
--radius-shape: 53% 47% 34% 66% / 63% 46% 54% 37%;
}
.radius-blob-3 {
--radius-shape: 37% 63% 56% 44% / 49% 56% 44% 51%;
}
.radius-blob-4 {
--radius-shape: 63% 37% 37% 63% / 43% 37% 63% 57%;
}
.clip-hexagon {
--polygon-shape: polygon(100.00% 50.00%,75.00% 93.30%,25.00% 93.30%,0.00% 50.00%,25.00% 6.70%,75.00% 6.70%);
}
.clip-octagon {
--polygon-shape: polygon(100.00% 50.00%,85.36% 85.36%,50.00% 100.00%,14.64% 85.36%,0.00% 50.00%,14.64% 14.64%,50.00% 0.00%,85.36% 14.64%);
}
.clip-sunburst {
--polygon-shape: polygon(100.00% 50.00%,91.48% 56.57%,97.55% 65.45%,87.42% 69.07%,90.45% 79.39%,79.70% 79.70%,79.39% 90.45%,69.07% 87.42%,65.45% 97.55%,56.57% 91.48%,50.00% 100.00%,43.43% 91.48%,34.55% 97.55%,30.93% 87.42%,20.61% 90.45%,20.30% 79.70%,9.55% 79.39%,12.58% 69.07%,2.45% 65.45%,8.52% 56.57%,0.00% 50.00%,8.52% 43.43%,2.45% 34.55%,12.58% 30.93%,9.55% 20.61%,20.30% 20.30%,20.61% 9.55%,30.93% 12.58%,34.55% 2.45%,43.43% 8.52%,50.00% 0.00%,56.57% 8.52%,65.45% 2.45%,69.07% 12.58%,79.39% 9.55%,79.70% 20.30%,90.45% 20.61%,87.42% 30.93%,97.55% 34.55%,91.48% 43.43%);
}
.clip-parallelogram {
--polygon-shape: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%) ;
}
.clip-hexagon,
.clip-octagon,
.clip-sunburst,
.clip-parallelogram {
clip-path: var(--polygon-shape);
}
.mask-stamp-sharp,
.mask-stamp-rounded,
.mask-ticket-stub {
mask: var(--mask-shape);
-webkit-mask: var(--mask-shape);
}
.mask-stamp-sharp {
--mask-shape:
conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/60.00px 51% repeat-x,
conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/60.00px 51% repeat-x;
}
.mask-stamp-rounded {
--mask-shape:
radial-gradient(22.83px at 50% 31.00px,#000 99%,#0000 101%) calc(50% - 40px) 0/80px 51% repeat-x,
radial-gradient(22.83px at 50% -11px,#0000 99%,#000 101%) 50% 20px/80px calc(51% - 20px) repeat-x,
radial-gradient(22.83px at 50% calc(100% - 31.00px),#000 99%,#0000 101%) 50% 100%/80px 51% repeat-x,
radial-gradient(22.83px at 50% calc(100% + 11.00px),#0000 99%,#000 101%) calc(50% - 40px) calc(100% - 20px)/80px calc(51% - 20px) repeat-x;
}
.mask-ticket-stub {
--mask-shape: radial-gradient(60px at 60px 60px,#0000 98%,#000) -60px -60px;
}
/* ============================================================================
This file is build around onboarding markup loaded in Shopify-built themes and Timber
- Handles empty state hover styles with specific markup
============================================================================== */
.helper-note {
position: absolute;
top: 50%;
left: 50%;
margin-top: -80px;
margin-left: -255px;
max-width: 510px;
font-size: 14px;
background: #000;
border: none;
color: #FFF;
text-align: left;
padding: 30px;
z-index: 9000;
opacity: 0;
transform: translateZ(0);
box-sizing: border-box;
transition: opacity 0.3s cubic-bezier(0, 0, 0.33, 1), transform 0.5s cubic-bezier(0.45, 0, 0, 0.95);
}
@media only screen and (max-width: 509px) {
.helper-note {
width: 95%;
margin-top: 10%;
margin-left: 2.5%;
top: 0;
left: 0;
}
}
.helper-note p {
margin-bottom: 15px;
margin-left: 40px;
font-size: 14px;
line-height: 20px;
}
.helper-note p:last-child {
margin-bottom: 0;
}
.helper-note h3 {
font-size: 19px;
color: #FFF;
margin-left: 40px;
text-transform: none;
}
.helper-note a:hover,
.helper-note a:active {
color: #CCC;
}
.helper-note a.secondary-action {
display: inline-block;
line-height: 30px;
color: #CCC;
text-decoration: none;
}
.helper-note a.secondary-action:hover,
.helper-note a.secondary-action:focus {
opacity: 0.7;
}
.helper-note .helper-icon {
float: left;
margin-top: 4px;
width: 24px;
height: 24px;
background-size: contain;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjOThhN2I1ICFpbXBvcnRhbnQ7IH08L3N0eWxlPjxwYXRoIGZpbGw9IiM1MjYwNjYiIGQ9Ik01IDloLTN2MWgzdi0xem0xLTJoLTR2MWg0di0xem0tNCA1aDN2LTFoLTN2MXptOCAyLjA0NmwtOS4wMDItLjA0Ni0uMDA0LTloMy4wMDZ2LTNoNnYyaDF2LTEuOTU0bC0xLjA4LTEuMDQ2aC02LjkybC0yLjk5OCAyLjk4Ni0uMDAyIDExLjAxNGgxMXYtNGwtMSAxLjA0NnYyem0tNi45OTYtMTEuNjA1djEuNTg2aC0xLjYwOGwxLjYwOC0xLjU4NnptMi45ODcgOS4wNThsMi4yMDYtLjA1OSA2LjgwNS01LjU1NC0xLjY4OS0yLjEwNC02LjgwNSA1LjU1NC0uNTE3IDIuMTYzem0xLjE2OS0xLjcxNWwuODMxLS4xNTYuMTU1LjgzNS0xLjIwMS41NjUuMjE1LTEuMjQ0eiIvPjwvc3ZnPg==");
display: inline-block;
vertical-align: top;
}
.helper-section {
position: relative;
clear: both;
}
.helper-section:hover .helper-note {
opacity: 1;
transform: translateY(-20px);
}
.helper-section .helper-content {
opacity: 1;
transform: translateZ(0);
transition: opacity 0.25s cubic-bezier(0.67, 0, 1, 1);
}
.helper-section:hover .helper-content {
opacity: 0.5;
transition: opacity 0.3s cubic-bezier(0, 0, 0.33, 1);
}
/* ================ Section Titles ================ */
.hero__content__wrapper,
.text__standard {
--cta-column-gap: 8px;
}
.kicker-flourished {
font-family: var(--TYPE-STACK-KICKER);
font-style: var(--TYPE-STYLE-KICKER);
font-weight: var(--TYPE-WEIGHT-KICKER);
text-transform: var(--FONT-KICKER-TRANSFORM);
letter-spacing: var(--FONT-KICKER-LETTER-SPACING);
font-size: calc(var(--font-4) * var(--TYPE-ADJUST-KICKER));
color: var(--text);
padding-bottom: var(--inner);
position: relative;
text-align: center;
}
.kicker-flourished:after {
content: "";
margin: auto;
width: 30px;
height: 3px;
position: absolute;
bottom: 0;
background: var(--text);
opacity: 0.2;
left: 0;
right: 0;
}
.text-left .kicker-flourished:after,
.text-left.kicker-flourished:after,
.align--top-left .kicker-flourished:after,
.align--middle-left .kicker-flourished:after,
.align--bottom-left .kicker-flourished:after {
right: unset;
}
.text-right .kicker-flourished:after,
.text-right.kicker-flourished:after,
.align--top-right .kicker-flourished:after,
.align--middle-right .kicker-flourished:after,
.align--bottom-right .kicker-flourished:after {
left: unset;
}
/* no margin on the text above buttons. */
.hero__content__wrapper .rte p:last-child {
margin-bottom: 0;
}
.standard__spacer,
.hero__spacer {
display: block;
margin-bottom: 0;
font-size: 0;
padding-top: var(--padding);
padding-bottom: var(--padding);
}
.standard__spacer:after,
.hero__spacer:after {
position: relative;
display: inline-block;
}
.text--white .standard__spacer:after,
.text--white .hero__spacer:after {
opacity: 1;
background-color: var(--text);
}
.standard__spacer--line,
.hero__spacer--line {
padding-bottom: var(--inner);
position: relative;
margin-bottom: 0;
padding-top: var(--padding);
padding-bottom: var(--padding);
}
.standard__spacer--line:after,
.hero__spacer--line:after {
content: "";
margin: auto;
width: 30px;
height: 3px;
position: absolute;
bottom: 0;
background: var(--text);
opacity: 0.2;
}
.hero__kicker {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
margin: 0;
}
.hero__kicker:not([class*=body-size-], [class*=accent-size-]) {
font-size: calc(var(--font-4) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
}
.block__kicker--flourished {
--inner: var(--gap, var(--grid-md));
padding-bottom: var(--inner);
position: relative;
}
.block__kicker--flourished:after {
content: "";
margin: auto;
width: 30px;
height: 3px;
position: absolute;
bottom: 0;
background: var(--text);
opacity: 0.2;
}
.hero__content--transparent .block__kicker--flourished:after {
opacity: 1;
}
.text-center .block__kicker--flourished:after,
.align--top-center .block__kicker--flourished:after,
.align--middle-center .block__kicker--flourished:after,
.align--bottom-center .block__kicker--flourished:after {
transform: translateX(-15px);
}
.text-left .block__kicker--flourished:after,
.text-left.block__kicker--flourished:after,
.text-start .block__kicker--flourished:after,
.text-start.block__kicker--flourished:after,
.align--top-left .block__kicker--flourished:after,
.align--middle-left .block__kicker--flourished:after,
.align--bottom-left .block__kicker--flourished:after {
left: 0;
}
.text-right .block__kicker--flourished:after,
.text-right.block__kicker--flourished:after,
.text-end .block__kicker--flourished:after,
.text-end.block__kicker--flourished:after,
.align--top-right .block__kicker--flourished:after,
.align--middle-right .block__kicker--flourished:after,
.align--bottom-right .block__kicker--flourished:after {
right: 0;
}
.hero__title {
margin: 0;
}
.hero__kicker p,
.hero__title p {
font-size: inherit;
font-style: inherit;
font-weight: inherit;
line-height: inherit;
margin-bottom: inherit;
margin-top: inherit;
}
.hero__kicker a,
.hero__title a {
text-decoration: underline;
}
.hero__kicker a:hover,
.hero__title a:hover {
text-decoration: none;
}
.hero__kicker + .hero__title {
margin: var(--space-2) 0 0 0;
}
.hero__title + .hero__description {
margin: var(--space-4) 0 0 0;
}
/* Button spacing */
.hero__kicker,
.hero__description,
.hero__cta__wrapper,
.hero__title {
overflow: hidden;
}
.hero__kicker + .hero__btn,
.hero__description + .hero__btn,
.hero__cta__wrapper + .hero__btn,
.hero__title + .hero__btn {
margin-top: var(--space-8);
display: inline-block;
}
.hero__kicker + .hero__btn--play,
.hero__description + .hero__btn--play,
.hero__cta__wrapper + .hero__btn--play,
.hero__title + .hero__btn--play {
display: block;
}
.hero__btn + .hero__kicker, .hero__cta__wrapper + .hero__kicker,
.hero__btn + .hero__description,
.hero__cta__wrapper + .hero__description,
.hero__btn + .hero__cta__wrapper,
.hero__cta__wrapper + .hero__cta__wrapper,
.hero__btn + .hero__title,
.hero__cta__wrapper + .hero__title {
margin-top: var(--space-8);
}
.hero__cta__wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
overflow: visible;
margin: 0 calc(-1 * var(--cta-column-gap));
width: calc(100% + 2 * var(--cta-column-gap));
}
.text-left .hero__cta__wrapper {
justify-content: flex-start;
}
.text-center .hero__cta__wrapper {
justify-content: center;
}
.text-right .hero__cta__wrapper {
justify-content: flex-end;
}
@media only screen and (max-width: 479px) {
.hero__cta__wrapper {
flex-direction: column;
}
}
.hero__cta__wrapper .hero__btn {
margin-bottom: 0;
}
.hero__btn + .hero__cta__wrapper {
margin-top: var(--space-8);
}
.hero__btn:not(.btn--block),
.btn-text-thick-line + .hero__btn,
.hero__btn + .btn-text-thick-line {
margin-left: var(--cta-column-gap);
margin-right: var(--cta-column-gap);
}
.hero__cta__wrapper__btn-container {
flex-basis: 100%;
}
.hero__cta__wrapper .hero__btn + .hero__btn:not(.standard__cta),
.hero__cta__wrapper .hero__btn:not(.standard__cta),
.hero__cta__wrapper .btn-text-thick-line {
margin-top: var(--space-8);
}
.hero__content.text-right .hero__cta__wrapper, .align--top-right .hero__cta__wrapper, .align--middle-right .hero__cta__wrapper, .align--bottom-right .hero__cta__wrapper {
justify-content: flex-end;
}
@media only screen and (max-width: 479px) {
.hero__content.text-right .hero__cta__wrapper, .align--top-right .hero__cta__wrapper, .align--middle-right .hero__cta__wrapper, .align--bottom-right .hero__cta__wrapper {
align-items: flex-end;
}
.hero__content.text-right .hero__cta__wrapper .standard__cta + .standard__cta.btn-text-thick-line, .align--top-right .hero__cta__wrapper .standard__cta + .standard__cta.btn-text-thick-line, .align--middle-right .hero__cta__wrapper .standard__cta + .standard__cta.btn-text-thick-line, .align--bottom-right .hero__cta__wrapper .standard__cta + .standard__cta.btn-text-thick-line {
margin-top: 24px;
margin-right: var(--cta-column-gap);
}
}
.hero__content.text-center .hero__cta__wrapper, .align--top-center .hero__cta__wrapper, .align--middle-center .hero__cta__wrapper, .align--bottom-center .hero__cta__wrapper {
justify-content: center;
}
@media only screen and (max-width: 479px) {
.hero__content.text-center .hero__cta__wrapper, .align--top-center .hero__cta__wrapper, .align--middle-center .hero__cta__wrapper, .align--bottom-center .hero__cta__wrapper {
align-items: center;
}
}
.hero__content.text-left .hero__cta__wrapper, .align--top-left .hero__cta__wrapper, .align--middle-left .hero__cta__wrapper, .align--bottom-left .hero__cta__wrapper {
justify-content: flex-start;
}
@media only screen and (max-width: 479px) {
.hero__content.text-left .hero__cta__wrapper, .align--top-left .hero__cta__wrapper, .align--middle-left .hero__cta__wrapper, .align--bottom-left .hero__cta__wrapper {
align-items: flex-start;
}
.hero__content.text-left .hero__cta__wrapper .standard__cta + .standard__cta.btn-text-thick-line, .align--top-left .hero__cta__wrapper .standard__cta + .standard__cta.btn-text-thick-line, .align--middle-left .hero__cta__wrapper .standard__cta + .standard__cta.btn-text-thick-line, .align--bottom-left .hero__cta__wrapper .standard__cta + .standard__cta.btn-text-thick-line {
margin-top: 24px;
margin-left: var(--cta-column-gap);
}
}
/*=== Text sections ===*/
.text__standard {
color: var(--text);
}
@media only screen and (max-width: 767px) {
.text__standard {
padding-top: 10px;
padding-bottom: 10px;
}
}
.text__standard .standard__cta__wrapper {
margin: 0 calc(var(--cta-column-gap) * -1);
}
.text__standard .standard__cta {
display: inline-block;
margin: var(--space-6) var(--cta-column-gap) 0;
vertical-align: middle;
}
.text__standard *:last-child:not(.standard__cta):not(.timer) {
margin-bottom: 0;
}
.standard__heading:first-child {
margin-top: 0;
}
.standard__kicker {
font-family: var(--TYPE-STACK-KICKER);
font-style: var(--TYPE-STYLE-KICKER);
font-weight: var(--TYPE-WEIGHT-KICKER);
text-transform: var(--FONT-KICKER-TRANSFORM);
letter-spacing: var(--FONT-KICKER-LETTER-SPACING);
overflow: hidden;
color: var(--text);
margin: 0;
}
.standard__heading--set p,
.standard__kicker--set p,
.standard__rte--set p {
font-size: inherit;
margin-top: 0;
}
.kicker__line {
padding-bottom: var(--inner);
position: relative;
}
.kicker__line:after {
content: "";
margin: auto;
width: 30px;
height: 3px;
position: absolute;
bottom: 0;
background: var(--text);
opacity: 0.2;
left: 0;
}
.text-center .kicker__line:after {
right: 0;
}
.text-right .kicker__line:after {
left: auto;
right: 0;
}
.standard__heading a,
.standard__kicker a {
text-decoration: underline;
}
.standard__heading a:after,
.standard__kicker a:after {
display: none;
}
.standard__heading a:hover,
.standard__kicker a:hover {
text-decoration: none;
}
.standard__heading strong {
font-weight: var(--FONT-WEIGHT-HEADING-BOLD);
}
.standard__kicker strong {
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
}
.hero__title,
.hero__title p,
.standard__heading,
.standard__heading p {
font-family: var(--FONT-STACK-HEADING);
font-style: var(--FONT-STYLE-HEADING);
font-weight: var(--FONT-WEIGHT-HEADING);
letter-spacing: var(--FONT-HEADING-LETTER-SPACING);
text-transform: var(--FONT-HEADING-TRANSFORM);
}
.standard__kicker,
.standard__heading,
.standard__rte,
.standard__cta,
.standard__icons,
.standard__image,
.standard__list {
overflow: hidden;
margin-bottom: var(--space-6);
}
.standard__kicker + .standard__spacer,
.standard__heading + .standard__spacer,
.standard__rte + .standard__spacer,
.standard__cta + .standard__spacer,
.standard__icons + .standard__spacer,
.standard__image + .standard__spacer,
.standard__list + .standard__spacer {
margin-top: calc(var(--space-6) * -1);
}
.text__standard {
max-width: var(--CONTENT-WIDTH, 100%);
}
.text__standard.text-center {
margin-left: auto;
margin-right: auto;
}
.text__standard.text-right {
margin-left: auto;
}
.standard__rte.columns--2 p:first-of-type,
.standard__rte.columns--3 p:first-of-type {
margin-top: 0;
}
.standard__cta.btn--small,
.standard__cta.btn--medium,
.standard__cta.btn--large,
.standard__cta.shopify-challenge__button,
.standard__cta.btn--long {
margin-top: var(--space-8);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
}
.standard__cta.btn-text-thick-line {
line-height: 1;
padding: 5px 0;
min-width: auto;
}
.standard__cta.btn-text-thick-line.btn--long {
margin-left: 50px;
margin-right: 50px;
}
.standard__cta.btn-text-thick-line:after {
bottom: 0;
}
.standard__cta:not(.btn--block),
.standard__cta + .standard__icon,
.standard__icon + .standard__cta {
margin-left: var(--cta-column-gap);
margin-right: var(--cta-column-gap);
}
.standard__cta--inline {
display: inline-block;
vertical-align: middle;
}
.columns--2 {
-moz-columns: 2 180px;
columns: 2 180px;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
.columns--3 {
-moz-columns: 3 180px;
columns: 3 180px;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
.columns--4 {
-moz-columns: 4 180px;
columns: 4 180px;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
.standard__rte p {
display: block;
margin-left: auto;
margin-right: auto;
}
.standard__rte p a {
text-decoration: underline;
}
.standard__rte p a:hover {
text-decoration: none;
}
.standard__rte p + p {
margin-top: 0.75em;
}
.standard__rte ul {
list-style: disc;
margin-block-start: 1em;
margin-block-end: 1em;
padding-inline-start: 40px;
}
.standard__icons {
width: 100%;
display: inline-flex;
align-items: flex-start;
flex-flow: row wrap;
justify-content: var(--FLEX-POSITION);
}
.standard__icon {
flex: 0 0 var(--ICON-BLOCK-COLS);
padding: 0 var(--cta-column-gap);
margin: var(--space-6) 0;
text-align: center;
min-width: 110px;
}
.standard__icon .standard__kicker,
.standard__icon .standard__heading {
max-width: 100%;
margin-bottom: calc(var(--space-6) / 2);
word-wrap: break-word;
}
.standard__icon .standard__rte {
max-width: 100%;
margin-bottom: 0;
}
.standard__icon svg {
width: 100%;
height: 100%;
}
.standard__icon svg path,
.standard__icon svg g,
.standard__icon svg circle {
fill: none !important;
stroke: var(--ICON-STROKE-COLOR) !important;
}
@media only screen and (max-width: 767px) {
.standard__icon {
flex: 0 0 50%;
}
}
.standard__icon__holder {
width: var(--ICON-SIZE);
height: var(--ICON-SIZE);
margin: 0 auto var(--space-6);
}
.text-left .standard__icon__holder {
margin-left: 0;
margin-right: 0;
}
.text-right .standard__icon__holder {
margin-left: auto;
margin-right: 0;
}
.standard__icon__holder > div {
overflow: hidden;
width: 100%;
height: 100%;
}
.text-left .standard__icon {
padding-left: 0;
}
.standard__list {
display: inline-block;
max-width: calc(33% - var(--cta-column-gap) * 2);
margin: var(--space-6) var(--cta-column-gap) 0;
vertical-align: top;
}
.standard__list ul {
list-style: disc inside;
}
.standard__list ol {
list-style-position: inside;
}
.standard__list ul,
.standard__list ol {
display: inline-block;
text-align: left;
}
@media only screen and (max-width: 767px) {
.standard__list {
max-width: none;
width: 100%;
}
}
.text-center .standard__image {
margin-left: auto;
margin-right: auto;
}
.text-right .standard__image {
margin-left: auto;
}
/* ============================================================================
#Colors
--STATIC vars have capital letters vs --dynamic vars have lowercase letters
============================================================================== */
.palette--light,
:root {
--bg: var(--COLOR-BG);
--bg-accent: var(--COLOR-BG-ACCENT);
--text-dark: var(--COLOR-TEXT-DARK);
--text: var(--COLOR-TEXT);
--text-light: var(--COLOR-TEXT-LIGHT);
--hover: var(--COLOR-A95);
--muted: var(--COLOR-A35);
--border: var(--COLOR-A20);
--hairline: var(--COLOR-A5);
--hairline-hover: var(--COLOR-A10);
--contrast: #000;
--primary: var(--COLOR-PRIMARY);
--primary-fade: var(--COLOR-PRIMARY-FADE);
--secondary: var(--COLOR-SECONDARY);
--secondary-fade: var(--COLOR-SECONDARY-FADE);
--rgb-canvas: var(--RGB-CANVAS);
--rgb-content: var(--RGB-CONTENT);
--rgb-primary: var(--RGB-PRIMARY);
--rgb-secondary: var(--RGB-SECONDARY);
--rgb-primary-contrast: var(--RGB-PRIMARY-CONTRAST);
--rgb-secondary-contrast: var(--RGB-SECONDARY-CONTRAST);
--rgb-black: 0 0 0;
--rgb-white: 255 255 255;
--rgb-black-contrast: var(--rgb-white);
--rgb-white-contrast: var(--rgb-black);
--rgb-canvas-contrast: var(--rgb-content);
--rgb-content-contrast: var(--rgb-canvas);
--rgb-button-main: var(--rgb-content);
--rgb-button-contrast: var(--rgb-content-contrast);
--color-error: #D02E2E;
--color-success: #56AD6A;
}
.palette--dark,
body.default--dark {
--bg: var(--INVERSE-BG);
--bg-accent: var(--INVERSE-BG-ACCENT);
--text-dark: var(--INVERSE-TEXT-DARK);
--text: var(--INVERSE-TEXT);
--text-light: var(--INVERSE-TEXT-LIGHT);
--hover: var(--INVERSE-A95);
--muted: var(--INVERSE-A35);
--border: var(--INVERSE-A20);
--hairline: var(--INVERSE-A5);
--hairline-hover: var(--INVERSE-A10);
--contrast: #FFF;
--primary: var(--INVERSE-PRIMARY);
--primary-fade: var(--INVERSE-PRIMARY-FADE);
--secondary: var(--INVERSE-SECONDARY);
--secondary-fade: var(--INVERSE-SECONDARY-FADE);
--rgb-canvas: var(--RGB-DARK-CANVAS);
--rgb-content: var(--RGB-DARK-CONTENT);
--rgb-primary: var(--RGB-DARK-PRIMARY);
--rgb-secondary: var(--RGB-DARK-SECONDARY);
--rgb-dark-primary-contrast: var(--RGB-DARK-PRIMARY-CONTRAST);
--rgb-dark-secondary-contrast: var(--RGB-DARK-SECONDARY-CONTRAST);
--color-error: #D02E2E;
--color-success: #56AD6A;
}
.palette--bright,
body.default--bright {
--bg: var(--BRIGHT-BG);
--bg-accent: var(--BRIGHT-BG-ACCENT);
--text-dark: var(--BRIGHT-TEXT-DARK);
--text: var(--BRIGHT-TEXT);
--text-light: var(--BRIGHT-TEXT-LIGHT);
--hover: var(--BRIGHT-A95);
--muted: var(--BRIGHT-A35);
--border: var(--BRIGHT-A20);
--hairline: var(--BRIGHT-A5);
--hairline-hover: var(--BRIGHT-A10);
--contrast: #000;
--primary: var(--BRIGHT-PRIMARY);
--primary-fade: var(--BRIGHT-PRIMARY-FADE);
--secondary: var(--BRIGHT-SECONDARY);
--secondary-fade: var(--BRIGHT-SECONDARY-FADE);
--rgb-canvas: var(--RGB-BRIGHT-CANVAS);
--rgb-content: var(--RGB-BRIGHT-CONTENT);
--rgb-primary: var(--RGB-BRIGHT-PRIMARY);
--rgb-secondary: var(--RGB-BRIGHT-SECONDARY);
--rgb-bright-primary-contrast: var(--RGB-BRIGHT-PRIMARY-CONTRAST);
--rgb-bright-secondary-contrast: var(--RGB-BRIGHT-SECONDARY-CONTRAST);
--color-error: #D02E2E;
--color-success: #56AD6A;
}
.palette--dark,
.palette--light,
.palette--bright,
.main-content {
color: var(--text);
background-color: var(--bg);
}
body.default--accent {
--bg: var(--COLOR-BG-ACCENT);
}
body.default--accent--inverse {
--bg: var(--INVERSE-BG-ACCENT);
}
body.default--accent--bright {
--bg: var(--BRIGHT-BG-ACCENT);
}
.text--neutral {
--text-dark: var(--COLOR-TEXT-DARK);
--text: var(--COLOR-TEXT);
--text-light: var(--COLOR-TEXT-LIGHT);
}
.text--black {
--text: #000;
--text-light: #000;
--text-dark: #000;
}
.text--primary {
--text: var(--COLOR-PRIMARY);
--text-light: var(--COLOR-PRIMARY);
--text-dark: var(--COLOR-PRIMARY);
}
.text--secondary {
--text: var(--COLOR-SECONDARY);
--text-light: var(--COLOR-SECONDARY);
--text-dark: var(--COLOR-SECONDARY);
}
.text--white {
--text: #FFF;
--text-light: #FFF;
--text-dark: #F7F7F7;
}
.text--invert--primary {
--text: var(--INVERSE-PRIMARY);
--text-light: var(--INVERSE-PRIMARY);
--text-dark: var(--INVERSE-PRIMARY);
}
.text--invert--secondary {
--text: var(--INVERSE-SECONDARY);
--text-light: var(--INVERSE-SECONDARY);
--text-dark: var(--INVERSE-SECONDARY);
}
.text--invert {
--text: var(--INVERSE-A90);
--text-light: var(--INVERSE-A80);
--text-dark: var(--INVERSE-TEXT);
}
.text--bright--primary {
--text: var(--BRIGHT-PRIMARY);
--text-light: var(--BRIGHT-PRIMARY);
--text-dark: var(--BRIGHT-PRIMARY);
}
.text--bright--secondary {
--text: var(--BRIGHT-SECONDARY);
--text-light: var(--BRIGHT-SECONDARY);
--text-dark: var(--BRIGHT-SECONDARY);
}
.bg--transparent {
--bg: rgb(255 255 255 / 0%);
}
.bg--neutral {
--bg: var(--COLOR-BG);
}
.bg--accent {
--bg: var(--COLOR-BG-ACCENT);
}
.bg--invert {
--bg: var(--INVERSE-BG);
}
.bg--invert--accent {
--bg: var(--INVERSE-BG-ACCENT);
}
.bg--bright {
--bg: var(--BRIGHT-BG);
}
.bg--bright--accent {
--bg: var(--BRIGHT-BG-ACCENT);
}
.bg--white {
--bg: #FFF;
}
.bg--black {
--bg: #000;
}
.bg--primary {
--bg: var(--COLOR-PRIMARY);
}
.bg--secondary {
--bg: var(--COLOR-SECONDARY);
}
.bg--invert--primary {
--bg: var(--INVERSE-PRIMARY);
}
.bg--invert--secondary {
--bg: var(--INVERSE-SECONDARY);
}
.bg--bright--primary {
--bg: var(--BRIGHT-PRIMARY);
}
.bg--bright--secondary {
--bg: var(--BRIGHT-SECONDARY);
}
.stain-button-canvas {
--rgb-button-main: var(--rgb-canvas);
--rgb-button-contrast: var(--rgb-content);
}
.stain-button-content {
--rgb-button-main: var(--rgb-content);
--rgb-button-contrast: var(--rgb-content-contrast);
}
.stain-button-primary {
--rgb-button-main: var(--rgb-primary);
--rgb-button-contrast: var(--rgb-primary-contrast);
}
.stain-button-secondary {
--rgb-button-main: var(--rgb-secondary);
--rgb-button-contrast: var(--rgb-secondary-contrast);
}
.stain-button-black {
--rgb-button-main: var(--rgb-black);
--rgb-button-contrast: var(--rgb-black-contrast);
}
.stain-button-white {
--rgb-button-main: var(--rgb-white);
--rgb-button-contrast: var(--rgb-white-contrast);
}
/* ================ Heights ================ */
:root {
--full-screen: 100vh;
--three-quarters: 75vh;
--two-thirds: 66vh;
--one-half: 50vh;
--one-third: 33vh;
--one-fifth: 20vh;
--header-height: 100px;
--footer-height: 500px;
--announcement-height: 33px;
--content-full: 90vh;
--scrollbar-width: 0;
}
.use_screen_full {
height: var(--full-screen);
}
.use_screen_three_quarters {
height: var(--three-quarters);
}
.use_screen_two_thirds {
height: var(--two-thirds);
}
.use_screen_one_half {
height: var(--one-half);
}
.use_screen_one_third {
height: var(--one-third);
}
.use_screen_one_fifth {
height: var(--one-fifth);
}
.use_pixels_800 {
height: 800px;
}
.use_pixels_650 {
height: 650px;
}
.use_pixels_500 {
height: 500px;
}
/* ============================================================================
#Animations
============================================================================== */
:root {
--ease-out-fast: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-out-sharp: cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* ================ MODULES ================ */
/* Shopify Product Reviews */
.product-reviews {
padding: 30px 0;
}
.product-reviews .spr-container {
padding: 0;
margin: 0;
border: none;
}
.product-reviews .spr-summary {
width: 100%;
display: block;
position: relative;
min-height: 80px;
}
.product-reviews .spr-summary-actions {
float: right;
}
.product-reviews .spr-summary-actions-newreview {
font-family: var(--TYPE-STACK-BUTTON);
font-style: var(--TYPE-STYLE-BUTTON);
font-weight: var(--TYPE-WEIGHT-BUTTON);
text-transform: var(--FONT-BUTTON-TRANSFORM);
letter-spacing: var(--FONT-BUTTON-LETTER-SPACING);
display: inline-block;
padding: var(--space-5) var(--space-8);
margin: 0;
line-height: 1;
text-decoration: none;
text-align: center;
vertical-align: middle;
border: none;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: var(--BUTTON-RADIUS);
background-color: rgba(255, 255, 255, 0);
color: var(--text);
border: 1px solid var(--text);
}
@media only screen and (max-width: 479px) {
.product-reviews .spr-summary-actions {
display: block;
margin-top: 35px;
}
}
/* ============================================================================
#Pagination (Including Shopify Product Reviews)
============================================================================== */
.pagination {
margin-bottom: 1em;
}
/* ================ Custom Pagination ================ */
.pagination-custom {
display: inline-block;
padding-left: 0;
border-radius: var(--radius-sm);
margin: 0;
}
.pagination-custom > li {
display: inline;
}
.pagination-custom > li:first-child > a,
.pagination-custom > li:first-child > span {
margin-left: 0;
border-bottom-left-radius: var(--radius-sm);
border-top-left-radius: var(--radius-sm);
}
.pagination-custom > li:last-child > a,
.pagination-custom > li:last-child > span {
border-top-right-radius: var(--radius-sm);
border-bottom-right-radius: var(--radius-sm);
}
.pagination-custom > li > a:hover,
.pagination-custom > li > span:hover,
.pagination-custom > li > a:focus,
.pagination-custom > li > span:focus {
color: var(--text-dark);
}
.pagination-custom > .active > a,
.pagination-custom > .active > span,
.pagination-custom > .active > a:hover,
.pagination-custom > .active > span:hover,
.pagination-custom > .active > a:focus,
.pagination-custom > .active > span:focus {
z-index: 2;
cursor: default;
color: var(--text-dark);
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
}
.pagination-custom > .disabled > span,
.pagination-custom > .disabled > a,
.pagination-custom > .disabled > a:hover,
.pagination-custom > .disabled > a:focus {
color: var(--border);
cursor: not-allowed;
}
.pagination-custom [class^=icon] {
display: inline-block;
}
.pagination-custom__arr > a,
.pagination-custom__arr > span {
position: relative;
float: left;
padding: 10px 20px;
line-height: 1.42;
text-decoration: none;
border: 1px solid var(--border);
}
.pagination-custom__num > a,
.pagination-custom__num > span {
position: relative;
float: left;
padding: 10px 20px;
line-height: 1.42;
text-decoration: none;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.pagination-custom__num.active span:after {
content: "";
width: 50%;
left: 25%;
position: absolute;
bottom: -1px;
height: 1px;
background: var(--text-dark);
}
.pagination-custom__spacer > span {
position: relative;
float: left;
padding: 10px 10px;
line-height: 1.42;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.pagination-custom__num--dots > span {
padding: 10px 5px;
}
@media only screen and (max-width: 479px) {
.pagination-custom__num--dots > span,
.pagination-custom__spacer > span {
padding: 10px 0;
}
.pagination-custom__num > a,
.pagination-custom__num > span,
.pagination-custom__arr > a,
.pagination-custom__arr > span {
padding: 10px 15px;
}
}
/* ============================================================================
#Pages
============================================================================== */
/* ================ Page ================ */
.section-page hr {
width: 75%;
margin-left: 12%;
}
.page__template .rte {
margin-bottom: 0;
}
.page__template .rte *:first-child {
margin-top: 0;
}
.page__template .rte p:last-child {
margin-bottom: 0;
}
/* ================ Policy Page ================ */
body .shopify-policy__container,
body .shopify-email-marketing-confirmation__container {
position: relative;
text-align: left;
margin: 0 auto;
width: 670px;
max-width: 100%;
padding: 64px var(--outer);
}
.shopify-policy__title h1,
body .shopify-email-marketing-confirmation__container h1 {
font-size: calc(var(--font-8) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-tight);
text-align: center;
margin: 0 0 var(--outer);
}
body .shopify-email-marketing-confirmation__container {
text-align: center;
}
/* ================ Marketing unsub ================ */
.shopify-email-marketing-confirmation__container p {
font-size: calc(var(--font-6) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-snug);
}
.shopify-email-marketing-confirmation__container a {
font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
position: relative;
text-decoration: none;
}
.shopify-email-marketing-confirmation__container a:after {
content: "";
left: 0;
width: 100%;
display: block;
position: absolute;
bottom: -1px;
height: 1px;
background: currentcolor;
transition: transform 0.2s ease, opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
.shopify-email-marketing-confirmation__container a:after {
height: 0.5px;
}
}
.shopify-email-marketing-confirmation__container a:after {
transform: scaleX(1);
transform-origin: 0 50%;
}
.shopify-email-marketing-confirmation__container a:hover:after {
transform: scaleX(0);
transform-origin: 100% 50%;
}
/* ============================================================================
#Site Header
============================================================================== */
.header__wrapper {
--bg: var(--COLOR-NAV);
--border: var(--COLOR-NAV-BORDER);
--text: var(--COLOR-NAV-TEXT);
--text-dark: var(--COLOR-NAV-TEXT-DARK);
--text-light: var(--COLOR-NAV-TEXT-LIGHT);
--text-transparent: var(--COLOR-NAV-TEXT-TRANSPARENT);
--underline: var(--COLOR-NAV-A10);
}
.theme__header {
position: absolute;
z-index: 6000;
width: 100%;
background-color: var(--bg);
color: var(--text);
border-bottom: 1px solid var(--border);
display: flex;
flex-wrap: wrap;
}
.header__inner {
width: 100%;
}
.header__inner--bar {
--bg: var(--COLOR-ANNOUNCEMENT-BG);
--text: var(--COLOR-ANNOUNCEMENT-TEXT);
color: var(--text);
background: var(--bg);
padding: 4px 0;
}
@media only screen and (max-width: 479px) {
.header__inner--bar-nav {
display: none;
}
}
@media (pointer: coarse) {
.header__inner--bar-nav {
display: none;
}
}
.js__show__mobile .header__inner--bar-nav, [data-header-style=drawer] .header__inner--bar-nav {
display: none;
}
[data-header-transparent=true] .header__inner--bar {
border: none;
}
[data-header-transparent=true]:not(.meganav--visible) .header__inner--bar {
color: currentcolor;
background: transparent;
position: relative;
}
[data-header-transparent=true]:not(.meganav--visible) .theme__header__toolbar {
position: relative;
}
[data-header-transparent=true]:not(.meganav--visible) .theme__header__toolbar:after {
content: "";
height: 1px;
background: currentcolor;
opacity: 0.2;
width: 100%;
left: 0;
bottom: -4px;
position: absolute;
}
@media only screen and (max-width: 767px) {
[data-header-transparent=true]:not(.meganav--visible) .theme__header__toolbar:after {
width: calc(100% + var(--outer) * 2);
left: var(--outer-offset);
}
}
.toolbar__text {
flex-grow: 1;
}
.toolbar__text p {
margin: 0;
}
.toolbar__text--center {
justify-content: center;
}
.toolbar__text a {
position: relative;
text-decoration: none;
}
.toolbar__text a:after {
content: "";
left: 0;
width: 100%;
display: block;
position: absolute;
bottom: -1px;
height: 1px;
background: currentcolor;
transition: transform 0.2s ease, opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
.toolbar__text a:after {
height: 0.5px;
}
}
.toolbar__text a:after {
transform: scaleX(1);
transform-origin: 0 50%;
}
.toolbar__text a:hover:after {
transform: scaleX(0);
transform-origin: 100% 50%;
}
.header-override-border .theme__header,
[data-header-transparent=true] .theme__header {
border-bottom-color: transparent;
}
.header-override-border .theme__header .header__dropdown,
[data-header-transparent=true] .theme__header .header__dropdown {
border: none;
}
.header-override-border .theme__header .grandparent .header__dropdown,
[data-header-transparent=true] .theme__header .grandparent .header__dropdown {
border-bottom: none;
}
[data-header-transparent=true] .theme__header:after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
height: 150%;
width: 100%;
background: linear-gradient(to bottom, var(--COLOR-HEADER-TRANSPARENT-GRADIENT) 0%, rgba(255, 255, 255, 0) 100%);
transition: opacity 0.2s;
}
[data-header-transparent=true] .theme__header .parent .header__dropdown {
padding-top: 18px;
}
[data-header-transparent=true].meganav--visible .theme__header:after {
opacity: 0;
}
.header__backfill {
visibility: hidden;
z-index: -1;
position: relative;
}
.header__backfill .theme__header__toolbar {
display: flex;
flex-wrap: nowrap;
}
.header__backfill__content {
display: flex;
}
@media (pointer: coarse) {
.header__backfill__content {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media only screen and (max-width: 479px) {
.header__backfill__content {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.js__show__mobile ~ .header__backfill .header__backfill__content,
[data-header-style=drawer] ~ .header__backfill .header__backfill__content {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.js__show__mobile ~ .header__backfill .toolbar__links,
.js__show__mobile ~ .header__backfill .header__inner--bar-nav,
[data-header-style=drawer] ~ .header__backfill .toolbar__links,
[data-header-style=drawer] ~ .header__backfill .header__inner--bar-nav {
display: none;
}
.header__logo {
position: relative;
z-index: 2;
margin: 0;
padding: var(--LOGO-PADDING) 0;
display: flex;
align-items: center;
justify-content: center;
grid-column: span 4/span 4;
}
.header__logo img {
font-size: 0;
}
@media only screen and (max-width: 479px) {
.header__logo {
padding: calc(var(--LOGO-PADDING) * 0.7) 0;
}
}
.header__logo__link {
display: block;
text-decoration: none;
color: var(--text);
position: relative;
max-width: 50vw;
width: var(--LOGO-WIDTH, auto);
}
.header__logo__link img {
height: auto;
}
.header__logo__text {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: uppercase;
letter-spacing: 1px;
height: 50px;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 1em 0.5em;
background: var(--COLOR-NAV-TEXT);
color: var(--COLOR-NAV);
}
.header__logo__text span {
max-width: calc(50vw - 1em);
text-align: center;
line-height: 1;
height: auto;
}
.header__logo__text--long.header__logo__text {
font-size: calc(var(--font-4) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
}
@media only screen and (max-width: 767px) {
.header__logo__text--break.header__logo__text {
word-break: break-all;
}
}
.header__mobile {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.theme__header__toolbar.header__mobile {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.header__mobile__left,
.header__mobile__right {
display: flex;
}
.header__mobile__left {
display: flex;
justify-content: flex-start;
}
.header__mobile__left .header__mobile__button {
display: flex;
justify-content: flex-start;
padding-left: 0;
}
.header__mobile__right {
display: flex;
justify-content: flex-end;
}
.header__mobile__right .header__mobile__button {
display: flex;
justify-content: flex-end;
padding-right: 0;
}
.header__mobile__right .visually-hidden, .header__mobile__right [data-shopify-xr-hidden] {
margin-right: 0;
}
.header__mobile__button {
height: 100%;
min-width: 60px;
display: flex;
align-items: center;
align-content: center;
}
.header__desktop {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
flex-wrap: nowrap;
}
.header__desktop__bar__l,
.header__desktop__bar__c,
.header__desktop__bar__r {
display: flex;
align-self: stretch;
}
.header__desktop__bar__l {
flex: 1 0 0;
justify-content: flex-start;
}
.header__desktop__bar__c {
flex-grow: 0;
}
.header__desktop__bar__r {
flex: 1 0 0;
justify-content: flex-end;
}
.header__desktop__bar__inline {
display: flex;
align-self: stretch;
height: 100%;
}
.header__desktop__buttons {
display: flex;
}
.header__menu__inner {
display: flex;
height: 100%;
}
.navlink--toplevel,
.header__desktop__button .navlink {
align-items: center;
display: flex;
height: 100%;
}
.header__desktop__button .navlink,
.header__mobile__button {
color: var(--text);
}
.highlight--link {
color: var(--COLOR-HIGHLIGHT-LINK);
}
.navtext {
font-family: var(--TYPE-STACK-NAV);
font-style: var(--TYPE-STYLE-NAV);
font-weight: var(--TYPE-WEIGHT-NAV);
text-transform: var(--FONT-NAV-TRANSFORM);
letter-spacing: var(--FONT-NAV-LETTER-SPACING);
font-size: calc(var(--font-2) * var(--TYPE-ADJUST-NAV));
white-space: nowrap;
display: block;
}
.navlink {
padding: 5px 15px;
}
.navlink svg {
font-size: 20px;
}
.header__mobile__left svg,
.header__mobile__right svg {
font-size: 24px;
}
/* Fade out non hovered links */
.navlink--toplevel {
transition: opacity 0.1s linear;
}
.menu__item.is-visible .navlink--toplevel:before {
position: absolute;
top: 0;
left: var(--bar-left);
bottom: 0;
z-index: 2;
width: var(--bar-width);
content: "";
}
.header__menu__inner:hover .menu__item:not(:hover) .navlink--toplevel {
opacity: 0.8;
}
.header__desktop__bar__r .header__desktop__button:last-child {
margin-right: calc(var(--nav-gutter) * -1);
}
.header__desktop__bar__r .header__desktop__button:last-child > a {
padding-right: var(--nav-gutter);
overflow: hidden;
}
.header__desktop__bar__r .header__desktop__button:last-child > a:after {
width: calc(100% + 15px - var(--nav-gutter));
padding-bottom: calc(100% + 15px - var(--nav-gutter));
}
.header__desktop__bar__l .menu__item:first-child > a {
padding-left: 0;
}
/* ================ Sticky header ================ */
.js__header__stuck {
position: fixed;
width: 100%;
top: 0;
z-index: 6000;
}
.js__header__stuck .theme__header {
-webkit-backdrop-filter: blur(0);
backdrop-filter: blur(0);
transition: background-color 0s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-backdrop-filter 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: backdrop-filter 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: backdrop-filter 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-backdrop-filter 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.js__header__stuck .theme__header:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: -5;
opacity: 0;
transition: opacity 0.2s linear;
background: var(--bg);
}
.js__header__stuck.js__header__stuck__backdrop .theme__header {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0);
transition: background-color 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-backdrop-filter 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: backdrop-filter 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: backdrop-filter 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-backdrop-filter 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.js__header__stuck.js__header__stuck__backdrop .theme__header:after {
opacity: 0.7;
transition: opacity 0s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.js__header__stuck.js__header__stuck__backdrop .theme__header:hover:after {
opacity: 1;
}
.js__header__stuck--animated .theme__header {
transform: translateY(-100%);
transition: transform 0.2s linear;
}
.js__header__stuck--animated.js__header__stuck--trigger-animation .theme__header,
.js__header__stuck--trigger-animation .theme__header {
transform: translateY(0);
transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
/* ================ Icon dot hover ================ */
.header__desktop__buttons--icons .header__desktop__button .navlink {
position: relative;
}
.header__desktop__buttons--icons .header__desktop__button .navlink:after {
content: "";
left: 0;
width: 100%;
padding-bottom: 100%;
position: absolute;
background: var(--text);
border-radius: 100%;
opacity: 0;
transform: scale(0);
transition: opacity 0.7s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.15s linear;
z-index: -2;
}
.header__desktop__buttons--icons .header__desktop__button .navlink:hover:after {
transform: scale(0.9);
opacity: 0.05;
}
body:not(.theme-animate-hover) .header__desktop__buttons--icons .header__desktop__button .navlink:hover:after {
transform: scale(0);
}
/* ================ Transparent header ================ */
.logo__img {
display: block;
width: 100%;
opacity: 1;
}
.logo__img--transparent {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
max-height: 100%;
max-width: 100%;
margin: auto;
opacity: 0;
}
[data-header-transparent=true]:not(.meganav--visible) {
--text: var(--text-transparent);
--text-dark: var(--text-transparent);
--underline: var(--text-transparent);
}
[data-header-transparent=true]:not(.meganav--visible) .theme__header {
background-color: rgba(255, 255, 255, 0);
}
[data-header-transparent=true]:not(.meganav--visible) .header__logo--has-transparent .logo__img--color {
opacity: 0;
}
[data-header-transparent=true]:not(.meganav--visible) .header__logo--has-transparent .logo__img--transparent {
opacity: 1;
}
[data-header-transparent=true] + .header__backfill {
display: none;
}
/* ================ Large / Small Display Logic ================ */
@media only screen and (max-width: 479px) {
.header__mobile {
display: grid;
}
.header__desktop {
display: none;
}
}
@media only screen and (min-width: 480px) {
.header__desktop {
position: static;
}
.header__mobile {
display: none;
}
}
/*
* Switch to the mobile version on screens with
* course input as the primary input method
* https://patrickhlauke.github.io/touch/pointer-hover-any-pointer-any-hover/results/
*/
@media (pointer: coarse) {
.header__desktop {
display: none;
}
.header__mobile {
display: grid;
}
}
.js__header__clone {
position: absolute;
transform: translateY(-5000px);
visibility: hidden;
}
.js__show__mobile .header__mobile,
[data-header-style=drawer] .header__mobile {
display: grid;
}
.js__show__mobile .theme__header__toolbar,
[data-header-style=drawer] .theme__header__toolbar {
display: block;
}
.js__show__mobile .header__desktop,
[data-header-style=drawer] .header__desktop {
display: none;
}
.theme__header__toolbar__text {
overflow: hidden;
position: relative;
flex: 1;
}
@media only screen and (max-width: 767px) {
.theme__header__toolbar__text {
margin: 0 var(--outer-offset);
width: auto;
}
}
/* ============================================================================
#Site Nav and Dropdowns
============================================================================== */
.header__dropdown {
--border: var(--COLOR-NAV-BORDER);
color: var(--COLOR-NAV-TEXT);
position: absolute;
top: 100%;
opacity: 0;
background-color: var(--COLOR-NAV);
border-bottom: var(--border);
visibility: hidden;
}
.header__dropdown:before {
position: absolute;
top: calc(-1 * var(--bar-bottom));
bottom: 100%;
left: 0;
right: 0;
z-index: 1;
height: calc((var(--menu-height) - var(--toolbar-height)) / 2 - 12px);
content: "";
opacity: 0;
visibility: hidden;
}
.header__dropdown.is-visible {
opacity: 1;
visibility: visible;
}
.header__dropdown.is-visible:before {
opacity: 1;
visibility: visible;
}
/* Product cards can force menu visibility */
.header__dropdown:not(.is-visible) .group\/quick-actions-toolbar {
display: none;
}
.header__dropdown__wrapper {
max-height: calc(100vh - var(--menu-height));
overflow-y: auto;
overflow-x: hidden;
}
.navlink--child,
.navlink--grandchild {
margin: 0;
padding: 0;
}
.navlink--child {
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
}
.dropdown__family--grandchild .navlink--grandchild .navtext {
font-family: var(--FONT-STACK-BODY);
font-style: var(--FONT-STYLE-BODY);
font-weight: var(--FONT-WEIGHT-BODY);
letter-spacing: var(--FONT-BODY-LETTER-SPACING);
text-transform: var(--FONT-BODY-TRANSFORM);
font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
text-transform: none;
letter-spacing: normal;
}
.dropdown__family--grandchild .navlink--grandchild:not(.highlight--link) .navtext {
color: var(--text-light);
}
.header__dropdown .dropdown__family--grandchild .navlink--grandchild:hover .navtext,
.dropdown__family--grandchild .navlink--grandchild:hover .navtext {
color: var(--text-dark);
}
.header__dropdown__image__holder {
overflow: hidden;
}
.header__dropdown__image__holder,
.header__dropdown__image {
position: relative;
}
.header__dropdown__actions {
padding: var(--space-6) 0;
}
.header__dropdown__image.is-on-image .header__dropdown__actions {
position: absolute;
bottom: 0;
left: 0;
z-index: 19;
width: 100%;
}
.header__dropdown__actions .text-btn-arrow-right {
font-size: calc(var(--font-2) * var(--FONT-ADJUST-BUTTON));
}
.header__dropdown__image .hero__title {
color: var(--text);
}
.header__dropdown__image.is-on-image .link-over-image ~ .header__dropdown__actions {
opacity: 0;
transform: translateY(calc(100% + var(--image-bottom)));
transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.header__dropdown__image.is-on-image .link-over-image:hover ~ .header__dropdown__actions {
opacity: 1;
transform: translateY(0);
transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.09s;
}
.header__dropdown__image.is-on-image .link-over-image:hover ~ .header__dropdown__actions .text-btn-arrow-right:after {
animation: move-right 2s infinite ease-in-out;
}
@media only screen and (max-width: 1099px) {
.header__dropdown__image.is-on-image .link-over-image ~ .header__dropdown__actions {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================================================
#Large Meganav
============================================================================== */
.grandparent .header__dropdown {
width: 100%;
left: 0;
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.grandparent .header__dropdown__inner {
display: grid;
padding: var(--gutter) 0;
grid-column-gap: 1.5em;
grid-row-gap: 1.5em;
}
.grandparent .dropdown__image {
display: block;
margin-bottom: 10px;
}
.grandparent .navlink--child {
width: 100%;
border-bottom: 1px solid var(--COLOR-NAV-A10);
padding-bottom: 10px;
display: block;
}
.grandparent .navlink--grandchild {
display: block;
margin-top: 10px;
}
/* Kids 1 & Kids 2 special cases */
.grandparent.kids-1:not([class*=blocks-]) .navlink--child,
.grandparent.kids-2:not([class*=blocks-]) .navlink--child {
position: relative;
border-bottom: 0;
padding-bottom: 25px;
}
.grandparent.kids-1:not([class*=blocks-]) .navlink--child:before,
.grandparent.kids-2:not([class*=blocks-]) .navlink--child:before {
content: "";
position: absolute;
bottom: 6px;
width: 32px;
height: 3px;
background-color: var(--underline);
}
.grandparent.kids-1:not([class*=blocks-]) .navlink--grandchild,
.grandparent.kids-2:not([class*=blocks-]) .navlink--grandchild {
margin-top: 8px;
}
.grandparent.kids-1:not([class*=blocks-]) .header__dropdown__inner,
.grandparent.kids-2:not([class*=blocks-]) .header__dropdown__inner {
justify-items: center;
}
.grandparent.kids-2 .header__dropdown__inner {
margin: 0 auto;
max-width: 50%;
padding-bottom: calc(var(--gutter) * 2.4);
}
.grandparent.kids-1 .header__dropdown__inner {
margin: 0 auto;
max-width: 25%;
padding-bottom: calc(var(--gutter) * 2.4);
grid-template-columns: minmax(0, 1fr);
}
.grandparent.kids-2 .header__dropdown__inner {
padding-top: calc(var(--gutter) * 2.1);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grandparent.kids-1.blocks-1 .header__dropdown__inner {
max-width: 30%;
}
.grandparent.kids-2.blocks-1 .header__dropdown__inner,
.grandparent.kids-2.blocks-2 .header__dropdown__inner {
padding-top: calc(var(--gutter) * 2.6);
max-width: 69%;
}
.grandparent.kids-2.blocks-1 .header__dropdown__inner {
grid-template-columns: 0.82fr 1fr;
}
.grandparent.kids-2.blocks-1 .dropdown__family {
padding-left: 10px;
}
.grandparent.kids-2.blocks-1 .navlink--grandchild .navtext {
font-family: var(--FONT-STACK-BODY);
font-style: var(--FONT-STYLE-BODY);
font-weight: var(--FONT-WEIGHT-BODY);
letter-spacing: var(--FONT-BODY-LETTER-SPACING);
text-transform: var(--FONT-BODY-TRANSFORM);
font-size: calc(var(--font-6) * var(--FONT-ADJUST-BODY));
text-transform: none;
letter-spacing: normal;
}
.grandparent.kids-3.blocks-2 .navlink--grandchild .navtext {
font-family: var(--FONT-STACK-BODY);
font-style: var(--FONT-STYLE-BODY);
font-weight: var(--FONT-WEIGHT-BODY);
letter-spacing: var(--FONT-BODY-LETTER-SPACING);
text-transform: var(--FONT-BODY-TRANSFORM);
font-size: calc(var(--font-6) * var(--FONT-ADJUST-BODY));
text-transform: none;
letter-spacing: normal;
}
.grandparent.kids-4.blocks-3 .navlink--grandchild .navtext {
font-family: var(--FONT-STACK-BODY);
font-style: var(--FONT-STYLE-BODY);
font-weight: var(--FONT-WEIGHT-BODY);
letter-spacing: var(--FONT-BODY-LETTER-SPACING);
text-transform: var(--FONT-BODY-TRANSFORM);
font-size: calc(var(--font-6) * var(--FONT-ADJUST-BODY));
text-transform: none;
letter-spacing: normal;
}
.grandparent.kids-5.blocks-4 .navlink--grandchild .navtext {
font-family: var(--FONT-STACK-BODY);
font-style: var(--FONT-STYLE-BODY);
font-weight: var(--FONT-WEIGHT-BODY);
letter-spacing: var(--FONT-BODY-LETTER-SPACING);
text-transform: var(--FONT-BODY-TRANSFORM);
font-size: calc(var(--font-6) * var(--FONT-ADJUST-BODY));
text-transform: none;
letter-spacing: normal;
}
.grandparent.kids-2.blocks-1 .navlink--child,
.grandparent.kids-2.blocks-2 .navlink--child {
padding-top: 5px;
padding-bottom: 16px;
}
.grandparent.kids-2.blocks-1 .navlink--grandchild,
.grandparent.kids-2.blocks-2 .navlink--grandchild {
margin-top: 13px;
}
.grandparent.kids-2.blocks-1 .navlink--child + .navlink--grandchild,
.grandparent.kids-2.blocks-2 .navlink--child + .navlink--grandchild {
margin-top: 20px;
}
.dropdown__family--grandchild {
min-width: 100%;
}
.grandparent.kids-3 .header__dropdown__inner {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grandparent.kids-4 .header__dropdown__inner {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grandparent.kids-5 .header__dropdown__inner {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grandparent.kids-6 .header__dropdown__inner {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grandparent.kids-7 .header__dropdown__inner {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grandparent.kids-8 .header__dropdown__inner {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grandparent.kids-9 .header__dropdown__inner {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grandparent.kids-10 .header__dropdown__inner,
.grandparent.kids-11 .header__dropdown__inner,
.grandparent.kids-12 .header__dropdown__inner,
.grandparent.kids-13 .header__dropdown__inner,
.grandparent.kids-14 .header__dropdown__inner,
.grandparent.kids-15 .header__dropdown__inner,
.grandparent.kids-16 .header__dropdown__inner,
.grandparent.kids-17 .header__dropdown__inner,
.grandparent.kids-18 .header__dropdown__inner,
.grandparent.kids-19 .header__dropdown__inner,
.grandparent.kids-20 .header__dropdown__inner {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.header__dropdown__element--wide {
grid-column-start: span 2;
}
/* ================ Hover animations ================ */
/* Basic Dropdown */
.menu__item.parent .navlink--child {
opacity: 0;
transform: translateY(-5px);
transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu__item.parent .is-visible .navlink--child {
opacity: 1;
transform: translateY(0);
}
/* Basic Meganav */
.menu__item.grandparent .navlink--child {
opacity: 0;
transition: opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu__item.grandparent .navlink--grandchild {
opacity: 0;
transform: translateY(-5px);
transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu__item.grandparent .is-visible .navlink--child,
.menu__item.grandparent .is-visible .navlink--grandchild {
opacity: 1;
transform: translateY(0);
}
/* Image Meganav */
.menu__item.grandparent .header__dropdown__image,
.menu__item.grandparent .product-grid-item {
opacity: 0;
transform: translateY(-15px);
transition: transform 0.75s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu__item.grandparent .is-visible .header__dropdown__image,
.menu__item.grandparent .is-visible .product-grid-item {
display: block;
opacity: 1;
transform: translateY(0);
}
/* dropdown inner link */
.header__dropdown .navlink .navtext {
transition: color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
white-space: normal;
}
.header__dropdown .navlink:hover .navtext {
color: var(--text-light);
}
.header__dropdown {
opacity: 0;
transition: opacity 0.1s ease-out;
}
.header__dropdown.is-visible {
opacity: 1;
transition: opacity 0.2s ease-out;
}
/* Override visibility on collection bottom image */
.header__dropdown .product-grid-item {
pointer-events: none;
}
.header__dropdown.is-visible .product-grid-item {
pointer-events: auto;
}
/* ================ Hover animations ================ */
.parent .header__dropdown {
border-left: 1px solid var(--border);
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--bg);
padding: 6px 32px 18px 32px;
margin-left: -17px;
}
.parent .navlink--child {
padding: 5px 0;
display: block;
}
.hover__bar {
position: absolute;
bottom: var(--bar-bottom);
left: 0;
height: 2px;
z-index: -1;
opacity: var(--bar-opacity);
background-color: var(--underline);
transform: translateX(var(--bar-left));
width: var(--bar-width);
transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, width 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.navlink[href="#"] {
cursor: default;
}
/* ================ Header cart status ================ */
[data-header-cart-count],
[data-header-cart-price] {
display: none;
}
.cart__status__parens [data-header-cart-count]:not([data-header-cart-count="0"]) {
display: inline-block;
}
.no-js .menu__item.parent:hover .header__dropdown,
.no-js .menu__item.parent:hover .navlink,
.no-js .menu__item.grandparent:hover .header__dropdown,
.no-js .menu__item.grandparent:hover .navlink {
opacity: 1 !important;
visibility: visible !important;
}
.no-js .navlink--toplevel:focus + .header__dropdown {
opacity: 1 !important;
visibility: visible !important;
}
.no-js .navlink--toplevel:focus + .header__dropdown .navlink {
opacity: 1 !important;
visibility: visible !important;
}
/* ================ Toolbar ================ */
.toolbar {
width: 100%;
font-size: 0;
}
.toolbar__scale {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
margin: 0 var(--gutter-offset);
}
.toolbar__scale.ticker--unloaded {
width: -moz-max-content;
width: max-content;
}
.toolbar__text {
padding: 0 var(--gutter);
display: flex;
}
.toolbar__text p {
white-space: nowrap;
}
@media only screen and (max-width: 767px) {
.toolbar__text {
justify-content: center;
}
}
.toolbar__text.ticker--animated {
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: var(--animation-time);
animation-play-state: running;
display: flex;
width: -moz-max-content;
width: max-content;
will-change: transform, padding, width;
}
.theme__header__toolbar__text:hover .toolbar__text.ticker--animated {
animation-play-state: paused;
}
.toolbar__links {
display: flex;
justify-content: flex-end;
margin: 0 -15px 0 0;
}
.toolbar__elements form {
display: flex;
margin: 0;
}
.toolbar__elements .popout-list {
top: calc(100% + 9px);
min-width: 100%;
bottom: auto;
border: none;
}
.toolbar__elements .popout__toggle,
.toolbar__links .toolbar__navlink {
border: none;
margin: 0;
padding: 0 15px;
color: inherit;
border-radius: 0;
display: flex;
line-height: 1.42;
align-items: center;
}
.toolbar__elements .popout__toggle,
.toolbar__elements .popout-list__option,
.toolbar__navlink .navtext {
font-family: var(--TYPE-STACK-NAV);
font-style: var(--TYPE-STYLE-NAV);
font-weight: var(--TYPE-WEIGHT-NAV);
text-transform: var(--FONT-NAV-TRANSFORM);
letter-spacing: var(--FONT-NAV-LETTER-SPACING);
font-size: calc(var(--font-2) * var(--TYPE-ADJUST-NAV));
}
.toolbar__elements .popout-list__option {
color: var(--text);
}
@keyframes ticker {
0% {
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
.announcement .flickity-button {
display: none;
}
.announcement p,
.announcement h1,
.announcement h2,
.announcement h3,
.announcement h4,
.announcement h5,
.announcement h6 {
margin: 0 0 0 2em;
}
.announcement p:first-child,
.announcement h1:first-child,
.announcement h2:first-child,
.announcement h3:first-child,
.announcement h4:first-child,
.announcement h5:first-child,
.announcement h6:first-child {
margin-left: 0;
}
.announcement ul {
list-style: disc outside;
}
.announcement ul,
.announcement ol {
display: flex;
align-items: center;
}
.announcement ul,
.announcement ol,
.announcement li {
margin: 0 0 0 3em;
}
.announcement ul:first-child,
.announcement ol:first-child,
.announcement li:first-child {
margin-left: 0;
}
.announcement * {
white-space: nowrap;
}
.announcement br {
display: none;
}
.announcement a {
position: relative;
}
.announcement a:after {
content: "";
position: absolute;
left: 50%;
top: calc(var(--underline) + 4px);
height: 1px;
width: 100%;
transform: translateX(-50%);
box-shadow: 0 -1px 0 0 currentcolor;
transition: opacity 0.2s linear;
}
.announcement a:link,
.announcement a:hover {
color: inherit;
text-decoration: none;
}
.announcement a:hover:after {
opacity: 0.5;
}
.announcement .cart__message {
border-bottom: none;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.announcement .cart__message.is-hidden {
visibility: visible;
max-height: none;
padding: 12px;
border: none;
opacity: 1;
}
.announcement .cart__graph {
display: none;
}
.announcement .icon {
display: block;
width: auto;
width: 1em;
max-height: 1em;
fill: currentColor;
}
.announcement svg path, .announcement svg g, .announcement svg circle {
stroke: var(--ICON-STROKE-COLOR);
}
.announcement .ticker--unloaded {
width: -moz-max-content;
width: max-content;
}
.announcement .flickity-enabled .ticker--animated {
animation-play-state: paused;
}
.announcement .flickity-enabled .is-selected .ticker--animated {
animation-play-state: running;
}
.announcement:hover .ticker--animated {
animation-play-state: paused;
}
.shopify-section-group-group-header:has([data-header-transparent=true]) + .shopify-section-group-group-header .announcement {
display: none;
}
html.js [x-data^=announcementSlider]:not(.flickity-enabled) > *:not(:first-child) {
display: none;
}
.ticker--animated {
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: var(--animation-time);
animation-play-state: running;
display: flex;
width: -moz-max-content;
width: max-content;
will-change: transform, padding, width;
}
.ticker--animated:hover {
animation-play-state: paused;
}
.ticker__comparitor {
position: absolute;
transform: translateY(-5000px);
visibility: hidden;
}
@keyframes ticker {
0% {
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
.header__drawer {
--border: var(--COLOR-NAV-A10);
--muted: var(--COLOR-NAV-A50);
--text: var(--COLOR-NAV-TEXT);
--text-light: var(--COLOR-NAV-TEXT);
--text-dark: var(--COLOR-NAV-TEXT);
--outer: 20px;
color: var(--text);
}
.header__drawer .drawer__content {
border: none;
}
.header__drawer__selects {
display: flex;
width: 100%;
margin: 0;
}
.header__drawer__selects .popout-list {
bottom: initial;
top: 100%;
min-width: calc(100% + 1px);
}
.drawer__top {
display: flex;
border-bottom: 1px solid var(--border);
justify-content: space-between;
height: 51px;
}
.drawer__top__left {
display: flex;
justify-content: flex-start;
height: 50px;
}
.drawer__button {
height: 50px;
color: var(--text);
width: 50px;
padding-right: 20px;
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
z-index: 2;
}
.header__drawer .drawer__close {
position: fixed;
right: 0;
z-index: 50;
background-color: var(--bg);
}
.header__drawer .drawer__close svg {
font-size: 20px;
}
.drawer__account {
display: flex;
align-items: center;
padding: 0 20px;
margin-right: 20px;
}
.search-drawer predictive-search[open] .header__search__results {
display: block;
}
.search-popdown predictive-search[open] .header__search__results {
max-height: calc(var(--full-screen) - var(--header-height));
opacity: 1;
visibility: visible;
}
.search__results__wrapper {
padding-bottom: 30px;
}
.search__results__products {
order: -1;
}
.search__results__heading {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border);
padding-bottom: var(--space-4);
margin-bottom: var(--gutter);
}
.search__results__products__list {
display: flex;
gap: var(--gutter);
flex-direction: column;
margin: var(--gutter) 0;
}
.search__results__actions {
margin-top: var(--gutter);
}
.product__inline__link {
display: flex;
gap: var(--gutter);
flex-direction: row;
}
.product__inline__image img {
max-width: 70px;
}
.search__results__title {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
margin-right: 0.5em;
}
.product__inline__title {
font-family: var(--FONT-STACK-BODY);
font-style: var(--FONT-STYLE-BODY);
font-weight: var(--FONT-WEIGHT-BODY);
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
letter-spacing: var(--FONT-BODY-LETTER-SPACING);
text-transform: var(--FONT-BODY-TRANSFORM);
font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
margin: 0;
word-break: break-word;
}
.product__inline__price {
margin-top: 5px;
margin-bottom: 0;
}
.other__inline__title {
margin: var(--gutter) 0;
}
.other__inline__title a {
display: block;
}
.header__search__results .animates {
opacity: 0;
}
.header__search__results .product__inline.animates,
.header__search__results .other__inline.animates {
animation: fade 0.5s ease-in-out;
animation-fill-mode: forwards;
}
.search-drawer .header__search__results {
display: none;
}
.search-popdown .header__search__results {
position: absolute;
top: 100%;
right: 0;
left: 0;
max-height: 0;
opacity: 0;
visibility: hidden;
transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0.5s;
background: var(--bg);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.search-popdown .header__search__results::-webkit-scrollbar {
display: none;
}
.search__results__btn .icon {
margin-left: 10px;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Null results */
.search__results__empty {
text-align: center;
padding-bottom: 10px;
}
/* A11Y */
.other__inline[aria-selected=true] a,
.product__inline[aria-selected=true] a,
.search__results__btn[aria-selected=true] {
outline: 5px auto var(--secondary);
}
/* ============================================================================
Gift Cards
============================================================================== */
/* ============================================================================
#Base Styles
============================================================================== */
.template-giftcard,
.template-giftcard body {
background: var(--COLOR-BG);
}
.template-giftcard a,
.template-giftcard body a {
text-decoration: none;
}
.template-giftcard .wrapper, .template-giftcard .wrapper .grandparent .header__dropdown__wrapper, .wrapper .grandparent .template-giftcard .header__dropdown__wrapper {
max-width: 588px;
}
.template-giftcard .wrapper img, .template-giftcard .wrapper .grandparent .header__dropdown__wrapper img, .wrapper .grandparent .template-giftcard .header__dropdown__wrapper img,
.template-giftcard .wrapper object,
.template-giftcard .wrapper .grandparent .header__dropdown__wrapper object,
.wrapper .grandparent .template-giftcard .header__dropdown__wrapper object,
.template-giftcard .wrapper iframe,
.template-giftcard .wrapper .grandparent .header__dropdown__wrapper iframe,
.wrapper .grandparent .template-giftcard .header__dropdown__wrapper iframe {
max-width: 100%;
}
.giftcard-header {
padding: 32px 0;
font-size: 1em;
text-align: center;
animation: fadein 0.5s ease-in-out both 0.4s;
}
.shop-url {
display: none;
}
.giftcard {
animation: slideup 0.8s ease-in-out;
}
.giftcard__border {
background-color: var(--hairline);
border-radius: 4px;
border: 1px solid var(--border);
padding: 1em;
animation: container-slide 0.8s ease-in-out;
}
.giftcard__content {
background-color: #FFF;
color: var(--text);
border: 1px solid var(--muted);
border-radius: 3px;
animation: cardslide 0.8s ease-in-out;
}
.giftcard__content:after {
content: "";
display: table;
clear: both;
}
.giftcard__header {
border-bottom: 1px solid var(--border);
padding: 16px;
}
.giftcard__header:after {
content: "";
display: table;
clear: both;
}
.giftcard__title {
text-align: center;
margin-bottom: 0;
}
.giftcard__tag {
display: block;
float: right;
background-color: var(--hairline);
border: 1px solid transparent;
color: #FFF;
padding: 10px;
border-radius: 4px;
font-size: 0.75em;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1;
}
.giftcard__tag--active {
background: transparent;
color: var(--text);
border: 1px solid var(--text-light);
}
.giftcard__wrap {
position: relative;
margin: 16px 16px 32px;
}
.giftcard__wrap img {
position: relative;
display: block;
border-radius: 10px;
z-index: 2;
}
.giftcard__wrap:before, .giftcard__wrap:after {
content: "";
position: absolute;
width: 47px;
height: 47px;
z-index: 3;
}
.giftcard__wrap:before {
background: url("/cdn/s/assets/gift-card/corner-top-left-2ba3edcd9e97ba146cd01a8161365c5e.svg") 0 0 no-repeat;
top: -1px;
left: -1px;
}
.giftcard__wrap:after {
background: url("/cdn/s/assets/gift-card/corner-bottom-right-1fb9bf49ff9564325e6b7c0fb0a7ff45.svg") 0 0 no-repeat;
bottom: -1px;
right: -1px;
}
.giftcard__code {
position: absolute;
bottom: 32px;
text-align: center;
width: 100%;
z-index: 50;
}
.giftcard__code--medium {
font-size: 0.875em;
}
.giftcard__code--small {
font-size: 0.75em;
}
.giftcard__code__inner {
display: inline-block;
vertical-align: baseline;
background-color: #FFF;
padding: 0.5em;
border-radius: 4px;
max-width: 450px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.giftcard__code--small .giftcard__code__inner {
overflow: auto;
}
.giftcard__code__text {
font-weight: var(--FONT-WEIGHT-BODY);
font-size: 1.875em;
text-transform: uppercase;
border-radius: 2px;
border: 1px dashed var(--border);
padding: 0.4em 0.5em;
display: inline-block;
vertical-align: baseline;
color: #777;
line-height: 1;
}
.disabled .giftcard__code__text {
color: #999;
text-decoration: line-through;
}
.giftcard__amount {
position: absolute;
top: 0;
right: 0;
color: #FFF;
font-size: 2.75em;
line-height: 1.2;
padding: 16px;
z-index: 50;
}
.giftcard__amount strong {
display: block;
text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
}
.giftcard__amount--medium {
font-size: 2em;
}
.tooltip {
display: block;
position: absolute;
top: -50%;
right: 50%;
margin-top: 16px;
z-index: 3;
color: #FFF;
text-align: center;
white-space: nowrap;
animation: popup 0.5s ease-in-out both 0.7s;
}
.tooltip:before {
content: "";
display: block;
position: absolute;
left: 100%;
bottom: 0;
width: 0;
height: 0;
margin-left: -5px;
margin-bottom: -5px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 5px solid rgba(51, 51, 51, 0.9);
}
.tooltip__label {
display: block;
position: relative;
right: -50%;
border: none;
border-radius: 4px;
background: rgba(51, 51, 51, 0.9);
min-height: 14px;
font-weight: var(--FONT-WEIGHT-BODY);
font-size: 12px;
text-decoration: none;
line-height: 16px;
text-shadow: none;
padding: 0.5em 0.75em;
margin-left: 0.25em;
}
.tooltip__label small {
text-transform: uppercase;
letter-spacing: 0.1em;
color: #B3B3B3;
font-size: 0.875em;
}
.giftcard__instructions {
text-align: center;
margin: 0 16px 32px;
}
.giftcard__actions {
position: relative;
border-top: 1px solid var(--border);
padding: 32px 16px;
text-align: center;
overflow: hidden;
}
.action-link {
position: absolute;
left: 16px;
top: 50%;
font-size: 0.875em;
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
display: block;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--text-light);
margin-top: -10px;
}
.action-link:hover, .action-link:focus {
color: var(--text);
}
.action-link__print {
display: inline-block;
vertical-align: baseline;
width: 17px;
height: 17px;
vertical-align: middle;
margin-right: 5px;
opacity: 0.25;
background-image: url("/cdn/s/assets/gift-card/icon-print-164daa1ae32d10d1f9b83ac21b6f2c70.png");
background-repeat: no-repeat;
background-position: 0 0;
}
.svg .action-link__print {
background-image: url("/cdn/s/assets/gift-card/icon-print-6a10b2fb86d223b8c783c9696eaf4c31.svg");
}
.action-link:hover .action-link__print {
opacity: 0.4;
}
.giftcard__footer {
text-align: center;
padding: 60px 0;
animation: fadein 0.5s ease-in-out both 0.4s;
}
.giftcard__icon {
width: 45px;
display: inline-block;
vertical-align: baseline;
}
#QrCode img {
padding: 32px;
border: 1px solid var(--border);
border-radius: 4px;
margin: 0 auto 32px;
}
/* ============================================================================
#Media Queries
============================================================================== */
/* ================ Medium-down width ================ */
@media screen and (max-width: 580px) {
.giftcard {
font-size: 12px;
}
.giftcard-header {
padding: 32px 0;
}
.header-logo {
font-size: 2em;
}
.giftcard__border {
padding: 16px;
}
.giftcard__actions {
padding: 16px;
}
.giftcard__actions .btn, .giftcard__actions .shopify-challenge__button {
width: 100%;
padding-left: 0;
padding-right: 0;
}
.action-link {
display: none;
}
}
/* ================ Small width ================ */
@media screen and (max-width: 400px) {
.giftcard__amount strong {
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}
.giftcard__wrap:before,
.giftcard__wrap:after {
display: none;
}
.giftcard__code {
font-size: 0.75em;
}
.giftcard__code--medium {
font-size: 0.65em;
}
.giftcard__code--small {
font-size: 0.55em;
}
}
/* ================ Small height ================ */
@media screen and (max-height: 800px) {
.header-logo img {
max-height: 90px;
}
}
/* ============================================================================
#Print Styles
============================================================================== */
@media print {
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
html,
body {
background-color: #FFF;
}
.giftcard-header {
padding: 10px 0;
}
.giftcard__content,
.giftcard__border {
border: 0 none;
}
.giftcard__actions,
.giftcard__wrap:before,
.giftcard__wrap:after,
.tooltip,
.add-to-apple-wallet {
display: none;
}
.giftcard__title {
float: none;
text-align: center;
}
.giftcard__code__text {
color: #555;
}
.shop-url {
display: block;
}
.logo {
color: #58686F;
}
}
/* ============================================================================
#Keyframe Animations
============================================================================== */
@keyframes slideup {
0% {
opacity: 0;
transform: translateY(2000px) rotate(10deg);
}
60% {
opacity: 1;
transform: translateY(-30px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0) rotate(0deg);
}
}
@keyframes popup {
0% {
opacity: 0;
transform: translateY(30px);
}
60% {
opacity: 1;
transform: translateY(-10px);
}
80% {
transform: translateY(2px);
}
100% {
transform: translateY(0);
}
}
@keyframes container-slide {
0% {
opacity: 0;
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 100;
}
}
.drawer__menu {
--sliderule-height: auto;
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
max-height: var(--sliderule-height);
transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.drawer__menu[data-sliderule-pane="0"] {
transform: translateX(0%);
position: relative;
display: block;
height: auto;
}
.drawer__menu[data-sliderule-pane="0"] .sliderule__panel.is-hiding {
overflow-y: auto;
overflow-x: hidden;
}
.drawer__menu[data-sliderule-pane="0"] .sliderule__panel.is-hiding .sliderule__panel {
overflow-y: hidden;
overflow-x: hidden;
}
.drawer__menu[data-sliderule-pane="1"] {
transform: translateX(-100%);
}
.drawer__menu[data-sliderule-pane="1"].is-hiding .sliderule__panel {
overflow: visible;
}
.drawer__menu[data-sliderule-pane="1"]:not(.is-hiding) .sliderule__panel.is-visible {
overflow-y: auto;
overflow-x: hidden;
}
.drawer__menu[data-sliderule-pane="1"] .sliderule__panel.is-visible .sliderule__panel {
overflow-y: hidden;
overflow-x: hidden;
}
.drawer__menu[data-sliderule-pane="1"] .sliderule__panel .sliderule__panel.is-hiding {
overflow-y: visible;
overflow-x: visible;
height: auto;
}
.drawer__menu[data-sliderule-pane="2"] {
transform: translateX(-200%);
}
.drawer__menu[data-sliderule-pane="2"] .sliderule__panel.is-visible {
overflow-y: visible;
overflow-x: visible;
height: auto;
}
.sliderule__panel {
overflow: hidden;
visibility: hidden;
position: absolute;
top: 0;
left: 100%;
display: flex;
flex-direction: column;
width: 100%;
height: 0;
opacity: 0;
transition: opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.sliderule__panel.is-visible,
.sliderule__panel.is-hiding {
visibility: visible;
opacity: 1;
height: auto;
transition: opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.header__drawer.drawer--visible .drawer__menu > .sliderule__wrapper > [data-animates].is-hidden,
.drawer__menu > .sliderule__wrapper > [data-animates] {
opacity: 0;
transform: translateY(-50%);
transition: opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.sliderule__wrapper--secondary {
padding-top: 24px;
}
.sliderule__wrapper--secondary:last-child {
padding-bottom: 24px;
}
.sliderule__wrapper--secondary .sliderow__back {
margin-bottom: 24px;
}
.sliderule__wrapper--secondary .sliderule__panel .sliderow .sliderow__title,
.sliderule__wrapper--secondary .sliderow:not(.sliderow__back),
.sliderule__wrapper--secondary .sliderow__title {
min-height: 35px;
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
border: none;
padding-right: 10px;
text-transform: none;
}
.sliderule__wrapper--secondary .sliderule__panel .sliderow:not(.sliderow__back) {
justify-content: center;
}
.sliderule__wrapper--secondary + .sliderule__wrapper--secondary {
padding-top: 0;
}
.sliderow--secondary {
justify-content: flex-start;
width: 100%;
}
.sliderow--secondary span {
position: static;
right: auto;
}
.header__drawer.drawer--visible .drawer__menu > .sliderule__wrapper > [data-animates] {
opacity: 1;
transform: translateY(0%);
}
[data-sliderule-pane] [data-animates].is-hidden,
[data-sliderule-pane] [data-animates].is-hidden.is-visible,
[data-sliderule-pane] [data-animates] {
opacity: 0;
transform: translateY(-50%);
transition: opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
[data-sliderule-pane] [data-animates].is-hidden {
min-height: 0;
}
[data-sliderule-pane] [data-animates].sliderule__image {
transform: translateY(0);
}
[data-sliderule-pane] .is-hiding .sliderow.sliderow__back[data-animates],
[data-sliderule-pane] [data-animates].is-visible {
opacity: 1;
transform: translateY(0%);
}
.sliderule-grid > * {
opacity: 0;
transition: opacity 2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.sliderule-grid > *.is-visible {
opacity: 1;
}
.sliderow {
font-family: var(--TYPE-STACK-NAV);
font-style: var(--TYPE-STYLE-NAV);
font-weight: var(--TYPE-WEIGHT-NAV);
text-transform: var(--FONT-NAV-TRANSFORM);
letter-spacing: var(--FONT-NAV-LETTER-SPACING);
font-size: calc(var(--font-2) * var(--TYPE-ADJUST-NAV));
width: 100%;
min-height: 50px;
display: flex;
align-items: center;
border-bottom: 1px solid var(--border);
background-color: var(--bg);
position: relative;
z-index: 10;
padding: 0;
}
.sliderow--borderless {
border-bottom-color: transparent;
}
.sliderow__title {
padding-left: 20px;
padding-right: 34px;
min-height: 50px;
display: flex;
align-items: center;
}
.sliderow__back .sliderow__title {
position: absolute;
}
.sliderule__panel .sliderow__title {
padding: 10px 34px;
text-align: center;
}
.sliderule__chevron--left,
.sliderule__chevron--right {
font-size: 18px;
}
.sliderule__chevron--left {
position: absolute;
left: 20px;
}
.sliderule__chevron--right {
position: absolute;
right: 20px;
}
.sliderule__wrapper--secondary .sliderule__chevron--right .icon {
height: 8px;
}
.sliderule__panel .sliderow {
padding-left: 0;
}
.sliderule__panel .sliderow .sliderow__title {
justify-content: center;
width: 100%;
}
.sliderule__panel > *:not(.sliderule__image) {
opacity: 0;
transition: opacity 0.05s ease-out, transform 0.05s ease-out;
}
.sliderule__panel > *:not(.sliderule__image):last-child {
margin-bottom: 150px;
}
.sliderule__panel.is-visible > *:not(.sliderule__image),
.sliderule__panel.is-hiding > *:not(.sliderule__image) {
opacity: 1;
transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.sliderule__panel.is-hiding {
overflow: visible;
}
@media only screen and (max-width: 479px) {
.js-grid[data-grid-small="1"] {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.js-grid[data-grid-small="2"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
[data-toggle-grid="3"],
[data-toggle-grid="4"],
[data-toggle-grid="5"],
[data-toggle-grid="6"] {
display: none;
}
}
.sliderule-grid {
display: grid;
margin: calc(var(--gutter) / 2);
-moz-column-gap: calc(var(--gutter) / 2);
column-gap: calc(var(--gutter) / 2);
row-gap: calc(var(--gutter) / 2);
}
.sliderule-grid.blocks-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.sliderule-grid.blocks-2,
.sliderule-grid.blocks-3,
.sliderule-grid.blocks-4,
.sliderule-grid.blocks-5,
.sliderule-grid.blocks-6,
.sliderule-grid.blocks-7,
.sliderule-grid.blocks-8,
.sliderule-grid.blocks-9,
.sliderule-grid.blocks-10,
.sliderule-grid.blocks-11,
.sliderule-grid.blocks-12,
.sliderule-grid.blocks-13,
.sliderule-grid.blocks-14,
.sliderule-grid.blocks-15,
.sliderule-grid.blocks-16,
.sliderule-grid.blocks-17,
.sliderule-grid.blocks-18,
.sliderule-grid.blocks-19,
.sliderule-grid.blocks-20 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* ================ Generic accordion ================ */
.accordion__wrapper {
border-bottom: 1px solid var(--border);
border-top: 1px solid var(--border);
}
.accordion__wrapper + .accordion__wrapper {
border-top: none;
}
.accordion__title {
font-family: var(--FONT-STACK-BODY);
font-style: var(--FONT-STYLE-BODY);
font-weight: var(--FONT-WEIGHT-BODY);
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
letter-spacing: var(--FONT-BODY-LETTER-SPACING);
text-transform: var(--FONT-BODY-TRANSFORM);
overflow: hidden;
display: block;
text-align: inherit;
width: 100%;
position: relative;
padding: var(--space-8) 30px var(--space-8) 0;
margin: 0;
cursor: pointer;
white-space: normal;
}
.accordion__title:after {
position: absolute;
top: 50%;
right: 5px;
content: "";
display: inline-block;
width: 9px;
height: 9px;
border-width: 0 0 var(--ICON-STROKE-WIDTH) var(--ICON-STROKE-WIDTH);
border-style: solid;
border-color: var(--text-dark);
margin: -4px 0 0;
vertical-align: middle;
transform: rotate(-45deg);
transform-origin: 50% 50%;
transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.accordion__title.accordion-is-open:after {
transform: rotate(135deg);
}
.accordion__title:not([class*=accent-size-]) {
font-size: calc(var(--font-5) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-snug);
}
.text-right .accordion__title {
text-align: right;
}
.accordion__title .icon {
width: 16px;
height: 16px;
margin-right: 7px;
vertical-align: middle;
}
.accordion__title .icon path,
.accordion__title .icon g,
.accordion__title .icon circle {
fill: none !important;
stroke: currentcolor !important;
}
.accordion__body {
display: none;
overflow: hidden;
padding-bottom: var(--space-9);
}
.accordion__body p:first-of-type,
.accordion__body h3:first-of-type,
.accordion__body h4:first-of-type,
.accordion__body h5:first-of-type,
.accordion__body h6:first-of-type {
margin-top: 0;
}
/*====== Single accordion section ======*/
.accordion-neighbor + .accordion-neighbor .accordion__wrapper {
border-top: none;
}
.section-accordion .accordion__body {
padding-bottom: var(--space-6);
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.section-accordion .section-accordion .accordion__body {
margin-left: var(--gutter-offset);
margin-right: var(--gutter-offset);
}
}
/*====== Inner FAQ block content ======*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.accordion__grid__wrapper {
overflow: hidden;
}
}
.accordion__grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.accordion__grid {
overflow-x: auto;
overflow-y: hidden;
flex-wrap: nowrap;
padding-bottom: 30px;
margin-bottom: -30px;
-webkit-overflow-scrolling: touch;
}
}
.accordion__block {
width: 45%;
padding: calc(var(--gutter) / 2) 0;
font-size: calc(var(--font-2) * var(--FONT-ADJUST-BODY));
line-height: 1.3;
}
.accordion__block:first-child:last-child {
width: 100%;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.accordion__block {
flex: 0 0 auto;
width: calc(100% - 50px);
padding-left: 15px;
padding-right: 15px;
}
}
.accordion__grid--3 .accordion__block,
.accordion__grid--6 .accordion__block,
.accordion__grid--9 .accordion__block {
width: 30%;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.accordion__grid--3 .accordion__block,
.accordion__grid--6 .accordion__block,
.accordion__grid--9 .accordion__block {
width: calc(100% - 50px);
}
}
.accordion__block-title {
margin-bottom: calc(var(--gutter) / 3);
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-4) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
}
.accordion__block-image + .accordion__block-description {
margin-top: calc(var(--gutter) / 3);
}
.accordion__block-icon .icon__animated {
padding-bottom: calc(var(--inner) / 4);
}
.accordion__block-icon .icon {
height: 25px;
width: 25px;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.accordion__block-image {
margin-left: -15px;
margin-right: -15px;
}
}
/* ================ Page FAQ accordions ================ */
.section-faq .standard__kicker {
margin-bottom: var(--inner);
}
/* ================ Cart drawer accordions ================ */
.drawer__accordion {
display: block;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
width: 100%;
}
.drawer__accordion .accordion__title {
padding: var(--space-6) var(--gutter);
width: 100%;
background: var(--bg);
color: var(--text-dark);
font-family: var(--FONT-STACK-BODY);
font-style: var(--FONT-STYLE-BODY);
font-weight: var(--FONT-WEIGHT-BODY);
letter-spacing: var(--FONT-BODY-LETTER-SPACING);
text-transform: var(--FONT-BODY-TRANSFORM);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
text-transform: unset;
letter-spacing: unset;
}
.drawer__accordion .accordion__title:after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-width: 0 0 1px 1px;
border-style: solid;
border-color: var(--text);
margin: -4px 0 0;
vertical-align: middle;
transform: rotate(-45deg);
transform-origin: 50% 50%;
transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
right: var(--gutter);
}
.drawer__accordion .accordion__title.accordion-is-open:after {
transform: rotate(135deg);
}
.drawer__accordion .accordion__body {
padding: 0 var(--gutter);
}
.drawer__accordion + .drawer__accordion {
border-top: 1px solid rgba(255, 255, 255, 0);
}
.drawer__notes__input {
margin-top: 10px;
}
/* ================ Product accordion ================ */
.product-accordion .accordion__title {
padding: var(--space-6) 30px var(--space-6) 0;
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
}
/* ============================================================================
#Tabs
============================================================================== */
.tabs-wrapper {
position: relative;
margin-top: 32px;
}
.tabs-wrapper:first-child {
margin-top: 0;
}
.tabs__holder {
overflow: hidden;
}
.tabs__head {
position: relative;
z-index: 2;
overflow: hidden;
}
.tabs__head .tabs {
padding-bottom: 30px;
margin-bottom: -30px;
}
.tabs__head .tabs__head--line .tabs {
padding-bottom: 5px;
margin-bottom: 0;
}
.tabs__head .tabs__head--line:after {
content: "";
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 1px;
background: var(--border);
}
.tabs__arrow {
position: absolute;
top: 50%;
display: block;
width: 26px;
height: 26px;
max-height: none;
margin-top: -17px;
border-radius: 0;
background: none;
box-shadow: none;
transition: all 0.2s;
}
.tabs__arrow:before {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 200%;
transform: translateY(-50%);
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--bg) 20%);
content: "";
}
.tabs__arrow .tabs__arrow--alt {
z-index: 10;
margin-top: -15px;
background: none;
}
.tabs__arrow .tabs__arrow--alt:before {
height: 42px;
}
.tabs__arrow .tabs__arrow--alt.tabs__arrow--next:before {
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--bg) 40%);
}
.tabs__arrow .tabs__arrow--alt.tabs__arrow--prev:before {
background: linear-gradient(to left, var(--bg) 40%, rgba(255, 255, 255, 0) 100%);
}
.tabs__arrow:after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-width: 0 0 2px 2px;
border-style: solid;
border-color: currentColor;
margin: -4px 0 0;
vertical-align: middle;
transform: rotate(-135deg);
transform-origin: 50% 50%;
transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tabs__arrow--prev {
left: 0;
transform: scale(-1, 1);
}
.tabs__arrow--next {
right: 0;
}
.tabs {
display: block;
overflow-x: auto;
white-space: nowrap;
margin: 0 0 0 0;
padding: 0;
list-style: none;
position: relative;
scrollbar-width: none;
-ms-overflow-style: none;
}
.tabs::-webkit-scrollbar {
width: 0;
height: 0;
}
.tabs--center {
text-align: center;
}
.tab-link {
background: none;
color: var(--text-light);
display: inline-block;
padding: 10px 0;
margin: 0 40px 0 0;
font-weight: var(--FONT-WEIGHT-BODY);
cursor: pointer;
vertical-align: bottom;
border-bottom: 3px solid transparent;
}
.tab-link .tab-link--alt {
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
position: relative;
z-index: 2;
}
.tab-link .tab-link--alt:hover {
color: var(--text-dark);
}
.tab-link .tab-link--alt:after {
content: "";
margin: auto;
width: 100%;
height: 3px;
position: absolute;
bottom: -2px;
left: 0;
background: var(--border);
transform: scaleX(0);
transform-origin: 100% 50%;
transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tab-link.current {
border-bottom-color: var(--border);
color: var(--text-dark);
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
}
.tab-link .tab-link--alt.current {
color: var(--text-dark);
border-bottom-color: transparent;
}
.tab-link .tab-link--alt.current:after {
transform: scaleX(1);
transform-origin: 0 50%;
}
.tab-link .icon {
width: 16px;
height: 16px;
margin-right: 7px;
vertical-align: middle;
}
.tab-link .icon path,
.tab-link .icon g,
.tab-link .icon circle {
fill: none !important;
stroke: currentcolor !important;
}
.tabs--center > .tab-link {
margin: 0 15px;
}
.tabs--pill > .tab-link {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
color: var(--text);
border: none;
padding: 6px 16px;
border-radius: 100px;
margin: 0;
}
.tabs--pill > .tab-link.current {
border: none;
color: var(--text);
background-color: var(--hairline);
}
.tab-content {
visibility: hidden;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
padding: 5px 15px 15px 0;
min-height: var(--space-13);
}
.no-js .tab-content {
visibility: visible;
position: static;
opacity: 1;
display: inherit;
}
.tab-content:not(.current) *, .tab-content:not(.current) {
pointer-events: none !important;
}
.tab-content.current {
visibility: visible;
position: static;
opacity: 1;
display: inherit;
}
/* Product Tabs */
.product-tabs {
overflow: hidden;
max-width: 100%;
}
.product-tabs .tabs {
padding-bottom: 32px;
margin-bottom: -32px;
}
@media only screen and (max-width: 1099px) {
.product-tabs .tabs {
padding-right: 16px;
margin-right: -16px;
}
}
.product-tabs .tabs::-webkit-scrollbar {
-webkit-appearance: none;
width: 0;
height: 0;
}
.product-tabs .tab-link {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
padding-bottom: 0;
border-bottom-width: 1px;
white-space: normal;
}
.product-tabs .tab-link:last-child {
margin-right: 0;
}
.product-tabs .tab-link.current {
border-bottom-color: currentcolor;
}
.product-tabs .tabs__arrow {
overflow: hidden;
}
.product-tabs__head {
padding-bottom: 16px;
margin-bottom: -13px;
}
/* Tabs Collections */
.tabs-collections .tabs,
.tabs-collections .tabs-collections__head {
position: relative;
margin: 0 auto;
padding: var(--gutter) 0;
text-align: center;
}
.tabs-collections .tabs-collections__head {
padding-bottom: 0;
}
.tabs-collections .tabs-collections__head .grid__heading {
padding: 0;
}
.tabs-collections .tabs {
display: block;
overflow-x: auto;
white-space: nowrap;
padding-bottom: calc(var(--gutter) * 3);
margin-bottom: calc(var(--gutter) * -1);
}
.tabs-collections .tabs::-webkit-scrollbar {
-webkit-appearance: none;
width: 0;
height: 0;
}
.tabs-collections .tab-link {
padding: 5px;
}
.tabs-collections .tab-content {
padding: 0;
min-height: 0;
}
/* Tabs/Accordion Truncated */
.accordion-content__entry--truncate,
.tab-content__entry--truncate,
.product-description__content--truncate {
display: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.accordion-content__actions,
.tab-content__actions,
.product-description__actions {
display: none;
}
.accordion-content__actions .text-link-default,
.tab-content__actions .text-link-default,
.product-description__actions .text-link-default {
font-style: italic;
}
.accordion-content__actions button,
.tab-content__actions button,
.product-description__actions button {
padding: 0;
}
.tab__scroll,
.accordion-content__holder,
.tab-content__holder {
position: relative;
word-break: break-word;
}
.accordion-content__holder.is-expanded .accordion-content__entry:not(.accordion-content__entry--truncate),
.accordion-content__holder.is-expanded .tab-content__entry:not(.tab-content__entry--truncate),
.accordion-content__holder.is-expanded .product-description__content:not(.product-description__content--truncate),
.tab-content__holder.is-expanded .accordion-content__entry:not(.accordion-content__entry--truncate),
.tab-content__holder.is-expanded .tab-content__entry:not(.tab-content__entry--truncate),
.tab-content__holder.is-expanded .product-description__content:not(.product-description__content--truncate),
.product-description__holder.is-expanded .accordion-content__entry:not(.accordion-content__entry--truncate),
.product-description__holder.is-expanded .tab-content__entry:not(.tab-content__entry--truncate),
.product-description__holder.is-expanded .product-description__content:not(.product-description__content--truncate) {
display: none;
}
.accordion-content__holder.is-expanded .accordion-content__entry--truncate,
.accordion-content__holder.is-expanded .tab-content__entry--truncate,
.accordion-content__holder.is-expanded .product-description__content--truncate,
.tab-content__holder.is-expanded .accordion-content__entry--truncate,
.tab-content__holder.is-expanded .tab-content__entry--truncate,
.tab-content__holder.is-expanded .product-description__content--truncate,
.product-description__holder.is-expanded .accordion-content__entry--truncate,
.product-description__holder.is-expanded .tab-content__entry--truncate,
.product-description__holder.is-expanded .product-description__content--truncate {
position: relative;
display: block !important;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.accordion-content__holder.is-expanded .accordion-content__actions,
.accordion-content__holder.is-expanded .tab-content__actions,
.accordion-content__holder.is-expanded .product-description__actions,
.tab-content__holder.is-expanded .accordion-content__actions,
.tab-content__holder.is-expanded .tab-content__actions,
.tab-content__holder.is-expanded .product-description__actions,
.product-description__holder.is-expanded .accordion-content__actions,
.product-description__holder.is-expanded .tab-content__actions,
.product-description__holder.is-expanded .product-description__actions {
display: block;
}
html.js .product-description__holder--truncate:not(.is-expanded):not(.is-visible) {
overflow: hidden;
line-height: 1.6em;
max-height: 12.8em; /* (Number of lines 8) * (line-height) */
}
/* ================ Logos ================ */
.logo-bar {
text-align: center;
margin: -10px 0;
}
.logo-bar a {
text-decoration: none;
}
.logo-bar__item {
display: inline-block;
vertical-align: middle;
width: var(--width);
max-height: var(--width);
margin: 10px var(--gutter);
}
.logo-bar__image {
display: block;
margin: 0 auto;
max-width: 100%;
}
.logo-bar__link {
display: block;
}
.logo-bar__wrapper {
position: relative;
overflow: hidden;
}
@keyframes ticker {
0% {
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
.logo-bar__text {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.logo-bar__text * {
white-space: nowrap;
}
.no-js .logo-bar__text {
flex-wrap: wrap;
}
.logo-bar--marquee .logo-bar__text {
justify-content: space-between;
flex-wrap: nowrap;
}
.no-js .logo-bar--marquee .logo-bar__text {
flex-wrap: wrap;
justify-content: center;
}
.logo-bar__message {
overflow: hidden;
width: 100%;
font-size: 0;
}
.logo-bar__scale {
display: inline-flex;
transition: opacity 0.5s linear;
}
.logo-bar__scale.ticker--unloaded {
width: -moz-max-content;
width: max-content;
}
.no-js .logo-bar__scale.ticker--unloaded {
width: 100%;
}
.logo-bar .ticker--animated {
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: var(--animation-duration);
animation-play-state: paused;
display: flex;
width: -moz-max-content;
width: max-content;
will-change: transform, padding, width;
}
.logo-bar .ticker--animated:hover {
animation-play-state: paused;
}
.logo-bar:hover .ticker--animated,
.logo-bar__holder > .logo-bar:hover .ticker--animated,
.logo-bar__holder > .logo-bar [data-stop] .ticker--animated {
animation-play-state: paused;
}
.logo-bar__holder > .logo-bar .ticker--animated {
animation-play-state: running;
}
/* ================ Map ================ */
.map-section .brick__block__text {
background-color: var(--bg);
}
.map-section.use_image .map-section__container {
height: 100%;
}
@media only screen and (max-width: 767px) {
.map-section__container.use_image {
height: 300px;
}
}
/* === Hero Scroll == */
.main-content > .shopify-section:not(:first-child) .scroll_icon_wrap {
display: none;
}
.main-content > .shopify-section:first-child .has-scroll-arrow .hero__content__wrapper[class*=align--bottom] {
padding-bottom: 40px;
}
.scroll_icon_wrap {
text-align: center;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 0;
z-index: 400;
}
.scroll_link {
display: flex;
position: absolute;
justify-content: center;
left: 50%;
width: 250px;
margin-left: -125px;
bottom: 0;
padding-bottom: 20px;
padding-top: 20px;
height: 60px;
color: var(--text);
}
.scroll_link:hover .scroll_icon {
opacity: 1;
}
.scroll_link:focus {
outline: none;
}
.scroll_icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.scroll_icon svg {
width: 40px;
height: 40px;
}
.bloop {
transform-origin: center bottom;
animation: bloop 1.8s infinite;
}
@keyframes bloop {
from, 20%, 30%, 40%, 50%, 60%, to {
transform: translate3d(0, 0, 0);
}
15% {
animation-timing-function: ease-out;
transform: translate3d(0, -12px, 0);
}
25% {
animation-timing-function: ease-out;
transform: translate3d(0, 6px, 0);
}
35% {
animation-timing-function: ease-out;
transform: translate3d(0, -3px, 0);
}
45% {
animation-timing-function: ease-in;
transform: translate3d(0, 2px, 0);
}
}
/* ============================================================================
# Home slideshow
============================================================================== */
.section-slideshow {
position: relative;
}
.slideshow__slide {
width: 100%;
}
.slideshow__slide .wrapper, .slideshow__slide .wrapper .grandparent .header__dropdown__wrapper, .wrapper .grandparent .slideshow__slide .header__dropdown__wrapper {
padding: 0 var(--outer);
max-width: var(--LAYOUT-WIDTH);
}
.slideshow__slide .hero__content {
position: relative;
z-index: 50;
pointer-events: none;
}
.slideshow__slide .hero__content a, .slideshow__slide .hero__content button, .slideshow__slide .hero__content form, .slideshow__slide .hero__content input, .slideshow__slide .hero__content select, .slideshow__slide .hero__content .popout__toggle, .slideshow__slide .hero__content textarea {
pointer-events: auto;
}
.section-slideshow .flickity-enabled.is-draggable .flickity-viewport {
cursor: default;
}
html.js .slideshow__wrapper:not(.flickity-enabled) > .slideshow__slide:not(:first-child) {
display: none;
}
.section-slideshow .flickity-page-dots {
position: absolute;
bottom: var(--outer);
right: var(--outer);
}
.section-slideshow .flickity-page-dots:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--text);
opacity: 0.5;
z-index: 0;
}
.custom-prev-next-button {
position: absolute;
top: 0;
bottom: 0;
opacity: 0;
padding: 0;
width: 50%;
height: 100%;
z-index: 10;
}
@media only screen and (max-width: 767px) {
.custom-prev-next-button {
width: 0;
}
}
.custom-prev-next-button.previous {
left: 0;
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='36' viewBox='0 0 44 44'><path d='M10.366 22.502l.412.392L33.268 44l.732-.742-22.488-21.106L34 .742 33.268 0 10 22.152z'/></svg>") 5 11, auto;
}
.custom-prev-next-button.next {
right: 0;
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='36' viewBox='0 0 44 44'><path d='M33.634 22.502l-.412.392L10.732 44 10 43.258l22.488-21.106L10 .742 10.732 0 34 22.152z'/></svg>") 15 11, auto;
}
.slideshow__slide[aria-hidden=true] {
touch-action: none;
pointer-events: none;
}
/* ============================================================================
# Index video
============================================================================== */
.section-video {
--icon-play-size: 60px;
}
.section-video .section--image {
width: 100%;
}
.video-autoplay-wrapper {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
.video-autoplay-wrapper video {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
pointer-events: none;
}
.video-autoplay-wrapper video::-webkit-media-controls {
display: none;
}
/* ================ Play button ================ */
.btn--play {
color: var(--text);
}
.hero__content .play__button {
padding: 0;
}
.hero__content .play__button .icon-theme {
height: 60px;
width: 60px;
}
.hero__content .play__button:active, .hero__content .play__button:focus {
outline: none;
}
.play__button--text {
padding: 0;
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
}
.play__button--text .icon-theme {
margin-right: 8px;
height: 33px;
width: 33px;
}
.play__button--text:active, .play__button--text:focus {
outline: none;
}
.section-video .play__button--text .icon-theme,
.section-video .play__button .icon-theme {
height: auto;
width: var(--icon-play-size);
}
@media only screen and (max-width: 1366px) and (min-device-pixel-ratio: 2) and (hover: none) {
.section-video .hero__content__wrapper,
.section-video .image-overlay {
pointer-events: none;
touch-action: none;
}
.section-video .video-autoplay-wrapper video,
.section-video .hero__content__wrapper a,
.section-video .hero__content__wrapper button {
pointer-events: all;
}
}
/* ============================================================================
Collection grid item
============================================================================== */
.collection-grid-item {
position: relative;
width: 100%;
margin-bottom: var(--gutter);
text-align: center;
}
.collection-grid-item .hero__content__wrapper {
padding-right: var(--gutter);
padding-left: var(--gutter);
}
.collection-grid-item .text-btn-arrow-right:after {
animation: move-right 2s infinite ease-in-out;
}
.collection-grid-item .image__hero__frame {
padding-top: var(--aspect-ratio);
}
.collection-grid-item__subtitle,
.collection-grid-item__title {
width: 100%;
}
.collection-grid-item__subtitle,
.collection-grid-item__btn {
transform: translateY(calc(100% + var(--image-bottom)));
opacity: 0;
transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.link-over-image:hover .collection-grid-item__subtitle,
.link-over-image:hover .collection-grid-item__btn {
transform: translateY(0);
opacity: 1;
transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.09s;
}
.collection-grid-item__subtitle {
transform: translateY(calc(-100% - var(--image-bottom)));
}
.collection-grid-item__title {
margin-bottom: 0;
margin-top: 0;
}
/* ============================================================================
Icon-columns
============================================================================== */
@media only screen and (max-width: 479px) {
.grid__item:not(:first-child) .icon__column {
padding-top: 30px;
}
}
@media only screen and (max-width: 767px) {
.grid--slider {
overflow-x: auto;
overflow-y: hidden;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
margin: 0 var(--gutter-offset);
padding-bottom: 5px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.grid--slider::-webkit-scrollbar {
display: none;
}
.grid--slider .grid__item {
flex: 0 0 auto;
width: 66%;
}
.grid--slider .grid__item:not(:first-child) .icon__column {
padding-top: 0;
}
}
.icon__column {
stroke: var(--text-light);
}
.icon__column__icon {
width: var(--ICON-SIZE, 20px);
height: var(--ICON-SIZE, 20px);
margin-bottom: 15px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
font-size: 0;
}
.icon__column__icon svg {
width: 100%;
height: 100%;
}
.icon__column__icon svg path, .icon__column__icon svg g, .icon__column__icon svg circle {
stroke: var(--ICON-STROKE-COLOR);
}
.icon--left .icon__column {
display: flex;
}
.icon--left .icon__column__icon {
flex: 0 0 auto;
margin-left: 20px;
margin-right: 20px;
}
.text-center .icon--top .icon__column__icon {
margin-left: auto;
margin-right: auto;
}
.icon__column__text {
overflow: hidden;
}
.icon__column__heading {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-4) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
color: var(--text-dark);
margin: 0;
}
.rte.icon__column__paragraph {
margin: 0.25em 0;
color: var(--text-light);
}
.rte.icon__column__paragraph:first-child {
margin-top: 0;
}
.rte.icon__column__paragraph:last-child {
margin-bottom: 0;
}
.section-icons .clearfix {
padding-bottom: 40px;
}
/* =============== Image Columns =============== */
.index__column {
padding-bottom: 30px;
}
.section-columns .rte p:last-child,
.section-columns div:last-child,
.section-columns h3:last-child {
margin-bottom: 0;
}
@media only screen and (max-width: 479px) {
.section-columns .grid__item:not(:last-child) > a {
margin-bottom: 40px;
}
}
.column__image {
position: relative;
margin-bottom: 20px;
}
.column__image .play__button {
position: absolute;
z-index: 2;
cursor: pointer;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size: 50px;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
}
/* ================ Brick layout ================ */
.brick__section {
display: flex;
align-items: stretch;
--menu-height: 0;
--brick-gutter: var(--BRICK-GUTTER);
}
@media only screen and (min-width: 768px) and (max-width: 1099px) {
.brick__section {
--brick-gutter: calc(var(--BRICK-GUTTER) * 0.8);
}
}
@media only screen and (max-width: 767px) {
.brick__section {
--brick-gutter: calc(var(--BRICK-GUTTER) * 0.6);
flex-direction: column;
height: auto;
}
}
@media only screen and (max-width: 479px) {
.brick__section {
--brick-gutter-trimmed: calc(var(--BRICK-GUTTER) * 0.6);
--brick-gutter: min(var(--brick-gutter-trimmed),16px);
}
}
.no-js .brick__section {
height: auto;
align-items: stretch;
}
@media only screen and (max-width: 767px) {
.brick__section--reverse {
flex-direction: column-reverse;
}
}
@media only screen and (min-width: 768px) {
.brick--2 .brick__block {
width: 50%;
}
}
.brick__block {
width: 100%;
height: 100%;
position: relative;
}
.no-js .brick__block {
height: auto;
}
.brick--border .brick__block {
border: 1px solid var(--border);
}
@media only screen and (min-width: 768px) {
.brick--border:not(.brick--margin) .brick__block + .brick__block {
border-left: none;
}
.brick--margin .brick__block + .brick__block {
margin-left: var(--brick-gutter);
}
}
@media only screen and (max-width: 767px) {
.brick--border:not(.brick--margin):not(.brick__section--reverse) .brick__block + .brick__block {
border-top: none;
}
.brick--border.brick__section--reverse:not(.brick--margin) .brick__block + .brick__block {
border-bottom: none;
}
.brick--margin:not(.brick__section--reverse) .brick__block + .brick__block {
margin-top: var(--brick-gutter);
}
.brick--margin.brick__section--reverse .brick__block + .brick__block {
margin-bottom: var(--brick-gutter);
}
}
.wrapper--brick {
margin-top: var(--outer);
margin-bottom: var(--outer);
}
@media only screen and (min-width: 768px) {
.wrapper--brick {
max-width: var(--LAYOUT-WIDTH);
margin-left: auto;
margin-right: auto;
}
.wrapper--brick .brick__block:first-child {
margin-left: var(--outer);
}
.wrapper--brick .brick__block:last-child {
margin-right: var(--outer);
}
.wrapper--brick .hero__content {
max-width: calc(100% - var(--outer));
}
}
@media only screen and (max-width: 767px) {
.wrapper--brick .brick__section:not(.brick--margin) .brick__block {
width: calc(100% - var(--outer) * 2);
margin-left: var(--outer);
margin-right: var(--outer);
}
}
.brick__block__text {
height: 100%;
display: flex;
padding-left: var(--outer);
padding-right: var(--outer);
align-items: center;
background-color: var(--bg);
}
.brick__block__text.top {
align-items: flex-start;
}
.brick__block__text.bottom {
align-items: flex-end;
}
@media only screen and (max-width: 767px) {
.brick__block__text .flickity-slider {
padding-right: 0;
scroll-padding: 0 0 0 var(--outer);
width: calc(100% + var(--outer) * 2);
}
.section-padding:not(.wrapper--none) .brick__section:not(.brick--border) .brick__block__text--transparent {
padding-left: 0;
padding-right: 0;
}
}
.section-padding:not(.wrapper--none) .brick__section:not(.brick--border) .brick__block:first-child .brick__block__text--transparent {
padding-left: 0;
}
@media only screen and (max-width: 767px) {
.brick__block__text .text__standard {
padding-top: 36px;
padding-bottom: 36px;
}
}
.brick__block__text .standard__rte p {
margin-block-start: 0;
}
@media only screen and (max-width: 767px) {
.brick__block__text--slider {
overflow: hidden;
padding: var(--outer);
}
}
.brick__block__text__inner {
width: 100%;
}
.brick--1 .brick__block__text__inner .text__standard {
margin-left: auto;
margin-right: auto;
max-width: var(--LAYOUT-WIDTH);
}
.brick__block__text .btn-text-thick-line {
margin-left: 0;
}
.brick__block__meta span {
padding: 0 10px;
}
.brick__block__author img {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 10px;
vertical-align: middle;
}
@media only screen and (min-width: 768px) {
.brick__block .video-background,
.brick__block .image__hero__frame,
.brick__block__video,
.brick__block__image {
height: 100%;
}
}
.brick__section.use_image .brick__block {
height: auto;
}
.brick__section .hero__content {
padding-left: 0;
padding-right: 0;
}
.brick__block__image,
.brick__block__video,
.brick__block__text {
color: var(--text);
}
.brick__block__video {
max-width: 100%;
}
.brick__block__image {
overflow: hidden;
position: relative;
}
.brick__block__image.brick__block__image--hotspots {
height: auto;
}
.brick__block__image.brick__block__image--hotspots .image__hero__frame {
min-height: unset !important;
height: auto;
}
.brick__block__product__inner {
width: 100%;
}
.brick__block__product__inner .standard__kicker {
margin-top: 20px;
max-width: 350px;
width: 100%;
margin: 0 auto;
}
.brick__product {
background-color: var(--bg-accent);
padding: var(--inner);
display: block;
max-width: 350px;
margin: var(--outer) auto 0 auto;
}
.brick__product .product-grid-item .product__grid__info {
padding-bottom: 0;
}
.brick__collection {
max-width: 500px;
padding: 0 75px 50px 75px;
margin: 0 auto;
}
@media only screen and (max-width: 767px) {
.brick__collection {
padding: 0 0 0 var(--outer);
scroll-padding: 0 0 0 var(--outer);
width: calc(100% + var(--outer) * 2);
margin-left: var(--outer-offset);
margin-right: var(--outer-offset);
max-width: none;
}
.brick__collection + * {
margin-top: max(var(--gutter), 20px);
}
.brick__collection:after {
content: "";
padding-left: var(--outer);
position: relative;
display: block;
}
.brick__collection .flickity-button.flickity-prev-next-button,
.brick__collection .flickity-page-dots {
display: none;
}
}
.brick__collection .brick__product {
background-color: var(--bg-accent);
width: 100%;
margin-left: var(--outer);
}
@media only screen and (max-width: 767px) {
.brick__collection .brick__product {
width: 80%;
margin-left: 0;
margin-right: var(--gutter);
}
.brick__collection .brick__product:last-child {
margin-right: 0;
}
}
.brick__collection .brick__product .product-grid-item {
width: 100%;
}
.brick__collection .flickity-button.flickity-prev-next-button {
background: var(--bg-accent);
}
.brick__collection .flickity-badge-dots .flickity-page-dots:before {
opacity: 0;
}
.brick__collection .flickity-page-dots {
background: var(--bg-accent);
bottom: 10px;
}
.brick__collection .flickity-page-dots .flickity-page-dot {
background: var(--text);
}
.brick__collection:not(.flickity-enabled) .brick__product:not(:first-child) {
display: none;
}
@media only screen and (max-width: 767px) {
.brick__collection.flickity-disabled-mobile .brick__product:not(:first-child) {
display: block;
}
}
.text-center .brick__collection .flickity-page-dots {
left: 50%;
transform: translateX(-50%);
}
.section-featured-article {
--padding-top: var(--PT);
--padding-bottom: var(--PB);
--margin-vertical: calc((var(--inner) * 2) + (var(--padding-bottom) / 2));
--margin-vertical-negative: calc(((var(--inner) * 2) + (var(--padding-top) / 2)) * -1);
--margin-horizontal: calc(var(--inner) * 4);
--margin-horizontal-negative: calc(var(--margin-horizontal) * -1);
position: relative;
height: auto;
}
.section-featured-article:before {
content: "";
display: table;
clear: both;
}
@media only screen and (min-width: 768px) {
.section-featured-article.use_screen_full {
min-height: var(--full-screen);
}
.section-featured-article.use_screen_three_quarters {
min-height: var(--three-quarters);
}
.section-featured-article.use_screen_two_thirds {
min-height: var(--two-thirds);
}
.section-featured-article.use_screen_one_half {
min-height: var(--one-half);
}
.section-featured-article.use_screen_one_third {
min-height: var(--one-third);
}
.section-featured-article.use_screen_one_fifth {
min-height: var(--one-fifth);
}
.section-featured-article.use_pixels_800 {
min-height: 800px;
}
.section-featured-article.use_pixels_650 {
min-height: 650px;
}
.section-featured-article.use_pixels_500 {
min-height: 500px;
}
}
.section-featured-article .section__wrapper {
display: flex;
min-height: inherit;
padding-top: var(--padding-top);
padding-bottom: var(--padding-bottom);
}
@media only screen and (max-width: 767px) {
.section-featured-article .section__wrapper {
display: block;
padding: 0;
}
}
.section-featured-article .section__inner {
flex: 1;
position: relative;
}
.section-featured-article .section__inner--cutted {
overflow: hidden;
}
@media only screen and (min-width: 768px) {
.section-featured-article .section__inner--columns {
display: flex;
}
.section-featured-article.use_image .section__inner:not(.section__inner--columns) {
display: grid;
grid-template-columns: 1fr;
}
}
@media only screen and (max-width: 767px) {
.section-featured-article .hero__content {
width: auto;
}
}
.section-featured-article.use_image .hero__content__wrapper,
.section-featured-article.use_image .hero__image {
grid-row-start: 1;
grid-column-start: 1;
min-height: 100%;
}
.section-featured-article .hero__image {
flex: 1;
position: relative;
overflow: hidden;
}
.section-featured-article .image__hero__frame {
min-height: 100%;
}
@media only screen and (min-width: 768px) {
.section-featured-article:not(.use_image) .section__inner:not(.section__inner--columns) .hero__image,
.section-featured-article:not(.use_image) .image__hero__frame {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
height: 100%;
padding-top: 0 !important;
}
}
.section-featured-article.has-overlay .hero__content__wrapper[class*=align--bottom],
.section-featured-article .hero__content__wrapper {
position: relative;
padding-bottom: 0;
margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
.section-featured-article.has-overlay .hero__content__wrapper[class*=align--bottom],
.section-featured-article .hero__content__wrapper {
padding-bottom: var(--inner);
}
}
@media only screen and (max-width: 767px) {
.section-featured-article.has-overlay .hero__content__wrapper[class*=align--bottom],
.section-featured-article .hero__content__wrapper {
display: block;
}
}
.section-featured-article:not([data-overlay-header].has-overlay) .hero__content__wrapper {
padding-top: 0;
}
@media only screen and (min-width: 768px) {
.section-featured-article:not([data-overlay-header].has-overlay) .hero__content__wrapper {
padding-top: var(--inner);
}
}
.section-featured-article .hero__image + .hero__content__wrapper {
margin-top: var(--margin-horizontal-negative);
}
@media only screen and (min-width: 768px) {
.section-featured-article .hero__image + .hero__content__wrapper {
margin-top: 0;
}
.section-featured-article .hero__image + .hero__content__wrapper.align--bottom-right, .section-featured-article .hero__image + .hero__content__wrapper.align--bottom-center, .section-featured-article .hero__image + .hero__content__wrapper.align--bottom-left {
transform: translateY(var(--margin-vertical));
}
}
@media only screen and (max-width: 767px) {
.section-featured-article .hero__image + .hero__content__wrapper {
padding-top: 0;
}
}
@media only screen and (min-width: 768px) {
.section-featured-article:not([data-overlay-header].has-overlay) .hero__image + .hero__content__wrapper.align--top-right, .section-featured-article:not([data-overlay-header].has-overlay) .hero__image + .hero__content__wrapper.align--top-center, .section-featured-article:not([data-overlay-header].has-overlay) .hero__image + .hero__content__wrapper.align--top-left {
transform: translateY(var(--margin-vertical-negative));
}
}
.section-featured-article .section__inner--columns .hero__image + .hero__content__wrapper .hero__content {
max-width: 100%;
}
@media only screen and (min-width: 768px) {
.section-featured-article .section__inner--columns .hero__image + .hero__content__wrapper {
flex: 0 0 auto;
max-width: calc(50% - var(--outer));
width: auto;
height: auto;
margin-left: var(--margin-horizontal-negative);
}
.section-featured-article .section__inner--columns .hero__image + .hero__content__wrapper.align--bottom-left, .section-featured-article .section__inner--columns .hero__image + .hero__content__wrapper.align--middle-left, .section-featured-article .section__inner--columns .hero__image + .hero__content__wrapper.align--top-left {
order: -1;
margin-left: 0;
margin-right: var(--margin-horizontal-negative);
}
.section-featured-article .section__inner--columns .hero__image + .hero__content__wrapper .hero__content {
margin-left: 0;
margin-right: 0;
}
}
.section-featured-article .hero__title__link a {
text-decoration: none;
}
.section-featured-article .hero__title__link a:hover {
text-decoration: underline;
}
.section-featured-article .hero__kicker__item:not(:last-child):after {
content: "•";
padding: 0 10px;
font-size: 50%;
vertical-align: middle;
}
/* ============================================================================
Section Mosaic
============================================================================== */
.grid--mosaic {
margin: 0 0 calc(var(--gutter) * -1);
display: flex;
flex-wrap: wrap;
--short-height: calc(364px * var(--scale));
--tall-height: calc(var(--short-height) * 2 + var(--inner));
}
@media only screen and (max-width: 767px) {
.grid--mosaic {
--tall-height: var(--short-height);
}
}
@media only screen and (min-width: 768px) {
.grid--mosaic {
display: grid;
}
}
.grid--mosaic .grid__item {
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
@media only screen and (max-width: 767px) {
.grid--mosaic .grid__item {
margin-bottom: var(--gutter);
}
}
.grid__item--short {
min-height: var(--short-height);
}
.grid__item--tall {
grid-row: span 2;
}
.grid--split-center .grid__item--tall {
min-height: var(--tall-height);
}
@media only screen and (max-width: 767px) {
.grid--split-left .grid__item--tall,
.grid--split-right .grid__item--tall {
min-height: var(--short-height);
}
}
@media only screen and (min-width: 768px) {
.grid--mosaic-2 {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: var(--gutter);
grid-row-gap: 0;
}
.grid--mosaic-3 {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: var(--gutter);
grid-row-gap: var(--gutter);
}
.grid--tall {
--column-width: 33.33%;
}
.grid--short {
--column-width: 33.33%;
}
.grid--split-left {
grid-template-columns: var(--column-width) 1fr;
}
.grid--split-right {
grid-template-columns: 1fr var(--column-width);
}
.grid--short .grid__item--short + .grid__item--short {
grid-row: 2/3;
}
}
.tile {
min-height: 100%;
position: relative;
display: flex;
}
.tile.text-center {
justify-content: center;
}
.tile__inner {
width: 100%;
max-width: calc(310px + var(--inner) * 2);
padding: var(--inner);
z-index: 1;
color: var(--text);
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto 1fr;
grid-column-gap: 0;
}
.grid__item--xl .tile__inner, .grid__item--tall .tile__inner {
max-width: calc(610px + var(--inner) * 2);
}
.tile--bottom .tile__inner {
grid-template-rows: 1fr auto auto;
}
.tile__image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.theme-animate-hover .grid__item:hover .tile__image {
transform: scale(1.05);
transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tile__overlay {
background-color: var(--bg);
}
.tile__content {
margin: auto 0;
grid-area: 2/1/3/2;
}
.tile__title {
font-family: var(--FONT-STACK-HEADING);
font-style: var(--FONT-STYLE-HEADING);
font-weight: var(--FONT-WEIGHT-HEADING);
letter-spacing: var(--FONT-HEADING-LETTER-SPACING);
text-transform: var(--FONT-HEADING-TRANSFORM);
line-height: 1.2;
word-break: break-word;
}
.tile__title p {
margin: 0;
font-size: inherit;
line-height: inherit;
}
.tile__title a {
text-decoration: underline;
}
.tile__title a:hover {
text-decoration: none;
}
.tile__kicker {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
grid-area: 1/1/2/2;
align-self: start;
margin: 0;
}
.tile__kicker p {
margin: 0;
font-size: inherit;
line-height: inherit;
}
.tile__tags {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
align-self: start;
}
.tile__tags span {
display: inline-block;
padding: 0 5px;
}
.tile__price {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
line-height: 1.2;
}
.tile__excerpt {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.tile__link {
grid-area: 3/1/4/2;
color: var(--text);
align-self: end;
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
}
.tile__link > a {
position: relative;
text-decoration: none;
}
.tile__link > a:after {
content: "";
left: 0;
width: 100%;
display: block;
position: absolute;
bottom: -1px;
height: 1px;
background: currentcolor;
transition: transform 0.2s ease, opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
.tile__link > a:after {
height: 0.5px;
}
}
.tile__link > a:after {
opacity: 0.25;
transform: scaleX(0);
transform-origin: 100% 50%;
}
.tile__link > a:hover:after {
transform: scaleX(1);
transform-origin: 0 50%;
opacity: 1;
}
.tile--post .tile__link {
margin-top: 4px;
}
/* ============================================================================
#Gallery
============================================================================== */
.frame {
overflow: hidden;
}
.gallery:after {
content: "";
display: table;
clear: both;
}
.gallery__item {
float: left;
}
.gallery__item .gallery__item__wrapper {
display: block;
position: relative;
}
/* === sections/gallery.liquid === */
.gallery__video .play__button,
.gallery__zoom .zoom__trigger {
position: absolute;
z-index: 30;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.gallery__video .play__button svg {
display: none;
}
.gallery__icon,
.zoom__trigger .icon-theme {
font-size: 28px;
position: absolute;
bottom: 15px;
left: 18px;
z-index: 20;
color: var(--bg);
}
.play__button {
cursor: pointer;
}
.zoom__trigger {
cursor: zoom-in;
}
.theme-animate-hover .gallery__item__wrapper.has-zoom-animation {
overflow: hidden;
}
.theme-animate-hover .gallery__item__wrapper.has-zoom-animation .gallery__icon {
transition: transform 2s cubic-bezier(0, 0, 0.35, 1);
transform: translateX(0);
}
.theme-animate-hover .gallery__item__wrapper.has-zoom-animation .icon-theme {
transition: transform 2s cubic-bezier(0, 0, 0.35, 1), opacity 0.2s linear;
transform: translateX(0);
opacity: 0;
}
.theme-animate-hover .gallery__item__wrapper.has-zoom-animation img {
transition: transform 2s ease-out;
transform: scale(1);
}
.theme-animate-hover .gallery__item__wrapper.has-zoom-animation:hover .gallery__icon,
.theme-animate-hover .gallery__item__wrapper.has-zoom-animation:hover .icon-theme {
transform: translateX(4px);
}
.theme-animate-hover .gallery__item__wrapper.has-zoom-animation:hover .icon-theme {
opacity: 1;
}
.theme-animate-hover .gallery__item__wrapper.has-zoom-animation:hover img {
transform: scale(1.08);
}
.custom__title {
margin: 0;
padding-top: calc(var(--outer) * 0.75);
width: 100%;
}
.custom__title:first-child {
padding-top: 0;
}
.custom__text {
width: 100%;
padding-right: 10px;
}
.text-right .custom__text {
padding-right: 0;
}
.border--line {
border-top: 1px solid var(--border);
}
.border--line .custom__title {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
color: var(--text-light);
}
.border--line .custom__text {
color: var(--text-light);
}
.border--line > .custom__text {
margin: 0;
padding-top: calc(var(--outer) / 4);
line-height: 1.4;
}
.border--line > .custom__text:first-child {
padding-top: 0;
}
.gallery__text {
display: flex;
flex-direction: column;
padding-top: calc(var(--outer) * 0.75);
padding-bottom: calc(var(--outer) * 0.75);
}
.gallery__item .lookbook__rte {
margin: 0;
padding: 0;
}
/* ============================================================================
#Footer
============================================================================== */
.footer {
--bg: var(--COLOR-FOOTER-BG);
--hairline: var(--COLOR-FOOTER-A5);
--text: var(--COLOR-FOOTER-A90);
--border: var(--COLOR-FOOTER-A15);
--text-dark: var(--COLOR-FOOTER-TEXT);
--margin-offset: min(calc((((100vw - var(--scrollbar-width)) - var(--LAYOUT-WIDTH)) / 2) * -1), 0px);
position: relative;
background-color: var(--bg);
color: var(--text);
text-align: left;
margin-top: auto;
}
.footer a {
color: var(--text-dark);
}
.footer a:hover {
text-decoration: none;
}
@media only screen and (min-width: 768px) {
.footer__holder {
overflow: hidden;
}
}
.footer__logo__wrapper {
padding-bottom: var(--padding-bottom);
}
.footer__column p {
margin-top: 0;
}
.footer__logo {
display: block;
max-width: 100%;
}
.footer__logo img {
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.footer__image img {
display: block;
width: 100%;
height: auto;
}
.footer__accordion__head {
position: relative;
}
.footer__accordion__head .icon-theme {
font-size: 18px;
display: none;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
transition: transform 0.3s;
}
.no-js .no-js-checkbox:checked + .footer__accordion__head .icon-theme, .footer__accordion__head.accordion-is-open .icon-theme {
transform: translateY(-50%) rotate(90deg);
}
@media only screen and (max-width: 767px) {
.footer__accordion__head {
cursor: pointer;
}
.footer__accordion__head .icon-theme {
display: block;
}
}
.footer__accordion__body {
overflow: hidden;
padding: 20px 0;
margin: 0;
}
@media only screen and (min-width: 768px) {
.footer__accordion__body {
overflow: visible;
padding: 0;
}
}
.footer__title {
padding-bottom: 10px;
margin-bottom: 0;
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
}
@media only screen and (max-width: 767px) {
.footer__title {
margin: 0;
width: 100%;
padding: 20px 0;
border-bottom: 1px solid var(--border);
}
.grid__item:first-child .footer__title {
border-top: 1px solid var(--border);
}
.footer__title .icon-theme {
display: block;
}
.footer__newsletter .footer__title {
padding-top: 0;
border-bottom: none;
}
}
.footer__quicklinks li {
margin: 0 0 11px 0;
}
.footer__quicklinks a {
position: relative;
text-decoration: none;
}
.footer__quicklinks a:after {
content: "";
left: 0;
width: 100%;
display: block;
position: absolute;
bottom: -1px;
height: 1px;
background: currentcolor;
transition: transform 0.2s ease, opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
.footer__quicklinks a:after {
height: 0.5px;
}
}
.footer__quicklinks a:after {
opacity: 0.25;
transform: scaleX(0);
transform-origin: 100% 50%;
}
.footer__quicklinks a:hover:after {
transform: scaleX(1);
transform-origin: 0 50%;
opacity: 1;
}
@media only screen and (min-width: 768px) {
.footer__container {
display: flex;
}
}
.footer__content {
min-width: 0;
}
@media only screen and (min-width: 768px) {
.footer__content {
flex: 0 1 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
}
}
.footer__content__inner {
padding: var(--padding-top) 0 var(--padding-bottom) 0;
}
@media only screen and (min-width: 768px) {
.footer__content__inner {
flex: 0 1 100%;
max-width: 100%;
}
.footer__content__inner:last-child {
align-self: center;
}
}
.footer__aside {
position: relative;
z-index: 1;
margin: 0 var(--outer-offset);
background-color: var(--bg);
color: var(--text);
}
@media only screen and (min-width: 768px) {
.footer__aside {
display: flex;
flex: 0 0 40%;
max-width: 40%;
margin: 0 var(--padding-top) 0 var(--outer-offset);
}
.footer__aside:after {
content: "";
display: table;
clear: both;
}
.footer__container--reversed .footer__aside {
order: 1;
margin: 0 var(--outer-offset) 0 var(--padding-top);
}
.footer__newsletter {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex: 1;
}
.footer__newsletter--offset {
margin-left: var(--margin-offset);
background-color: inherit;
}
.footer__container--reversed .footer__newsletter--offset {
margin-left: 0;
margin-right: var(--margin-offset);
}
.footer__newsletter__image {
flex: 0 1 100%;
}
.footer__newsletter__image:first-child:last-child {
height: 100%;
}
}
.footer__newsletter__body {
padding: var(--padding-top) var(--outer);
}
.footer__newsletter__body p:first-child {
margin-top: 0;
}
.footer__newsletter__body .rte:last-child,
.footer__newsletter__body p:last-child {
padding-bottom: 0;
margin-bottom: 0;
}
.footer__newsletter__body .footer__form .input-group-button button:hover {
color: var(--text-dark);
}
@media only screen and (min-width: 768px) {
.footer__newsletter__body {
flex: 0 1 100%;
}
.footer__newsletter__body:first-child {
align-self: center;
}
}
.footer__block--socials {
padding-bottom: var(--padding-bottom);
}
.footer__block--socials:first-child {
padding-top: var(--padding-bottom);
}
.footer__block--socials h3:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
.footer__block--socials {
flex: 0 1 100%;
display: flex;
justify-content: space-between;
padding: var(--padding-bottom) 0 var(--padding-bottom) 0;
border-top: 1px solid var(--border);
margin: 0;
}
.footer__block--socials:first-child {
border-top: none;
}
.footer__block--socials h3 {
flex: 0 0 auto;
max-width: 50%;
margin-bottom: 0;
}
.footer__block--socials h3:not(:last-child) {
margin-right: 10px;
}
}
.footer__socials {
padding-top: 15px;
border-top: 1px solid var(--border);
margin-top: 15px;
font-size: 0;
line-height: 0;
letter-spacing: 0;
}
.footer__socials:first-child {
padding-top: 0;
border-top: none;
margin-top: 0;
}
@media only screen and (min-width: 768px) {
.footer__socials {
flex: 1;
align-self: center;
padding-top: 0;
border-top: none;
margin-top: 0;
}
.footer__socials:not(:first-child) {
text-align: right;
}
}
.footer__icon {
display: inline-block;
height: 18px;
margin: 5px 20px 5px 0;
font-size: 0;
line-height: 0;
letter-spacing: 0;
}
.footer__icon:before {
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
.footer__icon img {
display: inline-block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
vertical-align: middle;
}
.footer__icon svg {
display: inline-block;
width: 100%;
height: 100%;
vertical-align: middle;
}
@media only screen and (min-width: 768px) {
.subfooter__item:nth-child(even) .footer__icon, .footer__socials:not(:first-child) .footer__icon {
margin-left: 20px;
margin-right: 0;
}
}
.footer__icon--payment {
width: 36px;
max-width: unset;
height: auto;
margin-right: 5px;
}
.footer__icon--payment svg {
height: auto;
}
@media only screen and (min-width: 768px) {
.subfooter__item:nth-child(even) .footer__icon--payment {
margin-left: 5px;
}
}
.footer__icon--social {
max-width: 18px;
}
.footer__icon--social path {
fill: var(--text);
}
.footer__icon--social:hover path {
fill: var(--text-dark);
}
/* Footer bar */
.subfooter {
--bg: var(--COLOR-SUB-FOOTER-BG);
--hairline: var(--COLOR-SUB-FOOTER-A5);
--text: var(--COLOR-SUB-FOOTER-A90);
--border: var(--COLOR-SUB-FOOTER-A15);
--text-dark: var(--COLOR-SUB-FOOTER-TEXT);
background-color: var(--bg);
color: var(--text);
}
/* Footer items */
.subfooter__items {
display: grid;
justify-content: space-between;
grid-template-columns: 100%;
background-color: var(--bg);
gap: var(--space-2);
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
}
.subfooter__items a:not(.footer__icon) {
position: relative;
text-decoration: none;
}
.subfooter__items a:not(.footer__icon):after {
content: "";
left: 0;
width: 100%;
display: block;
position: absolute;
bottom: -1px;
height: 1px;
background: currentcolor;
transition: transform 0.2s ease, opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
.subfooter__items a:not(.footer__icon):after {
height: 0.5px;
}
}
.subfooter__items a:not(.footer__icon):after {
opacity: 0.25;
transform: scaleX(0);
transform-origin: 100% 50%;
}
.subfooter__items a:not(.footer__icon):hover:after {
transform: scaleX(1);
transform-origin: 0 50%;
opacity: 1;
}
@media only screen and (min-width: 768px) {
.subfooter__items {
grid-template-columns: repeat(2, auto);
}
}
.subfooter__item {
display: flex;
align-items: center;
flex-wrap: wrap;
}
@media only screen and (min-width: 768px) {
.subfooter__item:nth-child(odd) {
justify-content: flex-start;
}
.subfooter__item:nth-child(odd):last-child {
grid-column: span 2;
}
.subfooter__item:nth-child(even) {
justify-content: flex-end;
}
}
.subfooter__copyright {
margin-right: 10px;
}
@media only screen and (min-width: 768px) {
.subfooter__item:nth-child(even) .subfooter__copyright {
margin-right: 0;
margin-left: 10px;
}
}
.subfooter__select .popout:first-child {
padding-left: 0;
}
.js-grid {
display: grid;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
row-gap: var(--gutter);
}
.js-grid > * {
min-width: 0;
}
.js-grid__full-row {
grid-column-start: 1;
grid-column-end: -1;
}
@media only screen and (min-width: 480px) {
.js-grid[data-grid-large="1"] {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.js-grid[data-grid-large="2"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.js-grid[data-grid-large="3"] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.js-grid[data-grid-large="4"] {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.js-grid[data-grid-large="5"] {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.js-grid[data-grid-large="6"] {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.js-grid[data-grid-large="7"] {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.js-grid[data-grid-large="8"] {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
[data-toggle-grid="1"] {
display: none !important;
}
}
@media only screen and (max-width: 479px) {
.js-grid[data-grid-small="1"] {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.js-grid[data-grid-small="2"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.js-grid[data-grid-small="3"] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
[data-toggle-grid="3"],
[data-toggle-grid="4"],
[data-toggle-grid="5"],
[data-toggle-grid="6"] {
display: none !important;
}
}
[data-toggle-grid] {
cursor: pointer;
padding: 0 10px;
color: var(--text-light);
height: 100%;
align-items: center;
display: flex;
}
[data-toggle-grid].is-active, [data-toggle-grid]:hover {
color: var(--text-dark);
}
[data-toggle-grid]:last-child {
padding-right: 20px;
}
.frame,
.section-recent,
.section-list-collections,
.section-related,
.section-collection-tabs,
.section-carousel,
.section-blog {
position: relative;
overflow: hidden;
}
.wrapper.collection-tabs, .wrapper .grandparent .collection-tabs.header__dropdown__wrapper {
max-width: calc(1180px + var(--gutter));
}
@media only screen and (max-width: 479px) {
.wrapper.collection-tabs, .wrapper .grandparent .collection-tabs.header__dropdown__wrapper {
margin: 0;
padding-right: 0;
}
}
.collection-tabs {
--buttons-top: 0;
}
.collection-tabs .flickity-button {
top: var(--buttons-top);
}
@media only screen and (max-width: 479px) {
.collection-tabs .flickity-prev-next-button {
display: none;
}
}
.collection-tabs .flickity-prev-next-button.previous {
left: -70px;
}
.collection-tabs .flickity-prev-next-button.next {
right: -70px;
}
.collection-tabs .flickity-button {
background: var(--hairline);
color: var(--text);
}
.collection-tabs .flickity-button:hover {
background: var(--hairline-hover);
}
.collection-tabs .tab-content {
margin-top: var(--space-11);
padding: 0;
}
.collection-tabs .tab__scroll.hide ~ .tab-content {
margin-top: 0;
}
.collection-tabs .tabs__arrow {
height: 36px;
}
.collection-tabs .flickity-grid:not(.flickity-disabled-mobile):not(.flickity-enabled) {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
}
.collection-tabs .flickity-grid:not(.flickity-disabled-mobile):not(.flickity-enabled) .slide-item {
flex-shrink: 0;
}
@media only screen and (min-width: 768px) {
.collection-tabs .flickity-grid:not(.flickity-enabled) {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
}
.collection-tabs .flickity-grid:not(.flickity-enabled) .slide-item {
flex-shrink: 0;
}
}
.palette--dark .flickity-button {
background: var(--bg);
color: var(--text);
}
.palette--dark .flickity-button:hover {
background: var(--bg-accent);
}
.flickity-grid[data-carousel] .flickity-button.next {
left: auto;
}
.flickity-grid .product-grid-slide {
position: relative;
overflow: hidden;
padding-left: calc(var(--outer) / 2);
padding-right: calc(var(--outer) / 2);
}
@media only screen and (max-width: 479px) {
.flickity-grid .product-grid-slide {
padding-right: 0;
padding-left: var(--outer);
}
}
.product-grid-slide .product-grid-item {
width: 100%;
}
@media only screen and (min-width: 480px) {
.flickity-grid[data-grid-large="1"] .product-grid-slide {
width: 100%;
}
.flickity-grid[data-grid-large="2"] .product-grid-slide {
width: 50%;
}
.flickity-grid[data-grid-large="3"] .product-grid-slide {
width: 33.33%;
}
.flickity-grid[data-grid-large="4"] .product-grid-slide {
width: 25%;
}
.flickity-grid[data-grid-large="5"] .product-grid-slide {
width: 20%;
}
.flickity-grid[data-grid-large="6"] .product-grid-slide {
width: 16.66%;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.flickity-grid[data-grid-large="5"] .product-grid-slide,
.flickity-grid[data-grid-large="6"] .product-grid-slide {
width: 25%;
}
}
@media only screen and (max-width: 479px) {
.flickity-grid[data-grid-large] .product-grid-slide:not([data-item]) {
width: 90%;
}
}
/* ============================================================================
#Product and Collection Grids
============================================================================== */
.product-grid-item {
position: relative;
text-align: center;
}
.product-grid-item a {
display: block;
}
.product-grid-item a:focus {
outline: none;
}
.product-grid-item .hero__content__wrapper {
padding-right: var(--gutter);
padding-left: var(--gutter);
}
.product-grid-item:hover .text-btn-arrow-right:after {
animation: move-right 2s infinite ease-in-out;
}
body.focus-enabled .product-grid-item:focus-within {
outline-color: var(--secondary) !important;
outline-offset: 2px !important;
outline-style: auto !important;
outline-width: 5px !important;
}
.on-sale {
color: var(--primary);
}
.compare-at {
margin-top: calc(var(--gutter) / 2);
text-decoration: line-through !important;
color: var(--text-light);
}
.product-grid-item .compare-at {
margin-left: 8px;
}
.product-grid-item .product__grid__info.text-left .price.on-sale {
margin-right: 8px;
}
.product-grid-item .product__grid__info.text-left .compare-at {
margin-left: 0;
}
.product__grid__info {
position: relative;
padding: 8px 0 0 0;
}
.product__grid__info a {
display: block;
text-decoration: none;
color: var(--text-dark);
}
/* ================ Collection ================ */
.product__grid__title {
font-family: var(--FONT-STACK-BODY);
font-style: var(--FONT-STYLE-BODY);
font-weight: var(--FONT-WEIGHT-BODY);
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
letter-spacing: var(--FONT-BODY-LETTER-SPACING);
text-transform: var(--FONT-BODY-TRANSFORM);
font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
margin: 8px 0 2px 0;
word-break: break-word;
text-transform: none;
letter-spacing: 0;
}
.product__grid__price {
overflow: hidden;
margin: 3px 0;
font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
}
.text-left .product__grid__price {
justify-content: flex-start;
}
.text-center .product__grid__price {
justify-content: center;
}
.text-right .product__grid__price {
justify-content: flex-end;
}
.product__grid__price--nowrap {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.product__grid__price--nowrap .compare-at {
margin-top: 0;
}
.product__grid__price--nowrap .price,
.product__grid__price--nowrap .compare-at {
flex: 0 1 auto;
white-space: nowrap;
}
.product__grid__cutline {
position: relative;
display: inline-block;
overflow: hidden;
white-space: nowrap;
padding-right: 6px;
margin-right: 5px;
text-overflow: ellipsis;
max-width: 100%;
vertical-align: top;
}
.product__grid__cutline:empty {
padding-right: 0;
margin-right: 0;
}
.product__grid__cutline:before {
content: "";
position: absolute;
top: 4px;
bottom: 4px;
right: 0;
border-right: 1px solid currentcolor;
}
.product__grid__price__sold,
.product__grid__price__unit {
margin: 3px 0;
padding: 0;
font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
}
/* = swatches on collections = */
.grid__swatch__placeholder {
margin: 0;
padding: 0;
font-size: calc(var(--font-2) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-relaxed);
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 1;
transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.supports-touch .grid__swatch__placeholder {
position: relative;
z-index: 2;
cursor: pointer;
}
.grid__swatch__container {
min-height: 28px;
overflow: hidden;
margin: 4px 0 0 0;
position: relative;
display: flex;
align-items: flex-start;
}
.text-center .grid__swatch__container {
justify-content: center;
}
.text-right .grid__swatch__container {
justify-content: flex-end;
}
.grid__swatch__container .swatch__button {
margin: 0 4px;
}
.product__grid__info.text-left .grid__swatch__container .swatch__button:first-child {
margin-left: 0;
}
.grid__swatch__container .swatch__button {
--OPTION-SIZE-SWATCH: 24px;
--swatch-offset: 2px;
--swatch-border-width: 2px;
}
.grid__swatch__container .grid__swatch__more-link {
width: 24px;
height: 24px;
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-2) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-relaxed);
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
.product__grid__info .grid__swatch__hover {
overflow-x: auto;
position: absolute;
display: flex;
flex-flow: row nowrap;
max-width: 100%;
padding: 0 0 32px;
margin: 0 0 -32px;
opacity: 0;
transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.product__grid__info .tabs__arrow {
top: 16px;
height: initial;
z-index: 100;
opacity: 0;
visibility: hidden;
}
.product__grid__info .tabs__arrow.is-hidden {
pointer-events: none;
}
.product__grid__info .sibs__slider .tabs__arrow {
top: 20px;
}
html:not(.supports-touch) product-grid-item:hover .grid__swatch__container .grid__swatch__hover,
html:not(.supports-touch) product-grid-item:hover .sibs__slider .grid__swatch__hover,
product-grid-item:focus-within .grid__swatch__container .grid__swatch__hover,
product-grid-item:focus-within .sibs__slider .grid__swatch__hover,
html.supports-touch product-grid-item .grid__swatch__container:hover .grid__swatch__hover,
html.supports-touch product-grid-item .sibs__slider:hover .grid__swatch__hover,
html.supports-touch product-grid-item .grid__swatch__container:focus-within .grid__swatch__hover,
html.supports-touch product-grid-item .sibs__slider:focus-within .grid__swatch__hover {
top: 0;
height: auto;
}
html:not(.supports-touch) product-grid-item:hover .grid__swatch__container .grid__swatch__hover,
html:not(.supports-touch) product-grid-item:hover .grid__swatch__container .tabs__arrow,
html:not(.supports-touch) product-grid-item:hover .sibs__slider .grid__swatch__hover,
html:not(.supports-touch) product-grid-item:hover .sibs__slider .tabs__arrow,
product-grid-item:focus-within .grid__swatch__container .grid__swatch__hover,
product-grid-item:focus-within .grid__swatch__container .tabs__arrow,
product-grid-item:focus-within .sibs__slider .grid__swatch__hover,
product-grid-item:focus-within .sibs__slider .tabs__arrow,
html.supports-touch product-grid-item .grid__swatch__container:hover .grid__swatch__hover,
html.supports-touch product-grid-item .grid__swatch__container:hover .tabs__arrow,
html.supports-touch product-grid-item .sibs__slider:hover .grid__swatch__hover,
html.supports-touch product-grid-item .sibs__slider:hover .tabs__arrow,
html.supports-touch product-grid-item .grid__swatch__container:focus-within .grid__swatch__hover,
html.supports-touch product-grid-item .grid__swatch__container:focus-within .tabs__arrow,
html.supports-touch product-grid-item .sibs__slider:focus-within .grid__swatch__hover,
html.supports-touch product-grid-item .sibs__slider:focus-within .tabs__arrow {
transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
visibility: visible;
opacity: 1;
z-index: 3;
}
html:not(.supports-touch) product-grid-item:hover .grid__swatch__container .is-hidden, html:not(.supports-touch) product-grid-item:hover .grid__swatch__container .grid__swatch__placeholder,
html:not(.supports-touch) product-grid-item:hover .sibs__slider .is-hidden,
html:not(.supports-touch) product-grid-item:hover .sibs__slider .grid__swatch__placeholder,
product-grid-item:focus-within .grid__swatch__container .is-hidden,
product-grid-item:focus-within .grid__swatch__container .grid__swatch__placeholder,
product-grid-item:focus-within .sibs__slider .is-hidden,
product-grid-item:focus-within .sibs__slider .grid__swatch__placeholder,
html.supports-touch product-grid-item .grid__swatch__container:hover .is-hidden,
html.supports-touch product-grid-item .grid__swatch__container:hover .grid__swatch__placeholder,
html.supports-touch product-grid-item .sibs__slider:hover .is-hidden,
html.supports-touch product-grid-item .sibs__slider:hover .grid__swatch__placeholder,
html.supports-touch product-grid-item .grid__swatch__container:focus-within .is-hidden,
html.supports-touch product-grid-item .grid__swatch__container:focus-within .grid__swatch__placeholder,
html.supports-touch product-grid-item .sibs__slider:focus-within .is-hidden,
html.supports-touch product-grid-item .sibs__slider:focus-within .grid__swatch__placeholder {
transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0.3s;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Keep text visible when tabbing */
html:not(.supports-touch) body:not(.focus-enabled) .product-grid-item:hover .grid__swatch__container .grid__swatch__placeholder {
display: none;
}
.text-left .grid__swatch__container .swatch__button label {
margin: 0 10px 0 0;
}
.text-right .grid__swatch__container .swatch__button label {
margin: 0 0 0 10px;
}
label.quatity-selector {
position: absolute;
top: -20px;
}
.product__badge {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-2) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-relaxed);
position: absolute;
right: calc(var(--inner) / 2);
top: calc(var(--inner) / 2);
max-width: calc(100% - var(--inner));
padding: 5px 10px;
background: var(--COLOR-BADGE);
color: var(--COLOR-BADGE-TEXT);
z-index: 400;
transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.product-grid-item__content.is-slideshow:not(.is-mobile):hover .product__badge {
opacity: 0;
}
.price-per-unit {
opacity: 0.75;
}
.product-grid-item .spr-badge[data-rating="0.0"] {
display: none;
}
/* PGI link */
.product-grid-item__link {
position: relative;
display: block;
}
/* PGI Container */
.product-grid-item__container {
position: relative;
overflow: hidden;
}
.product-grid-item__image-wrapper {
background: var(--bg); /* Failsafe to ensure that if multiple images with transparent backgrounds are used, the background is still white */
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s linear, visibility 0.15s linear;
transition-delay: 0.15s;
}
.product-grid-item__image-wrapper.is-active {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
/* PGI pagination */
.product-grid-item__pagination {
display: flex;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 5;
padding: 12px 12px 15px;
background: linear-gradient(to bottom, var(--COLOR-PRODUCT-SLIDER-OPPOSITE) 0%, rgba(255, 255, 255, 0) 100%);
opacity: 0;
pointer-events: none;
transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.product-grid-item__content:not(.is-mobile):hover .product-grid-item__pagination {
opacity: 1;
}
.product-grid-item__pagination span {
--width: 100%;
flex: 1 0 auto;
position: relative;
height: 2px;
overflow: hidden;
border-radius: 5px;
margin: 0 1px;
font-size: 0;
transform: translateY(-5px);
transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.product-grid-item__pagination span:before, .product-grid-item__pagination span:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--COLOR-PRODUCT-SLIDER);
}
.product-grid-item__pagination span:before {
opacity: 0.4;
}
.product-grid-item__pagination span:after {
width: var(--width);
}
.product-grid-item:hover .product-grid-item__pagination span {
transform: translateY(0);
}
.product-grid-item__pagination span.is-active {
--width: 0%;
}
.product-grid-item__pagination span.is-active ~ span {
--width: 0% !important;
}
@keyframes fakeFade {
from {
opacity: 0.35;
}
to {
opacity: 1;
}
}
.product-grid-item__error-display {
display: none;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 100;
padding: calc(var(--inner) / 2);
}
/* ============================================================================
#Collections
============================================================================== */
.collection .pagination-custom {
margin-top: var(--gutter);
}
.collection__hero .hero__content__wrapper {
max-width: var(--HERO-CONTENT-MAX-WIDTH);
margin: 0 auto;
padding-left: var(--outer);
padding-right: var(--outer);
width: 100%;
left: 50%;
transform: translateX(-50%);
}
.collection__hero .hero__content__wrapper .hero__content {
margin: 0;
padding: 0;
}
.collection__heading__text:last-child {
margin-bottom: 0;
}
.collection__content {
display: flex;
flex-flow: row;
}
.collection__products {
align-self: flex-start;
flex-grow: 1;
position: relative;
}
.collection__products .js-grid,
.collection__products .float-grid,
.collection__products .grid--full,
.collection__products hr {
transition: opacity 0.3s, visibility 0.3s;
}
.collection__products .svg-loader-container {
visibility: hidden;
display: block;
position: absolute;
inset: 0;
transition: opacity 0.3s, visibility 0.3s;
}
.collection__products .svg-loader-container .svg-loader {
top: 100px;
}
.collection__products.is-loading .svg-loader-container {
visibility: visible;
opacity: 1;
}
.collection__products.is-loading .js-grid, .collection__products.is-loading .float-grid, .collection__products.is-loading .grid--full, .collection__products.is-loading hr, .collection__products.is-loading .pagination-custom {
visibility: hidden;
opacity: 0;
}
@media only screen and (max-width: 479px) {
.collection--compact-mobile .wrapper, .collection--compact-mobile .wrapper .grandparent .header__dropdown__wrapper, .wrapper .grandparent .collection--compact-mobile .header__dropdown__wrapper {
padding-left: 0;
padding-right: 0;
}
.collection--compact-mobile .wrapper .collection__nav, .wrapper .grandparent .collection--compact-mobile .header__dropdown__wrapper .collection__nav {
border-left: 0;
border-right: 0;
}
.collection--compact-mobile .collection__nav {
margin-bottom: 15px;
position: sticky;
top: var(--menu-height-sticky);
z-index: 450;
background: var(--bg);
}
.collection--compact-mobile .product__grid__info {
padding-left: 10px;
padding-right: 5px;
}
.collection--compact-mobile .js-grid {
-moz-column-gap: 1px;
column-gap: 1px;
}
.collection--compact-mobile .collection__active__filters__wrapper {
display: flex;
justify-content: space-between;
margin: 0 var(--outer);
}
}
/* Collection nav bar */
.collection__nav {
display: flex;
border: 1px solid var(--border);
justify-content: space-between;
height: 3.3em;
margin-bottom: var(--gutter);
}
.collection__filters__toggle,
.popout--navbar .popout__toggle {
padding: 0 20px;
height: 100%;
color: var(--text-light);
border-radius: 0;
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-2) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-relaxed);
border-top: none;
border-right: 1px solid var(--border);
border-bottom: none;
border-left: none;
margin: 0;
display: flex;
align-items: center;
}
.collection__filters__toggle svg,
.popout--navbar .popout__toggle svg {
margin-left: 8px;
margin-top: -2px;
font-size: 1.4em;
}
@media only screen and (max-width: 479px) {
.collection__filters__toggle,
.popout--navbar .popout__toggle {
padding: 0 15px;
}
}
.collection__filters__toggle .badge {
margin-left: 5px;
margin-right: 2px;
}
.popout--navbar {
height: 100%;
}
.popout--navbar .popout {
height: 100%;
}
.popout--navbar .popout-list {
z-index: 1000;
max-height: 90vh;
top: 100%;
bottom: initial;
left: -1px;
}
.header__wrapper .popout--navbar .popout-list__item {
white-space: normal;
}
@media only screen and (max-width: 479px) {
.header__wrapper .popout--navbar .popout-list {
max-height: 50vh;
}
}
.collection__layout {
display: flex;
align-items: center;
overflow-x: hidden;
}
.collection__nav__buttons {
display: flex;
}
.no-js .collection__nav {
display: none;
}
.collection-list-item + .collection-list-item {
margin-top: 60px;
}
.collection-list-item:first-of-type {
padding-top: 20px;
}
.kicker-flourished + .collection-list-item {
padding-top: 0;
}
.collection-list__heading hr {
margin: 10px 0;
}
.collection-list__heading__text {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 20px;
}
.collection-list__heading__text .hero__title {
margin-right: 10px;
}
.collection-list__heading__text .text-btn-arrow-right {
white-space: nowrap;
margin-bottom: 3px;
}
@media only screen and (max-width: 767px) {
.collection-list__products {
-moz-column-gap: 0;
column-gap: 0;
row-gap: 0;
display: flex;
flex-flow: row nowrap;
padding-right: var(--outer);
margin: 0 calc(var(--outer) * -1);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
.collection-list__product {
flex: 0 0 var(--product-width);
}
@media only screen and (max-width: 767px) {
.collection-list__product {
padding-left: var(--gutter);
}
.collection-list__product:first-child {
margin-left: max(var(--outer) - var(--gutter), 0px);
}
.collection__filters__outer {
position: fixed;
z-index: 20050;
top: 0;
left: 0;
height: 100%;
min-width: 70%;
max-width: 90%;
background: var(--bg);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 3px 12px rgba(0, 0, 0, 0.02);
transform: translate3d(-100%, 0, 0);
transition: transform 0.5s ease;
}
.drawer--visible .collection__filters__outer {
transform: translate3d(0, 0, 0);
}
.collection__filters__inner {
padding-bottom: 200px;
padding-top: var(--gutter);
padding-left: 16px;
padding-right: 16px;
opacity: 0;
transform: translate3d(-100%, 0, 0);
transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
}
.collection__filters__inner .sidebar__item .icon {
right: 0;
}
.drawer--visible .collection__filters__outer .collection__filters__inner {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.collection__filters__inner {
overflow-y: auto;
height: 100%;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.collection__filters__toggle .hide-filters {
display: none;
}
@media only screen and (min-width: 768px) {
.collection__filters__wrapper {
transition: width 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
min-width: 250px;
max-width: 250px;
width: 250px;
margin-left: -250px;
transition: width 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.01s, margin 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.01s;
}
.drawer--visible.collection__filters__wrapper,
.filters--default-visible.collection__filters__wrapper {
margin-left: 0;
}
.drawer--visible .collection__filters__inner,
.filters--default-visible .collection__filters__inner {
opacity: 1;
transform: translate3d(0, 0, 0);
transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
}
.drawer--visible .show-filters,
.filters--default-visible .show-filters {
display: none;
}
.drawer--visible .hide-filters,
.filters--default-visible .hide-filters {
display: inline-block;
}
.collection__filters__inner {
overflow: visible;
height: auto;
transform: translate3d(-100%, 0, 0);
opacity: 0;
padding-left: 10px;
margin-left: -10px;
padding-right: var(--gutter);
transition: opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.sidebar__heading:first-of-type {
margin-top: 0;
}
.collection__filters__wrapper .drawer__underlay,
.collection__filters__wrapper .drawer__top {
display: none;
}
}
/* Set thickness of active-state marker */
.sidebar__navigation__list {
margin: 0;
}
@media only screen and (max-width: 767px) {
.sidebar__navigation__list {
border-top: 1px solid var(--border);
margin-top: 10px;
padding-top: 10px;
}
}
.sidebar__navigation__list .sidebar__navigation__list__item {
display: inline-block;
padding: 0;
margin: 8px 8px 0 0;
font-size: 0;
}
.sidebar__navigation__list .sidebar__navigation__list__item label {
margin-left: 0;
overflow: hidden;
}
.sidebar__navigation__list .sidebar__navigation__list__item.is-hidden {
overflow: hidden;
width: 0;
padding: 0;
margin: 0;
}
.sidebar__heading {
position: relative;
display: flex;
flex-flow: row nowrap;
width: 100%;
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
padding: 0 28px 4px 0;
color: var(--text);
cursor: pointer;
text-align: left;
white-space: normal;
}
.sidebar__heading:not(.accordion-is-open) span:not(.sidebar__heading-chevron) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
display: inline-block;
}
input:checked + .sidebar__heading span:not(.sidebar__heading-chevron) {
white-space: normal;
max-width: 100%;
display: inline-block;
}
.sidebar__heading-chevron {
position: absolute;
top: 0;
right: 6px;
transform: rotate(0deg);
transition: transform 0.3s;
font-size: 16px;
}
input:checked + label > .sidebar__heading-chevron, .accordion-is-open > .sidebar__heading-chevron {
transform: rotate(90deg);
}
.sidebar__heading-chevron [class^=icon] {
display: block;
}
.sidebar__heading__color {
overflow: hidden;
flex: 1 1 auto;
padding: 0 5px;
border-left: 1px solid var(--border);
margin-left: 6px;
font-weight: var(--FONT-WEIGHT-BODY);
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
letter-spacing: normal;
text-transform: capitalize;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar__filter__group > input {
position: absolute;
visibility: hidden;
pointer-events: none;
}
.sidebar__filter__group .filter__button {
margin: 0;
}
.sidebar__filter__group .filter__button label,
.sidebar__filter__group .sidebar__navigation__list + button {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
width: 100%;
margin: 0;
padding: 4px 25px 4px 0;
display: block;
position: relative;
z-index: 5;
}
.sidebar__filter__group .filter__button label:hover .checkbox-core,
.sidebar__filter__group .sidebar__navigation__list + button:hover .checkbox-core {
fill: var(--border);
}
.sidebar__filter__group .sidebar__navigation__list + button {
display: none;
padding: 0;
margin-top: 4px;
color: var(--text);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
cursor: pointer;
text-transform: uppercase;
text-align: left;
transition: color 0.3s;
}
.sidebar__filter__group .sidebar__navigation__list + button:hover {
color: var(--border);
}
.sidebar__filter__group .accordion-is-open ~ button {
display: block;
}
.no-js .sidebar__filter__group .accordion-is-open ~ button, .no-js .sidebar__filter__group > button[show-more] {
display: none;
}
.no-js .sidebar__filter__group li.is-hidden {
visibility: visible;
opacity: 1;
max-height: none;
}
.sidebar__navigation__list .icon-box,
.sidebar__navigation__list .icon-theme {
position: absolute;
top: 6px;
right: 8px;
z-index: 0;
}
.focus-enabled .filter__button input:focus + label {
outline-color: var(--secondary) !important;
outline-offset: 1px !important;
outline-style: auto !important;
outline-width: 3px !important;
}
.stateful-filter-icons .icon-box {
width: 15px;
height: 15px;
}
.stateful-filter-icons .icon-theme {
opacity: 0;
width: 12px;
}
.checkbox-border {
stroke: var(--border);
}
.checkbox-core {
fill: rgba(0, 0, 0, 0);
}
.sidebar__heading.has-filters a {
text-decoration: none;
width: 100%;
display: block;
}
.sidebar__heading.has-filters .icon-theme {
opacity: 1;
}
.sidebar__item {
padding: 0;
margin: 0;
position: relative;
}
.sidebar__item a, .sidebar__item span {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
padding: 4px 50px 4px 0;
text-decoration: none;
width: 100%;
display: block;
position: relative;
z-index: 5;
}
.sidebar__item:hover > .icon-box .checkbox-core {
fill: var(--border);
}
.sidebar__item--active > .icon-box .checkbox-core {
fill: var(--text-dark) !important;
}
.collection__active__filters__wrapper {
margin-top: calc(-1 * (var(--gutter) - var(--inner)));
padding-bottom: calc(var(--inner) - 7px);
}
@media only screen and (min-width: 768px) {
.collection__active__filters__wrapper {
display: grid;
grid-template-columns: repeat(2, auto);
}
}
.collection__active__filters__wrapper.is-hidden {
margin: 0;
padding: 0;
}
.collection__count {
justify-self: end;
font-style: italic;
}
.collection__count strong {
font-style: normal;
font-family: var(--FONT-STACK-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
}
.sidebar__filter__group {
margin-bottom: 28px;
}
.filter__button input {
opacity: 0;
width: 0;
height: 0;
display: block;
}
.filter__button input .icon-box {
opacity: 1;
}
.filter__button input .icon-theme {
opacity: 0;
}
.filter__button input:checked ~ label .icon-box .checkbox-core {
fill: var(--text-dark);
}
.filter__button input:checked ~ label:hover .icon-box {
opacity: 0;
}
.filter__button input:checked ~ label:hover .icon-theme {
opacity: 1;
}
.filter__button input:disabled ~ label {
color: var(--text-light);
text-decoration: line-through;
cursor: default;
}
.filter__button input:disabled ~ label .icon-box {
opacity: 0;
}
.active__filters__remove,
.active__filters__clear {
display: inline-block;
padding: 0.33em 0.5em;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: var(--radius-sm);
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-2) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-relaxed);
background-color: var(--hairline);
color: var(--text);
padding: 8px 14px;
margin-right: 7px;
margin-bottom: 7px;
}
.active__filters__clear {
background-color: var(--hairline-hover);
}
.filter__x {
margin-left: 0.5em;
}
.filter__price__fields {
display: flex;
align-items: center;
justify-content: flex-start;
max-width: 100%;
margin: 0 0 25px;
}
.filter__price__fields label {
position: absolute !important;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
.filter__price__field {
display: flex;
align-items: center;
flex: 1;
max-width: calc(50% - 20px);
padding: 4px 0;
border-bottom: 1px solid var(--border);
border-radius: 0;
}
.filter__price__field span {
margin-right: 5px;
}
.filter__price__spacer {
flex: 0 0 40px;
position: relative;
padding: 5px;
font-size: 0;
text-align: center;
}
.filter__price__spacer:before {
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 1px;
margin-left: -3px;
background: currentcolor;
content: "";
}
input[type=number].filter__price__input {
border: 1px solid transparent;
border-radius: 0;
margin: 0;
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
}
.filter__price__input {
flex: 1;
display: block;
min-width: 0;
max-width: 100%;
width: auto;
padding: 0 3px;
border: 1px solid transparent;
border-radius: 0;
margin: 0;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
text-align: right;
}
/* Range */
.collection-range-filter {
position: relative;
display: block;
height: 36px;
margin-left: -8px;
margin-right: -8px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
opacity: 0;
}
.collection-range-filter.is-initialized {
opacity: 1;
}
.range__dot {
position: absolute;
z-index: 2;
display: block;
width: 36px;
height: 36px;
padding: 8px;
}
.range__dot span {
display: block;
width: 100%;
height: 100%;
background: var(--text);
border: 2px solid var(--bg);
border-radius: 50%;
font-size: 0;
cursor: pointer;
}
.range__line {
position: absolute;
top: 16px;
left: 8px;
z-index: 0;
overflow: hidden;
width: calc(100% - 16px);
height: 4px;
border-radius: 4px;
background: var(--border);
}
.range__line span {
display: block;
height: 100%;
width: 0%;
background: var(--text);
font-size: 0;
}
/* ============================================================================
#Collection Split
============================================================================== */
.collection-split .hero__content__wrapper {
padding: calc(var(--outer) * 2);
}
.collection-split .image__hero__frame {
height: 100%;
}
@media only screen and (min-width: 768px) {
.collection-split .image__hero__frame {
min-height: auto;
}
}
.collection-split__grid {
display: grid;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
row-gap: 24px;
}
@media only screen and (min-width: 768px) {
.collection-split__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: var(--gutter);
}
}
@media only screen and (max-width: 767px) {
.collection-split__item {
margin: 0 var(--outer-offset);
max-width: calc(100% + var(--outer) * 2);
min-height: 100vw;
overflow: hidden;
}
.collection-split__item .collection-split__block {
height: 100%;
}
.wrapper--none .collection-split__item {
margin: 0;
}
}
@media only screen and (min-width: 768px) {
.collection-split__item--last {
order: 2;
}
.wrapper--none .collection-split__item--last + .collection-split__products {
padding-left: var(--gutter);
padding-right: 0;
}
}
.collection-split__block {
position: relative;
color: var(--text);
}
@media only screen and (min-width: 768px) {
.collection-split__block {
height: 100%;
}
.collection-split__block--sticky {
position: sticky;
top: 0;
max-height: 100vh;
}
}
.collection-split__products .float-grid + *, .collection-split__products .grid--full + * {
margin-top: max(var(--gutter), 20px);
}
@media only screen and (max-width: 767px) {
.collection-split__products {
padding-left: 0;
padding-right: 0;
min-width: 0;
}
.collection-split__products .float-grid, .collection-split__products .grid--full {
width: calc(100% + var(--outer) * 2);
}
.wrapper--none .collection-split__products {
margin: 0;
padding-left: var(--outer);
padding-right: var(--outer);
}
}
@media only screen and (min-width: 768px) {
.wrapper--none .collection-split__products {
padding-left: 0;
padding-right: var(--gutter);
}
.collection-split__product {
margin-bottom: 20px;
}
.collection-split__product:last-child {
margin-bottom: 0;
}
}
@media only screen and (min-width: 1100px) {
.grid--2 .collection-split__product:nth-last-child(-n+2), .grid--3 .collection-split__product:nth-last-child(-n+3) {
margin-bottom: 0;
}
}
@media only screen and (max-width: 767px) {
.collection-split__product {
scroll-snap-align: initial !important;
}
}
/**
* Subcollection
*/
.subcollections {
position: relative;
background-color: var(--bg);
}
.subcollections__inner {
padding: 0;
width: 100%;
display: grid;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
grid-template-columns: repeat(4, minmax(0, 1fr));
margin: 0;
}
.subcollections__inner > * {
min-width: 0;
}
.wrapper--none .subcollections__inner {
-moz-column-gap: 0;
column-gap: 0;
}
@media only screen and (min-width: 768px) {
.subcollections + .collection {
padding-top: 0;
}
}
.collection__title + .subcollections .subcollections__inner {
padding-top: 0;
}
.subcollection__item {
position: relative;
overflow: visible;
}
.subcollections__grid--1 .subcollections__inner {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.subcollections__grid--2 .subcollections__inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.subcollections__grid--3 .subcollections__inner {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.subcollections__grid--5 .subcollections__inner,
.subcollections__grid--6 .subcollections__inner {
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: var(--gutter);
}
@media only screen and (max-width: 767px) {
.subcollections:not(.subcollections__grid--1) .subcollections__inner {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
max-width: calc(100% + var(--outer) * 2);
width: calc(100% + var(--outer) * 2);
margin-left: var(--outer-offset);
margin-right: var(--outer-offset);
scrollbar-width: none;
padding-bottom: var(--gutter);
grid-gap: 0;
padding-left: var(--outer);
scroll-padding: var(--outer);
-ms-overflow-style: none;
}
.subcollections:not(.subcollections__grid--1) .subcollections__inner::-webkit-scrollbar {
width: 0;
height: 0;
}
.subcollections:not(.subcollections__grid--1) .subcollections__inner:after {
content: "";
display: block;
padding-right: var(--outer);
}
.subcollections:not(.subcollections__grid--1) .subcollections__inner .subcollection__item {
flex: 0 0 auto;
width: calc((100% - var(--outer)) / var(--grid-small-items) - var(--gutter) / var(--grid-small-items) * (var(--grid-small-items) - 1));
margin-right: var(--gutter);
}
.subcollections:not(.subcollections__grid--1) .subcollections__inner .subcollection__item:last-child {
margin-right: 0;
}
}
.subcollection__item .hero__content__wrapper {
padding-top: 0;
padding-bottom: 0;
}
.subcollection__image {
width: 100%;
height: 100%;
overflow-y: hidden;
transform: scale(1.06);
transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.theme-animate-hover .subcollection__link:focus .subcollection__image, .theme-animate-hover .subcollection__link:hover .subcollection__image {
transform: scale(1);
}
.subcollection__link {
display: flex;
justify-content: flex-start;
align-items: flex-end;
overflow: hidden;
width: 100%;
height: 100%;
}
body.focus-enabled .subcollection__link:focus {
outline-offset: 2px !important;
}
.subcollection__title {
padding: var(--gutter);
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-4) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
line-height: 0.8;
margin: 1em;
}
/* ============================================================================
#Breadcrumbs
============================================================================== */
.breadcrumb {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
padding-bottom: var(--PT);
}
.breadcrumb a,
.breadcrumb span {
display: inline-block;
padding: 2px 2px 1px 0;
margin-right: 0;
text-decoration: none;
word-break: break-word;
}
.breadcrumb a:first-child,
.breadcrumb span:first-child {
padding-left: 0;
}
.breadcrumb a:hover {
text-decoration: underline;
}
@media only screen and (min-width: 768px) and (max-width: 1099px) {
.breadcrumb {
padding-bottom: calc(var(--PT) * 0.8);
}
}
@media only screen and (max-width: 767px) {
.breadcrumb {
padding-bottom: calc(var(--PT) * 0.6);
}
}
.product__inner .breadcrumb {
padding-bottom: 0;
}
.related__products {
position: relative;
}
.related__products .tab-content:first-child,
.related__products .tab-content:first-child ~ .tab-content {
margin-top: 0;
}
.recent__container .related__products.alt .tab-link {
display: block;
padding: 0;
border-bottom: none;
margin: 0;
cursor: default;
pointer-events: none;
}
.recent__container .related__products.alt .tabs--center .tab-link {
margin: 0 auto;
}
.recent__container .tab-content {
margin-top: 0;
}
/* ============================================================================
#Product Page
============================================================================== */
.product-section .pswp.pswp--open {
z-index: 9999999999;
}
.product-reviews {
padding: 60px 0 !important;
margin: 0 !important;
}
.collection-tabs {
--offset: 50px;
position: relative;
}
@media only screen and (min-width: 480px) {
.collection-tabs .kicker-flourished {
padding-left: var(--offset);
padding-right: var(--offset);
}
.collection-tabs .tab__scroll {
margin-left: var(--offset);
margin-right: var(--offset);
}
}
.product__block__text p {
margin-top: 0;
margin-bottom: 0;
}
.product__block__text p + p {
margin-top: 0.75em;
}
.product__block__text ul {
list-style-type: disc;
margin-left: 20px;
}
.product__form__link {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-2) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-relaxed);
}
a.product__form__link {
position: relative;
text-decoration: none;
}
a.product__form__link:after {
content: "";
left: 0;
width: 100%;
display: block;
position: absolute;
bottom: -1px;
height: 1px;
background: currentcolor;
transition: transform 0.2s ease, opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
a.product__form__link:after {
height: 0.5px;
}
}
a.product__form__link:after {
transform: scaleX(1);
transform-origin: 0 50%;
}
a.product__form__link:hover:after {
transform: scaleX(0);
transform-origin: 100% 50%;
}
a.product__form__link:after {
opacity: 0.2;
bottom: -1px;
height: 0.5px;
}
.product__block__buttons {
display: block;
}
.product__block__buttons,
.product__block__description,
.product__block__icon,
.product__block__image,
.product__block__pickup,
.product__block__quantity,
.product__block__remaining,
.product__block__share,
.product__block__siblings,
.product__block__spacer,
.product__block__subscription,
.product__block__text,
.product__block__title,
.product__block__price,
.product__block__upsell,
.product__block__variants {
padding-bottom: var(--PB);
}
@media only screen and (max-width: 767px) {
.product__block__buttons,
.product__block__description,
.product__block__icon,
.product__block__image,
.product__block__pickup,
.product__block__quantity,
.product__block__remaining,
.product__block__share,
.product__block__siblings,
.product__block__spacer,
.product__block__subscription,
.product__block__text,
.product__block__title,
.product__block__price,
.product__block__upsell,
.product__block__variants {
padding-bottom: min(var(--PB) * 0.8, 30px);
}
}
.product__block__variants:empty {
display: none;
}
.product__block__spacer {
padding-top: var(--PT);
}
@media only screen and (max-width: 767px) {
.product__block__spacer {
padding-top: min(var(--PT) * 0.8, 30px);
}
}
.product__page__cutline {
font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY));
margin-top: var(--space-5);
margin-bottom: 0;
}
.product__price__wrap {
margin: calc(var(--inner) / 2) 0 0 0;
}
.product__price__wrap:first-child {
margin-top: 0;
}
.product__price__main {
display: inline-flex;
align-items: center;
}
.product__price {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
color: var(--text);
display: inline-block;
padding: 8px 0 6px 0;
}
.product__price--unit {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
color: var(--text-light);
padding: 0 0 0 0;
margin-left: 8px;
}
.product__price--off {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: bold; /* Bold for emphasis */
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY)); /* Increased further */
line-height: var(--leading-relaxed);
display: inline-block;
border: 1px solid var(--primary);
color: var(--primary);
padding: 4px 10px;
margin: 0 0 0 10px;
border-radius: var(--radius-sm);
}
.product__price--off em {
font-style: normal;
font-weight: bold;
opacity: 0.5;
padding: 0 4px;
}
.taxes-included-message--product {
font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
font-style: italic;
color: var(--text-light);
}
.shop-pay-terms {
--payment-terms-background-color: var(--bg);
margin: 10px 0 0 0;
}
.shop-pay-terms:empty {
margin: 0;
}
.shopify-payment-button .shopify-payment-button__more-options.shopify-payment-button__button--hidden {
display: none;
}
.product__title__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.product__title {
margin: 0;
word-break: break-word;
}
.product__price {
line-height: 1em;
}
/* Above button stockout na size chart */
.product__button__meta {
display: flex;
justify-content: space-between;
align-items: center;
}
.variant__countdown {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-2) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-relaxed);
transition: all 0.4s ease-in-out;
padding: 0;
margin: 15px 0 12px 0;
min-height: 1em;
}
.variant__countdown:not(:first-child) {
text-align: right;
}
.variant__countdown > span {
line-height: 1;
display: block;
transition: none;
}
.count-is-in .variant__countdown--in,
.count-is-low .variant__countdown--low,
.count-is-out .variant__countdown--out,
.count-is-unavailable .variant__countdown--unavailable {
max-height: initial;
visibility: visible;
opacity: 1;
}
.show-only-low.count-is-in .variant__countdown--in,
.show-only-low.count-is-out .variant__countdown--out,
.show-only-low.count-is-unavailable .variant__countdown--unavailable,
.variant__countdown--in,
.variant__countdown--low,
.variant__countdown--out,
.variant__countdown--unavailable {
max-height: 0;
visibility: hidden;
opacity: 0;
}
.product__info__link {
cursor: pointer;
display: inline-block;
padding: 0.33em 0.5em;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: var(--radius-sm);
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-2) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-relaxed);
background-color: var(--hairline);
color: var(--text);
padding: 6px 10px;
display: flex;
align-items: center;
margin: 15px 0 12px 0;
}
.product__info__link--inline {
cursor: pointer;
margin-left: 10px;
display: inline-block;
padding: 0.33em 0.5em;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: var(--radius-sm);
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-2) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-relaxed);
background-color: var(--hairline);
color: var(--text);
font-style: italic;
}
.select__fieldset {
padding: 4px 0;
}
.product__align-left .radio__button label {
margin-left: 0;
}
.product__align-left .shopify-payment-button__more-options {
text-align: left;
padding-left: 0;
}
.product__align-left .shopify-product-form {
margin: 0;
}
@media only screen and (max-width: 767px) {
.product__align-left .shopify-product-form {
max-width: none;
}
}
.product__align-left .product__title {
margin-bottom: 0;
margin-right: 15px;
}
.product__align-center .product__title__wrapper {
flex-direction: column;
}
.product__align-center .rating__wrapper__title {
margin-top: 12px;
}
.product__align-center .product__title {
text-align: center;
}
@media only screen and (max-width: 767px) {
.product__align-center .breadcrumb {
text-align: center;
padding-left: 7px;
}
}
.product__align-center .product__inner .breadcrumb,
.product__align-center .product__info__link,
.product__align-center .radio__fieldset,
.product__align-center .variant__countdown,
.product__align-center .product__subheading,
.product__align-center .product__price__wrap,
.product__align-center .radio__legend,
.product__align-center .selector-wrapper label,
.product__align-center .product__page__cutline {
text-align: center;
}
.product__align-center .swatch__button,
.product__align-center .radio__inputs,
.product__align-center .radio__legend,
.product__align-center .product__page__siblings,
.product__align-center .product__button__meta:not(.product__button__meta--packed) {
justify-content: center;
}
.product__align-center .product-single .quantity__wrapper {
margin-left: auto;
margin-right: auto;
}
.product__align-center .tabs-wrapper--above .product-tabs-title {
display: flex;
justify-content: space-evenly;
}
.product__align-center .tabs-wrapper--above .product-tabs-title .tab-link {
margin: 0;
}
.product-single {
display: flex;
flex-wrap: wrap;
margin-left: 0;
margin-right: 0;
}
.product-single .grid__item {
padding-left: 0;
padding-right: 0;
}
@media only screen and (min-width: 768px) {
.product__inner {
padding-left: var(--outer);
}
}
.wrapper--none .product__inner {
padding-right: var(--outer);
padding-left: var(--outer);
}
@media only screen and (max-width: 767px) {
.product__inner {
padding-top: 30px;
}
}
.product-single .is-sticky {
position: sticky;
top: 30px;
z-index: 5;
}
.is-pickup-visible .product-single .is-sticky {
animation: z-index-animation 0.3s;
animation-fill-mode: forwards;
}
.product-single .product__inner {
margin: 0 auto;
}
@media only screen and (min-width: 768px) {
.product-single .product__inner {
max-width: 450px;
}
.push-product-title .product-single .product__inner {
padding-top: 60px;
padding-bottom: 60px;
}
}
.product-single .product__main__content > div:last-child .tab-content {
padding-bottom: 0;
}
.product-single .product__main__content > div:last-child .tab-content p:last-child,
.product-single .product__main__content > div:last-child .tabs-wrapper {
margin-bottom: 0;
}
/* no js */
.product__form__select--hidden {
display: none;
border-left: none;
border-right: none;
border-top: none;
border-radius: 0;
margin: 0 0 30px;
}
.product__form__select--hidden:focus {
border-bottom: 1px solid var(--primary);
box-shadow: none;
}
.no-js .product__form__select--hidden {
display: block;
}
.no-js .form__selectors {
display: none;
}
.product__block__image {
width: 100%;
}
.product__block__image--right > div {
margin-left: auto;
}
.product__block__image--center > div {
margin: 0 auto;
}
.product__block__icon {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
}
.product__block__icon .icon-holder {
margin-right: 7px;
}
.product__block__icon .icon {
width: var(--ICON-SIZE, 16px);
height: var(--ICON-SIZE, 16px);
}
.product__block__icon .icon path,
.product__block__icon .icon g,
.product__block__icon .icon circle {
fill: none !important;
stroke: var(--ICON-STROKE-COLOR) !important;
}
.product__block__icon p {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
margin: 0;
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
}
@keyframes z-index-animation {
from {
z-index: 0;
}
to {
z-index: 20050;
}
}
.product__subs {
position: relative;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.product__subs__group {
display: block;
padding: 4px 0;
}
.product__subs__group + .product__subs__group {
border-top: none;
border-top: 1px solid var(--border);
}
.product__subs__plans {
margin-left: var(--space-8);
}
.product__subs__plans .product__subs__option {
padding-top: 0;
}
.product__subs__option {
display: flex;
width: 100%;
padding: 10px;
align-items: center;
cursor: pointer;
}
.product__subs__option input[type=radio] {
color: var(--text-dark);
width: var(--space-6);
height: var(--space-6);
flex-shrink: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
padding: 0;
border: 0;
margin: 0 var(--space-4) 0 0;
cursor: pointer;
}
.product__subs__option input[type=radio]:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid var(--text-dark);
box-sizing: border-box;
}
.product__subs__option input[type=radio]:checked:before {
background-image: radial-gradient(var(--primary) 50%, var(--bg) 51%);
}
.product__subs__description {
color: var(--text-light);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
background: var(--hairline);
margin: 0;
padding: 10px 16px;
border-radius: var(--radius-sm);
margin-top: 8px;
font-style: italic;
}
[data-subscription-watch-price] {
display: none;
}
.popout {
position: relative;
}
.popout__toggle {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
margin: 10px 0;
white-space: nowrap;
padding: 9px 16px;
background-image: none;
display: flex;
align-items: center;
}
.popout__toggle:focus {
box-shadow: none;
}
.popout__toggle svg {
margin: 0.1em -0.2em 0 0.2em;
font-size: 1.4em;
transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.popout__toggle[aria-expanded=true] svg {
transform: rotate(180deg);
}
.collection-sort .popout__toggle[aria-expanded=true] svg {
transform: rotate(0);
}
.popout-list {
background-color: var(--bg);
border: 1px solid var(--border);
bottom: 100%;
position: absolute;
opacity: 0;
visibility: hidden;
margin: 0 0 10px 0;
padding: 0;
min-height: 30px;
max-height: 300px;
max-width: 100vw;
pointer-events: none;
z-index: 100;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
@media only screen and (max-width: 479px) {
.popout-list {
max-height: min(30vh, 300px);
}
}
.popout-list--visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.popout-list__item {
white-space: nowrap;
padding: 0;
margin: 0;
text-align: left;
}
.popout-list__option {
padding: 8px 15px 8px 15px;
width: 100%;
display: block;
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
text-decoration: none;
}
.popout-list__option:hover {
background-color: var(--hairline);
}
.popout-list__item--current .popout-list__option span {
border-bottom: 1px solid var(--border);
}
.popout--footer {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0;
}
.popout--footer .popout {
padding: 0 5px;
}
.popout--footer .popout__toggle:focus {
border: 1px solid var(--muted);
box-shadow: 0 1px 4px var(--hairline);
}
.no-js .popout > input {
visibility: hidden;
position: absolute;
pointer-events: none;
}
.no-js .popout > input:checked ~ .popout-list {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.drawer__content {
position: fixed;
visibility: hidden;
content-visibility: hidden;
z-index: 20050;
top: 0;
left: 0;
height: 100%;
max-width: 450px;
width: 100%;
background: var(--bg);
border-right: 1px solid var(--border);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 3px 12px rgba(0, 0, 0, 0.02);
transform: translate3d(-100%, 0, 0);
transition: transform 0.3s ease, visibility 0s linear 1s;
display: flex;
flex-direction: column;
}
.drawer--visible .drawer__content, .is-open .drawer__content {
visibility: visible;
content-visibility: visible;
transform: translate3d(0, 0, 0);
transition: transform 0.3s ease;
}
@media only screen and (max-width: 479px) {
.drawer__content {
width: 100vw;
}
}
.drawer--right .drawer__content {
left: initial;
right: 0;
}
.drawer--right:not(.drawer--visible):not(.is-open) .drawer__content {
transform: translate3d(100%, 0, 0);
}
.drawer--pop .drawer__content {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
max-height: 90%;
max-width: 600px;
transform: translateY(-50px) scale(0.9);
opacity: 0;
transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media only screen and (max-width: 767px) {
.drawer--pop .drawer__content {
max-height: calc(100% - 40px);
max-width: calc(100vw - 40px);
margin: 20px;
}
}
.drawer--visible.drawer--pop .drawer__content {
opacity: 1;
transform: translateY(0) scale(1);
}
.drawer--pop .quickview__modal {
top: 50%;
left: 50%;
padding-left: 0;
transform: translate(-50%, -50vh);
}
.drawer__underlay {
position: fixed;
visibility: hidden;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.drawer--visible .drawer__underlay, .is-open .drawer__underlay, .drawer__underlay.underlay--visible {
z-index: 20000;
visibility: visible;
transition: visibility 0.3s ease;
}
.drawer--visible .drawer__underlay .drawer__underlay__fill, .is-open .drawer__underlay .drawer__underlay__fill, .drawer__underlay.underlay--visible .drawer__underlay__fill {
background: var(--bg);
opacity: 0.6;
}
.drawer__underlay .drawer__underlay__blur,
.drawer__underlay .drawer__underlay__fill {
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
pointer-events: none;
}
.drawer__underlay .drawer__underlay__fill {
transition: all 0.3s ease;
}
.drawer__underlay .drawer__underlay__blur {
z-index: -1;
transition: -webkit-backdrop-filter 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: backdrop-filter 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: backdrop-filter 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-backdrop-filter 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media only screen and (min-width: 480px) {
.drawer__underlay .drawer__underlay__blur {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
}
@media only screen and (max-width: 479px) {
.header__drawer .drawer__underlay,
.drawer--right .drawer__underlay,
.drawer__underlay__fill,
.drawer__underlay__blur {
display: none !important;
}
}
.drawer__inner {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
flex: 1;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.drawer__close svg {
font-size: 20px;
pointer-events: none;
transition: transform 0.3s;
}
.drawer__close:hover svg {
transform: rotate(180deg);
}
.drawer__content > *:not(.drawer__inner) {
opacity: 0;
transition: opacity 0.8s ease-out;
}
.is-open .drawer__content > *:not(.drawer__inner),
.drawer--visible .drawer__content > *:not(.drawer__inner) {
opacity: 1;
}
.page-search {
min-height: var(--space-15);
}
.search__page__heading .input-group .btn, .search__page__heading .input-group .shopify-challenge__button,
.search__page__heading .input-group .input-group-field {
height: 48px;
}
.search__page__heading .note {
padding: 10.5px 22px;
}
.search__page__heading .note p {
font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
}
@media only screen and (min-width: 768px) {
.search__page__heading .input-group-field {
font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
}
}
.search-bar {
width: 100%;
margin-bottom: 20px;
}
.search__page__query {
margin-top: var(--gutter);
}
.search-bar .input-group-button__group {
display: flex;
}
.search-bar .input-group-button__group svg {
font-size: 24px;
}
.search-bar .search-reset {
padding: 0 20px;
}
.search__item__generic {
display: flex;
flex-direction: row;
gap: var(--gutter);
}
.search__item__generic__text p {
margin-top: 0;
margin-bottom: var(--space-4);
}
.search__item__generic__text p:last-child {
margin-bottom: 0;
}
.search__item__generic__image {
min-width: 70px;
}
.search__item__generic__image img {
max-width: 70px;
border-radius: var(--RADIUS);
}
.search__predictive {
--text: var(--COLOR-NAV-TEXT);
--text-dark: var(--COLOR-NAV-TEXT);
--text-light: var(--COLOR-NAV-TEXT);
--bg: var(--COLOR-NAV);
--border: var(--COLOR-NAV-BORDER);
color: var(--text);
background: var(--bg);
}
.search__predictive__main {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.search__predictive__close {
text-align: left;
width: 90px;
height: 100%;
}
.search__predictive__close__inner {
display: flex;
align-items: center;
max-height: none;
height: 100%;
padding: 20px 10px;
font-size: inherit;
cursor: pointer;
}
.search__predictive__close__inner svg {
font-size: 24px;
}
.search__predictive__clear {
display: flex;
}
.search__predictive__clear svg {
display: none;
font-size: 20px;
}
.search-drawer .search__predictive__clear {
padding-right: 35px;
font-size: 0;
}
.search-drawer .search__predictive__clear svg {
display: inline-block;
}
.search-drawer .search__predictive__close {
display: none;
}
/* Mobile drawer version */
.drawer__search {
position: relative;
border-bottom: 1px solid var(--border);
}
.drawer__search .search__predictive__button {
position: absolute;
right: 0;
padding: 0 20px;
}
.drawer__search .search__predictive__actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
height: 50px;
width: 100%;
}
.drawer__search .search__predictive__actions input,
.drawer__search .search__predictive__actions input:focus {
border: none;
box-shadow: none;
margin: 0;
padding: 0;
}
.drawer__search .search__predictive__actions input::-moz-placeholder {
font-style: italic;
}
.drawer__search .search__predictive__actions input::placeholder {
font-style: italic;
}
/* ============================================================================
#Blogs and Comments
============================================================================== */
.blog__article {
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.1);
border-radius: var(--radius-sm);
padding: 50px;
margin-bottom: 36px;
}
@media only screen and (max-width: 479px) {
.blog__article {
padding: 20px;
}
}
.blog__article .rte img {
display: inline-block;
}
.blog__article-header-image {
background-size: cover;
background-position: center center;
z-index: 0;
padding: 200px var(--gutter) var(--gutter) var(--gutter);
margin-top: calc(var(--gutter) * -1);
margin-left: calc(var(--gutter) * -1);
width: calc(100% + var(--gutter) * 2);
position: relative;
max-width: none;
color: #FFF;
}
@media only screen and (max-width: 479px) {
.blog__article-header-image {
width: calc(100% + var(--gutter));
margin-left: calc(var(--gutter) / -2);
padding: 90px calc(var(--gutter) / 2) calc(var(--gutter) / 2) calc(var(--gutter) / 2);
}
}
.blog__article-header-image a {
color: #FFF;
}
.blog__article-header-image:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
}
.blog__article--over-image {
border: none;
margin-top: -140px;
background-color: var(--bg);
z-index: 100;
position: relative;
}
@media only screen and (max-width: 767px) {
.blog__article--over-image {
margin-top: -100px;
}
}
.article__card {
margin-top: var(--gutter);
margin-bottom: 0;
box-shadow: none;
border-radius: 0;
--image-bottom: 5%;
}
.article__card__title {
padding: 0 21px;
}
@media only screen and (max-width: 767px) {
.article__card__title {
padding: 0 16px;
}
}
.blog .article__card {
margin-top: 0;
margin-bottom: var(--gutter);
}
.blog__article--image {
position: relative;
overflow: hidden;
border: none;
}
.blog__article__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
background-size: cover;
background-position: center center;
border: none;
}
.blog__article__overlay:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
}
.blog__article__title {
margin-top: 0;
margin-bottom: 10px;
word-wrap: break-word;
}
.blog__article__content {
margin-top: calc(var(--gutter) / 2);
}
.article__card .blog__article__content {
margin: 0;
min-height: 200px;
}
.blog__article--image .blog__article__content {
display: table;
}
.blog__article--image .blog__article__content .blog__article__title {
position: relative;
display: table-cell;
vertical-align: bottom;
color: white;
}
.blog__article--image .blog__article__content .blog__article__title a {
color: white;
}
.section-blog .blog__article--image .blog__article__content {
position: absolute;
margin: 0;
bottom: 0;
left: 0;
padding: 30px;
height: 100%;
width: 100%;
display: flex;
align-items: flex-end;
}
.section-blog__btn,
.section-blog .custom-scrollbar {
margin-top: 20px;
}
@media only screen and (min-width: 1100px) {
.section-blog__btn,
.section-blog .custom-scrollbar {
margin-top: 32px;
}
}
.blog__article header {
margin-bottom: var(--gutter);
}
.blog__article header .blog__article--light {
opacity: 0.6;
}
.blog__article footer {
margin-bottom: var(--gutter);
}
.blog__sidebar {
position: relative;
margin-top: 40px;
}
.blog__sidebar .blog__tags {
margin-bottom: 0;
}
.blog__rss {
position: absolute;
top: 0;
right: 0;
}
.blog__rss svg {
fill: var(--text-dark);
}
.blog__comments em {
color: var(--text-light);
}
.blog__comments strong {
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
}
.blog__tag {
position: relative;
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-2) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-relaxed);
padding: 9px;
margin-bottom: 3px;
}
.comment {
margin-bottom: var(--gutter);
}
.comment + .comment {
border-top: 1px solid var(--hairline);
padding-top: var(--gutter);
}
.blog__sidebar__title {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-5) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-snug);
color: var(--text);
}
.blog__heading {
margin-bottom: max(var(--PT) - 10px, 20px);
}
.blog__tags {
margin-bottom: 45px;
position: relative;
}
.blog__tags p {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-2) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-relaxed);
margin: 0 0 24px;
}
.blog__tags strong {
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
}
.article__item {
margin-bottom: 63px;
}
.article__item .rte p:last-child,
.article__item div:last-child,
.article__item h3:last-child {
margin-bottom: 0;
}
.article__item-image {
margin-bottom: 16px;
}
.article__item-meta {
margin-top: 5px;
margin-bottom: 9px;
color: var(--text-light);
}
.article__item-meta:last-child {
margin-bottom: 0;
}
.article__item-meta span {
margin-right: 4px;
}
.article__item-meta span:last-child {
margin-right: 0;
}
.article__item-meta span:last-child:after {
display: none;
}
.article__item-meta span:after {
content: "·";
padding-left: 6px;
}
.article__item-tag {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-2) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-relaxed);
}
.article__item-date {
font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
}
.article__item-title a {
text-decoration: none;
}
.article__item-avatar {
display: inline-block;
width: 25px;
height: 25px;
border-radius: 50%;
overflow: hidden;
}
.article__item-author {
font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
color: var(--text-light);
display: flex;
align-content: center;
margin: 5px 0;
}
.article__item-author span {
display: inline-block;
}
.article__item-author span + span {
padding-left: 5px;
}
.article__item-author + a {
margin-top: 16px;
display: inline-block;
}
@media only screen and (max-width: 479px) {
.blog__tags {
margin-bottom: 28px;
}
.blog__tags-wrapper {
padding: 0 var(--gutter);
margin: 0 calc(var(--gutter) * -1);
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
}
.blog__tags-wrapper::-webkit-scrollbar {
display: none;
}
}
/* ================ Newsletter ================ */
.newsletter__contain {
max-width: 420px;
margin: 0 auto;
}
.standard__newsletter {
max-width: 420px;
}
.text-center .standard__newsletter {
margin-left: auto;
margin-right: auto;
}
.text-right .standard__newsletter {
margin-left: auto;
}
.newsletter__message,
.has-error:not(.newsletter--default-messages) p:not([class]),
.has-success:not(.newsletter--default-messages) p:not([class]) {
display: none;
}
.has-error > .newsletter__message--error,
.has-success > .newsletter__message--success {
display: block;
}
/* ================ Input Group ================ */
.input-group {
position: relative;
display: table;
border-collapse: separate;
}
.input-group .input-group-field:first-child,
.input-group .input-group-button:first-child,
.input-group .input-group-button:first-child > .btn,
.input-group .input-group-button:first-child > .shopify-challenge__button,
.input-group input[type=hidden]:first-child + .input-group-field,
.input-group input[type=hidden]:first-child + .input-group-button > .btn,
.input-group input[type=hidden]:first-child + .input-group-button > .shopify-challenge__button {
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.input-group .input-group-field:last-child,
.input-group .input-group-button:last-child > .btn,
.input-group .input-group-button:last-child > .shopify-challenge__button {
border-radius: var(--radius-sm);
}
.input-group input {
/* Nasty Firefox hack for inputs http://davidwalsh.name/firefox-buttons */
}
.input-group input::-moz-placeholder {
color: inherit;
opacity: 0.7;
}
.input-group input::placeholder {
color: inherit;
opacity: 0.7;
}
.input-group input:-webkit-autofill, .input-group input:-webkit-autofill:hover, .input-group input:-webkit-autofill:focus, .input-group input:-webkit-autofill:active {
-webkit-transition: background-color 5000s ease-in-out 0s, border-color 5000s ease-in-out 0s;
transition: background-color 5000s ease-in-out 0s, border-color 5000s ease-in-out 0s;
-webkit-text-fill-color: var(--text) !important;
}
.input-group input::-moz-focus-inner {
border: 0;
padding: 0;
margin-top: -1px;
margin-bottom: -1px;
}
.input-group-field,
.input-group-button {
display: table-cell;
vertical-align: middle;
margin: 0;
}
.input-group .btn, .input-group .shopify-challenge__button,
.input-group .input-group-field {
height: 37px;
display: flex;
align-items: center;
}
.input-group .input-group-field {
width: 100%;
margin-bottom: 0;
}
.input-group-button {
position: relative;
white-space: nowrap;
width: 1%;
padding: 0;
}
.input-group--inner-button {
padding: 5px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background-color: var(--bg);
}
.input-group--inner-button .input-group-button,
.input-group--inner-button .input-group-button .btn--outline {
border-radius: var(--radius-sm);
}
.input-group--inner-button input {
border: none;
}
.input-group--inner-button input:active, .input-group--inner-button input:focus {
border: none;
box-shadow: none;
}
.standard__newsletter .input-group--inner-button {
color: var(--text);
}
.newsletter-block,
.newsletter-block .input-group,
.newsletter-block .standard__cta,
.newsletter-block .form__legal:last-child,
.newsletter-block p:last-child {
margin-bottom: 0;
}
.newsletter-block p {
font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
}
.newsletter-block .form__legal {
margin-top: 10px;
}
.newsletter-block .form__legal p,
.newsletter-block .form__legal p a {
color: inherit;
}
.newsletter-block .input-group--inner-button {
padding: 0;
border: none;
border-bottom: 1px solid currentcolor;
border-radius: 0;
margin: 0;
background-color: transparent;
color: inherit;
}
.newsletter-block .input-group .input-group-field {
padding-left: 0;
color: inherit;
}
.newsletter-block .input-group .input-group-field::-moz-placeholder {
color: inherit;
}
.newsletter-block .input-group .input-group-field::placeholder {
color: inherit;
}
.newsletter-block .input-group .input-group-field:-webkit-autofill, .newsletter-block .input-group .input-group-field:-webkit-autofill:hover, .newsletter-block .input-group .input-group-field:-webkit-autofill:focus, .newsletter-block .input-group .input-group-field:-webkit-autofill:active {
-webkit-transition: background-color 5000s ease-in-out 0s, border-color 5000s ease-in-out 0s;
transition: background-color 5000s ease-in-out 0s, border-color 5000s ease-in-out 0s;
-webkit-text-fill-color: var(--text) !important;
}
.newsletter-block.has-success [class^=icon],
.newsletter-block [class^=icon] + [class^=icon],
.newsletter-block label {
display: none;
}
.newsletter-block.has-success [class^=icon] + [class^=icon] {
display: inline-block;
}
.newsletter-block .input-group-button {
position: relative;
}
.newsletter-block .input-group-button button {
min-height: 32px;
margin: 0;
padding: 0 0 0 12px;
color: var(--text);
}
.newsletter-block .input-group-button button:hover {
color: var(--primary);
}
.newsletter-block .input-group-button [class^=icon] {
width: 21px;
height: auto;
}
/* ============================================================================
#Cart Page
============================================================================== */
.cart__return {
display: flex;
justify-content: flex-start;
align-items: center;
}
.checkout__button {
padding: var(--space-8) var(--space-5);
border-radius: 0;
}
.additional-checkout-buttons {
margin-top: 0;
padding: 8px;
background-color: var(--bg-accent);
border: 1px solid var(--border);
text-align: right;
min-height: 68px;
}
.additional-checkout-buttons ul {
justify-content: right;
}
@media only screen and (max-width: 767px) {
.additional-checkout-buttons {
display: flex;
justify-content: center;
}
.additional-checkout-buttons .dynamic-checkout__content {
width: 100%;
}
}
@media only screen and (min-width: 480px) {
.additional-checkout-buttons {
padding: 12px;
}
}
.vendor--hide .item__vendor {
display: none;
}
.cart__notes__label {
text-align: left;
}
.quantity--hide .cart__items__quantity,
.quantity--hide .quantity__wrapper {
display: none !important;
}
/* ================ Discount text tag ================ */
.cart__items__savings {
display: flex;
grid-column: 1/-1;
}
.item__total__savings {
background-color: var(--primary-fade);
color: var(--primary);
padding: 3px 6px;
border-radius: 3px;
font-size: 12px;
}
.cart__icon--tags svg {
width: 1em;
height: 1em;
position: relative;
}
.cart__icon--tags svg path {
opacity: 0.75;
stroke: var(--primary) !important;
fill: none !important;
}
/* ================ Loading animation ================ */
.cart--loading .quantity__wrapper {
--color: rgb(255 255 255 / 0%);
--text: rgb(255 255 255 / 0%);
}
.cart--loading .quantity__input {
background-color: var(--hairline);
border: 1px solid rgba(255, 255, 255, 0);
opacity: 0.6;
}
.cart--loading .quantity__button {
opacity: 0.3;
z-index: -2;
}
.item--loadbar {
height: 4px;
width: 100%;
position: absolute;
top: -1px;
left: 0;
overflow: hidden;
background-color: var(--hairline);
}
.item--loadbar:before {
content: "";
display: block;
position: absolute;
bottom: 0;
left: -300px;
width: 300px;
height: 4px;
background-color: var(--primary);
animation: loadbar 2s linear infinite;
}
@keyframes loadbar {
from {
left: -300px;
width: 30%;
opacity: 0;
}
1% {
left: -300px;
width: 30%;
opacity: 1;
}
50% {
width: 33%;
}
70% {
width: 66%;
}
80% {
left: 60%;
}
95% {
left: 120%;
opacity: 1;
}
99% {
left: 150%;
opacity: 0;
}
}
/* ================ Empty ================ */
.cart__template .cart--hidden {
display: none;
}
.cart__empty__page {
min-height: calc(100vh - var(--header-height));
}
.cart__empty {
min-height: calc(50vh - var(--header-height));
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 80px;
}
.cart__empty .image-overlay {
--bg: var(--text);
}
.cart__circle__wrapper {
display: flex;
justify-content: center;
align-items: center;
margin-top: -80px;
padding-bottom: 20px;
flex-direction: column;
}
.cart__circle {
background-color: var(--bg);
border-radius: 100%;
width: 160px;
height: 160px;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
color: var(--text-dark);
transition: box-shadow linear 0.8s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 3px 12px rgba(0, 0, 0, 0.02);
}
.cart__circle svg {
transition: opacity linear 1.2s;
opacity: 0.2;
width: 3em;
height: 3em;
}
.cart__continue__link {
position: relative;
text-decoration: none;
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
text-align: center;
margin: 0;
padding-top: var(--space-8);
}
.cart__continue__link:after {
content: "";
left: 0;
width: 100%;
display: block;
position: absolute;
bottom: -1px;
height: 1px;
background: currentcolor;
transition: transform 0.2s ease, opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
.cart__continue__link:after {
height: 0.5px;
}
}
.cart__continue__link:after {
right: initial;
left: 0;
width: 0;
transition: width 0.9s ease;
bottom: -3px;
height: 2px;
}
.cart__circle__wrapper:hover svg {
opacity: 1;
}
.cart__circle__wrapper:hover .cart__circle {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06), 0 3px 16px rgba(0, 0, 0, 0.02);
}
.cart__circle__wrapper:hover .cart__continue__link:after {
width: 100%;
}
.shipping-calculator [data-aria-hidden=true] {
display: none;
}
.shipping-calculator .shipping__rates.errors {
margin: 0;
}
.shipping__rates__button {
margin: 1em 0;
}
.shipping--success {
background-color: var(--hairline);
margin: 0;
}
.shipping--success p {
margin: 0;
}
.shipping--success li {
padding: 1em;
margin: 0;
}
.shipping--success li + li {
border-top: 1px solid var(--border);
}
/*====== Cart Message ======*/
.cart__drawer .cart__message {
align-items: center;
padding: 15px var(--gutter);
margin: 0;
font-size: calc(12px * var(--FONT-ADJUST-BODY));
line-height: 1.3;
}
.cart__message {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
border-bottom: 1px solid var(--border);
}
.cart__message.is-hidden {
overflow: hidden;
visibility: hidden;
max-height: 0;
padding: 0 15px;
border: none;
opacity: 0;
}
.cart__message .cart__message-success {
display: none;
}
.cart__message.is-success .cart__message-success {
display: inline;
}
.cart__message.is-success .cart__message-success ~ .cart__message-default {
display: none;
}
.cart__message.is-success .cart__graph .cart__graph-dot {
transition: top 0.4s;
}
.cart__message.is-success .cart__graph .cart__graph-dot:before,
.cart__message.is-success .cart__graph .cart__graph-dot:after {
transform: scale(1);
opacity: 0;
transition: top 1s, left 1s, transform 1s, opacity 0.6s 0.4s;
}
.cart__message.is-success .cart__graph .cart__graph-dot--1:before {
top: -35px;
left: 65px;
}
.cart__message.is-success .cart__graph .cart__graph-dot--4:after,
.cart__message.is-success .cart__graph .cart__graph-dot--1:after {
top: 5px;
left: 45px;
}
.cart__message.is-success .cart__graph .cart__graph-dot--2:before {
top: 35px;
left: 15px;
}
.cart__message.is-success .cart__graph .cart__graph-dot--5:after,
.cart__message.is-success .cart__graph .cart__graph-dot--2:after {
top: 5px;
left: -35px;
}
.cart__message.is-success .cart__graph .cart__graph-dot--3:before {
top: -25px;
left: 5px;
}
.cart__message.is-success .cart__graph .cart__graph-dot--6:after,
.cart__message.is-success .cart__graph .cart__graph-dot--3:after {
top: 45px;
left: -45px;
}
.cart__message.is-success .cart__graph .cart__graph-dot--4:before {
top: -35px;
left: 90px;
}
.cart__message.is-success .cart__graph .cart__graph-dot--5:before {
top: -70px;
left: 15px;
}
.cart__message.is-success .cart__graph .cart__graph-dot--6:before {
top: -50px;
left: 55px;
}
.cart__message--custom {
justify-content: center;
border: none;
}
.cart__message--custom p {
margin: 0;
text-align: center;
font-size: calc(12px * var(--FONT-ADJUST-BODY));
padding: 5px 8px;
border: 1px solid var(--secondary);
border-radius: 3px;
background-color: var(--secondary-fade);
color: var(--secondary);
}
.cart__message--custom a {
text-decoration: underline;
}
.cart__message--custom a:hover {
text-decoration: none;
}
.cart__message--custom + .cart__message {
padding-top: 0;
justify-content: center;
}
/*====== Cart Graph ======*/
.cart__graph {
align-self: flex-start;
position: relative;
display: block;
width: 18px;
height: 18px;
margin-right: 8px;
transform: scale(-1, 1);
}
.cart__graph .cart__graph-dot {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
transform: rotate(90deg);
}
.cart__graph .cart__graph-dot--2 {
color: var(--COLOR-PRIMARY);
}
.cart__graph .cart__graph-dot--3 {
color: var(--COLOR-SECONDARY);
}
.cart__graph .cart__graph-dot--4 {
color: var(--INVERSE-PRIMARY);
}
.cart__graph .cart__graph-dot--5 {
color: var(--INVERSE-SECONDARY);
}
.cart__graph .cart__graph-dot--6 {
color: var(--COLOR-BG-ACCENT);
}
.cart__graph .cart__graph-dot--4,
.cart__graph .cart__graph-dot--5,
.cart__graph .cart__graph-dot--6 {
transform: rotate(205deg);
}
.cart__graph .cart__graph-dot:before,
.cart__graph .cart__graph-dot:after {
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 5px;
border-radius: 50%;
background: currentcolor;
transform: scale(0);
pointer-events: none;
content: "";
}
.cart__graph circle {
transform-origin: 50% 50%;
stroke-width: 2;
stroke: var(--primary-fade);
fill: none;
}
.cart__graph .cart__graph-progress {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
max-height: 100%;
stroke: var(--primary);
transform: rotate(-90deg);
transform-origin: 50% 50%;
transition: stroke-dashoffset 0.3s;
}
.cart__page__shipping .cart__message {
border-bottom: none;
flex-direction: row-reverse;
}
.cart__page__shipping .cart__graph {
align-self: center;
margin-right: 0;
margin-left: 8px;
}
/* ================ Cart drawer ================ */
.cart__drawer {
--cart-drawer-bottom: 150px;
}
@media only screen and (min-width: 768px) {
.cart__drawer {
--gutter: 20px;
}
}
.cart__drawer .errors {
margin: var(--gutter);
margin-bottom: 2px;
}
.cart__drawer .cart__items__total {
display: none;
}
.cart__drawer .cart--hidden {
opacity: 0;
height: 0;
visibility: hidden;
padding: 0;
}
.cart__drawer .cart__remove {
position: absolute !important;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
.cart__drawer .drawer__button {
padding-right: var(--gutter);
}
.cart__drawer__title {
display: flex;
height: 100%;
margin: 0;
padding: 0 0 0 var(--gutter);
align-items: center;
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
}
.drawer__body {
overflow-y: auto;
flex: 1;
width: 100%;
min-height: 1px;
}
.drawer__body .upsell__holder {
margin: 15px;
}
.cart__drawer .drawer__top {
position: sticky;
width: 100%;
top: 0;
background: var(--bg);
z-index: 300;
}
.drawer__bottom {
width: 100%;
margin-top: auto;
}
.drawer__bottom form {
margin: 0;
}
.cart__drawer .drawer__content {
border: none;
}
.cart__drawer .cart__message {
transition: all 0s;
}
/* ======= Cart items // drawer and mobile ======= */
.cart__items {
height: calc(100% - var(--cart-drawer-bottom));
}
.cart__items p {
margin: 0;
}
.line__price {
display: flex;
flex-wrap: wrap;
color: var(--text-light);
}
.line__price del, .line__price mark {
margin-right: 8px;
}
.line__price mark {
color: var(--primary);
background: none;
}
.cart__items__row {
padding: var(--gutter);
border-bottom: 1px solid var(--border);
position: relative;
}
.cart__items__remove {
position: absolute;
top: var(--gutter);
right: var(--gutter);
display: flex;
}
.cart__items__remove a {
padding: 4px 0 4px 4px;
}
.cart__items__remove a:hover {
color: var(--primary);
}
.cart__remove__icon {
font-size: 18px;
}
.cart__items__grid {
display: grid;
grid-template-columns: 90px 1fr;
grid-column-gap: var(--gutter);
grid-row-gap: 6px;
}
.cart__items__quantity .quantity__wrapper {
margin: 0;
}
.cart__items__meta {
font-family: var(--FONT-STACK-BODY);
font-style: var(--FONT-STYLE-BODY);
font-weight: var(--FONT-WEIGHT-BODY);
letter-spacing: var(--FONT-BODY-LETTER-SPACING);
text-transform: var(--FONT-BODY-TRANSFORM);
color: var(--text-light);
font-style: italic;
}
.cart__items__title {
font-family: var(--FONT-STACK-BODY);
font-style: var(--FONT-STYLE-BODY);
font-weight: var(--FONT-WEIGHT-BODY);
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
letter-spacing: var(--FONT-BODY-LETTER-SPACING);
text-transform: var(--FONT-BODY-TRANSFORM);
color: var(--text-dark);
padding-right: 25px;
word-break: break-word;
}
.cart__items__image {
grid-row: 1/span 3;
}
.cart__items__image .cart__items__img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
-o-object-fit: cover;
object-fit: cover;
}
.drawer__bottom__meta {
padding: var(--space-6) var(--gutter);
margin: 0;
}
.drawer__footer__subtotal .cart__footer__itemtotal,
.drawer__footer__subtotal .cart__footer__discount {
font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
padding: var(--space-6) var(--gutter);
margin: 0;
border-top: 1px solid var(--border);
}
.drawer__footer__subtotal .cart__footer__itemtotal .cart__footer__value,
.drawer__footer__subtotal .cart__footer__discount .cart__footer__value {
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
}
.drawer__footer__subtotal .cart__footer__discount {
background-color: var(--primary-fade);
color: var(--primary);
}
.drawer__checkout__additional .additional-checkout-buttons {
border-left: none;
border-right: none;
margin-bottom: 0;
border-bottom: 0;
margin-top: 0;
border: none;
}
/* ================ Cart blank state ================ */
.cart__items--blankstate .cart__items__img {
width: 100%;
padding-top: 100%;
display: block;
}
.cart__items--blankstate .cart__items__title {
width: 120px;
padding-top: 1em;
}
.cart__items--blankstate .cart__items__price {
width: 60px;
padding-top: 1em;
}
.cart__items--blankstate .item--loadbar:before {
background-color: var(--hairline);
}
.empty-content {
overflow: hidden;
background-color: var(--border);
background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 70%) var(--border);
background-size: 200% 100%;
background-position-x: 180%;
animation: 1s shimmer cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes shimmer {
to {
background-position-x: -20%;
}
}
/* ================ Cart template ================ */
.cart__template .cart__items__title {
padding-right: 35px;
}
@media only screen and (min-width: 768px) {
.cart__template .cart__items {
height: auto;
overflow-y: unset;
}
.cart__template .cart__items__row {
padding: var(--gutter) 0;
}
.cart__template .cart__items__grid {
display: grid;
grid-template-areas: "image title price quantity total" "image remove price quantity total" "image savings price quantity total";
grid-template-columns: 90px 2fr 1fr 1fr 1fr;
}
.cart__template .cart__items__image {
grid-area: image;
width: 90px;
height: 90px;
}
.cart__template .cart__items__title {
grid-area: title;
padding-right: 0;
}
.cart__template .cart__items__price {
grid-area: price;
}
.cart__template .cart__items__quantity {
grid-area: quantity;
display: flex;
justify-self: center;
}
.cart__template .cart__items__savings {
grid-area: savings;
}
.cart__template .cart__items__remove {
grid-area: remove;
position: relative;
top: initial;
right: initial;
}
.cart__template .cart__remove {
display: block;
}
.cart__template .cart__remove__icon {
display: none;
}
.cart__template .cart__items__total {
grid-area: total;
text-align: right;
justify-content: flex-end;
}
.cart__template .cart__items__row .cart__items__total,
.cart__template .cart__items__row .cart__items__price {
display: flex;
align-items: center;
}
.cart__template .cart__heading__quantity p {
text-align: center;
}
.cart__template .line__price {
flex-direction: column;
}
.cart__template .line__price del,
.cart__template .line__price mark {
margin-right: 0;
}
.cart__template .checkout__button {
min-width: 300px;
}
}
@media only screen and (min-width: 768px) and (max-width: 479px) {
.cart__template .checkout__button {
width: 100%;
margin: 10px 0;
padding: 22px 10px;
}
}
/* ================ Cart page headings ================ */
.cart__items__grid.cart__heading__wrapper {
border-bottom: 1px solid var(--border);
grid-row-gap: 5px;
}
.cart__heading {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
margin: 0;
padding: 0;
}
.cart__heading__back {
grid-column-start: image;
grid-column-end: title;
}
/* ================ Cart page footer ================ */
.template__cart__footer {
margin-top: 2em;
display: grid;
grid-template-areas: "product product total total" "notes notes update checkout" "shipping shipping empty empty";
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
grid-column-gap: var(--gutter);
grid-row-gap: 10px;
margin-bottom: -10px;
}
.template__cart__footer .upsell__holder {
grid-area: product;
}
.template__cart__footer .cart__footer__notes {
grid-area: notes;
}
.template__cart__footer .cart__footer__total {
grid-area: total;
overflow: hidden;
}
.template__cart__footer .cart__footer__checkout {
grid-area: checkout;
}
.template__cart__footer .cart__footer__shipping {
grid-area: shipping;
}
.template__cart__footer .cart__footer__shipping .accordion__title {
padding-left: 0;
}
.template__cart__footer .cart__footer__shipping .drawer__accordion__button,
.template__cart__footer .cart__footer__shipping .shipping-calculator {
padding: 1em 0;
}
.template__cart__footer .cart__footer__shipping .drawer__accordion__body {
padding: 0;
}
.template__cart__footer .cart__footer__update {
grid-area: update;
}
.template__cart__footer .cart__footer__additional {
grid-area: additional;
}
.template__cart__footer .cart__footer__total .cart__message--custom,
.template__cart__footer .cart__footer__total p {
margin: 0;
padding: 5px 0;
}
.template__cart__footer .cart__footer__total .cart__message--custom {
justify-content: flex-end;
}
.template__cart__footer .cart__footer__total .cart__message--custom p {
padding: 5px 8px;
text-align: right;
}
.template__cart__footer .cart__footer__label {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
}
.template__cart__footer .cart__footer__value {
font-size: calc(var(--font-6) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-snug);
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
}
.template__cart__footer .cart__footer__small {
font-style: italic;
color: var(--text-light);
}
@media only screen and (min-width: 768px) {
.template__cart__footer > .cart__footer__notes:first-of-type {
grid-area: product;
}
.template__cart__footer > .cart__footer__notes:first-of-type + .cart__footer__shipping {
grid-area: notes;
}
}
.template__cart__footer--additional_buttons {
margin-bottom: 0;
grid-template-areas: "product product total total" "notes notes update checkout" "shipping shipping empty empty" "additional additional additional additional";
}
.cart__footer__total,
.cart__footer__checkout,
.cart__footer__update {
text-align: right;
}
.cart__footer__update {
display: none;
}
.no--ajax .cart__footer__checkout,
.no-js .cart__footer__checkout {
grid-column-start: checkout;
grid-column-end: checkout;
}
.no--ajax .cart__footer__update,
.no-js .cart__footer__update {
display: flex;
align-items: flex-start;
padding-top: 15px;
justify-content: flex-end;
}
/* ================ Cart page mobile ================ */
@media only screen and (max-width: 767px) {
.template__cart__footer {
display: grid;
grid-template-areas: "product" "total" "checkout" "shipping" "update" "notes" "additional";
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-column-gap: 0;
grid-row-gap: 10px;
}
.template__cart__footer .drawer__bottom__shipping {
margin-top: 15px;
}
.cart__heading__wrapper .cart__items__quantity,
.cart__heading__wrapper .cart__items__price {
display: none;
}
.cart__template .cart__remove {
position: absolute !important;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
.cart__template .cart__items__total {
display: none;
}
.cart__template .checkout__button {
width: 100%;
}
.cart__template .cart__items__row {
padding: var(--gutter) 0;
}
.cart__template .cart__remove__icon {
right: 0;
}
.cart__template .cart__page__title {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-5) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-snug);
text-align: center;
}
.cart__template .cart__return {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
border-top: 1px solid var(--border);
padding: 3px;
}
.cart__template .cart__items__grid.cart__heading__wrapper {
display: block;
}
}
/* ================ No Ajax update animation ================ */
.cart__update {
display: none;
}
.no-js .cart__update,
.no--ajax .cart__update {
display: inline-block;
}
.cart__update__icon {
display: none;
}
.cart__update__icon svg {
position: relative;
top: 0.2em;
width: 1em;
height: 1em;
margin-right: 0.3em;
}
.cart__update__icon svg.icon path {
stroke: var(--primary);
fill: none;
}
.heart-beat svg {
animation-name: heartBeat;
animation-duration: 1.3s;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
}
@keyframes heartBeat {
0% {
transform: scale(1);
}
14% {
transform: scale(1.3);
}
28% {
transform: scale(1);
}
42% {
transform: scale(1.3);
}
70% {
transform: scale(1);
}
}
.cart--dirty .text-link-bare {
border-bottom: 1px solid var(--primary);
}
.cart--dirty .cart__update__icon {
display: inline;
}
.no-js .cart__update__icon {
display: inline;
}
.no-js .cart__footer__shipping {
display: none;
}
countdown-timer {
display: block;
}
.countdown__timer {
--gap: 12px;
margin-top: var(--space-4);
}
.countdown__datetime {
display: inline-grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gap);
}
.show-message .countdown__datetime {
display: none;
}
.countdown__message {
display: flex;
align-items: center;
justify-content: center;
display: none;
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
}
@media only screen and (max-width: 767px) {
.countdown__message {
font-size: calc(var(--DIGIT-SIZE-MOBILE) * var(--FONT-ADJUST-ACCENT));
}
}
.show-message .countdown__message {
display: block;
}
.timer {
display: flex;
flex-direction: column;
align-items: center;
}
.timer__unit {
display: block;
padding-bottom: 6px;
}
.timer__digit {
min-width: 1.6em;
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-align: center;
}
@media only screen and (max-width: 767px) {
.timer__digit {
font-size: calc(var(--DIGIT-SIZE-MOBILE) * var(--FONT-ADJUST-ACCENT));
}
}
.text__standard.text-left {
align-items: center;
}
.text__standard.text-left .timer__digit {
text-align: left;
}
/* ============================================================================
#Quantity Selectors
============================================================================== */
.quantity__wrapper {
position: relative;
display: flex;
align-items: center;
max-width: 103px;
min-width: 75px;
overflow: visible;
backface-visibility: hidden;
}
.quantity__input {
display: block;
background: none;
text-align: center;
border: 1px solid var(--border);
width: 100%;
padding: 11px 30px;
border-radius: 0;
margin: 0 !important;
}
.quantity__button {
cursor: pointer;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
padding: 0 12px;
top: 0;
bottom: 0;
border: 0 none;
background: none;
text-align: center;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
transition: all 0.2s ease-out;
}
.quantity__button:hover, .quantity__button:focus, .quantity__button:active {
color: var(--primary);
outline: none;
}
.quantity__button:active {
opacity: 0.7;
}
.quantity__button--plus {
right: 0;
}
.quantity__button--minus {
left: 0;
}
html.no-js .quantity__button {
display: none;
}
/* ============================================================================
#Cart Drawer
============================================================================== */
.product-add-popdown {
position: fixed;
z-index: 18000;
top: 0;
right: 0;
left: 0;
width: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
transform: translate3d(0, -100%, 0);
color: var(--COLOR-NAV-TEXT);
background: var(--COLOR-NAV);
border-bottom: 1px solid var(--COLOR-NAV-BORDER);
}
.product-add-popdown.has-errors {
position: static;
width: 100%;
margin: 2.7em 0 0;
border-bottom: none;
background: rgba(255, 255, 255, 0);
}
.product-add-popdown.is-visible {
opacity: 1;
visibility: visible;
transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0s;
transform: translate3d(0, 0, 0);
}
.product-add-popdown:not(.has-errors) {
min-height: var(--header-height);
}
.product__popdown__textbar {
text-align: center;
background: var(--COLOR-ANNOUNCEMENT-BG);
color: var(--COLOR-ANNOUNCEMENT-TEXT);
}
.product__popdown__outer {
width: 100%;
height: 100%;
}
.product__popdown__inner {
width: 100%;
height: 100%;
margin-top: 15px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.product__popdown__close,
.product__popdown__image,
.product__popdown__cart__wrapper {
flex-grow: 1;
flex-basis: 0;
}
.product__popdown__close {
text-align: left;
}
.popdown__close__inner {
cursor: pointer;
padding: 20px 0;
}
.popdown__close__inner svg {
font-size: 24px;
}
.product__popdown__image {
display: flex;
justify-content: center;
padding: 0 25px;
}
.product__popdown__image-holder,
.product__popdown__image img,
.product__popdown__image--no-image div {
margin: 0 auto;
width: 80px;
height: 80px;
border-radius: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media only screen and (max-width: 767px) {
.product__popdown__image-holder,
.product__popdown__image img,
.product__popdown__image--no-image div {
width: 60px;
height: 60px;
}
}
.product__popdown__title {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
margin-bottom: 0;
}
.product__popdown__title--bold {
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
}
.product__popdown__cart__wrapper {
text-align: right;
}
.product__popdown__added {
opacity: 0.8;
}
.product__add__drawer {
width: 100%;
}
.product__add__image__container {
min-height: 200px;
}
/* ============================================================================
#Search popdown
============================================================================== */
.search-popdown {
position: fixed;
z-index: 30000;
top: 0;
right: 0;
left: 0;
width: 100%;
opacity: 0;
visibility: hidden;
max-height: 100%;
transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
transform: translate3d(0, -100%, 0);
border-bottom: 1px solid var(--border);
}
.search-popdown.is-visible {
opacity: 1;
visibility: visible;
transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0s;
transform: translate3d(0, 0, 0);
}
.search-popdown .search__predictive__main {
height: var(--header-height);
}
.search-popdown .search__predictive__actions {
display: flex;
justify-content: flex-end;
height: 100%;
width: 100%;
margin: 0;
}
.search-popdown .search__predictive__actions input {
margin: 0;
border: none;
font-size: calc(var(--font-5) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-snug);
}
.search-popdown .search__predictive__actions input:focus, .search-popdown .search__predictive__actions input:active {
box-shadow: none;
}
.search-popdown .search__predictive__button {
padding: 0 15px;
}
/* ============================================================================
#Customer Accounts
============================================================================== */
.full__page__form__wrapper {
background: var(--hairline);
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
@media only screen and (max-width: 479px) {
.full__page__form__wrapper .wrapper, .full__page__form__wrapper .wrapper .grandparent .header__dropdown__wrapper, .wrapper .grandparent .full__page__form__wrapper .header__dropdown__wrapper {
padding: 0;
}
.full__page__form__wrapper .wrapper .float-grid, .wrapper .grandparent .full__page__form__wrapper .header__dropdown__wrapper .float-grid, .full__page__form__wrapper .wrapper .grid--full, .wrapper .grandparent .full__page__form__wrapper .header__dropdown__wrapper .grid--full {
margin-left: 0;
margin-right: 0;
}
}
.shopify-challenge__container {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 50px 8px;
}
.shopify-challenge__container .g-recaptcha {
margin: 10px 0;
}
.shopify-challenge__message {
font-family: var(--TYPE-STACK-KICKER);
font-style: var(--TYPE-STYLE-KICKER);
font-weight: var(--TYPE-WEIGHT-KICKER);
text-transform: var(--FONT-KICKER-TRANSFORM);
letter-spacing: var(--FONT-KICKER-LETTER-SPACING);
font-size: calc(var(--font-4) * var(--TYPE-ADJUST-KICKER));
color: var(--text);
text-align: center;
}
.shopify-challenge__button {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-4) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
}
button.shopify-challenge__button,
input[type=submit].shopify-challenge__button {
color: var(--btn-text);
}
.full__page__form {
background-color: var(--bg);
padding: var(--space-11);
margin: var(--space-11) 0;
}
@media only screen and (max-width: 479px) {
.full__page__form {
padding: var(--space-6);
}
}
.full__page__form form {
margin: 0;
padding: 0;
}
.account-header__right .btn--outline + .text-btn-arrow-right {
margin-left: var(--gutter);
}
.account__form__title {
font-family: var(--TYPE-STACK-KICKER);
font-style: var(--TYPE-STYLE-KICKER);
font-weight: var(--TYPE-WEIGHT-KICKER);
text-transform: var(--FONT-KICKER-TRANSFORM);
letter-spacing: var(--FONT-KICKER-LETTER-SPACING);
font-size: calc(var(--font-4) * var(--TYPE-ADJUST-KICKER));
color: var(--text);
text-align: center;
margin-bottom: var(--gutter);
}
.account__form__title--guest {
margin-top: calc(var(--gutter) * 2);
}
.order__item--original {
color: var(--muted);
text-decoration: line-through;
}
.order__table tr {
border-bottom: 1px solid var(--border);
}
@media only screen and (max-width: 479px) {
.order__table tbody tr {
border-bottom: 2px solid var(--text-dark) !important;
}
.order__table td {
padding: 10px 0 !important;
}
}
/* ================ Account page headers ================ */
.account-header {
margin-bottom: var(--inner);
}
@media only screen and (min-width: 768px) {
.account-header {
display: table;
width: 100%;
}
.account-header__title {
margin-bottom: var(--inner);
}
.account-header__left {
display: table-cell;
vertical-align: middle;
margin-bottom: 0;
}
.account-header__right {
display: table-cell;
vertical-align: middle;
text-align: right;
}
}
@media only screen and (min-width: 768px) and (max-width: 767px) {
.account-header__right {
margin-bottom: var(--inner);
}
}
/* ============================================================================
#Password Page
============================================================================== */
.template-password {
height: 100%;
text-align: center;
}
.password-section,
.password__wrapper {
width: 100%;
height: 100%;
}
.password__outer {
position: absolute;
width: 100%;
height: 100%;
}
.password__wrapper {
display: table;
position: relative;
color: var(--text-dark);
background-color: var(--primary);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-color: var(--text-dark);
}
.password__wrapper .password__footer__inner {
color: #FFF;
}
.password__wrapper a {
color: inherit;
}
.password__box,
.password__footer__inner {
position: relative;
z-index: 10;
}
.password__main {
display: table-row;
width: 100%;
height: 100%;
margin: 0 auto;
}
.password__main__inner {
display: table-cell;
vertical-align: middle;
padding: var(--gutter);
}
.password__box {
background-color: var(--bg);
max-width: 600px;
margin: 0 auto;
}
@media only screen and (max-width: 479px) {
.password__box {
padding: var(--gutter);
}
}
@media only screen and (min-width: 480px) {
.password__box {
padding: var(--gutter) 0;
}
}
.template-password .input-group--inner-button {
border: 1px solid var(--hairline);
}
.storefront-password-form {
margin-top: var(--gutter);
}
.password__hero {
font-family: var(--FONT-STACK-HEADING);
font-style: var(--FONT-STYLE-HEADING);
font-weight: var(--FONT-WEIGHT-HEADING);
letter-spacing: var(--FONT-HEADING-LETTER-SPACING);
text-transform: var(--FONT-HEADING-TRANSFORM);
font-size: calc(var(--font-10) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-tight);
line-height: 1.15;
letter-spacing: 0;
text-rendering: optimizelegibility;
padding-bottom: var(--gutter);
padding-top: var(--gutter);
}
.password__hero .logo {
max-width: 100%;
max-height: 200px;
}
.password__message {
padding-left: 15px;
padding-right: 15px;
font-size: 120%;
}
.password__message img {
max-width: 100%;
}
.password__hero,
.password__message,
.password__login-form,
.password__signup-form {
max-width: 500px;
margin: 0 auto;
}
.password__login-form {
text-align: center;
padding: var(--outer) var(--gutter);
}
.password__login-form,
.password__box {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
border-radius: var(--radius);
}
.password__login-form,
.password__signup-form {
background-color: var(--bg);
}
@media only screen and (min-width: 480px) {
.password__login-form,
.password__signup-form {
padding-left: var(--gutter);
padding-right: var(--gutter);
}
}
.password__login-form .input-group,
.password__signup-form .input-group {
width: 100%;
}
.password__login-form .errors ul,
.password__signup-form .errors ul {
list-style-type: none;
margin-left: 0;
}
.password__signup-form {
padding-top: var(--gutter);
}
.password__signup-form__heading {
margin-bottom: 0.8em;
}
.admin-login {
margin-top: var(--inner);
margin-bottom: 0;
font-size: 95%;
}
.admin-login a {
text-decoration: none;
}
.password__footer {
display: table-row;
height: 1px;
}
.password__footer__inner {
display: table-cell;
vertical-align: bottom;
padding: var(--gutter);
line-height: 1.5em;
font-size: 95%;
color: var(--COLOR-FOOTER-TEXT);
}
.password__footer__inner a,
.password__footer__inner .password__modal__button {
color: currentcolor;
text-decoration: none;
margin: 0 var(--inner);
}
@media only screen and (max-width: 767px) {
.password__footer__inner a,
.password__footer__inner .password__modal__button {
display: block;
margin-top: var(--inner);
}
}
.shopify-section.password-section + .shopify-section {
padding-top: 100vh;
}
html.no-js .password-section noscript {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* ================ Product Media ================ */
/* Desktop grid layout */
.product__grid {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
-moz-column-gap: var(--IMAGE-SPACING);
column-gap: var(--IMAGE-SPACING);
row-gap: var(--IMAGE-SPACING);
}
.wrapper--none .product__grid {
margin-left: var(--IMAGE-SPACING);
}
@media only screen and (max-width: 767px) {
.wrapper--none .product__grid {
margin-left: calc(var(--IMAGE-SPACING) * -1);
margin-right: calc(var(--IMAGE-SPACING) * -1);
}
}
.product__grid .product__media {
position: relative;
width: 100%;
}
/* this makes the mosaic effect */
@media only screen and (min-width: 768px) {
.product__grid--mosaic .product__media:first-child {
width: 100%;
}
}
@media only screen and (min-width: 1100px) {
.product__grid--columns .product__media,
.product__grid--mosaic .product__media {
width: calc(50% - var(--IMAGE-SPACING) / 2);
}
}
@media only screen and (min-width: 768px) and (max-width: 1099px) {
.product__grid--columns .product__media,
.product__grid--mosaic .product__media {
width: 100%;
}
}
.product__grid--columns .product__media:only-child,
.product__grid--mosaic .product__media:only-child {
margin-left: auto;
margin-right: auto;
}
.product__grid--columns .product__media > div,
.product__grid--mosaic .product__media > div {
width: 100%;
}
@media only screen and (min-width: 768px) {
.media__thumb__holder--mobile-only {
display: none;
}
}
.product__media[data-type=external_video] {
position: relative;
}
.product__media[data-type=external_video]:before {
left: 0;
}
.product__media[data-type=external_video]:after {
right: 0;
}
.product__media[data-type=external_video]:before, .product__media[data-type=external_video]:after {
content: "";
position: absolute;
top: 0;
bottom: 40px;
width: 33%;
z-index: 5;
display: none;
}
.enable-video-draggable .product__media[data-type=external_video]:before, .enable-video-draggable .product__media[data-type=external_video]:after {
display: block;
}
@media only screen and (min-width: 768px) {
.enable-video-draggable .product__media[data-type=external_video]:before, .enable-video-draggable .product__media[data-type=external_video]:after {
display: none;
}
}
.product__media.hide {
display: none !important;
}
.product__media__wrapper {
margin-bottom: 0;
}
.product__media__wrapper.one-whole {
margin-bottom: calc(var(--gutter) * 2);
}
.product__grid--slides {
position: relative;
font-size: 0;
overflow-y: hidden;
}
.product__grid--slides .flickity-viewport {
transition: height 0.4s;
}
.product__grid--slides .flickity-slider > * {
width: 100%;
}
@media only screen and (min-width: 768px) {
.product__grid--slides .flickity-slider > * {
opacity: 0 !important;
transition: opacity 1s ease !important;
}
.product__grid--slides .flickity-slider > *.is-selected {
opacity: 1 !important;
}
}
body.focus-enabled .product__grid--slides:focus .product__media.is-selected {
border: 1px solid var(--secondary);
}
@media only screen and (min-width: 768px) {
html.js .product__grid--slides:not(.flickity-enabled) > .product__media:not(:first-child) {
display: none;
}
}
@media only screen and (max-width: 767px) {
html.js .product__grid:not(.flickity-enabled) > .product__media:not(:first-child) {
display: none;
}
}
@media only screen and (min-width: 768px) {
.product__grid--slides.flickity-enabled .product__media:not(.is-selected) {
visibility: hidden;
}
}
/* Mobile carousel layout */
@media only screen and (max-width: 767px) {
.product__mobile--carousel {
margin-left: calc(var(--outer) * -1);
margin-right: calc(var(--outer) * -1);
width: calc(100% + var(--outer) * 2);
}
.wrapper--none .product__mobile--carousel {
margin-left: 0;
margin-right: 0;
width: 100%;
}
.wrapper--none .product__mobile--carousel .product__grid {
margin-left: 0;
margin-right: 0;
}
.product__mobile--carousel .product__media {
width: 85%;
margin-right: var(--IMAGE-SPACING);
}
.product__mobile--carousel .media__thumb__holder {
display: none;
}
.product__mobile--carousel .flickity-lock-height.flickity-enabled:not(:has(.flickity-viewport)) {
padding-bottom: calc(var(--default-ratio) * 0.85) !important;
flex-wrap: nowrap;
overflow-x: auto;
}
.product__mobile--carousel .flickity-lock-height.flickity-enabled > .product__media {
flex: 0 0 auto;
}
.product__mobile--carousel .flickity-lock-height .flickity-viewport {
padding-bottom: calc(var(--default-ratio) * 0.85) !important;
}
.product__mobile--slideshow .flickity-page-dots {
bottom: 20px;
right: 20px;
padding: 6px;
color: var(--text-dark);
z-index: 50;
-webkit-backdrop-filter: blur(40px);
backdrop-filter: blur(40px);
}
.product__mobile--slideshow .flickity-page-dots .flickity-page-dot {
background: var(--text);
}
.product__mobile--slideshow .flickity-page-dots:after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
border-radius: 4px;
background: var(--bg);
opacity: 0.3;
-webkit-backdrop-filter: blur(40px);
backdrop-filter: blur(40px);
transition: all 0.3s;
}
.product__mobile--slideshow .media__thumb__holder {
display: none;
}
.flickity-lock-height .flickity-viewport {
padding-bottom: var(--default-ratio);
}
.wrapper--none .product__mobile--thumbs .media__thumb:first-child {
margin-left: var(--IMAGE-SPACING);
}
.wrapper--none .product__mobile--thumbs .product__grid,
.wrapper--none .product__mobile--slideshow .product__grid {
margin-left: 0;
margin-right: 0;
}
}
.product__grid--slides.flickity-lock-height .flickity-viewport {
padding-bottom: var(--default-ratio);
}
/* No image state */
.product__image__placeholder {
width: 100%;
padding-top: 66%;
background-color: var(--hairline);
}
.product__inline__image--no-image,
.product__popdown__image--no-image div,
.product-no-image {
background-color: var(--hairline);
}
.product-no-image a {
display: block;
padding-top: 100%;
}
/* Images videos and 3d models */
.media__contain {
margin: 0 auto;
min-height: 1px;
width: 100%;
height: 0;
position: relative;
}
.shopify-model-viewer-ui,
model-viewer,
.media__contain .plyr--video,
.media__contain > video,
.media__contain > iframe {
width: 100%;
height: 100%;
position: absolute !important;
top: 0;
left: 0;
max-width: 100%;
/* IE FIX */
min-width: 100%;
min-height: 100%;
}
.shopify-model-viewer-ui__disabled {
pointer-events: none;
}
video::-webkit-media-controls-panel {
display: flex !important;
opacity: 1 !important;
}
.btn--ar {
width: 100%;
position: relative;
margin-top: 10px;
padding: 10px 15px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0;
}
[data-shopify-xr-hidden] {
width: 0;
padding: 0;
}
@media only screen and (min-width: 768px) {
[data-shopify-xr-hidden] {
display: none;
}
}
.btn--ar .icon {
display: inline-block;
height: 20px;
width: 20px;
color: currentcolor;
margin-right: 4px;
}
.btn--ar .icon path {
fill: inherit;
stroke: inherit;
}
.btn--ar .icon path.icon-media-model-outline {
stroke: none;
fill: none;
}
.btn--ar .icon path.icon-media-model-square {
stroke: none;
fill: none;
}
.btn--ar .icon path.icon-media-model-element {
fill: currentcolor;
opacity: 1;
}
.product-single__view-in-space-text {
display: inline-block;
vertical-align: middle;
}
.thumb--video,
.thumb--model {
position: relative;
}
/* zoom and aria buttons over product image -- additional styles in pswp */
.product-image-wrapper {
position: relative;
}
.media__buttons__holder {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: stretch;
}
@media only screen and (max-width: 767px) {
.media__buttons__holder {
opacity: 1;
}
}
.media__button {
flex: 0 0 auto;
position: relative;
width: 35px;
height: 35px;
max-width: 35px;
border-radius: 4px;
z-index: 60;
color: var(--text-dark);
padding: 5px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-backdrop-filter: blur(11px);
backdrop-filter: blur(11px);
}
.media__button:after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
border-radius: 4px;
background: var(--bg);
opacity: 0.3;
-webkit-backdrop-filter: blur(40px);
backdrop-filter: blur(40px);
transition: all 0.3s;
}
.media__button + .media__button {
margin-left: 10px;
}
.media__button--zoom {
cursor: zoom-in;
}
.media__button--info {
overflow: hidden;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
width: 35px;
max-width: 35px;
transition: width 0.4s, max-width 0.4s, opacity 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.media__button--info svg {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
}
.media__button--info svg path, .media__button--info svg g, .media__button--info svg circle {
stroke: var(--text-dark);
}
.media__button--info .icon-art-ruler {
left: 9px;
width: 18px;
}
.media__button--info.is-expanded {
width: auto;
max-width: calc(100% - 45px);
}
.media__button--info.is-expanded svg,
.media__button--info svg + svg {
opacity: 0;
}
.media__button--info.is-expanded svg + svg {
opacity: 1;
}
.product__grid--slides:hover .media__button,
.product__grid--slides:focus .media__button,
.product__media:hover .media__button,
.product__media:focus .media__button,
.product__media.is-expanded .media__button,
.media__button:focus-within {
opacity: 1;
}
.media__button svg {
font-size: 16px;
filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.2));
transition: opacity 0.2s;
}
.media__button__text {
font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
overflow: hidden;
position: relative;
z-index: 1;
display: inline-block;
padding: 6px 0 4px 25px;
border-radius: 0 3px 3px 0;
opacity: 0;
white-space: nowrap;
text-overflow: ellipsis;
}
.is-expanded .media__button__text {
width: 100%;
padding: 4px 5px 4px 25px;
color: var(--text-dark);
opacity: 1;
transition: opacity 0.2s 0.4s;
}
.pswp__counter {
color: var(--text-light);
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
}
/* removes media players from the tabindex when they are hidden */
body.focus-enabled .product__media:not(.is-selected) .plyr,
body.focus-enabled .product__media:not(.is-selected) model-viewer,
body.focus-enabled .product__media:not(.is-selected) .shopify-model-viewer-ui,
body.focus-enabled .product__media:not(.is-selected) .media__contain iframe {
display: none;
}
.product__media img,
.media__thumb img,
.cart__items__img,
.product__popdown__image img,
.sibling__image img,
img.product-clip__image__inner,
.product-grid-item__image,
.collection__products .float-grid img,
.collection__products .grid--full img {
filter: brightness(var(--PHOTO-CORRECTION));
}
/* Thumbnails */
.media__thumb__wrapper {
width: 100%;
display: block;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
scroll-behavior: smooth;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none;
touch-action: auto;
}
.media__thumb__wrapper::-webkit-scrollbar {
display: none;
}
.media__thumb__holder {
position: relative;
margin-top: var(--IMAGE-SPACING);
}
.no-js .media__thumb__holder {
display: none;
}
.media__thumb__holder .media__thumb__button {
height: 60px;
width: 30px;
position: absolute;
z-index: 1;
opacity: 1;
transition: opacity 0.2s;
top: 0;
}
.media__thumb__holder .media__thumb__button:not(.show) {
opacity: 0;
pointer-events: none;
}
.media__thumb__holder .media__thumb__button svg {
position: absolute;
top: 50%;
transform: translateY(-50%);
transform-origin: center;
}
.media__thumb__holder .media__thumb__button path {
stroke: currentcolor;
}
.media__thumb__holder [data-thumbs-arrow-prev] {
left: 0;
background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--bg) 40%);
}
.media__thumb__holder [data-thumbs-arrow-next] {
right: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--bg) 40%);
}
.media__thumb__holder [data-thumbs-arrow-prev] svg {
left: 0;
transform: translateY(-50%) rotate(-90deg);
}
.media__thumb__holder [data-thumbs-arrow-next] svg {
right: 0;
transform: translateY(-50%) rotate(-90deg);
}
.media__thumb {
position: relative;
display: inline-block;
padding: 0;
cursor: pointer;
width: 60px;
height: 60px;
margin: 0 var(--IMAGE-SPACING) var(--IMAGE-SPACING) 0;
}
.media__thumb.hide {
display: none !important;
}
.media__thumb:last-child {
margin-right: 0;
}
.media__thumb:after {
content: "";
position: absolute;
bottom: -4px;
left: 50%;
width: 0;
height: 100%;
border-bottom: 2px solid var(--border);
pointer-events: none;
transform: translateX(-50%);
transition: width 0.3s;
}
.media__thumb.is-activated:after {
width: 100%;
}
.media__thumb img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.media__thumb .icon {
position: absolute;
top: 2px;
right: 2px;
margin: 0;
height: 20px;
width: 20px;
color: transparent;
fill: var(--COLOR-BG);
vertical-align: baseline;
}
.media__thumb .icon path {
fill: inherit;
stroke: inherit;
}
.media__thumb .icon path.icon-media-model-outline, .media__thumb .icon path.icon-media-video-outline {
stroke: var(--COLOR-A5);
}
.media__thumb .icon path.icon-media-model-element, .media__thumb .icon path.icon-media-video-element {
fill: var(--COLOR-TEXT-DARK);
}
[data-thumbnails-left] .media__thumb__holder {
width: 100%;
}
.no-js [data-thumbnails-left] .media__thumb__holder {
display: none;
}
@media only screen and (min-width: 768px) {
[data-thumbnails-left] {
align-items: flex-start;
}
[data-thumbnails-left] .media__thumb__holder {
top: 0;
overflow: hidden;
position: relative;
order: -1;
margin-right: var(--gutter);
flex: 0 0 calc(60px + var(--IMAGE-SPACING));
width: calc(60px + var(--IMAGE-SPACING));
margin-top: 0;
margin-right: 0;
}
[data-thumbnails-left] .media__thumb__wrapper {
position: absolute;
top: 0;
left: 0;
overflow-y: auto;
overflow-x: hidden;
max-height: 100%;
white-space: normal;
transition: height 0.3s;
}
[data-thumbnails-left] .product__media__wrapper {
display: flex;
justify-content: flex-end;
}
[data-thumbnails-left] .product__grid--slides {
flex: 1 1 auto;
}
[data-thumbnails-left] .media__thumb .icon {
left: 2px;
right: auto;
}
[data-thumbnails-left] .media__thumb img {
height: 60px;
width: 60px;
}
[data-thumbnails-left] .media__thumb__holder .media__thumb__button {
height: 30px;
width: 60px;
left: 0;
right: 0;
transform: rotate(0);
}
[data-thumbnails-left] .media__thumb__holder [data-thumbs-arrow-prev] {
top: 0;
background: linear-gradient(to top, rgba(255, 255, 255, 0), var(--bg) 40%);
}
[data-thumbnails-left] .media__thumb__holder [data-thumbs-arrow-next] {
bottom: 0;
top: auto;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bg) 40%);
}
[data-thumbnails-left] .media__thumb__holder .media__thumb__button svg {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
[data-thumbnails-left] .media__thumb__holder [data-thumbs-arrow-prev] svg {
transform: translateX(-50%);
}
[data-thumbnails-left] .media__thumb__holder [data-thumbs-arrow-next] svg {
bottom: 0;
top: auto;
}
}
.pickup__preview {
margin: 0;
}
.pickup__preview p {
margin: 0;
}
.pickup__info__timing {
font-style: italic;
}
.pickup__preview--primary {
display: flex;
align-items: flex-start;
}
.pickup__preview--primary button.pickup__button {
margin-left: 4px;
font-style: italic;
}
@media only screen and (min-width: 768px) {
.pickup__drawer {
--gutter: 20px;
}
}
.pickup__address {
font-style: normal;
margin: 8px 0 0 0;
padding: 0 0 0 15px;
border-left: 3px solid var(--bg-accent);
}
.pickup__content {
overflow-y: auto;
}
.pickup__header {
display: flex;
margin: 0;
padding: var(--gutter);
align-items: center;
height: auto;
position: sticky;
top: 0;
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.pickup__header .drawer__button {
padding-right: 0;
}
.pickup__header__title {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
}
.pickup__header__title p {
margin: 0;
}
.pickup__product__wrap {
background-color: var(--bg-accent);
padding: var(--gutter);
text-align: center;
}
.pickup__product__title {
font-size: calc(var(--font-6) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-snug);
font-family: var(--FONT-STACK-BODY);
font-style: var(--FONT-STYLE-BODY);
font-weight: var(--FONT-WEIGHT-BODY);
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
letter-spacing: var(--FONT-BODY-LETTER-SPACING);
text-transform: var(--FONT-BODY-TRANSFORM);
margin: 0;
}
.pickup__variant {
font-style: italic;
color: var(--text-light);
margin: 3px 0 0 0;
}
.pickup__drawer-button {
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 20px;
padding: 0;
font-size: 0;
}
.pickup__drawer-button svg {
font-size: 16px;
}
.pickup__drawer__body {
padding: 0;
}
.pickup__list {
padding: var(--gutter);
margin: 0;
}
.pickup__list__item {
margin-bottom: 32px;
}
.pickup__list__item p {
margin: 2px 0;
}
.pickup__list__item + .pickup__list__item {
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid var(--bg-accent);
}
.plyr.plyr--full-ui.plyr--video {
color: var(--COLOR-TEXT-DARK);
background-color: transparent;
/* Fullscreen */
/* stylelint-disable-next-line */
/* stylelint-disable-next-line */
/* stylelint-disable-next-line */
/* Fallback for unsupported browsers */
}
body:not(.focus-enabled) .plyr.plyr--full-ui.plyr--video {
outline: none;
}
.plyr.plyr--full-ui.plyr--video .plyr__video-wrapper {
background-color: transparent;
}
.plyr.plyr--full-ui.plyr--video .plyr__poster {
background-color: var(--COLOR-VIDEO-BG);
}
.plyr.plyr--full-ui.plyr--video:fullscreen .plyr__video-wrapper .plyr.plyr--full-ui.plyr--video:fullscreen .plyr__poster {
background-color: #000;
}
.plyr.plyr--full-ui.plyr--video:-webkit-full-screen .plyr__video-wrapper, .plyr.plyr--full-ui.plyr--video:-webkit-full-screen .plyr__poster {
background-color: #000;
}
.plyr.plyr--full-ui.plyr--video:-moz-full-screen .plyr__video-wrapper, .plyr.plyr--full-ui.plyr--video:-moz-full-screen .plyr__poster {
background-color: #000;
}
.plyr.plyr--full-ui.plyr--video:-ms-fullscreen .plyr__video-wrapper, .plyr.plyr--full-ui.plyr--video:-ms-fullscreen .plyr__poster {
background-color: #000;
}
.plyr.plyr--full-ui.plyr--video .plyr--fullscreen-fallback .plyr__video-wrapper,
.plyr.plyr--full-ui.plyr--video .plyr--fullscreen-fallback .plyr__poster {
background-color: #000;
}
.plyr.plyr--full-ui.plyr--video .plyr__control.plyr__control--overlaid {
background-color: #FFFFFF;
border-color: var(--COLOR-A5);
}
.plyr.plyr--full-ui.plyr--video .plyr__control.plyr__control--overlaid.plyr__tab-focus, .plyr.plyr--full-ui.plyr--video .plyr__control.plyr__control--overlaid:hover {
color: var(--COLOR-A50);
}
.plyr.plyr--full-ui.plyr--video .plyr__controls {
background-color: #FFFFFF;
border-color: var(--COLOR-A5);
}
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-moz-range-thumb {
box-shadow: 2px 0 0 0 #FFFFFF;
}
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-ms-thumb {
box-shadow: 2px 0 0 0 #FFFFFF;
}
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-webkit-slider-thumb {
box-shadow: 2px 0 0 0 #FFFFFF;
}
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-webkit-slider-runnable-track {
background-image: linear-gradient(to right, currentColor var(--value, 0), var(--COLOR-A50) var(--value, 0));
}
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-moz-range-track {
background-color: var(--COLOR-A50);
}
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-ms-fill-upper {
background-color: var(--COLOR-A50);
}
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
box-shadow: 0 0 0 4px var(--COLOR-A20);
}
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range].plyr__tab-focus::-moz-range-track {
box-shadow: 0 0 0 4px var(--COLOR-A20);
}
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range].plyr__tab-focus::-ms-track {
box-shadow: 0 0 0 4px var(--COLOR-A20);
}
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]:active::-moz-range-thumb {
box-shadow: 0 0 0 3px var(--COLOR-A20);
}
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]:active::-ms-thumb {
box-shadow: 0 0 0 3px var(--COLOR-A20);
}
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]:active::-webkit-slider-thumb {
box-shadow: 0 0 0 3px var(--COLOR-A20);
}
.plyr.plyr--full-ui.plyr--video .plyr__progress .plyr__tooltip {
background-color: var(--COLOR-TEXT-DARK);
color: #FFFFFF;
}
.plyr.plyr--full-ui.plyr--video .plyr__progress .plyr__tooltip::before {
border-top-color: var(--COLOR-TEXT-DARK);
}
.plyr.plyr--full-ui.plyr--video.plyr--loading .plyr__progress__buffer {
background-image: linear-gradient(-45deg, var(--COLOR-A50) 25%, transparent 25%, transparent 50%, var(--COLOR-A50) 50%, var(--COLOR-A50) 75%, transparent 75%, transparent);
}
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range] {
color: #FFFFFF;
}
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]::-moz-range-thumb {
box-shadow: 2px 0 0 0 var(--COLOR-TEXT-DARK);
}
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]::-ms-thumb {
box-shadow: 2px 0 0 0 var(--COLOR-TEXT-DARK);
}
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]::-webkit-slider-thumb {
box-shadow: 2px 0 0 0 var(--COLOR-TEXT-DARK);
}
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]::-webkit-slider-runnable-track {
background-image: linear-gradient(to right, currentColor var(--value, 0), rgba(255, 255, 255, 0.6) var(--value, 0));
}
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]::-moz-range-track, .plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]::-ms-fill-upper {
background-color: rgba(255, 255, 255, 0.6);
}
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range].plyr__tab-focus::-moz-range-track {
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range].plyr__tab-focus::-ms-track {
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]:active::-moz-range-thumb {
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]:active::-ms-thumb {
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]:active::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
.popup {
position: relative;
}
.popup .popup__inner {
position: fixed;
bottom: 0;
display: none;
max-width: 400px;
width: calc(100% - var(--outer) * 2);
padding: 32px;
margin: var(--outer);
background: inherit;
box-shadow: 0 0 10px var(--COLOR-A5);
}
#challenge .popup {
display: none !important;
}
.popup:not([data-promo-text]) {
z-index: 9999;
transition: z-index 0.3s, opacity 0.3s, visibility 0.3s;
}
[data-scroll-locked] .popup:not([data-promo-text]) {
z-index: -1;
visibility: hidden;
opacity: 0 !important;
pointer-events: none;
}
.popup form,
.popup .input-group {
margin-bottom: 0;
}
.popup .standard__cta:not(.btn--block) {
margin: 0;
}
.popup .standard__cta:not(.btn--block) + .standard__cta {
margin-left: 12px;
}
.popup .popup__title {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-4) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
margin: 0 0 10px;
}
.popup p a {
text-decoration: underline;
}
.popup p a:hover {
text-decoration: none;
}
.popup .popup__inner > *:first-child {
padding-right: 35px;
}
.popup p {
font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
margin-bottom: 15px;
}
.popup p:first-child:nth-last-child(2) {
margin: 0;
}
.popup .popup__inner p:nth-child(2) {
position: relative;
padding-top: 17px;
}
.popup .popup__inner p:nth-child(2):before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 2px;
width: 20px;
background-color: currentcolor;
opacity: 0.3;
}
.popup button + a {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
margin-left: 10px;
}
.popup .close {
position: absolute;
top: 0;
right: 0;
padding: 28px 28px 11px 11px;
color: inherit;
font-size: 0;
}
.popup .close:hover svg {
transform: rotate(90deg);
}
.popup .close svg {
font-size: 16px;
transition: transform 0.3s;
}
.popup.popup--left .popup__inner {
left: 0;
}
.popup.popup--right .popup__inner {
right: 0;
}
.popup.popup--bottom .popup__inner {
left: 0;
right: 0;
bottom: 0;
flex-flow: row wrap;
justify-content: center;
align-items: center;
max-width: none;
width: auto;
padding: 10px 36px;
margin: 0;
}
.popup.popup--bottom .popup__inner[style*=block] {
display: flex !important;
}
.popup.popup--bottom .popup__inner .close {
top: 50%;
padding: 20px;
transform: translateY(-50%);
}
.popup.popup--bottom .popup__inner > *:first-child,
.popup.popup--bottom .popup__inner p,
.popup.popup--bottom .popup__inner p:nth-child(2) {
margin: 5px 8px;
font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
}
.popup.popup--bottom .popup__inner > *:first-child:before,
.popup.popup--bottom .popup__inner p:before,
.popup.popup--bottom .popup__inner p:nth-child(2):before {
display: none;
}
.popup.popup--bottom .popup__inner > button:not(.close),
.popup.popup--bottom .popup__inner > a:not(.btn):not(.shopify-challenge__button) {
margin: 5px 8px;
}
.popup.popup--bottom .popup__inner > *:first-child,
.popup.popup--bottom .popup__inner p,
.popup.popup--bottom .popup__inner p:nth-child(2),
.popup.popup--bottom .popup__inner > a:not(.btn):not(.shopify-challenge__button) {
padding: 0;
}
.popup.popup--center .popup__inner {
top: 50%;
left: 50%;
bottom: auto;
margin: 0;
max-width: 350px;
text-align: center;
transform: translate(-50%, -50%);
}
.popup.popup--center .popup__inner > *:first-child {
padding-left: 35px;
}
.popup.popup--center .popup__inner p:nth-child(2):before {
left: 50%;
transform: translateX(-50%);
}
@media only screen and (max-width: 767px) {
.popup:not(.popup--center) .popup__inner {
max-width: none;
bottom: 60px;
}
.popup.popup--bottom .popup__inner {
left: var(--outer);
right: var(--outer);
}
.popup.popup--bottom .popup__inner .close {
top: 0;
padding: 15px;
transform: none;
}
.popup:not(.popup--center):first-child:last-child .popup__inner {
bottom: var(--outer);
}
}
[data-popup-delay].desktop {
display: block;
}
@media only screen and (max-width: 767px) {
[data-popup-delay].desktop {
display: none;
}
}
[data-popup-delay].mobile {
display: none;
}
@media only screen and (max-width: 767px) {
[data-popup-delay].mobile {
display: block;
}
}
[data-promo-text][data-popup-delay=always],
[data-popup-delay=always] > * {
z-index: 9995;
}
[data-promo-text][data-popup-delay=delay],
[data-popup-delay=delayed] > * {
z-index: 9994;
}
[data-popup-delay]:not([data-popup-delay=always]):not([data-popup-delay=delayed]):not([data-tracking-consent]) {
z-index: 9992;
}
.upsell__holder {
text-align: center;
border: 1px solid var(--border);
position: relative;
margin-top: 40px;
}
.upsell__holder.js-unloaded {
display: none;
}
.upsell__holder__title {
position: absolute;
width: 100%;
pointer-events: none;
}
.upsell__holder__title .upsell__holder__title__text {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
display: inline-block;
padding: 0 10px;
transform: translateY(-80%);
background-color: var(--bg);
}
.product-clip {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
padding: var(--inner);
text-align: left;
}
.quickview + .quickview .product-clip {
padding-top: 0;
}
.product-clip__image {
min-width: 90px;
width: 90px;
margin-right: 10px;
}
.product-clip__image > a {
display: block;
transition: opacity 0.3s;
}
.product-clip__image > a:hover {
opacity: 0.7;
}
.product-clip__image__inner--onboarding {
height: 90px;
background-color: var(--bg-accent);
}
.product-clip__content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
min-height: 90px;
}
.product-clip__content .shopify-product-form {
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.product-clip__title,
.product-clip__variant-title,
.product-clip__price {
margin-top: 0;
margin-bottom: 4px;
}
.product-clip__title {
font-family: var(--FONT-STACK-BODY);
font-style: var(--FONT-STYLE-BODY);
font-weight: var(--FONT-WEIGHT-BODY);
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
letter-spacing: var(--FONT-BODY-LETTER-SPACING);
text-transform: var(--FONT-BODY-TRANSFORM);
font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
color: var(--text-dark);
}
.product-clip__variant-title {
font-family: var(--FONT-STACK-BODY);
font-style: var(--FONT-STYLE-BODY);
font-weight: var(--FONT-WEIGHT-BODY);
letter-spacing: var(--FONT-BODY-LETTER-SPACING);
text-transform: var(--FONT-BODY-TRANSFORM);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
display: none;
}
.product-clip__price {
font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
color: var(--text-light);
}
.product-clip__price .old-price {
margin-left: 8px;
text-decoration: line-through;
}
.product-clip__price .unit {
color: var(--text-light);
}
.product-clip__btn {
white-space: normal;
line-height: normal;
padding: 1em 2em;
}
.product-clip__btn:disabled {
opacity: 1;
}
.product-clip__btn .svg-loader circle {
stroke: var(--bg);
}
.product-clip__btn .svg-loader circle ~ circle {
stroke: var(--primary);
}
.product-clip__out-of-stock {
margin: 0;
}
.quickview__form__wrapper {
overflow: hidden;
max-height: 0;
transition: max-height 0.4s, padding 0.4s;
}
.quickview__form__wrapper.is-expanded {
overflow: visible;
max-height: 100vh;
padding-top: 0;
}
.quickview__form__wrapper.loading {
transition: max-height 0s, padding 0s;
}
.quickview__form {
position: sticky;
bottom: 0;
z-index: 100;
margin: 0;
padding: 24px;
background-color: var(--bg);
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06), 0 3px 12px rgba(0, 0, 0, 0.02);
}
.quickview__form .product__align-left .shopify-product-form {
margin: 0 auto;
}
.quickview__form__toggle {
position: absolute;
top: calc(var(--gutter) / -2);
left: 50%;
z-index: 1;
padding: calc(var(--gutter) / 2);
border-radius: 4px 4px 0 0;
background-color: var(--bg);
color: var(--text-dark);
transform: translate(-50%, -50%);
}
.quickview__form__toggle.btn:focus, .quickview__form__toggle.shopify-challenge__button:focus, .quickview__form__toggle.btn:active, .quickview__form__toggle.shopify-challenge__button:active, .quickview__form__toggle.btn:hover, .quickview__form__toggle.shopify-challenge__button:hover {
background-color: var(--bg);
color: var(--text-dark);
}
.quickview__form__toggle span, .quickview__form__toggle.is-active span + span {
display: none;
}
.quickview__form__toggle span + span, .quickview__form__toggle.is-active span {
display: block;
}
.quickview__form__toggle.standard__cta {
margin-left: 0;
margin-right: 0;
}
.quickview__modal .drawer__body {
display: flex;
flex-wrap: wrap;
}
.quickview__modal .drawer__body > * {
flex: 0 1 100%;
}
.quickview__modal .product__title {
font-size: calc(var(--font-7) * var(--FONT-ADJUST-HEADING));
line-height: var(--leading-snug);
}
.quickview__modal .product__price {
font-size: calc(16px * var(--FONT-ADJUST-BODY));
vertical-align: bottom;
}
.quickview__modal .product__submit {
position: relative;
z-index: 2;
}
.quickview__modal .product__block__title {
margin-bottom: 0;
}
.quickview__modal .product__form__outer {
margin-bottom: 0;
}
.quickview__modal .selector-wrapper {
margin-top: 14px;
margin-bottom: 0;
text-align: left;
}
.quickview__modal .form__selectors {
padding-bottom: 14px;
}
.quickview__modal .product__block__subscription {
padding-bottom: 14px;
}
.quickview__modal .product__media {
width: 100%;
margin-bottom: 20px;
}
.quickview__modal .product__media:last-child {
margin-bottom: 0;
}
.quickview__modal .product__submit__buttons {
margin-bottom: 0;
}
.quickview__modal .product__submit__buttons--clear {
margin: var(--gutter) 0;
}
@media only screen and (max-width: 767px) {
.quickview__modal .media__button {
display: none;
}
.quickview__modal .product__submit__buttons {
margin-bottom: 14px;
}
.quickview__modal .product__submit__buttons--clear {
margin: 14px 0;
}
}
.quickview__modal__top {
border: none;
height: auto;
}
.quickview__modal__top .drawer__top__left {
display: block;
height: auto;
padding: var(--gutter);
}
.quickview__modal__top .product__block__price {
padding-top: calc(var(--inner) / 2);
}
.quickview button {
position: relative;
}
.quickview button.loading .btn-state-ready {
color: transparent;
pointer-events: none;
}
.quickview button.loading .btn-state-loading {
visibility: visible;
}
.rating__wrapper__title {
margin-top: 2px;
font-family: var(--FONT-STACK-BODY);
font-style: var(--FONT-STYLE-BODY);
font-weight: var(--FONT-WEIGHT-BODY);
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
letter-spacing: var(--FONT-BODY-LETTER-SPACING);
text-transform: var(--FONT-BODY-TRANSFORM);
font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
}
.product__rating {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: nowrap;
}
.product__rating__count {
color: var(--text-light);
}
.product__rating__star:before {
content: "★";
color: var(--primary);
margin: 0 4px;
}
/* Product grid item reviews */
.product__grid__title__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.rating__wrapper__grid {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
}
.product__grid__info.text-center .product__grid__title__wrapper {
justify-content: center;
flex-direction: column;
}
.product__grid__info.text-right .product__grid__title__wrapper {
flex-direction: row-reverse;
}
/* Search reviews */
.rating__wrapper__search {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-4) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
}
.rating__wrapper__search .product__rating {
justify-content: flex-start;
}
/* ============================================================================
#Recipient Form
============================================================================== */
.recipient-form input[type=checkbox]:checked ~ .recipient-fields {
display: block;
}
.js .recipient-form .recipient-fields {
display: none;
}
:root {
--form-top: 14px;
--form-left: 20px;
}
.select-popout {
position: relative;
padding: 0;
text-align: left;
}
.select-popout > .quantity-selector {
display: none;
}
.select-popout.popout-container--alt > *:not(.quantity-selector) {
display: none;
}
.select-popout.popout-container--alt > .quantity-selector {
display: block;
}
.select-popout__toggle {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
width: 100%;
padding: var(--form-top) 28px var(--form-top) var(--form-left);
border: 1px solid var(--border);
border-radius: 3px;
line-height: 1.3;
color: var(--text-dark);
text-align: inherit;
white-space: nowrap;
text-overflow: ellipsis;
}
.select-popout__toggle[aria-expanded=true] {
border-radius: 3px 3px 0 0;
}
.select-popout__toggle svg {
position: absolute;
right: 12px;
transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
font-size: 1.4em;
background: var(--bg);
}
.select-popout__toggle[aria-expanded=true] svg {
transform: rotate(180deg);
}
.drawer__content .select-popout__toggle[aria-expanded=true] {
border-radius: 0 0 3px 3px;
}
.select-popout__list {
position: absolute;
top: 100%;
left: 0;
z-index: 1001;
overflow-x: hidden;
overflow-y: auto;
max-height: 350px;
width: 100%;
border: 1px solid var(--border);
border-top: none;
margin: -1px 0 0;
padding-left: 0;
background: var(--bg);
list-style: none outside none;
opacity: 0;
visibility: hidden;
height: 0;
pointer-events: none;
transition: opacity 0.4s, visibility 0.4s;
}
.select-popout__list.popout-list--visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
height: auto;
}
.drawer__content .select-popout__list {
margin: 0 0 -1px;
top: unset;
bottom: 100%;
border-top: 1px solid var(--border);
border-bottom: none;
}
.select-popout__list .sold-out,
.select-popout__list .unavailable {
text-decoration: line-through;
}
.select-popout__item {
display: block;
margin-bottom: 0;
}
.select-popout__item--current .select-popout__option {
background: var(--COLOR-A5);
}
.select-popout__option {
display: block;
padding: var(--form-top) var(--form-left);
color: var(--text-dark);
transition: background 0.4s;
}
.select-popout__option:hover {
background: var(--COLOR-A5);
}
.select-popout--small {
max-width: 120px;
}
.select-popout__option:not(.sold-out):not(.unavailable):not(:disabled) .visually-hidden, .select-popout__option:not(.sold-out):not(.unavailable):not(:disabled) [data-shopify-xr-hidden],
input:not(.sold-out):not(.unavailable):not(:disabled) ~ label .visually-hidden:not(.value),
input:not(.sold-out):not(.unavailable):not(:disabled) ~ label [data-shopify-xr-hidden]:not(.value) {
display: none;
}
/*================ Siblings - PDP ================*/
:root {
--OPTION-SIZE-SIBLING: 50px;
}
.product__page__siblings {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
.siblings__link[aria-selected=true] .sibling__image:after {
content: "";
position: absolute;
top: -5px;
left: -5px;
width: var(--OPTION-SIZE-SIBLING);
height: var(--OPTION-SIZE-SIBLING);
min-width: var(--OPTION-SIZE-SIBLING);
border: 2px solid var(--text);
z-index: 10;
}
.siblings__link[aria-selected=true] .sibling__image {
border: 5px solid var(--bg);
}
.siblings__link--sold-out .sibling__image:before {
content: "";
position: absolute;
top: 0;
left: 50%;
z-index: 2;
width: 2px;
height: 100%;
border-radius: 0;
background: var(--text);
margin-left: -1px;
transform: rotate(45deg);
}
.siblings__swatch {
overflow: hidden;
margin-right: 10px;
margin-bottom: 10px;
}
.siblings__link:last-child .siblings__swatch {
margin-right: 0;
}
.sibling__image {
display: block;
position: relative;
width: var(--OPTION-SIZE-SIBLING);
height: var(--OPTION-SIZE-SIBLING);
min-width: var(--OPTION-SIZE-SIBLING);
}
.sibling__image img, .sibling__image:after {
border-radius: var(--swatch-border-radius, 100%);
}
.sibling__image--square {
--swatch-border-radius: 0;
}
/*================ Siblings - PGI ================*/
.product__grid__sibs {
position: relative;
overflow: hidden;
}
.product__grid__sibs .sibling__image {
width: 26px;
height: 26px;
min-width: 26px;
}
.product__grid__sibs .siblings__link[aria-selected=true] .sibling__image,
.product__grid__sibs .siblings__link:focus .sibling__image {
border: 5px solid var(--bg);
}
.product__grid__sibs .siblings__link[aria-selected=true] .sibling__image:after,
.product__grid__sibs .siblings__link:focus .sibling__image:after {
content: "";
position: absolute;
top: -5px;
left: -5px;
width: 26px;
height: 26px;
min-width: 26px;
border: 2px solid var(--text);
z-index: 10;
}
.product__grid__sibs .siblings__link__holder {
padding: 0 10px 10px 0;
}
.text-right .product__grid__sibs .siblings__link__holder {
padding: 0 0 10px 10px;
}
.text-center .product__grid__sibs .siblings__link__holder {
padding: 0 5px 10px;
}
.product__grid__sibs .siblings__swatch {
margin: 0;
}
.siblings__link__holder.sold-out .siblings__link {
position: relative;
}
.siblings__link__holder.sold-out .siblings__link:before {
content: "";
position: absolute;
top: 0;
left: 50%;
z-index: 2;
width: 2px;
height: 100%;
border-radius: 0;
background: var(--text);
margin-left: -1px;
transform: rotate(45deg);
}
.sibs__slider {
position: relative;
overflow: hidden;
}
.sibs__inner {
overflow-x: auto;
position: relative;
display: flex;
flex-flow: row nowrap;
max-width: 100%;
padding: 0 0 32px;
margin-bottom: -32px;
}
a.siblings__more-link {
display: flex;
align-items: center;
line-height: 1em;
padding: 0 10px 10px 0;
}
.custom-scrollbar {
clear: both;
position: relative;
display: none;
width: 100%;
height: 4px;
padding: 0;
border-radius: 2px;
background-color: var(--bg-accent);
}
.custom-scrollbar + .custom-scrollbar {
margin-top: max(var(--gutter), 20px);
}
.bg--accent .custom-scrollbar {
background-color: var(--hairline);
}
.custom-scrollbar.hide {
display: none !important;
}
.custom-scrollbar.both {
display: block !important;
}
.custom-scrollbar--offset {
width: calc(100% - var(--gutter) * 2);
margin: 0 var(--gutter);
}
.custom-scrollbar__track {
position: absolute;
top: 0;
left: 0;
width: var(--track-width);
height: 100%;
border-radius: 2px;
background-color: var(--border);
transform: translateX(var(--position));
transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
will-change: transform;
}
/*================ Share ================*/
.share-holder {
position: relative;
z-index: 999;
display: block;
width: 100%;
margin-bottom: 36px;
}
.share-holder .is-hidden {
display: none !important;
}
.share-holder svg {
margin-right: 8px;
vertical-align: middle;
font-size: 18px;
}
.share-holder .is-hidden + .field__input {
display: block;
}
.share__details {
position: relative;
width: 100%;
}
.share-button__fallback {
position: absolute;
top: 100%;
left: 0;
z-index: 9999;
width: 100%;
border: none;
border-radius: var(--radius-sm);
background-color: var(--bg-accent);
}
@media only screen and (max-width: 767px) {
.share-button__fallback {
margin-top: 5px;
}
}
.share-button__fallback .field__input {
overflow: hidden;
display: none;
margin: 0;
background: none;
border: none;
width: 100%;
box-sizing: border-box;
white-space: nowrap;
text-overflow: ellipsis;
}
.share-button__fallback .field__input,
.share-button__message {
padding: 8px 60px 8px 10px;
line-height: var(--leading-normal);
}
.share__button {
font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY));
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
position: relative;
display: flex;
align-items: center;
width: 100%;
cursor: pointer;
white-space: normal;
text-align: left;
list-style: none;
padding-top: 25px;
padding-bottom: 8px;
}
.share-button__copy,
.share-holder .is-hidden {
display: none;
}
.is-hidden + .share-button__copy,
.share-button__close {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.share-button__copy,
.share-button__close {
position: absolute;
top: 50%;
right: 10px;
border: none;
outline: none;
transform: translateY(-50%);
}
.share-button__copy svg,
.share-button__close svg {
margin-right: 0;
}
.share-button__close svg {
font-size: 24px;
}
.share-button__message {
display: block;
font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY));
font-family: var(--FONT-STACK-BODY);
font-weight: var(--FONT-WEIGHT-BODY);
color: var(--text);
}
.share-button__message.is-hidden {
padding: 0;
}
/* product version only */
.product__block__share .share__button {
padding-top: 0;
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
}
.section-carousel > div {
position: relative;
}
.section-carousel__header {
overflow: hidden;
display: flex;
flex-flow: row wrap;
margin-bottom: var(--gutter);
--offset: 50px;
}
@media only screen and (min-width: 480px) {
.section-carousel__header {
padding-left: var(--offset);
padding-right: var(--offset);
}
.title-left .section-carousel__header {
padding-left: 0;
padding-right: calc(var(--offset) * 2);
}
}
.title-center .section-carousel__header {
justify-content: center;
text-align: center;
}
.title-left .section-carousel__header {
justify-content: flex-start;
}
.title-left .section-carousel__header .kicker-flourished:after {
right: auto;
}
.product-item {
width: 100%;
padding-bottom: calc(var(--gutter) / 2);
text-align: center;
}
.product-item > a:not([class]) {
position: relative;
display: block;
padding-top: 100%;
text-decoration: none;
}
.product-item .product-no-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
}
.product-item__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center 0;
}
.product-item__title,
.product-item__price,
.product-item__link {
word-break: break-word;
}
.product-item__title {
font-family: var(--FONT-STACK-BODY);
font-style: var(--FONT-STYLE-BODY);
font-weight: var(--FONT-WEIGHT-BODY);
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
letter-spacing: var(--FONT-BODY-LETTER-SPACING);
text-transform: var(--FONT-BODY-TRANSFORM);
font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
margin: 12px 0 6px 0;
}
.product-item__price {
font-family: var(--FONT-STACK-ACCENT);
font-style: var(--FONT-STYLE-ACCENT);
font-weight: var(--FONT-WEIGHT-ACCENT);
text-transform: var(--FONT-ACCENT-TRANSFORM);
letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT));
line-height: var(--leading-normal);
margin: 0 0 6px;
color: var(--text-light);
letter-spacing: 1px;
}
.product-item__link {
font-family: var(--FONT-STACK-BODY);
font-style: var(--FONT-STYLE-BODY);
font-weight: var(--FONT-WEIGHT-BODY);
letter-spacing: var(--FONT-BODY-LETTER-SPACING);
text-transform: var(--FONT-BODY-TRANSFORM);
font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
line-height: var(--leading-normal);
position: relative;
margin: 0;
}
.product-item__link:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
width: 100%;
height: 1px;
background-color: currentcolor;
transform: translateX(-50%);
transition: width 0.2s;
}
.product-item__link:hover:after {
width: 0;
}
@media only screen and (max-width: 767px) {
.product-item__link {
font-family: var(--TYPE-STACK-BUTTON);
font-style: var(--TYPE-STYLE-BUTTON);
font-weight: var(--TYPE-WEIGHT-BUTTON);
text-transform: var(--FONT-BUTTON-TRANSFORM);
letter-spacing: var(--FONT-BUTTON-LETTER-SPACING);
display: inline-block;
padding: var(--space-5) var(--space-8);
margin: 0;
line-height: 1;
text-decoration: none;
text-align: center;
vertical-align: middle;
border: none;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: var(--BUTTON-RADIUS);
display: block;
width: 100%;
background-color: var(--COLOR-PRIMARY);
color: var(--COLOR-PRIMARY-OPPOSITE);
}
.product-item__link:hover {
background-color: var(--COLOR-PRIMARY-HOVER);
color: var(--COLOR-PRIMARY-OPPOSITE);
}
.product-item__link:after {
display: none;
}
}
.section-look {
overflow: hidden;
--padding-top: var(--PT, 0);
--padding-bottom: var(--PB, 0);
position: relative;
padding: var(--padding-top) 0 var(--padding-bottom);
}
.section-look .look {
position: relative;
}
.section-look [data-grid] {
max-width: 100%;
}
.look__dot__holder {
position: absolute;
z-index: 1;
width: 23px;
height: 23px;
box-shadow: 0 0 0 10px var(--bg) inset, 0 0 6px rgba(0, 0, 0, 0.2);
background-color: rgba(255, 255, 255, 0);
border-radius: 50%;
font-size: 0;
transform: translate(-50%, -50%);
top: var(--DOT-TOP-DESKTOP);
left: var(--DOT-LEFT-DESKTOP);
}
@media only screen and (max-width: 767px) {
.look__dot__holder {
top: var(--DOT-TOP-MOBILE);
left: var(--DOT-LEFT-MOBILE);
}
}
.look__dot__holder:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 36px;
height: 36px;
opacity: 0;
border: 1px solid var(--bg);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: opacity 0.2s, transform 0.2s;
}
.look__dot__holder:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background-color: var(--bg);
opacity: 0.5;
transform: translate(-50%, -50%);
transition: width 0.2s, height 0.2s, transform 0.2s;
}
.look__dot__holder:hover:after, .look__dot__holder.is-focused:after, .look__dot__holder.is-active:after {
opacity: 1;
}
.look__dot__holder:hover:before, .look__dot__holder.is-focused:before, .look__dot__holder.is-active:before {
width: 34px;
height: 34px;
}
.look__dot__holder:hover .look__dot, .look__dot__holder.is-focused .look__dot, .look__dot__holder.is-active .look__dot {
opacity: 1;
transition: opacity 0.2s 0.1s, transform 0.2s;
}
.look__dot__holder:hover .look__dot:before,
.look__dot__holder:hover .look__dot:after, .look__dot__holder.is-focused .look__dot:before,
.look__dot__holder.is-focused .look__dot:after, .look__dot__holder.is-active .look__dot:before,
.look__dot__holder.is-active .look__dot:after {
opacity: 1;
transition: opacity 0.2s 0.2s;
}
.look__dot {
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
width: 22px;
height: 22px;
padding: 0;
opacity: 0;
border-radius: 50%;
transform: translate(-50%, -50%);
transition: opacity 0.2s, transform 0.2s;
}
.is-active > .look__dot {
transform: translate(-50%, -50%) rotate(45deg);
}
.look__dot:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: var(--ICON-STROKE-WIDTH);
height: 10px;
background-color: currentcolor;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
}
.look__dot:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: var(--ICON-STROKE-WIDTH);
background-color: currentcolor;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
}
.look__dot__pulse {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.look__dot__pulse:before, .look__dot__pulse:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 23px;
height: 23px;
background-color: var(--bg);
opacity: 0.3;
border-radius: 50%;
transition: width 0.2s, height 0.2s;
animation: pulse 2.5s linear infinite;
}
.look__dot__pulse:after {
animation: pulse-small 2.5s linear infinite;
}
.is-active > .look__dot__pulse:before, .is-active > .look__dot__pulse:after, .look__dot__holder:hover > .look__dot__pulse:before, .look__dot__holder:hover > .look__dot__pulse:after {
animation: none;
}
@keyframes pulse {
0% {
transform: scale(0);
opacity: 0;
}
59% {
transform: scale(0);
opacity: 0;
}
60% {
transform: scale(1);
opacity: 0.05;
}
80% {
opacity: 0.15;
}
100% {
transform: scale(4);
opacity: 0;
}
}
@keyframes pulse-small {
0% {
transform: scale(0);
opacity: 0;
}
74% {
transform: scale(0);
opacity: 0;
}
75% {
transform: scale(1);
opacity: 0.15;
}
100% {
transform: scale(3);
opacity: 0;
}
}
.look__products__holder {
visibility: hidden;
position: absolute;
top: 50%;
z-index: 10;
width: 245px;
padding: calc(var(--gutter) / 2);
background-color: var(--bg);
transform: translateY(-50%);
opacity: 0;
transition: visibility 0.3s, opacity 0.3s, bottom 0.3s;
box-shadow: 0 0 9px rgba(0, 0, 0, 0.2);
}
.look__products__holder.is-expanded {
visibility: visible;
opacity: 1;
}
@media only screen and (max-width: 767px) {
.look__products__holder.is-expanded {
overflow: hidden;
}
}
.look__products__holder.look__products__holder--slides {
transform: translateY(calc(-50% - 22px));
}
@media only screen and (max-width: 767px) {
.look__products__holder.look__products__holder--slides {
transform: translateY(0);
z-index: 800;
}
}
@media only screen and (min-width: 768px) and (max-width: 1099px) {
.look__products__holder {
width: 200px;
}
}
@media only screen and (max-width: 767px) {
.look__products__holder {
overflow-y: auto;
position: fixed;
top: auto;
bottom: -100%;
width: 100%;
max-height: calc(100vh - var(--header-height) * 2);
padding: calc(var(--gutter) * 4) var(--gutter) calc(var(--gutter) * 5);
transform: translateY(0);
}
.look__products__holder.is-expanded {
bottom: 0;
}
}
.look__products__holder--right {
right: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 1099px) {
.look__products__holder--right {
right: var(--outer);
}
}
@media only screen and (max-width: 767px) {
.look__products__holder--right {
left: 0;
right: 0;
}
}
.look__products__holder--left {
left: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 1099px) {
.look__products__holder--left {
left: var(--outer);
}
}
@media only screen and (max-width: 767px) {
.look__products__holder--left {
left: 0;
right: 0;
}
}
.look__products__holder__close {
position: absolute;
top: var(--gutter);
right: var(--gutter);
display: none;
}
@media only screen and (max-width: 767px) {
.look__products__holder__close {
display: block;
}
}
.look__products__holder__close svg {
display: block;
font-size: 24px;
}
[data-carousel].look__products__slider {
margin: 0;
}
[data-carousel].look__products__slider .slide-item {
padding: 0;
margin: 0 var(--gutter) 0 0;
width: 100%;
}
[data-carousel].look__products__slider .flickity-prev-next-button {
top: 100%;
margin-top: var(--gutter);
margin-bottom: 0;
background-color: var(--bg);
transform: none;
transition: opacity 0.2s;
}
[data-carousel].look__products__slider .flickity-prev-next-button:hover {
opacity: 0.9;
}
[data-carousel].look__products__slider .flickity-prev-next-button.previous {
left: 50%;
border-right: 1px solid var(--border);
border-radius: 3px 0 0 3px;
margin-right: -1px;
transform: translateX(-100%);
}
@media only screen and (max-width: 767px) {
[data-carousel].look__products__slider .flickity-prev-next-button.previous {
border: 1px solid var(--border);
}
}
[data-carousel].look__products__slider .flickity-prev-next-button.next {
right: auto;
left: 50%;
border-left: 1px solid var(--border);
margin-left: -1px;
border-radius: 0 3px 3px 0;
}
@media only screen and (max-width: 767px) {
[data-carousel].look__products__slider .flickity-prev-next-button.next {
border: 1px solid var(--border);
}
[data-carousel].look__products__slider {
padding: 0;
scroll-padding: 0;
margin: 0;
width: 100%;
max-width: 100%;
}
[data-carousel].look__products__slider.flickity-enabled {
padding-right: 0;
}
[data-carousel].look__products__slider .slide-item,
[data-carousel].look__products__slider .slide-item:last-child {
margin-right: var(--gutter);
}
}
[dir=rtl] {
direction: rtl !important;
}
[dir=rtl] * {
direction: rtl !important;
}
[dir=rtl] .collection__filters__toggle .icon, [dir=rtl] .popout--navbar .popout__toggle .icon {
margin-left: 0;
margin-right: 8px;
}
[dir=rtl] .drawer__button {
justify-content: flex-start;
}
[dir=rtl] .sliderule__chevron--right {
right: auto;
left: 20px;
}
[dir=rtl] .drawer__content {
left: auto;
right: 0;
transform: translate3d(100%, 0, 0);
}
[dir=rtl] .drawer--visible .drawer__content,
[dir=rtl] .drawer--right.is-open .drawer__content {
transform: translate3d(0, 0, 0);
}
[dir=rtl] .drawer--right .drawer__content {
left: 0;
right: auto;
}
[dir=rtl] .drawer--right:not(.drawer--visible):not(.is-open) .drawer__content {
transform: translate3d(-100%, 0, 0);
}
[dir=rtl] .cart__drawer__title {
padding: 0 var(--gutter) 0 0;
}
[dir=rtl] .cart__items__title {
padding: 0 0 0 25px;
}
[dir=rtl] .collection-tabs .flickity-prev-next-button.previous {
right: var(--gutter);
left: auto;
}
[dir=rtl] .collection-tabs .flickity-prev-next-button.next {
left: var(--gutter);
right: auto;
}
[dir=rtl] .kicker__line:after {
left: auto;
right: 0;
}
[dir=rtl] .text-center .kicker__line:after {
right: 0;
left: 0;
}
[dir=rtl] .drawer__search .search__predictive__actions {
flex-direction: row-reverse;
}
[dir=rtl] .footer {
text-align: right;
}
[dir=rtl] .footer__container--reversed .footer__aside {
margin: 0 var(--padding) 0 var(--outer-offset);
}
@media only screen and (max-width: 767px) {
[dir=rtl] .footer__container--reversed .footer__aside {
margin: 0 var(--outer-offset);
}
}
[dir=rtl] .newsletter-block .input-group-button button {
padding: 0 12px 0 0;
}
[dir=rtl] .popout__toggle svg {
margin: -0.1em 0.2em 0 -0.2em;
}
[dir=rtl] .sidebar__item a,
[dir=rtl] .sidebar__item span {
padding: var(--space-2) var(--space-8);
}
[dir=rtl] .collection__filters__toggle, [dir=rtl] .popout--navbar .popout__toggle {
border: none;
border-left: 1px solid var(--border);
}
[dir=rtl] .sidebar__heading,
[dir=rtl] .popout-list__option {
text-align: right;
}
[dir=rtl] .sidebar__heading-chevron {
left: 9px;
right: auto;
text-align: left;
}
[dir=rtl] .sidebar__navigation__list .icon-stateful,
[dir=rtl] .sidebar__navigation__list .icon-theme {
right: 2px;
}
[dir=rtl] .sidebar__heading-chevron {
right: 0;
left: auto;
}
[dir=rtl] .product__align-left .product__title {
margin: 0 0 0 var(--space-6);
}
[dir=rtl] .product-accordion .accordion__title {
padding: var(--space-6) 0 var(--space-6) var(--space-9);
text-align: right;
}
[dir=rtl] .parent .header__dropdown {
margin-left: 0;
margin-right: -17px;
}
[dir=rtl] .product__mobile--slideshow .flickity-page-dots {
left: 20px;
right: unset;
}
[dir=rtl] .accordion__title {
padding-right: 0;
padding-left: 30px;
}
[dir=rtl] .accordion__title:after {
right: auto;
left: 5px;
transform: rotate(45deg);
}
[dir=rtl] .accordion__title.accordion-is-open:after {
transform: rotate(-45deg);
}
[dir=rtl] .radio__legend {
display: flex;
flex-flow: row wrap;
align-items: center;
}
[dir=rtl] .radio__legend span {
order: 1;
}
[dir=rtl] .radio__legend__label {
padding: 0 0 0 6px;
margin: 0 0 0 5px;
border: none;
border-left: 1px solid var(--border);
}
[dir=rtl] .tab-link {
margin: 0 30px;
}
@media only screen and (min-width: 1400px) {
[dir=rtl] .collection-tabs .flickity-prev-next-button.previous {
right: -70px;
}
[dir=rtl] .collection-tabs .flickity-prev-next-button.next {
left: -70px;
}
}
@media only screen and (min-width: 768px) {
[dir=rtl] .collection__filters__inner {
padding: 0 10px 0 32px;
margin: 0 -10px 0 0;
transform: translate3d(100%, 0, 0);
}
[dir=rtl] .collection__filters__wrapper {
margin: 0 -250px 0 0;
}
[dir=rtl] .drawer--visible.collection__filters__wrapper,
[dir=rtl] .filters--default-visible.collection__filters__wrapper {
margin-right: 0;
}
[dir=rtl] .drawer--visible .collection__filters__inner,
[dir=rtl] .filters--default-visible .collection__filters__inner {
transform: translateZ(0);
}
}
@media only screen and (max-width: 767px) {
[dir=rtl] .footer__title .icon-theme {
right: auto;
left: 0;
}
}
.\*\:text-stroke > *{
-webkit-text-fill-color: var(--tw-text-stroke-fill-color, transparent);
-webkit-text-stroke-width: var(--tw-text-stroke-width, 1px);
-webkit-text-stroke-color: var(--tw-text-stroke-color, black);
}
.\*\:flex > *{
display: flex;
}
.\*\:h-\[0\.8em\] > *{
height: 0.8em;
}
.\*\:items-center > *{
align-items: center;
}
.\*\:justify-center > *{
justify-content: center;
}
.\*\:text-\[color\:--text-color\] > *{
color: var(--text-color);
}
.\*\:text-stroke-\[color\:--text-color\] > *{
--tw-text-stroke-color: var(--text-color);
}
.hover\:text-button-contrast\/80:hover{
color: rgb(var(--rgb-button-contrast) / 0.8);
}
.hover\:text-content\/100:hover{
color: rgb(var(--rgb-content) / 1);
}
.hover\:opacity-80:hover{
opacity: 0.8;
}
.group\/option-button:hover .group-hover\/option-button\:bg-button-contrast\/5{
background-color: rgb(var(--rgb-button-contrast) / 0.05);
}
.group\/option-button:hover .group-hover\/option-button\:text-button-contrast{
--tw-text-opacity: 1;
color: rgb(var(--rgb-button-contrast) / var(--tw-text-opacity));
}
.group\/quick-action-button:hover .group-hover\/quick-action-button\:text-button-contrast\/50{
color: rgb(var(--rgb-button-contrast) / 0.5);
}
@media (min-width: 480px){
.sm\:col-span-1{
grid-column: span 1 / span 1;
}
.sm\:col-span-10{
grid-column: span 10 / span 10;
}
.sm\:col-span-11{
grid-column: span 11 / span 11;
}
.sm\:col-span-12{
grid-column: span 12 / span 12;
}
.sm\:col-span-2{
grid-column: span 2 / span 2;
}
.sm\:col-span-3{
grid-column: span 3 / span 3;
}
.sm\:col-span-4{
grid-column: span 4 / span 4;
}
.sm\:col-span-5{
grid-column: span 5 / span 5;
}
.sm\:col-span-6{
grid-column: span 6 / span 6;
}
.sm\:text-left{
text-align: left !important;
}
[dir=rtl] .sm\:text-left{
text-align: right !important;
}
.sm\:text-center{
text-align: center !important;
}
.sm\:text-right{
text-align: right !important;
}
[dir=rtl] .sm\:text-right{
text-align: left !important;
}
.sm\:text-start{
text-align: start;
}
.sm\:text-end{
text-align: end;
}
}
@media (min-width: 768px){
.md\:left-\[--float-left\]{
left: var(--float-left);
}
.md\:top-\[--float-top\]{
top: var(--float-top);
}
.md\:col-span-1{
grid-column: span 1 / span 1;
}
.md\:col-span-10{
grid-column: span 10 / span 10;
}
.md\:col-span-11{
grid-column: span 11 / span 11;
}
.md\:col-span-12{
grid-column: span 12 / span 12;
}
.md\:col-span-2{
grid-column: span 2 / span 2;
}
.md\:col-span-3{
grid-column: span 3 / span 3;
}
.md\:col-span-4{
grid-column: span 4 / span 4;
}
.md\:col-span-5{
grid-column: span 5 / span 5;
}
.md\:col-span-6{
grid-column: span 6 / span 6;
}
.md\:block{
display: block;
}
.md\:flex{
display: flex;
}
.md\:hidden{
display: none;
}
.md\:h-\[--height\]{
height: var(--height);
}
.md\:min-h-\[48px\]{
min-height: 48px;
}
.md\:w-full{
width: 100%;
}
.md\:translate-y-r4{
--tw-translate-y: var(--space-4);
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.md\:gap-y-r2{
row-gap: var(--space-2);
}
.md\:px-r8{
padding-left: var(--space-8);
padding-right: var(--space-8);
}
.md\:py-r5{
padding-top: var(--space-5);
padding-bottom: var(--space-5);
}
.md\:opacity-0{
opacity: 0;
}
.md\:opacity-100{
opacity: 1;
}
.md\:text-left{
text-align: left !important;
}
[dir=rtl] .md\:text-left{
text-align: right !important;
}
.md\:text-center{
text-align: center !important;
}
.md\:text-right{
text-align: right !important;
}
[dir=rtl] .md\:text-right{
text-align: left !important;
}
.md\:text-start{
text-align: start;
}
.md\:text-end{
text-align: end;
}
@supports (aspect-ratio: auto){
.md\:aspect-\[--wh-ratio\]{
aspect-ratio: var(--wh-ratio);
}
}
@supports not (aspect-ratio: auto){
.md\:aspect-\[--wh-ratio\]::before{
content: "";
width: 1px;
margin-left: -1px;
float: left;
height: 0;
padding-top: calc((1 / (var(--wh-ratio))) * 100%);
}
.md\:aspect-\[--wh-ratio\]::after{
content: "";
display: table;
clear: both;
}
}
@supports (aspect-ratio: auto){
.md\:aspect-auto{
aspect-ratio: auto;
}
}
@supports not (aspect-ratio: auto){
.md\:aspect-auto::before{
content: none;
width: initial;
margin-left: initial;
float: initial;
height: initial;
padding-top: initial;
}
.md\:aspect-auto::after{
content: none;
display: initial;
clear: initial;
}
.md\:aspect-auto::before{
content: none;
width: initial;
margin-left: initial;
float: initial;
height: initial;
padding-top: initial;
}
.md\:aspect-auto::after{
content: none;
display: initial;
clear: initial;
}
}
.group\/product-grid-item:focus-within .md\:group-focus-within\/product-grid-item\:translate-y-0{
--tw-translate-y: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/product-grid-item:focus-within .md\:group-focus-within\/product-grid-item\:opacity-100{
opacity: 1;
}
.group\/product-grid-item:hover .md\:group-hover\/product-grid-item\:translate-y-0{
--tw-translate-y: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/product-grid-item:hover .md\:group-hover\/product-grid-item\:opacity-100{
opacity: 1;
}
}
@media (min-width: 1100px){
.lg\:col-span-1{
grid-column: span 1 / span 1;
}
.lg\:col-span-10{
grid-column: span 10 / span 10;
}
.lg\:col-span-11{
grid-column: span 11 / span 11;
}
.lg\:col-span-12{
grid-column: span 12 / span 12;
}
.lg\:col-span-2{
grid-column: span 2 / span 2;
}
.lg\:col-span-3{
grid-column: span 3 / span 3;
}
.lg\:col-span-4{
grid-column: span 4 / span 4;
}
.lg\:col-span-5{
grid-column: span 5 / span 5;
}
.lg\:col-span-6{
grid-column: span 6 / span 6;
}
.lg\:text-left{
text-align: left !important;
}
[dir=rtl] .lg\:text-left{
text-align: right !important;
}
.lg\:text-center{
text-align: center !important;
}
.lg\:text-right{
text-align: right !important;
}
[dir=rtl] .lg\:text-right{
text-align: left !important;
}
.lg\:text-start{
text-align: start;
}
.lg\:text-end{
text-align: end;
}
}
.\[\&\:\:-moz-range-thumb\]\:h-\[--thumb-size\]::-moz-range-thumb{
height: var(--thumb-size);
}
.\[\&\:\:-moz-range-thumb\]\:h-\[100vh\]::-moz-range-thumb{
height: 100vh;
}
.\[\&\:\:-moz-range-thumb\]\:w-\[--thumb-size\]::-moz-range-thumb{
width: var(--thumb-size);
}
.\[\&\:\:-moz-range-thumb\]\:w-\[100vw\]::-moz-range-thumb{
width: 100vw;
}
.\[\&\:\:-moz-range-thumb\]\:rounded-none::-moz-range-thumb{
border-radius: 0px;
}
.\[\&\:\:-webkit-slider-thumb\]\:h-\[--thumb-size\]::-webkit-slider-thumb{
height: var(--thumb-size);
}
.\[\&\:\:-webkit-slider-thumb\]\:h-\[100vh\]::-webkit-slider-thumb{
height: 100vh;
}
.\[\&\:\:-webkit-slider-thumb\]\:w-\[--thumb-size\]::-webkit-slider-thumb{
width: var(--thumb-size);
}
.\[\&\:\:-webkit-slider-thumb\]\:w-\[100vw\]::-webkit-slider-thumb{
width: 100vw;
}
.\[\&\:\:-webkit-slider-thumb\]\:rounded-none::-webkit-slider-thumb{
border-radius: 0px;
}
.\[\&\:not\(\:first-child\)\]\:opacity-\[--initial-opacity\]:not(:first-child){
opacity: var(--initial-opacity);
}
.\[\&\:not\(\:first-child\)\]\:\[--initial-display\:none\]:not(:first-child){
--initial-display: none;
}
.\[\&\>svg\]\:inline-block>svg{
display: inline-block;
}
/* CSS - Hide the product add popdown */
.product-add-popdown{
display: none !important;
}
}
/* end */
/*Move Hero Button */
@media screen and (max-width: 989px){
.hero__content.hero__content--transparent {
position: absolute;
bottom: 0;
}
/* Sale Strikethrough */
.product-grid-item .compare-at {
margin-left: -95px !important;
}
}
}
}