/*----------------------
SIZES
font-size: calc(11px + (18 - 11) * ((100vw - 390px) / (1920 - 390)));
----------------------*/
.t12,
.t12 p,
.t12 h1,
.t12 h2,
.t12 h3,
.t12 h4,
.t12 h5,
.t12 h6,
.t12 li,
.errors {
  font-size: 12px;
  line-height: 1.1em;
}

.t14-12,
.t14-12 p,
.t14-12 h1,
.t14-12 h2,
.t14-12 h3,
.t14-12 h4,
.t14-12 h5,
.t14-12 h6,
.t14-12 li,
.page-legal__text p,
.page-legal__text h5, 
.page-legal__text h6,
.page-legal__text li {
  font-size: 14px;
  line-height: 1.1em;
  @media (max-width: 640px) {
    font-size: 12px;
  }
}

.t14,
.t14 p,
.t14 h1,
.t14 h2,
.t14 h3,
.t14 h4,
.t14 h5,
.t14 h6,
.t14 li,
.contact-form__content input,
.contact-form__content select {
  font-size: 14px;
  line-height: 1.2em;
}
.cart-notification__subtotal .t14 {
  @media (max-width: 640px) {
    font-size: 20px;
  }
}

.t16,
.t16 p,
.t16 h1,
.t16 h2,
.t16 h3,
.t16 h4,
.t16 h5,
.t16 h6,
.t16 li {
  font-size: 16px;
  line-height: 1.2em;
}

.t18-12,
.t18-12 p,
.t18-12 h1,
.t18-12 h2,
.t18-12 h3,
.t18-12 h4,
.t18-12 h5,
.t18-12 h6,
.t18-12 li {
  font-size: calc(12px + (18 - 12) * ((100vw - 390px) / (1920 - 390)));
  line-height: 1.2em;
  @media (min-width: 1920px) {
    font-size: 18px;
  }
}
@media (max-width: 900px) {
  .header__menu--nav__links .t18-12,
  .t18-12.cart-notification__header__title {
    font-size: 14px;
  }
  .play-pause-button.t18-12 {
    font-size: 18px;
  }
}


.t18-14,
.t18-14 p,
.t18-14 h1,
.t18-14 h2,
.t18-14 h3,
.t18-14 h4,
.t18-14 h5,
.t18-14 h6,
.t18-14 li {
  font-size: calc(14px + (18 - 14) * ((100vw - 390px) / (1920 - 390)));
  line-height: 1.2em;
  @media (min-width: 1920px) {
    font-size: 18px;
  }
  @media (max-width: 390px) {
    font-size: 14px;
  }
}

.t20,
.t20 p,
.t20 h1,
.t20 h2,
.t20 h3,
.t20 h4,
.t20 h5,
.t20 h6,
.t20 li {
  line-height: 1em;
  font-size: 20px;
  letter-spacing: .05em;
}


.t40-20,
.t40-20 p,
.t40-20 h1,
.t40-20 h2,
.t40-20 h3,
.t40-20 h4,
.t40-20 h5,
.t40-20 h6,
.t40-20 li,
.page-legal__text h1,
.page-legal__text h2,
.page-legal__text h3,
.page-legal__text h4 {
  line-height: 1em;
  font-size: 40px;
  @media (max-width: 1920px) {
    font-size: calc(30px + (40 - 30) * ((100vw - 1440px) / (1920 - 1440)));
  }
  @media (max-width: 1440px) {
    font-size: calc(20px + (30 - 20) * ((100vw - 390px) / (1440 - 390))) !important;
  }
}