html,
body,
p,
div,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
img,
pre,
form,
fieldset,
button {
  margin: 0;
  padding: 0; }

img,
fieldset,
button {
  border: 0; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
section {
  display: block; }

button {
  cursor: pointer;
  color: inherit; }

button,
input,
select,
textarea {
  font: inherit;
  background: none;
  outline: none; }

button[disabled] {
  cursor: default; }

input {
  line-height: normal; }

input[type='checkbox'],
input[type='radio'] {
  box-sizing: border-box;
  padding: 0; }

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  height: auto; }

input[type='number'] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield; }
  input[type='number']::-webkit-outer-spin-button, input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none; }

fieldset {
  border: 0; }

legend {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto; }

textarea,
input[type='text'],
input[type='number'],
input[type='email'],
input[type='tel'],
input[type='search'],
input[type='password'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
@font-face {
  font-family: 'Klein-Medium';
  src: url(./public/fonts/klein/Klein-Medium-Web.woff2) format("woff2");
  font-weight: normal;
  font-display: swap; }

@font-face {
  font-family: 'Klein-Medium-Condensed';
  src: url(./public/fonts/klein/Klein-MediumCondensed-Web.woff2) format("woff2"), url(./public/fonts/klein/Klein-MediumCondensed-Web.woff2) format("woff");
  font-display: swap;
  font-stretch: condensed; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.input__input {
  position: relative;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #6d6d6d !important;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  color: #313131;
  line-height: normal !important;
  height: 45px !important;
  outline: none;
  padding: 10px !important;
  text-transform: none;
  transition: border 0.3s ease;
  width: 100%;
  letter-spacing: 0.4px;
  font-size: 12px !important;
  font-family: "Klein-Medium", Calibri, sans-serif !important; }
  .input__input--success, .input__input--error {
    padding-right: 30px;
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 17px; }
  .input__input--error, .input__input--error:focus, .input__input--error:hover {
    border-bottom: 2px solid #d0021b !important; }
    .input__input--error + .button, .input__input--error:focus + .button, .input__input--error:hover + .button {
      border-bottom: 2px solid #d0021b; }
  .input__input--success {
    background-image: url("data:image/svg+xml,%3Csvg height='22' viewBox='0 0 27 22' width='27' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 23.2091581 6.36932511 6.7908419 16.63067489-18' fill='none' stroke='%23417505' stroke-width='3' transform='translate(2 -11)'/%3E%3C/svg%3E"); }

.input__input + .input__error,
.input__password + .input__error {
  padding-top: 5px; }

.input__label {
  display: block;
  margin-bottom: 9px;
  text-align: left;
  text-transform: uppercase;
  font-size: 12px;
  line-height: normal; }
  .input__label:after {
    content: ':'; }
  .input--accessible-label .input__label {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important; }
  .input__label a {
    display: inline;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-decoration: underline; }

.input__password {
  display: flex; }

.input__password .input__input {
  flex: 1; }
  .input__password .input__input + .button {
    border-left: 0; }

@media (min-width: 741px) {
  .input__input {
    height: 40px !important; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.form {
  position: relative; }
  .form__inputContainer {
    margin-bottom: 24px; }
  .form__heading {
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 18px;
    letter-spacing: 0.5;
    margin-bottom: 16px;
    text-transform: uppercase; }
  .form__error {
    display: none;
    color: #d0021b;
    margin: 0;
    padding-top: 10px; }
  .form__message {
    color: #6d6d6d; }
  .form--error .form__error {
    display: block; }
  .form__action {
    display: flex;
    justify-content: space-between; }
    .form__action .button {
      width: 50%; }
      .form__action .button:first-of-type {
        margin-right: 10px; }

.form-field {
  margin-bottom: 16px;
  display: block; }
  .form-field--no-trail {
    margin-bottom: 0; }
  .form-field__text {
    background: #ffffff none;
    border: 1px solid #e4e4e4;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    color: #313131;
    height: 35px;
    outline: none;
    padding: 9px 10px 8px 10px;
    text-transform: none;
    transition-duration: 0.3s;
    transition-property: border-color;
    transition-timing-function: ease-in-out;
    margin-bottom: 1px;
    width: 100%; }
    .form-field__text:hover {
      border-color: #f4f4f4; }
    .form-field__text:focus {
      border-color: #f4f4f4; }
    .form-field__text:disabled, .form-field__text--disabled {
      border: 1px solid #e4e4e4;
      color: #f4f4f4;
      cursor: default;
      opacity: 1;
      text-fill-color: #f4f4f4; }
  .form-field__error-message {
    display: none; }
  .form-field__checkbox {
    margin-bottom: 15px; }

.expand__tab {
  border-bottom: 1px solid #e4e4e4; }
  .expand__tab.\--opened .expand__content {
    max-height: 1000px;
    padding-bottom: 16px; }
  .expand__tab.\--opened .expand__trigger:before {
    display: none; }

.expand__content {
  padding-top: 16px;
  box-sizing: border-box;
  max-height: 0;
  overflow: hidden;
  transition: all .3s;
  font-family: "Klein-Medium", Calibri, sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 19px;
  letter-spacing: 0.5;
  color: #6d6d6d; }
  @media (min-width: 1025px) {
    .expand__content {
      font-family: "Klein-Medium", Calibri, sans-serif;
      font-size: 12px;
      font-weight: normal;
      line-height: 18px;
      letter-spacing: 0.4px; } }

.expand__trigger {
  margin-top: 14px;
  position: relative;
  text-transform: uppercase;
  cursor: pointer;
  font-family: "Klein-Medium", Calibri, sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 20px;
  letter-spacing: 0.5px; }
  @media (min-width: 1025px) {
    .expand__trigger {
      font-family: "Klein-Medium", Calibri, sans-serif;
      font-size: 13px;
      font-weight: normal;
      line-height: 20px;
      letter-spacing: 0.5px; } }
  .expand__trigger:after, .expand__trigger:before {
    content: "";
    position: absolute;
    right: 1px;
    top: 9px;
    width: 10px;
    height: 1px;
    background: #313131;
    display: block;
    pointer-events: none; }
  .expand__trigger:before {
    transform: rotate(90deg); }

.is-hidden {
  display: none; }

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  font-family: "Klein-Medium", Calibri, sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 19px;
  letter-spacing: 0.5; }
  @media (min-width: 1025px) {
    body,
    html {
      font-family: "Klein-Medium", Calibri, sans-serif;
      font-size: 12px;
      font-weight: normal;
      line-height: 18px;
      letter-spacing: 0.4px; } }

html {
  -webkit-text-size-adjust: none; }

body {
  background-color: #ffffff;
  color: #313131;
  box-sizing: border-box;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip: ink; }
  body.\--no-scroll {
    overflow: hidden; }
    @media (max-width: 740px) {
      body.\--no-scroll {
        position: fixed; } }

a,
p,
ul,
ol,
dl,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
input,
table,
div,
span,
button,
nav,
header,
footer {
  box-sizing: border-box; }

a {
  color: inherit;
  text-decoration: none; }
  a:hover, a:active {
    text-decoration: underline; }
  a:focus {
    outline: none; }

.o-ck-heading-1 {
  font-family: "Klein-Medium-Condensed", Klein-Medium, Calibri, sans-serif;
  font-size: 23px;
  font-weight: normal;
  line-height: 23px;
  letter-spacing: 0.6; }

.o-ck-heading-2 {
  font-family: "Klein-Medium", Calibri, sans-serif;
  font-size: 18px;
  font-weight: normal;
  line-height: 18px;
  letter-spacing: 0.5; }

.o-ck-para {
  font-family: "Klein-Medium-Condensed", Klein-Medium, Calibri, sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 23px;
  letter-spacing: 0.6; }

input::-webkit-input-placeholder {
  color: #9E9E9E; }

input::-moz-placeholder {
  color: #9E9E9E; }

input:-ms-input-placeholder {
  color: #9E9E9E; }

input:-moz-placeholder {
  color: #9E9E9E; }

.app--desktop, .app--tablet, .app--mobile {
  position: relative; }

.app--desktop {
  min-width: 1024px; }

.app--tablet {
  display: flex;
  flex-direction: column;
  align-content: space-between;
  align-items: stretch;
  min-height: 100vh;
  /*div:nth-child(2){
      
    }*/ }
  .app--tablet header + div {
    flex-grow: 2; }
  .app--tablet .footer {
    margin: 0; }

#page .app--tablet {
  min-height: 0; }

.pwaPlp .estPage .productListHeading {
  top: 90px; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.header {
  position: relative;
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 200;
  background: #ffffff; }
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .header {
      bottom: auto !important;
      position: fixed; } }
  .header__inner {
    position: relative;
    padding: 6px 40px 0;
    margin: 0 auto;
    height: 70px;
    max-width: 1920px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between; }
  .header.\--focused {
    z-index: 410; }
  .header.\--mmactive {
    margin-bottom: 30px;
    transition: margin 0.2s ease-in-out; }

.header-overlay {
  position: fixed;
  top: 0;
  z-index: 400;
  opacity: 0;
  background: #000000;
  transition: opacity 0.3s ease; }
  .header-overlay.\--active {
    opacity: 0.7;
    right: 0;
    bottom: 0;
    left: 0; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.csr-header {
  background-color: #000000;
  color: #ffffff; }
  .csr-header__inner {
    display: flex;
    max-width: 1920px;
    margin: 0 auto;
    padding: 10px 40px; }
  .csr-header__column:last-of-type {
    margin-left: auto; }
  .csr-header__list-item:not(:first-child) {
    margin-left: 20px; }

.logo {
  display: block;
  line-height: 0; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.mega-menu {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-basis: 15%; }
  .mega-menu__top-link {
    display: inline-block;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.4px;
    color: #9E9E9E;
    padding: 20px 16px; }
    .mega-menu__top-link.\--active {
      color: #000000; }
      .mega-menu__top-link.\--active:hover {
        color: #000000; }
    .mega-menu__top-link:hover {
      color: #6d6d6d;
      text-decoration: none; }
  .mega-menu.\--active .mega-menu__second-level {
    transform: translateY(100%); }
  .mega-menu.\--active .mega-menu__second-level__hover-bar {
    opacity: 1; }
  .mega-menu.\--active .mega-menu__second-level {
    z-index: 0; }
  .mega-menu__backdrop {
    content: '';
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 100px;
    left: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.37);
    z-index: -1; }
  .mega-menu__first-level-items {
    display: flex; }
  .mega-menu__second-level {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(2px);
    background-color: #ffffff;
    border-bottom: 2px solid #f4f4f4;
    z-index: -1;
    transition: transform 0.2s ease-in-out; }
    .mega-menu__second-level__inner {
      position: relative;
      max-width: 1920px;
      padding: 0 40px;
      margin: 0 auto;
      display: none; }
      .mega-menu__second-level__inner.\--active {
        display: flex; }
    .mega-menu__second-level-items {
      list-style: none;
      text-transform: uppercase; }
    .mega-menu__second-level-items:first-child .mega-menu__second-level-link {
      padding-left: 0; }
    .mega-menu__second-level-items:first-child .mega-menu__second-level-link {
      padding-left: 0; }
    .mega-menu__second-level-link {
      font-family: "Klein-Medium", Calibri, sans-serif;
      font-size: 11px;
      font-weight: normal;
      line-height: 18px;
      letter-spacing: 0.4px;
      display: inline-block;
      padding: 6px 18px 4px;
      position: relative; }
      .mega-menu__second-level-link:hover {
        text-decoration: none; }
    .mega-menu__second-level__hover-bar {
      position: absolute;
      display: none;
      left: 0;
      bottom: -2px;
      height: 2px;
      background-color: #313131;
      opacity: 0;
      pointer-events: none;
      transition: transform 0.2s ease-in-out,
 width 0.2s ease-in-out,
 opacity 0.2s ease-in-out; }
      .mega-menu__second-level__hover-bar.\--no-animation {
        transition: opacity 0.2s ease-in-out; }
    .mega-menu__second-level__inner.\--active + .mega-menu__second-level__hover-bar {
      display: block; }
  .mega-menu__flyout {
    position: absolute;
    left: 0;
    right: 0;
    width: calc(100% - 80px);
    margin: 0 auto;
    display: none;
    border-top: 2px solid transparent; }
    .mega-menu__flyout.\--active {
      display: block; }
  .mega-menu .flyout__inner {
    display: flex;
    background-color: #ffffff;
    min-height: 330px; }
  .mega-menu .flyout__column {
    padding: 30px 0 30px 60px;
    width: 18.8%; }
    .mega-menu .flyout__column:first-of-type {
      padding-left: 40px; }
    .mega-menu .flyout__column:first-of-type .column__list {
      border-right: 1px solid #f4f4f4; }
  .mega-menu .flyout__e-spot {
    display: flex;
    align-self: flex-end;
    flex-wrap: nowrap;
    margin-left: auto;
    padding: 40px;
    background-color: #f4f4f4; }
    .mega-menu .flyout__e-spot__card {
      display: block;
      background-color: #ffffff;
      margin-right: 20px;
      width: calc(100vw  * 15.37335 / 100);
      padding-bottom: 10px; }
      .mega-menu .flyout__e-spot__card:hover {
        text-decoration: none; }
      .mega-menu .flyout__e-spot__card:last-of-type {
        margin-right: 0; }
  .mega-menu .card__image {
    display: block;
    width: 100%; }
  .mega-menu .card__title {
    padding: 10px 10px 0px;
    color: #6d6d6d;
    display: block; }
  .mega-menu .card__sub-title {
    padding: 0px 10px 20px;
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0.5px; }
  .mega-menu .column__title {
    display: block;
    min-height: 18px;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: #9E9E9E; }
  .mega-menu .column__list {
    padding-right: 10px; }
  .mega-menu .column__list__item {
    color: #313131;
    display: block;
    padding: 5px 0 4px;
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 11px;
    font-weight: normal;
    line-height: 18px;
    letter-spacing: 0.4px; }
    .mega-menu .column__list__item:hover {
      color: #9E9E9E;
      text-decoration: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.header-shipping-banner {
  background-color: #313131;
  color: #ffffff; }
  .header-shipping-banner__item {
    color: inherit; }
    .header-shipping-banner__item:hover {
      color: inherit; }
  @media (max-width: 1024px) {
    .header-shipping-banner {
      display: block;
      font-size: 11px;
      padding: 5px;
      text-align: center; }
      .header-shipping-banner__item {
        display: block; } }
  @media (min-width: 1025px) {
    .header-shipping-banner {
      display: flex;
      justify-content: center;
      padding: 10px;
      font-family: "Klein-Medium", Calibri, sans-serif;
      font-size: 11px;
      font-weight: normal;
      line-height: 18px;
      letter-spacing: 0.4px; }
      .header-shipping-banner__item {
        line-height: 1em;
        padding: 0 10px; }
        .header-shipping-banner__item:not(:first-child) {
          border-left: 1px solid #ffffff; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.header-search {
  flex-basis: 50%;
  padding-bottom: 5px;
  position: relative; }
  .header-search__input-container {
    position: relative;
    height: 30px; }
    .header-search__input-container__button {
      display: block;
      position: absolute;
      width: 30px;
      height: 30px;
      top: 0;
      left: 0; }
      .header-search__input-container__button:after, .header-search__input-container__button:before {
        content: "";
        display: block;
        position: absolute; }
      .header-search__input-container__button:after {
        width: 1px;
        height: 4px;
        display: block;
        position: absolute;
        border-radius: 2px;
        background-color: #313131;
        left: 20px;
        top: 20px;
        transform: rotate(-45deg); }
      .header-search__input-container__button:before {
        width: 9px;
        height: 9px;
        border-radius: 100%;
        border: 1px solid #313131;
        left: 10px;
        top: 10px; }
    .header-search__input-container__input {
      padding-left: 32px !important;
      border: none !important;
      width: 100% !important;
      height: 32px !important;
      background-color: #F4F4F4 !important;
      padding: 2px 0 0 32px !important;
      font-family: "Klein-Medium", Calibri, sans-serif;
      font-size: 11px;
      font-weight: normal;
      line-height: 18px;
      letter-spacing: 0.4px;
      color: #313131;
      font-size: 11px !important; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.search-suggestions {
  background: #ffffff;
  position: absolute;
  width: 100%;
  left: 0;
  top: 51px; }
  @media (max-width: 1024px) {
    .search-suggestions {
      display: none;
      padding: 10px 0; } }
  .search-suggestions.\--active {
    background: #ffffff; }
    @media (max-width: 1024px) {
      .search-suggestions.\--active {
        display: flex;
        flex-direction: column; } }
    @media (max-width: 1024px) {
      .search-suggestions.\--active {
        min-height: 90%; } }
  .search-suggestions.\--has-products {
    background: #f4f4f4;
    position: fixed;
    top: 71px;
    width: 1090px;
    left: 50%;
    transform: translateX(-50%); }
    .search-suggestions.\--has-products .search-suggestions__panel.\--suggestions {
      width: calc(100% - 750px);
      padding: 40px 40px 20px; }
    @media (max-width: 1100px) {
      .search-suggestions.\--has-products {
        left: 0;
        transform: none;
        width: 100vw;
        min-height: 0; } }
  @media (max-width: 1024px) {
    .search-suggestions__form.\--active {
      height: calc(100vh - 60px);
      display: flex;
      flex-direction: column; }
    .search-suggestions__form-input {
      margin: 20%; }
    .search-suggestions__form .input__input::-webkit-input-placeholder {
      color: #313131; }
    .search-suggestions__form .input__input::-moz-placeholder {
      color: #313131; }
    .search-suggestions__form .input__input:-ms-input-placeholder {
      color: #313131; }
    .search-suggestions__form .input__input:-moz-placeholder {
      color: #313131; } }
  @media (max-width: 740px) {
    .search-suggestions__form.\--active {
      height: calc(100vh - 120px); } }
  .search-suggestions__suggestions {
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0.5;
    display: flex;
    justify-content: space-between;
    color: #9E9E9E; }
    @media (min-width: 1025px) {
      .search-suggestions__suggestions {
        font-family: "Klein-Medium", Calibri, sans-serif;
        font-size: 12px;
        font-weight: normal;
        line-height: 18px;
        letter-spacing: 0.4px; } }
  .search-suggestions__title {
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0.5;
    padding: 0 0 20px 0;
    margin-left: -20px;
    color: #6d6d6d;
    text-transform: uppercase; }
    @media (min-width: 1025px) {
      .search-suggestions__title {
        font-family: "Klein-Medium", Calibri, sans-serif;
        font-size: 12px;
        font-weight: normal;
        line-height: 18px;
        letter-spacing: 0.4px; } }
  .search-suggestions__list {
    padding-bottom: 30px;
    list-style: none;
    color: #6d6d6d;
    display: flex;
    flex-direction: column;
    height: 264px; }
    @media (max-width: 1024px) {
      .search-suggestions__list {
        flex-grow: 1;
        justify-content: flex-start;
        padding: 0 40px;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 20px; } }
  .search-suggestions__item {
    padding-bottom: 10px; }
    .search-suggestions__item:first-child {
      padding-top: 20px; }
    .search-suggestions__item:last-child {
      padding-bottom: 0; }
    .search-suggestions__item-button {
      width: 100%;
      text-align: left; }
  .search-suggestions__view-all {
    margin-top: auto;
    padding: 0 10px;
    background-color: #ffffff; }
  .search-suggestions__highlight {
    color: #000000; }
  .search-suggestions__count:before {
    content: "("; }
  .search-suggestions__count:after {
    content: ")"; }
  .search-suggestions__all {
    width: 100%; }
  .search-suggestions__panels {
    display: flex;
    flex-direction: row-reverse;
    position: relative; }
  .search-suggestions__panel {
    width: 100%; }
    .search-suggestions__panel.\--suggestions {
      padding: 40px 40px 20px;
      width: 100%;
      padding: 20px 40px 20px;
      min-width: 340px; }
      .search-suggestions__panels.\--has-products .search-suggestions__panel.\--suggestions {
        order: 2;
        display: flex;
        flex-direction: column;
        padding: 0 20px 20px;
        background: #ffffff;
        justify-content: space-between; }
      @media (max-width: 1024px) {
        .search-suggestions__panel.\--suggestions {
          min-width: 0; } }
    .search-suggestions__panel.\--products {
      width: 750px;
      order: 1;
      transition: width 0.3s ease-in;
      align-self: start;
      position: absolute;
      height: 100%;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center; }
  .search-suggestions__all-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end; }
  .search-suggestions__product-list {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    max-height: 400px;
    align-items: flex-end;
    padding: 0 20px;
    background: #f4f4f4; }
  .search-suggestions__product-item {
    position: relative;
    padding: 0 5px;
    width: 170px;
    color: #ffffff; }
    .search-suggestions__product-item:first-child {
      padding-left: 0; }
    .search-suggestions__product-item:last-child {
      padding-right: 0; }
    .search-suggestions__product-item .product-image__image {
      max-width: 170px;
      min-height: 186px; }
  .search-suggestions__product-details {
    padding: 7px 6px 11px 10px;
    background: white;
    min-height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .search-suggestions__product-imagery .product-image {
    width: 100%;
    height: auto; }
  .search-suggestions__price .price-display {
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: 0.5px;
    color: #000000; }
    @media (min-width: 1025px) {
      .search-suggestions__price .price-display {
        font-family: "Klein-Medium", Calibri, sans-serif;
        font-size: 13px;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: 0.5px; } }
  .search-suggestions__product-name {
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0.5;
    color: #6d6d6d;
    text-transform: uppercase;
    margin: 3px 0;
    display: inline-block; }
    @media (min-width: 1025px) {
      .search-suggestions__product-name {
        font-family: "Klein-Medium", Calibri, sans-serif;
        font-size: 12px;
        font-weight: normal;
        line-height: 18px;
        letter-spacing: 0.4px; } }

@media (max-width: 1024px) {
  .header-search__search-icon {
    width: 17px;
    height: 17px;
    position: absolute;
    top: calc(50% - 1px);
    transform: translateY(-50%);
    right: 20px; } }

@media (max-width: 1024px) {
  .header-search__clear-icon {
    width: 14px;
    height: 14px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 49px; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.button--link {
  font-weight: inherit;
  text-decoration: none; }

.button__icon {
  position: relative;
  display: inline-block;
  width: 20px;
  margin-left: -30px;
  margin-right: 10px;
  vertical-align: middle; }
  .button__icon .icon__fill {
    transition: fill 0.1s ease-in-out; }
  .button__icon .icon__stroke {
    transition: stroke 0.1s ease-in-out; }
  .button__icon svg {
    height: 38px;
    vertical-align: middle; }

.button__text {
  vertical-align: middle; }

.button--close {
  width: 40px;
  height: 40px;
  background-color: #313131;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23fff' stroke-width='2' fill='none' fill-rule='evenodd'%3E%3Cpath d='M10.1 10.1l19.8 19.8M29.9 10.1L10.1 29.9'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 0; }

.button {
  display: block;
  text-align: center;
  align-items: center;
  border: 1px solid;
  font-family: "Klein-Medium", Calibri, sans-serif;
  font-weight: bold;
  max-width: 100%;
  height: 40px;
  min-width: 0;
  overflow: hidden;
  padding: 0 22px;
  letter-spacing: 1px;
  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: uppercase;
  transition-duration: 0.1s;
  transition-property: background-color, border-color, color;
  transition-timing-function: ease-in-out;
  font-family: "Klein-Medium", Calibri, sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 20px;
  letter-spacing: 0.5px; }
  @media (min-width: 1025px) {
    .button {
      font-family: "Klein-Medium", Calibri, sans-serif;
      font-size: 13px;
      font-weight: normal;
      line-height: 20px;
      letter-spacing: 0.5px; } }
  .button--full-width {
    width: 100%; }
  .button[disabled] {
    background-color: #9E9E9E;
    border-color: #9E9E9E; }
    .button[disabled]:hover {
      background-color: #9E9E9E;
      border-color: #9E9E9E;
      color: #ffffff;
      text-decoration: none; }
    .button[disabled]:active {
      text-decoration: none; }
  @media (max-width: 1024px) {
    .button {
      width: 100%; } }
  @media (max-width: 740px) {
    .button {
      height: 45px; } }

.button {
  background-color: #000000;
  border-color: #000000;
  color: #ffffff; }
  @media (min-width: 1025px) {
    .button:hover {
      background-color: transparent;
      border-color: #000000;
      color: #000000; }
      .button:hover .icon__stroke {
        stroke: #000000; }
      .button:hover .icon__fill {
        fill: #000000; } }
  .button .icon__fill {
    fill: #ffffff; }
  .button .icon__stroke {
    stroke: #ffffff; }

.button--secondary {
  background-color: transparent;
  border-color: #000000;
  color: #000000; }
  @media (min-width: 1025px) {
    .button--secondary:hover {
      background-color: #000000;
      border-color: #000000;
      color: #ffffff; } }

.button--paypal {
  background-color: #e4e4e4;
  border-color: #e4e4e4;
  color: #313131; }
  @media (min-width: 1025px) {
    .button--paypal:hover {
      background-color: #313131;
      border-color: #313131;
      color: #ffffff; } }

.button--show-hide {
  font-family: "Klein-Medium", Calibri, sans-serif;
  font-size: 11px;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 0.4;
  background-color: #ffffff;
  border-color: #313131;
  color: #6d6d6d;
  padding-left: 17px;
  padding-right: 17px;
  min-width: 70px; }
  @media (min-width: 741px) {
    .button--show-hide {
      font-family: "Klein-Medium", Calibri, sans-serif;
      font-size: 10px;
      font-weight: normal;
      line-height: 18px;
      letter-spacing: 0.35px; } }
  @media (min-width: 1025px) {
    .button--show-hide:hover {
      background-color: #ffffff;
      border-color: #313131;
      color: #6d6d6d; } }

.button--paypal:after {
  background-image: url("data:image/svg+xml,%3Csvg width='89' height='25' viewBox='0 0 89 25' xmlns='http://www.w3.org/2000/svg'%3E %3Cg fill-rule='nonzero' fill='none'%3E %3Cpath d='M11.211.749H4.372a.95.95 0 0 0-.939.802L.667 19.088a.57.57 0 0 0 .564.658h3.265a.95.95 0 0 0 .939-.803l.746-4.73a.95.95 0 0 1 .938-.803h2.165c4.505 0 7.105-2.18 7.784-6.5.306-1.89.013-3.375-.872-4.415C15.224 1.353 13.5.749 11.211.749zM12 7.154c-.374 2.454-2.249 2.454-4.062 2.454H6.906l.724-4.583a.57.57 0 0 1 .563-.481h.473c1.235 0 2.4 0 3.002.704.359.42.469 1.044.332 1.906zM31.654 7.075h-3.275a.57.57 0 0 0-.563.481l-.145.916-.229-.332c-.709-1.029-2.29-1.373-3.868-1.373-3.619 0-6.71 2.741-7.312 6.586-.313 1.918.132 3.752 1.22 5.031.998 1.176 2.426 1.666 4.125 1.666 2.916 0 4.533-1.875 4.533-1.875l-.146.91a.57.57 0 0 0 .562.66h2.95a.95.95 0 0 0 .939-.803l1.77-11.209a.568.568 0 0 0-.561-.658zm-4.565 6.374c-.316 1.871-1.801 3.127-3.695 3.127-.951 0-1.711-.305-2.199-.883-.484-.574-.668-1.391-.514-2.301.295-1.855 1.805-3.152 3.67-3.152.93 0 1.686.309 2.184.892.499.589.697 1.411.554 2.317zM49.096 7.075h-3.291a.954.954 0 0 0-.787.417l-4.539 6.686-1.924-6.425a.953.953 0 0 0-.912-.678h-3.234a.57.57 0 0 0-.541.754l3.625 10.638-3.408 4.811a.57.57 0 0 0 .465.9h3.287a.949.949 0 0 0 .781-.408l10.946-15.8a.57.57 0 0 0-.468-.895z' fill='%23253B80'/%3E %3Cpath d='M59.992.749h-6.84a.95.95 0 0 0-.938.802l-2.766 17.537a.569.569 0 0 0 .562.658h3.51a.665.665 0 0 0 .656-.562l.785-4.971a.95.95 0 0 1 .938-.803h2.164c4.506 0 7.105-2.18 7.785-6.5.307-1.89.012-3.375-.873-4.415-.971-1.142-2.694-1.746-4.983-1.746zm.789 6.405c-.373 2.454-2.248 2.454-4.062 2.454h-1.031l.725-4.583a.568.568 0 0 1 .562-.481h.473c1.234 0 2.4 0 3.002.704.359.42.468 1.044.331 1.906zM80.434 7.075h-3.273a.567.567 0 0 0-.562.481l-.145.916-.23-.332c-.709-1.029-2.289-1.373-3.867-1.373-3.619 0-6.709 2.741-7.311 6.586-.312 1.918.131 3.752 1.219 5.031 1 1.176 2.426 1.666 4.125 1.666 2.916 0 4.533-1.875 4.533-1.875l-.146.91a.57.57 0 0 0 .564.66h2.949a.95.95 0 0 0 .938-.803l1.771-11.209a.571.571 0 0 0-.565-.658zm-4.565 6.374c-.314 1.871-1.801 3.127-3.695 3.127-.949 0-1.711-.305-2.199-.883-.484-.574-.666-1.391-.514-2.301.297-1.855 1.805-3.152 3.67-3.152.93 0 1.686.309 2.184.892.501.589.699 1.411.554 2.317zM84.295 1.23l-2.807 17.858a.569.569 0 0 0 .562.658h2.822c.469 0 .867-.34.939-.803l2.768-17.536a.57.57 0 0 0-.562-.659h-3.16a.571.571 0 0 0-.562.482z' fill='%23179BD7'/%3E %3C/g%3E %3C/svg%3E");
  background-position: 0px 1px;
  background-repeat: no-repeat;
  background-size: 85%;
  content: '';
  display: inline-block;
  height: 20px;
  margin-left: 7px;
  vertical-align: middle;
  width: 73px; }

.button--tertiary {
  background-color: #313131;
  border-color: #313131;
  color: #ffffff; }

.button--facet {
  background-color: #f4f4f4;
  border-color: #f4f4f4;
  color: #313131;
  height: 30px; }
  .button--facet.active {
    background-color: #313131;
    border-color: #313131;
    color: #ffffff; }
  @media (min-width: 1025px) {
    .button--facet:hover, .button--facet:focus {
      background-color: #313131;
      border-color: #313131;
      color: #ffffff; } }

@media (min-width: 1025px) {
  .theme--dark .button--tertiary:hover {
    background-color: transparent;
    border-color: #ffffff;
    color: #ffffff; } }

a.button {
  display: flex;
  justify-content: center; }
  a.button:hover, a.button:active {
    text-decoration: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.product-image {
  position: relative;
  display: block;
  max-width: 100%;
  height: 100%; }
  .product-image__placeholder {
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-content: center;
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%; }
  .product-image__placeholder-image {
    display: block;
    width: 80%;
    height: 100%; }
  .product-image__image {
    display: block;
    width: 100%;
    max-width: 100%;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.loader {
  display: flex;
  width: 100%;
  height: 100%;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50; }
  .loader__graphics {
    background-image: url(./2dfe796df78241716f724bdbed0a2f34.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px;
    min-height: 50px;
    width: 50px; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.price-display {
  font-family: "Klein-Medium", Calibri, sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 20px;
  letter-spacing: 0.5px;
  display: block; }
  @media (min-width: 1025px) {
    .price-display {
      font-family: "Klein-Medium", Calibri, sans-serif;
      font-size: 13px;
      font-weight: normal;
      line-height: 20px;
      letter-spacing: 0.5px; } }
  .price-display__was, .price-display__was-from {
    text-decoration: line-through; }
  .price-display--from {
    text-transform: uppercase; }
  .price-display--was-from .price-display__from {
    color: #d0021b;
    padding-left: 4px; }
  .price-display--from .price-display__selling,
  .price-display--from .price-display__was {
    display: none; }
  .price-display--was .price-display__selling {
    color: #d0021b;
    padding-left: 4px; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.header-account {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-basis: 15%; }
  .header-account__inner {
    padding-bottom: 20px;
    position: relative;
    top: 10px; }
    .header-account__inner .account-flyout {
      display: none; }
    .header-account__inner:hover .account-flyout {
      display: block; }
  .header-account__sign-in {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.4px; }
  .header-account__name {
    cursor: pointer; }
  .header-account .account-flyout {
    display: none; }
  .header-account:hover .account-flyout {
    display: block; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.authentication {
  overflow: hidden; }
  .authentication.ReactModal__Content {
    position: absolute;
    top: 124px;
    left: 50%;
    width: 420px;
    transform: translateX(-50%); }
  .authentication .login {
    background-color: #ffffff;
    padding: 40px; }
    .authentication .login .input__password .button {
      width: auto; }
    .authentication .login .input__input {
      background-color: white; }
  .authentication .register {
    background-color: #e4e4e4;
    padding: 40px 40px 30px; }
    .authentication .register .input__input {
      background-color: white; }
  .authentication .forgot-password {
    background-color: #ffffff;
    padding: 40px; }
  .authentication .checkbox {
    color: #6d6d6d; }
    .authentication .checkbox a {
      color: #313131; }
    .authentication .checkbox .input__error ~ .checkbox__label a {
      color: #d0021b; }

.authentication.\--panel {
  position: fixed;
  top: 124px;
  width: 100%;
  bottom: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 200;
  left: 0;
  transform: translateX(400%);
  transition: transform .3s;
  padding-bottom: 40px; }
  .authentication.\--panel .authentication__back {
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: 0.5px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    text-transform: uppercase;
    display: block;
    padding-top: 21px;
    padding-left: 20px;
    padding-bottom: 10px;
    text-decoration: none;
    background-color: #ffffff;
    z-index: 200; }
    @media (min-width: 1025px) {
      .authentication.\--panel .authentication__back {
        font-family: "Klein-Medium", Calibri, sans-serif;
        font-size: 13px;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: 0.5px; } }
    .authentication.\--panel .authentication__back:before, .authentication.\--panel .authentication__back:after {
      content: "";
      position: absolute;
      left: -2px;
      width: 8px;
      height: 1px;
      top: 26px;
      background-color: #313131;
      transform: rotate(-45deg); }
    .authentication.\--panel .authentication__back:after {
      transform: rotate(45deg);
      margin-top: 5px; }
  .authentication.\--panel .authentication__inner {
    background: white;
    padding: 0 10px 10px; }
  .authentication.\--panel .login {
    padding: 0;
    margin-top: 18px; }
    .authentication.\--panel .login .form__heading {
      font-size: 16px;
      margin-bottom: 21px; }
    .authentication.\--panel .login .form-field {
      margin-bottom: 11px; }
    .authentication.\--panel .login .input__label {
      margin-bottom: 11px;
      letter-spacing: 0.4px; }
    .authentication.\--panel .login .login__password .button {
      display: none; }
    .authentication.\--panel .login .input__input.input__input--error {
      border-bottom-color: #d0021b; }
    .authentication.\--panel .login .input__input {
      padding: 15px;
      border-color: #e4e4e4; }
    .authentication.\--panel .login .login__secondary-action {
      display: block;
      margin-top: 0; }
    .authentication.\--panel .login .login__forgot-password {
      letter-spacing: 0.4px; }
    .authentication.\--panel .login .login__remember-me {
      margin-top: 22px;
      letter-spacing: 0.4px;
      text-transform: lowercase; }
  .authentication.\--panel .register {
    padding: 0;
    background: white;
    margin: 31px 0 30px 0;
    padding-top: 29px;
    border-top: 1px solid #e4e4e4; }
    .authentication.\--panel .register .form__heading {
      font-size: 15px;
      letter-spacing: 0.5px; }
    .authentication.\--panel .register .input__label {
      margin-bottom: 11px;
      letter-spacing: 0.4px; }
    .authentication.\--panel .register .input__input.input__input--error {
      border-bottom-color: #d0021b; }
    .authentication.\--panel .register .input__input {
      padding: 15px;
      border-color: #e4e4e4; }
    .authentication.\--panel .register .register__passwords {
      display: block; }
      .authentication.\--panel .register .register__passwords .form-field {
        margin-right: 0;
        width: 100%; }
  .authentication.\--panel .forgot-password {
    padding: 0; }
    .authentication.\--panel .forgot-password .form__heading {
      font-size: 15px;
      margin: 28px 0 6px;
      letter-spacing: 0.5px; }
    .authentication.\--panel .forgot-password .form__message {
      letter-spacing: 0.4px;
      padding-right: 10px; }
    .authentication.\--panel .forgot-password .form-field {
      margin-top: 25px; }
      .authentication.\--panel .forgot-password .form-field .input__label {
        margin-bottom: 11px;
        letter-spacing: 0.4px; }
    .authentication.\--panel .forgot-password .form__action {
      display: block;
      margin-top: 42px; }
      .authentication.\--panel .forgot-password .form__action .button {
        width: 100%;
        margin-bottom: 10px; }
    .authentication.\--panel .forgot-password .input__input.input__input--error {
      border-bottom-color: #d0021b; }
    .authentication.\--panel .forgot-password .input__input {
      padding: 15px;
      border-color: #e4e4e4; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.ReactModal__Body--open {
  overflow: hidden; }

.ReactModal__Overlay {
  z-index: 300;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 10px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background-color: rgba(0, 0, 0, 0.6);
  transition: opacity 0.2s ease;
  opacity: 0; }
  .ReactModal__Overlay--after-open {
    opacity: 1; }
  .ReactModal__Overlay--before-close {
    opacity: 0; }

.ReactModal__Content {
  position: relative;
  min-height: 100px;
  padding: 75px 0 20px;
  outline: none;
  transition: opacity 0.2s ease;
  opacity: 0; }
  .ReactModal__Content--after-open {
    opacity: 1; }
  .ReactModal__Content--before-close {
    opacity: 0; }

.ReactModal__Close {
  display: block;
  position: absolute;
  top: 95px;
  right: 17px;
  width: 16px;
  height: 16px;
  border: none;
  margin: 0;
  padding: 0; }
  .ReactModal__Close:before, .ReactModal__Close:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 8px;
    width: 1px;
    height: 100%;
    background-color: #313131; }
  .ReactModal__Close:before {
    transform: rotate(45deg); }
  .ReactModal__Close:after {
    transform: rotate(-45deg); }

@media (min-width: 741px) {
  .ReactModal__Overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px; }
  .ReactModal__Content {
    padding: 0; }
  .ReactModal__Close {
    width: 21px;
    height: 21px;
    top: 17px; }
    .ReactModal__Close:before, .ReactModal__Close:after {
      left: 10px; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.login__remember-me {
  order: 1;
  margin-bottom: 0; }

.login__forgot-password {
  text-decoration: underline;
  order: 2; }

.login__secondary-action {
  display: flex;
  justify-content: space-between;
  margin-top: -5px;
  align-items: center;
  margin-bottom: 22px; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.input__error {
  color: #d0021b; }
  .theme--dark .input__error {
    color: #ffffff; }

@charset "UTF-8";
/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.checkbox__label {
  display: block;
  padding-left: 32px;
  position: relative;
  text-transform: none;
  line-height: 19px;
  font-size: 12px;
  color: #6d6d6d; }
  .checkbox__label:before {
    content: '';
    background: none;
    display: block;
    width: 17px;
    height: 17px;
    border: 1px solid #6d6d6d;
    position: absolute;
    top: 0;
    left: 0; }
  .checkbox__label.\--multi:before {
    background-image: url("data:image/svg+xml,%3Csvg height='18' viewBox='0 0 18 18' width='18' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='m0 0h9v9h-9z' fill='%23f5a623'/%3E%3Cpath d='m0 9h9v9h-9z' fill='%23d0021b'/%3E%3Cpath d='m9 0h9v9h-9z' fill='%230074b2'/%3E%3Cpath d='m9 9h9v9h-9z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: 100% !important;
    border-color: none !important; }
  .checkbox__input:checked + .checkbox__label.\--multi:after {
    content: '';
    position: absolute;
    border-width: 1.5px; }
  .checkbox__input:checked + .checkbox__label.\--multi:before {
    background-image: none; }
  .checkbox__label.\--default:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--amarillo:before {
    background-color: #F7E341;
    border-color: #F7E341; }
  .checkbox__label.\--arancione:before {
    background-color: #FA601B;
    border-color: #FA601B; }
  .checkbox__input:checked + .checkbox__label.\--arancione:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--arancione:before {
    background-image: none; }
  .checkbox__label.\--argent:before {
    background-color: #DFE3E8;
    border-color: #DFE3E8; }
  .checkbox__label.\--argento:before {
    background-color: #DFE3E8;
    border-color: #DFE3E8; }
  .checkbox__label.\--azul:before {
    background-color: #004086;
    border-color: #004086; }
  .checkbox__input:checked + .checkbox__label.\--azul:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--azul:before {
    background-image: none; }
  .checkbox__label.\--beige:before {
    background-color: #E7DDC2;
    border-color: #E7DDC2; }
  .checkbox__label.\--bianco:before {
    background-color: #EFEFEF;
    border-color: #EFEFEF; }
  .checkbox__label.\--black:before {
    background-color: #000000;
    border-color: #000000; }
  .checkbox__input:checked + .checkbox__label.\--black:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--black:before {
    background-image: none; }
  .checkbox__label.\--blanc:before {
    background-color: #EFEFEF;
    border-color: #EFEFEF; }
  .checkbox__label.\--blanco:before {
    background-color: #EFEFEF;
    border-color: #EFEFEF; }
  .checkbox__label.\--blau:before {
    background-color: #004086;
    border-color: #004086; }
  .checkbox__input:checked + .checkbox__label.\--blau:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--blau:before {
    background-image: none; }
  .checkbox__label.\--blauw:before {
    background-color: #004086;
    border-color: #004086; }
  .checkbox__input:checked + .checkbox__label.\--blauw:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--blauw:before {
    background-image: none; }
  .checkbox__label.\--bleu:before {
    background-color: #004086;
    border-color: #004086; }
  .checkbox__input:checked + .checkbox__label.\--bleu:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--bleu:before {
    background-image: none; }
  .checkbox__label.\--blu:before {
    background-color: #004086;
    border-color: #004086; }
  .checkbox__input:checked + .checkbox__label.\--blu:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--blu:before {
    background-image: none; }
  .checkbox__label.\--blue:before {
    background-color: #004086;
    border-color: #004086; }
  .checkbox__input:checked + .checkbox__label.\--blue:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--blue:before {
    background-image: none; }
  .checkbox__label.\--bordeaux:before {
    background-color: #900020;
    border-color: #900020; }
  .checkbox__input:checked + .checkbox__label.\--bordeaux:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--bordeaux:before {
    background-image: none; }
  .checkbox__label.\--braun:before {
    background-color: #8B572A;
    border-color: #8B572A; }
  .checkbox__input:checked + .checkbox__label.\--braun:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--braun:before {
    background-image: none; }
  .checkbox__label.\--brightwhite:before {
    background-color: #F8FBE7;
    border-color: #F8FBE7; }
  .checkbox__label.\--brown:before {
    background-color: #8B572A;
    border-color: #8B572A; }
  .checkbox__input:checked + .checkbox__label.\--brown:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--brown:before {
    background-image: none; }
  .checkbox__label.\--burdeos:before {
    background-color: #900020;
    border-color: #900020; }
  .checkbox__input:checked + .checkbox__label.\--burdeos:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--burdeos:before {
    background-image: none; }
  .checkbox__label.\--burgundy:before {
    background-color: #900020;
    border-color: #900020; }
  .checkbox__input:checked + .checkbox__label.\--burgundy:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--burgundy:before {
    background-image: none; }
  .checkbox__label.\--caqui:before {
    background-color: #D0AF82;
    border-color: #D0AF82; }
  .checkbox__label.\--chambrayblue:before {
    background-color: #225C7F;
    border-color: #225C7F; }
  .checkbox__input:checked + .checkbox__label.\--chambrayblue:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--chambrayblue:before {
    background-image: none; }
  .checkbox__label.\--ckblack:before {
    background-color: #000000;
    border-color: #000000; }
  .checkbox__input:checked + .checkbox__label.\--ckblack:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--ckblack:before {
    background-image: none; }
  .checkbox__label.\--denim:before {
    background-color: #225C7F;
    border-color: #225C7F; }
  .checkbox__input:checked + .checkbox__label.\--denim:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--denim:before {
    background-image: none; }
  .checkbox__label.\--dnm:before {
    background-color: #225C7F;
    border-color: #225C7F; }
  .checkbox__input:checked + .checkbox__label.\--dnm:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--dnm:before {
    background-image: none; }
  .checkbox__label.\--geel:before {
    background-color: #F7E341;
    border-color: #F7E341; }
  .checkbox__label.\--geenkleur:before {
    background-color: #F6F6F6;
    border-color: #F6F6F6; }
  .checkbox__label.\--gelb:before {
    background-color: #F7E341;
    border-color: #F7E341; }
  .checkbox__label.\--giallo:before {
    background-color: #F7E341;
    border-color: #F7E341; }
  .checkbox__label.\--gold:before {
    background-color: #BAA130;
    border-color: #BAA130; }
  .checkbox__input:checked + .checkbox__label.\--gold:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--gold:before {
    background-image: none; }
  .checkbox__label.\--goud:before {
    background-color: #BAA130;
    border-color: #BAA130; }
  .checkbox__input:checked + .checkbox__label.\--goud:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--goud:before {
    background-image: none; }
  .checkbox__label.\--grau:before {
    background-color: #898989;
    border-color: #898989; }
  .checkbox__input:checked + .checkbox__label.\--grau:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--grau:before {
    background-image: none; }
  .checkbox__label.\--green:before {
    background-color: #4B5E3E;
    border-color: #4B5E3E; }
  .checkbox__input:checked + .checkbox__label.\--green:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--green:before {
    background-image: none; }
  .checkbox__label.\--grey:before {
    background-color: #898989;
    border-color: #898989; }
  .checkbox__input:checked + .checkbox__label.\--grey:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--grey:before {
    background-image: none; }
  .checkbox__label.\--grigio:before {
    background-color: #898989;
    border-color: #898989; }
  .checkbox__input:checked + .checkbox__label.\--grigio:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--grigio:before {
    background-image: none; }
  .checkbox__label.\--grijs:before {
    background-color: #898989;
    border-color: #898989; }
  .checkbox__input:checked + .checkbox__label.\--grijs:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--grijs:before {
    background-image: none; }
  .checkbox__label.\--gris:before {
    background-color: #898989;
    border-color: #898989; }
  .checkbox__input:checked + .checkbox__label.\--gris:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--gris:before {
    background-image: none; }
  .checkbox__label.\--groen:before {
    background-color: #4B5E3E;
    border-color: #4B5E3E; }
  .checkbox__input:checked + .checkbox__label.\--groen:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--groen:before {
    background-image: none; }
  .checkbox__label.\--grün:before {
    background-color: #4B5E3E;
    border-color: #4B5E3E; }
  .checkbox__input:checked + .checkbox__label.\--grün:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--grün:before {
    background-image: none; }
  .checkbox__label.\--havana:before {
    background-color: #E18D33;
    border-color: #E18D33; }
  .checkbox__input:checked + .checkbox__label.\--havana:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--havana:before {
    background-image: none; }
  .checkbox__label.\--jaune:before {
    background-color: #F7E341;
    border-color: #F7E341; }
  .checkbox__label.\--kaki:before {
    background-color: #D0AF82;
    border-color: #D0AF82; }
  .checkbox__label.\--keinefarbe:before {
    background-color: #F6F6F6;
    border-color: #F6F6F6; }
  .checkbox__label.\--khaki:before {
    background-color: #D0AF82;
    border-color: #D0AF82; }
  .checkbox__label.\--marron:before {
    background-color: #8B572A;
    border-color: #8B572A; }
  .checkbox__input:checked + .checkbox__label.\--marron:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--marron:before {
    background-image: none; }
  .checkbox__label.\--marrone:before {
    background-color: #8B572A;
    border-color: #8B572A; }
  .checkbox__input:checked + .checkbox__label.\--marrone:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--marrone:before {
    background-image: none; }
  .checkbox__label.\--marrón:before {
    background-color: #8B572A;
    border-color: #8B572A; }
  .checkbox__input:checked + .checkbox__label.\--marrón:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--marrón:before {
    background-image: none; }
  .checkbox__label.\--meerderekleuren:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--multi:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--multicolor:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--multicolore:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--naranja:before {
    background-color: #FA601B;
    border-color: #FA601B; }
  .checkbox__input:checked + .checkbox__label.\--naranja:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--naranja:before {
    background-image: none; }
  .checkbox__label.\--negro:before {
    background-color: #000000;
    border-color: #000000; }
  .checkbox__input:checked + .checkbox__label.\--negro:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--negro:before {
    background-image: none; }
  .checkbox__label.\--nero:before {
    background-color: #000000;
    border-color: #000000; }
  .checkbox__input:checked + .checkbox__label.\--nero:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--nero:before {
    background-image: none; }
  .checkbox__label.\--nessuncolore:before {
    background-color: #F6F6F6;
    border-color: #F6F6F6; }
  .checkbox__label.\--nocolor:before {
    background-color: #F6F6F6;
    border-color: #F6F6F6; }
  .checkbox__label.\--noir:before {
    background-color: #000000;
    border-color: #000000; }
  .checkbox__input:checked + .checkbox__label.\--noir:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--noir:before {
    background-image: none; }
  .checkbox__label.\--or:before {
    background-color: #BAA130;
    border-color: #BAA130; }
  .checkbox__input:checked + .checkbox__label.\--or:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--or:before {
    background-image: none; }
  .checkbox__label.\--orange:before {
    background-color: #FA601B;
    border-color: #FA601B; }
  .checkbox__input:checked + .checkbox__label.\--orange:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--orange:before {
    background-image: none; }
  .checkbox__label.\--oranje:before {
    background-color: #FA601B;
    border-color: #FA601B; }
  .checkbox__input:checked + .checkbox__label.\--oranje:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--oranje:before {
    background-image: none; }
  .checkbox__label.\--oro:before {
    background-color: #BAA130;
    border-color: #BAA130; }
  .checkbox__input:checked + .checkbox__label.\--oro:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--oro:before {
    background-image: none; }
  .checkbox__label.\--paars:before {
    background-color: #8D15A5;
    border-color: #8D15A5; }
  .checkbox__input:checked + .checkbox__label.\--paars:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--paars:before {
    background-image: none; }
  .checkbox__label.\--pasdecouleur:before {
    background-color: #F6F6F6;
    border-color: #F6F6F6; }
  .checkbox__label.\--pink:before {
    background-color: #F5C6FF;
    border-color: #F5C6FF; }
  .checkbox__label.\--plata:before {
    background-color: #DFE3E8;
    border-color: #DFE3E8; }
  .checkbox__label.\--plusieurscouleurs:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--pumkinred:before {
    background-color: #BE072F;
    border-color: #BE072F; }
  .checkbox__input:checked + .checkbox__label.\--pumkinred:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--pumkinred:before {
    background-image: none; }
  .checkbox__label.\--purple:before {
    background-color: #8D15A5;
    border-color: #8D15A5; }
  .checkbox__input:checked + .checkbox__label.\--purple:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--purple:before {
    background-image: none; }
  .checkbox__label.\--púrpura:before {
    background-color: #8D15A5;
    border-color: #8D15A5; }
  .checkbox__input:checked + .checkbox__label.\--púrpura:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--púrpura:before {
    background-image: none; }
  .checkbox__label.\--red:before {
    background-color: #CD0F00;
    border-color: #CD0F00; }
  .checkbox__input:checked + .checkbox__label.\--red:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--red:before {
    background-image: none; }
  .checkbox__label.\--rojo:before {
    background-color: #CD0F00;
    border-color: #CD0F00; }
  .checkbox__input:checked + .checkbox__label.\--rojo:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--rojo:before {
    background-image: none; }
  .checkbox__label.\--rood:before {
    background-color: #CD0F00;
    border-color: #CD0F00; }
  .checkbox__input:checked + .checkbox__label.\--rood:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--rood:before {
    background-image: none; }
  .checkbox__label.\--rosa:before {
    background-color: #F5C6FF;
    border-color: #F5C6FF; }
  .checkbox__label.\--rose:before {
    background-color: #F5C6FF;
    border-color: #F5C6FF; }
  .checkbox__label.\--rosso:before {
    background-color: #CD0F00;
    border-color: #CD0F00; }
  .checkbox__input:checked + .checkbox__label.\--rosso:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--rosso:before {
    background-image: none; }
  .checkbox__label.\--rot:before {
    background-color: #CD0F00;
    border-color: #CD0F00; }
  .checkbox__input:checked + .checkbox__label.\--rot:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--rot:before {
    background-image: none; }
  .checkbox__label.\--rouge:before {
    background-color: #CD0F00;
    border-color: #CD0F00; }
  .checkbox__input:checked + .checkbox__label.\--rouge:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--rouge:before {
    background-image: none; }
  .checkbox__label.\--roze:before {
    background-color: #F5C6FF;
    border-color: #F5C6FF; }
  .checkbox__label.\--ruthenium:before {
    background-color: #DFE3E8;
    border-color: #DFE3E8; }
  .checkbox__label.\--schwarz:before {
    background-color: #000000;
    border-color: #000000; }
  .checkbox__input:checked + .checkbox__label.\--schwarz:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--schwarz:before {
    background-image: none; }
  .checkbox__label.\--silver:before {
    background-color: #DFE3E8;
    border-color: #DFE3E8; }
  .checkbox__label.\--sincolor:before {
    background-color: #F6F6F6;
    border-color: #F6F6F6; }
  .checkbox__label.\--tawnyport:before {
    background-color: #900020;
    border-color: #900020; }
  .checkbox__input:checked + .checkbox__label.\--tawnyport:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--tawnyport:before {
    background-image: none; }
  .checkbox__label.\--verde:before {
    background-color: #4B5E3E;
    border-color: #4B5E3E; }
  .checkbox__input:checked + .checkbox__label.\--verde:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--verde:before {
    background-image: none; }
  .checkbox__label.\--vert:before {
    background-color: #4B5E3E;
    border-color: #4B5E3E; }
  .checkbox__input:checked + .checkbox__label.\--vert:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--vert:before {
    background-image: none; }
  .checkbox__label.\--viola:before {
    background-color: #8D15A5;
    border-color: #8D15A5; }
  .checkbox__input:checked + .checkbox__label.\--viola:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--viola:before {
    background-image: none; }
  .checkbox__label.\--violet:before {
    background-color: #8D15A5;
    border-color: #8D15A5; }
  .checkbox__input:checked + .checkbox__label.\--violet:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--violet:before {
    background-image: none; }
  .checkbox__label.\--violett:before {
    background-color: #8D15A5;
    border-color: #8D15A5; }
  .checkbox__input:checked + .checkbox__label.\--violett:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--violett:before {
    background-image: none; }
  .checkbox__label.\--weinrote:before {
    background-color: #900020;
    border-color: #900020; }
  .checkbox__input:checked + .checkbox__label.\--weinrote:after {
    content: '';
    position: absolute; }
  .checkbox__input:checked + .checkbox__label.\--weinrote:before {
    background-image: none; }
  .checkbox__label.\--weiß:before {
    background-color: #EFEFEF;
    border-color: #EFEFEF; }
  .checkbox__label.\--white:before {
    background-color: #EFEFEF;
    border-color: #EFEFEF; }
  .checkbox__label.\--wit:before {
    background-color: #EFEFEF;
    border-color: #EFEFEF; }
  .checkbox__label.\--yellow:before {
    background-color: #F7E341;
    border-color: #F7E341; }
  .checkbox__label.\--zilver:before {
    background-color: #DFE3E8;
    border-color: #DFE3E8; }
  .checkbox__label.\--zwart:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--бежевый:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--белый:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--бургунди:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--деним:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--желтый:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--зеленый:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--золотой:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--коричневый:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--красный:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--многоцветный:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--оранжевый:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--розовый:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--серебристый:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--серый:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--синий:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--фиолетовый:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--хаки:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--цветотсутствует:before {
    background-color: none;
    border-color: none; }
  .checkbox__label.\--черный:before {
    background-color: none;
    border-color: none; }

.checkbox__input {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.checkbox__input:checked + .checkbox__label:before {
  background-image: url("data:image/svg+xml,%3Csvg height='22' viewBox='0 0 27 22' width='27' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 23.2091581 6.36932511 6.7908419 16.63067489-18' fill='none' stroke='%23000' stroke-width='3' transform='translate(2 -11)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%; }

.checkbox__input:checked + .checkbox__label:after {
  background-color: transparent;
  position: relative;
  left: 6px;
  top: 3px;
  width: 3px;
  border-bottom: 1.4px solid #fff;
  height: 10px;
  border-right: 1.4px solid #fff;
  transform: rotate(45deg); }

.checkbox__input:disabled + .checkbox__label:before {
  border-color: #6d6d6d; }

.checkbox__input:disabled:checked + .checkbox__label:before {
  border-color: transparent; }

.checkbox__more-info {
  padding-top: 8px;
  padding-left: 25px;
  overflow: hidden;
  height: auto;
  max-height: 0;
  transition: max-height 0.3s ease-in; }
  .checkbox__more-info--active {
    max-height: 260px; }

.checkbox__more-info a, .checkbox__label a {
  color: inherit;
  text-decoration: underline; }

.checkbox--invalid {
  color: #d0021b; }

.checkbox .input__error {
  display: none; }

.input__error ~ .checkbox__label {
  color: #d0021b; }
  .input__error ~ .checkbox__label:before {
    border-color: #d0021b; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.register__passwords {
  display: flex;
  justify-content: space-between;
  align-items: stretch; }
  .register__passwords .form-field {
    width: 50%; }
    .register__passwords .form-field:first-of-type {
      margin-right: 10px; }

.register__password-errors {
  display: none; }

.ReactModal__Content .register__passwords .form-field {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 0; }
  .ReactModal__Content .register__passwords .form-field:first-of-type {
    margin-right: 10px; }

.ReactModal__Content .register__passwords .input__error {
  display: none; }

.ReactModal__Content .register__password-errors {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin-bottom: 16px; }
  .ReactModal__Content .register__password-errors > div {
    width: 50%; }
    .ReactModal__Content .register__password-errors > div:first-of-type {
      margin-right: 10px; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.forgot-password .form__message {
  margin-bottom: 17px; }

.forgot-password .form-field {
  margin-bottom: 19px; }

.forgot-password .input__label:after {
  content: ' *'; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.account-flyout {
  position: absolute;
  right: 0px;
  padding: 28px 20px 30px;
  margin-top: 9px;
  min-width: 264px;
  border: 2px solid #f4f4f4;
  background-color: #ffffff; }
  .account-flyout.\--logged-in {
    right: -40px; }
  .account-flyout__header {
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 18px;
    letter-spacing: 0.5;
    margin-bottom: 15px;
    text-transform: uppercase; }
  .account-flyout__navigation {
    display: flex;
    flex-direction: column;
    padding-bottom: 15px;
    border-bottom: 1px solid #f4f4f4; }
    .account-flyout__navigation.\--secondary {
      margin-top: 15px;
      border-bottom: 0;
      padding-bottom: 0; }
  .account-flyout__link {
    display: block;
    margin-bottom: 15px;
    cursor: pointer; }
    .account-flyout__link:last-child {
      margin-bottom: 0; }
    .account-flyout__link:hover {
      text-decoration: underline; }
  .account-flyout .button {
    margin-top: 15px; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.header-mini-basket {
  display: flex;
  align-items: center;
  justify-content: flex-end; }
  .header-mini-basket__count {
    font-size: 9px;
    background-color: #313131;
    display: inline-block;
    color: white;
    text-align: center;
    position: relative;
    margin-right: 10px;
    min-width: 14px;
    line-height: 15px; }
  .header-mini-basket__button {
    width: 14px;
    height: 18px;
    margin-bottom: 3px; }
  .header-mini-basket:hover .basket-panel {
    display: block; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.header-mini-basket {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%; }
  .header-mini-basket__count {
    background-color: #313131;
    display: inline-block;
    color: #ffffff;
    font-size: 10px;
    text-align: center;
    min-width: 16px;
    line-height: 16px;
    margin-right: 8px; }
  .header-mini-basket__button {
    margin-bottom: 2px;
    line-height: 1; }
  @media (min-width: 741px) and (max-width: 1024px) {
    .header-mini-basket__count {
      font-size: 14px;
      line-height: 20px;
      margin-right: 11px;
      min-width: 19px; }
    .header-mini-basket__button {
      margin-bottom: 5px; }
      .header-mini-basket__button svg {
        height: 25px;
        display: block;
        position: relative; } }

.basket-panel {
  border: 2px solid #f4f4f4;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  position: absolute;
  max-height: 430px;
  top: 49px;
  display: none;
  width: 378px;
  background: white;
  font-size: 12px;
  right: 20px; }
  .basket-panel__message {
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    padding: 20px;
    display: block; }
  .basket-panel__items {
    padding: 20px 20px 0 20px;
    overflow: hidden; }
    .basket-panel__items.\--empty {
      height: auto;
      padding: 0; }
  .basket-panel__products {
    padding-bottom: 20px; }
  .basket-panel__summary {
    background-color: #ffffff;
    padding: 10px 20px;
    border-top: 2px solid #f4f4f4; }
  .basket-panel__summary-info {
    font-weight: bold;
    text-transform: uppercase;
    display: block;
    font-size: 13px;
    letter-spacing: 0.5px;
    margin-bottom: 8px; }
    .basket-panel__summary-info .button--paypal {
      margin-bottom: 0;
      background-color: #e4e4e4;
      border-color: #e4e4e4; }
  .basket-panel__summary-info-label {
    display: inline-block;
    width: 50%; }
    .basket-panel__summary-info-label__items {
      font-size: 10px;
      margin-left: 10px;
      color: #9E9E9E; }
  .basket-panel__summary-info-value {
    display: inline-block;
    width: 50%;
    text-align: right; }
  .basket-panel__summary-action {
    margin: 10px 0; }
    .basket-panel__summary-action:first-child {
      margin-top: 0; }
    .basket-panel__summary-action:last-child {
      margin-bottom: 0; }
  .basket-panel__product {
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0; }
  .basket-panel .button {
    width: 100%; }
  .basket-panel.\--full .basket-panel__items {
    height: 225px; }
  .basket-panel.\--full .basket-panel__products {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 225px;
    padding-bottom: 0px; }
    .basket-panel.\--full .basket-panel__products::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: #f4f4f4; }
    .basket-panel.\--full .basket-panel__products::-webkit-scrollbar {
      width: 6px;
      background-color: #f4f4f4; }
    .basket-panel.\--full .basket-panel__products::-webkit-scrollbar-thumb {
      background-color: #000000; }

.basket-panel-product {
  margin: 12px 0; }
  .basket-panel-product:first-of-type {
    margin-top: 0; }
  .basket-panel-product:last-of-type {
    margin-bottom: 40px; }
  .basket-panel-product__article {
    display: flex;
    flex-wrap: nowrap; }
  .basket-panel-product__imagery {
    width: 75px; }
  .basket-panel-product__details {
    padding-left: 30px; }
  .basket-panel-product__image {
    width: 100%;
    height: auto; }
  .basket-panel-product__name {
    margin-bottom: 4px; }
  .basket-panel-product__name-link {
    text-transform: uppercase;
    margin-bottom: 15px;
    font-weight: normal;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none; }
  .basket-panel-product__attribute-name {
    margin: 0;
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important; }
  .basket-panel-product__attribute-value, .basket-panel-product__pricing {
    display: block;
    margin: 0;
    padding: 0;
    color: #6d6d6d;
    line-height: 1.3; }
  .basket-panel-product__pricing {
    color: #313131; }
  .basket-panel-product__attribute-value {
    margin-bottom: 5px; }
  .basket-panel-product__quantity {
    padding-right: 3px; }
  .basket-panel-product__price {
    padding-left: 3px; }
  .basket-panel-product__messages, .basket-panel-product__messageItem {
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0; }
  .basket-panel-product__message {
    color: #969696;
    font-size: 1em;
    line-height: 1.3;
    text-transform: none;
    margin-bottom: 15px;
    display: block; }
  .basket-panel-product .price-display {
    display: inline-block; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.added-to-bag {
  position: fixed;
  border: 2px solid #f4f4f4;
  right: 40px;
  top: 60px;
  padding: 20px;
  background-color: white;
  width: 380px;
  transform: translate(120%, 0);
  transition: transform .2s ease-in-out;
  z-index: 2001;
  font-family: "Klein-Medium", Calibri, sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 19px;
  letter-spacing: 0.5; }
  @media (min-width: 1025px) {
    .added-to-bag {
      font-family: "Klein-Medium", Calibri, sans-serif;
      font-size: 12px;
      font-weight: normal;
      line-height: 18px;
      letter-spacing: 0.4px; } }
  .added-to-bag.\--opened {
    transform: translate(0, 0); }
  .added-to-bag .product-image {
    width: 75px; }
  .added-to-bag__product-imagery {
    min-width: 75px; }
  .added-to-bag__close {
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    right: 5px;
    top: 4px; }
    .added-to-bag__close:before, .added-to-bag__close:after {
      content: "";
      width: 1px;
      height: 16px;
      background-color: black;
      position: absolute;
      top: 0;
      left: 10px; }
    .added-to-bag__close:before {
      transform: rotate(45deg); }
    .added-to-bag__close:after {
      transform: rotate(-45deg); }
  .added-to-bag__product-tile {
    display: flex;
    flex-wrap: nowrap; }
  .added-to-bag__product-details {
    padding-left: 10px; }
  .added-to-bag__product-name {
    color: #313131;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0.5; }
    @media (min-width: 1025px) {
      .added-to-bag__product-name {
        font-family: "Klein-Medium", Calibri, sans-serif;
        font-size: 12px;
        font-weight: normal;
        line-height: 18px;
        letter-spacing: 0.4px; } }
  .added-to-bag__attributes {
    display: flex;
    flex-direction: column; }
  .added-to-bag__attribute {
    display: none; }
  .added-to-bag__attribute-value {
    color: #6d6d6d;
    display: block;
    margin: 0 0 4px 0;
    text-transform: capitalize;
    order: 1; }
    .added-to-bag__attribute-value.\--size {
      order: 2; }
  .added-to-bag__buttons {
    display: flex;
    flex-direction: column;
    margin-top: 18px; }
    .added-to-bag__buttons__checkout-button {
      margin-bottom: 10px; }
  .added-to-bag .price-display {
    display: inline-block;
    color: #313131;
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0.5; }
    @media (min-width: 1025px) {
      .added-to-bag .price-display {
        font-family: "Klein-Medium", Calibri, sans-serif;
        font-size: 12px;
        font-weight: normal;
        line-height: 18px;
        letter-spacing: 0.4px; } }

@media (max-width: 1024px) {
  .added-to-bag {
    top: 48px;
    right: 13px; } }

@media (max-width: 740px) {
  .added-to-bag {
    width: 100%;
    left: 0;
    top: 0;
    transform: translate(0, -100%);
    padding: 10px; }
    .added-to-bag .product-image {
      width: 90px; }
    .added-to-bag__close {
      right: 3px;
      top: 4px; }
    .added-to-bag__product-name {
      margin-bottom: 5px; }
    .added-to-bag__buttons .button {
      height: 40px; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.footer {
  background-color: #000000;
  z-index: 50;
  position: relative; }
  .footer__inner {
    max-width: 1920px;
    padding: 50px 40px 30px;
    margin: 0 auto; }
  .footer__group {
    display: flex;
    flex-direction: row;
    margin-bottom: 60px; }
  .footer__copyright {
    text-transform: uppercase;
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 11px;
    font-weight: normal;
    line-height: 18px;
    letter-spacing: 0.4px;
    color: #ffffff; }
  .footer__link {
    color: inherit; }
    .footer__link:hover {
      color: inherit;
      text-decoration: none; }
  .footer__list-group {
    display: flex;
    flex-direction: column;
    padding-right: 117px; }
    .footer__list-group:last-of-type {
      margin-left: auto;
      padding-right: 0; }
    .footer__list-group .locale-select {
      padding: 0; }
    .footer__list-group .locale-select {
      display: block; }
  .footer__list {
    padding: 0 0 10px; }
    .footer__list-item {
      color: #6d6d6d;
      list-style: none;
      padding: 5px 0; }
  .footer__list-title {
    text-transform: uppercase;
    color: #ffffff;
    padding-bottom: 10px; }
    .footer__list-title:hover {
      color: #ffffff;
      text-decoration: none; }
  .footer .social-media {
    margin-top: 5px; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.newsletter {
  font-family: "Klein-Medium", Calibri, sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 19px;
  letter-spacing: 0.5;
  background-color: #f4f4f4;
  padding: 15px 10px 20px;
  position: relative; }
  @media (min-width: 1025px) {
    .newsletter {
      font-family: "Klein-Medium", Calibri, sans-serif;
      font-size: 12px;
      font-weight: normal;
      line-height: 18px;
      letter-spacing: 0.4px; } }
  .newsletter--footer {
    background-size: cover;
    background-position: center; }
  .newsletter__title {
    font-size: 15px;
    line-height: 19px;
    letter-spacing: 0.5px;
    font-weight: normal;
    text-transform: uppercase;
    font-family: "Klein-Medium", Calibri, sans-serif; }
  .newsletter__subtext {
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 11px;
    font-weight: normal;
    line-height: 16px;
    letter-spacing: 0.4;
    color: #6d6d6d;
    margin-top: 10px; }
    @media (min-width: 741px) {
      .newsletter__subtext {
        font-family: "Klein-Medium", Calibri, sans-serif;
        font-size: 10px;
        font-weight: normal;
        line-height: 18px;
        letter-spacing: 0.35px; } }
  .newsletter__email {
    margin-top: 15px; }
    .newsletter__email .input {
      width: 100%;
      box-sizing: inherit; }
    .newsletter__email .form-field {
      margin: 0; }
    .newsletter__email-label {
      display: none; }
  .newsletter__signup--desktop {
    display: none; }
  .newsletter__terms {
    max-height: 55px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0 15px; }
    .newsletter__terms-title {
      text-transform: uppercase; }
      .newsletter__terms-title:after {
        content: '*'; }
    .newsletter__terms-paragraph {
      font-size: 11px;
      letter-spacing: 0.4px;
      line-height: 16px;
      margin-top: 2.5px; }
  .newsletter__checks {
    display: flex;
    flex-direction: column; }
    .newsletter__checks-categories {
      display: flex;
      padding: 20px 0 20px;
      width: 100%; }
      .newsletter__checks-categories .checkbox__label {
        line-height: 19px;
        display: inline-block; }
    .newsletter__checks-category {
      flex-grow: 1; }
    .newsletter__checks-terms .input__error ~ .checkbox__label:before {
      border-color: #d0021b; }
  .newsletter .checkbox--invalid .checkbox__label {
    color: #d0021b; }
    .newsletter .checkbox--invalid .checkbox__label:before {
      border-color: #d0021b; }
  .newsletter__actions {
    overflow: hidden;
    max-height: 0px;
    transition: max-height 0.4s; }
    .newsletter__actions--active {
      max-height: 300px; }
  .newsletter--has-image {
    color: #ffffff; }
    .newsletter--has-image .newsletter__subtext {
      color: inherit; }
    .newsletter--has-image .checkbox__input:checked + .checkbox__label:before {
      background-image: url("data:image/svg+xml,%3Csvg height='22' viewBox='0 0 27 22' width='27' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 23.2091581 6.36932511 6.7908419 16.63067489-18' fill='none' stroke='%23fff' stroke-width='3' transform='translate(2 -11)'/%3E%3C/svg%3E"); }
    .newsletter--has-image .checkbox__label {
      color: inherit; }
      .newsletter--has-image .checkbox__label::before {
        border-color: #ffffff; }
    .newsletter--has-image .checkbox .input__error ~ .checkbox__label,
    .newsletter--has-image .checkbox--invalid .checkbox__label {
      color: #d0021b; }
      .newsletter--has-image .checkbox .input__error ~ .checkbox__label:before,
      .newsletter--has-image .checkbox--invalid .checkbox__label:before {
        border-color: #d0021b; }
  .newsletter .form-field {
    margin: 0; }

.newsletter--modal {
  background-color: #ffffff;
  padding: 20px; }
  .newsletter--modal .newsletter__title {
    font-family: "Klein-Medium-Condensed", Klein-Medium, Calibri, sans-serif;
    font-size: 18px;
    line-height: 23px;
    letter-spacing: 0.36px; }
  .newsletter--modal .newsletter__subtext {
    font-size: 13px;
    letter-spacing: 0.5px;
    margin-top: 5px; }
  .newsletter--modal .newsletter__checks-categories {
    padding: 0px; }
  .newsletter--modal .newsletter__checks-category {
    padding: 25px 0 25px;
    flex-grow: 0; }
    .newsletter--modal .newsletter__checks-category .checkbox__label {
      line-height: 19px;
      flex-grow: 1; }
  .newsletter--modal .newsletter__checks-terms .checkbox__label {
    font-size: 11px;
    letter-spacing: 0.4px;
    line-height: 16px; }
  .newsletter--modal .newsletter__actions {
    max-height: none; }
  .newsletter--modal .newsletter__signup--mobile {
    margin-top: 20px; }

.newsletter--success .newsletter__continue {
  margin-top: 30px; }

@media (max-width: 740px) {
  .newsletter--modal .newsletter__checks-categories {
    justify-content: space-between; } }

@media (min-width: 741px) {
  .newsletter {
    padding: 15px 30px 15px; }
  .newsletter--modal {
    display: flex;
    max-width: 545px;
    padding: 40px; }
    .newsletter--modal .newsletter__title {
      font-size: 23px;
      letter-spacing: 0.57px;
      line-height: 28px; }
    .newsletter--modal .newsletter__subtext {
      margin-top: 0;
      font-size: 12px;
      letter-spacing: 0.44px;
      line-height: 18px;
      text-transform: uppercase; }
    .newsletter--modal .newsletter__email {
      max-width: none;
      margin: 0;
      display: flex; }
      .newsletter--modal .newsletter__email .input {
        margin-right: 10px;
        flex-grow: 1;
        width: auto; }
        .newsletter--modal .newsletter__email .input::-webkit-input-placeholder {
          color: transparent; }
        .newsletter--modal .newsletter__email .input:-ms-input-placeholder {
          color: transparent; }
        .newsletter--modal .newsletter__email .input::-ms-input-placeholder {
          color: transparent; }
        .newsletter--modal .newsletter__email .input::placeholder {
          color: transparent; }
      .newsletter--modal .newsletter__email button {
        width: auto;
        height: 40px; }
      .newsletter--modal .newsletter__email-label {
        display: block;
        margin: 20px 0 10px;
        text-transform: uppercase; }
    .newsletter--modal .newsletter__signup--desktop {
      display: block;
      min-width: 145px;
      white-space: nowrap; }
    .newsletter--modal .newsletter__signup--mobile {
      display: none; }
    .newsletter--modal .newsletter__actions {
      max-width: none; }
    .newsletter--modal .newsletter__checks-category {
      padding: 13px 37px 20px 0; }
    .newsletter--modal .newsletter__checks-terms .checkbox__label {
      margin: 0;
      font-size: 10px;
      letter-spacing: 0.35px;
      line-height: 18px; }
  .newsletter--success .newsletter__subtext {
    text-transform: none; } }

@media (min-width: 1025px) {
  .newsletter {
    padding: 30px 40px 30px;
    font-size: 12px;
    letter-spacing: 0.4px;
    line-height: 18px; }
    .newsletter__inner {
      max-width: 1920px;
      padding: 0;
      margin: 0 auto; }
    .newsletter__title {
      font-size: 18px;
      line-height: 18px; }
    .newsletter__subtext {
      font-size: 12px;
      letter-spacing: 0.4px;
      line-height: 18px; }
    .newsletter__email {
      max-width: 730px;
      margin-top: 20px;
      display: flex; }
      .newsletter__email .input {
        flex-grow: 1;
        min-width: 0;
        margin-right: 20px;
        width: auto; }
    .newsletter__actions {
      max-width: 730px; }
    .newsletter__terms {
      max-height: 70px; }
      .newsletter__terms-paragraph {
        margin-top: 7px;
        line-height: 18px; }
    .newsletter__checks {
      max-width: 60%;
      flex-direction: column-reverse; }
      .newsletter__checks-category {
        margin: 0; }
    .newsletter__signup--desktop {
      display: block;
      min-width: 320px;
      white-space: nowrap; }
    .newsletter__signup--mobile {
      display: none; }
  .newsletter--modal {
    display: flex;
    max-width: 895px;
    padding: 0; }
    .newsletter--modal .newsletter__image {
      width: 350px;
      min-height: 350px;
      min-width: 350px;
      background-size: cover;
      background-position: top center; }
    .newsletter--modal .newsletter__main {
      flex-grow: 1;
      padding: 35px 40px 40px; }
  .newsletter--success .newsletter__main {
    min-width: 535px;
    display: flex;
    flex-direction: column;
    justify-content: center; }
  .newsletter--success .newsletter__continue {
    min-width: 226px; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.locale-select {
  padding-top: 30px;
  padding-bottom: 15px;
  color: #ffffff; }
  .locale-select .select {
    height: 45px;
    text-transform: uppercase;
    margin-bottom: 10px;
    z-index: 10; }
    .locale-select .select__label {
      height: 100%;
      display: flex;
      align-items: center;
      background-color: #000000;
      border: 1px solid #6d6d6d; }
    .locale-select .select__selected, .locale-select .select__option {
      line-height: 45px;
      height: 45px;
      background-color: #000000;
      border: 1px solid #6d6d6d;
      border-bottom: none;
      border-top: none; }
      .locale-select .select__selected:hover, .locale-select .select__option:hover {
        background-color: #6d6d6d; }
    .locale-select .select__list {
      max-height: 225px;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      border-bottom: 1px solid #6d6d6d; }
    .locale-select .select.select--toggled {
      z-index: 100; }
    .locale-select .select:focus {
      outline: none; }
  .locale-select input {
    opacity: 1;
    height: 45px;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #000000;
    border: 1px solid #6d6d6d;
    border-radius: 0;
    text-transform: uppercase;
    color: #6d6d6d;
    -webkit-text-fill-color: #6d6d6d; }
  .locale-select button {
    width: 100%;
    border: 1px solid #ffffff;
    font-size: 13px;
    display: -webkit-box;
    -webkit-box-pack: center;
    /* justify-content */
    -webkit-box-align: center;
    /* align-items */ }
    .locale-select button:hover {
      background-color: #000000;
      border-color: #ffffff;
      color: #ffffff; }

@media (min-width: 741px) {
  .locale-select {
    display: flex;
    padding-top: 30px;
    padding-bottom: 15px; }
    .locale-select .select {
      width: 220px;
      margin-right: 20px;
      height: 40px; }
    .locale-select input {
      height: 40px;
      margin-top: 0;
      max-width: 220px;
      margin-right: 20px; }
    .locale-select button {
      margin-top: 0;
      max-width: 180px; } }

@media (min-width: 1025px) {
  .locale-select {
    margin: 10px 0 50px; }
    .locale-select .select {
      width: 240px;
      max-width: none;
      margin-right: 0; }
      .locale-select .select__list {
        position: relative;
        z-index: 2;
        max-height: 211px;
        overflow-x: hidden;
        border: 1px solid #6d6d6d;
        border-top: 0;
        background-color: #000000; }
      .locale-select .select__selected, .locale-select .select__option {
        font-size: 13px;
        height: 100%;
        padding: 10px;
        border: none;
        display: flex;
        align-items: center;
        background-color: #000000;
        line-height: 45px;
        height: 45px; }
        .locale-select .select__selected:hover, .locale-select .select__option:hover {
          background-color: #6d6d6d; }
    .locale-select input, .locale-select button {
      max-width: none; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.select {
  cursor: pointer;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 100%; }
  .select:after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: 0.5s;
    transform: rotate(90deg);
    top: 0;
    bottom: 0;
    right: 10px;
    width: 14px;
    height: 14px;
    margin: auto 0;
    background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8' standalone='no'?%3E %3Csvg width='20px' height='20px' viewBox='0 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Ctitle%3ECalvin Klein - down chevron%3C/title%3E %3Cdefs%3E%3C/defs%3E %3Cpath d='m7 3 L 13 10 L 7 17' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E %3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%; }
  .select--toggled:after {
    transform: rotate(-90deg); }
  .select--toggled .select__list {
    display: block; }
  .select input, .select__list {
    display: none; }
  .select__label, .select__option {
    line-height: 33px;
    height: 35px;
    padding: 0 10px;
    background: #ffffff;
    box-sizing: border-box;
    border: 1px solid #ffffff; }
  .select__option {
    border-top: none; }
  .select__option:hover {
    background-color: #6d6d6d; }
  .select__option--selected {
    background: #e4e4e4; }
  .select__option--readonly {
    opacity: 0.35;
    background: none; }
  .select__option--disabled {
    pointer-events: none;
    background: none; }

.social-media {
  display: flex;
  justify-content: flex-start; }
  .social-media__icon {
    height: 20px;
    width: 20px;
    margin-right: 20px;
    background-size: contain;
    background-position: 20% 20%;
    background-repeat: no-repeat; }
    .social-media__icon--facebook {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60.73' height='60.73' viewBox='0 0 60.73 60.73'%3E %3Cpath fill='white' d='M57.38 0H3.35A3.35 3.35 0 0 0 0 3.35v54.03c0 1.85 1.5 3.35 3.35 3.35h29.09V37.21h-7.92v-9.16h7.92v-6.76c0-7.85 4.79-12.12 11.78-12.12 3.36 0 6.24.25 7.08.36v8.2h-4.86c-3.8 0-4.54 1.81-4.54 4.46v5.85h9.08l-1.19 9.17H41.9v23.52h15.48c1.85 0 3.35-1.5 3.35-3.35V3.35c0-1.85-1.5-3.35-3.35-3.35z'/%3E %3C/svg%3E"); }
    .social-media__icon--twitter {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 26' width='31px' height='26px'%3E %3Cpath fill='white' d='M30.75 3.826c-.51.276-2.039.833-3.463.973.912-.487 2.266-2.086 2.6-3.36-.878.556-2.898 1.37-3.893 1.37l.002.004A6.252 6.252 0 0 0 21.484.9c-3.448 0-6.241 2.767-6.241 6.18 0 .477.054.934.16 1.378H15.4C10.723 8.339 4.43 7.03 1.35 3.06c-1.89 3.247-.252 6.46 1.894 7.773-.735.056-2.087-.081-2.725-.696-.044 2.152 1.001 5.005 4.812 6.037-.733.394-2.03.283-2.597.195.2 1.82 3.951 4.198 6.762 4.198-1.004 1.146-4.773 3.226-9 2.566a18.881 18.881 0 0 0 9.761 2.732c10.072 0 17.892-8.704 17.47-18.675l-.003-.03c0-.029.003-.055.003-.081 0-.03-.003-.06-.003-.092.917-.62 2.144-1.717 3.026-3.161'/%3E %3C/svg%3E"); }
    .social-media__icon--instagram {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' width='34px' height='34px'%3E %3Cg fill='white'%3E %3Cpath d='M16.78.51c-4.46 0-5.02.02-6.77.1-1.74.08-2.93.36-3.98.78-1.08.42-2 1-2.9 1.92a8.2 8.2 0 0 0-1.9 2.96C.84 7.33.56 8.55.48 10.33.4 12.1.37 12.68.37 17.2c0 4.54.02 5.1.1 6.89.08 1.77.36 2.99.77 4.05a8.2 8.2 0 0 0 1.89 2.96c.9.93 1.82 1.5 2.9 1.92 1.05.42 2.24.7 3.98.78 1.75.08 2.31.1 6.77.1 4.45 0 5-.02 6.76-.1 1.74-.08 2.94-.36 3.98-.78 1.08-.42 2-1 2.9-1.92a8.2 8.2 0 0 0 1.9-2.96c.4-1.06.68-2.28.76-4.05.08-1.79.1-2.35.1-6.89s-.02-5.1-.1-6.88c-.08-1.78-.36-3-.76-4.06a8.2 8.2 0 0 0-1.9-2.96 8.03 8.03 0 0 0-2.9-1.92C26.48.97 25.28.69 23.54.6c-1.75-.08-2.31-.1-6.76-.1zm0 3.01c4.38 0 4.9.02 6.62.1 1.6.07 2.47.34 3.05.57.76.3 1.31.67 1.88 1.25.58.59.93 1.14 1.23 1.92.23.59.5 1.47.57 3.1.08 1.76.1 2.3.1 6.75s-.02 4.99-.1 6.75a9.39 9.39 0 0 1-.57 3.1c-.3.78-.65 1.34-1.23 1.92-.57.58-1.12.95-1.88 1.25-.58.23-1.45.5-3.05.57-1.73.08-2.24.1-6.62.1s-4.9-.02-6.63-.1a8.93 8.93 0 0 1-3.05-.57 5.07 5.07 0 0 1-1.88-1.25 5.18 5.18 0 0 1-1.23-1.92 9.39 9.39 0 0 1-.56-3.1 118 118 0 0 1-.1-6.75c0-4.46.02-4.99.1-6.75.07-1.63.34-2.51.56-3.1.3-.78.65-1.33 1.23-1.92A5.07 5.07 0 0 1 7.1 4.2c.58-.23 1.45-.5 3.05-.57 1.73-.08 2.25-.1 6.63-.1z'/%3E %3Cpath d='M16.78 22.78c-3.02 0-5.47-2.5-5.47-5.57s2.45-5.57 5.47-5.57c3.02 0 5.46 2.5 5.46 5.57s-2.44 5.57-5.46 5.57zm0-14.14a8.5 8.5 0 0 0-8.43 8.57 8.5 8.5 0 0 0 8.43 8.58c4.65 0 8.42-3.84 8.42-8.58s-3.77-8.58-8.42-8.58zM27.5 8.3c0 1.1-.88 2-1.97 2-1.09 0-1.97-.9-1.97-2s.88-2 1.97-2c1.09 0 1.97.89 1.97 2'/%3E %3C/g%3E %3C/svg%3E"); }
    .social-media__icon--pinterest {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34px' height='34px' viewBox='0 0 34 34'%3E %3Cpath fill='white' d='M17 0a17 17 0 0 0-6.2 32.84c-.14-1.35-.28-3.41.07-4.88.3-1.33 2-8.45 2-8.45s-.52-1.02-.52-2.53c0-2.36 1.37-4.12 3.08-4.12 1.45 0 2.15 1.08 2.15 2.39 0 1.46-.93 3.64-1.4 5.66-.41 1.7.84 3.07 2.5 3.07 3.03 0 5.35-3.18 5.35-7.78 0-4.07-2.92-6.92-7.1-6.92a7.36 7.36 0 0 0-7.68 7.38 6.6 6.6 0 0 0 1.27 3.88c.14.17.16.32.12.49l-.47 1.92c-.08.32-.25.38-.57.23-2.13-.99-3.46-4.1-3.46-6.59 0-5.36 3.9-10.29 11.24-10.29 5.9 0 10.48 4.2 10.48 9.83 0 5.86-3.7 10.57-8.82 10.57-1.72 0-3.34-.9-3.9-1.95l-1.06 4.04a18.92 18.92 0 0 1-2.11 4.46A17 17 0 1 0 17 0z'/%3E %3C/svg%3E"); }
    .social-media__icon--youtube {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3E %3Cpath fill='white' d='M490.2 114c-13.8-24.8-29-29.3-59.6-31-30.7-2.1-107.8-3-174.5-3-67 0-144 .9-174.7 3-30.6 1.7-45.7 6.2-59.7 31C7.4 138.5 0 181 0 255.8v.2C0 330.8 7.4 373.6 21.7 398c14 24.7 29 29.2 59.7 31.3C112 430.9 189.2 432 256 432c66.7 0 143.8-1 174.5-2.8 30.7-2.1 45.8-6.6 59.7-31.3 14.4-24.4 21.7-67.2 21.7-141.7v-.2c0-75-7.3-117.4-21.8-142zM192 352V160l160 96-160 96z'/%3E %3C/svg%3E"); }
    @media (min-width: 1025px) {
      .social-media__icon {
        height: 18px;
        width: 18px;
        margin-right: 20px;
        background-position: 50% 50%;
        background-repeat: no-repeat; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.recommendations {
  position: relative;
  margin-bottom: 40px;
  min-height: 60px; }
  .recommendations__heading {
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: normal; }
  .recommendations__items {
    display: flex;
    justify-content: space-between; }

@media (min-width: 741px) {
  .product-page__side-col .recommendations {
    margin: 30px 0 -25px 0;
    border-bottom: 1px solid #e4e4e4;
    padding-bottom: 10px; }
    .product-page__side-col .recommendations__heading {
      font-size: 13px;
      margin-bottom: 15px; }
  .product-page__side-col .recommendation-item {
    width: 177px; }
    .product-page__side-col .recommendation-item__info {
      padding: 10px 0px; }
    .product-page__side-col .recommendation-item__name {
      height: 40px;
      padding: 0px 10px; }
    .product-page__side-col .recommendation-item__price {
      padding: 0px 10px; }
    .product-page__side-col .recommendation-item .button--secondary {
      background-color: #000000;
      border-color: #000000;
      color: #ffffff; }
      .product-page__side-col .recommendation-item .button--secondary:hover {
        background-color: transparent;
        border-color: #000000;
        color: #000000; } }

@media (max-width: 1024px) {
  .recommendations__heading {
    margin-top: 40px;
    padding-left: 30px; } }

@media (max-width: 740px) {
  .recommendations {
    margin-top: 20px; }
    .recommendations__heading {
      font-size: 15px;
      padding: 10px;
      margin: 20px 0 10px 0; }
    .recommendations__add-to-basket {
      width: 240px;
      margin: 0 auto; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.recommendation-item {
  width: 316px; }
  .recommendation-item__info {
    padding: 20px; }
  .recommendation-item__price {
    letter-spacing: 1px;
    font-size: 13px; }
  .recommendation-item__name {
    margin-top: 3px;
    color: #6d6d6d;
    text-transform: uppercase; }
    .recommendation-item__name a {
      font-size: 12px;
      letter-spacing: 0.4px;
      font-weight: normal; }
  .recommendation-item__loading {
    height: 50px;
    position: relative;
    margin-top: 20px; }
  .recommendation-item .button {
    width: 100%;
    margin-top: 20px; }
  .recommendation-item .product-image {
    max-height: 345px; }

#peeriusContainer .recommendation-item {
  width: 24%; }
  #peeriusContainer .recommendation-item .product-image {
    max-height: 480px; }

@media (max-width: 1024px) {
  .recommendation-item {
    width: 316px;
    margin: 0 5px; }
  #peeriusContainer .recommendation-item {
    width: 316px; }
    #peeriusContainer .recommendation-item .product-image {
      max-height: 345px; } }

@media (max-width: 740px) {
  .recommendation-item {
    width: 240px;
    margin: 0 5px; }
    .recommendation-item__info {
      padding: 0; }
    .recommendation-item__price {
      font-size: 11px;
      letter-spacing: 0.5px;
      padding: 10px 10px 0 10px; }
    .recommendation-item__name {
      font-size: 11px;
      padding: 0 10px;
      height: 40px;
      margin-top: 3px;
      line-height: 12px; }
      .recommendation-item__name a {
        font-size: 11px;
        letter-spacing: 0.5px; }
    .recommendation-item .button {
      height: 40px;
      margin-top: 0px; }
    .recommendation-item .product-image {
      max-height: 262px; }
  #peeriusContainer .recommendation-item {
    width: 240px; }
    #peeriusContainer .recommendation-item .product-image {
      max-height: 262px; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.atb-flyout__inner {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1001;
  width: 380px;
  background: white;
  height: 100%;
  color: #313131;
  transform: translate(100%, 0);
  transition: transform .3s ease-in-out;
  font-family: "Klein-Medium", Calibri, sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 19px;
  letter-spacing: 0.5; }
  @media (min-width: 1025px) {
    .atb-flyout__inner {
      font-family: "Klein-Medium", Calibri, sans-serif;
      font-size: 12px;
      font-weight: normal;
      line-height: 18px;
      letter-spacing: 0.4px; } }

.atb-flyout__header {
  display: flex;
  background: #e4e4e4;
  height: 90px; }
  .atb-flyout__header__image {
    width: 90px;
    overflow: hidden; }
  .atb-flyout__header__product-info {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-left: 22px;
    text-transform: uppercase; }
  .atb-flyout__header__name {
    color: #6d6d6d; }

.atb-flyout__attributes {
  max-height: calc(100vh - 236px);
  margin-bottom: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; }
  .atb-flyout__attributes.\--small {
    max-height: calc(100vh - 404px); }

.atb-flyout__attribute {
  padding: 4px 20px;
  display: flex;
  justify-content: space-between;
  margin: 1px 0;
  cursor: pointer; }
  .atb-flyout__attribute:hover, .atb-flyout__attribute.\--selected {
    background-color: #e4e4e4; }
    .atb-flyout__attribute:hover .atb-flyout__attribute__label, .atb-flyout__attribute.\--selected .atb-flyout__attribute__label {
      color: #313131; }
  .atb-flyout__attribute__label {
    text-transform: uppercase;
    color: #6d6d6d; }
    .atb-flyout__attribute__label.\--no-stock {
      text-decoration: line-through; }
  .atb-flyout__attribute__message {
    color: #9E9E9E; }

.atb-flyout__content {
  padding: 38px 40px;
  position: relative;
  max-height: calc(100% - 66px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; }

.atb-flyout__close {
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  right: 15px;
  top: 15px; }
  .atb-flyout__close:before, .atb-flyout__close:after {
    content: "";
    width: 1px;
    height: 16px;
    background-color: black;
    position: absolute;
    top: 0;
    left: 10px; }
  .atb-flyout__close:before {
    transform: rotate(45deg); }
  .atb-flyout__close:after {
    transform: rotate(-45deg); }

.atb-flyout__overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: opacity .3s ease-in-out;
  transform: translate(-100%, 0); }

.atb-flyout__size-guide__container {
  text-align: right; }

.atb-flyout__size-guide__button {
  text-transform: uppercase;
  text-decoration: underline; }

.atb-flyout__size-guide__icon {
  position: relative;
  top: 1px;
  left: -3px; }

.atb-flyout.\--opened .atb-flyout__inner {
  transform: translate(0, 0); }

.atb-flyout.\--opened .atb-flyout__overlay {
  opacity: 0.6;
  transform: translate(0, 0); }

@media (max-width: 740px) {
  .atb-flyout__inner {
    width: 100%;
    height: 403px;
    top: auto;
    bottom: 0;
    transform: translate(0, 430%);
    transition: all .3s ease-in-out; }
    .atb-flyout__inner .add-to-bag {
      margin: 0; }
    .atb-flyout__inner.\--with-notify {
      height: 403px; }
      .atb-flyout__inner.\--with-notify .atb-flyout__content {
        padding-bottom: 55px; }
  .atb-flyout__overlay {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translate(0, -100%);
    opacity: 0.8; }
  .atb-flyout__content {
    padding: 25px 10px 25px 10px;
    max-height: 1000px; }
  .atb-flyout__attributes {
    height: 203px;
    margin-bottom: 0;
    max-height: 1000px;
    overflow: hidden;
    position: relative; }
    .atb-flyout__attributes__highlight {
      pointer-events: none;
      position: absolute;
      top: 87px;
      width: 100%;
      height: 29px;
      background-color: rgba(0, 0, 0, 0.1);
      left: 0;
      z-index: 10; }
    .atb-flyout__attributes.\--custom-scroll:before, .atb-flyout__attributes.\--custom-scroll:after {
      pointer-events: none;
      z-index: 100;
      content: "";
      width: 100%;
      position: absolute;
      height: 41px;
      background: linear-gradient(to bottom, #ffffff 27%, rgba(255, 255, 255, 0) 100%); }
    .atb-flyout__attributes.\--custom-scroll:before {
      top: 0; }
    .atb-flyout__attributes.\--custom-scroll:after {
      bottom: 0;
      transform: rotate(180deg); }
    .atb-flyout__attributes.\--custom-scroll .atb-flyout__attribute {
      margin: 0;
      padding: 5px 20px; }
      .atb-flyout__attributes.\--custom-scroll .atb-flyout__attribute__label {
        font-size: 15px;
        color: #9E9E9E; }
      .atb-flyout__attributes.\--custom-scroll .atb-flyout__attribute:hover, .atb-flyout__attributes.\--custom-scroll .atb-flyout__attribute.\--selected {
        background-color: white; }
      .atb-flyout__attributes.\--custom-scroll .atb-flyout__attribute.\--selected .atb-flyout__attribute__label {
        color: #313131; }
  .atb-flyout__close {
    right: 7px;
    top: 8px; }
  .atb-flyout__size-guide__container {
    float: none;
    background: white;
    position: absolute;
    right: 10px;
    top: -35px;
    padding: 3px 9px; }
  .atb-flyout__size-guide__button {
    font-size: 12px;
    text-decoration: none; } }

@media (min-width: 1025px) {
  .atb-flyout__content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #f4f4f4; }
  .atb-flyout__content::-webkit-scrollbar {
    width: 6px;
    background-color: #f4f4f4; }
  .atb-flyout__content::-webkit-scrollbar-thumb {
    background-color: #000000; } }


/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.notify-me {
  margin: 21px 0 10px; }
  .notify-me__title {
    color: #313131;
    text-transform: uppercase;
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0.5; }
    @media (min-width: 1025px) {
      .notify-me__title {
        font-family: "Klein-Medium", Calibri, sans-serif;
        font-size: 12px;
        font-weight: normal;
        line-height: 18px;
        letter-spacing: 0.4px; } }
  .notify-me__sub-title {
    margin-top: 8px;
    color: #9E9E9E; }
  .notify-me__sku {
    display: flex;
    justify-content: space-between;
    margin: 19px 0;
    letter-spacing: 0.4px;
    color: #313131; }
  .notify-me__validation-error {
    display: block;
    color: #d0021b;
    margin: -10px 0 10px 0;
    visibility: hidden; }
    .notify-me__validation-error.\--visible {
      visibility: visible; }
  .notify-me__success {
    padding: 8px 0px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px; }
    .notify-me__success__icon {
      width: 17px;
      height: 17px; }
  .notify-me .button {
    width: 100%; }
  .notify-me .input__input {
    margin-bottom: 18px; }

@media (max-width: 740px) {
  .notify-me {
    margin: 0; }
    .notify-me__content {
      position: absolute;
      top: 22px;
      left: 0;
      width: 100%;
      padding: 0 10px;
      background: white;
      z-index: 1002; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.add-to-bag {
  display: block;
  margin: 21px 0 10px;
  position: relative; }
  .add-to-bag__add, .add-to-bag__checkout, .add-to-bag__notify-me {
    margin: 0;
    width: 100%; }
  .add-to-bag__checkout {
    margin-top: 10px; }
  .add-to-bag__messages {
    margin: 8px 0; }
  .add-to-bag__message--warning {
    color: #d0021b;
    padding-left: 16px; }
  .add-to-bag__added-label {
    display: flex;
    align-items: center;
    font-size: 0.865em;
    position: relative;
    min-height: 20px;
    padding-left: 17px;
    margin-top: 5px; }
    .add-to-bag__added-label:before, .add-to-bag__added-label:after {
      content: " ";
      display: block;
      position: absolute;
      height: 2px;
      background-color: #7ED321; }
    .add-to-bag__added-label:before {
      width: 6px;
      left: 0;
      top: calc(50% + 2px);
      transform: rotate(45deg); }
    .add-to-bag__added-label:after {
      width: 14px;
      left: 1px;
      top: calc(50% - 2px);
      transform: rotate(300deg); }
  .add-to-bag__errors {
    display: block;
    color: #d0021b;
    margin: 8px 0; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.size-guide .expand__trigger {
  margin-top: 3px; }

.size-guide .expand__tab {
  margin-top: 4px;
  border-width: 1px; }

.size-guide .expand__content {
  padding-top: 10px; }

.size-guide__inner {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  width: 380px;
  background: white;
  height: 100%;
  color: #313131;
  transform: translate(100%, 0);
  transition: transform .1s;
  font-family: "Klein-Medium", Calibri, sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 19px;
  letter-spacing: 0.5; }
  @media (min-width: 1025px) {
    .size-guide__inner {
      font-family: "Klein-Medium", Calibri, sans-serif;
      font-size: 12px;
      font-weight: normal;
      line-height: 18px;
      letter-spacing: 0.4px; } }

.size-guide__howTo__content {
  margin-top: 10px;
  max-height: calc(100% - 50px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; }
  .size-guide__howTo__content h3 {
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #313131;
    margin-bottom: 6px; }
    @media (min-width: 1025px) {
      .size-guide__howTo__content h3 {
        font-family: "Klein-Medium", Calibri, sans-serif;
        font-size: 13px;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: 0.5px; } }

.size-guide__howTo__image {
  width: 100%;
  margin-bottom: 15px; }

.size-guide__howTo__section {
  margin-bottom: 15px; }

.size-guide__howTo__icon {
  position: relative;
  top: 3px;
  left: 11px; }

.size-guide__tabs-container {
  margin-top: 29px;
  display: flex;
  justify-content: space-between; }

.size-guide__category-name {
  text-transform: uppercase;
  margin-top: 13px;
  font-family: "Klein-Medium", Calibri, sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 20px;
  letter-spacing: 0.5px; }
  @media (min-width: 1025px) {
    .size-guide__category-name {
      font-family: "Klein-Medium", Calibri, sans-serif;
      font-size: 13px;
      font-weight: normal;
      line-height: 20px;
      letter-spacing: 0.5px; } }

.size-guide__header {
  background: #e4e4e4;
  height: 50px;
  text-align: center;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.5px;
  line-height: 50px; }

.size-guide__content {
  margin: 22px 20px 22px 40px;
  max-height: calc(100% - 93px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 20px; }

.size-guide__how-to-link {
  text-decoration: underline; }

.size-guide__close {
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  top: 14px;
  right: auto;
  left: 11px; }
  .size-guide__close:before, .size-guide__close:after {
    content: "";
    width: 1px;
    height: 16px;
    background-color: black;
    position: absolute;
    top: 0;
    left: 10px; }
  .size-guide__close:before {
    transform: rotate(45deg); }
  .size-guide__close:after {
    transform: rotate(-45deg); }
  .size-guide__close:before, .size-guide__close:after {
    top: 0;
    height: 22px; }

.size-guide__tables {
  margin-top: 19px; }

.size-guide__table-container {
  margin-bottom: 40px; }

.size-guide__table {
  display: table;
  width: 100%; }
  .size-guide__table__row {
    display: table-row;
    width: 100%;
    text-transform: uppercase;
    font-size: 12px;
    height: 36px;
    line-height: 36px; }
    .size-guide__table__row.\--head {
      background: black;
      color: white;
      height: 40px;
      line-height: 40px; }
      .size-guide__table__row.\--head .size-guide__table__cell {
        border: none; }
    .size-guide__table__row:nth-child(even) {
      background: #e4e4e4; }
  .size-guide__table__cell {
    display: table-cell;
    border-right: 1px solid #e4e4e4;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    width: 50%; }
  .size-guide__table.\--size3 .size-guide__table__cell {
    width: 33%; }
  .size-guide__table.\--size4 .size-guide__table__cell {
    width: 25%;
    vertical-align: middle;
    padding: 7px 19px;
    line-height: 23px; }
  .size-guide__table.\--size5 .size-guide__table__cell {
    width: 20%;
    vertical-align: middle;
    padding: 7px 19px;
    line-height: 23px; }
  .size-guide__table.\--size6 .size-guide__table__cell, .size-guide__table.\--size8 .size-guide__table__cell, .size-guide__table.\--size9 .size-guide__table__cell {
    width: 16.6%;
    vertical-align: middle;
    padding: 7px 19px;
    line-height: 23px; }
  .size-guide__table.\--size7 .size-guide__table__cell {
    width: 13.6%; }

.size-guide__units-tabs {
  width: 140px;
  border: 1px solid #313131;
  margin-top: 0;
  display: flex;
  font-family: "Klein-Medium", Calibri, sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 20px;
  letter-spacing: 0.5px; }
  @media (min-width: 1025px) {
    .size-guide__units-tabs {
      font-family: "Klein-Medium", Calibri, sans-serif;
      font-size: 13px;
      font-weight: normal;
      line-height: 20px;
      letter-spacing: 0.5px; } }
  .size-guide__units-tabs__tab {
    width: 50%;
    line-height: 40px;
    height: 40px;
    text-align: center;
    color: black;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer; }
    .size-guide__units-tabs__tab.\--selected {
      background-color: black;
      color: white; }

.size-guide__overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: opacity .3s;
  transform: translate(-100%, 0); }

.size-guide.\--large .size-guide__inner {
  width: 769px; }

.size-guide.\--large .size-guide__howTo__content {
  display: flex; }

.size-guide.\--large .size-guide__howTo__image-container {
  width: 300px; }

.size-guide.\--large .size-guide__howTo__sections {
  margin-left: 20px; }

.size-guide.\--opened .size-guide__inner {
  transform: translate(0, 0); }

.size-guide.\--opened .size-guide__overlay {
  opacity: 0.6;
  transform: translate(0, 0); }

.size-guide.\--flyout-opened .size-guide__inner {
  transform: translate(-100%, 0); }
  .size-guide.\--flyout-opened .size-guide__inner:after {
    content: "";
    top: 0;
    right: 0;
    width: 40px;
    opacity: 0.1;
    height: 100%;
    position: absolute;
    background: linear-gradient(270deg, #000000 0%, rgba(0, 0, 0, 0) 100%); }

.size-guide.\--flyout-opened.\--large .size-guide__inner {
  transform: translate(-49%, 0); }

@media (max-width: 1024px) {
  .size-guide__inner {
    width: calc(100% - 380px); }
  .size-guide__table-container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; }
  .size-guide.\--flyout-opened .size-guide__inner {
    transform: translate(-380px, 0); }
  .size-guide.\--flyout-opened.\--large .size-guide__inner {
    width: calc(100% - 380px);
    transform: translate(-380px, 0); }
    .size-guide.\--flyout-opened.\--large .size-guide__inner .size-guide__table {
      width: 769px; } }

@media (max-width: 740px) {
  .size-guide__inner {
    z-index: 1001;
    width: 100%;
    top: 0;
    left: 0;
    transform: translate(0, 420%); }
  .size-guide__content {
    margin: 20px 10px;
    padding-right: 0px; }
  .size-guide__table-container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; }
  .size-guide.\--large .size-guide__inner {
    width: 100%; }
  .size-guide.\--large .size-guide__howTo__content {
    display: block; }
  .size-guide.\--large .size-guide__howTo__image-container {
    width: 100%; }
  .size-guide.\--large .size-guide__howTo__sections {
    margin-left: 0; }
  .size-guide.\--flyout-opened .size-guide__inner {
    transform: translate(0, 0);
    width: 100%; }
    .size-guide.\--flyout-opened .size-guide__inner:after {
      display: none; }
  .size-guide.\--flyout-opened.\--large .size-guide__inner {
    transform: translate(0, 0);
    width: 100%; } }

@media (min-width: 1025px) {
  .size-guide__content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #f4f4f4; }
  .size-guide__content::-webkit-scrollbar {
    width: 6px;
    background-color: #f4f4f4; }
  .size-guide__content::-webkit-scrollbar-thumb {
    background-color: #000000; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.content-error-fallback {
  max-width: 1920px;
  margin: 0 auto;
  display: flex; }
  .content-error-fallback__content {
    padding: 14px 10px;
    max-width: 250px; }
  .content-error-fallback__title {
    margin-bottom: 10px;
    text-transform: uppercase;
    font-family: "Klein-Medium-Condensed", Klein-Medium, Calibri, sans-serif;
    font-size: 18px;
    font-weight: normal; }
  .content-error-fallback__description {
    margin-bottom: 20px;
    color: #6d6d6d; }
  .content-error-fallback__link-list__title {
    margin-bottom: 10px; }
  .content-error-fallback__image {
    flex: 1 0 0;
    overflow: hidden; }
    .content-error-fallback__image img {
      display: block;
      width: 100%; }
  .content-error-fallback li {
    line-height: 0;
    list-style: none; }
    .content-error-fallback li:not(:last-child) {
      margin-bottom: 16px; }
  @media (max-width: 740px) {
    .content-error-fallback {
      flex-direction: column;
      min-height: calc(100vh - 80px); }
      .content-error-fallback .btn {
        width: 100%; }
      .content-error-fallback__image {
        height: 0;
        padding-bottom: 100%; }
      .content-error-fallback__content {
        flex: 0 0 auto; } }
  @media (min-width: 741px) {
    .content-error-fallback__image {
      order: 1;
      flex: 1 0 auto;
      max-width: 50%; }
    .content-error-fallback__wrapper {
      flex: 1 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
    .content-error-fallback__content {
      max-width: 300px; }
    .content-error-fallback__title {
      font-size: 23px; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.catalog {
  min-height: 300px;
  max-width: 1920px;
  margin: 0 auto;
  margin-top: 60px;
  margin-bottom: 60px; }
  .catalog.\--fixed-menu-end {
    position: relative; }
  .catalog__content {
    display: flex;
    flex-wrap: nowrap;
    padding-left: 30px;
    padding-right: 30px; }
  .catalog__panel {
    width: 20%;
    max-width: 390px;
    position: absolute;
    top: 70px;
    padding-top: 60px; }
    .catalog__panel.\--fixed {
      position: fixed; }
      .catalog__panel.\--fixed.\--top {
        top: 70px;
        bottom: auto; }
      .catalog__panel.\--fixed.\--bottom {
        top: auto;
        bottom: 40px; }
    .catalog__panel.\--fixed-menu-end {
      bottom: 0;
      top: auto; }
    .catalog__panel.\--static {
      position: static;
      padding-top: 0; }
    .catalog__panel::-webkit-scrollbar {
      display: none; }
  .catalog__primary {
    margin-left: 20%;
    width: 80%; }
    .catalog__primary.\--static {
      margin-left: 0; }
  .catalog__count {
    color: #969696;
    text-align: right;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: normal; }
  .catalog__error-message {
    color: #d0021b;
    text-align: center;
    margin: 30px 0;
    font-size: 1.2em; }
  .catalog__load-more {
    margin: 20px auto;
    width: auto;
    min-width: 330px;
    display: block; }
  .catalog__seoContent {
    color: #6d6d6d;
    font-size: 12px;
    letter-spacing: 0.4px;
    line-height: 18px;
    padding: 25px; }
    .catalog__seoContent h1 {
      color: #313131;
      font-size: 23px;
      letter-spacing: 0.57px;
      line-height: 28px;
      margin-bottom: 15px;
      text-transform: uppercase;
      font-family: "Klein-Medium-Condensed", Klein-Medium, Calibri, sans-serif; }

.app--tablet .catalog {
  margin-top: 15px; }
  .app--tablet .catalog__panel {
    padding-top: 34px; }
  .app--tablet .catalog-heading {
    margin: 0; }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .catalog {
    position: relative;
    z-index: 0;
    margin-top: 70px; }
    .catalog__primary {
      margin: 54px 0 0 20%; }
    .catalog__panel {
      padding-top: 0; }
    .catalog .\--top.\--fixed.catalog__panel {
      top: 110px; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.catalog-facets {
  padding: 10px; }
  .catalog-facets__group {
    border: solid 1px #e4e4e4;
    padding: 10px;
    margin-bottom: 10px; }
  .catalog-facets__group-label {
    outline: none;
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0.5;
    cursor: pointer;
    text-transform: uppercase;
    position: relative; }
    @media (min-width: 1025px) {
      .catalog-facets__group-label {
        font-family: "Klein-Medium", Calibri, sans-serif;
        font-size: 12px;
        font-weight: normal;
        line-height: 18px;
        letter-spacing: 0.4px; } }
    .catalog-facets__group-label span {
      width: 10px;
      position: absolute;
      top: 8px;
      right: 5px; }
    .catalog-facets__group-label span::before,
    .catalog-facets__group-label span::after {
      display: block;
      background: #969696;
      height: 1px;
      width: 10px;
      border-radius: 1px;
      position: relative;
      opacity: 1;
      transition: 250ms ease-in-out; }
    .catalog-facets__group-label span::before,
    .catalog-facets__group-label span::after {
      content: '';
      position: absolute; }
    .catalog-facets__group-label span::after {
      transform: rotate(90deg); }
    .catalog-facets__group-label.open span::after {
      transform: rotate(180deg); }
  .catalog-facets .off {
    max-height: 0;
    padding-top: 0;
    transition: max-height 250ms ease-in-out 250ms; }
    .catalog-facets .off li {
      opacity: 0;
      transition: 250ms ease-in-out; }
  .catalog-facets__group-list {
    display: block;
    font-weight: bold;
    list-style-type: none;
    max-height: 180px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    padding-top: 13px;
    transform-origin: top;
    transition: max-height 250ms ease-in-out;
    overflow: -moz-scrollbars-none; }
    .catalog-facets__group-list::-webkit-scrollbar, .catalog-facets__group-list *::-webkit-scrollbar {
      display: none; }
    .catalog-facets__group-list li {
      padding: 0 0 12px 10px;
      font-family: "Klein-Medium", Calibri, sans-serif;
      font-size: 13px;
      font-weight: normal;
      line-height: 19px;
      letter-spacing: 0.5;
      opacity: 1;
      transition: 250ms ease-in-out 250ms; }
      @media (min-width: 1025px) {
        .catalog-facets__group-list li {
          font-family: "Klein-Medium", Calibri, sans-serif;
          font-size: 12px;
          font-weight: normal;
          line-height: 18px;
          letter-spacing: 0.4px; } }
    .catalog-facets__group-list .checkbox__label {
      line-height: 18px;
      padding-left: 30px;
      text-overflow: ellipsis;
      display: block;
      color: #6d6d6d;
      text-transform: uppercase; }
      .catalog-facets__group-list .checkbox__label::before {
        height: 14px;
        width: 14px;
        top: 2px; }
    .catalog-facets__group-list .checkbox__input:disabled + .checkbox__label {
      color: #e4e4e4; }
      .catalog-facets__group-list .checkbox__input:disabled + .checkbox__label::before {
        border-color: #e4e4e4; }
    .catalog-facets__group-list .form-field {
      margin: 0; }
    .catalog-facets__group-list .input-range {
      width: 80%;
      margin: 30px auto 30px 20px; }
      .catalog-facets__group-list .input-range__slider {
        border-radius: 0;
        background: #313131; }
      .catalog-facets__group-list .input-range__track--active {
        background: #313131; }
  .catalog-facets__group-list.more {
    padding-top: 0; }
  .catalog-facets__active-facets {
    padding: 2px 0 0 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .catalog-facets__active-facet, .catalog-facets__active-facet--price_min, .catalog-facets__active-facet--price_max {
    margin: 0;
    padding-right: 5px;
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0.5;
    display: inline-block;
    color: #6d6d6d;
    text-transform: uppercase; }
    @media (min-width: 1025px) {
      .catalog-facets__active-facet, .catalog-facets__active-facet--price_min, .catalog-facets__active-facet--price_max {
        font-family: "Klein-Medium", Calibri, sans-serif;
        font-size: 12px;
        font-weight: normal;
        line-height: 18px;
        letter-spacing: 0.4px; } }
  .catalog-facets__active-facet:not(:last-child)::after, .catalog-facets__active-facet--price_max:not(:last-child)::after {
    content: ','; }
  .catalog-facets__active-facet--price_min {
    margin: 0; }
    .catalog-facets__active-facet--price_min::after {
      margin: 5px;
      content: '-'; }
  .catalog-facets__main-title {
    font-size: 12px;
    font-weight: bold;
    color: #969696;
    padding-bottom: 25px;
    line-height: 1.25;
    letter-spacing: .7px;
    text-transform: uppercase; }
  .catalog-facets .input-range__label {
    color: #313131; }
  .catalog-facets .maincolour .catalog-facets__group-list {
    max-height: 250px; }
    .catalog-facets .maincolour .catalog-facets__group-list.off {
      max-height: 0; }
    .catalog-facets .maincolour .catalog-facets__group-list li {
      display: inline-block;
      box-sizing: border-box; }

.price .catalog-facets__group-list {
  overflow-y: hidden; }

@media (min-width: 741px) {
  .app--tablet .catalog-facets {
    padding: 0; }
    .app--tablet .catalog-facets__main-title {
      padding-bottom: 13px; }
    .app--tablet .catalog-facets__group-label {
      font-size: 12px;
      line-height: 12px;
      padding: 0; }
      .app--tablet .catalog-facets__group-label span {
        top: 5px;
        right: 0px; }
    .app--tablet .catalog-facets__group-list li {
      font-style: 12px;
      padding: 0 0 10px 5px; }
      .app--tablet .catalog-facets__group-list li:first-of-type {
        padding-top: 10px; }
    .app--tablet .catalog-facets .maincolour .catalog-facets__group-list {
      max-height: 180px; }
      .app--tablet .catalog-facets .maincolour .catalog-facets__group-list.off {
        max-height: 0; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.slider {
  position: relative;
  width: 100%;
  padding: 10px; }
  .slider__control {
    margin: 0 auto;
    padding: 5px 10px; }
  .slider__bar-background {
    background-color: #d8d8d8;
    height: 4px;
    position: relative;
    top: 12px; }
  .slider__bar {
    height: 4px;
    position: absolute;
    background-color: #313131;
    opacity: 0;
    transition: opacity 250ms ease-in-out; }
    .slider__bar.active {
      opacity: 1;
      transition: opacity 250ms ease-in-out; }
  .slider__handles {
    position: relative;
    height: 18px;
    margin-bottom: 10px; }
  .slider__handle-left {
    position: absolute;
    height: 18px;
    width: 18px;
    background-color: #313131; }
  .slider__handle-right {
    position: absolute;
    height: 18px;
    width: 18px;
    background-color: #313131; }
  .slider__output-left, .slider__output-right,
  .slider__input-left input,
  .slider__input-right input {
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0.5;
    color: #6d6d6d;
    border: 1px solid #d8d8d8;
    min-width: 75px;
    height: 22px;
    text-align: center; }
    @media (min-width: 1025px) {
      .slider__output-left, .slider__output-right,
      .slider__input-left input,
      .slider__input-right input {
        font-family: "Klein-Medium", Calibri, sans-serif;
        font-size: 12px;
        font-weight: normal;
        line-height: 18px;
        letter-spacing: 0.4px; } }
  .slider__output-left, .slider__output-right {
    margin-top: 10px;
    padding: 0 5px; }
  .slider__input-left {
    margin-bottom: -5px; }
  .slider__input-left, .slider__input-right {
    margin-top: 15px; }
  .slider__output-left, .slider__input-left {
    display: inline-block; }
  .slider__output-right, .slider__input-right {
    float: right; }
  .slider .price-display {
    font-size: 14px; }

@media (min-width: 741px) {
  .slider {
    padding: 10px 0; }
    .slider__control {
      padding: 5px 0; }
    .slider__output-left, .slider__output-right,
    .slider__input-left input,
    .slider__input-right input {
      min-width: 65px; } }

@media (min-width: 1025px) {
  .slider {
    padding: 10px; }
    .slider__control {
      padding-top: 0; }
    .slider__bar-background {
      top: 9px; }
    .slider__handle-left, .slider__handle-right {
      height: 14px;
      width: 14px; }
    .slider__handles {
      position: relative;
      height: 14px;
      margin-bottom: 0; }
    .slider__output-left {
      position: relative;
      top: 5px; }
    .slider__output-right {
      position: relative;
      top: 5px; }
    .slider .price-display {
      font-size: 0.8em; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.catalog-sorts__group-label {
  outline: none;
  font-size: 12px;
  line-height: 15px;
  padding: 7px 0 7px 15px;
  cursor: pointer; }
  .catalog-sorts__group-label::before {
    content: '';
    border: solid #313131;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2.5px;
    position: relative; }
  .catalog-sorts__group-label--right::before {
    transform: rotate(-45deg);
    transition: 250ms ease-in-out;
    left: -15px; }
  .catalog-sorts__group-label--down::before {
    transform: rotate(45deg);
    transition: 250ms ease-in-out;
    left: -12px;
    top: -3px; }

.catalog-sorts .off {
  max-height: 0;
  transition: max-height 250ms ease-in-out 250ms; }
  .catalog-sorts .off li {
    opacity: 0;
    transition: 250ms ease-in-out; }

.catalog-sorts__group-list {
  list-style-type: none;
  max-height: 188px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  transform-origin: top;
  transition: max-height 250ms ease-in-out; }
  .catalog-sorts__group-list::-webkit-scrollbar {
    display: none; }
  .catalog-sorts__group-list .checkbox__label {
    padding-left: 22px; }
    .catalog-sorts__group-list .checkbox__label::before {
      height: 14px;
      width: 14px;
      top: 3px; }
  .catalog-sorts__group-list .form-field {
    margin: 0; }

.catalog-sorts__list-item {
  padding: 0 0 8px 24px;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: normal;
  font-weight: normal;
  opacity: 1;
  transition: 250ms ease-in-out 250ms; }
  .catalog-sorts__list-item:first-of-type {
    padding-top: 13px; }
  .catalog-sorts__list-item--selected .checkbox__label {
    cursor: default; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.category-navigation {
  padding-left: 10px; }
  .category-navigation__heading {
    text-transform: uppercase;
    margin: 15px 0 10px 0; }
  .category-navigation__heading-link {
    font-size: 12px;
    letter-spacing: 0.4px;
    line-height: 18px;
    color: #6d6d6d; }
    .category-navigation__heading-link:hover {
      text-decoration: none;
      color: #313131; }
  .category-navigation__item-link {
    color: #6d6d6d;
    line-height: 22.5px;
    margin-left: 20px; }
    .category-navigation__item-link:hover, .category-navigation__item-link.active {
      color: #313131;
      text-decoration: none; }
      .category-navigation__item-link:hover::before, .category-navigation__item-link.active::before {
        position: absolute;
        left: 0;
        top: 15px;
        content: ' ';
        display: block;
        background: #313131;
        height: 2px;
        width: 10px;
        border-radius: 2px;
        opacity: 1;
        transition: 250ms ease-in-out; }
  .category-navigation__list {
    list-style-type: none; }
    .category-navigation__list .category-navigation__list {
      margin-left: 20px; }
  .category-navigation__item {
    position: relative;
    padding: 4px 0;
    max-width: 290px; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.catalog-heading {
  color: #313131;
  font-family: "Klein-Medium-Condensed", Klein-Medium, Calibri, sans-serif;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: normal;
  letter-spacing: 0.72px;
  line-height: 23px;
  margin: 10px 10px 0; }
  .catalog-heading__back {
    border: solid black;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 4px;
    transform: rotate(135deg);
    margin: 0 10px 2px 0; }
  @media (min-width: 741px) {
    .catalog-heading {
      padding-left: 25px;
      font-size: 23px;
      letter-spacing: 0.6px;
      line-height: 23px;
      min-height: 23px;
      margin: 25px 0 0;
      display: flex;
      justify-content: space-between;
      align-items: baseline; } }
  @media (min-width: 1025px) {
    .catalog-heading {
      font-size: 23px;
      letter-spacing: 0.6px;
      line-height: 23px;
      margin: 0; } }

@media (min-width: 741px) {
  .app--tablet .catalog__count,
  .app--desktop .catalog__count {
    font-size: 12px;
    color: #9E9E9E;
    white-space: nowrap; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.active-facets {
  display: flex;
  justify-content: flex-start;
  padding: 22px 0px 0px 20px;
  flex-wrap: wrap; }
  .active-facets__button {
    padding: 0 30px 0 15px;
    margin: 0 5px 10px 5px;
    position: relative;
    width: auto;
    font-size: 12px;
    letter-spacing: 0.4px;
    line-height: 18px; }
    .active-facets__button-close {
      display: inline-block;
      position: absolute;
      height: 13px;
      width: 13px;
      right: 7px;
      top: 8px; }
      .active-facets__button-close:after, .active-facets__button-close:before {
        content: '';
        display: block;
        height: 100%;
        width: 1px;
        position: absolute;
        background-color: #313131;
        right: 7px;
        top: 0px;
        transition-duration: 0.3s;
        transition-property: background-color;
        transition-timing-function: ease-in-out; }
      .active-facets__button-close:after {
        transform: rotate(45deg); }
      .active-facets__button-close:before {
        transform: rotate(-45deg); }
    .active-facets__button:hover .active-facets__button-close:after, .active-facets__button:hover .active-facets__button-close:before {
      background-color: #ffffff; }
    .active-facets__button .price_min::after {
      margin: 5px;
      content: '-'; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.product-list {
  position: relative;
  padding: 0; }
  .product-list__items {
    position: relative;
    padding: 0;
    display: flex;
    flex-wrap: wrap; }
  .product-list__item {
    width: 50%;
    height: auto;
    overflow: hidden;
    padding: 0;
    margin: 0 0 15px 0;
    position: relative;
    box-sizing: border-box; }
    .product-list__item:nth-child(odd) {
      padding-right: 5px; }
    .product-list__item:nth-child(even) {
      padding-left: 5px; }

.product-image__plp, .product-image--plp-error {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0; }

@media (min-width: 741px) {
  .app--tablet .product-list,
  .app--desktop .product-list {
    padding: 10px 0 0; }
    .app--tablet .product-list__item,
    .app--desktop .product-list__item {
      padding: 0 0 0 25px;
      overflow: hidden;
      margin-bottom: 30px; }
    .app--tablet .product-list__items,
    .app--desktop .product-list__items {
      padding: 0; } }

@media (min-width: 1025px) {
  .app--tablet .product-list,
  .app--desktop .product-list {
    padding: 20px 0 0; }
    .app--tablet .product-list__item,
    .app--desktop .product-list__item {
      width: 33.3333%; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.product-tile {
  overflow: hidden; }
  .product-tile__product-link {
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    text-decoration: none; }
    .product-tile__product-link:hover, .product-tile__product-link:focus, .product-tile__product-link:active {
      text-decoration: none;
      outline: none; }
  .product-tile__details {
    order: 2;
    height: 65px;
    max-height: 65px;
    overflow: hidden;
    padding: 8px 0 0 10px;
    z-index: 2;
    position: relative; }
  .product-tile__imagery {
    position: relative;
    width: 100%;
    padding-top: calc(100% * 1.09);
    overflow: hidden;
    text-align: center;
    order: 1;
    background-color: #f4f4f4;
    outline: none;
    z-index: 1; }
    @media screen and (-moz-images-in-menus: 0) {
      .product-tile__imagery {
        min-height: calc(((100vw)*0.80)*0.3); } }
  .product-tile__name {
    display: block;
    font-size: 0.92em;
    line-height: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    color: #6d6d6d;
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: normal; }
  .product-tile__footer {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-top: 0px;
    color: #9E9E9E; }
  .product-tile__colours {
    font-size: 11px;
    letter-spacing: 0.4px;
    line-height: 16px;
    color: #9E9E9E;
    display: block;
    padding-top: 10px; }
  .product-tile__price {
    display: block; }
    .product-tile__price .price-display {
      font-size: 11px; }
  .product-tile__loading {
    display: none;
    height: 3px;
    position: absolute;
    width: 45px;
    background-color: #313131;
    transition: all .01s;
    top: 0; }
  .product-tile.\--loading .product-tile__loading {
    display: block;
    animation: loadingLine 2s infinite; }

@media (min-width: 741px) {
  .product-tile__imagery {
    padding-top: calc(100% * 1.09); }
  .product-tile__details {
    position: relative;
    height: 75px;
    max-height: 75px;
    overflow: visible;
    padding: 0; }
  .product-tile__header {
    flex-direction: column;
    padding: 6px 0 0 20px; }
  .product-tile__brand {
    font-size: 1em;
    line-height: 15px;
    min-height: 12px;
    max-height: 12px;
    letter-spacing: 1.5px; }
    .product-tile__brand:before {
      width: 25px;
      height: 10px;
      background-size: 25px 10px;
      top: 1px; }
  .product-tile__price {
    padding: 2px 0 5px; }
    .product-tile__price .price-display {
      font-size: 13px;
      letter-spacing: 0.5px;
      line-height: 19px; }
  .product-tile__footer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 12px 0 0 20px; } }

@media (min-width: 1025px) {
  .product-tile__imagery {
    padding-top: calc(100% * 1.09); }
  .product-tile__price .price-display {
    font-size: 13px; }
  .product-tile__details {
    padding: 8px 0 0;
    height: 85px;
    max-height: 85px; }
  .product-tile__promotion {
    left: 20px;
    bottom: 20px;
    padding: 0 20px;
    height: 20px;
    line-height: 20px; } }

@keyframes loadingLine {
  0% {
    left: 0px;
    width: 10%; }
  25% {
    left: 50%;
    width: 40%; }
  100% {
    left: 100%;
    width: 10%; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
@media (min-width: 741px) {
  .image-list {
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    cursor: pointer; }
    .image-list__item {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      z-index: 1; }
    .image-list__item--secondary {
      opacity: 0;
      z-index: 2;
      transition: opacity 0.4s ease-in-out; }
    .image-list__item--colour {
      opacity: 0;
      z-index: 3;
      transition: opacity 0.4s ease-in-out; }
    .image-list__item--colour-active {
      opacity: 1; }
    .image-list:hover .image-list__item--secondary {
      opacity: 1; }
    .image-list--primary-error .image-list__item--secondary {
      opacity: 1; }
    .image-list--secondary-error:hover .image-list__item--secondary {
      opacity: 0; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.product-promotion {
  text-transform: uppercase;
  padding: 0 17px;
  left: 20px;
  bottom: 20px;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  display: block;
  background-color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  text-align: center;
  position: absolute;
  z-index: 100; }
  .product-promotion.\--sale {
    color: white;
    background-color: #d0021b; }

.product-carousel .product-promotion {
  left: 40px; }

@media (max-width: 740px) {
  .product-promotion {
    left: 10px;
    bottom: 10px; }
  .product-carousel .product-promotion {
    left: 10px;
    bottom: 10px; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.scroll-to-top {
  width: 40px;
  height: 40px;
  background: #000000;
  border: 1px solid #ffffff;
  opacity: 0.6;
  padding: 2px;
  color: #ffffff;
  display: block;
  text-align: center;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-size: 11px;
  z-index: 90;
  cursor: pointer;
  position: fixed;
  bottom: 10px;
  right: 10px;
  transform: translateY(50px);
  transition: transform 0.25s ease, opacity 0.25s ease;
  word-wrap: break-word;
  line-height: 14px; }
  .scroll-to-top--sticky {
    bottom: 10px;
    right: 10px;
    transform: translateY(0); }
  @media (min-width: 1025px) {
    .scroll-to-top {
      bottom: 20px;
      right: 20px;
      transform: translateY(60px); }
      .scroll-to-top--sticky {
        transform: translateY(0); }
      .scroll-to-top:hover {
        opacity: 1; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.catalog-search {
  max-width: 1366px;
  margin: 0 auto 60px auto; }
  @media (min-width: 320px) and (max-width: 740px) {
    .catalog-search {
      padding-left: 10px;
      padding-right: 10px; } }
  @media (min-width: 741px) and (max-width: 1024px) {
    .catalog-search {
      padding-left: 30px;
      padding-right: 30px; } }
  @media (min-width: 1025px) {
    .catalog-search {
      padding-left: 40px;
      padding-right: 40px; } }
  .catalog-search__head {
    font-weight: normal;
    font-size: 23px;
    letter-spacing: 0.6px;
    line-height: 23px;
    font-family: "Klein-Medium-Condensed", Klein-Medium, Calibri, sans-serif;
    margin-bottom: 60px;
    text-transform: uppercase; }

@media (max-width: 1024px) {
  .catalog-search {
    width: 100%;
    margin-bottom: 0; }
    .catalog-search__head {
      font-size: 18px;
      letter-spacing: 0.4px;
      margin-bottom: 0; }
    .catalog-search.\--no-results .catalog-search__head {
      margin-bottom: 40px; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.carousel {
  overflow: hidden;
  position: relative;
  height: 328px;
  width: 100%; }
  .carousel__inner {
    overflow: hidden;
    height: 328px;
    position: absolute;
    display: flex; }

@media (min-width: 741px) {
  .carousel {
    height: 500px; }
    .carousel__inner {
      height: 500px; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.product-page {
  margin: 30px auto 60px auto;
  overflow: hidden;
  max-width: 1366px;
  width: 1366px; }
  @media (min-width: 320px) and (max-width: 740px) {
    .product-page {
      padding-left: 10px;
      padding-right: 10px; } }
  @media (min-width: 741px) and (max-width: 1024px) {
    .product-page {
      padding-left: 30px;
      padding-right: 30px; } }
  @media (min-width: 1025px) {
    .product-page {
      padding-left: 40px;
      padding-right: 40px; } }
  .product-page__grid {
    margin-bottom: 100px;
    display: flex;
    justify-content: space-between;
    max-width: 1366px; }
  .product-page__main-col {
    width: 682px; }
  .product-page__side-col {
    margin: 0 161px 0 0;
    width: 375px; }
  .product-page .product__header {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap; }
  .product-page .product__brand {
    order: 1;
    font-size: 0.8em;
    line-height: 1.2;
    padding-bottom: 5px;
    letter-spacing: normal; }
  .product-page .product__name {
    order: 2;
    color: #d0021b;
    font-size: 1.6em;
    letter-spacing: 4px;
    line-height: 1.2;
    margin-bottom: 6px; }
  .product-page .product__sku {
    order: 3; }
  .product-page .product__price-container {
    font-size: 0.9em;
    margin-bottom: 20px; }
    .product-page .product__price-container .price-display {
      font-size: inherit;
      font-weight: bold;
      display: inline; }
  .product-page .product__vat-info {
    color: #969696; }
    .product-page .product__vat-info:before {
      content: ' '; }
  .product-page .add-to-bag + .pdp-shipping-banner {
    margin-top: -5px; }
  .product-page .pdp-shipping-banner + .description {
    margin-top: 30px; }
  .product-page .product-page__images .product-image__placeholder {
    position: relative;
    padding-bottom: 100%; }
    .product-page .product-page__images .product-image__placeholder-image {
      position: absolute;
      top: 50%;
      transform: translateY(-50%); }

@media (max-width: 1024px) {
  .product-page {
    width: 100%;
    margin-top: 16px; }
    .product-page__main-col {
      width: 420px; }
    .product-page__side-col {
      margin: 0;
      width: 264px; } }

@media (min-width: 769px) and (max-width: 1024px) {
  .product-page__main-col {
    width: 600px; } }

@media (min-width: 1079px) and (max-width: 1080px) {
  .product-page__main-col {
    margin-right: 20px; } }

@media (max-width: 740px) {
  .product-page {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0; }
    .product-page__grid {
      display: block;
      margin-bottom: 50px; }
    .product-page__main-col {
      width: 100%; }
    .product-page__side-col {
      width: auto;
      margin: 0; }
      .product-page__side-col > .add-to-bag {
        margin-left: 10px;
        margin-right: 10px; } }

.app--tablet .product-page {
  margin: 30px auto 10px auto; }
  .app--tablet .product-page__grid {
    margin: 0; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.breadcrumb {
  position: relative;
  padding: 0;
  list-style: none; }
  .breadcrumb__item {
    list-style: none;
    text-transform: capitalize; }
  .breadcrumb__link {
    position: relative;
    color: #9E9E9E; }
    .breadcrumb__link:hover {
      text-decoration: none; }
  .breadcrumb__last-item {
    text-transform: capitalize;
    color: #9E9E9E; }

@media (max-width: 740px) {
  .breadcrumb {
    background: rgba(0, 0, 0, 0.37);
    font-weight: bold; }
    .breadcrumb__link {
      height: 40px;
      list-style-type: none;
      display: flex;
      justify-content: center;
      align-items: center; }
      .breadcrumb__link:before, .breadcrumb__link:after {
        content: '';
        width: 3px;
        height: 15px;
        position: absolute;
        left: 15px; }
      .breadcrumb__link:before {
        top: 8px;
        transform: rotate(45deg); }
      .breadcrumb__link:after {
        bottom: 8px;
        transform: rotate(135deg); } }

@media (min-width: 741px) {
  .breadcrumb {
    padding: 10px 30px;
    font-size: 10px;
    display: flex; }
    .breadcrumb__item {
      display: inline-block;
      list-style-type: none; }
      .breadcrumb__item:after {
        content: "-";
        padding: 0px 5px; }
      .breadcrumb__item:last-child:after {
        content: "";
        padding: 0; }
    .breadcrumb__item, .breadcrumb__link, .breadcrumb__link:hover {
      text-decoration: none; }
    .breadcrumb--pdp {
      padding: 10px 0; } }

@media (min-width: 1025px) {
  .breadcrumb {
    padding-left: 40px;
    padding-right: 40px; }
    .breadcrumb--pdp {
      padding: 10px 0; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.product-carousel {
  width: 600px;
  overflow: hidden;
  height: 654px;
  display: block;
  position: relative; }
  .product-carousel__inner {
    overflow: hidden;
    height: 654px;
    position: absolute;
    display: flex; }
  .product-carousel__image {
    width: 600px;
    flex-shrink: 0; }
  .product-carousel__arrow {
    position: absolute;
    display: block;
    top: 305px;
    width: 30px;
    height: 30px;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s; }
    .product-carousel__arrow:before, .product-carousel__arrow:after {
      content: "";
      width: 2px;
      height: 13px;
      display: block;
      background-color: #313131;
      z-index: 2;
      position: relative;
      left: 13px; }
    .product-carousel__arrow:before {
      transform: rotate(36deg);
      position: relative;
      top: 3px; }
    .product-carousel__arrow:after {
      transform: rotate(-36deg); }
    .product-carousel__arrow.\--prev {
      left: 9px; }
    .product-carousel__arrow.\--next {
      right: 10px;
      transform: rotate(180deg); }
  .product-carousel__dots {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 2; }
    .product-carousel__dots__dot {
      display: inline-block;
      width: 8px;
      height: 3px;
      transition: background-color .3s;
      background-color: #D8D8D8;
      margin-right: 4px; }
      .product-carousel__dots__dot.\--current {
        background-color: #313131; }
  .product-carousel__tooltip {
    position: absolute;
    pointer-events: none;
    width: 50px;
    display: none; }
  .product-carousel__promotion {
    display: block;
    background: white;
    height: 20px;
    line-height: 20px;
    text-transform: uppercase;
    text-align: center;
    padding: 0 20px;
    position: absolute;
    left: 40px;
    bottom: 20px; }
    .product-carousel__promotion.\--sale {
      color: white;
      background-color: #d0021b; }
  .product-carousel:hover .product-carousel__tooltip {
    display: block; }
  .product-carousel:hover .product-carousel__arrow {
    opacity: 1; }

@media (max-width: 1024px) {
  .product-carousel {
    width: 411px;
    height: calc(411px * 1.089); }
    .product-carousel__inner {
      height: calc(411px * 1.089); }
    .product-carousel__image {
      width: 411px; }
    .product-carousel__arrow {
      top: 198px; } }

@media (min-width: 1023px) and (max-width: 1024px) {
  .product-carousel {
    width: 600px;
    height: 654px; }
    .product-carousel__inner {
      height: 654px; }
    .product-carousel__image {
      width: 600px; }
    .product-carousel__arrow {
      top: 305px; } }

@media (max-width: 740px) {
  .product-carousel {
    max-height: calc(100vw * 1.089);
    width: 100vw;
    height: 0;
    padding-bottom: calc(100vw * 1.089); }
    .product-carousel__inner {
      height: calc(100vw * 1.089); }
    .product-carousel__arrow {
      display: none; }
    .product-carousel__dots {
      top: 0;
      right: 10px; }
    .product-carousel__promotion {
      left: 10px;
      bottom: 10px; }
    .product-carousel.\--prev {
      left: 0; }
    .product-carousel.\--next {
      right: 0; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.product-zoom {
  position: relative;
  height: 100%; }
  .product-zoom__container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    cursor: -webkit-image-set(url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAABnElEQVR4AWJwL/AhCpuYmMgCei1jnIaBIIoK0dBwFIokXUQUiTpukHIFQk1By3IAaqSkDw10SZXcIVwjLiMqQDL/SWPJOMnIXrCLL9uzM//v7K5np9PpJMJECPZMsFflcAf7/f65Eb8LqbAQpmab2ndq4wH/2mJZlp0o+F7Ydrvd516vd4ntmC/j+OFPHLZKYuPx+FSBr8JaJBfYqgJ/4ogfDodnrhgOmtlO+Ea0jlBpsi/wlDl+LYec3uQ05/uvYMJkCO+emO3RyskoJsM1vLmteOq27h5FAD5481OaZxU4TTWWKKvqa6c0FMU2Mg6aEOO34D/kPa8MKRvZhBi88KNDmiN9LBloQgxYpUkQu9HLzFnzK43flZAdsN06YlNhwksAjuO1BJ+KQOyA7dHhCMDPLHYZncwSYdHGnrV6Gtv9z2IqiHwfoitIq7Wxzapfvs8+/0OMC/TofZbPRmIfwjw2Q+P4Enbl1mDPGQfLcBXTgxBHPKJR3ZUw8Lorxp3uqnbfuCn0jTOz8VyafRPZN/odsdXSwFMY1emIfwAI7BeeYkZdGwAAAABJRU5ErkJggg==) 1x, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAMAAAC7m5rvAAAAllBMVEVHcEw3NzcyMjIxMTEyMjIxMTExMTExMTE2NjYxMTExMTExMTEzMzMxMTExMTEyMjIyMjIxMTExMTE1NTVVVVUxMTExMTExMTExMTEzMzMzMzM/Pz8xMTExMTEyMjI6Ojo2NjYxMTExMTEyMjIzMzM1NTUxMTExMTExMTEzMzMxMTExMTEyMjI/Pz82NjYxMTE4ODg5OTnPy4WVAAAAMnRSTlMAJWaVvN7s+S+M4v82wPaxcEgkEwa/qu6fUAoE+vWDDQ6+/JkZK93kNEXyyKMIKtUbFl9s1RoAAAF5SURBVHgB1da1oiJBEEDR2/C8JsHdx7D//5d1zzZaV9wZ6e7Vd/KLU1XYUURQa8zWtLKbZXBoEX5Oyxz1E7JHz/YD7j69J0G+LFKp1uocqNeqFZFynjiN26a02h3OdNstad42iFToSX/gEskd9KVXIILnSxASKwzE9zgzHMnYJYE7ltHw7LlGMpmSaDqR0cnzFXyZkGoifoEDjZ6Mp6SajqXXYO9WAhcNbiC37OSb/RAtYb+ZZ6ssAzQNpMyGIy0XTW5LHNZK0iaCCBHaUgIycPPRUWjLOB9vVplCPUfbM4XaZhjYZEplzbKsUssM9QYDbxSbDCN/P7s4zZTPxisCNr4+Tcumj2EfbricZSfeemw8xEuY3VdSIJIIkQpyRYYZM4wsgnuU1TFQ3zzPndRMPsma3EFm/aSGr3GTddDWWWUJIwgSRxCfmOkPvBmf7MerxTC3XB32i8p+LdovYfuVb3tg2J4zCcdTZ3M82Z9q9oeh/RlqdfTamwPcl3K8NpbWZQAAAABJRU5ErkJggg==) 2x), pointer;
    cursor: image-set("../../icons/zoom.png?url" 1x, "../../icons/zoomx2.png?url" 2x), pointer; }
    .product-zoom__container img {
      position: absolute;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none; }

@media (max-width: 1024px) {
  .app--tablet .product-zoom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3001; }
    .app--tablet .product-zoom__close {
      width: 20px;
      height: 20px;
      display: block;
      position: absolute;
      top: 10px;
      left: 20px;
      width: 44px;
      height: 44px;
      z-index: 10; }
      .app--tablet .product-zoom__close:before, .app--tablet .product-zoom__close:after {
        content: "";
        width: 1px;
        height: 16px;
        background-color: black;
        position: absolute;
        top: 0;
        left: 10px; }
      .app--tablet .product-zoom__close:before {
        transform: rotate(45deg); }
      .app--tablet .product-zoom__close:after {
        transform: rotate(-45deg); }
      .app--tablet .product-zoom__close:before, .app--tablet .product-zoom__close:after {
        height: 40px; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.product-name-and-price {
  display: flex;
  justify-content: space-between;
  margin-top: 35px; }
  .product-name-and-price__name {
    text-transform: uppercase;
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: 0.5px;
    width: 65%; }
    @media (min-width: 1025px) {
      .product-name-and-price__name {
        font-family: "Klein-Medium", Calibri, sans-serif;
        font-size: 13px;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: 0.5px; } }
  .product-name-and-price__price-container {
    margin-top: 1px;
    width: 34%;
    text-align: right; }
  .product-name-and-price .price-display__was, .product-name-and-price .price-display__selling {
    display: inline-block; }

@media (max-width: 1024px) {
  .product-name-and-price {
    margin-top: 0; } }

@media (max-width: 740px) {
  .product-name-and-price {
    margin: 11px 10px 0 10px; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.attribute-selectors {
  margin-top: 18px; }
  .attribute-selectors__low-stock {
    display: block;
    font-size: 1em;
    color: #969696; }
  .attribute-selectors__size-guide-link {
    margin-top: 20px;
    float: right;
    margin: 15px 0 13px 0;
    text-decoration: underline;
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0.5; }
    @media (min-width: 1025px) {
      .attribute-selectors__size-guide-link {
        font-family: "Klein-Medium", Calibri, sans-serif;
        font-size: 12px;
        font-weight: normal;
        line-height: 18px;
        letter-spacing: 0.4px; } }
  .attribute-selectors__size-trigger {
    cursor: pointer;
    clear: both;
    border: 1px solid #6d6d6d;
    padding: 10px;
    font-size: 12px;
    color: #6d6d6d;
    letter-spacing: 0.4;
    position: relative; }
    .attribute-selectors__size-trigger:after {
      content: "";
      border: solid #6d6d6d;
      border-width: 0 1px 1px 0;
      display: inline-block;
      padding: 4px;
      transform: rotate(-45deg) translate(0, -50%);
      position: absolute;
      right: 12px;
      top: 50%; }

.attribute-selector {
  display: block;
  margin-bottom: 10px; }
  .attribute-selector__selectors {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px 5px -5px; }
  .attribute-selector__button {
    flex: 0 0 67px;
    display: block;
    height: 67px;
    padding: 0;
    margin: 6px 5px;
    position: relative;
    cursor: pointer; }
    .attribute-selector__button .product-image {
      display: flex;
      position: relative;
      max-width: 100%;
      max-height: 100%;
      height: 100%;
      width: 100%;
      overflow: hidden;
      z-index: 1; }
    .attribute-selector__button--active:before {
      content: "";
      width: 100%;
      opacity: 0.2;
      background: black;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 5; }
    .attribute-selector__button:hover, .attribute-selector__button:focus, .attribute-selector__button:active {
      border-color: #969696; }
    .attribute-selector__button--btn-min {
      min-width: 12%; }
  .attribute-selector__button--disabled {
    border-color: #e4e4e4;
    color: #e4e4e4;
    position: relative;
    cursor: default; }
    .attribute-selector__button--disabled span {
      position: relative;
      z-index: 2; }
    .attribute-selector__button--disabled:hover {
      border-color: #e4e4e4; }
    .attribute-selector__button--disabled:before {
      content: " ";
      display: block;
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(to bottom right, #ffffff, #ffffff 49%, #e4e4e4 50%, #e4e4e4 51%, #ffffff 51%, #ffffff);
      cursor: default; }
  .attribute-selector .attribute-selector__button.attribute-selector__button--active {
    border-color: #00174f;
    color: #00174f; }
  .attribute-selector__heading {
    margin-bottom: 4px;
    display: block;
    color: #6d6d6d;
    text-transform: uppercase;
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 10px;
    font-weight: normal;
    line-height: 18px;
    letter-spacing: 0.35px; }

@media (max-width: 1024px) {
  .attribute-selectors {
    margin-top: 21px; }
  .attribute-selector__button {
    margin: 5px 4px;
    flex: 0 0 60px;
    height: 60px; } }

@media (max-width: 740px) {
  .attribute-selectors {
    margin: 19px 0 0 0; }
    .attribute-selectors__size-trigger {
      padding: 16px 10px;
      display: none; }
      .attribute-selectors__size-trigger:after {
        margin-top: -3px;
        transform: rotate(45deg) translate(0, -50%); }
  .attribute-selector__heading {
    margin-left: 10px; }
  .attribute-selector__button {
    margin: 2px 6px;
    flex: 0 0 65px;
    height: 65px; }
  .attribute-selector__selectors {
    padding-left: 10px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    list-style: none;
    width: 100%;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.pdp-shipping-banner {
  display: block;
  color: #6d6d6d;
  text-align: center;
  text-transform: uppercase;
  font-family: "Klein-Medium", Calibri, sans-serif;
  font-size: 11px;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 0.4; }
  @media (min-width: 741px) {
    .pdp-shipping-banner {
      font-family: "Klein-Medium", Calibri, sans-serif;
      font-size: 10px;
      font-weight: normal;
      line-height: 18px;
      letter-spacing: 0.35px; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.description {
  margin-top: 40px; }
  .description__tab {
    border-bottom: 1px solid #e4e4e4; }
    .description__tab.\--opened .description__content {
      max-height: 1000px; }
    .description__tab.\--opened .description__trigger:before {
      display: none; }
  .description__parent-url {
    margin-bottom: 10px; }
    .description__parent-url a {
      color: #313131;
      text-decoration: underline; }
    .description__parent-url__category {
      text-transform: capitalize; }
  .description__content {
    padding-top: 16px;
    box-sizing: border-box;
    max-height: 0;
    overflow: hidden;
    transition: all .3s ease-in-out;
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0.5;
    color: #6d6d6d; }
    @media (min-width: 1025px) {
      .description__content {
        font-family: "Klein-Medium", Calibri, sans-serif;
        font-size: 12px;
        font-weight: normal;
        line-height: 18px;
        letter-spacing: 0.4px; } }
  .description__trigger {
    position: relative;
    text-transform: uppercase;
    cursor: pointer;
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: 0.5px; }
    @media (min-width: 1025px) {
      .description__trigger {
        font-family: "Klein-Medium", Calibri, sans-serif;
        font-size: 13px;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: 0.5px; } }
    .description__trigger:after, .description__trigger:before {
      content: "";
      position: absolute;
      right: 1px;
      top: 9px;
      width: 10px;
      height: 1px;
      background: #313131;
      display: block; }
    .description__trigger:before {
      transform: rotate(90deg); }
  .description__style {
    margin-top: 10px; }

@media (max-width: 740px) {
  .description {
    margin-left: 10px;
    margin-right: 10px; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.benefit {
  display: flex;
  margin-bottom: 30px; }
  .benefit:last-child {
    margin-bottom: 10px; }
  .benefit__icon {
    margin-right: 20px; }
    .benefit__icon > span {
      display: block;
      width: 40px;
      height: 40px; }
    .benefit__icon .anti-static {
      background: url("data:image/svg+xml;base64, PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICAgICAgICAgICAgdmlld0JveD0iMCAwIDE5Ljg0IDE5Ljg0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxOS44NCAxOS44NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIHBvaW50cz0iMTEuMzYzLDMuMTE4IDguNDU3LDcuMjcyIDkuMDU0LDcuODY5IAkiLz4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIHBvaW50cz0iMTIuODcxLDkuMDU3IDEyLjg2LDkuMDU3IDEwLjI2Miw5LjA1NyAxMS4wNjYsOS44MTkgMTAuNDY0LDExLjA1OCA4LjAwNSwxNi4wMTcgMTEuMDY1LDExLjY2IDExLjY1MiwxMC44MjQgCiAgICAgICAgICAgICAgICAgICAgMTIuODgzLDkuMDU3IAkiLz4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIHBvaW50cz0iOC4yODUsOS4yMzQgOC4yNTQsOS4yMDQgNy41NzMsOC41MjIgNi40ODIsMTAuMDc4IDYuNTA2LDEwLjA3OCA5LjEyOCwxMC4wNzggCSIvPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTkuOTIsMS4zNjdjLTQuNzI0LDAtOC41NTMsMy44MjktOC41NTMsOC41NTNjMCw0LjcyNCwzLjgyOSw4LjU1Myw4LjU1Myw4LjU1M2M0LjcyNCwwLDguNTUzLTMuODI5LDguNTUzLTguNTUzCiAgICAgICAgICAgICAgICAgICAgQzE4LjQ3Myw1LjE5NiwxNC42NDMsMS4zNjcsOS45MiwxLjM2NyBNMTUuNjUsMTQuODIzbC0zLjgxNy0zLjgxNGwtMC41ODcsMC44MzVsMy43MDEsMy42OThjLTEuMzM2LDEuMTk2LTMuMDk4LDEuOTI1LTUuMDI3LDEuOTI1CiAgICAgICAgICAgICAgICAgICAgYy00LjE2MiwwLTcuNTQ3LTMuMzg2LTcuNTQ3LTcuNTQ4YzAtMS45MywwLjcyOS0zLjY5MiwxLjkyNS01LjAyN2wzLjQyMSwzLjQyMmwwLjcxMiwwLjcxMmwwLjAzMSwwLjAzMWwxLjAyMSwxLjAyMWwwLjc1NCwwLjc1CiAgICAgICAgICAgICAgICAgICAgbDAuMzcyLTAuNjQ1bDAuMTQtMC4yNjZMOS44ODUsOS4wNTdMOC45MDMsOC4wNzVMOC4zMDYsNy40NzhMNS4wMTcsNC4xODljMS4zMi0xLjEzMSwzLjAzMi0xLjgxNiw0LjkwMy0xLjgxNgogICAgICAgICAgICAgICAgICAgIGM0LjE2MiwwLDcuNTQ3LDMuMzg1LDcuNTQ3LDcuNTQ3QzE3LjQ2NywxMS43OTEsMTYuNzgxLDEzLjUwMiwxNS42NSwxNC44MjMiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvc3ZnPg=="); }
    .benefit__icon .breathe {
      background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICAgICAgICB2aWV3Qm94PSIwIDAgMTkuODQgMTkuODQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE5Ljg0IDE5Ljg0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgICAgIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+CiAgICAgICAgICAgICAgICAuc3Qwe2ZpbGw6I0ZGRkZGRjt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE4LjUxMSw5LjkyYzAsNC43NDQtMy44NDgsOC41OTItOC41OTIsOC41OTJjLTQuNzQ1LDAtOC41OTEtMy44NDgtOC41OTEtOC41OTJjMC00Ljc0NSwzLjg0Ni04LjU5MSw4LjU5MS04LjU5MQogICAgICAgICAgICAgICAgICAgIEMxNC42NjQsMS4zMjgsMTguNTExLDUuMTc1LDE4LjUxMSw5LjkyIi8+CiAgICAgICAgICAgICAgICA8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjcuODQyLDQuODk5IDcuODQyLDQuODk5IDYuMzgyLDYuMzgxIDkuNDE0LDYuMzgxIAkiLz4KICAgICAgICAgICAgICAgIDxyZWN0IHg9IjkuNDE0IiB5PSI5LjM5NiIgY2xhc3M9InN0MCIgd2lkdGg9IjEuMDExIiBoZWlnaHQ9IjEuMDExIi8+CiAgICAgICAgICAgICAgICA8cmVjdCB4PSIxMy40NTciIHk9IjkuMzk2IiBjbGFzcz0ic3QwIiB3aWR0aD0iMi4wMDMiIGhlaWdodD0iMS4wMTEiLz4KICAgICAgICAgICAgICAgIDxyZWN0IHg9IjQuMzQxIiB5PSI5LjM5NiIgY2xhc3M9InN0MCIgd2lkdGg9IjIuMDQxIiBoZWlnaHQ9IjEuMDExIi8+CiAgICAgICAgICAgICAgICA8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjExLjg4NCw0Ljg5OSAxMS44ODQsNC44OTkgMTAuNDI1LDYuMzgxIDEzLjQ1Nyw2LjM4MSAJIi8+CiAgICAgICAgICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOC40MDQsNy44OThjMCwwLjI3OS0wLjIyNywwLjUwNi0wLjUwNiwwLjUwNmMtMC4yNzgsMC0wLjUwNS0wLjIyNy0wLjUwNS0wLjUwNgogICAgICAgICAgICAgICAgICAgIGMwLTAuMjc5LDAuMjI3LTAuNTA2LDAuNTA1LTAuNTA2QzguMTc3LDcuMzkyLDguNDA0LDcuNjE4LDguNDA0LDcuODk4Ii8+CiAgICAgICAgICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOC40MDQsOS45MmMwLDAuMjc5LTAuMjI3LDAuNTA0LTAuNTA2LDAuNTA0Yy0wLjI3OCwwLTAuNTA1LTAuMjI1LTAuNTA1LTAuNTA0CiAgICAgICAgICAgICAgICAgICAgYzAtMC4yOCwwLjIyNy0wLjUwNSwwLjUwNS0wLjUwNUM4LjE3Nyw5LjQxNSw4LjQwNCw5LjYzOSw4LjQwNCw5LjkyIi8+CiAgICAgICAgICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOC40MDQsMTEuOTQxYzAsMC4yOC0wLjIyNywwLjUwNi0wLjUwNiwwLjUwNmMtMC4yNzgsMC0wLjUwNS0wLjIyNi0wLjUwNS0wLjUwNgogICAgICAgICAgICAgICAgICAgIGMwLTAuMjc5LDAuMjI3LTAuNTA2LDAuNTA1LTAuNTA2QzguMTc3LDExLjQzNCw4LjQwNCwxMS42NjEsOC40MDQsMTEuOTQxIi8+CiAgICAgICAgICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOC40MDQsMTMuOTYzYzAsMC4yNzgtMC4yMjcsMC41MDQtMC41MDYsMC41MDRjLTAuMjc4LDAtMC41MDUtMC4yMjYtMC41MDUtMC41MDQKICAgICAgICAgICAgICAgICAgICBjMC0wLjI3OCwwLjIyNy0wLjUwNSwwLjUwNS0wLjUwNUM4LjE3NywxMy40NTgsOC40MDQsMTMuNjg0LDguNDA0LDEzLjk2MyIvPgogICAgICAgICAgICAgICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTEyLjQ0Nyw3Ljg5OGMwLDAuMjc5LTAuMjI2LDAuNTA2LTAuNTA2LDAuNTA2Yy0wLjI3OCwwLTAuNTA0LTAuMjI3LTAuNTA0LTAuNTA2CiAgICAgICAgICAgICAgICAgICAgYzAtMC4yNzksMC4yMjYtMC41MDYsMC41MDQtMC41MDZDMTIuMjIxLDcuMzkyLDEyLjQ0Nyw3LjYxOCwxMi40NDcsNy44OTgiLz4KICAgICAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMi40NDcsOS45MmMwLDAuMjc5LTAuMjI2LDAuNTA0LTAuNTA2LDAuNTA0Yy0wLjI3OCwwLTAuNTA0LTAuMjI1LTAuNTA0LTAuNTA0CiAgICAgICAgICAgICAgICAgICAgYzAtMC4yOCwwLjIyNi0wLjUwNSwwLjUwNC0wLjUwNUMxMi4yMjEsOS40MTUsMTIuNDQ3LDkuNjM5LDEyLjQ0Nyw5LjkyIi8+CiAgICAgICAgICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTIuNDQ3LDExLjk0MWMwLDAuMjgtMC4yMjYsMC41MDYtMC41MDYsMC41MDZjLTAuMjc4LDAtMC41MDQtMC4yMjYtMC41MDQtMC41MDYKICAgICAgICAgICAgICAgICAgICBjMC0wLjI3OSwwLjIyNi0wLjUwNiwwLjUwNC0wLjUwNkMxMi4yMjEsMTEuNDM0LDEyLjQ0NywxMS42NjEsMTIuNDQ3LDExLjk0MSIvPgogICAgICAgICAgICAgICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTEyLjQ0NywxMy45NjNjMCwwLjI3OC0wLjIyNiwwLjUwNC0wLjUwNiwwLjUwNGMtMC4yNzgsMC0wLjUwNC0wLjIyNi0wLjUwNC0wLjUwNAogICAgICAgICAgICAgICAgICAgIGMwLTAuMjc4LDAuMjI2LTAuNTA1LDAuNTA0LTAuNTA1QzEyLjIyMSwxMy40NTgsMTIuNDQ3LDEzLjY4NCwxMi40NDcsMTMuOTYzIi8+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L3N2Zz4="); }
    .benefit__icon .compress {
      background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICAgICAgICB2aWV3Qm94PSIwIDAgMTkuODQgMTkuODQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE5Ljg0IDE5Ljg0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgICAgIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+CiAgICAgICAgICAgIC5zdDB7ZmlsbDojRkZGRkZGO30KICAgICAgICAgICAgPC9zdHlsZT4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTguNTExLDkuOTJjMCw0Ljc0My0zLjg0OCw4LjU5LTguNTkxLDguNTljLTQuNzQ1LDAtOC41OS0zLjg0Ny04LjU5LTguNTljMC00Ljc0NCwzLjg0Ni04LjU5MSw4LjU5LTguNTkxCiAgICAgICAgICAgICAgICAgICAgQzE0LjY2MywxLjMyOSwxOC41MTEsNS4xNzYsMTguNTExLDkuOTIiLz4KICAgICAgICAgICAgICAgIDxyZWN0IHg9IjUuNDg0IiB5PSIxMC44NzUiIGNsYXNzPSJzdDAiIHdpZHRoPSI5LjA5NiIgaGVpZ2h0PSIxLjAxMSIvPgogICAgICAgICAgICAgICAgPHJlY3QgeD0iNS40ODQiIHk9IjguMjkyIiBjbGFzcz0ic3QwIiB3aWR0aD0iOS4wOTYiIGhlaWdodD0iMS4wMTEiLz4KICAgICAgICAgICAgICAgIDxyZWN0IHg9IjkuNDc4IiB5PSIxNC4yOCIgY2xhc3M9InN0MCIgd2lkdGg9IjEuMDExIiBoZWlnaHQ9IjAuNjM3Ii8+CiAgICAgICAgICAgICAgICA8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjEwLjAzMiwxMi42MzUgMTAuMDMyLDEyLjYzNSA4LjMyNSwxNC4zNDEgMTEuNzM5LDE0LjM0MSAJIi8+CiAgICAgICAgICAgICAgICA8cmVjdCB4PSI5LjU3NiIgeT0iNS4yNiIgY2xhc3M9InN0MCIgd2lkdGg9IjEuMDExIiBoZWlnaHQ9IjAuNjM2Ii8+CiAgICAgICAgICAgICAgICA8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjEwLjAzMiw3LjU0MyAxMC4wMzIsNy41NDMgMTEuNzM5LDUuODM1IDguMzI1LDUuODM1IAkiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvc3ZnPg=="); }
    .benefit__icon .coolcoretechnology {
      background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICAgICAgICB2aWV3Qm94PSIwIDAgMTkuODQgMTkuODQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE5Ljg0IDE5Ljg0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTYuNjI3LDkuNTc1YzAsMC0wLjA2NiwwLjA1OS0wLjE0LDAuMTk1Yy0wLjA3NCwwLjEzNi0wLjA5NiwwLjI1LTAuMDk2LDAuMjVjLTAuMDA1LTAuMDA4LTAuMDEtMC4wMTctMC4wMTYtMC4wMjUKICAgICAgICAgICAgICAgICAgICBjLTAuMTEtMC4xNjItMC4yOTUtMC4yNjktMC41MDctMC4yNjljLTAuMzM4LDAtMC42MTEsMC4yNzQtMC42MTEsMC42MTFjMCwwLjMzOCwwLjI3NCwwLjYxMiwwLjYxMSwwLjYxMgogICAgICAgICAgICAgICAgICAgIGMwLjI4MSwwLDAuNTE3LTAuMTg5LDAuNTg5LTAuNDQ2YzAuMDA5LTAuMDMzLDAuMDYyLTAuMjQ0LDAuMDY1LTAuMjc2YzAuMDU1LTAuNTQyLDAuNTEzLTAuOTY2LDEuMDY5LTAuOTY2CiAgICAgICAgICAgICAgICAgICAgYzAuNTk0LDAsMS4wNzUsMC40ODEsMS4wNzUsMS4wNzVjMCwwLjU5My0wLjQ4MSwxLjA3NS0xLjA3NSwxLjA3NWMtMC4yOSwwLTAuNTU0LTAuMTE1LTAuNzQ3LTAuMzAybC0wLjAxMy0wLjAxNAogICAgICAgICAgICAgICAgICAgIGMwLDAsMC4wNjYtMC4wNTksMC4xNC0wLjE5NWMwLjA3NC0wLjEzNiwwLjA5Ni0wLjI1LDAuMDk2LTAuMjVsMC4wMTEsMC4wMmMwLjEwOSwwLjE2OCwwLjI5OCwwLjI3OSwwLjUxMywwLjI3OQogICAgICAgICAgICAgICAgICAgIGMwLjMzOCwwLDAuNjEyLTAuMjc0LDAuNjEyLTAuNjEyYzAtMC4zMzgtMC4yNzQtMC42MTEtMC42MTItMC42MTFjLTAuMzAyLDAtMC41NTMsMC4yMTktMC42MDMsMC41MDcKICAgICAgICAgICAgICAgICAgICBjLTAuMDA1LDAuMDMxLTAuMDUzLDAuMjQ0LTAuMDU4LDAuMjc4Yy0wLjA4MywwLjUxMS0wLjUyNiwwLjkwMS0xLjA2MSwwLjkwMWMtMC41OTQsMC0xLjA3NS0wLjQ4MS0xLjA3NS0xLjA3NQogICAgICAgICAgICAgICAgICAgIGMwLTAuNTk0LDAuNDgxLTEuMDc1LDEuMDc1LTEuMDc1YzAuMjg5LDAsMC41NTEsMC4xMTQsMC43NDUsMC4zTDYuNjI3LDkuNTc1eiIvPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTguNjU2LDkuNzE2Yy0wLjA3OS0wLjExNS0wLjE0OC0wLjE4LTAuMTQ4LTAuMThDOC42OTksOS4zNjQsOC45NTEsOS4yNiw5LjIyOCw5LjI2YzAuNTkyLDAsMS4wNzIsMC40OCwxLjA3MiwxLjA3MwogICAgICAgICAgICAgICAgICAgIGMwLDAuNTkyLTAuNDgsMS4wNzItMS4wNzIsMS4wNzJjLTAuMjcxLDAtMC41MTgtMC4xLTAuNzA2LTAuMjY1YzAsMCwwLjA4My0wLjA3OCwwLjE1MS0wLjE4NWMwLjA2OC0wLjEwNywwLjEwMS0wLjIxMywwLjEwMS0wLjIxMwogICAgICAgICAgICAgICAgICAgIGMwLjExMiwwLjEyNCwwLjI3NCwwLjIwMywwLjQ1NCwwLjIwM2MwLjMzNywwLDAuNjEtMC4yNzMsMC42MS0wLjYxYzAtMC4zMzctMC4yNzMtMC42MS0wLjYxLTAuNjFjLTAuMTg1LDAtMC4zNSwwLjA4Mi0wLjQ2MiwwLjIxMgogICAgICAgICAgICAgICAgICAgIEM4Ljc2Niw5LjkzNSw4LjczNiw5LjgzMSw4LjY1Niw5LjcxNiIvPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTExLjI4MiwxMS4zOTVjLTAuNDU4LDAtMC44MzEtMC4zNzMtMC44MzEtMC44MzFWOS4yNTJoMC40ODl2MS4zMTNjMCwwLjE4OCwwLjE1MywwLjM0MiwwLjM0MiwwLjM0MgogICAgICAgICAgICAgICAgICAgIGMwLDAsMC4xNzYsMC4zNTEsMC41MTcsMC40ODlIMTEuMjgyeiIvPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTEyLjg0NCw5LjkzNWMtMC4xMTItMC4xMy0wLjI3OC0wLjIxMi0wLjQ2Mi0wLjIxMmMtMC4zMzcsMC0wLjYxLDAuMjczLTAuNjEsMC42MWMwLDAuMzM3LDAuMjczLDAuNjEsMC42MSwwLjYxCiAgICAgICAgICAgICAgICAgICAgYzAuMTgxLDAsMC4zNDMtMC4wNzgsMC40NTQtMC4yMDNjMCwwLDAuMDM5LDAuMTE3LDAuMTAxLDAuMjEzYzAuMDYxLDAuMDk2LDAuMTUxLDAuMTg1LDAuMTUxLDAuMTg1CiAgICAgICAgICAgICAgICAgICAgYy0wLjE4OSwwLjE2NS0wLjQzNiwwLjI2NS0wLjcwNiwwLjI2NWMtMC41OTIsMC0xLjA3Mi0wLjQ4LTEuMDcyLTEuMDcyYzAtMC41OTIsMC40OC0xLjA3MiwxLjA3Mi0xLjA3MgogICAgICAgICAgICAgICAgICAgIGMwLjI3NiwwLDAuNTI4LDAuMTA1LDAuNzE5LDAuMjc2YzAsMC0wLjA2NiwwLjA2OC0wLjEzLDAuMTU0QzEyLjkwNyw5Ljc3NSwxMi44NDQsOS45MzUsMTIuODQ0LDkuOTM1Ii8+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTMuOTg0LDkuNzIzYy0wLjMzNywwLTAuNjExLDAuMjczLTAuNjExLDAuNjFjMCwwLjMzNywwLjI3MywwLjYxLDAuNjExLDAuNjFjMC4zMzcsMCwwLjYxLTAuMjczLDAuNjEtMC42MQogICAgICAgICAgICAgICAgICAgIEMxNC41OTQsOS45OTcsMTQuMzIxLDkuNzIzLDEzLjk4NCw5LjcyMyBNMTUuMDU2LDEwLjMzMmMwLDAuNTkyLTAuNDgsMS4wNzItMS4wNzIsMS4wNzJjLTAuNTkyLDAtMS4wNzItMC40OC0xLjA3Mi0xLjA3MgogICAgICAgICAgICAgICAgICAgIGMwLTAuNTkyLDAuNDgtMS4wNzIsMS4wNzItMS4wNzJDMTQuNTc2LDkuMjYsMTUuMDU2LDkuNzQsMTUuMDU2LDEwLjMzMiIvPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE1LjY3NSwxMS40MDJoLTAuNTM3di0xLjIxNWMwLTAuNTEyLDAuNDE3LTAuOTI5LDAuOTI5LTAuOTI5aDAuMjk3aDAuMzkyYzAsMC0wLjQzNCwwLjE3OS0wLjU2OCwwLjUzN2gtMC4xMjEKICAgICAgICAgICAgICAgICAgICBjLTAuMjE2LDAtMC4zOTIsMC4xNzYtMC4zOTIsMC4zOTJWMTEuNDAyeiIvPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE4LjI3NywxMC42ODFjLTAuMTQ1LDAuNDItMC41NDMsMC43MjItMS4wMTMsMC43MjJjLTAuNTkxLDAtMS4wNzEtMC40OC0xLjA3MS0xLjA3MXMwLjQ3OS0xLjA3MSwxLjA3MS0xLjA3MQogICAgICAgICAgICAgICAgICAgIGMwLjU5MSwwLDEuMDcxLDAuNDc5LDEuMDcxLDEuMDcxYzAsMC4wNzgtMC4wMDgsMC4xNTQtMC4wMjQsMC4yMjdsLTAuNDgtMC4wMDJoLTEuMTMzYzAuMDg5LDAuMjI2LDAuMzA5LDAuMzg1LDAuNTY3LDAuMzg1CiAgICAgICAgICAgICAgICAgICAgYzAuMjA3LDAsMC4zOS0wLjEwMywwLjUtMC4yNjFMMTguMjc3LDEwLjY4MXogTTE3LjgzLDEwLjEwN2MtMC4wOS0wLjIyNC0wLjMwOS0wLjM4My0wLjU2Ni0wLjM4MwogICAgICAgICAgICAgICAgICAgIGMtMC4yNTcsMC0wLjQ3NywwLjE1OS0wLjU2NiwwLjM4M0wxNy44MywxMC4xMDd6Ii8+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNC41OTQsOC4yOTVsLTAuMzQ4LDBIMi45NjFjLTAuOSwwLTEuNjMzLDAuNzMzLTEuNjMzLDEuNjMzYzAsMC45MDEsMC43MzMsMS42MzMsMS42MzMsMS42MzMKICAgICAgICAgICAgICAgICAgICBjMC45MDEsMCwxLjYzMy0wLjczMiwxLjYzMy0xLjYzM1Y4LjY0M1Y4LjI5NXogTTQuMjQ2LDguNjQzdjEuMjg1YzAsMC43MDktMC41NzYsMS4yODUtMS4yODUsMS4yODUKICAgICAgICAgICAgICAgICAgICBjLTAuNzA5LDAtMS4yODUtMC41NzYtMS4yODUtMS4yODVzMC41NzYtMS4yODUsMS4yODUtMS4yODVINC4yNDZ6Ii8+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMi42NDEsOS45MjhjMCwwLjE3NiwwLjE0NCwwLjMyLDAuMzIsMC4zMnMwLjMyLTAuMTQzLDAuMzItMC4zMmgwLjI2NGMwLDAuMzIyLTAuMjYyLDAuNTg0LTAuNTg0LDAuNTg0CiAgICAgICAgICAgICAgICAgICAgYy0wLjMyMiwwLTAuNTg0LTAuMjYyLTAuNTg0LTAuNTg0YzAtMC4zMjIsMC4yNjItMC41ODQsMC41ODQtMC41ODRINC4wM3YwLjI2NEgyLjk2MUMyLjc4NSw5LjYwOCwyLjY0MSw5Ljc1MiwyLjY0MSw5LjkyOCIvPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTIuMTU2LDkuOTI4YzAsMC40NDQsMC4zNjEsMC44MDUsMC44MDUsMC44MDVjMC40NDQsMCwwLjgwNi0wLjM2MSwwLjgwNi0wLjgwNUg0LjAzYzAsMC41ODktMC40OCwxLjA3LTEuMDcsMS4wNwogICAgICAgICAgICAgICAgICAgIGMtMC41ODksMC0xLjA2OS0wLjQ4LTEuMDY5LTEuMDdjMC0wLjU5LDAuNDgtMS4wNywxLjA2OS0xLjA3aDEuMDd2MC4yNjRoLTEuMDdDMi41MTcsOS4xMjMsMi4xNTYsOS40ODQsMi4xNTYsOS45MjgiLz4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xOC4zMTEsOS4zNzd2MC4wNGgwLjA0MWMwLjAxNiwwLDAuMDIyLTAuMDA3LDAuMDIyLTAuMDJjMC0wLjAxMy0wLjAwNi0wLjAyLTAuMDIxLTAuMDJIMTguMzExeiBNMTguMzY3LDkuNTA4VjkuNDY3CiAgICAgICAgICAgICAgICAgICAgYzAtMC4wMTYtMC4wMDYtMC4wMjEtMC4wMjQtMC4wMjFoLTAuMDMydjAuMDYzaC0wLjAzNlY5LjM0N2gwLjA4MmMwLjAzMSwwLDAuMDQ5LDAuMDE5LDAuMDQ5LDAuMDQ2CiAgICAgICAgICAgICAgICAgICAgYzAsMC4wMi0wLjAwOSwwLjAzMS0wLjAyMiwwLjAzN2MwLjAxMywwLjAwNiwwLjAxOCwwLjAxMywwLjAxOCwwLjAzMnYwLjA0NkgxOC4zNjd6IE0xOC4zMzUsOS4yODkKICAgICAgICAgICAgICAgICAgICBjLTAuMDgyLDAtMC4xNDgsMC4wNjYtMC4xNDgsMC4xNDdjMCwwLjA4MSwwLjA2NywwLjE0NywwLjE0OCwwLjE0N2MwLjA4MSwwLDAuMTQ3LTAuMDY2LDAuMTQ3LTAuMTQ3CiAgICAgICAgICAgICAgICAgICAgQzE4LjQ4Miw5LjM1NSwxOC40MTYsOS4yODksMTguMzM1LDkuMjg5IE0xOC4zMzUsOS42MTNjLTAuMDk4LDAtMC4xNzctMC4wNzktMC4xNzctMC4xNzdzMC4wNzktMC4xNzgsMC4xNzctMC4xNzgKICAgICAgICAgICAgICAgICAgICBjMC4wOTgsMCwwLjE3NywwLjA4LDAuMTc3LDAuMTc4UzE4LjQzMyw5LjYxMywxOC4zMzUsOS42MTMiLz4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik01LjE0MSw4LjU1aDAuMTA0YzAuMDE1LDAsMC4wMzEtMC4wMDEsMC4wNDYtMC4wMDRDNS4zMDUsOC41NDQsNS4zMTksOC41NCw1LjMzLDguNTMzCiAgICAgICAgICAgICAgICAgICAgYzAuMDEyLTAuMDA2LDAuMDIxLTAuMDE2LDAuMDI4LTAuMDI4YzAuMDA3LTAuMDEyLDAuMDExLTAuMDI5LDAuMDExLTAuMDQ4YzAtMC4wMi0wLjAwMy0wLjAzNi0wLjAxMS0wLjA0OAogICAgICAgICAgICAgICAgICAgIEM1LjM1Miw4LjM5Niw1LjM0Miw4LjM4Nyw1LjMzLDguMzhDNS4zMTksOC4zNzQsNS4zMDUsOC4zNjksNS4yOSw4LjM2N0M1LjI3NSw4LjM2NCw1LjI2LDguMzYzLDUuMjQ0LDguMzYzSDUuMTQxVjguNTV6CiAgICAgICAgICAgICAgICAgICAgICAgIE01LjA2Miw4LjI5NGgwLjIwNWMwLjAzNywwLDAuMDY4LDAuMDA1LDAuMDkyLDAuMDE1YzAuMDI0LDAuMDEsMC4wNDMsMC4wMjMsMC4wNTcsMC4wMzlDNS40Myw4LjM2Myw1LjQzOSw4LjM4MSw1LjQ0NSw4LjQKICAgICAgICAgICAgICAgICAgICBDNS40NSw4LjQyLDUuNDUzLDguNDM4LDUuNDUzLDguNDU3YzAsMC4wMTgtMC4wMDMsMC4wMzctMC4wMDgsMC4wNTZDNS40MzksOC41MzIsNS40Myw4LjU1LDUuNDE2LDguNTY1CiAgICAgICAgICAgICAgICAgICAgQzUuNDAyLDguNTgxLDUuMzgzLDguNTk0LDUuMzU5LDguNjA0Yy0wLjAyNCwwLjAxLTAuMDU1LDAuMDE1LTAuMDkyLDAuMDE1SDUuMTQxdjAuMjU2SDUuMDYyVjguMjk0eiIvPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTUuOTgxLDguODE3YzAuMDMzLDAsMC4wNjQtMC4wMDYsMC4wOS0wLjAxOWMwLjAyNy0wLjAxMiwwLjA1LTAuMDI5LDAuMDY5LTAuMDVjMC4wMTktMC4wMjEsMC4wMzQtMC4wNDYsMC4wNDQtMC4wNzQKICAgICAgICAgICAgICAgICAgICBDNi4xOTUsOC42NDcsNi4yLDguNjE3LDYuMiw4LjU4NWMwLTAuMDMyLTAuMDA1LTAuMDYyLTAuMDE1LTAuMDlDNi4xNzQsOC40NjcsNi4xNTksOC40NDIsNi4xNCw4LjQyMQogICAgICAgICAgICAgICAgICAgIGMtMC4wMTktMC4wMjEtMC4wNDItMC4wMzctMC4wNjktMC4wNWMtMC4wMjctMC4wMTItMC4wNTctMC4wMTgtMC4wOS0wLjAxOGMtMC4wMzQsMC0wLjA2NCwwLjAwNi0wLjA5MSwwLjAxOAogICAgICAgICAgICAgICAgICAgIGMtMC4wMjcsMC4wMTMtMC4wNSwwLjAyOS0wLjA2OSwwLjA1QzUuODAyLDguNDQyLDUuNzg3LDguNDY3LDUuNzc3LDguNDk1cy0wLjAxNiwwLjA1OC0wLjAxNiwwLjA5YzAsMC4wMzIsMC4wMDUsMC4wNjIsMC4wMTYsMC4wOQogICAgICAgICAgICAgICAgICAgIGMwLjAxLDAuMDI4LDAuMDI1LDAuMDUzLDAuMDQ0LDAuMDc0YzAuMDIsMC4wMiwwLjA0MiwwLjAzNywwLjA2OSwwLjA1QzUuOTE3LDguODEsNS45NDcsOC44MTcsNS45ODEsOC44MTcgTTUuOTgxLDguODkKICAgICAgICAgICAgICAgICAgICBjLTAuMDQ0LDAtMC4wODUtMC4wMDgtMC4xMjItMC4wMjNDNS44MjEsOC44NTIsNS43ODksOC44Myw1Ljc2Miw4LjgwMkM1LjczNiw4Ljc3NSw1LjcxNSw4Ljc0Myw1LjcsOC43MDYKICAgICAgICAgICAgICAgICAgICBDNS42ODUsOC42NjgsNS42NzcsOC42MjgsNS42NzcsOC41ODVjMC0wLjA0NCwwLjAwOC0wLjA4NCwwLjAyMy0wLjEyMWMwLjAxNS0wLjAzNywwLjAzNi0wLjA3LDAuMDYyLTAuMDk3CiAgICAgICAgICAgICAgICAgICAgQzUuNzg5LDguMzQsNS44MjEsOC4zMTgsNS44NTgsOC4zMDNjMC4wMzctMC4wMTUsMC4wNzgtMC4wMjMsMC4xMjItMC4wMjNjMC4wNDQsMCwwLjA4NSwwLjAwOCwwLjEyMiwwLjAyMwogICAgICAgICAgICAgICAgICAgIEM2LjE0LDguMzE4LDYuMTcyLDguMzQsNi4xOTksOC4zNjdjMC4wMjYsMC4wMjcsMC4wNDcsMC4wNiwwLjA2MiwwLjA5N2MwLjAxNSwwLjAzNywwLjAyMywwLjA3NywwLjAyMywwLjEyMQogICAgICAgICAgICAgICAgICAgIGMwLDAuMDQzLTAuMDA3LDAuMDgzLTAuMDIzLDAuMTIxQzYuMjQ2LDguNzQzLDYuMjI1LDguNzc1LDYuMTk5LDguODAyQzYuMTcyLDguODMsNi4xNCw4Ljg1Miw2LjEwMyw4Ljg2NwogICAgICAgICAgICAgICAgICAgIEM2LjA2Niw4Ljg4Myw2LjAyNSw4Ljg5LDUuOTgxLDguODkiLz4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIHBvaW50cz0iNi40ODgsOC4yOTQgNi41Nyw4LjI5NCA2LjY5OCw4Ljc1OSA2LjcsOC43NTkgNi44MzcsOC4yOTQgNi45MjcsOC4yOTQgNy4wNjQsOC43NTkgNy4wNjYsOC43NTkgNy4xOTQsOC4yOTQgCiAgICAgICAgICAgICAgICAgICAgNy4yNzYsOC4yOTQgNy4xMDcsOC44NzYgNy4wMjMsOC44NzYgNi44ODMsOC40MDEgNi44ODEsOC40MDEgNi43NDEsOC44NzYgNi42NTgsOC44NzYgCSIvPgogICAgICAgICAgICAgICAgPHBvbHlnb24gcG9pbnRzPSI3LjUxNiw4LjI5NCA3Ljg5Miw4LjI5NCA3Ljg5Miw4LjM2OCA3LjU5NSw4LjM2OCA3LjU5NSw4LjU0MSA3Ljg3MSw4LjU0MSA3Ljg3MSw4LjYxNSA3LjU5NSw4LjYxNSA3LjU5NSw4LjgwMiAKICAgICAgICAgICAgICAgICAgICA3LjkwNyw4LjgwMiA3LjkwNyw4Ljg3NiA3LjUxNiw4Ljg3NiAJIi8+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOC4yNjEsOC41NWgwLjEwNGMwLjAxNSwwLDAuMDMtMC4wMDEsMC4wNDYtMC4wMDRjMC4wMTUtMC4wMDIsMC4wMjktMC4wMDcsMC4wNC0wLjAxNAogICAgICAgICAgICAgICAgICAgIGMwLjAxMi0wLjAwNiwwLjAyMS0wLjAxNiwwLjAyOS0wLjAyOEM4LjQ4Niw4LjQ5Myw4LjQ5LDguNDc2LDguNDksOC40NTdjMC0wLjAyLTAuMDA0LTAuMDM2LTAuMDExLTAuMDQ4CiAgICAgICAgICAgICAgICAgICAgQzguNDcyLDguMzk2LDguNDYzLDguMzg3LDguNDUxLDguMzhjLTAuMDEyLTAuMDA3LTAuMDI1LTAuMDExLTAuMDQtMC4wMTRDOC4zOTUsOC4zNjQsOC4zOCw4LjM2Myw4LjM2NSw4LjM2M0g4LjI2MVY4LjU1egogICAgICAgICAgICAgICAgICAgICAgICBNOC4xODMsOC4yOTRoMC4yMDVjMC4wMzcsMCwwLjA2OCwwLjAwNSwwLjA5MiwwLjAxNWMwLjAyNCwwLjAxLDAuMDQzLDAuMDIzLDAuMDU3LDAuMDM5QzguNTUsOC4zNjMsOC41Niw4LjM4MSw4LjU2NSw4LjQKICAgICAgICAgICAgICAgICAgICBjMC4wMDYsMC4wMiwwLjAwOCwwLjAzOCwwLjAwOCwwLjA1NmMwLDAuMDE5LTAuMDAzLDAuMDM3LTAuMDEsMC4wNTRDOC41NTcsOC41MjgsOC41NDgsOC41NDMsOC41MzUsOC41NTcKICAgICAgICAgICAgICAgICAgICBDOC41MjMsOC41NzEsOC41MDgsOC41ODMsOC40OSw4LjU5M0M4LjQ3Miw4LjYwMiw4LjQ1Miw4LjYwOCw4LjQzMSw4LjYxbDAuMTY1LDAuMjY1SDguNDk3TDguMzQ5LDguNjE5SDguMjYxdjAuMjU2SDguMTgzVjguMjk0eiIKICAgICAgICAgICAgICAgICAgICAvPgogICAgICAgICAgICAgICAgPHBvbHlnb24gcG9pbnRzPSI4Ljg0OSw4LjI5NCA5LjIyNCw4LjI5NCA5LjIyNCw4LjM2OCA4LjkyOCw4LjM2OCA4LjkyOCw4LjU0MSA5LjIwNCw4LjU0MSA5LjIwNCw4LjYxNSA4LjkyOCw4LjYxNSA4LjkyOCw4LjgwMiAKICAgICAgICAgICAgICAgICAgICA5LjIzOSw4LjgwMiA5LjIzOSw4Ljg3NiA4Ljg0OSw4Ljg3NiAJIi8+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOS41ODEsOC44MDJIOS42OGMwLjAzMywwLDAuMDY1LTAuMDA1LDAuMDk1LTAuMDE0YzAuMDMtMC4wMDksMC4wNTYtMC4wMjMsMC4wNzktMC4wNDFDOS44NzYsOC43Myw5Ljg5NCw4LjcwNyw5LjkwNyw4LjY4CiAgICAgICAgICAgICAgICAgICAgYzAuMDEzLTAuMDI3LDAuMDItMC4wNTksMC4wMi0wLjA5NWMwLTAuMDE5LTAuMDAzLTAuMDQxLTAuMDA5LTAuMDY1QzkuOTEyLDguNDk1LDkuOSw4LjQ3MSw5Ljg4NCw4LjQ0OQogICAgICAgICAgICAgICAgICAgIGMtMC4wMTctMC4wMjMtMC4wNC0wLjA0Mi0wLjA2OS0wLjA1N2MtMC4wMy0wLjAxNS0wLjA2OC0wLjAyMy0wLjExNS0wLjAyM0g5LjU4MVY4LjgwMnogTTkuNTAyLDguMjk0aDAuMjAzCiAgICAgICAgICAgICAgICAgICAgYzAuMDQxLDAsMC4wNzcsMC4wMDUsMC4xMDgsMC4wMTRjMC4wMzEsMC4wMDksMC4wNTgsMC4wMjIsMC4wOCwwLjAzOEM5LjkxNiw4LjM2MSw5LjkzNSw4LjM3OSw5Ljk1LDguMzk5CiAgICAgICAgICAgICAgICAgICAgQzkuOTY1LDguNDIsOS45NzcsOC40NCw5Ljk4Niw4LjQ2MmMwLjAwOSwwLjAyMSwwLjAxNSwwLjA0MywwLjAxOSwwLjA2NGMwLjAwNCwwLjAyMSwwLjAwNiwwLjA0MSwwLjAwNiwwLjA1OQogICAgICAgICAgICAgICAgICAgIGMwLDAuMDM3LTAuMDA3LDAuMDczLTAuMDIxLDAuMTA4QzkuOTc3LDguNzI4LDkuOTU2LDguNzU5LDkuOTI5LDguNzg2Yy0wLjAyNywwLjAyNy0wLjA2LDAuMDQ5LTAuMSwwLjA2NQogICAgICAgICAgICAgICAgICAgIEM5Ljc5LDguODY4LDkuNzQ0LDguODc2LDkuNjkyLDguODc2aC0wLjE5VjguMjk0eiIvPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTEwLjc2LDguODA3aDAuMTE2YzAuMDEyLDAsMC4wMjUtMC4wMDEsMC4wNC0wLjAwNGMwLjAxNS0wLjAwMywwLjAyOC0wLjAwNywwLjA0MS0wLjAxNQogICAgICAgICAgICAgICAgICAgIGMwLjAxMi0wLjAwNywwLjAyMy0wLjAxNywwLjAzMi0wLjAzYzAuMDA5LTAuMDEzLDAuMDEzLTAuMDI5LDAuMDEzLTAuMDVjMC0wLjAzNC0wLjAxMS0wLjA2LTAuMDM0LTAuMDc3CiAgICAgICAgICAgICAgICAgICAgYy0wLjAyMy0wLjAxNy0wLjA1My0wLjAyNi0wLjA5MS0wLjAyNkgxMC43NlY4LjgwN3ogTTEwLjc2LDguNTM2aDAuMTA4YzAuMDE1LDAsMC4wMjktMC4wMDIsMC4wNDItMC4wMDUKICAgICAgICAgICAgICAgICAgICBjMC4wMTMtMC4wMDMsMC4wMjUtMC4wMDgsMC4wMzUtMC4wMTVjMC4wMS0wLjAwNywwLjAxOC0wLjAxNiwwLjAyMy0wLjAyN2MwLjAwNi0wLjAxMSwwLjAwOC0wLjAyNSwwLjAwOC0wLjA0CiAgICAgICAgICAgICAgICAgICAgYzAtMC4wMjMtMC4wMDctMC4wNDMtMC4wMjItMC4wNmMtMC4wMTUtMC4wMTctMC4wMzgtMC4wMjYtMC4wNy0wLjAyNkgxMC43NlY4LjUzNnogTTEwLjY4MSw4LjI5NGgwLjIwMgogICAgICAgICAgICAgICAgICAgIGMwLjAyNSwwLDAuMDQ5LDAuMDAzLDAuMDcsMC4wMDljMC4wMjIsMC4wMDYsMC4wNCwwLjAxNSwwLjA1NiwwLjAyN2MwLjAxNiwwLjAxMiwwLjAyOCwwLjAyNywwLjAzNywwLjA0NQogICAgICAgICAgICAgICAgICAgIGMwLjAwOSwwLjAxOCwwLjAxNCwwLjA0LDAuMDE0LDAuMDY0YzAsMC4wMzMtMC4wMDksMC4wNjEtMC4wMjgsMC4wODJjLTAuMDE5LDAuMDIxLTAuMDQzLDAuMDM3LTAuMDcyLDAuMDQ2djAuMDAyCiAgICAgICAgICAgICAgICAgICAgYzAuMDE4LDAuMDAxLDAuMDM0LDAuMDA2LDAuMDUsMC4wMTRjMC4wMTUsMC4wMDgsMC4wMjksMC4wMTgsMC4wNCwwLjAzMWMwLjAxMSwwLjAxMywwLjAyLDAuMDI4LDAuMDI3LDAuMDQ1CiAgICAgICAgICAgICAgICAgICAgYzAuMDA2LDAuMDE3LDAuMDEsMC4wMzUsMC4wMSwwLjA1NWMwLDAuMDI2LTAuMDA1LDAuMDUtMC4wMTYsMC4wNjljLTAuMDExLDAuMDItMC4wMjUsMC4wMzctMC4wNDQsMC4wNTEKICAgICAgICAgICAgICAgICAgICBjLTAuMDE5LDAuMDE0LTAuMDQsMC4wMjQtMC4wNjUsMC4wMzFjLTAuMDI1LDAuMDA3LTAuMDUxLDAuMDExLTAuMDgsMC4wMTFoLTAuMlY4LjI5NHoiLz4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIHBvaW50cz0iMTEuNSw4LjYyOCAxMS4yOCw4LjI5NCAxMS4zODEsOC4yOTQgMTEuNTQsOC41NSAxMS43MDMsOC4yOTQgMTEuNzk5LDguMjk0IDExLjU3OSw4LjYyOCAxMS41NzksOC44NzYgMTEuNSw4Ljg3NiAKICAgICAgICAgICAgICAgICAgICAgICAgIi8+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L3N2Zz4="); }
    .benefit__icon .dry {
      background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICAgICAgICB2aWV3Qm94PSIwIDAgMTkuODQgMTkuODQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE5Ljg0IDE5Ljg0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgICAgIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+CiAgICAgICAgICAgICAgICAuc3Qwe2ZpbGw6I0ZGRkZGRjt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE4LjQ5OCw5LjkyYzAsNC43MzgtMy44NCw4LjU3OC04LjU3OSw4LjU3OGMtNC43MzgsMC04LjU3OC0zLjg0LTguNTc4LTguNTc4YzAtNC43MzYsMy44MzktOC41NzgsOC41NzgtOC41NzgKICAgICAgICAgICAgICAgICAgICBDMTQuNjU4LDEuMzQyLDE4LjQ5OCw1LjE4MywxOC40OTgsOS45MiIvPgogICAgICAgICAgICAgICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTYuMzg2LDE0Ljk2NmMwLTAuMjgtMC4yMjYtMC41MDQtMC41MDItMC41MDRjLTAuMjc5LDAtMC41MDcsMC4yMjUtMC41MDcsMC41MDQKICAgICAgICAgICAgICAgICAgICBjMCwwLjI3OSwwLjIyNywwLjUwNSwwLjUwNywwLjUwNUM2LjE2LDE1LjQ3MSw2LjM4NiwxNS4yNDYsNi4zODYsMTQuOTY2Ii8+CiAgICAgICAgICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOC40MDcsMTQuOTY2YzAtMC4yOC0wLjIyOC0wLjUwNC0wLjUwNy0wLjUwNGMtMC4yNzgsMC0wLjUwMiwwLjIyNS0wLjUwMiwwLjUwNAogICAgICAgICAgICAgICAgICAgIGMwLDAuMjc5LDAuMjI1LDAuNTA1LDAuNTAyLDAuNTA1QzguMTc5LDE1LjQ3MSw4LjQwNywxNS4yNDYsOC40MDcsMTQuOTY2Ii8+CiAgICAgICAgICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTIuNDQzLDE0Ljk2NmMwLTAuMjgtMC4yMjctMC41MDQtMC41MDQtMC41MDRjLTAuMjc5LDAtMC41MDUsMC4yMjUtMC41MDUsMC41MDQKICAgICAgICAgICAgICAgICAgICBjMCwwLjI3OSwwLjIyNiwwLjUwNSwwLjUwNSwwLjUwNUMxMi4yMTYsMTUuNDcxLDEyLjQ0MywxNS4yNDYsMTIuNDQzLDE0Ljk2NiIvPgogICAgICAgICAgICAgICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTUuMjY2LDEzLjU2NGg5LjMwN3YtMS4yMzJINS4yNjZWMTMuNTY0eiBNMTIuNzE1LDEzLjM0bDAuNzg0LTAuNzg1aDAuNjlsLTAuNzg0LDAuNzg1SDEyLjcxNXogTTExLjcwNCwxMy4zNAogICAgICAgICAgICAgICAgICAgIGwwLjc4NC0wLjc4NWgwLjY5M2wtMC43ODUsMC43ODVIMTEuNzA0eiBNMTAuNjk1LDEzLjM0bDAuNzg0LTAuNzg1aDAuNjkzbC0wLjc4NiwwLjc4NUgxMC42OTV6IE05LjY4NywxMy4zNGwwLjc4My0wLjc4NWgwLjY5MwogICAgICAgICAgICAgICAgICAgIGwtMC43ODYsMC43ODVIOS42ODd6IE04LjY3NSwxMy4zNGwwLjc4OC0wLjc4NWgwLjY5TDkuMzY4LDEzLjM0SDguNjc1eiBNNy42NjcsMTMuMzRsMC43ODMtMC43ODVoMC42OTNMOC4zNjEsMTMuMzRINy42Njd6CiAgICAgICAgICAgICAgICAgICAgICAgIE02LjY1OSwxMy4zNGwwLjc4NC0wLjc4NWgwLjY5MUw3LjM1MSwxMy4zNEg2LjY1OXogTTUuNjQ5LDEzLjM0bDAuNzg1LTAuNzg1aDAuNjkzTDYuMzQxLDEzLjM0SDUuNjQ5eiBNNi4xMTgsMTIuNTU1TDUuNDksMTMuMTgxCiAgICAgICAgICAgICAgICAgICAgdi0wLjYyNkg2LjExOHogTTEzLjcyMywxMy4zNGwwLjYyNi0wLjYyN3YwLjYyN0gxMy43MjN6Ii8+CiAgICAgICAgICAgICAgICA8cmVjdCB4PSI5LjQxNCIgeT0iNy43NzEiIGNsYXNzPSJzdDAiIHdpZHRoPSIxLjAwOSIgaGVpZ2h0PSIzLjY2MyIvPgogICAgICAgICAgICAgICAgPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSI5LjkyNSw2LjM4OCA5LjkyNSw2LjM4OCA4LjQwNyw3LjkxIDExLjQ0Myw3LjkxIAkiLz4KICAgICAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMy40NTIsNi4yMjljMCwwLjE2NywwLDAuMTY3LDAuNSwxLjE2OWMwLjUwMi0xLjAwMiwwLjUwMi0xLjAwMiwwLjUwMi0xLjE2OQogICAgICAgICAgICAgICAgICAgIGMwLTAuMjc2LTAuMjI3LTAuNDk5LTAuNTAyLTAuNDk5QzEzLjY3Niw1LjczLDEzLjQ1Miw1Ljk1MywxMy40NTIsNi4yMjkiLz4KICAgICAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMC40MzIsNC4yMTJjMCwwLjE2NSwwLDAuMTY1LDAuNSwxLjE2NWMwLjUwMi0xLDAuNTAyLTEsMC41MDItMS4xNjVjMC0wLjI3OC0wLjIyNC0wLjUwMS0wLjUwMi0wLjUwMQogICAgICAgICAgICAgICAgICAgIEMxMC42NTksMy43MTEsMTAuNDMyLDMuOTM1LDEwLjQzMiw0LjIxMiIvPgogICAgICAgICAgICAgICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTUuMzcsOC44MjZjMCwwLjE2OCwwLDAuMTY4LDAuNSwxLjE2OWMwLjQ5OS0xLjAwMiwwLjQ5OS0xLjAwMiwwLjQ5OS0xLjE2OWMwLTAuMjc2LTAuMjI0LTAuNDk4LTAuNDk5LTAuNDk4CiAgICAgICAgICAgICAgICAgICAgQzUuNTkzLDguMzI4LDUuMzcsOC41NSw1LjM3LDguODI2Ii8+CiAgICAgICAgICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNy40MDYsMTAuMjg0YzAsMC4xNjgsMCwwLjE2OCwwLjUwMSwxLjE2OGMwLjUtMSwwLjUtMSwwLjUtMS4xNjhjMC0wLjI3Ni0wLjIyNS0wLjUtMC41LTAuNQogICAgICAgICAgICAgICAgICAgIEM3LjYzMSw5Ljc4NCw3LjQwNiwxMC4wMDgsNy40MDYsMTAuMjg0Ii8+CiAgICAgICAgICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNi4zOTcsNS43MjVjMCwwLjE2NywwLDAuMTY3LDAuNSwxLjE2OGMwLjUtMS4wMDEsMC41LTEuMDAxLDAuNS0xLjE2OGMwLTAuMjc2LTAuMjI0LTAuNTAxLTAuNS0wLjUwMQogICAgICAgICAgICAgICAgICAgIEM2LjYyMiw1LjIyNCw2LjM5Nyw1LjQ0OSw2LjM5Nyw1LjcyNSIvPgogICAgICAgICAgICAgICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTEyLjQ1Miw5LjkxNmMwLDAuMTY3LDAsMC4xNjcsMC41LDEuMTY4YzAuNTAxLTEuMDAxLDAuNTAxLTEuMDAxLDAuNTAxLTEuMTY4CiAgICAgICAgICAgICAgICAgICAgYzAtMC4yNzctMC4yMjMtMC40OTktMC41MDEtMC40OTlDMTIuNjc2LDkuNDE3LDEyLjQ1Miw5LjYzOSwxMi40NTIsOS45MTYiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvc3ZnPg=="); }
    .benefit__icon .evaporate {
      background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICAgICAgICB2aWV3Qm94PSIwIDAgMTkuODQgMTkuODQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE5Ljg0IDE5Ljg0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTkuOTIxLDIuMzQ0YzQuMTc3LDAsNy41NzUsMy4zOTgsNy41NzUsNy41NzVjMCw0LjE3OC0zLjM5OCw3LjU3Ni03LjU3NSw3LjU3NmMtNC4xNzgsMC03LjU3Ni0zLjM5OC03LjU3Ni03LjU3NgogICAgICAgICAgICAgICAgICAgICAgICBDMi4zNDUsNS43NDIsNS43NDMsMi4zNDQsOS45MjEsMi4zNDQgTTkuOTIxLDEuMzM1Yy00Ljc0MiwwLTguNTg3LDMuODQ0LTguNTg3LDguNTg0YzAsNC43NDIsMy44NDUsOC41ODcsOC41ODcsOC41ODcKICAgICAgICAgICAgICAgICAgICAgICAgYzQuNzQsMCw4LjU4NS0zLjg0NSw4LjU4NS04LjU4N0MxOC41MDYsNS4xNzksMTQuNjYxLDEuMzM1LDkuOTIxLDEuMzM1Ii8+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSB0cmFuc2Zvcm09Im1hdHJpeCgwLjk3NTkgLTAuMjE4MSAwLjIxODEgMC45NzU5IC0xLjA0OCAyLjYxMjcpIiBjeD0iMTEuMzEyIiBjeT0iNi4wNTQiIHJ4PSIwLjI2MiIgcnk9IjAuMjYyIi8+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgdHJhbnNmb3JtPSJtYXRyaXgoMC45NzU0IC0wLjIyMDMgMC4yMjAzIDAuOTc1NCAtMC45NTA3IDIuMDA2KSIgY3g9IjguNTIiIGN5PSI1LjI2NiIgcng9IjAuMjYyIiByeT0iMC4yNjIiLz4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGN4PSIxMS4zNDUiIGN5PSI0LjYyMyIgcj0iMC4zNjkiLz4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGN4PSI5LjE2IiBjeT0iNC4yMjQiIHI9IjAuMjYyIi8+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBjeD0iOC42NTMiIGN5PSI2LjMzNSIgcj0iMC4yNjIiLz4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGN4PSIxMS45MSIgY3k9IjcuMjYzIiByPSIwLjI2MiIvPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgY3g9IjEzLjU2NCIgY3k9IjcuMzkyIiByPSIwLjMwNyIvPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgY3g9IjEyLjY4IiBjeT0iOC40MjciIHI9IjAuNTA5Ii8+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBjeD0iMTIuNjI0IiBjeT0iNi40MjUiIHI9IjAuMzA3Ii8+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEyLjc3OCwxMS44NDRjLTAuNjQyLTEuNzQzLTEuNDM3LTIuMjg4LTIuMTY2LTQuMzE2Yy0wLjU2OS0xLjU4NC0wLjU4NC0yLjExNi0wLjU4NC0yLjExNnMtMC4wMTcsMC41MzMtMC41ODUsMi4xMTYKICAgICAgICAgICAgICAgICAgICAgICAgQzguNzE0LDkuNTU1LDcuOTIsMTAuMSw3LjI3OSwxMS44NDRjLTAuMTIyLDAuMzIyLTAuMTg5LDAuNjcyLTAuMTg5LDEuMDM3YzAsMS42MjMsMS4zMTYsMi45MzksMi45MzksMi45MzkKICAgICAgICAgICAgICAgICAgICAgICAgYzEuNjIzLDAsMi45MzgtMS4zMTYsMi45MzgtMi45MzljMC0wLjM2NS0wLjA2Ni0wLjcxNS0wLjE4OS0xLjAzN0gxMi43Nzh6IE0xMC45MSwxNC45NjRjMCwwLDAuNTg2LTAuODM2LDAuNTk3LTIuMjQ0CiAgICAgICAgICAgICAgICAgICAgICAgIGMwLjAxMy0xLjM4OC0wLjM5NC0yLjMxNi0wLjM5NC0yLjMxNkMxMi4wNTYsMTEuNjUsMTIuODU1LDEzLjQ4NCwxMC45MSwxNC45NjR6Ii8+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBjeD0iNi42OTEiIGN5PSI5LjY5MyIgcj0iMC41MDkiLz4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGN4PSI3Ljc4NCIgY3k9IjcuOTgyIiByPSIwLjQxOCIvPgogICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIHRyYW5zZm9ybT0ibWF0cml4KDAuMjM1NiAtMC45NzE4IDAuOTcxOCAwLjIzNTYgMC44ODkxIDIwLjQ2MDQpIiBjeD0iMTMuNDUyIiBjeT0iOS42NjUiIHJ4PSIwLjQxOCIgcnk9IjAuNDE4Ii8+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBjeD0iNy42MDYiIGN5PSI2Ljc3OCIgcj0iMC4zMDciLz4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGN4PSI2LjQxIiBjeT0iNy45ODIiIHI9IjAuMzA3Ii8+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBjeD0iNy4xMjMiIGN5PSI1LjY4MiIgcj0iMC4zNjkiLz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvc3ZnPg=="); }
    .benefit__icon .protect {
      background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICAgICAgICB2aWV3Qm94PSIwIDAgMTkuODQgMTkuODQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE5Ljg0IDE5Ljg0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgICAgIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+CiAgICAgICAgICAgICAgICAuc3Qwe2ZpbGw6I0ZGRkZGRjt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE1Ljk5NCwxNS45OTRjLTMuMzU1LDMuMzU1LTguNzk0LDMuMzU1LTEyLjE0OSwwYy0zLjM1NS0zLjM1NC0zLjM1NS04Ljc5NCwwLTEyLjE0OGMzLjM1NS0zLjM1NSw4Ljc5NC0zLjM1NSwxMi4xNDksMAogICAgICAgICAgICAgICAgICAgIEMxOS4zNDksNy4yLDE5LjM0OSwxMi42NCwxNS45OTQsMTUuOTk0Ii8+CiAgICAgICAgICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOS4wNDMsMTEuNTk4bC0yLjM5NSwxLjZsMS42MDItMi4zOTRjMC4xNzQtMC4yNjMsMC41MzEtMC4zMzMsMC43OTMtMC4xNTgKICAgICAgICAgICAgICAgICAgICBjMC4yNjQsMC4xNzYsMC4zMzQsMC41MzEsMC4xNTgsMC43OTRDOS4xNTgsMTEuNTA0LDkuMTAzLDExLjU1OCw5LjA0MywxMS41OTgiLz4KICAgICAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02LjM5MSw2LjMxOUwzLjU2Nyw1Ljc1OGwyLjgyNC0wLjU2MWMwLjMxLTAuMDYyLDAuNjEzLDAuMTQsMC42NzQsMC40NWMwLjA2MiwwLjMwOS0wLjEzOSwwLjYxMS0wLjQ1LDAuNjczCiAgICAgICAgICAgICAgICAgICAgQzYuNTQsNi4zMzUsNi40NjIsNi4zMzMsNi4zOTEsNi4zMTkiLz4KICAgICAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNC42NTEsMTMuNDU2bC0wLjU2MywyLjgyNGwtMC41NjEtMi44MjRjLTAuMDYyLTAuMzEsMC4xMzktMC42MTIsMC40NS0wLjY3MwogICAgICAgICAgICAgICAgICAgIGMwLjMwOS0wLjA2MiwwLjYxMSwwLjE0LDAuNjczLDAuNDVDMTQuNjY1LDEzLjMwOCwxNC42NjQsMTMuMzg1LDE0LjY1MSwxMy40NTYiLz4KICAgICAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMS42OTUsMTMuMDk2bC0xLjU4OSwyLjQwMmwwLjU0OC0yLjgyN2MwLjA2MS0wLjMxLDAuMzYxLTAuNTEzLDAuNjcyLTAuNDUzCiAgICAgICAgICAgICAgICAgICAgYzAuMzEsMC4wNiwwLjUxMywwLjM2MSwwLjQ1MywwLjY3MkMxMS43NjUsMTIuOTY0LDExLjczNiwxMy4wMzUsMTEuNjk1LDEzLjA5NiIvPgogICAgICAgICAgICAgICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTcuMjA3LDkuMjU0bC0yLjgyLDAuNTc1bDIuMzg3LTEuNjFjMC4yNjItMC4xNzcsMC42MTctMC4xMDgsMC43OTQsMC4xNTQKICAgICAgICAgICAgICAgICAgICBjMC4xNzYsMC4yNjMsMC4xMDYsMC42MTgtMC4xNTUsMC43OTVDNy4zNSw5LjIxMSw3LjI3OSw5LjIzOSw3LjIwNyw5LjI1NCIvPgogICAgICAgICAgICAgICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTEwLjI3OCw5LjU2M2MxLjkzMSwxLjkzMiw0Ljc2OCwyLjQwOCw3LjE0NiwxLjQzMWMwLjMyNS0yLjI4LTAuMzkxLTQuNjc5LTIuMTQ0LTYuNDM0CiAgICAgICAgICAgICAgICAgICAgYy0xLjc1NC0xLjc1My00LjE1My0yLjQ2OC02LjQzMi0yLjE0M0M3Ljg2OSw0Ljc5NSw4LjM0NSw3LjYzMSwxMC4yNzgsOS41NjMiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvc3ZnPg=="); }
    .benefit__icon .reflect {
      background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICAgICAgICAgICAgdmlld0JveD0iMCAwIDE5Ljg0IDE5Ljg0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxOS44NCAxOS44NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogICAgICAgICAgICAgICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICAgICAgICAgICAgIC5zdDB7ZmlsbDojRkZGRkZGO30KICAgICAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE4LjUxMiw5LjkxOWMwLDQuNzQ2LTMuODQ3LDguNTkzLTguNTkxLDguNTkzYy00Ljc0NiwwLTguNTkzLTMuODQ3LTguNTkzLTguNTkzYzAtNC43NDUsMy44NDctOC41OTEsOC41OTMtOC41OTEKICAgICAgICAgICAgICAgICAgICBDMTQuNjY1LDEuMzI4LDE4LjUxMiw1LjE3NCwxOC41MTIsOS45MTkiLz4KICAgICAgICAgICAgICAgIDxyZWN0IHg9IjQuMzYiIHk9IjEyLjQ0NyIgY2xhc3M9InN0MCIgd2lkdGg9IjExLjEyIiBoZWlnaHQ9IjEuMDExIi8+CiAgICAgICAgICAgICAgICA8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjE0Ljc2NCw2LjgwMiAxNC4wNDksNi4wODggMTAuMTMsMTAuMDA2IDUuMzcxLDUuMzcxIDQuNjU3LDYuMDg2IDkuNDE1LDEwLjcyMiA5LjQxNSwxMC43MjIgCiAgICAgICAgICAgICAgICAgICAgMTAuMTMsMTEuNDM1IDEwLjEzLDExLjQzNSAxMC4xMywxMS40MzUgMTAuODQ1LDEwLjcyMiAxMC44NDUsMTAuNzIyIAkiLz4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTUuNTA4LDUuMzU4IDE1LjUwOCw1LjM1OCAxMy4wOTQsNS4zNTggMTUuNTA4LDcuNzczIAkiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvc3ZnPg=="); }
    .benefit__icon .reflectivedetail {
      background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICAgICAgICAgICAgdmlld0JveD0iMCAwIDE5Ljg0IDE5Ljg0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxOS44NCAxOS44NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogICAgICAgICAgICAgICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICAgICAgICAgICAgIC5zdDB7ZmlsbDojRkZGRkZGO30KICAgICAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE4LjUxMiw5LjkxOWMwLDQuNzQ2LTMuODQ3LDguNTkzLTguNTkxLDguNTkzYy00Ljc0NiwwLTguNTkzLTMuODQ3LTguNTkzLTguNTkzYzAtNC43NDUsMy44NDctOC41OTEsOC41OTMtOC41OTEKICAgICAgICAgICAgICAgICAgICBDMTQuNjY1LDEuMzI4LDE4LjUxMiw1LjE3NCwxOC41MTIsOS45MTkiLz4KICAgICAgICAgICAgICAgIDxyZWN0IHg9IjQuMzYiIHk9IjEyLjQ0NyIgY2xhc3M9InN0MCIgd2lkdGg9IjExLjEyIiBoZWlnaHQ9IjEuMDExIi8+CiAgICAgICAgICAgICAgICA8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjE0Ljc2NCw2LjgwMiAxNC4wNDksNi4wODggMTAuMTMsMTAuMDA2IDUuMzcxLDUuMzcxIDQuNjU3LDYuMDg2IDkuNDE1LDEwLjcyMiA5LjQxNSwxMC43MjIgCiAgICAgICAgICAgICAgICAgICAgMTAuMTMsMTEuNDM1IDEwLjEzLDExLjQzNSAxMC4xMywxMS40MzUgMTAuODQ1LDEwLjcyMiAxMC44NDUsMTAuNzIyIAkiLz4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTUuNTA4LDUuMzU4IDE1LjUwOCw1LjM1OCAxMy4wOTQsNS4zNTggMTUuNTA4LDcuNzczIAkiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvc3ZnPg=="); }
    .benefit__icon .repel {
      background: url("data:image/svg+xml;base64, PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICAgICAgICB2aWV3Qm94PSIwIDAgMTkuODQgMTkuODQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE5Ljg0IDE5Ljg0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgICAgIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+CiAgICAgICAgICAgICAgICAuc3Qwe2ZpbGw6I0ZGRkZGRjt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE4LjUwOSw5LjkyMWMwLDQuNzQzLTMuODQ1LDguNTg3LTguNTg5LDguNTg3Yy00Ljc0MywwLTguNTg4LTMuODQ0LTguNTg4LTguNTg3YzAtNC43NDQsMy44NDUtOC41OSw4LjU4OC04LjU5CiAgICAgICAgICAgICAgICAgICAgQzE0LjY2MywxLjMzMSwxOC41MDksNS4xNzcsMTguNTA5LDkuOTIxIi8+CiAgICAgICAgICAgICAgICA8cmVjdCB4PSI0LjM2MyIgeT0iMTIuNDQ2IiBjbGFzcz0ic3QwIiB3aWR0aD0iMTEuMTE1IiBoZWlnaHQ9IjEuMDExIi8+CiAgICAgICAgICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTAuOTE3LDkuMzE1YzAtMC43MSwwLTAuNzEtMi4xMi00Ljk1MUM2LjY3NSw4LjYwNiw2LjY3NSw4LjYwNiw2LjY3NSw5LjMxNWMwLDEuMTcxLDAuOTQ5LDIuMTIsMi4xMjIsMi4xMgogICAgICAgICAgICAgICAgICAgIEM5Ljk2OSwxMS40MzYsMTAuOTE3LDEwLjQ4NiwxMC45MTcsOS4zMTUiLz4KICAgICAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMi45NzEsOS40NDFjLTAuMzIzLDAuMTU2LTAuMzIzLDAuMTU2LTEuNzgxLDIuMDU0YzIuMzk0LDAuMDI3LDIuMzk0LDAuMDI3LDIuNzE1LTAuMTI4CiAgICAgICAgICAgICAgICAgICAgYzAuNTMxLTAuMjYsMC43NTMtMC45MDEsMC40OTUtMS40M0MxNC4xNDEsOS40MDMsMTMuNTAxLDkuMTgxLDEyLjk3MSw5LjQ0MSIvPgogICAgICAgICAgICAgICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTEyLjAwMyw2Ljc1MWMtMC4xNDQsMC4yMjEtMC4xNDQsMC4yMjEtMC4zMzcsMS45OTRjMS41MzQtMC45MDgsMS41MzQtMC45MDgsMS42NzctMS4xMzIKICAgICAgICAgICAgICAgICAgICBjMC4yMzgtMC4zNzEsMC4xMzMtMC44NjQtMC4yMzktMS4xMDFDMTIuNzM0LDYuMjc0LDEyLjI0LDYuMzc5LDEyLjAwMyw2Ljc1MSIvPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9zdmc+"); }
    .benefit__icon .shiftech {
      background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICAgICAgICB2aWV3Qm94PSIwIDAgMTkuODQgMTkuODQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE5Ljg0IDE5Ljg0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgICAgIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+CiAgICAgICAgICAgICAgICAuc3Qwe2ZpbGw6I0ZGRkZGRjt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE4LjQ5OCw5LjkyYzAsNC43MzgtMy44NDEsOC41NzgtOC41NzcsOC41NzhjLTQuNzM5LDAtOC41NzktMy44NC04LjU3OS04LjU3OGMwLTQuNzM4LDMuODQtOC41NzksOC41NzktOC41NzkKICAgICAgICAgICAgICAgICAgICBDMTQuNjU3LDEuMzQyLDE4LjQ5OCw1LjE4MiwxOC40OTgsOS45MiIvPgogICAgICAgICAgICAgICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTkuODMsNC4zN2MwLjI3OCwwLDAuNTA0LDAuMjI2LDAuNTA0LDAuNTA0djYuNjI3YzAuODcxLDAuMjI0LDEuNTE2LDEuMDEyLDEuNTE2LDEuOTUyCiAgICAgICAgICAgICAgICAgICAgYzAsMS4xMTQtMC45MDYsMi4wMTgtMi4wMTksMi4wMThjLTEuMTE1LDAtMi4wMTktMC45MDMtMi4wMTktMi4wMThjMC0wLjk0LDAuNjQ0LTEuNzI4LDEuNTE1LTEuOTUyVjQuODc0CiAgICAgICAgICAgICAgICAgICAgQzkuMzI1LDQuNTk2LDkuNTUyLDQuMzcsOS44Myw0LjM3IE05LjgzLDMuODA5Yy0wLjU4NywwLTEuMDY3LDAuNDc5LTEuMDY3LDEuMDY1djYuMjMxYy0wLjkwNywwLjQxMi0xLjUxMiwxLjMyMy0xLjUxMiwyLjM0OAogICAgICAgICAgICAgICAgICAgIGMwLDEuNDIyLDEuMTU3LDIuNTc5LDIuNTc5LDIuNTc5YzEuNDIyLDAsMi41NzktMS4xNTcsMi41NzktMi41NzljMC0xLjAyNS0wLjYwNS0xLjkzNi0xLjUxNC0yLjM0OFY0Ljg3NAogICAgICAgICAgICAgICAgICAgIEMxMC44OTUsNC4yODcsMTAuNDE2LDMuODA5LDkuODMsMy44MDkiLz4KICAgICAgICAgICAgICAgIDxyZWN0IHg9IjEyLjM1MiIgeT0iNy4xNzMiIGNsYXNzPSJzdDAiIHdpZHRoPSIxLjAxIiBoZWlnaHQ9IjAuNDQ5Ii8+CiAgICAgICAgICAgICAgICA8cmVjdCB4PSIxMi4zNTIiIHk9IjguMTgyIiBjbGFzcz0ic3QwIiB3aWR0aD0iMS4wMSIgaGVpZ2h0PSIwLjQ0OSIvPgogICAgICAgICAgICAgICAgPHJlY3QgeD0iMTIuMzUyIiB5PSI5LjE5MiIgY2xhc3M9InN0MCIgd2lkdGg9IjEuMDEiIGhlaWdodD0iMC40NDgiLz4KICAgICAgICAgICAgICAgIDxyZWN0IHg9IjEzLjQ1MiIgeT0iMTEuMjA5IiBjbGFzcz0ic3QwIiB3aWR0aD0iMi4wMTkiIGhlaWdodD0iMC40NDkiLz4KICAgICAgICAgICAgICAgIDxyZWN0IHg9IjQuMzY5IiB5PSIxMS4yMDkiIGNsYXNzPSJzdDAiIHdpZHRoPSIyLjAxOSIgaGVpZ2h0PSIwLjQ0OSIvPgogICAgICAgICAgICAgICAgPHJlY3QgeD0iNS4xNTQiIHk9IjEwLjQyNSIgY2xhc3M9InN0MCIgd2lkdGg9IjAuNDQ5IiBoZWlnaHQ9IjIuMDE5Ii8+CiAgICAgICAgICAgICAgICA8cmVjdCB4PSIxMi4zNTIiIHk9IjYuMTY0IiBjbGFzcz0ic3QwIiB3aWR0aD0iMS4wMSIgaGVpZ2h0PSIwLjQ0OCIvPgogICAgICAgICAgICAgICAgPHJlY3QgeD0iMTIuMzUyIiB5PSI1LjE1NSIgY2xhc3M9InN0MCIgd2lkdGg9IjEuMDEiIGhlaWdodD0iMC40NDgiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvc3ZnPg=="); }
    .benefit__icon .stretch {
      background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICAgICAgICB2aWV3Qm94PSIwIDAgMTkuODQgMTkuODQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE5Ljg0IDE5Ljg0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgICAgIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+CiAgICAgICAgICAgICAgICAuc3Qwe2ZpbGw6I0ZGRkZGRjt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE4LjUxMSw5LjkyYzAsMy42MjgtMy44NDcsNi41Ny04LjU5Miw2LjU3cy04LjU5LTIuOTQyLTguNTktNi41N2MwLTMuNjI3LDMuODQ1LTYuNTY5LDguNTktNi41NjkKICAgICAgICAgICAgICAgICAgICBTMTguNTExLDYuMjkzLDE4LjUxMSw5LjkyIi8+CiAgICAgICAgICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTguMTk4LDkuOTJsLTEuNzExLTEuNzA4djAuNDk2Yy0xLjU3NCwwLjYxLTMuOTMyLDAuOTk0LTYuNTY3LDAuOTk0Yy0yLjYzNywwLTQuOTk0LTAuMzg0LTYuNTctMC45OTRWOC4yMTIKICAgICAgICAgICAgICAgICAgICBMMS42NDMsOS45MmwxLjcwOCwxLjcwOFYxMS4xM2MxLjU3NS0wLjYwOSwzLjkzMy0wLjk5NCw2LjU3LTAuOTk0YzIuNjM2LDAsNC45OTMsMC4zODQsNi41NjcsMC45OTR2MC40OTdMMTguMTk4LDkuOTJ6Ii8+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L3N2Zz4="); }
    .benefit__icon .thermal {
      background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICAgICAgICB2aWV3Qm94PSIwIDAgMTkuODQgMTkuODQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE5Ljg0IDE5Ljg0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgICAgIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+CiAgICAgICAgICAgICAgICAuc3Qwe2ZpbGw6I0ZGRkZGRjt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE4LjUxMiw5LjkyYzAsNC43NDUtMy44NDcsOC41OTItOC41OTIsOC41OTJjLTQuNzQ1LDAtOC41OTItMy44NDctOC41OTItOC41OTJjMC00Ljc0NSwzLjg0Ny04LjU5Miw4LjU5Mi04LjU5MgogICAgICAgICAgICAgICAgICAgIEMxNC42NjUsMS4zMjgsMTguNTEyLDUuMTc1LDE4LjUxMiw5LjkyIi8+CiAgICAgICAgICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOS45MiwxNi41NDZjLTMuNjU0LDAtNi42MjYtMi45NzMtNi42MjYtNi42MjZTNi4yNjYsMy4yOTMsOS45MiwzLjI5M2MzLjY1NCwwLDYuNjI3LDIuOTczLDYuNjI3LDYuNjI3CiAgICAgICAgICAgICAgICAgICAgUzEzLjU3NCwxNi41NDYsOS45MiwxNi41NDYgTTkuOTIsMy40MDZjLTMuNTkyLDAtNi41MTQsMi45MjItNi41MTQsNi41MTRjMCwzLjU5MiwyLjkyMiw2LjUxNCw2LjUxNCw2LjUxNAogICAgICAgICAgICAgICAgICAgIGMzLjU5MiwwLDYuNTE1LTIuOTIyLDYuNTE1LTYuNTE0QzE2LjQzNSw2LjMyOCwxMy41MTIsMy40MDYsOS45MiwzLjQwNiIvPgogICAgICAgICAgICAgICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTkuOTIsMTUuNjQ4Yy0zLjE1OCwwLTUuNzI3LTIuNTY5LTUuNzI3LTUuNzI4czIuNTctNS43MjgsNS43MjctNS43MjhjMy4xNTgsMCw1LjcyOCwyLjU2OSw1LjcyOCw1LjcyOAogICAgICAgICAgICAgICAgICAgIFMxMy4wNzgsMTUuNjQ4LDkuOTIsMTUuNjQ4IE05LjkyLDQuNTI5Yy0yLjk3MiwwLTUuMzksMi40MTktNS4zOSw1LjM5MWMwLDIuOTcyLDIuNDE4LDUuMzkxLDUuMzksNS4zOTEKICAgICAgICAgICAgICAgICAgICBjMi45NzMsMCw1LjM5MS0yLjQxOSw1LjM5MS01LjM5MUMxNS4zMTEsNi45NDgsMTIuODkzLDQuNTI5LDkuOTIsNC41MjkiLz4KICAgICAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik05LjkyLDE0Ljc1Yy0yLjY2MiwwLTQuODI5LTIuMTY3LTQuODI5LTQuODNTNy4yNTgsNS4wOSw5LjkyLDUuMDljMi42NjMsMCw0LjgyOSwyLjE2Nyw0LjgyOSw0LjgzCiAgICAgICAgICAgICAgICAgICAgUzEyLjU4MywxNC43NSw5LjkyLDE0Ljc1IE05LjkyLDUuNjUyYy0yLjM1MywwLTQuMjY4LDEuOTE0LTQuMjY4LDQuMjY4YzAsMi4zNTMsMS45MTUsNC4yNjgsNC4yNjgsNC4yNjgKICAgICAgICAgICAgICAgICAgICBjMi4zNTQsMCw0LjI2OS0xLjkxNCw0LjI2OS00LjI2OEMxNC4xODksNy41NjYsMTIuMjc0LDUuNjUyLDkuOTIsNS42NTIiLz4KICAgICAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik05LjkyLDEzLjg1MWMtMi4xNjcsMC0zLjkzMS0xLjc2NC0zLjkzMS0zLjkzMWMwLTIuMTY3LDEuNzY0LTMuOTMxLDMuOTMxLTMuOTMxCiAgICAgICAgICAgICAgICAgICAgYzIuMTY4LDAsMy45MzEsMS43NjQsMy45MzEsMy45MzFDMTMuODUxLDEyLjA4NywxMi4wODgsMTMuODUxLDkuOTIsMTMuODUxIE05LjkyLDYuNzc1Yy0xLjczNCwwLTMuMTQ1LDEuNDEtMy4xNDUsMy4xNDUKICAgICAgICAgICAgICAgICAgICBjMCwxLjczNCwxLjQxLDMuMTQ0LDMuMTQ1LDMuMTQ0YzEuNzM1LDAsMy4xNDUtMS40MSwzLjE0NS0zLjE0NEMxMy4wNjUsOC4xODYsMTEuNjU1LDYuNzc1LDkuOTIsNi43NzUiLz4KICAgICAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik05LjkyLDEyLjk1M2MtMS42NzIsMC0zLjAzMi0xLjM2LTMuMDMyLTMuMDMzYzAtMS42NzIsMS4zNi0zLjAzMywzLjAzMi0zLjAzM2MxLjY3MywwLDMuMDMzLDEuMzYsMy4wMzMsMy4wMzMKICAgICAgICAgICAgICAgICAgICBDMTIuOTUyLDExLjU5MiwxMS41OTMsMTIuOTUzLDkuOTIsMTIuOTUzIE05LjkyLDcuODk5Yy0xLjExNCwwLTIuMDIyLDAuOTA3LTIuMDIyLDIuMDIyYzAsMS4xMTQsMC45MDcsMi4wMjEsMi4wMjIsMi4wMjEKICAgICAgICAgICAgICAgICAgICBjMS4xMTUsMCwyLjAyMi0wLjkwNywyLjAyMi0yLjAyMUMxMS45NDIsOC44MDYsMTEuMDM1LDcuODk5LDkuOTIsNy44OTkiLz4KICAgICAgICAgICAgPC9nPgogICAgPC9zdmc+"); }
    .benefit__icon .vaporwarm {
      background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICAgICAgICB2aWV3Qm94PSIwIDAgMTkuODQgMTkuODQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE5Ljg0IDE5Ljg0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgICAgIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+CiAgICAgICAgICAgICAgICAuc3Qwe2ZpbGw6I0ZGRkZGRjt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEzLjI5Nyw5LjU4M0w5LjkxOSwzLjg1OEw2LjU0Niw5LjU4M2MtMC40NSwwLjY2MS0wLjcxMywxLjQ1NC0wLjcxMywyLjMxYzAsMi4yNTgsMS44Myw0LjA4OSw0LjA4OCw0LjA4OQogICAgICAgICAgICAgICAgICAgICAgICBzNC4wODgtMS44MzQsNC4wODgtNC4wOTFDMTQuMDA4LDExLjAzNiwxMy43NDUsMTAuMjQ0LDEzLjI5Nyw5LjU4M3ogTTkuOTIsMTUuMTk4Yy0xLjgyMiwwLTMuMjk5LTEuNDc4LTMuMjk5LTMuMwogICAgICAgICAgICAgICAgICAgICAgICBjMC0wLjY5MSwwLjIxMy0xLjMzMSwwLjU3Ni0xLjg2NGwyLjcyMi00LjYyMWwyLjcyNiw0LjYyMWMwLjM2MiwwLjUzMywwLjU3NCwxLjE3MiwwLjU3NCwxLjg2MgogICAgICAgICAgICAgICAgICAgICAgICBDMTMuMjE5LDEzLjcxOCwxMS43NDIsMTUuMTk4LDkuOTIsMTUuMTk4eiIvPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik05LjkyLDcuMDkybC0yLjAxOCwzLjQyNWMtMC4yNjksMC4zOTUtMC40MjcsMC44NjktMC40MjcsMS4zODJjMCwxLjM1LDEuMDk1LDIuNDQ2LDIuNDQ1LDIuNDQ2CiAgICAgICAgICAgICAgICAgICAgICAgIGMxLjM1LDAsMi40NDUtMS4wOTcsMi40NDUtMi40NDdjMC0wLjUxMS0wLjE1Ny0wLjk4NS0wLjQyNS0xLjM4TDkuOTIsNy4wOTJ6Ii8+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOS45MjEsMS4zMjljLTQuNzQ1LDAtOC41OTMsMy44NDctOC41OTMsOC41OWMwLDQuNzQ1LDMuODQ4LDguNTkzLDguNTkzLDguNTkzYzQuNzQ0LDAsOC41OTEtMy44NDgsOC41OTEtOC41OTMKICAgICAgICAgICAgICAgICAgICBDMTguNTEyLDUuMTc2LDE0LjY2NCwxLjMyOSw5LjkyMSwxLjMyOSBNOS45MjEsMi4zMzljNC4xOCwwLDcuNTgsMy40MDEsNy41OCw3LjU4YzAsNC4xODEtMy40LDcuNTgxLTcuNTgsNy41ODEKICAgICAgICAgICAgICAgICAgICBjLTQuMTgsMC03LjU4MS0zLjQtNy41ODEtNy41ODFDMi4zMzksNS43NCw1Ljc0LDIuMzM5LDkuOTIxLDIuMzM5Ii8+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTMuODgzLDEwLjg4OWMwLjA0LDAuMDAyLDAuMDgyLDAuMDAzLDAuMTI0LDAuMDAzYzAuNzM0LDAsMS4xMTctMC4yOTMsMS40NTUtMC41NTFjMC4wNjktMC4wNTIsMC4xMzgtMC4xMDUsMC4yMS0wLjE1NgogICAgICAgICAgICAgICAgICAgIGMwLjA5Ni0wLjA2NywwLjExOS0wLjE5OSwwLjA1Mi0wLjI5NWMtMC4wNjctMC4wOTYtMC4xOTktMC4xMTktMC4yOTUtMC4wNTJjLTAuMDc3LDAuMDU0LTAuMTUxLDAuMTEtMC4yMjUsMC4xNjcKICAgICAgICAgICAgICAgICAgICBjLTAuMzI2LDAuMjQ5LTAuNjA3LDAuNDY0LTEuMTk3LDAuNDY0Yy0wLjA5NSwwLTAuMTgxLTAuMDA2LTAuMjYxLTAuMDE2QzEzLjgsMTAuNTk0LDEzLjg0NSwxMC43MzksMTMuODgzLDEwLjg4OXoiLz4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNS43MjUsMTEuMDJjLTAuMDY3LTAuMDk2LTAuMTk5LTAuMTE5LTAuMjk1LTAuMDUyYy0wLjA3NywwLjA1NC0wLjE1MSwwLjExLTAuMjI1LDAuMTY3CiAgICAgICAgICAgICAgICAgICAgYy0wLjMyNiwwLjI0OS0wLjYwNywwLjQ2NC0xLjE5NywwLjQ2NGMtMC4wMDQsMC0wLjAwNywwLTAuMDExLDBjMC4wMDcsMC4wOTcsMC4wMTEsMC4xOTQsMC4wMTEsMC4yOTMKICAgICAgICAgICAgICAgICAgICBjMCwwLjA0NC0wLjAwMSwwLjA4OC0wLjAwMiwwLjEzMWMwLjAwMSwwLDAuMDAxLDAsMC4wMDEsMGMwLjczNCwwLDEuMTE4LTAuMjkzLDEuNDU2LTAuNTUxYzAuMDY5LTAuMDUyLDAuMTM4LTAuMTA1LDAuMjEtMC4xNTYKICAgICAgICAgICAgICAgICAgICBDMTUuNzY5LDExLjI0OCwxNS43OTIsMTEuMTE2LDE1LjcyNSwxMS4wMnoiLz4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNS43MjUsMTIuMTVjLTAuMDY3LTAuMDk2LTAuMTk5LTAuMTE5LTAuMjk1LTAuMDUyYy0wLjA3NywwLjA1NC0wLjE1MSwwLjExLTAuMjI1LDAuMTY3CiAgICAgICAgICAgICAgICAgICAgYy0wLjMyNiwwLjI0OS0wLjYwNywwLjQ2NC0xLjE5NywwLjQ2NGMtMC4wMjksMC0wLjA1OC0wLjAwMS0wLjA4Ni0wLjAwMmMtMC4wMywwLjE0Mi0wLjA2NywwLjI4MS0wLjExLDAuNDE4CiAgICAgICAgICAgICAgICAgICAgYzAuMDYzLDAuMDA1LDAuMTI3LDAuMDA4LDAuMTk2LDAuMDA4YzAuNzM0LDAsMS4xMTctMC4yOTMsMS40NTUtMC41NTFjMC4wNjktMC4wNTIsMC4xMzgtMC4xMDUsMC4yMS0wLjE1NgogICAgICAgICAgICAgICAgICAgIEMxNS43NjksMTIuMzc5LDE1Ljc5MiwxMi4yNDYsMTUuNzI1LDEyLjE1eiIvPgogICAgICAgICAgICAgICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTExLjU2Niw5Ljg4NGwtMC4yNTUtMC40MzNjLTEuNDE0LDAuMDIyLTIuMDQxLDEuMDc4LTIuMDY3LDEuMTIzYy0wLjA1OCwwLjEwMS0wLjAyNCwwLjIzLDAuMDc3LDAuMjg5CiAgICAgICAgICAgICAgICAgICAgYzAuMTAxLDAuMDU3LDAuMjMsMC4wMjQsMC4yOS0wLjA3NmMwLjAyMi0wLjAzNywwLjU1LTAuOTEzLDEuNzQ0LTAuOTEzQzExLjQzLDkuODc0LDExLjUsOS44NzcsMTEuNTY2LDkuODg0eiIvPgogICAgICAgICAgICAgICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTEyLjI4MywxMS4yN2MtMC4wNTUtMC4yMDctMC4xMzYtMC40MDQtMC4yNC0wLjU4NmMtMC4xOTEtMC4wNjMtMC40MTYtMC4xMDMtMC42ODktMC4xMDMKICAgICAgICAgICAgICAgICAgICBjLTEuNDQ1LDAtMi4wODQsMS4wNzgtMi4xMTEsMS4xMjRjLTAuMDU4LDAuMTAxLTAuMDI0LDAuMjMsMC4wNzcsMC4yODljMC4xMDEsMC4wNTgsMC4yMywwLjAyNSwwLjI5LTAuMDc2CiAgICAgICAgICAgICAgICAgICAgYzAuMDIyLTAuMDM3LDAuNTUtMC45MTMsMS43NDQtMC45MTNDMTEuNzgzLDExLjAwNCwxMi4wNDgsMTEuMTE1LDEyLjI4MywxMS4yN3oiLz4KICAgICAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMi4zMDksMTIuNDE3YzAuMDMyLTAuMTUsMC4wNTEtMC4zMDUsMC4wNTUtMC40NjNjLTAuMjUzLTAuMTM5LTAuNTY3LTAuMjQzLTEuMDA5LTAuMjQzCiAgICAgICAgICAgICAgICAgICAgYy0xLjQ0NSwwLTIuMDg0LDEuMDc4LTIuMTExLDEuMTI0Yy0wLjA1OCwwLjEwMS0wLjAyNCwwLjIzLDAuMDc3LDAuMjg5YzAuMTAxLDAuMDU3LDAuMjMsMC4wMjQsMC4yOS0wLjA3NgogICAgICAgICAgICAgICAgICAgIGMwLjAyMi0wLjAzNywwLjU1LTAuOTEzLDEuNzQ0LTAuOTEzQzExLjc5OCwxMi4xMzUsMTIuMDY3LDEyLjI1NCwxMi4zMDksMTIuNDE3eiIvPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9zdmc+"); }
    .benefit__icon .ventilate {
      background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICAgICAgICB2aWV3Qm94PSIwIDAgMTkuODQgMTkuODQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE5Ljg0IDE5Ljg0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgICAgIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+CiAgICAgICAgICAgICAgICAuc3Qwe2ZpbGw6I0ZGRkZGRjt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE4LjUxMiw5LjkyYzAsNC43NDUtMy44NDcsOC41OTItOC41OTIsOC41OTJjLTQuNzQ0LDAtOC41OTItMy44NDctOC41OTItOC41OTJjMC00Ljc0NCwzLjg0Ny04LjU5Miw4LjU5Mi04LjU5MgogICAgICAgICAgICAgICAgICAgIEMxNC42NjUsMS4zMjgsMTguNTEyLDUuMTc1LDE4LjUxMiw5LjkyIi8+CiAgICAgICAgICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTQuMTA1LDYuOTI1Yy0wLjY1OSwwLTEuMjU3LDAuMjY3LTEuNjg4LDAuNjk5bC0wLjk2OCwwLjk2N2MtMC4zNzEtMC40MjktMC45MTgtMC43MDMtMS41MjktMC43MDMKICAgICAgICAgICAgICAgICAgICBjLTAuMjA3LDAtMC40MDcsMC4wMzItMC41OTYsMC4wOTFjMC4wNjgtMS4yNTksMS4xMDctMi4yNiwyLjM4Mi0yLjI2YzAtMS4zMi0xLjA3LTIuMzg5LTIuMzg4LTIuMzg5CiAgICAgICAgICAgICAgICAgICAgYy0xLjMyLDAtMi4zODksMS4wNjktMi4zODksMi4zODljMCwwLjY1OSwwLjI2NywxLjI1NywwLjY5OSwxLjY5bDAuOTczLDAuOTczQzguMTcxLDguNzUzLDcuODk4LDkuMyw3Ljg5OCw5LjkxCiAgICAgICAgICAgICAgICAgICAgYzAsMC4yMDUsMC4wMzEsMC40MDQsMC4wODksMC41OTFDNi43MzEsMTAuNDI5LDUuNzM1LDkuMzkyLDUuNzM1LDguMTJjLTEuMzIsMC0yLjM4OSwxLjA2OS0yLjM4OSwyLjM4OQogICAgICAgICAgICAgICAgICAgIGMwLDEuMzE5LDEuMDY5LDIuMzg4LDIuMzg5LDIuMzg4YzAuNjU5LDAsMS4yNTctMC4yNjcsMS42ODgtMC42OTlsMC45NjgtMC45NjhjMC4zNzEsMC40MywwLjkxOCwwLjcwMiwxLjUyOSwwLjcwMgogICAgICAgICAgICAgICAgICAgIGMwLjIwNywwLDAuNDA4LTAuMDMxLDAuNTk2LTAuMDg5Yy0wLjA2OCwxLjI1OS0xLjEwNiwyLjI1OS0yLjM4MiwyLjI1OWMwLDEuMzE5LDEuMDcsMi4zODksMi4zODksMi4zODkKICAgICAgICAgICAgICAgICAgICBjMS4zMTksMCwyLjM4OS0xLjA3LDIuMzg5LTIuMzg5YzAtMC42Ni0wLjI2Ny0xLjI1Ni0wLjY5OS0xLjY4OGwtMC45NzMtMC45NzRjMC40MjktMC4zNzEsMC43MDMtMC45MTgsMC43MDMtMS41MjkKICAgICAgICAgICAgICAgICAgICBjMC0wLjIwNS0wLjAzMS0wLjQwMy0wLjA4OS0wLjU5MWMxLjI1NiwwLjA3MSwyLjI1MiwxLjEwOCwyLjI1MiwyLjM4MmMxLjMyLDAsMi4zODktMS4wNjksMi4zODktMi4zODgKICAgICAgICAgICAgICAgICAgICBDMTYuNDk0LDcuOTk0LDE1LjQyNSw2LjkyNSwxNC4xMDUsNi45MjUgTTEwLjUyMSwxMC43MjFjLTAuMDUzLDAuMDQtMC4xMTEsMC4wNzQtMC4xNzEsMC4xMDNjLTAuMTMsMC4wNjItMC4yNzUsMC4wOTctMC40MywwLjA5NwogICAgICAgICAgICAgICAgICAgIGMtMC4zMzIsMC0wLjYyNi0wLjE2Mi0wLjgxMS0wLjQxMWMtMC4wNC0wLjA1NC0wLjA3NC0wLjExMS0wLjEwMy0wLjE3M2MtMC4wNjItMC4xMy0wLjA5Ni0wLjI3NS0wLjA5Ni0wLjQyOAogICAgICAgICAgICAgICAgICAgIGMwLTAuMzMyLDAuMTYxLTAuNjI2LDAuNDEtMC44MTFDOS4zNzIsOS4wNiw5LjQyOSw5LjAyNSw5LjQ5LDguOTk3YzAuMTMxLTAuMDYyLDAuMjc2LTAuMDk4LDAuNDMtMC4wOTgKICAgICAgICAgICAgICAgICAgICBjMC4zMzIsMCwwLjYyNywwLjE2MiwwLjgxMiwwLjQxYzAuMDQsMC4wNTUsMC4wNzQsMC4xMTMsMC4xMDMsMC4xNzRjMC4wNjEsMC4xMywwLjA5NiwwLjI3NSwwLjA5NiwwLjQyNwogICAgICAgICAgICAgICAgICAgIEMxMC45MzEsMTAuMjQzLDEwLjc2OCwxMC41MzgsMTAuNTIxLDEwLjcyMSIvPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9zdmc+"); }
    .benefit__icon .wick {
      background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICAgICAgICB2aWV3Qm94PSIwIDAgMTkuODQgMTkuODQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE5Ljg0IDE5Ljg0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgICAgIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+CiAgICAgICAgICAgICAgICAuc3Qwe2ZpbGw6I0ZGRkZGRjt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE4LjQ4NCw5LjkxOWMwLDQuNzQ2LTMuODM1LDguNTkzLTguNTY0LDguNTkzYy00LjczLDAtOC41NjUtMy44NDctOC41NjUtOC41OTNjMC00Ljc0NCwzLjgzNS04LjU5LDguNTY1LTguNTkKICAgICAgICAgICAgICAgICAgICBDMTQuNjUsMS4zMjgsMTguNDg0LDUuMTc0LDE4LjQ4NCw5LjkxOSIvPgogICAgICAgICAgICAgICAgPHJlY3QgeD0iNC4zNzkiIHk9IjEyLjQ0NSIgY2xhc3M9InN0MCIgd2lkdGg9IjExLjA4MSIgaGVpZ2h0PSIxLjAxMiIvPgogICAgICAgICAgICAgICAgPHJlY3QgeD0iNS4zMzkiIHk9IjcuMDcxIiBjbGFzcz0ic3QwIiB3aWR0aD0iMS4wMDciIGhlaWdodD0iMy42NjkiLz4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iNS44NDIsNS40MjYgNS44NDIsNS40MjYgNC4xNCw3LjEzMiA3LjU0NCw3LjEzMiAJIi8+CiAgICAgICAgICAgICAgICA8cmVjdCB4PSI5LjQ2NCIgeT0iNy4wNzEiIGNsYXNzPSJzdDAiIHdpZHRoPSIxLjAwNiIgaGVpZ2h0PSIzLjY2OSIvPgogICAgICAgICAgICAgICAgPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSI5Ljk2OSw1LjQyNiA5Ljk2OSw1LjQyNiA4LjI2Niw3LjEzMiAxMS42Nyw3LjEzMiAJIi8+CiAgICAgICAgICAgICAgICA8cmVjdCB4PSIxMy40NDYiIHk9IjcuMDcxIiBjbGFzcz0ic3QwIiB3aWR0aD0iMS4wMDgiIGhlaWdodD0iMy42NjkiLz4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTQsNS40MjYgMTQsNS40MjYgMTIuMjk2LDcuMTMyIDE1LjcwMSw3LjEzMiAJIi8+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L3N2Zz4="); }
  .benefit__info h3 {
    font-size: 13px;
    color: #313131;
    margin-bottom: 3px; }
  .benefit__info p {
    line-height: 18px;
    color: #9E9E9E; }

@media (max-width: 740px) {
  .description {
    margin-left: 10px;
    margin-right: 10px; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.store-locator {
  margin: 0 auto 60px auto;
  overflow: hidden;
  max-width: 1366px;
  width: 1366px;
  padding-top: 45px;
  display: flex; }
  @media (min-width: 320px) and (max-width: 740px) {
    .store-locator {
      padding-left: 10px;
      padding-right: 10px; } }
  @media (min-width: 741px) and (max-width: 1024px) {
    .store-locator {
      padding-left: 30px;
      padding-right: 30px; } }
  @media (min-width: 1025px) {
    .store-locator {
      padding-left: 40px;
      padding-right: 40px; } }
  .store-locator__no-shops {
    padding: 20px;
    text-align: center; }
  .store-locator__sidebar {
    width: 21.71%; }
  .store-locator__main {
    width: 77.39%;
    position: relative; }
  .store-locator__title {
    font-weight: normal;
    text-transform: uppercase;
    font-size: 24px;
    font-family: "Klein-Medium-Condensed", Klein-Medium, Calibri, sans-serif; }
  .store-locator__store-count {
    color: #9E9E9E;
    padding-left: 20px;
    margin: 10px 0; }
  .store-locator__input {
    background: #f4f4f4;
    padding: 19px 10px; }
    .store-locator__input button {
      vertical-align: top;
      display: inline-block; }
    .store-locator__input input {
      background-color: white;
      border: none;
      padding: 12px 12px;
      font-size: 12px;
      letter-spacing: 0.5px;
      display: inline-block;
      width: 35%;
      margin-right: 19px; }
      .store-locator__input input.\--error {
        border-bottom: 2px solid #d0021b; }
    .store-locator__input__error {
      color: #d0021b;
      display: block;
      margin-top: 10px; }
    .store-locator__input__search-button {
      margin-right: 11px; }
    .store-locator__input__my-location-button {
      width: 250px; }
  .store-locator__load-more {
    width: 270px;
    margin: 30px auto 0 auto;
    display: block; }

.pac-container {
  z-index: 1000;
  border-top: none;
  box-sizing: content-box;
  box-shadow: none;
  border-radius: 0;
  padding-bottom: 10px; }
  .pac-container .pac-item {
    font-family: "Klein-Medium", Calibri, sans-serif;
    padding: 10px 10px 10px 14px;
    border: none;
    line-height: 15px;
    cursor: pointer; }
    .pac-container .pac-item .pac-item-query {
      font-size: 12px;
      font-weight: normal; }
    .pac-container .pac-item .pac-icon-marker {
      display: none; }
    .pac-container .pac-item > span:last-child {
      font-size: 12px;
      margin-left: 5px; }
    .pac-container .pac-item:hover, .pac-container .pac-item .pac-item-selected {
      background: #f4f4f4; }
  .pac-container:after {
    display: none; }

@media (max-width: 1024px) {
  .store-locator {
    width: 100%; }
    .store-locator__sidebar {
      display: none; }
    .store-locator__main {
      width: 100%; }
    .store-locator .button {
      width: auto; } }

@media (max-width: 740px) {
  .app--mobile .store-locator {
    padding-top: 15px;
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0.5;
    letter-spacing: 0.5px; } }
  @media (max-width: 740px) and (min-width: 1025px) {
    .app--mobile .store-locator {
      font-family: "Klein-Medium", Calibri, sans-serif;
      font-size: 12px;
      font-weight: normal;
      line-height: 18px;
      letter-spacing: 0.4px; } }

@media (max-width: 740px) {
    .app--mobile .store-locator h3 {
      font-size: 15px;
      margin-bottom: 11px; }
    .app--mobile .store-locator__title {
      font-size: 18px;
      letter-spacing: 0.4px;
      font-weight: normal;
      line-height: normal;
      margin-bottom: 10px; }
    .app--mobile .store-locator__store-count {
      margin: 6px 0 1px 0; }
    .app--mobile .store-locator__input {
      padding: 20px 10px; }
      .app--mobile .store-locator__input input {
        width: 100%;
        box-sizing: border-box;
        height: 45px;
        margin: 0; }
      .app--mobile .store-locator__input .button {
        width: 100%; }
      .app--mobile .store-locator__input__search-button {
        margin: 10px 0; }
    .app--mobile .store-locator__shop {
      flex-direction: column;
      padding: 28px 20px; }
    .app--mobile .store-locator__shop-info {
      width: auto; }
      .app--mobile .store-locator__shop-info__address {
        letter-spacing: 0.5px; }
      .app--mobile .store-locator__shop-info__link {
        margin-top: 15px; }
    .app--mobile .store-locator__shop-hours {
      margin-top: 30px; }
      .app--mobile .store-locator__shop-hours__container {
        height: auto;
        margin-bottom: 20px; }
      .app--mobile .store-locator__shop-hours__time {
        line-height: 19px; }
        .app--mobile .store-locator__shop-hours__time > span {
          width: 43px; }
    .app--mobile .store-locator__services {
      margin-top: 10px; }
      .app--mobile .store-locator__services__title {
        margin-bottom: 5px; }
      .app--mobile .store-locator__services__service {
        line-height: 28px; }
        .app--mobile .store-locator__services__service:before {
          margin-right: 7px; }
    .app--mobile .store-locator__load-more.button {
      width: 100%;
      margin-top: 22px; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.store-locator-links {
  margin: 40px 0 0 10px; }
  .store-locator-links ul {
    list-style: none;
    text-transform: uppercase; }
    .store-locator-links ul li {
      margin-bottom: 13px; }
      .store-locator-links ul li a {
        color: #6d6d6d; }
        .store-locator-links ul li a:hover {
          text-decoration: none;
          color: #313131; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.store-locator-map {
  height: 345px;
  width: 100%;
  margin-top: 23px;
  position: relative; }
  .store-locator-map__zoom-icons {
    position: absolute;
    right: 20px;
    bottom: 11px; }
    .store-locator-map__zoom-icons__icon {
      display: inline-block;
      width: 40px;
      height: 40px;
      background: black;
      position: relative;
      margin-right: 10px;
      opacity: 0.8;
      transition: opacity .3s ease-in-out; }
      .store-locator-map__zoom-icons__icon:before, .store-locator-map__zoom-icons__icon:after {
        content: "";
        position: absolute;
        width: 16px;
        height: 1px;
        background: white;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0; }
      .store-locator-map__zoom-icons__icon:after {
        transform: rotate(90deg); }
      .store-locator-map__zoom-icons__icon.\--minus {
        margin-right: 0; }
        .store-locator-map__zoom-icons__icon.\--minus:after {
          display: none; }
      .store-locator-map__zoom-icons__icon:hover {
        opacity: 1; }
  .store-locator-map__shop {
    width: 50px;
    height: 50px;
    position: relative;
    left: -25px;
    top: -25px;
    font-family: "Klein-Medium", Calibri, sans-serif;
    transition: all .4s ease-in-out; }
    .store-locator-map__shop__logo {
      background: black;
      width: 50px;
      height: 50px;
      text-align: center;
      color: white;
      font-size: 26px;
      line-height: 50px;
      flex-shrink: 0; }
    .store-locator-map__shop__name {
      font-family: "Klein-Medium", Calibri, sans-serif;
      font-size: 13px;
      font-weight: normal;
      line-height: 20px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      margin-bottom: 5px; }
      @media (min-width: 1025px) {
        .store-locator-map__shop__name {
          font-family: "Klein-Medium", Calibri, sans-serif;
          font-size: 13px;
          font-weight: normal;
          line-height: 20px;
          letter-spacing: 0.5px; } }
    .store-locator-map__shop__address {
      letter-spacing: 0.4px;
      line-height: 18px;
      color: #6d6d6d; }
    .store-locator-map__shop__link {
      text-decoration: underline;
      text-transform: uppercase;
      margin-top: 12px;
      display: block; }
    .store-locator-map__shop__container {
      display: none; }
    .store-locator-map__shop__close {
      width: 20px;
      height: 20px;
      display: block;
      position: absolute;
      top: 10px;
      right: 10px; }
      .store-locator-map__shop__close:before, .store-locator-map__shop__close:after {
        content: "";
        width: 1px;
        height: 16px;
        background-color: black;
        position: absolute;
        top: 0;
        left: 10px; }
      .store-locator-map__shop__close:before {
        transform: rotate(45deg); }
      .store-locator-map__shop__close:after {
        transform: rotate(-45deg); }
    .store-locator-map__shop.\--opened {
      width: 306px;
      height: auto;
      padding-bottom: 20px;
      background: white;
      z-index: 100;
      display: flex;
      overflow: hidden;
      top: -69px;
      left: -153px; }
      .store-locator-map__shop.\--opened .store-locator-map__shop__container {
        display: block;
        margin: 20px 0 0 13px;
        width: 224px;
        flex-shrink: 0; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.store-locator__shop {
  font-family: "Klein-Medium", Calibri, sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 19px;
  letter-spacing: 0.5;
  padding: 30px 40px;
  display: flex; }
  @media (min-width: 1025px) {
    .store-locator__shop {
      font-family: "Klein-Medium", Calibri, sans-serif;
      font-size: 12px;
      font-weight: normal;
      line-height: 18px;
      letter-spacing: 0.4px; } }
  .store-locator__shop:nth-child(even) {
    background: #f4f4f4; }
  .store-locator__shop h3 {
    font-family: "Klein-Medium", Calibri, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 5px; }
    @media (min-width: 1025px) {
      .store-locator__shop h3 {
        font-family: "Klein-Medium", Calibri, sans-serif;
        font-size: 13px;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: 0.5px; } }

.store-locator__shop-info {
  width: 345px;
  margin-right: 20px; }
  .store-locator__shop-info__address {
    letter-spacing: 0.4px;
    line-height: 18px;
    color: #6d6d6d; }
  .store-locator__shop-info__link {
    text-decoration: underline;
    text-transform: uppercase;
    margin-top: 19px;
    display: block; }

.store-locator__shop-hours {
  width: 400px;
  margin-right: 40px; }
  .store-locator__shop-hours__container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 73px; }
  .store-locator__shop-hours__time {
    display: block;
    margin-right: 65px;
    line-height: 18px;
    color: #6d6d6d; }
    .store-locator__shop-hours__time > span {
      text-transform: capitalize;
      width: 56px;
      display: inline-block; }

.store-locator__shop-services {
  display: none; }
  .store-locator__shop-services__service {
    display: block;
    line-height: 21px;
    color: #6d6d6d; }
    .store-locator__shop-services__service:before {
      content: "";
      width: 7px;
      height: 7px;
      display: inline-block;
      border-radius: 20px;
      background-color: #9E9E9E;
      margin-right: 10px; }
    .store-locator__shop-services__service.\--active {
      background-color: #7ED321; }

@media (max-width: 1024px) {
  .store-locator__shop-hours__time {
    margin-right: 25px; }
  .store-locator__shop-info {
    margin-right: 0; } }

@media (max-width: 740px) {
  .store-locator__shop {
    flex-direction: column;
    padding: 28px 20px; }
  .store-locator__shop-info {
    width: auto; }
    .store-locator__shop-info__address {
      letter-spacing: 0.5px; }
    .store-locator__shop-info__link {
      margin-top: 15px; }
  .store-locator__shop-hours {
    margin-top: 30px; }
    .store-locator__shop-hours__container {
      height: auto;
      margin-bottom: 20px; }
    .store-locator__shop-hours__time {
      line-height: 19px; }
      .store-locator__shop-hours__time > span {
        width: 43px; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.cookie-notice {
  background-color: #e4e4e4;
  padding: 30px 20px;
  max-width: 600px; }
  .cookie-notice h3 {
    font-size: 14px;
    letter-spacing: 0.4px;
    margin: 2px 0 16px 0;
    text-transform: uppercase;
    color: #000; }
  .cookie-notice__text {
    color: #6d6d6d;
    font-size: 11px;
    letter-spacing: 0.4px;
    line-height: 18px;
    margin-bottom: 20px; }
    .cookie-notice__text a {
      color: #000000;
      text-decoration: underline; }
  .cookie-notice__actions {
    display: block; }
    .cookie-notice__actions .button {
      display: inline-block;
      white-space: nowrap;
      width: 100%;
      margin-bottom: 10px; }
      .cookie-notice__actions .button:not(:last-of-type) {
        margin-right: 10px; }

.cookie-notice-more {
  background-color: #e4e4e4;
  padding: 30px 20px;
  max-width: 800px; }
  .cookie-notice-more label {
    color: #000;
    margin-bottom: 15px;
    font-size: 15px;
    letter-spacing: 0.5px;
    line-height: 19px;
    text-transform: uppercase; }
  .cookie-notice-more p {
    margin-bottom: 30px;
    color: #6d6d6d;
    font-size: 11px;
    letter-spacing: 0.4px;
    line-height: 18px;
    margin-bottom: 30px; }
    .cookie-notice-more p a {
      color: #313131;
      text-decoration: underline; }
    .cookie-notice-more p:last-of-type {
      margin-bottom: 20px; }
  .cookie-notice-more button {
    width: 50%; }

@media (min-width: 741px) {
  .cookie-notice {
    padding: 30px 40px 20px 40px; }
    .cookie-notice h3 {
      font-size: 12px; }
    .cookie-notice__text {
      flex-grow: 1; }
    .cookie-notice__actions {
      flex-direction: column;
      justify-content: center; }
      .cookie-notice__actions .button {
        width: 250px;
        margin-bottom: 0; }
        .cookie-notice__actions .button:not(:last-of-type) {
          margin-right: 20px; }
  .cookie-notice-more {
    padding: 30px 40px; }
    .cookie-notice-more label {
      font-size: 12px;
      letter-spacing: 0.4px;
      line-height: 18px; }
    .cookie-notice-more p {
      margin-bottom: 20px; }
      .cookie-notice-more p:last-of-type {
        margin-bottom: 40px; }
    .cookie-notice-more button {
      width: auto;
      min-width: 254px; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.country-switch {
  position: relative;
  background-color: #313131;
  width: 100%;
  bottom: 0; }
  .country-switch__content {
    display: flex;
    align-items: center; }
    @media (min-width: 320px) and (max-width: 740px) {
      .country-switch__content {
        padding-left: 10px;
        padding-right: 10px; } }
    @media (min-width: 741px) and (max-width: 1024px) {
      .country-switch__content {
        padding-left: 30px;
        padding-right: 30px; } }
    @media (min-width: 1025px) {
      .country-switch__content {
        padding-left: 40px;
        padding-right: 40px; } }
  .country-switch__title {
    color: #ffffff;
    text-transform: uppercase; }
  .country-switch__link {
    color: #ffffff;
    text-transform: uppercase;
    display: flex;
    align-items: center; }
    .country-switch__link-flag-icon {
      display: inline-block;
      width: 13px;
      height: 13px; }
    .country-switch__link-text {
      padding-left: 5px;
      text-decoration: underline; }
  .country-switch .button--close {
    width: 30px;
    height: 30px;
    margin-left: 43px;
    margin-right: -7px; }

@media (max-width: 740px) {
  .country-switch {
    padding-top: 20px;
    padding-bottom: 17px; }
    .country-switch .button--close {
      position: absolute;
      top: -7px;
      right: 20px; }
    .country-switch__title {
      margin-right: 20px;
      margin-bottom: 31px; }
    .country-switch__link-flag-icon {
      width: 18px;
      height: 18px; }
    .country-switch__content {
      position: relative;
      padding-left: 20px;
      padding-right: 20px;
      flex-direction: column;
      align-items: normal;
      flex-wrap: nowrap; } }

@media (min-width: 741px) {
  .country-switch__content {
    width: 100%;
    max-width: 1920px;
    height: 50px;
    margin: 0 auto; }
  .country-switch__link {
    margin-left: auto; } }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.is-hidden {
  display: none; }

/**
  Here are the variables and functions for getting the font in the right shape

  font-size may need to be 'rem', in order to have a more stable scaling,
  using 'em' can create confusion has sometimes an unnatural outcome,
  this decision needs to be made mindfully

  please use font-size sparingly as maintenance can be hard.
  if you need to overwrite the font-size maybe 'inherit' is solving it.
 */
/**
  @TODO add calculation for letter space depending on font-size if possible,
  could be that this variates on other edge cases
  if calculation is done, replace all letter-spacing properties by this function
*/
.notification {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 100; }