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

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

.bg--tallorders-green {
  --color-primary: var(--color-white);
  background-color: var(--tallorders-green);
  color: var(--color-white);
}

.bg--tallorders-orange {
  --color-primary: var(--color-white);
  background-color: var(--tallorders-orange);
  color: var(--color-white);
}

.bg--tallorders-blue {
  --color-primary: var(--color-white);
  background-color: var(--tallorders-blue);
  color: var(--color-white);
}

.bg--tallorders-purple {
  --color-primary: var(--color-white);
  background-color: var(--tallorders-purple);
  color: var(--color-white);
}

.bg--tallorders-mint {
  background-color: var(--tallorders-mint);
}

.bg--tallorders-tan {
  --color-primary: var(--color-white);
  background-color: var(--tallorders-tan);
  color: var(--color-white);
}

.bg--charcoal {
  --color-primary: var(--color-secondary);
  background-color: var(--color-charcoal);
  color: var(--color-white);
}

.bg--dark-grey {
  background-color: var(--color-dark-grey);
}

.bg--light-grey {
  background-color: var(--color-light-grey);
}

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

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

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

.font-family--amatic {
  font-family: var(--font-amatic);
}

.font-family--sans-serif {
  font-family: var(--font-sans-serif);
}

.font-size--tiny {
  font-size: 0.6944444444rem;
}
@media all and (min-width: 768px) {
  .font-size--tiny {
    font-size: calc(0.6944444444rem + (1vw - 7.68px) * -0.1378340366);
  }
}
@media all and (min-width: 1400px) {
  .font-size--tiny {
    font-size: 0.64rem;
  }
}

.font-size--tiny-start {
  font-size: 0.6944444444rem;
}
@media all and (min-width: 768px) {
  .font-size--tiny-start {
    font-size: calc(0.6944444444rem + (1vw - 7.68px) * 0.7735583685);
  }
}
@media all and (min-width: 1400px) {
  .font-size--tiny-start {
    font-size: 1rem;
  }
}

.font-size--tiny-end {
  font-size: 1rem;
}
@media all and (min-width: 768px) {
  .font-size--tiny-end {
    font-size: calc(1rem + (1vw - 7.68px) * -0.9113924051);
  }
}
@media all and (min-width: 1400px) {
  .font-size--tiny-end {
    font-size: 0.64rem;
  }
}

.font-size--xsmall {
  font-size: 0.8333333333rem;
}
@media all and (min-width: 768px) {
  .font-size--xsmall {
    font-size: calc(0.8333333333rem + (1vw - 7.68px) * -0.0843881857);
  }
}
@media all and (min-width: 1400px) {
  .font-size--xsmall {
    font-size: 0.8rem;
  }
}

.font-size--xsmall-start {
  font-size: 0.8333333333rem;
}
@media all and (min-width: 768px) {
  .font-size--xsmall-start {
    font-size: calc(0.8333333333rem + (1vw - 7.68px) * 0.4219409283);
  }
}
@media all and (min-width: 1400px) {
  .font-size--xsmall-start {
    font-size: 1rem;
  }
}

.font-size--xsmall-end {
  font-size: 1rem;
}
@media all and (min-width: 768px) {
  .font-size--xsmall-end {
    font-size: calc(1rem + (1vw - 7.68px) * -0.5063291139);
  }
}
@media all and (min-width: 1400px) {
  .font-size--xsmall-end {
    font-size: 0.8rem;
  }
}

.font-size--small {
  font-size: 0.9128709292rem;
}
@media all and (min-width: 768px) {
  .font-size--small {
    font-size: calc(0.9128709292rem + (1vw - 7.68px) * -0.046693008);
  }
}
@media all and (min-width: 1400px) {
  .font-size--small {
    font-size: 0.894427191rem;
  }
}

.font-size--small-start {
  font-size: 0.9128709292rem;
}
@media all and (min-width: 768px) {
  .font-size--small-start {
    font-size: calc(0.9128709292rem + (1vw - 7.68px) * 0.2205799261);
  }
}
@media all and (min-width: 1400px) {
  .font-size--small-start {
    font-size: 1rem;
  }
}

.font-size--small-end {
  font-size: 1rem;
}
@media all and (min-width: 768px) {
  .font-size--small-end {
    font-size: calc(1rem + (1vw - 7.68px) * -0.2672729342);
  }
}
@media all and (min-width: 1400px) {
  .font-size--small-end {
    font-size: 0.894427191rem;
  }
}

.font-size--large {
  font-size: 1.2rem;
}
@media all and (min-width: 768px) {
  .font-size--large {
    font-size: calc(1.2rem + (1vw - 7.68px) * 0.1265822785);
  }
}
@media all and (min-width: 1400px) {
  .font-size--large {
    font-size: 1.25rem;
  }
}

.font-size--large-start {
  font-size: 1.2rem;
}
@media all and (min-width: 768px) {
  .font-size--large-start {
    font-size: calc(1.2rem + (1vw - 7.68px) * -0.5063291139);
  }
}
@media all and (min-width: 1400px) {
  .font-size--large-start {
    font-size: 1rem;
  }
}

.font-size--large-end {
  font-size: 1rem;
}
@media all and (min-width: 768px) {
  .font-size--large-end {
    font-size: calc(1rem + (1vw - 7.68px) * 0.6329113924);
  }
}
@media all and (min-width: 1400px) {
  .font-size--large-end {
    font-size: 1.25rem;
  }
}

.h1 {
  font-family: var(--font-amatic);
}
.h1 {
  font-size: 2.48832rem;
}
@media all and (min-width: 768px) {
  .h1 {
    font-size: calc(2.48832rem + (1vw - 7.68px) * 1.4264248418);
  }
}
@media all and (min-width: 1400px) {
  .h1 {
    font-size: 3.0517578125rem;
  }
}
.h1 {
  line-height: 1.1;
}

.h2 {
  font-family: var(--font-amatic);
}
.h2 {
  font-size: 2.0736rem;
}
@media all and (min-width: 768px) {
  .h2 {
    font-size: calc(2.0736rem + (1vw - 7.68px) * 0.9311550633);
  }
}
@media all and (min-width: 1400px) {
  .h2 {
    font-size: 2.44140625rem;
  }
}
.h2 {
  line-height: 1.18;
}
.h2.hr {
  display: flex;
  align-items: center;
  margin: 1.5rem 0 0.75rem;
  color: var(--color-primary);
}
.h2.hr::before, .h2.hr::after {
  content: "";
  flex-grow: 1;
  border-top: 2px solid var(--color-primary);
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  clip-path: polygon(0 0, 0 3px, 10% 2px, 30% 3px, 65% 1px, 100% 2px, 100% 0, 85% 0px, 50% 0px, 20% 1px);
}
.h2.hr::before {
  margin-right: 1.5rem;
}
.h2.hr::after {
  margin-left: 1.5rem;
}

.h3 {
  font-size: 1.728rem;
}
@media all and (min-width: 768px) {
  .h3 {
    font-size: calc(1.728rem + (1vw - 7.68px) * 0.5699367089);
  }
}
@media all and (min-width: 1400px) {
  .h3 {
    font-size: 1.953125rem;
  }
}
.h3 {
  line-height: 1.26;
}

.h4 {
  font-size: 1.44rem;
}
@media all and (min-width: 768px) {
  .h4 {
    font-size: calc(1.44rem + (1vw - 7.68px) * 0.3101265823);
  }
}
@media all and (min-width: 1400px) {
  .h4 {
    font-size: 1.5625rem;
  }
}
.h4 {
  line-height: 1.34;
}

.h5 {
  font-size: 1.2rem;
}
@media all and (min-width: 768px) {
  .h5 {
    font-size: calc(1.2rem + (1vw - 7.68px) * 0.1265822785);
  }
}
@media all and (min-width: 1400px) {
  .h5 {
    font-size: 1.25rem;
  }
}
.h5 {
  line-height: 1.42;
}

.h6 {
  font-size: 1rem;
}

.font-weight--normal {
  font-weight: normal;
}

.h1, .h2 {
  font-weight: 500;
}

.h3:not(.font-family--serif), .h4:not(.font-family--serif), .h5:not(.font-family--serif), .h6:not(.font-family--serif) {
  font-weight: bold;
}

.list--style-none {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list--style-none > li {
  margin: 0;
}

.noscroll {
  overflow: hidden;
}

.text-align--center {
  text-align: center;
}

.text-align--right {
  text-align: right;
}

.color--primary {
  color: var(--color-primary);
}

.color--secondary {
  color: var(--color-secondary);
}

.text--uppercase {
  text-transform: uppercase;
}