/* Utility classes (typography, color, animation, icons, layout, spacing). Split out of base.css. */

/* typography classes */
.t-display,
.t-display * {
  font-family: "Barlow Condensed";
  font-size: 3rem;
  font-style: italic;
  font-weight: 700;
  line-height: 2.73rem;
  letter-spacing: 0.06rem;
  text-transform: uppercase;
}

.t-headline,
.t-headline * {
  font-family: Interstate;
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.08rem;
}

.t-title-large,
.t-title-large * {
  font-family: Interstate;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.6875rem;
}

.t-title-medium,
.t-title-medium * {
  font-family: Interstate;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.71875rem;
}

.t-title-small,
.t-title-small * {
  font-family: Interstate;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.375rem;
}

.t-body-large,
.t-body-large * {
  font-family: Interstate;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.71875rem;
}

.t-body-medium,
.t-body-medium * {
  font-family: Interstate;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem;
}

.t-body-small,
.t-body-small * {
  font-family: Interstate;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem;
}

.t-interactive,
.t-interactive * {
  font-family: Interstate;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.375rem;
}

.t-label,
.t-label * {
  font-family: Interstate;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.12rem;
}

.t-eyebrow,
.t-eyebrow * {
  font-family: Interstate;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  line-height: 0.875rem;
  text-transform: uppercase;
}

.t-uppercase,
.t-uppercase * {
  text-transform: uppercase !important;
}

.t-italic,
.t-italic * {
  font-style: italic !important;
}

.t-bold,
.t-bold *,
.t-interactive-sub,
.t-interactive-sub * {
  font-weight: 700 !important;
}

@media (min-width: 768px) {
  .t-display,
  .t-display * {
    font-size: 5rem;
    line-height: 4.55rem;
    letter-spacing: 0.1rem;
  }

  .t-headline,
  .t-headline * {
    font-size: 3rem;
    line-height: 3.12rem;
  }

  .t-title-large,
  .t-title-large * {
    font-size: 2rem;
    line-height: 2.25rem;
  }

  .t-title-medium,
  .t-title-medium * {
    font-size: 1.5rem;
    line-height: 1.875rem;
  }

  .t-title-small,
  .t-title-small * {
    font-size: 1.125rem;
    line-height: 1.74375rem;
  }

  .t-body-large,
  .t-body-large * {
    font-size: 1.5rem;
    line-height: 1.875rem;
  }

  .t-body-medium,
  .t-body-medium * {
    font-size: 1.125rem;
    line-height: 1.74375rem;
  }

  .t-interactive,
  .t-interactive * {
    font-size: 1.125rem;
    line-height: 1.74375rem;
  }
}

/* color classes */
.c-content-primary {
  color: var(--black);
}

.c-content-secondary {
  color: var(--dark-gray);
}

.c-content-tertiary {
  color: var(--medium-gray);
}

.c-content-dark-primary {
  color: var(--white);
}

.c-content-dark-secondary {
  color: var(--light-gray);
}

.c-content-interactive-primary {
  color: var(--white);
}

.c-content-interactive-secondary {
  color: var(--black);
}

.c-content-interactive-secondary:hover,
.c-content-interactive-secondary:focus {
  color: var(--maryland-red);
}

.c-content-interactive-tertiary {
  color: var(--maryland-red);
}

.c-underline-primary {
  background-image: linear-gradient(var(--maryland-red), var(--maryland-red));
}

.c-underline-secondary {
  background-image: linear-gradient(var(--black), var(--black));
}

.c-underline-dark-primary {
  background-image: linear-gradient(var(--light-gray), var(--light-gray));
}

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

.c-bg-secondary {
  background-color: var(--lightest-gray);
}

.c-bg-tertiary {
  background-color: var(--lighter-gray);
}

.c-bg-dark-primary {
  background-color: var(--black);
}

.c-bg-dark-secondary {
  background-color: var(--darker-gray);
}

.c-bg-interactive-primary {
  background-color: var(--maryland-red);
}

.c-bg-interactive-primary:hover,
.c-bg-interactive-primary:focus {
  background-color: var(--dark-red);
}

.c-bg-interactive-secondary {
  background-color: var(--lightest-gray);
}

.c-bg-interactive-secondary:hover,
.c-bg-interactive-secondary:focus {
  background-color: var(--dark-gray);
}

.c-bg-interactive-dark-primary {
  background-color: var(--darker-gray);
}

.c-bg-interactive-dark-primary:hover,
.c-bg-interactive-dark-primary:focus {
  background-color: var(--light-gray);
}

.c-border-primary {
  border: 1px solid var(--light-gray);
}

.c-border-secondary {
  border: 1px solid var(--medium-gray);
}

.c-border-tertiary {
  border: 1px solid var(--darker-gray);
}

.c-border-interactive-primary {
  border: 1px solid var(--maryland-red);
}

.c-border-interactive-primary:hover,
.c-border-interactive-primary:focus {
  border: 1px solid var(--dark-red);
}

/* animations */
.ani-default {
  transition: all 0.5s;
}

.ani-underline {
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background 0.5s;
  background-size: 0 2px;
}

.ani-underline:hover,
.ani-underline:focus {
  background-size: 100% 2px;
}

.ani-bg-interactive {
  transition:
    background 0.5s,
    border 0.5s,
    color 0.5s;
}

.ani-icon-interactive:hover path,
.ani-icon-interactive:focus path {
  fill: var(--dark-gray) !important;
}

.ani-icon-interactive:hover path#white,
.ani-icon-interactive:focus path#white {
  fill: var(--white) !important;
}

/* fade-up for the component in card group */
.card-group-content > div {
  animation: slide-up ease-in-out forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 20%;
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(150px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* decoration */
.d-underline {
  text-decoration: underline;
}

/* icons */
.i-chevron {
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.7183 6.98255L2.625 1.89587H6.15621L11.306 6.93281L11.2563 6.98256L11.306 7.0323L6.15621 12.0692H2.625L7.7183 6.98255Z' fill='%23E21833'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position-y: 4px;
}

.i-chevron-down {
  width: 25px;
  min-width: 25px;
  max-width: 25px;
  height: 25px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9' viewBox='0 0 16 9' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.64841 4.6112L11.7512 1.52588e-05L15.2968 2.8372e-05L9.55456 6.75353L9.55721 6.75652L7.65237 9.00002L7.64841 8.99536L7.64446 9.00001L5.73961 6.75651L5.74226 6.75353L8.93275e-06 2.18221e-05L3.5456 2.18221e-05L7.64841 4.6112Z' fill='%23E21833'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position-x: 4px;
  background-position-y: 8px;
}

.i-menu-toggle {
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  height: 19px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='19' viewBox='0 0 20 19' fill='none'%3E%3Cline y1='1.75' x2='20' y2='1.75' stroke='black' stroke-width='2.5'/%3E%3Cline y1='9.75' x2='20' y2='9.75' stroke='black' stroke-width='2.5'/%3E%3Cline x1='4' y1='17.75' x2='20' y2='17.75' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

.i-search {
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6.37158 1.5C3.31306 1.50019 0.833682 3.97957 0.833496 7.03809C0.833496 10.0968 3.31295 12.577 6.37158 12.5771C7.44259 12.5771 8.44213 12.2715 9.28955 11.7451L11.9634 14.4199H15.1665L10.9624 10.1367C11.5605 9.25236 11.9106 8.18605 11.9106 7.03809C11.9105 3.97945 9.43026 1.5 6.37158 1.5ZM6.37158 3.44336C8.357 3.44336 9.9671 5.05271 9.96729 7.03809C9.96729 9.02362 8.35711 10.6338 6.37158 10.6338C4.38621 10.6336 2.77686 9.0235 2.77686 7.03809C2.77704 5.05283 4.38632 3.44355 6.37158 3.44336Z' fill='black'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

.i-quote {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='27' viewBox='0 0 38 27' fill='none'%3E%3Cpath d='M17.1991 0.510498L13.7011 14.3959V26.9376H0.583496V14.3959L10.1156 0.510498H17.1991ZM37.3127 0.510498L33.8146 14.3959V26.9376H20.6971V14.3959L30.3166 0.510498H37.3127Z' fill='%23E21833'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position-x: 2px;
  background-position-y: 8px;
  background-size: contain;
}

.i-external-arrow {
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.28 5.28H9.67L3 12.12L4.55 13.67L11.12 6.95V12.12L13.41 9.77V5.28V3H11.12H6.63L4.28 5.28Z' fill='%23E21833'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position-x: -2px;
  background-position-y: 2px;
}

.i-internal-arrow {
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5058 6.66675L5.99992 2.16675H10.0356L15.9211 7.92325L15.8642 7.9801L15.9211 8.03695L10.0356 13.7934H5.99992L10.4658 9.33341H0.833252V6.66675H10.5058Z' fill='%23E21833'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position-x: -2px;
  background-position-y: 2px;
}

/* layout */
.l-flex-row {
  display: flex;
  flex-direction: row;
}

.l-flex-col {
  display: flex;
  flex-direction: column;
}

/* spacing */
.s-center {
  margin: auto;
}

/* page level spacing(small -> medium -> large), medium is the default */
.s-page-lock {
  width: 100%;
  max-width: 1680px;
}

.s-box-page-none-h {
  padding-left: 0;
  padding-right: 0;
}

.s-box-page-small-v {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}

@media (min-width: 768px) {
  .s-box-page-small-v {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
  }
}

.s-box-page-medium-v {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}

@media (min-width: 768px) {
  .s-box-page-medium-v {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }
}

@media (min-width: 1024px) {
  .s-box-page-medium-v {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }
}

.s-box-page-medium-h {
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}

@media (min-width: 768px) {
  .s-box-page-medium-h {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
  }
}

@media (min-width: 1024px) {
  .s-box-page-medium-h {
    padding-left: var(--space-2xl);
    padding-right: var(--space-2xl);
  }
}

@media (min-width: 1440px) {
  .s-box-page-medium-h {
    padding-left: var(--space-3xl);
    padding-right: var(--space-3xl);
  }
}

/* component level spacing(small -> medium -> large), medium is the default */
.s-box-small-v {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}

@media (min-width: 768px) {
  .s-box-small-v {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
  }
}

.s-box-small-v-top {
  padding-top: var(--space-xs);
}

@media (min-width: 768px) {
  .s-box-small-v-top {
    padding-top: var(--space-sm);
  }
}

.s-box-small-v-bottom {
  padding-bottom: var(--space-xs);
}

@media (min-width: 768px) {
  .s-box-small-v-bottom {
    padding-bottom: var(--space-sm);
  }
}

.s-box-medium-v {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}

@media (min-width: 768px) {
  .s-box-medium-v {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
  }
}

.s-box-medium-v-top {
  padding-top: var(--space-sm);
}

@media (min-width: 768px) {
  .s-box-medium-v-top {
    padding-top: var(--space-md);
  }
}

.s-box-medium-v-bottom {
  padding-bottom: var(--space-sm);
}

@media (min-width: 768px) {
  .s-box-medium-v-bottom {
    padding-bottom: var(--space-md);
  }
}

.s-box-large-v {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

@media (min-width: 768px) {
  .s-box-large-v {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }
}

.s-box-small-h {
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}

@media (min-width: 768px) {
  .s-box-small-h {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
}

.s-box-medium-h {
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}

@media (min-width: 768px) {
  .s-box-medium-h {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

.s-box-large-h {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

@media (min-width: 768px) {
  .s-box-large-h {
    padding-left: var(--space-2xl);
    padding-right: var(--space-2xl);
  }
}

/* stack/inline spacing */
.s-stack-small {
  margin-bottom: var(--space-xs);
}

@media (min-width: 768px) {
  .s-stack-small {
    margin-bottom: var(--space-sm);
  }
}

.s-stack-medium {
  margin-bottom: var(--space-sm);
}

@media (min-width: 768px) {
  .s-stack-medium {
    margin-bottom: var(--space-md);
  }
}

.s-stack-large {
  margin-bottom: var(--space-md);
}

@media (min-width: 768px) {
  .s-stack-large {
    margin-bottom: var(--space-lg);
  }
}

.s-inline-small {
  margin-right: var(--space-sm);
}

@media (min-width: 768px) {
  .s-inline-small {
    margin-right: var(--space-md);
  }
}

.s-inline-medium {
  margin-right: var(--space-md);
}

@media (min-width: 768px) {
  .s-inline-medium {
    margin-right: var(--space-lg);
  }
}

.s-inline-large {
  margin-right: var(--space-lg);
}

@media (min-width: 768px) {
  .s-inline-large {
    margin-right: var(--space-xl);
  }
}

/* component spacing - vertical */
.s-margin-general-small {
  margin-bottom: var(--space-xs);
}

@media (min-width: 768px) {
  .s-margin-general-small {
    margin-bottom: var(--space-sm);
  }
}

.s-margin-general-medium {
  margin-bottom: var(--space-md);
}

@media (min-width: 768px) {
  .s-margin-general-medium {
    margin-bottom: var(--space-lg);
  }
}

.s-margin-general-large {
  margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
  .s-margin-general-large {
    margin-bottom: var(--space-xl);
  }
}

.s-margin-heading-small {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}

@media (min-width: 768px) {
  .s-margin-heading-small {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
  }
}

.s-margin-heading-medium {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-md);
}

@media (min-width: 768px) {
  .s-margin-heading-medium {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-lg);
  }
}

.s-margin-heading-large {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
  .s-margin-heading-large {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-xl);
  }
}