html {
  font-size: 16px;
}

@font-face {
  font-family: 'roper';
  src: url(/Districts/fonts/Andrew-Footit-Roper.otf);
}

.district-body {
  margin: auto;
  max-width: 1920px;

  #commandRow {
    display: flex;
    align-items: center;
    padding-top: 0;
  }
}

.h1_large {
  font-family: var(--h1-l-font-family);
  font-weight: var(--h1-l-font-weight);
  font-size: var(--h1-l-font-size);
  letter-spacing: var(--h1-l-letter-spacing);
  line-height: 75%;
  font-style: normal;
  text-transform: uppercase;
  margin: 0;
}

.h1_medium {
  font-family: var(--h1-m-font-family);
  font-weight: var(--h1-m-font-weight);
  font-size: var(--h1-m-font-size);
  letter-spacing: var(--h1-m-letter-spacing);
  line-height: 75%;
  font-style: normal;
  text-transform: uppercase;
  margin: 0;
}

.h1_small {
  font-family: var(--h1-s-font-family);
  font-weight: var(--h1-s-font-weight);
  font-size: var(--h1-s-font-size);
  letter-spacing: var(--h1-s-letter-spacing);
  line-height: 78%;
  font-style: normal;
  text-transform: uppercase;
  margin: 0;
}

h2 {
  font-family: var(--h2-font-family);
  font-weight: var(--h2-font-weight);
  font-size: var(--h2-font-size);
  letter-spacing: var(--h2-letter-spacing);
  line-height: 78%;
  font-style: normal;
  text-transform: uppercase;
  margin: 0;
}

h3 {
  font-family: var(--h3-font-family);
  font-weight: var(--h3-font-weight);
  font-size: var(--h3-font-size);
  letter-spacing: var(--h3-letter-spacing);
  line-height: 78%;
  font-style: normal;
  text-transform: uppercase;
  margin: 0;
}

h4 {
  font-family: var(--h4-font-family);
  font-weight: var(--h4-font-weight);
  font-size: var(--h4-font-size);
  letter-spacing: var(--h4-letter-spacing);
  line-height: 78%;
  font-style: normal;
  text-transform: uppercase;
  margin: 0;
}

h5 {
  font-family: var(--h5-font-family);
  font-weight: var(--h5-font-weight);
  font-size: var(--h5-font-size);
  letter-spacing: var(--h5-letter-spacing);
  line-height: 78%;
  font-style: normal;
  text-transform: uppercase;
  margin: 0;
}

h6 {
  font-family: var(--h6-font-family);
  font-weight: var(--h6-font-weight);
  font-size: var(--h6-font-size);
  letter-spacing: var(--h6-letter-spacing);
  line-height: 78%;
  font-style: normal;
  text-transform: uppercase;
  margin: 0;
}

.h7 {
  /* only assign to h6 tags */
  font-family: 'paralucent-condensed';
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 900;
  line-height: 78%;
  text-transform: uppercase;
  margin: 0;
}

.h8 {
  /* only assign to h6 tags */
  font-family: 'paralucent-condensed';
  font-size: 2rem;
  font-style: normal;
  font-weight: 900;
  line-height: 78%;
  letter-spacing: 0.004rem;
  text-transform: uppercase;
  margin: 0;
}

.h9 {
  /* only assign to h6 tags */
  font-family: 'paralucent-condensed';
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 900;
  line-height: 78%; /* 1.365rem */
  letter-spacing: 0.0035rem;
  text-transform: uppercase;
  margin: 0;
}

.h10 {
  /* only assign to h6 tags */
  font-family: var(--font-roboto-flex);
  font-size: 2rem;
  font-style: normal;
  font-weight: 650;
  line-height: 120%;
  letter-spacing: -0.04rem;
  margin: 0;
  text-transform: none;
}

.body-XL-semibold {
  font-family: var(--font-roboto-flex);
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.0325rem;
  margin: 0;
}

.body-XL {
  font-family: var(--font-roboto-flex);
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.0325rem;
}

.body-L {
  font-family: var(--font-roboto-flex);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 1.625rem */
  letter-spacing: -0.025rem;
  margin: 0;
}

.body-L-semibold {
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: var(--font-roboto-flex);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  margin: 0;
}

.body-M {
  font-family: var(--font-roboto-flex);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  margin: 0;
}

.body-M-bold {
  font-family: var(--font-roboto-flex);
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  margin: 0;
}

.body-S {
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: var(--font-roboto-flex);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  margin: 0;
}

.body-XS {
  font-family: var(--font-roboto-flex);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 450;
  line-height: 130%; /* 0.975rem */
  letter-spacing: 0.0075rem;
  margin: 0;
}

.kicker {
  font-family: var(--font-roboto-flex);
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 650;
  line-height: 130%; /* 1.05625rem */
  letter-spacing: 0.01625rem;
  text-transform: uppercase;
  margin: 0;
}

@media (max-width: 768px) {
  html {
    font-size: 16px;
  }

  .h1_large {
    font-family: var(--h1-l-mobile-font-family);
    font-weight: var(--h1-l-mobile-font-weight);
    font-size: var(--h1-l-mobile-font-size);
    letter-spacing: var(--h1-l-mobile-letter-spacing);
    line-height: 78%;
    font-style: normal;
    text-transform: uppercase;
  }

  .h1_medium {
    font-family: var(--h1-m-mobile-font-family);
    font-weight: var(--h1-m-mobile-font-weight);
    font-size: var(--h1-m-mobile-font-size);
    letter-spacing: var(--h1-m-mobile-letter-spacing);
    line-height: 78%;
    font-style: normal;
    text-transform: uppercase;
  }

  .h1_small {
    font-family: var(--h1-s-mobile-font-family);
    font-weight: var(--h1-s-mobile-font-weight);
    font-size: var(--h1-s-mobile-font-size);
    letter-spacing: var(--h1-s-mobile-letter-spacing);
    line-height: 78%;
    font-style: normal;
    text-transform: uppercase;
  }

  h2 {
    font-family: var(--h2-mobile-font-family);
    font-weight: var(--h2-mobile-font-weight);
    font-size: var(--h2-mobile-font-size);
    letter-spacing: var(--h2-mobile-letter-spacing);
    line-height: 78%;
    font-style: normal;
    text-transform: uppercase;
  }

  h3 {
    font-family: var(--h3-mobile-font-family);
    font-weight: var(--h3-mobile-font-weight);
    font-size: var(--h3-mobile-font-size);
    letter-spacing: var(--h3-mobile-letter-spacing);
    line-height: 78%;
    font-style: normal;
    text-transform: uppercase;
  }

  h4 {
    font-family: var(--h4-mobile-font-family);
    font-weight: var(--h4-mobile-font-weight);
    font-size: var(--h4-mobile-font-size);
    letter-spacing: var(--h4-mobile-letter-spacing);
    line-height: 78%;
    font-style: normal;
    text-transform: uppercase;
  }

  h5 {
    font-family: var(--h5-mobile-font-family);
    font-weight: var(--h5-mobile-font-weight);
    font-size: var(--h5-mobile-font-size);
    letter-spacing: var(--h5-mobile-letter-spacing);
    line-height: 78%;
    font-style: normal;
    text-transform: uppercase;
  }

  h6 {
    font-family: var(--h6-mobile-font-family);
    font-weight: var(--h6-mobile-font-weight);
    font-size: var(--h6-mobile-font-size);
    letter-spacing: var(--h6-mobile-letter-spacing);
    line-height: 78%;
    font-style: normal;
    text-transform: uppercase;
  }

  .h7 {
    font-size: 1.75rem;
  }

  .body-XL-semibold {
    font-size: 1.25rem;
    letter-spacing: -0.025rem;
  }

  .body-L {
    font-family: var(--font-roboto-flex);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 1.625rem */
    letter-spacing: -0.025rem;
  }

  .body-XS {
    font-family: var(--font-roboto-flex);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
  }

  .kicker {
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 650;
    line-height: 130%; /* 0.975rem */
    letter-spacing: 0.015rem;
    text-transform: uppercase;
  }
}