html, body { margin: 0 }
*,
*::before,
*::after {
  box-sizing: border-box;
}
a,
button,
[role="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 }
.fill, .bottom { 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 }
.mxa, .ma { margin-left: auto }
.mxa, .ma { margin-right: auto }
.mya, .ma { margin-top: auto }
.mya, .ma { margin-bottom: auto; }
.pt0, .py0, .p0 { padding-top: 0 }
.pb0, .py0, .p0 { padding-bottom: 0 }
.mt0, .my0, .m0 { margin-top: 0 }
.mb0, .my0, .m0 { margin-bottom: 0 }
.mt025, .my025, .m025 { margin-top: 0.25em }
.mb025, .my025, .m025 { margin-bottom: 0.25em }
.ml025, .mx025, .m025 { margin-left: 0.25em }
.mr025, .mx025, .m025 { margin-right: 0.25em }
.pt025, .py025, .p025 { padding-top: 0.25em }
.pb025, .py025, .p025 { padding-bottom: 0.25em }
.pl025, .px025, .p025 { padding-left: 0.25em }
.pr025, .px025, .p025 { padding-right: 0.25em }
.mt05, .my05, .m05 { margin-top: 0.5em }
.mb05, .my05, .m05 { margin-bottom: 0.5em }
.ml05, .mx05, .m05 { margin-left: 0.5em }
.mr05, .mx05, .m05 { margin-right: 0.5em }
.pt05, .py05, .p05 { padding-top: 0.5em }
.pb05, .py05, .p05 { padding-bottom: 0.5em }
.pl05, .px05, .p05 { padding-left: 0.5em }
.pr05, .px05, .p05 { padding-right: 0.5em }
.mt075, .my075, .m075 { margin-top: 0.75em }
.mb075, .my075, .m075 { margin-bottom: 0.75em }
.ml075, .mx075, .m075 { margin-left: 0.75em }
.mr075, .mx075, .m075 { margin-right: 0.75em }
.pt075, .py075, .p075 { padding-top: 0.75em }
.pb075, .py075, .p075 { padding-bottom: 0.75em }
.pl075, .px075, .p075 { padding-left: 0.75em }
.pr075, .px075, .p075 { padding-right: 0.75em }
.mt1, .my1, .m1 { margin-top: 1em }
.mb1, .my1, .m1 { margin-bottom: 1em }
.ml1, .mx1, .m1 { margin-left: 1em }
.mr1, .mx1, .m1 { margin-right: 1em }
.pt1, .py1, .p1 { padding-top: 1em }
.pb1, .py1, .p1 { padding-bottom: 1em }
.pl1, .px1, .p1 { padding-left: 1em }
.pr1, .px1, .p1 { padding-right: 1em }
form {
  margin: 0;
}
input,
textarea,
select {
  display: inline-block;
  outline: 0;
  border-radius: 0;
  border: 1px solid #000;
  position: relative;
  font-size: inherit;
  background-color: transparent;
}
textarea {
  max-width: 100%;
  overflow: auto;
  resize: vertical;
}
.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);
}
.underline {
  text-decoration: underline;
}
:root {
  --black: #000;
  --white: #FFF;
  --green: #A4E1B9;
  --blue: #344FDA;
}
.c-white {
  color: #FFF;
  color: var(--white);
}
.bg-white {
  background-color: #FFF;
  background-color: var(--white);
}
.c-black {
  color: #000;
  color: var(--black);
}
.bg-black {
  background-color: #000;
  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);
}
/* @import 'global/typography.css'; */
#root {
  transition: opacity 200ms cubic-bezier(.12,.67,.53,1);
  transition: opacity 200ms var(--cubic);
}
.is-transitioning #root {
  opacity: 0;
}
.pointer {
  cursor: pointer;
}
/* @import 'global/lists.css'; */
/* @import 'global/forms.css'; */
.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;
}
.f {
    display: flex;
}
.fdr {
    flex-direction: row;
}
.fdc {
    flex-direction: column;
}
.jcc {
    justify-content: center;
}
.jcs {
    justify-content: start;
}
.aic {
    align-items: center;
}
.fw {
    flex-wrap: wrap;
}
/* @import 'components/buttons.css'; */
/* @import 'components/image.css'; */
/* @import 'components/counter.css'; */
.new-header-spacer {
    height: 70px;
    width: 100%;
}
@media screen and (min-width: 1200px) {
.new-header-spacer { 
        height: 80px
}
    }
.new-header {
    position: fixed;
    top: 0;
    left: 0;
    height: 70px;
    background: white;
    z-index: 999;
    width: 100vw;
}
@media screen and (min-width: 1200px) {
.new-header { 
        height: 80px
}
    }
.new-header .hide-mobile {
        display: none;
    }
@media screen and (min-width: 1200px) {
.new-header .hide-mobile { 
            display: flex
    }
        }
.new-header .hide-desktop {
        display: flex;
    }
@media screen and (min-width: 1200px) {
.new-header .hide-desktop { 
            display: none
    }
        }
.new-header .header-contact {
        position: absolute;
        top: 30px;
        left: 120px;
    }
.new-header .header-search {
        position: absolute;
        top: 30px;
        right: 120px;
    }
.new-header .header-accounts {
        position: absolute;
        top: 30px;
        right: 220px;
    }
.new-header .header-shop {
        position: absolute;
        top: 25px;
        left: 30px;
    }
@media screen and (min-width: 1200px) {
.new-header .header-shop {
            top: 30px
    }
        }
.new-header .header-logo {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translate(-50%);
    }
.new-header .header-logo img {
            width: 150px;
            height: auto;
        }
@media screen and (min-width: 1200px) {
.new-header .header-logo img {
                width: 200px;
                height: auto
        }
            }
.new-header .header-cart {
        top: 25px;
        right: 25px;
        position: absolute;
    }
@media screen and (min-width: 1200px) {
.new-header .header-cart {
            top: 30px
    }
        }
.new-navigation {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: white;
    z-index: 9999;
    padding-bottom: 30px;
    flex-direction: column;
}
@media screen and (min-width: 1200px) {
.new-navigation {
        top: 80px;
        min-height: auto;
        height: auto;
        border-bottom: 1px solid black
}
    }
@media screen and (min-width: 1200px) {
.new-navigation {
        flex-direction: row
}
    }
.new-navigation__left {
    width: 100%;
    height: auto;
}
.new-navigation__left .navlist-child__link {
        margin-right: 3px;
    }
.new-navigation__left .navlist-child__link:last-child .comma {
                display: none;
            }
@media screen and (min-width: 1200px) {
.new-navigation__left .navlist-child__link { 
            margin-right: 6px
    }
        }
@media screen and (min-width: 1200px) {
.new-navigation__left { 
        flex-basis: 40%;
        height: 100%
}
    }
.new-navigation__right {
    flex-direction: column;
}
@media screen and (min-width: 1200px) {
.new-navigation__right { 
        flex-direction: row
}
    }
.new-navigation__wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding-left: 25px;
    padding-right: 25px;

}
@media screen and (min-width: 1200px) {
.new-navigation__wrapper { 
        flex-direction: row

}
    }
.new-navigation__wrapper p {
        margin: 0;
    }
.new-navigation__wrapper .nav-title {
        font-size: 28px;
        padding-top: 5px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
@media screen and (min-width: 1200px) {
.new-navigation__wrapper .nav-title { 
            font-size: 32px;
            border-top: 0;
            padding-top: 0;
            margin-bottom: 10px;
            border-bottom: 1px solid black
    }
        }
@media screen and (min-width: 1200px) {
.new-navigation__wrapper .navlist { 
            margin-right: 40px;
            margin-top: 25px
        
    }
        }
@media screen and (min-width: 1200px) {
.new-navigation__wrapper .new-navigation__footer { 
            display: none
    }
        }
.shopall-dropdown,
.js-shopall {
 height: 100%;
 display: block;
 
}
.shopall-content {
  opacity: 0;
  visibility: hidden;
  transition: all .25s;
  float: left;
}
.shopall-content.active {
    opacity: 1;
    visibility: visible;
    transition: all .25s;
  }
.js-mobile-shopall .navlist-child {
      display: none;
    }
.js-mobile-shopall .navlist-child a {
        font-size: 18px;
      }
@media screen and (min-width: 1200px) {
.js-mobile-shopall .navlist-child { 
            display: block
    }
        }
.js-mobile-shopall .rotate {
        transition: all .25s;
    }
@media screen and (min-width: 1200px) {
.js-mobile-shopall .rotate { 
            display: none
    }
        }
.js-mobile-shopall.open {
        margin-bottom: 20px;
  
    }
.js-mobile-shopall.open .navlist-child {
          display: block;
        }
.js-mobile-shopall.open .rotate {
            transition: all .25s;
            transform: rotate(45deg);
        }
.searchpage {
    min-height: 100vh;
}
.searchpage__form{
  
    width: auto;
    margin: 0 auto;
    padding: 0 20px;
}
.searchpage__form .searchpage__input {
        height: 40px;
        width: 200px;
        border-radius: 0;
    }
.searchpage__form .searchpage__submit {
        height: 40px;
        width: auto;
        padding: 0 10px !important;
        margin: 0;
        border-radius: 0;
    }
.new-footer {
    position: relative;
    padding: 0 30px;
}
.collection {
  padding: 32px 0;
}
.collection__grid {
}
.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%
}
  }
/**
 * slater demo
 *
 * you might want to delete these
 *
 * or not, up to you
 */
/* @import 'slater/code.css';
@import 'slater/typography.css';
@import 'slater/header.css';
@import 'slater/footer.css';
@import 'slater/welcome.css';
@import 'slater/accounts.css';
@import 'slater/product.css';
@import 'slater/cart-drawer.css';
@import 'slater/inputs.css'; */
#preview-bar-iframe, .none {
  display: none !important;
}