/** Shopify CDN: Minification failed
Line 27955: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: 1600px) {
.\!container {
max-width: 1600px !important;
}
.container {
max-width: 1600px;
}
}
.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);
}
.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;
}
.static {
position: static;
}
.fixed {
position: fixed;
}
.\!absolute {
position: absolute !important;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.sticky {
position: sticky;
}
.inset-0 {
inset: 0px;
}
.bottom-0 {
bottom: 0px;
}
.bottom-\[calc\(var\(--inner\)\/2\)\] {
bottom: calc(var(--inner) / 2);
}
.left-0 {
left: 0px;
}
.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-\[calc\(var\(--inner\)\/2\)\] {
top: calc(var(--inner) / 2);
}
.top-auto {
top: auto;
}
.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;
}
.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-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-\[1\.5px\] {
height: 1.5px;
}
.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-\[--thumb-size\] {
width: var(--thumb-size);
}
.w-\[1\.5px\] {
width: 1.5px;
}
.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-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;
}
.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));
}
.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-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.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-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);
}
.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-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-\[--handle-color\] {
border-color: var(--handle-color);
}
.border-content\/20 {
border-color: rgb(var(--rgb-content) / 0.2);
}
.border-transparent {
border-color: transparent;
}
.bg-\[--bg\] {
background-color: var(--bg);
}
.bg-\[--handle-color\] {
background-color: var(--handle-color);
}
.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\/10 {
background-color: rgb(255 255 255 / 0.1);
}
.fill-\[\#B4B6B9\] {
fill: #b4b6b9;
}
.object-contain {
-o-object-fit: contain;
object-fit: contain;
}
.object-cover {
-o-object-fit: cover;
object-fit: cover;
}
.\!p-0 {
padding: 0px !important;
}
.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-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-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-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-\[0\.33em\] {
padding-right: 0.33em;
}
.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));
line-height: var(--leading-relaxed);
}
.text-r10 {
font-size: calc(var(--font-10) * var(--font-adjust, 1));
line-height: var(--leading-tight);
}
.text-r11 {
font-size: calc(var(--font-11) * var(--font-adjust, 1));
line-height: var(--leading-hairline);
}
.text-r12 {
font-size: calc(var(--font-12) * var(--font-adjust, 1));
line-height: var(--leading-hairline);
}
.text-r13 {
font-size: calc(var(--font-13) * var(--font-adjust, 1));
line-height: var(--leading-hairline);
}
.text-r14 {
font-size: calc(var(--font-14) * var(--font-adjust, 1));
line-height: var(--leading-none);
}
.text-r15 {
font-size: calc(var(--font-15) * var(--font-adjust, 1));
line-height: var(--leading-none);
}
.text-r2 {
font-size: calc(var(--font-2) * var(--font-adjust, 1));
line-height: var(--leading-relaxed);
}
.text-r3 {
font-size: calc(var(--font-3) * var(--font-adjust, 1));
line-height: var(--leading-normal);
}
.text-r4 {
font-size: calc(var(--font-4) * var(--font-adjust, 1));
line-height: var(--leading-normal);
}
.text-r5 {
font-size: calc(var(--font-5) * var(--font-adjust, 1));
line-height: var(--leading-snug);
}
.text-r6 {
font-size: calc(var(--font-6) * var(--font-adjust, 1));
line-height: var(--leading-snug);
}
.text-r7 {
font-size: calc(var(--font-7) * var(--font-adjust, 1));
line-height: var(--leading-snug);
}
.text-r8 {
font-size: calc(var(--font-8) * var(--font-adjust, 1));
line-height: var(--leading-tight);
}
.text-r9 {
font-size: calc(var(--font-9) * var(--font-adjust, 1));
line-height: var(--leading-tight);
}
.font-bold {
font-weight: var(--font-weight-bold);
}
.uppercase {
text-transform: uppercase;
}
.capitalize {
text-transform: capitalize;
}
.italic {
font-style: italic;
}
.text-\[--handle-color\] {
color: var(--handle-color);
}
.text-\[--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;
}
.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);
}
.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);
}
.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-\[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-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-\[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);
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.gradient-mask-r-10 {
-webkit-mask-image: linear-gradient(
to right,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 10%,
rgba(0, 0, 0, 1) 90%,
rgba(0, 0, 0, 0) 100%
);
mask-image: linear-gradient(
to right,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 10%,
rgba(0, 0, 0, 1) 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) 10%,
rgba(0, 0, 0, 1) 90%,
rgba(0, 0, 0, 0) 100%
);
mask-image: linear-gradient(
to left,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 10%,
rgba(0, 0, 0, 1) 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) 10%,
rgba(0, 0, 0, 1) 90%,
rgba(0, 0, 0, 0) 100%
);
mask-image: linear-gradient(
to right,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 10%,
rgba(0, 0, 0, 1) 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;
}
@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;
}
}
.\[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;
}
@media only screen and (min-width: 768px) and (max-width: 1099px) {
:root {
--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 {
--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 {
--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-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;
}
/* ============================================================================
#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-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-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-text-thick-line:after {
height: 0.5px;
}
}
.btn-text-thick-line:after {
opacity: 0.25;
transform: scaleX(0);
transform-origin: 100% 50%;
}
.btn-text-thick-line:hover:after {
transform: scaleX(1);
transform-origin: 0 50%;
opacity: 1;
}
.btn-text-thick-line:after {
bottom: -3px;
height: 2px;
}
.btn-text-thick-line.btn--neutral {
color: var(--text);
}
.btn-text-thick-line.btn--primary,
.btn-text-thick-line.shopify-challenge__button {
color: var(--primary);
}
.btn-text-thick-line.btn--secondary {
color: var(--secondary);
}
.btn-text-thick-line.btn--black {
color: #000;
}
.btn-text-thick-line.btn--white {
color: #fff;
}
/* Make the hero link underline full opacity */
.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);
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;
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] {
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 {
--bg: var(--text-light);
}
.swatch__button label[data-swatch="white" i]:before,
.swatch__button .swatch__label[data-swatch="white" 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;
}
svg.placeholder-svg {
fill: #b4b6b9;
background-color: var(--hairline);
}
@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;
}
/* === 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%;
}
.image__hero__scale svg.placeholder-svg {
fill: #eee;
background-color: #fff;
}
[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% 50%,
75% 93.3%,
25% 93.3%,
0% 50%,
25% 6.7%,
75% 6.7%
);
}
.clip-octagon {
--polygon-shape: polygon(
100% 50%,
85.36% 85.36%,
50% 100%,
14.64% 85.36%,
0% 50%,
14.64% 14.64%,
50% 0%,
85.36% 14.64%
);
}
.clip-sunburst {
--polygon-shape: polygon(
100% 50%,
91.48% 56.57%,
97.55% 65.45%,
87.42% 69.07%,
90.45% 79.39%,
79.7% 79.7%,
79.39% 90.45%,
69.07% 87.42%,
65.45% 97.55%,
56.57% 91.48%,
50% 100%,
43.43% 91.48%,
34.55% 97.55%,
30.93% 87.42%,
20.61% 90.45%,
20.3% 79.7%,
9.55% 79.39%,
12.58% 69.07%,
2.45% 65.45%,
8.52% 56.57%,
0% 50%,
8.52% 43.43%,
2.45% 34.55%,
12.58% 30.93%,
9.55% 20.61%,
20.3% 20.3%,
20.61% 9.55%,
30.93% 12.58%,
34.55% 2.45%,
43.43% 8.52%,
50% 0%,
56.57% 8.52%,
65.45% 2.45%,
69.07% 12.58%,
79.39% 9.55%,
79.7% 20.3%,
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% 31px, #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% - 31px), #000 99%, #0000 101%) 50%
100%/80px 51% repeat-x,
radial-gradient(22.83px at 50% calc(100% + 11px), #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 {
padding-bottom: var(--inner);
position: relative;
margin-bottom: var(--space-5);
}
.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,
.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,
.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--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;
}
/* ================ 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,")
5 11,
auto;
}
.custom-prev-next-button.next {
right: 0;
cursor: url("data:image/svg+xml;utf8,")
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;
}
}
.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__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 6px;
}
.product__grid__info.text-left
.grid__swatch__container
.swatch__button:first-child {
margin-left: 0;
}
.grid__swatch__container .swatch__button {
--OPTION-SIZE-SWATCH: 22px;
--swatch-offset: 2px;
--swatch-border-width: 2px;
}
.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: 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-BODY));
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;
opacity: 0.5;
padding: 0 4px;
}
.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: center;
}
@media only screen and (max-width: 767px) {
.additional-checkout-buttons {
display: flex;
justify-content: center;
}
.additional-checkout-buttons .dynamic-checkout__content {
width: 100%;
}
}
@media only screen and (min-width: 480px) {
.additional-checkout-buttons {
padding: 12px;
}
}
.vendor--hide .item__vendor {
display: none;
}
.cart__notes__label {
text-align: left;
}
.quantity--hide .cart__items__quantity,
.quantity--hide .quantity__wrapper {
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;
}
.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 .placeholder-svg {
fill: #e2e2e2;
}
.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;
}
}
.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\: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;
}
}
@media (min-width: 768px) {
.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;
}
@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\: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;
}
}
.\[\&\:\:-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;
}
.\[\&\>svg\]\:inline-block > svg {
display: inline-block;
}
/*--------------Custom code added by Emagine 20/12/2024-------------*/
/*----------Megamenu styling-----------*/
.header__dropdown__image__holder {
height: 300px;
}
.header__dropdown__wrapper {
padding: 50px 10px;
}
.dropdown__family a[href="/en#break"] {
width: 0 !important;
height: 300px;
padding: 0;
}
.dropdown__family--grandchild a[href="/en#break"] .navlink {
padding: 0 !important;
}
.header__dropdown__inner .dropdown__family {
flex: 0 1 20%;
}
.dropdown__family:has(a[href="/en#break"]) {
padding: 0;
width: 0;
height: 300px;
}
.dropdown__family:has(a[href="/en#break"]) .navtext {
display: none !important;
}
.header__dropdown__inner {
align-content: center;
}
.grandparent .header__dropdown__inner {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-wrap: wrap;
max-height: 320px;
justify-content: flex-start;
}
.dropdown__family--grandchild {
padding-right: 60px;
max-width: 180px;
min-width: 0px;
}
.dropdown__family--grandchild .navlink--child .navtext,
.dropdown__family--child .navlink--grandchild .navtext {
font-family: var(--TYPE-STACK-NAV) !important;
font-style: var(--TYPE-STYLE-NAV) !important;
font-weight: var(--TYPE-WEIGHT-NAV) !important;
text-transform: var(--FONT-NAV-TRANSFORM) !important;
letter-spacing: var(--FONT-NAV-LETTER-SPACING) !important;
font-size: calc(var(--font-2) * var(--TYPE-ADJUST-NAV)) !important;
white-space: nowrap !important;
display: block !important;
}
.dropdown__family--child {
padding-right: 50px;
}
.header__dropdown__image.section--image.is-below-image {
padding-right: 15px;
}
@media (max-width: 768px) {
.header__dropdown__image.section--image.is-below-image,
html[lang="ar"] .header__dropdown__image.section--image.is-below-image {
padding-left: 0;
padding-right: 0;
}
}
.navlink--child:not(:has(+ .navlink--grandchild)) {
border-bottom: 0px !important;
padding-bottom: 0;
max-width: 150px;
}
.sliderow.is-visible:has(.sliderow__title[href="/en#break"]) {
display: none !important;
}
.grandparent .header__dropdown__inner {
grid-column-gap: 0;
}
header {
border: none !important;
}
/*--------Collection mosaic collection styling----------*/
.section-mosaic .tile--collection .tile__content,
.section-mosaic .tile--image .tile__content {
position: absolute;
top: 20px;
}
/*-----View all link styling---------*/
.view_all_link .navtext {
font-weight: 500 !important;
font-style: italic !important;
}
/*-----------Topbar Cart hover icon--------*/
.header__desktop__bar__r .header__desktop__button:last-child > a {
overflow: unset;
}
/*----------Size variants box alignment (Product & Cart)-------------*/
.form__selectors .radio__fieldset .radio__inputs--equal {
grid-template-columns: repeat(
auto-fill,
minmax(min((var(--OPTION-SIZE-RADIO)), 6em + 4px), 1fr)
);
}
/*--------------Variant size--------------*/
.radio__fieldset .radio__button label {
min-width: 30px !important;
}
/*------------Quickview drawer styling-----------*/
.drawer__top.quickview__modal__top {
padding: 24px;
}
.quickview__modal .form__selectors {
padding-bottom: 30px;
}
/*-------------Collection filter-----------*/
@media (max-width: 768px) {
.drawer__top {
padding: 0 10px;
}
.collection__filters__inner {
padding-top: 15px;
}
}
@media (min-width: 768px) {
.collection__filters__inner {
padding-left: 10px !important;
padding-right: 20px;
}
}
/*------------Product Grid & Swatches-------------*/
.product__grid__info {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
}
.product__grid__info .price {
font-weight: bold;
}
.grid__swatch__placeholder {
display: none !important;
}
.grid__swatch__container {
margin-top: 15px;
}
.grid__swatch__hover {
opacity: 1 !important;
}
.swatch__label {
width: 18px;
height: 18px;
}
/*------------Product page content right section-----------*/
@media (min-width: : 768px) {
.product-page .product__inner {
padding-left: 0;
margin-left: 60px;
}
}
/*----------Subcollection spacing-----------*/
.section--image.subcollection__item:not(:last-child) {
margin-right: 2px !important;
}
/*------------Hide 1 color swatch----------*/
[data-select-label="Color"][data-option-position="1"]:has(
radio-swatch:first-child:last-child
) {
display: none;
}
[data-select-label="Color"][data-option-position="2"]:has(
radio-swatch:first-child:last-child
) {
display: none;
}
[data-option-position="1"]:has(
.radio__inputs radio-swatch:first-child:last-child
)
+ [data-option-position="2"] {
margin-top: 0;
}
/*-----------Overflow text with image section----------*/
.custom-css-overlay {
position: absolute;
top: 30px;
bottom: 30px;
width: inherit;
display: flex;
height: -webkit-fill-available;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
flex-direction: column;
padding-right: 15px;
z-index: 2;
}
.index__column.grid__item.slide-item:has(.custom-css-overlay) {
margin-bottom: -20px !important;
padding-bottom: 0;
}
.custom-css-overlay-bottom-block .rte.body-size-4 {
padding: 10px 100px;
}
@media (max-width: 768px) {
.custom-css-overlay-bottom-block .rte.body-size-4 {
padding: 10px 10px;
}
}
/*--------------Footer alignment-----------------*/
@media only screen and (min-width: 768px) {
.footer__newsletter__body:first-child {
align-self: flex-start;
}
}
/*----------------Gift icon-----------------*/
.intimate-gifting .standard__heading:before,
[data-section-id="template--23824206594361__section_double_cKaJLH"]
.standard__heading:before {
content: "";
display: inline-block;
width: 32px;
height: 32px;
background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M23.5 16L9 8.5' stroke='black'/%3E%3Cpath d='M23.5 24L23.5 16' stroke='black'/%3E%3Cpath d='M15.5 27.5L15.5 20' stroke='black'/%3E%3Cpath d='M30.5 12.5V20.5L15.5 28L0.5 20.5L0.5 12.5' stroke='black'/%3E%3Cpath d='M1.08832 12.5L15.5 5.04568L29.9117 12.5L15.5 19.9543L1.08832 12.5Z' stroke='black'/%3E%3Crect width='32' height='32' fill='url(%23pattern0_276_3977)'/%3E%3Cdefs%3E%3Cpattern id='pattern0_276_3977' patternContentUnits='objectBoundingBox' width='1' height='1'%3E%3Cuse xlink:href='%23image0_276_3977' transform='scale(0.00195312)'/%3E%3C/pattern%3E%3Cimage id='image0_276_3977' width='512' height='512' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAACXBIWXMAAA8SAAAPEgEhm/IzAAAgGUlEQVR4nO3debRsV10n8G+9Rx6QEEgiEMAQZEqQyDypqMGWOagts0ArCoi2SOMAiNq4ulkiIEsUbFpxaNJCCyhokCBIVJCIOCEESMIQicxCRpIQQobqP3Y9cvN4776qc05Vnbq/z2etWm+4d5+z37v37v2tffYwmU6nAQBq2bXuCgAAqycAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAAEBBAgAAFCQAwIabNIdMJpM9sz+vu0rABphMp9N11wHoaNbpH53kwiSXzlOmy8/8ZDLpVA4YLwEANtCkvc0/NMk1SS5f1X21F7BzCACwYWad/64kV6/j/toM2BkEANgQk2sf7o/ih1bbAZvNJEDYHNOMpPNPTDaETWcEAEZuEzpa7QhsHgEARmrgjv96SW6X5PgkN5u9jpx97Mok5yU5P8knkpyV5IJFb6Atgc0iAMDIDNTx3zTJg5N8++x1QpI9C5T/ZJK/TvKXSd6c5LJ5C2pTYDMIADASA3T8N0/yxCQ/kNbp7+57wZlLk7wxyUuTfGjeQtoWGDcBANZsgI7/QUmekeRhSQ7pXaEDmyZ5U5Jnpz0qmK+QNgZGSQCANenZ8e9K8vi0zvjuQ9RnAV9O8t+TvCxzrkrQzsD4CACwYgO8439gkpckuUf/2vTyliRPSnLxvAW0NzAeAgCsyAAd/+2T/O+0If+x+Oe0+ly0aEFtD6yXjYBgySaTSd/O/3pJfiHJBzOuzj9J7p22UuCwRQsO8P8C9GAEAJZkoM7t2CSvSfKdQ1xsiV6fNiehF+0RrI4RAFiCgTr/RyY5I+Pv/JPkcUl+vO9FjArA6hgBgCXo2YlNkjwnyQuzWSH9S0nulORzQ19YOwXD26TGBSrYk+SPkrwom/fzeeMkL1jGhY0MwPCMAMDAenRUh6btuPfQ4WqzclemrVb41LJuoM2CYWzaOwzYqQ5N8vZsdueftJ0If3KZNzASAMMwAgAD69BB7UlySlbT+V+S5ONJPpZ24M/utCV8Rya5b5LbDHCPTyb5psy5S2BX2i7oRwCAgS0YACZpy/yesJza5Kok70nyttnr/dm+Y/7GJE9N22J44bX9W3xrkn/oUX5u2jDoRgCAAXV49//zSX51CVX5YpJXpe0c+JkO5Y9L2+Cn64jA87OkCYH7ox2DxQkAMKAFA8BDk5yaYefifDat831tkq/0vNbdk/xT2k6Ei3pLku/tef+FaMtgMSYBwnrcLMmrM9zP4BVpSwePT/L76d/5J+1xwR92LHufAe6/EJMDYTECAKzH7yY5eqBrnZ7khCTPS3LpQNfc69Udyx2dfnMIOhECYH4CAAxkgc7nsUm+f6DbvirJf0pyzkDX29e/JLmmY9ljhqzIvIQAmI8AAKt1WJKXDnCdLyV5dJKnp22+syyXJTm3Y9lbDFiPhdg5EA5OAIDVel6SW/e8xheTPCBt18BV+HTHctcftBYdCAFwYF1m9wL7mLOj+YYkz+x5q88meVCSM3teZxVG0b7s/dpYJQDXZQQAVudZSQ7vUf6SJA/L6jv/ru3EqNoXowFwXaP6AYVNNGfHcmiSZ/S4zdVpuwWe0eMaXd2oY7mLB63FAMwNgGsJALAaj0lyRI/yz0/bXGcdbtex3AWD1mJAggAIANDLAp3IU3vc5n1JXtKjfB83T3LjjmVHGwD2EgSoTACA5Ts2yXd0LHtVkqfNfl2HO3Ysd3mSzw9ZkWUSAqhIAIDlO6lH2VemjQCsy/06lvt4lnwc8NCMBlDNKJbpwCZaoLN4RMdbXJHkxR3LDuXEjuU+OmgtVmjr19XSQXYyIwCwXLuSfGfHsq9LW/e/LruS3L9j2Q8NWZF1MSrATiYAQAcLdArHp/va/1d3LDeUu6RtXtTF3w9ZkXUTBNiJPAKABS3YEdy3423OS/LujmWH8siO5aZJ/nHIiozFvl97jwjYZAIALNfxHcudlrb5zzo9umO5M5NcOGRFxsp8ATaZAAAL6DAM3PVI3H/pWG4oJyS5c8ey7xiyIptCGGDTmAMAy/WNHcut+7Cfx/Qo+9bBarGhzBdgExgBgDl1bNRv2vF269xEZ3eSJ3cse2mSvx2uKr3tTnsMc9e00Zhjkhw9+/sjk1yZ5PzZ69y01QvvT5uDATuaAADL1fVn7KIhK7GghyW5Tcey70jbv2Bd9qTtuviQ2a93S3LYgte4Ji0E/EWS1yQ5e8D6wWgIADCHHkO6u7vesusNB/D0HmVfN1gt5nfDJP85yeOSfE+6n164164k95y9fjFtRONXk7yt53VhVCYmq8D2ej7PPTvdVgLcPckH+ty4o9skOSfdgsuXktwi7RyAVTgxyQ8neVS6H1i0iL9KO5fhE/N8sraVsTMJEJbr/I7ljh60FvP7iXQftXhTlt/5Xz/Jj6SFo3fOfr+Kzj9powsfTPJTWe8IDQxCAIBtDDCb+wsdyx3X98YdHJ5+w/9/OFRF9uPIJM9P8u9J/iBtUt86HJbk5Un+X1oYgY1lDgAcwEBLuboGgBOGuPmCnpbkiI5lP5rkb4arytccluS/Jfm5tBAwFo9PcsskD0/y5TXXBToxAgDL1fVUvAcMWYk5HJLW0Xb1ygx7/O+eJD+W5GNJfiXj6vz3OjHJn6XVFTaOAAD7MeBGLmd0LHendN9EqIvHJTm2Y9nLkpw8YF2+L8lZSX4n7V32mD0oyQvXXQnoQgCAfQy8i1ufmfxd9+Jf1CRtiL2r12aYfQvukOTUJKckud0A11uVn0nbOwE2imWAsMWStnA9N9021vnXtLXoy/bgJG/vWHaa5FvSb+viQ9PW2/9sNndi3blpZyd8bRWEtpWxMwIAM0vcv71r53qPrCYAPLtH2VPTr/P/jrRd934hm9v5J8k3pY0EwMYQACBLP7ylzw5yzx2sFvt3t7T17V39WsdyN0zyorS1/Hfscf8x+Zksvu0wrI0AQHkrOLnttCRf7Vj20Um+ecC67Os56b6pzT+m28E/3572rv+56b7p0BgdleRJ664EzMscAMpb0dGtb0zyyI5lT0nb635ot0ny8XTfD+SxSf54gc/fk+R/pk04XHXHf0XayoIz0078+2KSi5PcJG2lwd3TRkJu0vM+pyf5zsQcAMZPAKC0Sev9946EXb3EW52U5C09yj8qbavdIb0sybM6lj0n7YyDef/PjkvbPe9eHe/XxcfT1un/eZK/y8HresMkT03ygnQPAtekLaf8jLaVsRMAYB9LGhHYnbaNbde1/Z9Nm2V+8UD1OTLJJ9P95LxnJPlfc37uU5L8ZlbzfPw/0vYPeH26T068a9rBPzftWP6/JHmNtpWxMwcA9jGdTvf76unqJL/Xo/ytkry4byW2+PF07/zPS/J/5vi8o5L8Sdq/e9md//uSPDntscYvp9/KhDPSQktX9+9RFlZGAIA5DRAEXp7kkh7lfyyz58s9XT/JM3uUf2UOvv/9A9I2QXpUj/vM49Qk35X2aOHktGf9Q3hzknd3LHuXgeoASyUAwIJ6hIALkryix60nSV6V/uvln5TkFh3LXp7kt7b5+CFJfjVtCP2YjveYxz8l+e4kj0j3jvpgup5ueIdBawFLIgBABz1CwMuSXNrj1ndK2zWvq11pO+51dXLaDPr9uWPaZLufz/Laln9LO4nvfml7CCzT6R3LHR0nrbIBBADoqGMIOC/tHXIfz03344JPSvd9Ba5O8usH+NiPpj2Hv0/Hax/MxUl+Oq3ur8+wJw8eyEfTZvV30XV+BayMAAA9dJwX8GtJPtjjtnuS/G66/fz22fb3lLTjebc6Mskbkvx+ltfpnZp23sBvpPuGSl1cneQrHcvecMiKwDIIADCABYPAlWkT+rq+u0ySb0vyEwuW+db0m0S477a/J6ZN9HtMj2tu5/y0JXWPSPLpJd3jYLq2kasMKtCJAAADWiAIvDdtNn0fL8xiE+36HPn77rQ6J22i36+kTfS7dY9rbudP0h5zvGZJ15/HTZLcoGPZriMHsDICACzBnEHgF5J8qsdtbpz5N+O5Q/ptJ/zSLdc5Pa3uy9jO9wtp5x88Jm1Tn3W6fcdylyS5bMiKwDIIALBEBwkCl6RtyNPH96V1mAfTZ//9j6RtY/xDaRP97tvxOgdzWtoRyG9c0vUXdb+O5fqEOlgZAYCNt93WvSs66OegtgkCb00b7u7j5UmO2ObjN0vrvLv6vbR9/E9OcniP6xzIV9LOJHhw2pbHY3Fix3LnDFoLWBIBgI02lg5+XgcIAs9MclGPy94yyUu2+fhPpt+s9J9L8rge5bfz4bR32r+Z1Sztm9cNkjy8Y9n3D1gPWBoBgI00mUyu0/nvLwhMJpPRHsm6TxD4XNra/j6emv2/Yz00LQD0cXTP8vszTZu/cJ+0vffH5vvTfbTjfUNWBJZFAGCj7Nvx7/ux/f1+zGYhYJK2rv+velxq7zbB+85a/9F0P9VuWb6Y1sE+I21r4TF6VsdyVyd514D1gKURANgI23X8233eJgSB6Uzaevc/7XGp45L80pY/7073jmxZ3p523O6fr7si23hg2p4JXfxzkgsHrAssjQDA6G1CJz6E6XT6lel0+si0ofyuG8k8J9eeRvfIdF/KNrQr0rbyfViSz6+5LtvZlX7HLvcJcLBSAgCjNe+7/p1mOp3+bbo/tz8kbdb+7vQ79GdIZ6XtXPgbGddEv/15ZpJ7diw7TTunADbCZKyTpKhpGR3+qr7HJ5PJ7ul0evWA1/u9JE/pWPyPkvzgUHXpaJrkt9OCyFif9W91xyT/muSwjuXfleQBe/+gbWXsBABGY5nv9jfx+3wymexJ24J3WRvvLNN5aeHlzeuuyJxukOQ9aRsRdfXobNnEaBO/56hFAGA0BICvN5lMjklbVnazdddlAX+Z5Mlpyxs3wa60EZPH9rjGJ9PmW1y19y829XuOOswBoIRNnUswnU4/nbYv/lUH+9wRuCJtuP+h2ZzOP0lekX6df9IOZtqErxF8jREARmMVnfSmfr9PJpOfTvLr667HNs5K8oRs1i54u5L8VhY/Vnlf5yY5Pvus3NjU7zXqMAJAKUOGjFWuUphOpy9L8rqV3Gxxv53k3tmszv+GSV6b/p1/0nZx7LpsE9bGCACjscph+r7f91vrusJVBocm+fu0jXTG4Ly0LYhPWXdFFnTrtMl69xngWqcledD+PqBtZeyMAFBSn7Cxb9kVjgJ8OW1zn4tWcsPtnZbkbtm8zv+H084eGKLzvyzJfx3gOrAWAgBlLTqEf7BzCFY0h+GctGftg+03sKCvJnl2xnd078Ecl+TUJK/O9kcnL+LnknxsoGvBynkEwGiMZab+dDrtVZdV/ExNJpPnJ/kfS7/RdZ2dFj7+dcX37eNWSX4xydPSdkkcyp+nHWh0wC+2tpWxEwAYjbEEgL5WFAB2J3lv2uS7VTgnydOTnJm2l//YG467pp098IQkewa+9keS3C/Jxdt9kraVsRMAGI0DBID7pO0jf4u0SWf/kNbxrWsI/KCW+TM1mUzukuSJadv8Hru0G23virSNb/a+/j1tKdzeP38q65kVf2zanglPSnL3Jd3joiTfnrbscVvaVsZOAGA09gkA35Xk5WkTzfZ1XpI/S5vJ/dcZ2RKsoX+mJpPJrdM6/CdmPCsAtnNN2ijBubk2IOwNB+fO/nxJz3tMktw2beveE9Nm4t+p5zUP5vIkD0nbnvmgtK2MnQDAaGwJAD+S5FVJrjdHsQvTnse+MW0L2q8spXI9LfpzNplMjkjbW/6JaWFop03YvTBfP3pwSdo77Gna8PqN0k41PDLJoWnL945Je6d/5yQ3XmF9r0zyqLTvtbloWxk7AYDRmAWA+yd5Z+br/Pd1eZJ/TDuV7d1pa+YvG6h6y7ArrRO7wezPX07ywLRO/6Qk119Tvbiur6SFsVMXKaRtZewEAEZjFgDemzbBaghXJfmXJKenHajzkdnr0oGuv4ibpx0Wc1zasPW9Z78euoa6ML8vJfmBtEdNC9G2MnYCAKMxmUxOSPKhFdzqk2lB4Oy0ddz/keQLSc5Pm19wXtqQ7zz2JDlq9jpy9uvNktxh9rr97NdVDlczjH9L8n1JPtylsLaVsesyzArL8m0rus+xs9d+t3CduTgtEBzI9dI6+xsNWC/G46+SPD4tDMKOJAAwJkeuuwJb3GT2opYrkzw/yUvSVjPAjiUAMCbebbFOH0zylCT/tO6KwCrstKVFbLa/X3cFKOnyJM9Lcq/o/ClEAGBMzk7yd+uuBGVcleT3kxyf5EWZf+In7AgCAGPzrLStZlmN1yW5S9rQ96uSfCCtY9zJrkzy2rR/91PTti6GciwDZDS27AT4uCQnx0Y4q/Bt0+n0vVv/YjKZHJY2HH7fJN86+/XWa6jb0C5Ie8f/8iSfXvbNtK2MnQDAaOxzFsB9krwsbWdAluN90+n0XvN84mQyuVVaELjf7HXvJIcvsW5DuTLJXyT5v0nekhWOLmlbGTsBgNE4wGmA90pbj/3YrO/0u7G5Jsn7k5yW5HuTfHPH6zx5Op2e3KXgZDLZlbYf/9ZQcELGsbLo/CRvS9u3/+1p5wusnLaVsRMAGI0DBICvfTjtGNbHJHlE2g57lXwircM/LW1b2r1LJt+a5GEdrndekmOn0+nlw1TvoI8OprNX0r6W236xF3BZ2uTR9yd5T9pW0mdtudfaaFsZOwGA0ThIANjX8WkH5jw87THBDbb/9I3z+bQVEe9I6/TPOcDnvSltr/pFPWU6nf5Bx7rNbTKZ3DLtSOcTkjwybYTgBmkd9jvSNls6Jsk3zH5/SNqjhd1Jrp69vpQ2lP+FtG2bPzd7fSRtW+dRNmLaVsZOAGA0FgwAW10/bc7AdyX5jrSRgk3axe9LSc5IW4P+D2nvYv99zrKvTfKEDvf87ul0+s4O5TqbTCYPSOusD0ly07RHOp9MG66/aJV1WQVtK2M3hud10NcVaSf+nT778yTJ7dJO29v7ulNah7N7HRWcuTjJx2evM9M6/TPShve79hZdh/DXsQT4XdPpdDppSW932kFKh6YdnnRUks/EElBYGQGAnWiaNmR+TpI/2fL3e9KCwR2T3DbJrZLccsuvR6Sd2rfo7PbLklyYtszswrTh+8+mvbv9XNo6848l+WKXf8xBXNCx3FDP4Oc2nb0lnv161ez15czmM8yCwa5cd74AsCQCAJV8NW3C2NlzfO6RaWFg64jBrlx7QMzFs99fNrvuunQNFaP72Z8Fg+t0/D0eCwEHMbpGAEbiwtlr7LoeoLQRPev+nqMLBTAMAQA2W9cRgI0dYhcKYBjOAoDN1nVL22cPWos1m06nZt3DgiwDZDS8i+vkJum+hO6mSc7fiW3A3u+lvf+2dXxv7cT/V3YWIwCw2S5O97kK35LszOC174jA3j8bKYBrCQCw+f6tY7kT9v5mJ4aA7QgCIADATjDPssb9uc5JgJPJ5OteO50QQGUCAGy+MzqWm+so4J1OCKAqAQA23wc6ljshyY2GrMimEgKoSACAzdd1BOB6aScpEiGAegQA2HyfS/f9AE4csiLA5hAAYGf4u47lHjhoLTZc39UBRhHYJAIA7AxdA8C9kxwzZEV2gkX2Ddj38ywxZFMIALAznN6x3CTJSQf8YIGlgPPYX6euo2fTCQCwM3wg3Q8GetSQFdnJ7CbITiIAwM5wTZK3dyz7PdnmMUCVTYGgGgEAdo63diy3K8kPHuyThADYWZwGyGjoYHo7Ksl/pK3vX9TZSe6c5KANgjYDdgYjALBzXJDktI5l75TkQfN8YqWzAmAnEwBgZ/mjHmV/atECFQ8Qgp3CIwBGQ+cxiMOTfD7JoR3KTpPcLckHB63R1hvM2pvJZOJRAqyZEQDYWS5J8uaOZSdJfmnAunz9DbaMEuxv9GDrx4DlMgLAaGj0B3Niknd2LHtNkrsm+fBgtelJGwXLYQQAdp53pfsw/q4kLx6wLr2ZYwDLIQDAzvQ7PcqelOQhQ1VkaIIADMMjAEZDoz6ow5Ocm7Y3QBcfTnLPJF8dqkLLoP2C7owAwM50SZJX9Ch/QpLnDlQXYISMADAaRgAGd1TaKMDhHctfkeQeSc4aqkLLoh2DxRkBgJ3rgiSv7FH++klOTnLIMNVZHuERFmcEgNHQiC/FEUk+nuQbelzjRUmeN0htlkx7BvMzAgA720VJXtjzGs9J8uD+VVm+/S0X3HdzIUETGiMAjIaGeWn2JDkzye17XOOCJPdNcs4gNRoBbR/VGQGAne+rSX625zWOSvKmJIf1r844CJxUJwBADack+dOe17hrkjckuV7/6gDr5hEAG8M7tt5umbak7yY9r/OaJD+UdnrgRtP+UZkRADbGdDr9uhcL+VySnx/gOk/KyM4L6ML3D9UZAWDHMEIwl0naccGPGOBaL84wgWLltHsgALBDCQPbunmSM5IcPcC1Xpy2R8DGNCTaPGg8AmBH8qhgW19I8qNJrhngWs9NO3lw9wDXWjrfC3AtAYASBIGv89YkLxjoWk9LWx2wZ6DrLYWvP1yXRwCU5BFBkvYG4JQMMx8gaSHg8RnZ4wBtHOyfAEB5xcPAEUnem+T4ga73Q0n+cKBr9aZ9gwMTAGCmcBC4bZL3JLnFANc6M8kJA1ynN20bbM8cAJgp3GF8Isn3Jrl0gGvdOcntBrhOL4W/ljA3AQC2KDxZ8J+TPDbt3IC+7jDANTor+vWDhQkAsB9Fg8BfpE3iu7Lndcr9x8EmEgBgGwWDwJ+mhYCrelzjrIHqsrBiXyvoRQCAORTrWN6U5Inp9jjgA0k+PWx15lPsawS9CQAwp2KjAW9I8v1JLluw3K8soS4HVejrAoMRAGBBhTqbtyV5YJIL5vz8Vyf546XV5gAKfT1gUAIAdFBoNOC9Se6fNrR/INckeVmSp66kRlsU+RrAUtgICHoqsoHQniQ/OHvdI8kNk3w+yd+kHQb0vlVXSNsF/QgAAFCQRwAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUJAAAAAFCQAAUND/B64ESHDWC/KiAAAAAElFTkSuQmCC'/%3E%3C/defs%3E%3C/svg%3E%0A");
background-size: contain;
transform: translate(-50%, -170%);
position: absolute;
left: 50%;
}
.intimate-gifting .standard__heading,
[data-section-id="template--23824206594361__section_double_cKaJLH"]
.standard__heading {
padding-top: 50px;
}
/*--------------Image banner overflow------------------*/
.enable_custom_css_1 .hero__kicker {
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%) !important;
}
.enable_custom_css_1 .hero__cta__wrapper {
bottom: 40px !important;
position: absolute;
left: 50%;
transform: translateX(-50%) !important;
}
.enable_custom_css_1 .hero__description {
padding-bottom: 30px;
}
@media (max-width: 767px) {
.enable_custom_css_1 .hero__description p {
max-width: 220px;
margin: 0 auto;
}
}
/*-----------------Brand label product page--------------*/
.brand-label {
text-transform: uppercase !important;
}
.collection-brand-label {
opacity: 1;
font-size: 11px;
text-transform: uppercase;
font-family: var(--FONT-STACK-HEADING) !important;
}
.product__grid__title {
margin: 4px 0 2px !important;
text-transform: uppercase !important;
}
/*-------------------Footer icons---------------------------*/
.footer__column a[href^="mailto:"]::before {
content: "";
display: inline-block;
width: 1em; /* Adjust the size as needed */
height: 1em; /* Adjust the size as needed */
margin-right: 0.5em; /* Add spacing between the icon and the text */
background: url('data:image/svg+xml;utf8,')
no-repeat center;
background-size: 100% 100%; /* Ensures the icon fills the entire pseudo-element box */
vertical-align: middle; /* Ensures alignment with text */
text-decoration: unset !important;
}
.footer__column a[href^="tel:"]::before {
content: "";
display: inline-block;
width: 1em; /* Adjust size as needed */
height: 1em; /* Adjust size as needed */
margin-right: 0.5em; /* Spacing between the icon and the text */
background: url('data:image/svg+xml;utf8,')
no-repeat center;
background-size: 100% 100%; /* Ensures the icon fills the box */
vertical-align: middle; /* Aligns the icon with the text */
}
/*-------------Hero Section -------------------*/
@media (max-width: 768px) {
.hero__cta__wrapper .hero__btn {
margin-top: 0px;
}
.custom-scrollbar {
display: none !important;
}
flickity-carousel .flickity-prev-next-button.next {
display: none;
}
}
/*--------------About---------*/
@media (max-width: 768px) {
.brick__block__text.brick__block__text--transparent.text--neutral {
padding: 0 40px !important;
}
/*[data-section-id="template--23950982283577__section_columns_EM7myd"]
[data-custom-scrollbar-items] {
flex-direction: column !important;
}*/
}
/*--------------Collection filters-----------------*/
.collection__nav {
border: none;
border-color: transparent;
}
.collection__filters__toggle {
border: none;
}
/*----------------Sticky collection filter----------------------*/
@media (min-width: 768px) {
.collection__filters__outer {
position: sticky;
top: 40px;
z-index: 10;
}
}
.sidebar__filter__group:has(
.sidebar__navigation__list > li:first-child:last-child
) {
display: none;
}
.product__block__text {
padding-bottom: 2px;
padding-top: 6px;
}
.product__block__price {
padding-bottom: 20px !important;
}
/*-----------------Footer icons----------------*/
.standard__icons.aos-init.aos-animate {
--ICON-BLOCK-COLS: 25% !important;
}
/*---------Collection list--------------*/
.section-without-title:not(.not-moved-arrows):not(.hidden-arrows):not(
.section-without-title--skip
) {
padding-top: 2px;
}
/*------------Hide if 1 color variant is available-------------*/
.grid__swatch__container:has(
.grid__swatch__hover radio-swatch:first-child:last-child
) {
display: none;
}
/*----------------Collection filter show/hide btn-----------*/
@media (min-width: 768px) {
.collection__filters__toggle {
padding: 0;
}
}
@media only screen and (max-width: 767px) {
.sidebar__navigation__list {
border-top: none;
margin-top: 0px;
padding-top: 0px;
}
}
/*-------------Disable image zooming for Gallery section -------------*/
.disabled-zoom {
display: none !important;
}
/*--------------RTL styling---------------*/
/*---------Homepage slider---------*/
html[lang="ar"] .section-slideshow .hero__content .hero__title,
html[lang="ar"] .section-slideshow .hero__content .hero__description p {
text-align: right !important;
}
html[lang="ar"] .section-slideshow .flickity-page-dots {
left: var(--outer);
right: auto;
}
/*--------------Image Banners--------------*/
html[lang="ar"] .hero__description p {
text-align: center !important;
}
/*--------------Product list------------------*/
html[lang="ar"] .product__grid__price .price {
direction: ltr !important;
display: inline-flex;
}
/*------------Column items------------*/
html[lang="ar"]
.section-columns
.index__column.grid__item.slide-item
.body-size-4
p {
text-align: center !important;
}
/*--------------Icon standard------------*/
html[lang="ar"] .standard__icons .standard__icon .standard__rte p {
text-align: center !important;
}
/*-----------Footer Newsletter form------------*/
html[lang="ar"] .newsletter-block .input-group-button [class^="icon"] {
transform: rotate(180deg) !important;
}
/*-----------------HEADER---------------*/
/*----------Topbar icons-------------*/
html[lang="ar"] .header__desktop__bar__r .header__desktop__button:last-child {
padding-left: var(--nav-gutter) !important;
padding-right: 15px !important;
}
/*--------------------Megamenu seperators-----------*/
html[lang="ar"] .dropdown__family a[href="#break"] {
width: 0 !important;
height: 300px;
padding: 0;
}
html[lang="ar"] .dropdown__family--grandchild a[href="#break"] .navlink {
padding: 0 !important;
}
html[lang="ar"] .dropdown__family:has(a[href="#break"]) {
padding: 0 !important;
width: 0 !important;
height: 300px !important;
}
html[lang="ar"] .dropdown__family:has(a[href="#break"]) .navtext {
display: none !important;
}
html[lang="ar"] .dropdown__family--grandchild {
padding-left: 60px !important;
padding-right: 0 !important;
max-width: 180px !important;
min-width: 0px !important;
}
html[lang="ar"] .header__dropdown__inner .dropdown__family {
flex: 0 1 20% !important;
}
html[lang="ar"] .text-btn-arrow-right:after {
left: 0 !important;
right: 110% !important;
transform: translateY(-50%) rotate(225deg) !important;
}
[dir="rtl"] * {
letter-spacing: 0px !important;
}
@media only screen and (min-width: 768px) {
[dir="rtl"] .footer__aside {
margin: 0px var(--outer-offset) 0 var(--padding-top) !important;
}
}
[dir="rtl"] .btn,
[dir="rtl"] p,
[dir="rtl"] a,
[dir="rtl"] div,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] button,
[dir="rtl"] label,
[dir="rtl"] strong,
[dir="rtl"] .announcement strong,
[dir="rtl"] span {
letter-spacing: 0 !important;
}
[data-select-label="اللون"][data-option-position="2"]:has(
radio-swatch:first-child:last-child
) {
display: none !important;
}
[dir="rtl"] .intimate-gifting h2 {
line-height: inherit !important;
}
[dir="rtl"] .footer__column a[href^="mailto:"]:before,
[dir="rtl"] .footer__column a[href^="tel:"]:before {
margin-left: 0.5em !important;
margin-right: 0 !important;
}
.footer__column a[href^="mailto:"],
.footer__column a[href^="tel:"] {
text-decoration: none !important;
}
/*--------------Brands logo list-----------------*/
[dir="rtl"] .logo-bar__holder > .logo-bar .ticker--animated {
animation-direction: reverse !important;
}
[dir="rtl"] .logo-bar__scale {
transform: translateX(15%) !important;
}
/*------------------Collection Pages RTL---------------*/
[dir="rtl"] .sidebar__heading-chevron {
right: auto !important;
left: 0% !important;
}
[dir="rtl"] .sidebar__heading-chevron [class^="icon"] {
transform: rotate(180deg) !important;
}
[dir="rtl"] .template-collection .text--neutral .rte p {
text-align: center !important;
}
[dir="rtl"] .sidebar__filter__group .sidebar__heading {
padding: 0 4px 4px 27px;
}
[dir="rtl"] .sidebar__filter__group {
padding-left: 5px !important;
}
[dir="rtl"] .collection__text-content .collection__heading .rte p {
text-align: center !important;
}
[dir="rtl"] .product-clip__image {
margin-left: 10px !important;
}
[dir="rtl"] .product__grid__sibs .siblings__link__holder {
padding: 0 0px 10px 10px !important;
}
[dir="rtl"] .sidebar__heading {
text-align: left !important;
}
[dir="rtl"]
.product__grid__info.text-left
.grid__swatch__container
.swatch__button:first-child {
margin-right: 0 !important;
margin-left: 6px !important;
}
/*--------------Products page RTL - DESKTOP + MOBILE ----------------*/
@media only screen and (min-width: 768px) {
[dir="rtl"] .product-page .product__main__content .product__inner {
padding-right: var(--outer) !important;
}
}
[dir="rtl"] .product-page .select-popout__toggle {
padding: var(--form-top) var(--form-left) var(--form-top) 28px !important;
}
[dir="rtl"] .product-page .select-popout__toggle svg {
left: 12px !important;
right: auto !important;
}
[dir="rtl"] .product-page .select-popout__option {
text-align: right !important;
}
[dir="rtl"] .btn-state-ready span[data-button-price],
[dir="rtl"] .product__price span {
display: inline-block !important;
direction: ltr !important;
}
[dir="rtl"] .product-clip .product-clip__content .product-clip__title,
[dir="rtl"] .product-clip .product-clip__content .product-clip__price {
text-align: right !important;
}
[dir="rtl"] .product-clip__image {
margin-left: 10px !important;
margin-right: 0 !important;
}
[dir="rtl"] .radio__fieldset .radio__button label {
padding: 9px !important;
}
[dir="rtl"] .product-page .siblings__swatch {
margin-left: 10px !important;
margin-right: 0px !important;
}
[dir="rtl"]
[data-select-label="لون"][data-option-position="1"]:has(
radio-swatch:first-child:last-child
) {
display: none !important;
}
[dir="rtl"]
[data-select-label="لون"][data-option-position="2"]:has(
radio-swatch:first-child:last-child
) {
display: none !important;
}
[dir="rtl"] .rte li {
text-align: right !important;
}
[dir="rtl"] .rte li::marker {
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
text-transform: none;
text-indent: 0px !important;
text-align: start !important;
text-align-last: start !important;
}
[dir="rtl"] .rte ul,
[dir="rtl"] .rte ol {
margin-right: 20px !important;
}
/*---------------------Pages----------------*/
[dir="rtl"] section[data-section-type="rich-text"] .text__standard .rte p {
text-align: center !important;
}
/***************************Mobile Adjustments*******************************/
/*--------------Menu--------------*/
[dir="rtl"] .header__mobile__button svg {
transform: rotate3d(0, 1, 0, 180deg);
}
[dir="rtl"] .sliderule__chevron--right svg,
[dir="rtl"] .drawer__button,
[dir="rtl"] .footer__title svg {
transform: rotate(180deg) !important;
}
@media (max-width: 1024px) {
[dir="rtl"] .footer__title .icon-theme {
top: calc(50% - 8px) !important;
}
[dir="rtl"] .collection__filters__outer .drawer__button {
padding: 5px !important;
}
[dir="rtl"] .sliderow:has(a[href="#break"]) {
display: none !important;
}
[dir="rtl"] .header__dropdown__image.is-below-image {
padding-right: 15px;
padding-left: 15px;
}
/*----------------Homepage---------------*/
[dir="rtl"] [data-grid]:not([data-grid-no-gutters]):after {
padding-right: 0 !important;
}
[dir="rtl"] .section-slideshow .hero__content .hero__description p,
[dir="rtl"] .section-slideshow .hero__content .hero__title {
text-align: center !important;
}
[dir="rtl"] .section--image .enable_custom_css_1 .hero__title {
padding-top: 10px;
}
/*-------------Collection------------*/
[dir="rtl"] .collection__text-content .collection__heading .rte p {
text-align: center !important;
}
}
@media (min-width: 768px) {
.drawer__account {
margin-right: 40px !important;
}
}
@media (max-width: 768px) {
[data-section-id="template--23950982283577__section_columns_EM7myd"]
[data-custom-scrollbar-items] {
padding-left: 0 !important;
}
[data-section-id="template--23950982283577__section_columns_EM7myd"]
[data-grid][data-grid-small]
[data-item] {
margin: 0 auto !important;
}
}
[dir="rtl"] .view_all_link .navtext {
font-size: 12px !important;
}
/*----------------Heading Lineheights-------------*/
[dir="rtl"] .standard__heading,
[dir="rtl"] .standard__heading p {
line-height: 1.9em !important;
}
[dir="rtl"]
.rte:not(
[class*="body-size-"],
[dir="rtl"] [class*="accent-size-"],
[dir="rtl"] [class*="heading-size-"]
)
p {
line-height: calc(var(--leading-snug) * 1.25) !important;
}
[dir="rtl"] .radio__legend span:not(.radio__legend__label) {
padding-right: 5px !important;
padding-left: 0 !important;
border-right: 1px solid var(--border) !important;
border-left: none !important;
margin-right: 6px !important;
margin-right: 0 !important;
line-height: 1.8em !important;
}
[dir="rtl"] .radio__legend__label {
margin: 0 5px 0 0 !important;
border: none !important;
}
[dir="rtl"] .body-size-1,
[dir="rtl"] .body-size-2 {
line-height: calc(var(--leading-relaxed) * 1.25);
}
[dir="rtl"] .body-size-3,
[dir="rtl"] .body-size-4 {
line-height: calc(var(--leading-normal) * 1.25);
}
[dir="rtl"] .body-size-5,
[dir="rtl"] .body-size-6,
[dir="rtl"] .body-size-7 {
line-height: calc(var(--leading-snug) * 1.25);
}
[dir="rtl"] .body-size-8,
[dir="rtl"] .body-size-9,
[dir="rtl"] .body-size-10 {
line-height: calc(var(--leading-tight) * 1.25);
}
[dir="rtl"] .body-size-11,
[dir="rtl"] .body-size-12,
[dir="rtl"] .body-size-13 {
line-height: calc(var(--leading-hairline) * 1.25);
}
[dir="rtl"] .body-size-14,
[dir="rtl"] .body-size-15 {
line-height: calc(var(--leading-none) * 1.25);
}
[dir="rtl"] .section-slideshow p {
max-width: 650px !important;
}
[dir="rtl"] .drawer .line__price,
[dir="rtl"] span[data-cart-final] {
display: inline-block !important;
direction: ltr !important;
}
[dir="rtl"] .quickview__modal .drawer__button {
padding-left: 20px !important;
}
[dir="rtl"] .filter__price__fields {
flex-direction: row-reverse;
}
[dir="rtl"] .range__line {
direction: ltr !important;
}
[dir="rtl"] .header__drawer .drawer__close {
left: 0 !important;
right: auto;
}
[dir="rtl"] .drawer__account {
margin-left: 20px !important;
margin-right: 0 !important;
}
/*--------------Language switcher topbar------------*/
@media (min-width: 768px) {
.toolbar__locale.toolbar__wrap {
position: absolute;
top: -23px;
right: var(--outer) !important;
left: auto !important;
}
[dir="rtl"] .toolbar__locale.toolbar__wrap {
left: var(--outer) !important;
right: auto !important;
}
.header__inner--bar.header__inner--bar-nav {
padding: 0;
height: 0 !important;
}
[data-header-transparent="true"] .toolbar__locale.toolbar__wrap {
right: 0px !important;
left: auto !important;
}
.meganav--visible[data-header-transparent="true"]
.toolbar__locale.toolbar__wrap {
right: var(--outer) !important;
left: auto !important;
}
[dir="rtl"] [data-header-transparent="true"] .toolbar__locale.toolbar__wrap {
left: 0px !important;
right: auto !important;
}
[dir="rtl"]
.meganav--visible[data-header-transparent="true"]
.toolbar__locale.toolbar__wrap {
left: var(--outer) !important;
right: auto !important;
}
}
.popout {
color: #fff !important;
}
[data-header-transparent="true"]:not(.meganav--visible)
.theme__header__toolbar:after {
height: 0 !important;
}
/*-----------------Cart drawer-----------------*/
@media (max-width: 768px) {
[dir="rtl"] .cart__items__remove {
left: var(--gutter);
right: auto;
}
}
/*--------------------Collection filters---------------------*/
@media (max-width: 768px) {
[dir="rtl"] .collection__filters__outer {
left: auto !important;
right: 0;
transform: translate3d(100%, 0, 0) !important;
}
[dir="rtl"] .drawer--visible .collection__filters__outer {
transform: translateZ(0) !important;
}
[dir="rtl"] .collection__filters__inner {
transform: translate3d(100%, 0, 0) !important;
}
[dir="rtl"] .drawer--visible .collection__filters__inner {
transform: translateZ(0) !important;
}
}
[dir="rtl"] .collection__active__filters .active__filters__remove {
display: inline-block;
direction: ltr !important;
}
/*--------------------Beige darkening image backgrounds--------------------------*/
.product-grid-item__image-wrapper > div,
.product-image-wrapper > div:first-child,
.subcollection__image > div:first-child,
.search__results__products__list .product__inline__image,
.page-search .search__item__generic__image div,
.siblings__swatch .sibling__image div {
background: #f0e9e1 !important;
}
.product-grid-item__image-wrapper > div img,
.product-image-wrapper > div:first-child img,
.subcollection__image > div:first-child img,
.search__results__products__list .product__inline__image img,
.page-search .search__item__generic__image div img,
.siblings__swatch .sibling__image div img {
mix-blend-mode: darken;
}
.siblings__swatch .sibling__image div {
border-radius: 50px;
}
/*--------------Subfooter Payment Methods Alignments---------------*/
@media (min-width: 768px) {
.subfooter__copyright {
display: flex;
align-items: center;
}
}
.subfooter__copyright:has(a[href*="emaginelb.com"])::after {
content: "";
display: inline-block;
height: 24px;
width: 130px; /* Adjust width based on number of icons */
background: url("data:image/svg+xml,%3Csvg class='icon icon--full-color' version='1.1' xmlns='http://www.w3.org/2000/svg' x='0' y='0' viewBox='0 0 38 24' xml:space='preserve' width='38' height='24' role='img' aria-labelledby='pi-mada'%3E%3Ctitle id='pi-mada'%3EMada%3C/title%3E%3Cpath d='M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z' opacity='.07'%3E%3C/path%3E%3Cpath d='M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32' fill='%23fff'%3E%3C/path%3E%3Cpath d='M11 7.2h6c.2 0 .3.1.3.3v3.7c0 .1-.1.2-.2.2H5.4c-.3 0-.4-.1-.4-.4V7.6c0-.3.1-.4.4-.4 1.8-.1 3.7-.1 5.6 0 0-.1 0 0 0 0z' fill='%2315a2db'%3E%3C/path%3E%3Cpath d='M11 12.7h5.8c.2 0 .3.1.3.3v3.5c0 .2-.1.2-.3.3H5.2c-.4 0-.5-.1-.5-.4V13c0-.3.1-.4.4-.4 2.1.1 4 .1 5.9.1z' fill='%2388be44'%3E%3C/path%3E%3Cpath d='M30.6 8.9v-1c.1-.3.2-.5.5-.6.4-.1.9-.2 1.4-.1.6.1.9.5 1.1 1 .3.7.1 1.4-.3 1.9-.3.4-.8.5-1.3.5-1.3-.1-2.6-.1-4-.1h-2c-.1 0-.2 0-.2-.2V10c0-.2.1-.3.3-.3h1.4c.1 0 .1-.1.1-.1V8.5c-.1-.4-.3-.6-.7-.7h-.6c-.2 0-.3-.1-.2-.3 0-.1 0-.2.1-.3 0-.1.1-.2.2-.2h.9c.7.1 1.2.5 1.3 1.2.1.3.1.6.1.9v.4c0 .2.1.2.2.2h1.4c.2 0 .2-.1.2-.2.1-.1.1-.4.1-.6zm.9 0v.7c0 .1 0 .2.1.2.4.2 1-.1 1.1-.5.1-.3.1-.6 0-.9-.1-.2-.2-.3-.4-.4h-.5c-.3 0-.4.1-.3.4v.5zM22.2 11h-2.1c-.4 0-.8-.1-1.1-.5l-.3-.6c-.1-.5-.1-.9 0-1.4.1-.7.6-1.2 1.4-1.2h1.2c.1 0 .1 0 .1.1v.3c-.1.2-.2.3-.4.3h-.8c-.4.1-.6.3-.6.6-.1.4-.1.7 0 1.1.1.4.3.6.7.6h3.9c.2-.1.3-.2.3-.4s-.1-.4-.3-.4h-1.4c-.8-.1-1.1-1-.7-1.7.1-.2.3-.3.6-.4.2-.1.5-.1.7-.1h2c.1 0 .2 0 .1.2v.3c0 .2-.1.3-.3.3h-2.1c0-.1-.1 0-.1.2s.1.4.4.4h.9c.2 0 .4 0 .6.1.5.2.8.6.7 1.1 0 .1 0 .2-.1.3-.1.4-.3.6-.7.7-.3.1-.6.1-.9.1h-1.7zm-3.6 4.3v-1.1c0-.3.1-.5.4-.5.5-.2 1-.2 1.5-.2.2 0 .3.1.4.1.1.1.2 0 .3 0 .4-.2.8-.2 1.2-.1.5.1.8.4.9.9v2.1c0 .2-.1.2-.2.2h-.5c-.2 0-.2-.1-.2-.2v-1.8c0-.4-.2-.5-.6-.5h-.1c-.2.1-.2.1-.2.3v2c0 .2-.1.2-.2.2h-.5c-.2 0-.2-.1-.2-.2v-1.7c0-.4-.4-.6-.8-.4-.1 0-.1.1-.1.2v1.9c0 .3-.1.3-.3.3H19c-.2 0-.2-.1-.2-.2v-.1c-.2-.5-.2-.9-.2-1.2zm11.7-1.1v1.9c0 .3-.1.5-.4.6-.5.1-1 .2-1.5.1s-.9-.4-1-1c-.1-.5-.1-.9 0-1.4.2-.6.8-1 1.5-.9.1 0 .2 0 .3.1.2 0 .2 0 .2-.2V12.5c0-.1.1-.2.2-.3.2 0 .3-.1.5-.1.1 0 .2 0 .2.2v1.9zm-1 .8v-.5c0-.1 0-.1-.1-.2-.3-.2-.8-.1-.9.2-.2.4-.2.8 0 1.1.2.4.5.5.9.4.1 0 .2-.1.1-.2V15zm-2.6.5v1c0 .2-.1.3-.2.2-.3-.1-.7-.1-1-.1s-.5.1-.8 0c-.4-.1-.8-.3-.9-.7-.2-.6.1-1.1.7-1.2.4-.1.7-.1 1.1-.1.2 0 .2 0 .2-.2s-.1-.4-.3-.4H25c-.2 0-.4.1-.6.1-.1 0-.3.1-.4-.1-.1-.1-.1-.3 0-.5l.1-.1c.5-.2 1.1-.3 1.7-.2h.2c.4.1.7.4.8.8v1c-.1.4-.1.5-.1.5zm-1.3-.1c-.2 0-.4 0-.5.1-.2.1-.2.2-.2.4s.1.3.3.3h.4c.3 0 .3-.1.4-.4 0-.4 0-.5-.4-.4zm8.3.1v1c0 .2-.1.2-.2.2-.4-.1-.9-.1-1.3 0-.3.1-.6 0-.9-.1-.3-.2-.5-.5-.5-.8 0-.4.1-.6.5-.8.3-.2.6-.2.9-.2h.5c.1 0 .1 0 .2-.1 0-.3-.1-.5-.4-.5-.3 0-.7 0-1 .1-.1 0-.1.1-.2.1s-.2 0-.2-.1V14c0-.1 0-.2.1-.2.6-.2 1.2-.3 1.8-.2.6.1.8.5.8 1.1-.1.2-.1.5-.1.8zm-.9.2v-.2c0-.1 0-.1-.1-.1h-.6c-.2.1-.4.2-.3.4 0 .2.2.3.4.3h.4c.1 0 .2-.1.2-.2v-.2z' fill='%23262d35'%3E%3C/path%3E%3C/svg%3E")
no-repeat left center,
url("data:image/svg+xml,%3Csvg class='icon icon--full-color' viewBox='0 0 38 24' xmlns='http://www.w3.org/2000/svg' role='img' width='38' height='24' aria-labelledby='pi-visa'%3E%3Ctitle id='pi-visa'%3EVisa%3C/title%3E%3Cpath opacity='.07' d='M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z'%3E%3C/path%3E%3Cpath fill='%23fff' d='M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32'%3E%3C/path%3E%3Cpath d='M28.3 10.1H28c-.4 1-.7 1.5-1 3h1.9c-.3-1.5-.3-2.2-.6-3zm2.9 5.9h-1.7c-.1 0-.1 0-.2-.1l-.2-.9-.1-.2h-2.4c-.1 0-.2 0-.2.2l-.3.9c0 .1-.1.1-.1.1h-2.1l.2-.5L27 8.7c0-.5.3-.7.8-.7h1.5c.1 0 .2 0 .2.2l1.4 6.5c.1.4.2.7.2 1.1.1.1.1.1.1.2zm-13.4-.3l.4-1.8c.1 0 .2.1.2.1.7.3 1.4.5 2.1.4.2 0 .5-.1.7-.2.5-.2.5-.7.1-1.1-.2-.2-.5-.3-.8-.5-.4-.2-.8-.4-1.1-.7-1.2-1-.8-2.4-.1-3.1.6-.4.9-.8 1.7-.8 1.2 0 2.5 0 3.1.2h.1c-.1.6-.2 1.1-.4 1.7-.5-.2-1-.4-1.5-.4-.3 0-.6 0-.9.1-.2 0-.3.1-.4.2-.2.2-.2.5 0 .7l.5.4c.4.2.8.4 1.1.6.5.3 1 .8 1.1 1.4.2.9-.1 1.7-.9 2.3-.5.4-.7.6-1.4.6-1.4 0-2.5.1-3.4-.2-.1.2-.1.2-.2.1zm-3.5.3c.1-.7.1-.7.2-1 .5-2.2 1-4.5 1.4-6.7.1-.2.1-.3.3-.3H18c-.2 1.2-.4 2.1-.7 3.2-.3 1.5-.6 3-1 4.5 0 .2-.1.2-.3.2M5 8.2c0-.1.2-.2.3-.2h3.4c.5 0 .9.3 1 .8l.9 4.4c0 .1 0 .1.1.2 0-.1.1-.1.1-.1l2.1-5.1c-.1-.1 0-.2.1-.2h2.1c0 .1 0 .1-.1.2l-3.1 7.3c-.1.2-.1.3-.2.4-.1.1-.3 0-.5 0H9.7c-.1 0-.2 0-.2-.2L7.9 9.5c-.2-.2-.5-.5-.9-.6-.6-.3-1.7-.5-1.9-.5L5 8.2z' fill='%23142688'%3E%3C/path%3E%3C/svg%3E")
no-repeat right center,
url("data:image/svg+xml,%3Csvg class='icon icon--full-color' viewBox='0 0 38 24' xmlns='http://www.w3.org/2000/svg' role='img' width='38' height='24' aria-labelledby='pi-master'%3E%3Ctitle id='pi-master'%3EMastercard%3C/title%3E%3Cpath opacity='.07' d='M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z'%3E%3C/path%3E%3Cpath fill='%23fff' d='M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32'%3E%3C/path%3E%3Ccircle fill='%23EB001B' cx='15' cy='12' r='7'%3E%3C/circle%3E%3Ccircle fill='%23F79E1B' cx='23' cy='12' r='7'%3E%3C/circle%3E%3Cpath fill='%23FF5F00' d='M22 12c0-2.4-1.2-4.5-3-5.7-1.8 1.3-3 3.4-3 5.7s1.2 4.5 3 5.7c1.8-1.2 3-3.3 3-5.7z'%3E%3C/path%3E%3C/svg%3E")
no-repeat center center;
background-size: 40px 24px; /* Resize icons if needed */
margin-left: 40px;
}
@media (max-width: 768px) {
.subfooter__copyright:has(a[href*="emaginelb.com"])::after {
margin-left: 0px !important;
margin-top: 15px !important;
}
.subfooter__item.subfooter__item--social {
margin: 15px 0;
}
}
@media (min-width: 1024px) {
[dir="rtl"] .subfooter__copyright:has(a[href*="emaginelb.com"]):after {
margin-right: 40px;
}
}
/* ====== Heading hierarchy – scoped to .blog__article ====== */
.blog__article h1 {
}
.blog__article h2,
.blog__article h3,
.blog__article h4,
.blog__article h5,
.blog__article h6 {
font-weight: 400;
text-transform: capitalize !important;
letter-spacing: 0 !important;
margin-bottom: 15px !important;
}
.blog__article img {
width: 100% !important;
}
/*----------HIde from collection filter the lingerie label--------------*/
.template-collection #accordion-category-1 label[aria-label="Lingerie"] {
display: none !important;
}
.sidebar__heading__color {
display: none !important;
}
/*-----------------Footer Language Switcher-------------------*/
#lang-list-localization-form-footer .popout-list__option span {
color: #111111 !important;
}
@media (max-width: 768px) {
.subfooter__copyright:has(a[href*="emaginelb.com"]):after {
display: block !important;
}
[dir="rtl"] .shopify-section-group-group-footer .subfooter__copyright {
margin-left: 30px;
margin-right: 10px;
}
/*-----------------Header Language Switcher-------------------*/
#lang-list-localization-form-drawer .popout-list__option span {
color: #111111;
}
}
/*----------------Slideshow Hero content arabic---------------*/
@meida (max-width: 768px) {
[dir="rtl"] .section-slideshow .hero__content .hero__title {
line-height: 1.8;
}
}
li.popout-list__item [lang="ar"] span {
font-family: "Alexandria", sans-serif;
}
/*-------------New Saudi Riyal Symbol---------------*/
.product__price__main .product__price:before,
.product__grid__price .price:before,
.btn-state-ready [data-button-price]:before,
.product__inline__price .price:before,
.filter__price__field span:before,
.cart .checkout__button span:before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1124.14 1256.39%22%3E%3Cpath fill%3D%22%23231f20%22 d%3D%22M699.62%2C1113.02h0c-20.06%2C44.48-33.32%2C92.75-38.4%2C143.37l424.51-90.24c20.06-44.47%2C33.31-92.75%2C38.4-143.37l-424.51%2C90.24Z%22%2F%3E%3Cpath fill%3D%22%23231f20%22 d%3D%22M1085.73%2C895.8c20.06-44.47%2C33.32-92.75%2C38.4-143.37l-330.68%2C70.33v-135.2l292.27-62.11c20.06-44.47%2C33.32-92.75%2C38.4-143.37l-330.68%2C70.27V66.13c-50.67%2C28.45-95.67%2C66.32-132.25%2C110.99v403.35l-132.25%2C28.11V0c-50.67%2C28.44-95.67%2C66.32-132.25%2C110.99v525.69l-295.91%2C62.88c-20.06%2C44.47-33.33%2C92.75-38.42%2C143.37l334.33-71.05v170.26l-358.3%2C76.14c-20.06%2C44.47-33.32%2C92.75-38.4%2C143.37l375.04-79.7c30.53-6.35%2C56.77-24.4%2C73.83-49.24l68.78-101.97v-.02c7.14-10.55%2C11.3-23.27%2C11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z%22%2F%3E%3C%2Fsvg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 5px;
}
.cart__items__price .line__price:before {
content: "";
display: inline-block;
width: 13px;
height: 13px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1124.14 1256.39%22%3E%3Cpath fill%3D%22%23231f20%22 d%3D%22M699.62%2C1113.02h0c-20.06%2C44.48-33.32%2C92.75-38.4%2C143.37l424.51-90.24c20.06-44.47%2C33.31-92.75%2C38.4-143.37l-424.51%2C90.24Z%22%2F%3E%3Cpath fill%3D%22%23231f20%22 d%3D%22M1085.73%2C895.8c20.06-44.47%2C33.32-92.75%2C38.4-143.37l-330.68%2C70.33v-135.2l292.27-62.11c20.06-44.47%2C33.32-92.75%2C38.4-143.37l-330.68%2C70.27V66.13c-50.67%2C28.45-95.67%2C66.32-132.25%2C110.99v403.35l-132.25%2C28.11V0c-50.67%2C28.44-95.67%2C66.32-132.25%2C110.99v525.69l-295.91%2C62.88c-20.06%2C44.47-33.33%2C92.75-38.42%2C143.37l334.33-71.05v170.26l-358.3%2C76.14c-20.06%2C44.47-33.32%2C92.75-38.4%2C143.37l375.04-79.7c30.53-6.35%2C56.77-24.4%2C73.83-49.24l68.78-101.97v-.02c7.14-10.55%2C11.3-23.27%2C11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z%22%2F%3E%3C%2Fsvg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 5px;
}
html[dir="rtl"] span.money:before {
margin-left: 5px;
margin-right: 5px;
}
/*-----------White icon------------*/
/*.cart__items__price .line__price:before {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1124.14 1256.39%22%3E%3Cpath fill%3D%22%23ffffff%22 d%3D%22M699.62%2C1113.02h0c-20.06%2C44.48-33.32%2C92.75-38.4%2C143.37l424.51-90.24c20.06-44.47%2C33.31-92.75%2C38.4-143.37l-424.51%2C90.24Z%22%2F%3E%3Cpath fill%3D%22%23ffffff%22 d%3D%22M1085.73%2C895.8c20.06-44.47%2C33.32-92.75%2C38.4-143.37l-330.68%2C70.33v-135.2l292.27-62.11c20.06-44.47%2C33.32-92.75%2C38.4-143.37l-330.68%2C70.27V66.13c-50.67%2C28.45-95.67%2C66.32-132.25%2C110.99v403.35l-132.25%2C28.11V0c-50.67%2C28.44-95.67%2C66.32-132.25%2C110.99v525.69l-295.91%2C62.88c-20.06%2C44.47-33.33%2C92.75-38.42%2C143.37l334.33-71.05v170.26l-358.3%2C76.14c-20.06%2C44.47-33.32%2C92.75-38.4%2C143.37l375.04-79.7c30.53-6.35%2C56.77-24.4%2C73.83-49.24l68.78-101.97v-.02c7.14-10.55%2C11.3-23.27%2C11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z%22%2F%3E%3C%2Fsvg%3E") !important;
width: 12px;
height: 12px;
}*/
/*-----------Price hide currency code------------*/
.price__was span.money:before,
.Vtl-WishlistProduct__OldPrice span.money:before {
background-image: none !important;
width: 0;
}
.price-range__input-wrapper .price-range__currency:before {
font-size: 0 !important;
}
.product__grid__price .price {
font-family: var(--FONT-STACK-HEADING) !important;
}
.product__grid__title {
font-weight: normal;
}
.collection-sort .popout-list__option,
.collection-sort .popout-list__option:hover,
.collection-sort .popout-list__option:focus {
color: #111111;
}
/*----------------Hide Linebreaks from menu---------------*/
.sliderow__links .sliderule__wrapper:has(.sliderow__title[href="/en#break"]),
.sliderow__links .sliderule__wrapper:has(.sliderow__title[href="#break"]) {
display: none;
}
/*------------Heading Sizing-------------*/
.rte h1,
.rte h2,
.rte h3 {
font-family: var(--FONT-STACK-BODY);
}
.rte h2 {
font-size: calc(var(--font-9) * var(--FONT-ADJUST-HEADING) * 0.6667);
}
.rte h3 {
font-size: calc(var(--font-8) * var(--FONT-ADJUST-HEADING) * 0.6667);
}
.rte h4 {
font-size: calc(var(--font-7) * var(--FONT-ADJUST-HEADING) * 0.6667);
}
.rte h5 {
font-size: calc(var(--font-6) * var(--FONT-ADJUST-HEADING) * 0.6667);
}
.rte h6 {
font-size: calc(var(--font-5) * var(--FONT-ADJUST-HEADING) * 0.6667);
}
.btn-text-thick-line:after {
transform: scaleX(1);
transform-origin: 0 50%;
opacity: 1;
}
.flickity-slider .btn--white:after {
content: "";
left: 0;
width: 100%;
display: block;
position: absolute;
bottom: -5px;
height: 1px;
background: currentcolor;
transition: transform 0.2s ease,
opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
/*--------------Sizechart Table Styling (Page + Modal popup)---------------*/
table th,
table td,
[dir="rtl"] table th p,
[dir="rtl"] table td p {
text-align: center !important;
}
table th:first-child,
table td:first-child,
table th:first-child p,
table td:first-child p {
text-align: left !important;
}
[dir="rtl"] table th:first-child,
[dir="rtl"] table td:first-child,
[dir="rtl"] table th:first-child p,
[dir="rtl"] table td:first-child p {
text-align: right !important;
}
[dir="rtl"] .modal__container div,
[dir="rtl"] .section-page .text__standard h5 {
text-align: right;
}
.micromodal-slide[aria-hidden="false"] .modal__container table {
max-width: 600px;
min-width: 600px;
}
table {
margin-top: 15px !important;
}
.size-chart-table {
width: 100% !important;
}
.modal__container table {
min-width: 100% !important;
}
/*----------------Arabic Heading alignment----------------*/
[dir="rtl"] .rte h1,
[dir="rtl"] .rte h2,
[dir="rtl"] .rte h3,
[dir="rtl"] .rte p {
text-align: right;
}
.rte h1,
.rte h2,
.rte h3 {
margin-bottom: 15px;
}
/*---------------Blog arabic content-------------*/
@media only screen and (min-width: 768px) {
[dir="rtl"] .medium-up--push-one-sixth {
right: 16.6666666667%;
}
}
[dir="rtl"] .share-holder svg {
margin-left: 8px;
}
[dir="rtl"] .blog__article h1,
[dir="rtl"] .blog__article h2,
[dir="rtl"] .blog__article h3 {
margin-bottom: 20px !important;
}
/*-----------------About page------------------*/
[dir="rtl"]
#lingerie-perdu-our-story
.section-padding:not(.wrapper--none)
.brick__section:not(.brick--border)
.brick__block:first-child
.brick__block__text--transparent {
padding-right: 0;
}
@media only screen and (min-width: 768px) {
[dir="rtl"] .brick--margin .brick__block + .brick__block {
margin-right: var(--brick-gutter);
}
}
/*-----------------Collections all page styling-------------------*/
.collection-list__heading__text .hero__title {
font-size: 20px;
}
@media (max-width: 768px) {
.collection-list__heading__text .hero__title {
font-size: 17px;
}
}
[dir="rtl"] .collection-list__heading__text .hero__title {
margin-left: 10px;
margin-right: 0;
}
[dir="rtl"] .collection-list__heading__text .text-btn-arrow-right {
padding-right: 0;
margin-left: 10px;
}
@media (min-width: 1024px) {
.modal__container.modal__container--inline {
min-width: 80%;
}
}
/*-----------Complete the look image-------------*/
.relative.block.overflow-hidden.aspect-\[--wh-ratio\] {
background: #f0e9e1 !important;
}
img.product-clip__image__inner {
mix-blend-mode: darken;
}
/*-------------Arabic logo------------*/
[dir="rtl"] .header__logo__link img {
width: 90px;
}
[dir="rtl"]
.shopify-section.shopify-section-group-group-header:has(
> div[data-section-type="header"]
) {
height: 76px !important;
}
@media (max-width: 768px) {
[dir="rtl"]
.shopify-section.shopify-section-group-group-header:has(
> div[data-section-type="header"]
) {
height: 64px !important;
}
[dir="rtl"] .header__logo__link img {
margin: 0 auto !important;
}
}
/*---------------Add to cart btn--------------*/
.btn--outline.btn--full.btn--primary.btn--add-to-cart {
background-color: var(--COLOR-PRIMARY);
color: var(--COLOR-PRIMARY-OPPOSITE);
}
/*---------------Hide Menu Items--------------*/
.header__menu .menu__item a[href="#hide"],
.header__menu .menu__item a[href="/en#hide"],
.sliderule__panel .sliderow:has(.sliderow__title[href="/en#hide"]),
.sliderule__panel .sliderow:has(.sliderow__title[href="#hide"]) {
display: none !important;
}
/*.sliderule__wrapper:has(
.mobile__menu__dropdown
.sliderow__back
.drawer__button
.sliderow__title[href="/en#hide"]
)
.sliderow {
display: none;
}*/
/*--------------Homepage Collection List paddings---------------------*/
.list__collections [data-grid] .grid__item:first-child {
padding-right: 2px;
padding-left: 0px;
margin: 0;
}
.list__collections [data-grid] .grid__item {
padding-right: 2px;
padding-left: 2px;
margin: 0;
}
.list__collections [data-grid] .grid__item:last-child {
padding-right: 0;
padding-left: 2px;
margin: 0;
}
[dir="rtl"] .list__collections [data-grid] .grid__item:first-child {
padding-right: 0px;
padding-left: 2px;
margin: 0;
}
[dir="rtl"] .list__collections [data-grid] .grid__item:last-child {
padding-right: 2px;
padding-left: 0px;
margin: 0;
}
@media (max-width: 767px) {
.list__collections [data-grid] .grid__item:first-child {
padding-right: 0px;
padding-left: 0px;
margin: 0;
}
.list__collections [data-grid] .grid__item {
padding-right: 0px;
padding-left: 0px;
margin: 0;
}
.list__collections [data-grid] .grid__item:last-child {
padding-right: 0;
padding-left: 0px;
margin: 0;
}
[dir="rtl"] .list__collections [data-grid] .grid__item:first-child {
padding-right: 0px;
padding-left: 0px;
margin: 0;
}
[dir="rtl"] .list__collections [data-grid] .grid__item:last-child {
padding-right: 0px;
padding-left: 0px;
margin: 0;
}
}
/*------------Megamenu Grandchild padding-------------*/
@media (min-width: 1024px) {
.grandparent .header__dropdown__inner {
padding: 2px 0;
}
}
/*-----------Hero Title in Arabic------------*/
[dir="rtl"] .hero__title {
overflow: unset;
}
/*----------------Products You might like also------------*/
@media (max-width: 768px) {
[dir="rtl"] .flickity-grid .product-grid-slide:last-child {
margin-left: 0;
margin-right: calc(var(--gutter) + 1px);
}
}
/*--------------Collection filter color tooltip label--------------*/
.sidebar__heading__color {
display: block !important;
border-left: 0;
}
[dir="rtl"] .sidebar__heading__color {
text-align: right;
margin-right: 10px;
}
/*-------------------Collection hide products count---------------*/
.collection__active__filters__wrapper .collection__count {
display: none;
}
/*-------------Collection Price Filter---------------*/
.filter__price__field span {
font-size: 0;
}
/*------------Megamenu (Gifting ideas) Grandchild padding-------------*/
@media (min-width: 1024px) {
.grandparent .header__dropdown__inner {
padding: 2px 0;
}
}
.header__dropdown__inner
> .dropdown__family.dropdown__family--child:first-child:last-child {
display: flex;
flex-direction: column;
max-height: 320px;
row-gap: 15px;
flex-wrap: wrap;
}
.header__dropdown__inner
> .dropdown__family.dropdown__family--child:first-child:last-child
.navlink.navlink--grandchild {
padding-right: 60px;
max-width: 180px;
min-width: 0px;
}
.sidebar__heading__color {
display: block !important;
border-left: 0;
}
[dir="rtl"] .sidebar__heading__color {
text-align: right;
margin-right: 10px;
}
.dropdown__family.dropdown__family--child {
max-height: 320px;
display: flex;
flex-direction: column;
row-gap: 15px;
column-gap: 60px;
flex-wrap: wrap;
}
.dropdown__family.dropdown__family--child .navlink.navlink--grandchild {
margin-top: 0;
padding-right: 30px;
}
[dir="rtl"]
.dropdown__family.dropdown__family--child
.navlink.navlink--grandchild {
margin-top: 0;
padding-left: 30px;
padding-right: 0px;
}
/*--------------Footer subscription - Arabic-----------------*/
@media only screen and (min-width: 768px) {
[dir="rtl"] .footer__newsletter--offset {
margin-left: auto !important;
margin-right: var(--margin-offset);
}
}
/*-----------------RTL phone numbers alignment-------------------*/
[dir="rtl"] .shopify-policy__body p a[href^="tel:"] {
direction: ltr !important;
unicode-bidi: isolate;
}
/*--------------Hide from collection filters category fields----------------*/
.sidebar__navigation__list
.filter__button:has([aria-label="Apparel & Accessories"]),
.sidebar__navigation__list .filter__button:has([aria-label="Clothing"]) {
display: none;
}
/*[dir="rtl"]
.collection__filters__inner
.sidebar__filter__group:has([aria-controls="accordion-القماش-6"]) {
display: none;
}*/
/*--------------Collection Description width----------------*/
@media (min-width: 1024px) {
.collection__text-content
.collection__heading
.rte.standard__rte.collection__heading__text:first-of-type {
max-width: 600px;
margin: 0 auto;
}
}
/*--------------Mobile Search---------------*/
@media (max-width: 768px) {
[dir="rtl"] .drawer__search .search__predictive__button {
left: 0;
right: auto;
}
[dir="rtl"] .drawer__search .search__predictive__actions {
flex-direction: row;
}
}
/*---------------Homepage Hero - Mobile---------------*/
@media (max-width: 768px) {
html[lang="ar"] .section-slideshow .hero__content .hero__title,
html[lang="ar"] .section-slideshow .hero__content .hero__description p {
text-align: center !important;
}
}
/*------------Footer Policies------------*/
@media (max-width: 768px) {
.subfooter__item.subfooter__item--copyright {
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 10px;
margin: 25px 0;
}
.subfooter__item.subfooter__item--copyright .subfooter__copyright {
text-align: center;
margin-right: 0 !important;
margin-left: 0 !important;
}
}
/*----------------Collection list in collection pages------------*/
.template-collection .collection-list-item {
margin-bottom: 30px;
}
/*------------Collection Sorting dropdown - RTL----------*/
html[lang="ar"] .popout--navbar .popout-list {
left: auto !important;
}
/*------------Hide alphabetically from Sorting in collections----------------*/
#sort-list li:has(a[data-value="title-ascending"]),
#sort-list li:has(a[data-value="title-descending"]) {
display: none;
}
/*------------- Cart images --------------*/
.cart__items__image .cart__items__img {
height: 100%;
}
/*------------Mobile text alignment - Gifting -----------------*/
@media (max-width: 768px) {
.intimate-gifting .brick__block__text .rte p {
text-align: center;
}
}
/*--------------Collection - Subcollection listing--------------*/
[dir="rtl"] .section--image.subcollection__item:not(:last-child) {
margin-left: 2px !important;
margin-right: 0px !important;
}
/*-----------On sale pricing----------------*/
.on-sale {
color: #000;
}
/*.product__badge.product__badge--sale:after,
.product__price--off [data-price-off-amount]:before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1124.14 1256.39%22%3E%3Cpath fill%3D%22%23231f20%22 d%3D%22M699.62%2C1113.02h0c-20.06%2C44.48-33.32%2C92.75-38.4%2C143.37l424.51-90.24c20.06-44.47%2C33.31-92.75%2C38.4-143.37l-424.51%2C90.24Z%22%2F%3E%3Cpath fill%3D%22%23231f20%22 d%3D%22M1085.73%2C895.8c20.06-44.47%2C33.32-92.75%2C38.4-143.37l-330.68%2C70.33v-135.2l292.27-62.11c20.06-44.47%2C33.32-92.75%2C38.4-143.37l-330.68%2C70.27V66.13c-50.67%2C28.45-95.67%2C66.32-132.25%2C110.99v403.35l-132.25%2C28.11V0c-50.67%2C28.44-95.67%2C66.32-132.25%2C110.99v525.69l-295.91%2C62.88c-20.06%2C44.47-33.33%2C92.75-38.42%2C143.37l334.33-71.05v170.26l-358.3%2C76.14c-20.06%2C44.47-33.32%2C92.75-38.4%2C143.37l375.04-79.7c30.53-6.35%2C56.77-24.4%2C73.83-49.24l68.78-101.97v-.02c7.14-10.55%2C11.3-23.27%2C11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z%22%2F%3E%3C%2Fsvg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-left: 5px;
}*/
[dir="rtl"] .product__badge.product__badge--sale:after {
margin-left: 0px;
margin-right: 5px;
}
.product__price--off {
color: #000;
margin-right: 10px;
}
.product__price--off [data-price-off-amount]:before {
margin-right: 5px;
}
.product__badge.product__badge--sale {
display: flex;
align-items: center;
}
[dir="rtl"] .product-grid-item .product__grid__info.text-left .price.on-sale {
margin-left: 8px;
margin-right: 0;
}
/*---------------Product page - Compare at price-------------*/
.product__compare {
font-size: 14px;
}
[dir="rtl"] .product__compare {
margin-left: 10px;
}
/*-------------New header language switcher-------------------*/
@media (max-width: 1024px) {
.language-switcher {
display: flex;
height: 100%;
align-items: center;
border-right: 1px solid var(--border);
border-left: none;
padding: 10px 15px 10px 15px;
}
[dir="rtl"] .language-switcher {
border-left: 1px solid var(--border);
border-right: none;
padding: 10px 10px 10px 15px !important;
}
.language-switcher__list {
margin-bottom: -5px;
}
}
}
.product__main__content .product__block__buttons ~ .product__block__text {
margin-bottom: 25px !important;
}
/*--------------Compare at price color-------------*/
.product__grid__price .compare-at, .product__price__main .product__compare {
color: #a1644a !important;
}
.product__price__main .product__compare s {
opacity: 1 !important;
}
.navtext.featured {
color: #a1644a !important;
}
.product__main__content .product__block__price .product__price--off {
background-color: #a1644a !important;
}
[dir="rtl"] .section-collection-tabs .tab-link {
margin: 0;
}
/*-------------Adjust mobile padding top for Product section on mobile--------------*/
@media (max-width: 768px) {
.template-product .product-section {
padding-top: 0px;
}
}
@media (max-width: 768px) {
.template-product .product-section {
padding-top: 0 !important;
}
}
@media (max-width: 768px) {
#shopify-section-sections--25508813472057__announcement {
position: sticky;
top: 0;
z-index: 999;
}
#shopify-section-sections--25508813472057__header, theme__header {
position: sticky;
top: 25px;
z-index: 999;
}
.js__header__stuck--animated .theme__header {
transform: translateY(0%);
}
.js__header__stuck {
position: fixed;
width: 100%;
top: 25px !important;
z-index: 6000;
}
}