/** Shopify CDN: Minification failed

Line 866:20 Unexpected "--clear"
Line 879:24 Unexpected "--clear"

**/
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i);
@import url(https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;700&display=swap);

body,
html {
    margin: 0
}

*,
:after,
:before {
    box-sizing: border-box
}

[role=button],
a,
button,
input,
label,
select,
textarea {
    touch-action: manipulation
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.rel {
    position: relative
}

.abs {
    position: absolute
}

.fix {
    position: fixed
}

.fill,
.top {
    top: 0
}

.bottom,
.fill {
    bottom: 0
}

.fill,
.left {
    left: 0
}

.fill,
.right {
    right: 0
}

.x {
    width: 100%
}

.y {
    height: 100%
}

.f {
    display: flex
}

.fw {
    flex-wrap: wrap
}

.ais {
    align-items: flex-start
}

.aie {
    align-items: flex-end
}

.aic {
    align-items: center
}

.aib {
    align-items: baseline
}

.jcs {
    justify-content: flex-start
}

.jce {
    justify-content: flex-end
}

.jcc {
    justify-content: center
}

.jcb {
    justify-content: space-between
}

.fa {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0
}

.al {
    text-align: left
}

.ac {
    text-align: center
}

.ar {
    text-align: right
}

.aj {
    text-align: justify
}

.ma,
.mxa {
    margin-left: auto;
    margin-right: auto
}

.ma,
.mya {
    margin-top: auto;
    margin-bottom: auto
}

.p0,
.pt0,
.py0 {
    padding-top: 0
}

.p0,
.pb0,
.py0 {
    padding-bottom: 0
}

.m0,
.mt0,
.my0 {
    margin-top: 0
}

.m0,
.mb0,
.my0 {
    margin-bottom: 0
}

.m025,
.mt025,
.my025 {
    margin-top: .25em
}

.m025,
.mb025,
.my025 {
    margin-bottom: .25em
}

.m025,
.ml025,
.mx025 {
    margin-left: .25em
}

.m025,
.mr025,
.mx025 {
    margin-right: .25em
}

.p025,
.pt025,
.py025 {
    padding-top: .25em
}

.p025,
.pb025,
.py025 {
    padding-bottom: .25em
}

.p025,
.pl025,
.px025 {
    padding-left: .25em
}

.p025,
.pr025,
.px025 {
    padding-right: .25em
}

.m05,
.mt05,
.my05 {
    margin-top: .5em
}

.m05,
.mb05,
.my05 {
    margin-bottom: .5em
}

.m05,
.ml05,
.mx05 {
    margin-left: .5em
}

.m05,
.mr05,
.mx05 {
    margin-right: .5em
}

.p05,
.pt05,
.py05 {
    padding-top: .5em
}

.p05,
.pb05,
.py05 {
    padding-bottom: .5em
}

.p05,
.pl05,
.px05 {
    padding-left: .5em
}

.p05,
.pr05,
.px05 {
    padding-right: .5em
}

.m075,
.mt075,
.my075 {
    margin-top: .75em
}

.m075,
.mb075,
.my075 {
    margin-bottom: .75em
}

.m075,
.ml075,
.mx075 {
    margin-left: .75em
}

.m075,
.mr075,
.mx075 {
    margin-right: .75em
}

.p075,
.pt075,
.py075 {
    padding-top: .75em
}

.p075,
.pb075,
.py075 {
    padding-bottom: .75em
}

.p075,
.pl075,
.px075 {
    padding-left: .75em
}

.p075,
.pr075,
.px075 {
    padding-right: .75em
}

.m1,
.mt1,
.my1 {
    margin-top: 1em
}

.m1,
.mb1,
.my1 {
    margin-bottom: 1em
}

.m1,
.ml1,
.mx1 {
    margin-left: 1em
}

.m1,
.mr1,
.mx1 {
    margin-right: 1em
}

.p1,
.pt1,
.py1 {
    padding-top: 1em
}

.p1,
.pb1,
.py1 {
    padding-bottom: 1em
}

.p1,
.pl1,
.px1 {
    padding-left: 1em
}

.p1,
.pr1,
.px1 {
    padding-right: 1em
}

input,
select,
textarea {
    display: inline-block;
    border: 1px solid #000
}

.z0 {
    z-index: 0
}

.z1 {
    z-index: 100
}

.z2 {
    z-index: 200
}

.z3 {
    z-index: 300
}

.z4 {
    z-index: 400
}

.z5 {
    z-index: 500
}

.z6 {
    z-index: 600
}

.z7 {
    z-index: 700
}

.z8 {
    z-index: 800
}

.z9 {
    z-index: 900
}

.z10 {
    z-index: 1000
}

@custom-media --400 (min-width: 25em);
@custom-media --600 (min-width: 37.5em);
@custom-media --800 (min-width: 50em);
@custom-media --1000 (min-width: 62.5em);
@custom-media --1200 (min-width: 75em);
@custom-media --1400 (min-width: 87.5em);

:root {
    --ease: ease-in-out;
    --cubic: cubic-bezier(.12, .67, .53, 1);
    --black: #262c4d;
    --white: #fff;
    --green: #a4e1b9;
    --blue: #344fda;
    --darkgreen: #199473;
    --orange: #fe8f04;
    --brown: #857f72;
    --mediumblue: #03449e;
    --darkblue: #022d69;
    --lightblue: #7cc4fa;
    --red: #ef4e4e;
    --gold: #fce588;
    --lightgray: #f0f4f8;
    --silver: #dadada;
    --gradient-1: linear-gradient(90deg, #485563, #29323c)
}

.c-white {
    color: #fff;
    color: var(--white)
}

.bg-white {
    background-color: #fff;
    background-color: var(--white)
}

.c-black {
    color: #262c4d;
    color: var(--black)
}

.bg-black {
    background-color: #262c4d;
    background-color: var(--black)
}

.c-green {
    color: #a4e1b9;
    color: var(--green)
}

.bg-green {
    background-color: #a4e1b9;
    background-color: var(--green)
}

.c-blue {
    color: #344fda;
    color: var(--blue)
}

.bg-blue {
    background-color: #344fda;
    background-color: var(--blue)
}

body {
    color: #262c4d;
    color: var(--black);
    font-family: Jost, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Arial;
    font-size: 100%;
    line-height: 1.7;
    font-weight: 400;
    -webkit-font-smoothing: antialiased
}

.content-wrapper {
    min-height: calc(100vh - 65px)
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 900;
    font-family: Playfair Display, serif
}

h2 {
    margin: 0 0 20px
}

p {
    margin: 0 0 10px
}

.h0 {
    font-size: 3.375rem
}

@media (--600) {
    .h0 {
        font-size: 6rem
    }
}

.h1,
.s1,
h1 {
    font-size: 2rem
}

@media (--600) {

    .h1,
    .s1,
    h1 {
        font-size: 3.125rem
    }
}

.h1,
h1 {
    line-height: 1.1
}

.h2,
.s2,
h2 {
    font-size: 2.5rem;
    font-weight: 700
}

@media (min-width:768px) {

    .h2,
    .s2,
    h2 {
        font-size: 5rem
    }
}

.h2,
h2 {
    line-height: 1.2
}

.h3,
.s3,
h3 {
    font-size: 1.375rem
}

@media (--600) {

    .h3,
    .s3,
    h3 {
        font-size: 1.5rem
    }
}

.h3,
h3 {
    line-height: 1.3
}

.h4,
.s4,
h4 {
    font-size: 1.125rem
}

@media (--600) {

    .h4,
    .s4,
    h4 {
        font-size: 1.375rem
    }
}

.h4,
h4 {
    line-height: 1.4
}

.h5,
.s5,
h5 {
    font-size: 1rem
}

.h5,
h5 {
    line-height: 1.5
}

.h6,
.s6,
h6 {
    font-size: .875rem
}

.h6,
h6 {
    line-height: 1.5
}

.p,
.s0,
p {
    font-size: 1rem
}

@media(min-width:768px) {

    .p,
    .s0,
    p {
        font-size: 1.2rem
    }
}

.p,
p {
    line-height: 1.6
}

.small,
small {
    font-size: .75rem
}

.xsmall {
    font-size: .625rem
}

blockquote {
    text-align: center;
    color: #344fda;
    color: var(--blue);
    padding: 10px;
    margin: 0
}

blockquote p {
    font-family: freight-display-pro, serif;
    font-size: 26px;
    line-height: 1.4
}

@media (--m) {
    blockquote p {
        font-size: 36px;
        line-height: 1.3
    }
}

a {
    text-decoration: none
}

a,
hr {
    color: inherit
}

hr {
    display: block;
    border: 0;
    margin: 0;
    height: 1px;
    width: 100%;
    background-color: currentColor
}

.b,
strong {
    font-weight: 700
}

.i,
em {
    font-style: italic
}

.caps {
    text-transform: uppercase
}

.no-under {
    text-decoration: none
}

.light {
    font-weight: 300
}

.book,
.medium,
.regular {
    font-weight: 400
}

.medium {
    font-weight: 500
}

.semi {
    font-weight: 600
}

.bold {
    font-weight: 700
}

.track {
    letter-spacing: .1em
}

.track--wide {
    letter-spacing: .3em
}

.underline {
    position: relative;
    overflow: hidden
}

.underline:after {
    content: "";
    transition: all .25s;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid var(--orange)
}

.underline--black:after {
    bottom: 4px;
    border-bottom-color: #262c4d;
    border-bottom-color: var(--black)
}

.underline--white:after {
    bottom: -2px;
    border-bottom-color: #fff;
    border-bottom-width: 2px
}

.underline--white:hover:after,
.underline:hover:after {
    transform: translateY(4px)
}

.link-hover {
    transition: all var(--fast) ease-in-out;
    transition: all var(--fast) var(--ease)
}

.link-hover:hover {
    color: var(--yellow)
}

.homepage__headline {
    font-size: 2rem
}

@media(min-width:768px) {
    .homepage__headline {
        font-size: 2.75rem
    }
}

* {
    box-sizing: border-box
}

html {
    padding: 0 !important
}

#root {
    transition: opacity .2s cubic-bezier(.12, .67, .53, 1);
    transition: opacity .2s var(--cubic)
}

.is-transitioning #root {
    opacity: 0
}

body {
    left: 0;
    position: relative;
    transition: left .3s
}

body.openNav {
    left: 280px;
    overflow-x: hidden
}

.btn,
.button[role=button],
button.button,
input.button[type=submit] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    background: #03449e;
    background: var(--mediumblue);
    color: #fff;
    color: var(--white);
    max-width: 250px;
    min-width: 250px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    transition: all .3s;
    font-size: .9rem
}

@media (min-width:1024px) {

    .btn:hover,
    .button[role=button]:hover,
    button.button:hover,
    input.button[type=submit]:hover {
        background: #022d69;
        background: var(--darkblue);
        color: #fff;
        color: var(--white)
    }
}

.btn--clear,
.button[role=button]--clear,
button.button--clear,
input.button[type=submit]--clear {
    background: transparent;
    border: 1px solid #fff;
    border: 1px solid var(--white);
    color: #fff;
    color: var(--white)
}

@media (min-width:1024px) {

    .btn--clear:hover,
    .button[role=button]--clear:hover,
    button.button--clear:hover,
    input.button[type=submit]--clear:hover {
        background: #fff;
        background: var(--white);
        color: #03449e;
        color: var(--mediumblue)
    }
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    background: red
}

input[type=number] {
    -moz-appearance: textfield
}

.account-icon,
.cart-icon {
    fill: #03449e;
    fill: var(--mediumblue);
    stroke: none;
    width: 32px
}

.page__text {
    display: flex;
    flex-direction: column;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto
}

ol,
ul {
    list-style: none;
    padding: 0;
    margin: 0
}

ol.list,
ul.list {
    padding-left: 2em
}

ol.list {
    list-style: decimal
}

ul.list {
    list-style: disc
}

form {
    margin: 0
}

input,
select,
textarea {
    display: block;
    outline: 0;
    border-radius: 0;
    border: 0;
    position: relative;
    font-size: inherit;
    background-color: transparent;
    padding: .75em 1em;
    color: #262c4d;
    color: var(--black)
}

input:focus,
select:focus,
textarea:focus {
    border-color: #262c4d;
    border-color: var(--black)
}

input::-webkit-input-placeholder,
select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #262c4d;
    color: var(--black)
}

input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #fff inset
}

textarea {
    max-width: 100%;
    overflow: auto;
    resize: vertical;
    min-height: 55px;
    padding-top: .5em
}

.select-wrapper {
    display: block;
    position: relative
}

.select-wrapper select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 50px;
    width: 100%;
    border: 1px solid #262c4d;
    border: 1px solid var(--black)
}

.outer {
    padding-left: 1.5em;
    padding-right: 1.5em
}

@media (--600) {
    .outer {
        padding-left: 3em;
        padding-right: 3em
    }
}

.container--s {
    max-width: 600px
}

.container--m {
    max-width: 1000px
}

.container--l {
    max-width: 1400px
}

button {
    border: 0;
    border-radius: 0;
    display: inline-block;
    cursor: pointer;
    -webkit-appearance: none
}

.image {
    background: #a4e1b9;
    background: var(--green);
    text-align: center
}

.image,
.image:before {
    overflow: hidden;
    transition: opacity .2s cubic-bezier(.12, .67, .53, 1);
    transition: opacity .2s var(--cubic)
}

.image:before {
    content: attr(data-alt);
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    font-size: .88rem;
    font-family: NB International Mono, monospace;
    opacity: .6;
    max-width: 200px;
    max-height: 50px;
    z-index: 0
}

.image img {
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0;
    transition: opacity .2s cubic-bezier(.12, .67, .53, 1);
    transition: opacity .2s var(--cubic)
}

.image.is-loaded:before {
    opacity: 0
}

.image.is-loaded img {
    opacity: 1
}

.counter button {
    height: 25px;
    width: 25px;
    background: #000;
    color: #fff;
    line-height: 23px;
    text-align: center
}

.counter input {
    width: 4ch;
    padding: .3em;
    margin: 0 .5em;
    text-align: center;
    height: auto
}

#section-hero .flickity-page-dots {
    bottom: 20px
}

@media(min-width:768px) {
    #section-hero .flickity-page-dots {
        bottom: 32px
    }
}

#section-hero .flickity-page-dots .dot {
    background: #03449e;
    background: var(--mediumblue)
}

.section-hero__cell {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: auto;
    grid-gap: 0;
    width: 100%;
    padding: 20px 0 60px
}

.section-hero__cell.is-selected .section-hero__image-wrapper:before {
    top: 120%;
    left: 40%;
    opacity: .5
}

.section-hero__cell.is-selected .section-hero__image-wrapper:after {
    top: 0;
    left: 0;
    opacity: .5
}

.section-hero__cell.is-selected .section-hero__text-wrapper {
    left: 0;
    opacity: 1
}

.section-hero__image-wrapper {
    grid-column: auto/span 24;
    min-height: 300px;
    height: 300px;
    position: relative
}

@media(min-width:768px) {
    .section-hero__image-wrapper {
        grid-column: auto/span 12;
        min-height: 600px;
        height: 600px
    }
}

@media(min-width:990px) {
    .section-hero__image-wrapper {
        height: calc(100vh - 100px)
    }
}

.section-hero__image-wrapper:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 600px;
    height: 600px;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 1s
}

@media(min-width:768px) {
    .section-hero__image-wrapper:before {
        width: 1200px;
        height: 1200px
    }
}

.section-hero__image-wrapper:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 1s
}

@media(min-width:768px) {
    .section-hero__image-wrapper:after {
        width: 1200px;
        height: 1200px
    }
}

.section-hero__image-wrapper--hydrobrew:before {
    background: #fce588;
    background: var(--gold)
}

.section-hero__image-wrapper--hydrobrew:after {
    background: #199473;
    background: var(--darkgreen)
}
      
.section-hero__image-wrapper--fruit:before {
    background: #fe8f04;
    background: var(--orange)
}

.section-hero__image-wrapper--fruit:after {
    background: #ef4e4e;
    background: var(--red)
}


.section-hero__image-wrapper--hydroshot:before {
    background: #03449e;
    background: var(--mediumblue)
}

.section-hero__image-wrapper--hydroshot:after,
.section-hero__image-wrapper--hydrosplash_fp:before {
    background: #fce588;
    background: var(--gold)
}

.section-hero__image-wrapper--hydrosplash_fp:after {
    background: #ef4e4e;
    background: var(--red)
}

.section-hero__image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1
}

@media(min-width:990px) {
    .section-hero__image {
        top: 20px;
        left: 20px;
        right: 20px;
        bottom: 20px
    }
}

.section-hero__text-wrapper {
    grid-column: auto/span 24;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    left: 200px;
    opacity: 0;
    transition: all 1s
}

@media(min-width:768px) {
    .section-hero__text-wrapper {
        grid-column: auto/span 12;
        align-items: flex-start
    }
}

.section-hero__text h2 {
    font-family: Playfair Display, serif;
    font-weight: 900;
    margin: 0;
    text-align: center
}

@media(min-width:768px) {
    .section-hero__text h2 {
        text-align: left
    }
}

.section-hero__text p {
    font-size: 1.5rem;
    text-align: center
}

@media(min-width:768px) {
    .section-hero__text p {
        text-align: left
    }
}

.section-hero__text .btn {
    margin: 0 auto
}

@media(min-width:768px) {
    .section-hero__text .btn {
        margin: 42px 0 0
    }
}

#section-cta {
    background: #262c4d;
    background: var(--black);
    color: #fff;
    color: var(--white);
    padding: 60px 20px;
    position: relative;
    overflow: hidden
}

#section-cta .section-cta__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

#section-cta .section-cta__wrapper h2,
#section-cta .section-cta__wrapper p {
    text-align: center
}

#section-cta .section-cta__wrapper p {
    max-width: 1200px;
    margin: 0 auto 10px
}

#section-cta .section-cta__wrapper .btn--cta {
    margin-top: 40px
}

#section-cta .bubble {
    width: 60px;
    height: 60px;
    border-radius: 200px;
    position: absolute
}

#section-cta .bubble,
#section-cta .x1 {
    background: #fff;
    background: var(--white)
}

#section-cta .x1 {
    left: 0;
    transform: scale(.9) translateX(-50%);
    opacity: .2;
    -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate
}

#section-cta .x2 {
    left: 10%;
    transform: scale(.6) translateX(-50%);
    opacity: .5;
    -webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
    animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate
}

#section-cta .x3 {
    left: 45%;
    transform: scale(.8) translateX(-50%);
    opacity: .3;
    -webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate
}

#section-cta .x4 {
    left: 70%;
    transform: scale(.75) translateX(-50%);
    opacity: .35;
    -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate
}

#section-cta .x5 {
    left: 95%;
    transform: scale(.8) translateX(-50%);
    opacity: .3;
    -webkit-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
    animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate
}

@-webkit-keyframes moveclouds {
    0% {
        top: 500px
    }

    to {
        top: -500px
    }
}

@-webkit-keyframes sideWays {
    0% {
        margin-left: 0
    }

    to {
        margin-left: 50px
    }
}

@keyframes moveclouds {
    0% {
        top: 500px
    }

    to {
        top: -500px
    }
}

@keyframes sideWays {
    0% {
        margin-left: 0
    }

    to {
        margin-left: 50px
    }
}

#section-feature {
    overflow: hidden
}

#section-feature .section-feature__wrapper {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: auto;
    grid-gap: 0;
    padding: 20px
}

@media(min-width:1240px) {
    #section-feature .section-feature__wrapper {
        padding: 60px 20px
    }
}

#section-feature .section-feature__image {
    grid-column: 1/span 25;
    grid-row: 1/span 1;
    min-height: 300px
}

@media(min-width:568px) {
    #section-feature .section-feature__image {
        min-height: 500px
    }
}

@media(min-width:990px) {
    #section-feature .section-feature__image {
        grid-column: auto/span 12;
        grid-row: auto
    }
}

#section-feature .section-feature__text-wrapper {
    grid-column: 1/span 25;
    grid-row: 2/span 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

@media(min-width:990px) {
    #section-feature .section-feature__text-wrapper {
        grid-column: auto/span 12;
        grid-row: auto;
        align-items: flex-start
    }
}

#section-feature .section-feature__text-wrapper-headline {
    text-align: center
}

@media(min-width:990px) {
    #section-feature .section-feature__text-wrapper-headline {
        text-align: left;
        max-width: 500px
    }
}

#section-feature .section-feature__text-wrapper-text {
    margin-bottom: 60px;
    text-align: center
}

@media(min-width:990px) {
    #section-feature .section-feature__text-wrapper-text {
        text-align: left
    }
}

#section-feature .section-feature__wrapper--right .section-feature__image {
    order: 2
}

#section-feature .section-feature__wrapper--right .section-feature__text-wrapper {
    order: 1
}

.product-rotator {
    padding: 60px 20px
}

.product-rotator__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.product-rotator__text h2,
.product-rotator__text p {
    text-align: center
}

.product-rotator__slides {
    width: 100%;
    min-height: 100px;
    padding: 40px 0
}

.product-rotator__cell {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px
}

@media(min-width:568px) {
    .product-rotator__cell {
        width: 40%
    }
}

@media(min-width:1024px) {
    .product-rotator__cell {
        width: 22%
    }
}

.product-rotator__cell.is-selected .product-rotator__cell-image img {
    transform: scale(1.1) rotate(-5deg)
}

.product-rotator__cell.is-selected .product-rotator__cell-btn,
.product-rotator__cell.is-selected .product-rotator__cell-headline {
    opacity: 1;
    visibility: visible
}

.product-rotator__cell-image img {
    width: auto;
    height: 200px;
    margin: 0 auto;
    display: block;
    transform: scale(.9) rotate(0);
    transition: transform .3s
}

@media(min-width:568px) {
    .product-rotator__cell-image img {
        height: 300px
    }
}

@media(min-width:1024px) {
    .product-rotator__cell-image img {
        max-width: 80%;
        height: auto
    }
}

.product-rotator__cell-headline {
    font-family: Jost, sans-serif;
    text-transform: uppercase;
    font-size: 1.2rem;
    text-align: center;
    margin: 0;
    padding: 40px 0
}

.product-rotator__cell-btn,
.product-rotator__cell-headline {
    opacity: 0;
    visibility: hidden;
    transition: all .3s
}

.section-benefits__wrapper {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: auto;
    padding: 60px 20px
}

.section-benefits__text,
.section-benefits__wrapper h2 {
    grid-column: auto/span 24;
    text-align: center;
    color: #fff;
    color: var(--white)
}

.section-benefits__text {
    max-width: 1000px;
    margin: 0 auto
}

.section-benefits__items {
    grid-column: auto/span 24;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1800px;
    margin: 0 auto;
    padding: 40px 0
}

.section-benefits__item {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    position: relative
}

@media(min-width:768px) {
    .section-benefits__item {
        flex: 0 0 33%
    }
}

@media(min-width:990px) {
    .section-benefits__item {
        flex: 0 0 20%
    }
}

.section-benefits__item:after {
    content: "";
    position: absolute;
    top: 0;
    left: auto;
    right: 50px;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    opacity: .5;
    background: #7cc4fa;
    background: var(--lightblue)
}

@media(min-width:768px) {
    .section-benefits__item:after {
        width: 100px;
        height: 100px
    }
}

.section-benefits__item-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 80px;
    position: relative;
    z-index: 2
}

@media(min-width:768px) {
    .section-benefits__item-image {
        max-width: 100px
    }
}

.section-benefits__item-headline {
    text-align: center;
    color: #fff;
    color: var(--white);
    font-family: Jost, sans-serif;
    text-transform: uppercase;
    font-size: .9rem;
    margin: 20px auto 0
}

@media(min-width:768px) {
    .section-benefits__item-headline {
        font-size: 1.1rem;
        max-width: 90%
    }
}

.section-benefits__video {
    grid-column: auto/span 24;
    margin-bottom: -160px
}

.section-benefits__video-wrapper {
    max-width: 720px;
    margin: 40px auto 0
}

.section-testimonials {
    padding: 200px 20px 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f0f4f8;
    background: var(--lightgray)
}

.section-testimonials h2 {
    text-align: center
}

.section-testimonials__wrapper {
    width: 100%;
    max-width: 1400px
}

.section-testimonials__cell {
    width: 100%;
    padding: 40px;
    text-align: center
}

@media(min-width:990px) {
    .section-testimonials__cell {
        width: 33%;
        opacity: .2;
        transition: opacity .5s
    }

    .section-testimonials__cell.is-selected {
        opacity: 1
    }
}

.product-hero {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: auto;
    position: relative;
    padding: 60px 20px
}

.product-hero:before {
    top: 100%;
    right: 40px
}

.product-hero:after,
.product-hero:before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 100%;
    transform: translateY(-50%);
    transition: all 1s;
    left: auto;
    opacity: .2
}

.product-hero:after {
    top: 50%;
    right: 300px
}

.product-hero--hydrobrew:before {
    background: #fce588;
    background: var(--gold)
}

.product-hero--hydrobrew:after {
    background: #199473;
    background: var(--darkgreen)
}

.product-hero--hydroshot:before {
    background: #03449e;
    background: var(--mediumblue)
}

.product-hero--hydroshot:after,
.product-hero--hydrosplash_fp:before {
    background: #7cc4fa;
    background: var(--lightblue)
}

.product-hero--hydrosplash_fp:after {
    background: #ef4e4e;
    background: var(--red)
}

.product-hero--silverbullet:before {
    background: #7cc4fa;
    background: var(--lightblue)
}

.product-hero--silverbullet:after {
    background: #dadada;
    background: var(--silver)
}

.product-hero__image {
    grid-column: auto/span 24;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: 50% !important;
    min-height: 60vw;
    position: relative;
    z-index: 1
}

@media(min-width:768px) {
    .product-hero__image {
        grid-column: auto/span 12;
        background-position: 100% !important;
        min-height: 40vw
    }
}

.product-hero__subtext {
    margin: 0;
    text-transform: uppercase;
    font-family: Jost, sans-serif;
    letter-spacing: 3px;
    text-align: center;
    width: 100%
}

@media(min-width:768px) {
    .product-hero__subtext {
        text-align: left
    }
}

.product-hero__text {
    grid-column: auto/span 24;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    position: relative;
    z-index: 1;
    text-align: center
}

@media(min-width:768px) {
    .product-hero__text {
        grid-column: auto/span 12;
        text-align: left
    }
}

.product-hero__text h2 {
    font-size: 2.5rem;
    margin: 0;
    text-align: center;
    width: 100%
}

@media(min-width:768px) {
    .product-hero__text h2 {
        font-size: 6vw;
        text-align: left
    }
}

.product-intro {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    position: relative;
    z-index: 2
}

.product-intro__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.product-intro h2,
.product-intro p {
    text-align: center
}

.product-intro .btn {
    margin-top: 40px
}

.product-content1 {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: auto;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 20px
}

.product-content1__image {
    grid-column: auto/span 24;
    grid-row: auto;
    order: 1;
    min-height: 500px;
    background-size: contain !important;
    background-position: 50% !important;
    background-repeat: no-repeat !important
}

@media(min-width:768px) {
    .product-content1__image {
        grid-column: auto/span 13;
        order: 1
    }
}

.product-content1__text {
    grid-column: auto/span 24;
    grid-row: auto;
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-top: -60px
}

@media(min-width:768px) {
    .product-content1__text {
        grid-column: auto/span 11;
        order: 2
    }
}

.product-features {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: auto;
    padding: 60px 20px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto
}

.product-features__feature {
    grid-column: auto/span 24;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 20px
}

@media(min-width:568px) {
    .product-features__feature {
        grid-column: auto/span 12
    }
}

@media(min-width:990px) {
    .product-features__feature {
        grid-column: auto/span 6
    }
}

.product-features__feature img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100px
}

.product-features__feature h3,
.product-features__feature p {
    text-align: center
}

.product-features__cta {
    grid-column: auto/span 24;
    padding: 40px 0 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.faq-page {
    background: #f0f4f8;
    background: var(--lightgray)
}

.faq {
    border-radius: 8px;
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px
}

.faq .tab-toggle {
    display: none
}

.faq .tab-label {
    background-color: #03449e;
    background-color: var(--mediumblue);
    display: flex;
    justify-content: space-between;
    padding: 1em;
    font-weight: 700;
    color: #fff
}

.faq .tab-label:hover,
.faq .tab-toggle:checked~.tab-label {
    background-color: #022d69;
    background-color: var(--darkblue)
}

.faq .tab-label:after {
    content: "\276F";
    transition: all .4s
}

.faq .tab-toggle:checked~.tab-label:after {
    transform: rotate(90deg)
}

.faq .tab-content {
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: all .4s;
    padding: 0 1em
}

.faq .tab-toggle:checked~.tab-content {
    max-height: 100vh;
    padding: 1em
}

.articles-page {
    background: #f0f4f8;
    background: var(--lightgray)
}

.articles {
    border-radius: 8px;
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px
}

.articles .tab-toggle {
    display: none
}

.articles .tab-label {
    background-color: #03449e;
    background-color: var(--mediumblue);
    display: flex;
    justify-content: space-between;
    padding: 1em;
    font-weight: 700;
    color: #fff
}

.articles .tab-label:hover,
.articles .tab-toggle:checked~.tab-label {
    background-color: #022d69;
    background-color: var(--darkblue)
}

.articles .tab-label:after {
    content: "\276F";
    transition: all .4s
}

.articles .tab-toggle:checked~.tab-label:after {
    transform: rotate(90deg)
}

.articles .tab-content {
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: all .4s;
    padding: 0 1em
}

.articles .tab-content a {
    text-decoration: underline
}

.articles .tab-toggle:checked~.tab-content {
    max-height: 600vh;
    padding: 1em
}

.testimonials-page {
    background: #f0f4f8;
    background: var(--lightgray)
}

.testimonials__container {
    padding: 0 20px 40px;
    max-width: 1300px;
    margin: 0 auto
}

@media(min-width:990px) {
    .testimonials__container {
        padding: 0 5% 60px
    }
}

.testimonials__items {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-auto-rows: 20px
}

.testimonials__item {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    cursor: pointer;
    justify-content: flex-start;
    overflow: hidden;
    border: 1px solid $color-6;
    border-radius: 5px
}

.testimonials__item-title {
    font-size: 2rem
}

.testimonials__item-container {
    padding: 20px
}

.testimonials__item-text p {
    margin: 0
}

.testimonials__item-author {
    font-size: .9rem;
    font-weight: 400;
    margin-top: 20px
}

.block-wrapper {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: auto;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 20px
}

.block--2up,
.block--full {
    grid-column: auto/span 24
}

.block--2up {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: auto
}

.block--text-1 {
    grid-column: auto/span 24;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.block--text-1 h2,
.block--text-1 p {
    text-align: center
}

.block--text-2 {
    grid-column: auto/span 24;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.block--text-2 h1 {
    text-align: center;
    max-width: 800px
}

.block--text-3 {
    grid-column: auto/span 24;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.block--text-3 p {
    text-align: center
}

.block__image {
    min-height: 50vw
}

@media (min-width:768px) {
    .block__image {
        min-height: 500px
    }
}

.block__image--50 {
    grid-column: auto/span 24
}

@media (min-width:1024px) {
    .block__image--50 {
        grid-column: auto/span 12
    }
}

.collection {
    padding: 32px 0
}

.collection__grid__row {
    margin-left: -1em;
    margin-right: -1em
}

.collection__grid__item {
    padding: 0 1em;
    margin-bottom: 32px;
    width: 100%
}

@media (--400) {
    .collection__grid__item {
        width: 50%
    }
}

@media (--800) {
    .collection__grid__item {
        width: 33.333333%
    }
}

@media (--1200) {
    .collection__grid__item {
        width: 25%
    }
}

body.search main {
    padding: 60px 40px
}

body.search form label {
    display: none
}

body.search form input {
    width: 100%;
    border: 1px solid #022d69;
    border: 1px solid var(--darkblue)
}

body.search form button {
    margin-top: 40px
}

body.search .search__results {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    padding: 40px 0
}

body.search .search__results li {
    grid-column: auto/span 6
}

pre {
    background: #a4e1b9;
    background: var(--green);
    color: #262c4d;
    color: var(--black);
    font-size: 1rem;
    padding: 1em 1.5em
}

.link {
    text-decoration: underline;
    color: #344fda;
    color: var(--blue)
}

.link:hover {
    color: #262c4d;
    color: var(--black)
}

#shopify-section-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 800
}

.site-header__logo {
    display: flex;
    align-items: center;
    flex: 0 0 33%
}

.site-header__logo-image {
    height: 50px
}

@media(min-width:568px) {
    .site-header__logo-image {
        height: 80px
    }
}

.slater-header svg {
    width: 32px
}

.slater-header__inner {
    height: auto
}

.slater-header__spacer {
    height: 65px
}

@media (--600) {
    .slater-header__spacer {
        height: 80px
    }
}

.menu-trigger {
    background: transparent
}

.menu-trigger,
.menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box
}

.menu-trigger {
    position: relative;
    width: 30px;
    height: 24px
}

.menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #03449e;
    background-color: var(--mediumblue);
    border-radius: 4px
}

.menu-trigger span:first-of-type {
    top: 0
}

.menu-trigger span:nth-of-type(2) {
    top: 10px
}

.menu-trigger span:nth-of-type(3) {
    bottom: 0
}

#menu01.active span:first-of-type {
    transform: translateY(10px) rotate(-45deg)
}

#menu01.active span:nth-of-type(2) {
    opacity: 0
}

#menu01.active span:nth-of-type(3) {
    transform: translateY(-11px) rotate(45deg)
}

.slide-menu {
    width: 280px;
    background: #03449e;
    background: var(--mediumblue)
}

.slide-menu__slider li {
    padding: 20px
}

.slide-menu__slider li a {
    color: #fff;
    color: var(--white);
    font-family: Playfair Display, serif;
    font-size: 1.5rem;
    line-height: 1
}

.slide-menu__decorator span {
    position: relative
}

.slide-menu__decorator span:before {
    content: "";
    border-style: solid;
    border-width: .15em .15em 0 0;
    display: inline-block;
    height: .45em;
    left: .15em;
    position: absolute;
    top: 50%;
    transform: rotate(45deg) translateY(-50%);
    vertical-align: top;
    width: .45em
}

.slide-menu__backlink {
    padding: 20px;
    font-size: 1rem !important
}

.slide-menu__backlink span {
    position: relative
}

.slide-menu__backlink span:before {
    content: "";
    border-style: solid;
    border-width: .15em .15em 0 0;
    display: inline-block;
    height: .45em;
    left: .15em;
    position: absolute;
    top: 35%;
    transform: rotate(-135deg);
    vertical-align: top;
    width: .45em
}

.site-header__nav-search {
    flex: 0 0 33%
}

.site-header__search img {
    width: 32px;
    margin: 8px 16px 0
}

.site-header__login-cart {
    flex: 0 0 33%;
    justify-content: flex-end
}

.js-cart-drawer-toggle {
    position: relative
}

.js-cart-drawer-toggle img {
    padding-right: 10px
}

.js-cart-drawer-toggle span {
    position: absolute;
    top: 0;
    right: -8px;
    width: 16px;
    height: 16px;
    color: #fff;
    color: var(--white);
    background: #ef4e4e;
    background: var(--red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem
}

.site-header__login {
    padding: 0 20px
}

.site-header__login svg {
    padding: 8px 0 0
}

.slater-footer {
    background: #03449e;
    background: var(--mediumblue)
}

.slater-footer__inner {
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.footer__disclaimer {
    padding: 0 0 20px
}

.footer p {
    color: #fff;
    color: var(--white);
    text-align: center;
    font-size: .9rem
}

.footer a {
    text-decoration: underline
}

.slater-welcome {
    min-height: calc(100vh - 160px)
}

.slater-welcome__inner {
    padding: 32px 0;
    max-width: 450px
}

.slater-welcome__title {
    line-height: 1.5
}

.responsive-table th {
    text-align: left;
    font-size: .875rem
}

.responsive-table-row td {
    border-bottom: 1px solid #fff;
    font-size: .875rem
}

tfoot td {
    font-size: .875rem;
    font-weight: 500
}

.shopify-challenge__container {
    padding-top: 200px;
    min-height: 100vh;
    background: #fff;
    max-width: 100% !important
}

.recharge .table {
    min-width: 500px
}

.page__customers__billing .rc_text--base {
    width: 50% !important
}

.rc_subscriptions__subscription__items th {
    font-size: .875rem
}

.rc_subscriptions__subscription__items td,
.rc_subscriptions__subscription__items th {
    padding: 0 5px
}

.rc_subscriptions__subscription__items tbody {
    font-size: .875rem
}

.rc_subscriptions__subscription__items .th-product {
    width: 200px
}

.rc_subscriptions__subscription__items .th-amount {
    text-indent: -9999px;
    position: relative;
    width: 40px
}

.rc_subscriptions__subscription__items .th-amount:before {
    content: "QTY";
    text-indent: 0;
    position: absolute;
    display: block
}

.rc_subscriptions__subscription__items .th-price {
    width: 50px
}

.rc_subscriptions__subscription__items .th-next-charge-date {
    text-indent: -9999px;
    position: relative
}

.rc_subscriptions__subscription__items .th-next-charge-date:before {
    content: "Upcoming";
    text-indent: 0;
    position: absolute;
    display: block
}

.rc_subscriptions__subscription__items .th-frequency {
    text-indent: -9999px;
    position: relative;
    width: 50px
}

.rc_subscriptions__subscription__items .th-frequency:before {
    content: "FRQ";
    text-indent: 0;
    position: absolute;
    display: block
}

.rc_subscriptions__subscription__items .th-next-charge-date {
    width: 100px
}

.re__schedule__orders {
    text-align: left
}

.recharge a,
.recharge a.rc_button {
    text-decoration: underline
}

.user-customer .recharge .rc_button {
    font-family: Apercu;
    transition: all .25s;
    position: relative;
    cursor: pointer;
    padding: 1rem 3rem;
    color: var(--ruby);
    outline: none;
    display: inline-block;
    text-align: center;
    font-size: 1rem;
    border-color: var(--ruby);
    width: 100%;
    border: 2px solid var(--ruby);
    background-color: hsla(0, 0%, 100%, 0);
    text-decoration: none;
    font-weight: 500
}

.user-customer .recharge .rc_button:before {
    content: ""
}

.user-customer .recharge .rc_button:hover {
    background-color: var(--ruby);
    color: #fff
}

.rc_toggler__block {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ruby)
}

.rc_layout .rc_product-item__list img {
    max-width: 100px
}

.recharge .rc_product-item__list .rc_product-item {
    width: 100% !important
}

.recharge .rc_product-item__list .rc_product-item img {
    max-width: 50px;
    max-height: 50px;
    width: auto;
    height: auto
}

.recharge .rc_product-item__list .rc_product-item .rc_product-item__inner {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.recharge .rc_product-item__list .rc_product-item .grid-view-item__image-wrapper {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center
}

.recharge .rc_product-item__list .rc_product-item .grid-view-item__title {
    font-weight: 700
}

.recharge .rc_product-item__list .rc_product-item .rc_product-item__inner:hover {
    background-color: var(--ruby)
}

.rc_form__search {
    display: flex;
    width: 100%
}

.rc_form__search label {
    display: none
}

.rc_form__search .rc_form__group {
    width: 100%;
    display: flex
}

.rc_form__search .rc_form__group button {
    padding: 0;
    min-width: 20px;
    border: 0 !important;
    border-bottom: 1px solid var(--ruby) !important
}

#rc_subscriptions__items__next_shipment span,
#rc_subscriptions__items__schedule span,
input[name=product_search_field] {
    width: 100%
}

#rc_subscriptions__items__next_shipment .rc_toggler__block,
#rc_subscriptions__items__schedule .rc_toggler__block {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

#rc_subscriptions__items__next_shipment .rc_toggler__block select,
#rc_subscriptions__items__schedule .rc_toggler__block select {
    margin: 0 8px
}

#rc_subscriptions__items__next_shipment .rc_toggler__block a,
#rc_subscriptions__items__schedule .rc_toggler__block a {
    width: 100%
}

.page__customers__add-products__details .rc_product-detail-media .rc_product-detail__image {
    max-width: 80px;
    max-height: 80px;
    width: auto;
    height: auto;
    padding-top: 30px
}

.page__customers__add-products__details .rc_form__group {
    padding: 5px 0
}

.page__customers__add-products__details .rc_layout__md__6:first-child {
    width: 20%
}

.page__customers__add-products__details .rc_product-detail__info a {
    display: none
}

.recharge p {
    font-size: 1rem
}

.recharge textarea {
    width: 100% !important;
    padding: 1rem;
    max-width: 400px;
    height: 100px;
    background-color: #fff
}

.rc_form__group select,
.recharge select {
    border-radius: 0;
    border: 1px solid #1f4068
}

.account-subscriptions {
    padding-top: 150px
}

.rc_subscriptions__subscription__item__product,
.rc_subscriptions__subscription__item__product p {
    font-size: 14px
}

.purchase-address {
    border-bottom: 1px solid var(--ruby);
    border-top: 1px solid var(--ruby);
    padding: 2rem 0
}

.edit_address_link {
    font-size: 1rem;
    text-decoration: underline
}

.account-wrapper {
    min-height: 100vh;
    padding-bottom: 5.33em;
    padding-top: 120px
}

.account-dialog {
    max-width: 800px;
    width: 100%
}

@media (--m) {
    .account-dialog {
        padding: 5rem
    }
}

@media (--l) {
    .account-dialog {
        padding: 6rem
    }
}

.account-titles {
    margin: 2.5em 0
}

.account-titles__link a {
    transition: all .25s
}

.account-titles__link a:hover {
    text-decoration: underline
}

.account-titles__links {
    margin-top: 1.33em
}

#recover:target {
    display: block
}

#recover:target+#login_form {
    display: none
}

.account-home__order {
    padding: 1.33em
}

.account-home__order:nth-of-type(2n) {
    background-color: var(--gray)
}

.account-home__order:nth-of-type(odd) {
    border: 1px solid var(--gray-medium)
}

.account-order__brief {
    border: 1px solid var(--ruby)
}

.account-order__brief .__row {
    margin-left: -5px;
    margin-right: -5px
}

.account-order__brief__box {
    padding: 0 5px
}

@media (--m) {
    .account-order__brief__box {
        width: 50%
    }
}

.account-order__details {
    margin-top: 2.5em
}

.account-order__details__item:nth-of-type(2n) {
    background-color: var(--gray)
}

.account-order__details__item:nth-of-type(odd) {
    border: 1px solid var(--gray-medium)
}

.account-order__totals {
    margin-top: 2.5em
}

.account-order__addresses {
    margin-left: -5px;
    margin-right: -5px
}

.account-order__address {
    padding: 0 5px
}

@media (--m) {
    .account-order__address {
        width: 50%
    }
}

.address__footer button {
    font-size: 12px
}

.account-addresses__new {
    font-size: 14px !important;
    margin-bottom: 2.5em
}

.account-address__form.is-edit-form {
    padding-left: 1em
}

.account-address__form.is-edit-form:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #fff;
    transform: translateY(-32px)
}

.account-address__form__fields {
    margin-left: -5px;
    margin-right: -5px
}

.account-address__form__field {
    padding: 0 5px;
    width: 100%
}

.account-address__form__field input::-webkit-input-placeholder {
    opacity: .5
}

.account-address__form__field input::-moz-placeholder {
    opacity: .5
}

.account-address__form__field input:-ms-input-placeholder {
    opacity: .5
}

.account-address__form__field input:-moz-placeholder {
    opacity: .5
}

@media (--s) {
    .account-address__form__field {
        width: 50%
    }
}

.product {
    background: #f0f4f8;
    background: var(--lightgray)
}

.slater-product {
    padding: 32px 0;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: auto;
    grid-gap: 1rem
}

.slater-product h1 {
    margin: 0
}

.slater-product__images {
    grid-column: 1/span 25;
    padding: 20px
}

@media(min-width:768px) {
    .slater-product__images {
        grid-column: 1/span 14
    }
}

.slater-product__images img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block
}

.slater-product__image-slider .flickity-viewport {
    min-height: 100%
}

.slater-product__image-slider-cell {
    width: 100%
}

.slater-product__image-nav-slider {
    min-height: 100px;
    padding: 5px 0
}

.slater-product__image-nav-slider .flickity-viewport {
    min-height: 100px
}

.slater-product__image-nav-slider-cell {
    width: 33%
}

.slater-product__info {
    grid-column: 1/span 25;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start
}

@media(min-width:768px) {
    .slater-product__info {
        grid-column: 15/span 10
    }
}

.slater-product__info h1 {
    text-align: left;
    margin-top: 0
}

.slater-product__info .bob {
    display: none
}

.slater-product__price span {
    font-size: 2rem
}

.slater-product .product-option-select:first-of-type {
    display: none
}

.slater-product__nutrition img {
    max-width: 200px
}

.slater-product button.button {
    padding: 10px 24px
}

.cart-drawer {
    background: #fff;
    background: var(--white)
}

.cart-drawer footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px
}

.cart-quantity {
    cursor: pointer
}

.cart-drawer-outer {
    display: none
}

.cart-drawer-outer.is-active {
    display: block
}

.cart-drawer-outer.is-visible .cart-drawer {
    transform: translateX(0)
}

.cart-drawer-outer.is-visible .cart-drawer-overlay {
    opacity: .8
}

.cart-drawer-overlay {
    opacity: 0
}

.cart-drawer,
.cart-drawer-overlay {
    transition: all var(--slow) ease-in-out;
    transition: all var(--slow) var(--ease)
}

.cart-drawer {
    max-width: 500px;
    transform: translateX(100%);
    flex-direction: column;
    padding-bottom: 160px
}

.cart-drawer header {
    border-bottom: 1px solid var(--gray);
    height: 75px
}

@media (--m) {
    .cart-drawer header {
        height: 100px
    }
}

.cart-drawer header button {
    height: 30px;
    width: 30px
}

.cart-drawer header button:focus {
    outline: 1px dashed var(--gray)
}

.cart-drawer header button svg {
    height: 15px;
    width: 15px
}

.cart-drawer__items {
    overflow: auto;
    padding-top: 75px
}

@media (--m) {
    .cart-drawer__items {
        padding-top: 100px
    }
}

.cart-drawer__items svg.loader {
    width: 100px;
    height: 100px;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.cart-drawer__item {
    padding: 2em 0 1.5em;
    border-top: 1px solid var(--gray)
}

.cart-drawer__item:first-child {
    border-top: 0
}

.cart-drawer__item img {
    width: 90px
}

.cart-drawer__item button {
    top: 1.5em
}

.cart-drawer__item button svg {
    width: 10px;
    height: 10px
}

.cart-drawer__item__remove {
    top: 1.5em
}

.cart-drawer__item__remove svg {
    width: 10px;
    height: 10px
}

.slater-input {
    border: 1px solid #000
}

.slater-input label {
    display: none
}

.collection {
    background: #f0f4f8;
    background: var(--lightgray);
    min-height: 100vh
}

.collection__container {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    max-width: 1400px;
    margin: 0 auto;
    grid-gap: 1rem;
    padding: 20px
}

.collection__item {
    grid-column: auto/span 24;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

@media(min-width:768px) {
    .collection__item {
        grid-column: auto/span 12
    }
}

@media(min-width:1024px) {
    .collection__item {
        grid-column: auto/span 8
    }
}

#preview-bar-iframe,
.none {
    display: none !important
}

/* Contact Page */

.contact-page {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: auto;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
}

.contact-page__text {
    grid-column: auto / span 24;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contact-page__form {
    grid-column: auto / span 24;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.contact-page__form input,
.contact-page__form select,
.contact-page__form textarea {
    border: solid 1px #ccc;
    border-radius: 5px;
    width: 100%;
    margin: 10px 0;
}

.contact-page__form .btn {
    margin-top: 20px;
}
      
/* Video Page */
      
      .video-blocks {
      	padding: 20px;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      .video-blocks__items {
      	display: grid;
        grid-template-columns: repeat(24, 1fr);
        grid-template-rows: auto;
        grid-gap: 10px;
      }
      
      @media(min-width: 990px) {
      
        .video-blocks__items {
        	grid-gap: 1rem;	
        }
        
      }
      
      .video-blocks__item {
      	grid-column: auto / span 24;
        grid-row: auto;
      }
      
      @media(min-width: 990px) {
      
        .video-blocks__item {
        	grid-column: auto / span 8;	
        }
        
      }
      
/* Hiding HomePage Video */
      
      .section-benefits__video {
      	display: none;
      }

/* Blog List Styling*/

  .postlist {
    background: var(--lightgray);
    padding: 0 20px;
  }

  .postlist h1 {
    padding: 40px 20px 0;
  }

  .blog__cards {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: auto;
    padding: 40px 20px;
    gap: 10px;
  }

  @media(min-width: 990px) {
    .blog__cards {
      gap: 1rem;
    }
  }

  .blog__card {
    grid-column: auto / span 24;
    padding: 20px 40px;
    background: #fff;
    border-radius: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  @media(min-width: 569px) {
    .blog__card {
      grid-column: auto / span 12;
    }
  }

  @media(min-width: 990px) {
    .blog__card {
      grid-column: auto / span 8;
    }
  }

  .blog__card img {
    max-width: 100%;
  }

  .blog__card h3 {
    margin: 20px 0 0;
  }

  .blog__card-author {
    font-size: .9rem;
    font-style: italic;
    margin: 20px 0;
  }

  .blog__card-excerpt {
    margin-bottom: 20px;
  }

  .blog__card .btn {
    margin-top: auto;
  }


/* Blog Post Styling */
      
      .blogpost {
      	max-width: 990px;
        margin: 0 auto;
        padding: 40px 20px;
      }

      .blogpost__author {
        font-size: .9rem;
        font-style: italic;
      }
      
      .blogpost__featuredimg {
      	width: 100%;
      }

      .blogpost a:not(.btn, .social-sharing__link) {
        text-decoration: underline;
      }
      
      .social-sharing__link {
      	padding: 8px 16px;
        background: var(--darkblue);
        color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
  		margin: 0 5px;
        display: inline;
      }

      .blogpost ul {
        list-style: square;
        padding: 0 0 20px 20px;
      }

      .blogpost li {
        font-size: 1.2rem;
        line-height: 1.8;
      }
      
 /* Partners Section */
      
 	  #section-partners {
        	padding: 60px 20px;
      }
      
      .section-partners__wrapper {
      		max-width: 1600px;
        	width: 100%;
        	margin: 0 auto;
      }
      
      .section-partners__text h2 {
      		text-align: center;
      }
      
      .section-partners__text p {
      		text-align: center;
      }
      
      .section-partners__cell{
      	display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .section-partners__image-wrapper {
      	width: clamp(300px, 33%, 600px);
        
      }
      
      .section-partners__image {
        padding-top: 33%;
        
      }

/* Header Flag */

.header-special {
  background: url('/cdn/shop/files/flag.svg?v=1663686471') center center/cover no-repeat;
  position: relative;
}

.header-special::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--mediumblue);
    opacity: .8;
  }

.header-special p {
    color: var(--white);
    margin: 0;
    position: relative;
    z-index: 1;
}

.announcement-bar__message {
  margin: 0;
}


.nutrition--vertical {
  max-width: 200px;
  padding-top: 20px;
}