@charset "UTF-8";

/* ===================================
   CSS Variables
   =================================== */

:root {
  --color-text: #041864;
  --color-text-rgb: 4, 24, 100;
  --color-body-text: #041864;
  --color-sale-text: #EA0606;
  --color-small-button-text-border: #3a3a3a;
  --color-text-field: #ffffff;
  --color-text-field-text: #000000;
  --color-text-field-text-rgb: 0, 0, 0;

  --color-btn-primary: #041864;
  --color-btn-primary-darker: #020c33;
  --color-btn-primary-text: #ffffff;

  --color-blankstate: rgba(4, 24, 100, 0.35);
  --color-blankstate-border: rgba(4, 24, 100, 0.2);
  --color-blankstate-background: rgba(4, 24, 100, 0.1);

  --color-text-focus: #072aae;
  --color-overlay-text-focus: #e6e6e6;
  --color-btn-primary-focus: #072aae;
  --color-btn-social-focus: #d2d2d2;
  --color-small-button-text-border-focus: #606060;

  --color-body: #ffffff;
  --color-bg: #ffffff;
  --color-bg-rgb: 255, 255, 255;
  --color-bg-alt: rgba(4, 24, 100, 0.05);

  --color-overlay-title-text: #ffffff;
  --color-image-overlay: #685858;
  --color-image-overlay-rgb: 104, 88, 88;
  --opacity-image-overlay: 0.17;
  --hover-overlay-opacity: 0.57;

  --color-border: #ebebeb;
  --color-border-form: #cccccc;
  --color-border-form-darker: #b3b3b3;

  --svg-select-icon: url(assets/ico-select.svg);
  --slick-img-url: url(assets/ajax-loader.gif);

  --font-weight-body--bold: 700;
  --font-weight-body--bolder: 700;

  --font-stack-header: Helvetica, Arial, sans-serif;
  --font-style-header: normal;
  --font-weight-header: 700;

  --font-stack-body: Helvetica, Arial, sans-serif;
  --font-style-body: normal;
  --font-weight-body: 400;

  --font-size-header: 26;

  --font-size-base: 16;

  --font-h1-desktop: 35;
  --font-h1-mobile: 32;
  --font-h2-desktop: 20;
  --font-h2-mobile: 18;
  --font-h3-mobile: 20;
  --font-h4-desktop: 17;
  --font-h4-mobile: 15;
  --font-h5-desktop: 15;
  --font-h5-mobile: 13;
  --font-h6-desktop: 14;
  --font-h6-mobile: 12;

  --font-mega-title-large-desktop: 65;

  --font-rich-text-large: 18;
  --font-rich-text-small: 14;

  --color-video-bg: #f2f2f2;

  --global-color-image-loader-primary: rgba(4, 24, 100, 0.06);
}


/* ===================================
   Base Styles
   =================================== */


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

body {
  margin: 0
}

body,
html {
  background-color: var(--color-body)
}

body,
button {
  font-size: calc(var(--font-size-base) * 1px);
  font-family: var(--font-stack-body);
  font-style: var(--font-style-body);
  font-weight: var(--font-weight-body);
  color: var(--color-text);
  line-height: 1.5
}

body,
button {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%
}

.border-bottom {
  border-bottom: 1px solid var(--color-border)
}

.btn--link {
  background-color: transparent;
  border: 0;
  margin: 0;
  color: var(--color-text);
  text-align: left
}

.text-right {
  text-align: right
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  fill: currentColor
}

.icon__fallback-text,
.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0
}

svg.icon:not(.icon--full-color) circle,
svg.icon:not(.icon--full-color) ellipse,
svg.icon:not(.icon--full-color) g,
svg.icon:not(.icon--full-color) line,
svg.icon:not(.icon--full-color) path,
svg.icon:not(.icon--full-color) polygon,
svg.icon:not(.icon--full-color) polyline,
svg.icon:not(.icon--full-color) rect,
symbol.icon:not(.icon--full-color) circle,
symbol.icon:not(.icon--full-color) ellipse,
symbol.icon:not(.icon--full-color) g,
symbol.icon:not(.icon--full-color) line,
symbol.icon:not(.icon--full-color) path,
symbol.icon:not(.icon--full-color) polygon,
symbol.icon:not(.icon--full-color) polyline,
symbol.icon:not(.icon--full-color) rect {
  fill: inherit;
  stroke: inherit
}

li {
  list-style: none
}

.list--inline {
  padding: 0;
  margin: 0
}

.list--inline>li {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle
}

a {
  color: var(--color-text);
  text-decoration: none
}

.h1,
.h2,
h1,
h2 {
  margin: 0 0 17.5px;
  font-family: var(--font-stack-header);
  font-style: var(--font-style-header);
  font-weight: var(--font-weight-header);
  line-height: 1.2;
  overflow-wrap: break-word;
  word-wrap: break-word
}

.h1 a,
.h2 a,
h1 a,
h2 a {
  color: inherit;
  text-decoration: none;
  font-weight: inherit
}

.h1,
h1 {
  font-size: calc(((var(--font-h1-desktop))/ (var(--font-size-base))) * 1em);
  text-transform: none;
  letter-spacing: 0
}

@media only screen and (max-width:749px) {

  .h1,
  h1 {
    font-size: calc(((var(--font-h1-mobile))/ (var(--font-size-base))) * 1em)
  }
}

.h2,
h2 {
  font-size: calc(((var(--font-h2-desktop))/ (var(--font-size-base))) * 1em);
  text-transform: uppercase;
  letter-spacing: .1em
}

@media only screen and (max-width:749px) {

  .h2,
  h2 {
    font-size: calc(((var(--font-h2-mobile))/ (var(--font-size-base))) * 1em)
  }
}

p {
  color: var(--color-body-text);
  margin: 0 0 19.44444px
}

@media only screen and (max-width:749px) {
  p {
    font-size: calc(((var(--font-size-base) - 1)/ (var(--font-size-base))) * 1em)
  }
}

p:last-child {
  margin-bottom: 0
}

@media only screen and (max-width:749px) {
  .small--hide {
    display: none !important
  }
}

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -30px
}

.grid::after {
  content: '';
  display: table;
  clear: both
}

@media only screen and (max-width:749px) {
  .grid {
    margin-left: -22px
  }
}

.grid::after {
  content: '';
  display: table;
  clear: both
}

.grid--no-gutters {
  margin-left: 0
}

.grid--no-gutters .grid__item {
  padding-left: 0
}

.grid--table {
  display: table;
  table-layout: fixed;
  width: 100%
}

.grid--table>.grid__item {
  float: none;
  display: table-cell;
  vertical-align: middle
}

.grid__item {
  float: left;
  padding-left: 30px;
  width: 100%
}

@media only screen and (max-width:749px) {
  .grid__item {
    padding-left: 22px
  }
}

.grid__item[class*="--push"] {
  position: relative
}

@media only screen and (min-width:750px) {
  .medium-up--one-quarter {
    width: 25%
  }

  .medium-up--push-one-third {
    width: 33.33%
  }

  .medium-up--one-half {
    width: 50%
  }

  .medium-up--push-one-third {
    left: 33.33%;
    position: relative
  }
}

.site-header {
  position: relative;
  background-color: var(--color-body)
}

@media only screen and (max-width:749px) {
  .site-header {
    border-bottom: 1px solid var(--color-border)
  }
}

@media only screen and (min-width:750px) {
  .site-header {
    padding: 0 55px
  }

  .site-header.logo--center {
    padding-top: 30px
  }
}

.site-header__logo {
  margin: 15px 0
}

.logo-align--center .site-header__logo {
  text-align: center;
  margin: 0 auto
}

@media only screen and (max-width:749px) {
  .logo-align--center .site-header__logo {
    text-align: left;
    margin: 15px 0
  }
}

@media only screen and (max-width:749px) {
  .site-header__logo {
    padding-left: 22px;
    text-align: left
  }

  .site-header__logo img {
    margin: 0
  }
}

.site-header__logo-link {
  display: inline-block;
  word-break: break-word
}

@media only screen and (min-width:750px) {
  .logo-align--center .site-header__logo-link {
    margin: 0 auto
  }
}

.site-header__logo-image {
  display: block
}

@media only screen and (min-width:750px) {
  .site-header__logo-image {
    margin: 0 auto
  }
}

.site-header__logo-image img {
  width: 100%
}

.site-header__logo-image--centered img {
  margin: 0 auto
}

.site-header__logo img {
  display: block
}

.site-header__icons {
  position: relative;
  white-space: nowrap
}

@media only screen and (max-width:749px) {
  .site-header__icons {
    width: auto;
    padding-right: 13px
  }

  .site-header__icons .btn--link,
  .site-header__icons .site-header__cart {
    font-size: calc(((var(--font-size-base))/ (var(--font-size-base))) * 1em)
  }
}

.site-header__icons-wrapper {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -webkit-justify-content: flex-end;
  -ms-justify-content: flex-end;
  justify-content: flex-end
}

.site-header__account,
.site-header__cart,
.site-header__search {
  position: relative
}

.site-header__search.site-header__icon {
  display: none
}

@media only screen and (min-width:1400px) {
  .site-header__search.site-header__icon {
    display: block
  }
}

.site-header__search-toggle {
  display: block
}

@media only screen and (min-width:750px) {

  .site-header__account,
  .site-header__cart {
    padding: 10px 11px
  }
}

.site-header__cart-title,
.site-header__search-title {
  position: absolute !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  display: block;
  vertical-align: middle
}

.site-header__cart-title {
  margin-right: 3px
}

.site-header__cart-count {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: .4rem;
  top: .2rem;
  font-weight: 700;
  background-color: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
  border-radius: 50%;
  min-width: 1em;
  height: 1em
}

.site-header__cart-count span {
  font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(11em / 16);
  line-height: 1
}

@media only screen and (max-width:749px) {
  .site-header__cart-count {
    top: calc(7em / 16);
    right: 0;
    border-radius: 50%;
    min-width: calc(19em / 16);
    height: calc(19em / 16)
  }
}

@media only screen and (max-width:749px) {
  .site-header__cart-count span {
    padding: .25em calc(6em / 16);
    font-size: 12px
  }
}

.site-header__menu {
  display: none
}

@media only screen and (max-width:749px) {
  .site-header__icon {
    display: inline-block;
    vertical-align: middle;
    padding: 10px 11px;
    margin: 0
  }
}

@media only screen and (min-width:750px) {
  .site-header__icon .icon-search {
    margin-right: 3px
  }
}

.announcement-bar {
  z-index: 10;
  position: relative;
  text-align: center;
  border-bottom: 1px solid transparent;
  padding: 2px
}

.announcement-bar__link {
  display: block
}

.announcement-bar__message {
  display: block;
  padding: 11px 22px;
  font-size: calc(((16)/ (var(--font-size-base))) * 1em);
  font-weight: var(--font-weight-header)
}

@media only screen and (min-width:750px) {
  .announcement-bar__message {
    padding-left: 55px;
    padding-right: 55px
  }
}

.site-nav {
  position: relative;
  padding: 0;
  text-align: center;
  margin: 25px 0
}

.site-nav a {
  padding: 3px 10px
}

.site-nav__link {
  display: block;
  white-space: nowrap
}

.site-nav--centered .site-nav__link {
  padding-top: 0
}

.site-nav__link .icon-chevron-down {
  width: calc(8em / 16);
  height: calc(8em / 16);
  margin-left: .5rem
}

.site-nav__label {
  border-bottom: 1px solid transparent
}

.site-nav__link--active .site-nav__label {
  border-bottom-color: var(--color-text)
}

.site-nav__link--button {
  border: none;
  background-color: transparent;
  padding: 3px 10px
}

.site-header__mobile-nav {
  z-index: 11;
  position: relative;
  background-color: var(--color-body)
}

@media only screen and (max-width:749px) {
  .site-header__mobile-nav {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center
  }
}

.mobile-nav--open .icon-close {
  display: none
}

.main-content {
  opacity: 0
}

.main-content .shopify-section {
  display: none
}

.main-content .shopify-section:first-child {
  display: inherit
}

.critical-hidden {
  display: none
}