/* stylelint-disable declaration-no-important */
/* stylelint-disable color-no-hex */
:root {
  --overlay-standard-color: #979798;
}

.body-font-regular {
  font-family: "FreightTextPro", "Georgia", "Times", "Times New Roman", serif;
  font-weight: normal;
  font-style: normal;
}

.body-font-italic {
  font-family: "FreightTextPro", "Georgia", "Times", "Times New Roman", serif;
  font-weight: normal;
  font-style: italic;
}

.body-font-bold {
  font-family: "FreightTextPro", "Georgia", "Times", "Times New Roman", serif;
  font-weight: bold;
  font-style: normal;
}

.body-font-bold {
  font-family: "FFMarkWebPro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: normal;
  font-style: normal;
}

.body-font-bold-italic {
  font-family: "FreightTextPro", "Georgia", "Times", "Times New Roman", serif;
  font-weight: bold;
  font-style: italic;
}

.heading-font-regular {
  font-family: "FFMarkWebPro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: normal;
  font-style: normal;
}

.heading-font-bold {
  font-family: "FFMarkWebPro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: bold;
  font-style: normal;
}

.heading-font-heavy {
  font-family: "FFMarkWebPro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.heading-font-ultra {
  font-family: "FFMarkWebPro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 1000;
  font-style: normal;
}

.swatch-text,
.monospace-font-regular {
  font-family: "HackRegular", "Monaco", "Courier New", monospace;
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: FreightTextPro;
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  src: url("https://www.innoq.com/assets/350ED6_0_unhinted_0.woff2?cachebuster=2") format("woff2");
}
@font-face {
  font-family: FreightTextPro;
  font-weight: normal;
  font-style: italic;
  font-display: swap;
  src: url("https://www.innoq.com/assets/350ED6_1_unhinted_0.woff2?cachebuster=2") format("woff2");
}
@font-face {
  font-family: FreightTextPro;
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  src: url("https://www.innoq.com/assets/350ED6_2_unhinted_0.woff2?cachebuster=2") format("woff2");
}
@font-face {
  font-family: FreightTextPro;
  font-weight: bold;
  font-style: italic;
  font-display: swap;
  src: url("https://www.innoq.com/assets/350ED6_3_unhinted_0.woff2?cachebuster=2") format("woff2");
}
@font-face {
  font-family: FFMarkWebPro;
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  src: url("https://www.innoq.com/assets/MarkPro-Book.woff2?cachebuster=2") format("woff2");
}
@font-face {
  font-family: FFMarkWebPro;
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  src: url("https://www.innoq.com/assets/MarkPro-Bold.woff2?cachebuster=2") format("woff2");
}
@font-face {
  font-family: FFMarkWebPro;
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("https://www.innoq.com/assets/MarkPro-Heavy.woff2?cachebuster=2") format("woff2");
}
@font-face {
  font-family: FFMarkWebPro;
  font-weight: 1000;
  font-style: normal;
  font-display: swap;
  src: url("https://www.innoq.com/assets/MarkPro-Ultra.woff2?cachebuster=2") format("woff2");
}
@font-face {
  font-family: HackRegular;
  font-display: swap;
  src: url("https://www.innoq.com/assets/hack-regular.woff2?cachebuster=2") format("woff2");
}
.link-unstyled {
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
}
.link-unstyled:hover, .link-unstyled:focus {
  background-color: initial;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) {
  .punch-in {
    color: rgba(0, 65, 83, 0.3);
    background-position: center;
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-background-clip: text;
    background-clip: text;
  }
}
.text-center {
  text-align: center;
}

.swatches {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
}

.swatch {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
  margin-bottom: 1.44rem;
}
.swatch:first-child {
  margin-left: 0;
}

.swatch-color {
  display: block;
  width: 150px;
  height: 150px;
}

.swatch-text {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
  padding-top: 0.5787037037rem;
  padding-bottom: 0.5787037037rem;
  color: #242424;
  text-align: center;
  text-transform: uppercase;
  background-color: #f7f7f7;
}
.swatch-text::after {
  display: none;
}

.swatch-brand-blue > .swatch-color {
  background-color: #24244c;
}
.swatch-brand-blue > .swatch-text--rgb::after {
  content: "#24244c";
}

.swatch-brand-blue-75 > .swatch-color {
  background-color: #5b5b79;
}
.swatch-brand-blue-75 > .swatch-text--rgb::after {
  content: "#5b5b79";
}

.swatch-brand-blue-50 > .swatch-color {
  background-color: #9191a5;
}
.swatch-brand-blue-50 > .swatch-text--rgb::after {
  content: "#9191a5";
}

.swatch-brand-blue-25 > .swatch-color {
  background-color: #c8c8d2;
}
.swatch-brand-blue-25 > .swatch-text--rgb::after {
  content: "#c8c8d2";
}

.swatch-brand-red > .swatch-color {
  background-color: #ff4d67;
}
.swatch-brand-red > .swatch-text--rgb::after {
  content: "#ff4d67";
}

.swatch-brand-red-75 > .swatch-color {
  background-color: #fc6e86;
}
.swatch-brand-red-75 > .swatch-text--rgb::after {
  content: "#fc6e86";
}

.swatch-brand-red-50 > .swatch-color {
  background-color: #fd9eae;
}
.swatch-brand-red-50 > .swatch-text--rgb::after {
  content: "#fd9eae";
}

.swatch-brand-red-25 > .swatch-color {
  background-color: #feced6;
}
.swatch-brand-red-25 > .swatch-text--rgb::after {
  content: "#feced6";
}

.swatch-brand-green > .swatch-color {
  background-color: #55cdaf;
}
.swatch-brand-green > .swatch-text--rgb::after {
  content: "#55cdaf";
}

.swatch-brand-green-75 > .swatch-color {
  background-color: #68ddc3;
}
.swatch-brand-green-75 > .swatch-text--rgb::after {
  content: "#68ddc3";
}

.swatch-brand-green-50 > .swatch-color {
  background-color: #9ae8d7;
}
.swatch-brand-green-50 > .swatch-text--rgb::after {
  content: "#9ae8d7";
}

.swatch-brand-green-25 > .swatch-color {
  background-color: #ccf3eb;
}
.swatch-brand-green-25 > .swatch-text--rgb::after {
  content: "#ccf3eb";
}

.swatch-brand-yellow > .swatch-color {
  background-color: #fff019;
}
.swatch-brand-yellow > .swatch-text--rgb::after {
  content: "#fff019";
}

.swatch-brand-yellow-75 > .swatch-color {
  background-color: #fff87a;
}
.swatch-brand-yellow-75 > .swatch-text--rgb::after {
  content: "#fff87a";
}

.swatch-brand-yellow-50 > .swatch-color {
  background-color: #fffb9f;
}
.swatch-brand-yellow-50 > .swatch-text--rgb::after {
  content: "#fffb9f";
}

.swatch-brand-yellow-25 > .swatch-color {
  background-color: #fffdbe;
}
.swatch-brand-yellow-25 > .swatch-text--rgb::after {
  content: "#fffdbe";
}

.swatch-brand-petrol > .swatch-color {
  background-color: #004153;
}
.swatch-brand-petrol > .swatch-text--rgb::after {
  content: "#004153";
}

.swatch-brand-petrol-95 > .swatch-color {
  background-color: #005268;
}
.swatch-brand-petrol-95 > .swatch-text--rgb::after {
  content: "#005268";
}

.swatch-brand-petrol-75 > .swatch-color {
  background-color: #40707e;
}
.swatch-brand-petrol-75 > .swatch-text--rgb::after {
  content: "#40707e";
}

.swatch-brand-petrol-50 > .swatch-color {
  background-color: #80a0a9;
}
.swatch-brand-petrol-50 > .swatch-text--rgb::after {
  content: "#80a0a9";
}

.swatch-brand-petrol-25 > .swatch-color {
  background-color: #bfcfd4;
}
.swatch-brand-petrol-25 > .swatch-text--rgb::after {
  content: "#bfcfd4";
}

.swatch-brand-apricot > .swatch-color {
  background-color: #ff9c66;
}
.swatch-brand-apricot > .swatch-text--rgb::after {
  content: "#ff9c66";
}

.swatch-brand-apricot-75 > .swatch-color {
  background-color: #ffb58c;
}
.swatch-brand-apricot-75 > .swatch-text--rgb::after {
  content: "#ffb58c";
}

.swatch-brand-apricot-50 > .swatch-color {
  background-color: #ffcdb2;
}
.swatch-brand-apricot-50 > .swatch-text--rgb::after {
  content: "#ffcdb2";
}

.swatch-brand-apricot-25 > .swatch-color {
  background-color: #ffe6d9;
}
.swatch-brand-apricot-25 > .swatch-text--rgb::after {
  content: "#ffe6d9";
}

.swatch-brand-gray > .swatch-color {
  background-color: #242424;
}
.swatch-brand-gray > .swatch-text--rgb::after {
  content: "#242424";
}

.swatch-brand-gray-75 > .swatch-color {
  background-color: #646465;
}
.swatch-brand-gray-75 > .swatch-text--rgb::after {
  content: "#646465";
}

.swatch-brand-gray-50 > .swatch-color {
  background-color: #979798;
}
.swatch-brand-gray-50 > .swatch-text--rgb::after {
  content: "#979798";
}

.swatch-brand-gray-25 > .swatch-color {
  background-color: #d8d8d8;
}
.swatch-brand-gray-25 > .swatch-text--rgb::after {
  content: "#d8d8d8";
}

.swatch-brand-gray-20 > .swatch-color {
  background-color: #f4f4f4;
}
.swatch-brand-gray-20 > .swatch-text--rgb::after {
  content: "#f4f4f4";
}

.swatch-brand-gray-10 > .swatch-color {
  background-color: #f7f7f7;
}
.swatch-brand-gray-10 > .swatch-text--rgb::after {
  content: "#f7f7f7";
}

.swatch-brand-ch-red > .swatch-color {
  background-color: #c0442d;
}
.swatch-brand-ch-red > .swatch-text--rgb::after {
  content: "#c0442d";
}

.swatch-brand-ch-red-75 > .swatch-color {
  background-color: #d15a44;
}
.swatch-brand-ch-red-75 > .swatch-text--rgb::after {
  content: "#d15a44";
}

.swatch-brand-ch-red-50 > .swatch-color {
  background-color: #f77a56;
}
.swatch-brand-ch-red-50 > .swatch-text--rgb::after {
  content: "#f77a56";
}

.swatch-brand-ch-black > .swatch-color {
  background-color: #222327;
}
.swatch-brand-ch-black > .swatch-text--rgb::after {
  content: "#222327";
}

.swatch-brand-ch-beige > .swatch-color {
  background-color: #c2b9a8;
}
.swatch-brand-ch-beige > .swatch-text--rgb::after {
  content: "#c2b9a8";
}

.swatch-brand-ch-gray > .swatch-color {
  background-color: #cdccc8;
}
.swatch-brand-ch-gray > .swatch-text--rgb::after {
  content: "#cdccc8";
}

.swatch-brand-ch-gray-75 > .swatch-color {
  background-color: #dbddd7;
}
.swatch-brand-ch-gray-75 > .swatch-text--rgb::after {
  content: "#dbddd7";
}

.swatch-brand-ch-gray-50 > .swatch-color {
  background-color: #edeeeb;
}
.swatch-brand-ch-gray-50 > .swatch-text--rgb::after {
  content: "#edeeeb";
}

.demo {
  width: 100%;
}
.demo--inverted {
  background-color: #004153;
}
.demo--accented {
  background-color: #ff9c66;
}
.demo--centered {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.demo--black {
  background-color: #242424;
}
.demo--edition-01-red {
  background-color: #ff4d67;
}
.demo--edition-01-blue {
  background-color: #24244c;
}
.demo--ch-logo {
  height: 131px;
}
.demo > * {
  margin: 1.44rem;
}

.grid-demo,
.container-demo {
  height: 20rem;
  background: #ff9c66;
}

.Header {
  background-color: #004153;
}

.Header-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.theme-brand-logo {
  height: 1.5rem;
}