/*!*******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/normalize.css/normalize.css ***!
  \*******************************************************************************************************************************************************************************************/
/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}
.button svg {
  width: 21px;
  height: 20px;
}
.button.has-svg-right svg {
  margin-left: 10px;
}
.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}
.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}
.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}
.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}
.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}
@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}

img.aligncenter {
  display: block;
  margin: 0 auto;
}
img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}
table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}
select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}
.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}
.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}
input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}
.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}
.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}
.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}
.gform_confirmation_message br {
  display: none;
}
.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}
h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}
h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}
h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}

/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}

/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}

/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}

/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}

/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}
.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}
.pagination .wrapper {
  justify-content: center;
}
.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}
.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}
.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}
.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}
.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}
.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}

/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}

/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}

/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}

/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}
/*!***********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/keen-slider/keen-slider.min.css ***!
  \***********************************************************************************************************************************************************************************************/
/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}
.button svg {
  width: 21px;
  height: 20px;
}
.button.has-svg-right svg {
  margin-left: 10px;
}
.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}
.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}
.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}
.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}
.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}
@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}

img.aligncenter {
  display: block;
  margin: 0 auto;
}
img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}
table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}
select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}
.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}
.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}
input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}
.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}
.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}
.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}
.gform_confirmation_message br {
  display: none;
}
.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}
h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}
h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}
h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}

/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}

/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}

/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}

/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}

/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}
.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}
.pagination .wrapper {
  justify-content: center;
}
.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}
.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}
.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}
.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}
.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}
.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}

/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}

/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}

/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}

/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.keen-slider:not([data-keen-slider-disabled]) {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  align-content: flex-start;
  display: flex;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -khtml-user-select: none;
  width: 100%;
}

.keen-slider:not([data-keen-slider-disabled]) .keen-slider__slide {
  min-height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-reverse] {
  flex-direction: row-reverse;
}

.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-v] {
  flex-wrap: wrap;
}
/*!**********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/photoswipe/dist/photoswipe.css ***!
  \**********************************************************************************************************************************************************************************************/
/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}
.button svg {
  width: 21px;
  height: 20px;
}
.button.has-svg-right svg {
  margin-left: 10px;
}
.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}
.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}
.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}
.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}
.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}
@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}

img.aligncenter {
  display: block;
  margin: 0 auto;
}
img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}
table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}
select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}
.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}
.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}
input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}
.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}
.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}
.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}
.gform_confirmation_message br {
  display: none;
}
.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}
h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}
h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}
h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}

/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}

/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}

/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}

/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}

/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}
.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}
.pagination .wrapper {
  justify-content: center;
}
.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}
.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}
.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}
.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}
.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}
.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}

/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}

/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}

/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}

/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
.pswp {
  --pswp-bg: #000;
  --pswp-placeholder-bg: #222;
  --pswp-root-z-index: 100000;
  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
  /* defined via js:
  --pswp-transition-duration: 333ms; */
  --pswp-icon-color: #fff;
  --pswp-icon-color-secondary: #4f4f4f;
  --pswp-icon-stroke-color: #4f4f4f;
  --pswp-icon-stroke-width: 2px;
  --pswp-error-text-color: var(--pswp-icon-color);
}

/*
	Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
*/
.pswp {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--pswp-root-z-index);
  display: none;
  touch-action: none;
  outline: 0;
  opacity: 0.003;
  contain: layout style size;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Prevents focus outline on the root element,
  (it may be focused initially) */
.pswp:focus {
  outline: 0;
}

.pswp * {
  box-sizing: border-box;
}

.pswp img {
  max-width: none;
}

.pswp--open {
  display: block;
}

.pswp,
.pswp__bg {
  transform: translateZ(0);
  will-change: opacity;
}

.pswp__bg {
  opacity: 0.005;
  background: var(--pswp-bg);
}

.pswp,
.pswp__scroll-wrap {
  overflow: hidden;
}

.pswp__scroll-wrap,
.pswp__bg,
.pswp__container,
.pswp__item,
.pswp__content,
.pswp__img,
.pswp__zoom-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pswp__img,
.pswp__zoom-wrap {
  width: auto;
  height: auto;
}

.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/* :active to override grabbing cursor */
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
.pswp__img {
  cursor: -webkit-zoom-out;
  cursor: -moz-zoom-out;
  cursor: zoom-out;
}

/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img,
.pswp__button,
.pswp__counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pswp__item {
  /* z-index for fade transition */
  z-index: 1;
  overflow: hidden;
}

.pswp__hidden {
  display: none !important;
}

/* Allow to click through pswp__content element, but not its children */
.pswp__content {
  pointer-events: none;
}

.pswp__content > * {
  pointer-events: auto;
}

/*

  PhotoSwipe UI

*/
/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg-container {
  display: grid;
}

.pswp__error-msg {
  margin: auto;
  font-size: 1em;
  line-height: 1;
  color: var(--pswp-error-text-color);
}

/*
class pswp__hide-on-close is applied to elements that
should hide (for example fade out) when PhotoSwipe is closed
and show (for example fade in) when PhotoSwipe is opened
 */
.pswp .pswp__hide-on-close {
  opacity: 0.005;
  will-change: opacity;
  transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
  z-index: 10; /* always overlap slide content */
  pointer-events: none; /* hidden elements should not be clickable */
}

/* class pswp--ui-visible is added when opening or closing transition starts */
.pswp--ui-visible .pswp__hide-on-close {
  opacity: 1;
  pointer-events: auto;
}

/* <button> styles, including css reset */
.pswp__button {
  position: relative;
  display: block;
  width: 50px;
  height: 60px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 0.85;
  -webkit-appearance: none;
  -webkit-touch-callout: none;
}

.pswp__button:hover,
.pswp__button:active,
.pswp__button:focus {
  transition: none;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 1;
}

.pswp__button:disabled {
  opacity: 0.3;
  cursor: auto;
}

.pswp__icn {
  fill: var(--pswp-icon-color);
  color: var(--pswp-icon-color-secondary);
}

.pswp__icn {
  position: absolute;
  top: 14px;
  left: 9px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  pointer-events: none;
}

.pswp__icn-shadow {
  stroke: var(--pswp-icon-stroke-color);
  stroke-width: var(--pswp-icon-stroke-width);
  fill: none;
}

.pswp__icn:focus {
  outline: 0;
}

/*
	div element that matches size of large image,
	large image loads on top of it,
	used when msrc is not provided
*/
div.pswp__img--placeholder,
.pswp__img--with-bg {
  background: var(--pswp-placeholder-bg);
}

.pswp__top-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  z-index: 10;
  /* allow events to pass through top bar itself */
  pointer-events: none !important;
}

.pswp__top-bar > * {
  pointer-events: auto;
  /* this makes transition significantly more smooth,
     even though inner elements are not animated */
  will-change: opacity;
}

/*

  Close button

*/
.pswp__button--close {
  margin-right: 6px;
}

/*

  Arrow buttons

*/
.pswp__button--arrow {
  position: absolute;
  top: 0;
  width: 75px;
  height: 100px;
  top: 50%;
  margin-top: -50px;
}

.pswp__button--arrow:disabled {
  display: none;
  cursor: default;
}

.pswp__button--arrow .pswp__icn {
  top: 50%;
  margin-top: -30px;
  width: 60px;
  height: 60px;
  background: none;
  border-radius: 0;
}

.pswp--one-slide .pswp__button--arrow {
  display: none;
}

/* hide arrows on touch screens */
.pswp--touch .pswp__button--arrow {
  visibility: hidden;
}

/* show arrows only after mouse was used */
.pswp--has_mouse .pswp__button--arrow {
  visibility: visible;
}

.pswp__button--arrow--prev {
  right: auto;
  left: 0px;
}

.pswp__button--arrow--next {
  right: 0px;
}

.pswp__button--arrow--next .pswp__icn {
  left: auto;
  right: 14px;
  /* flip horizontally */
  transform: scale(-1, 1);
}

/*

  Zoom button

*/
.pswp__button--zoom {
  display: none;
}

.pswp--zoom-allowed .pswp__button--zoom {
  display: block;
}

/* "+" => "-" */
.pswp--zoomed-in .pswp__zoom-icn-bar-v {
  display: none;
}

/*

  Loading indicator

*/
.pswp__preloader {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 60px;
  margin-right: auto;
}

.pswp__preloader .pswp__icn {
  opacity: 0;
  transition: opacity 0.2s linear;
  animation: pswp-clockwise 600ms linear infinite;
}

.pswp__preloader--active .pswp__icn {
  opacity: 0.85;
}

@keyframes pswp-clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*

  "1 of 10" counter

*/
.pswp__counter {
  height: 30px;
  margin-top: 15px;
  margin-inline-start: 20px;
  font-size: 14px;
  line-height: 30px;
  color: var(--pswp-icon-color);
  text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
  opacity: 0.85;
}

.pswp--one-slide .pswp__counter {
  display: none;
}
/*!*********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/main.scss ***!
  \*********************************************************************************************************************************************************************/
/* src/scss/main.scss */
/**
 * Settings.
 */
/**
  * Vendor (pure CSS imports)
  */
/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}
.button svg {
  width: 21px;
  height: 20px;
}
.button.has-svg-right svg {
  margin-left: 10px;
}
.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}
.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}
.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}
.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}
.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}
@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}

img.aligncenter {
  display: block;
  margin: 0 auto;
}
img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}
table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}
select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}
.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}
.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}
input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}
.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}
.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}
.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}
.gform_confirmation_message br {
  display: none;
}
.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}
h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}
h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}
h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}

/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}

/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}

/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}

/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}
@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}

/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}
.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}
.pagination .wrapper {
  justify-content: center;
}
.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}
.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}
.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}
.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}
.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}
.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}

/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}

/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}

/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}

/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
/**
  * Tools
  */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Tools.
 */
/**
  * Utilities.
  */
/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Color utility classes.
 *
 * Automatically generated color and background color utility classes based on every color definition in `settings/_color.scss`.
 * Loop through every `$key` and `$map` in the `$colors` variable map defined in `settings/_color.scss`.
 */
/**
 * `color` hsl(0, 0%, 0%)-100 color utility.
 */
.color-black-100 {
  color: hsl(0, 0%, 0%);
}

/**
 * `background-color` hsl(0, 0%, 0%)-100 color utility.
 */
.background-color-black-100 {
  background-color: hsl(0, 0%, 0%);
}

/**
 * `color` hsla(0, 0%, 0%, 0.9)-90 color utility.
 */
.color-black-90 {
  color: hsla(0, 0%, 0%, 0.9);
}

/**
 * `background-color` hsla(0, 0%, 0%, 0.9)-90 color utility.
 */
.background-color-black-90 {
  background-color: hsla(0, 0%, 0%, 0.9);
}

/**
 * `color` hsla(0, 0%, 0%, 0.8)-80 color utility.
 */
.color-black-80 {
  color: hsla(0, 0%, 0%, 0.8);
}

/**
 * `background-color` hsla(0, 0%, 0%, 0.8)-80 color utility.
 */
.background-color-black-80 {
  background-color: hsla(0, 0%, 0%, 0.8);
}

/**
 * `color` hsla(0, 0%, 0%, 0.7)-70 color utility.
 */
.color-black-70 {
  color: hsla(0, 0%, 0%, 0.7);
}

/**
 * `background-color` hsla(0, 0%, 0%, 0.7)-70 color utility.
 */
.background-color-black-70 {
  background-color: hsla(0, 0%, 0%, 0.7);
}

/**
 * `color` hsla(0, 0%, 0%, 0.6)-60 color utility.
 */
.color-black-60 {
  color: hsla(0, 0%, 0%, 0.6);
}

/**
 * `background-color` hsla(0, 0%, 0%, 0.6)-60 color utility.
 */
.background-color-black-60 {
  background-color: hsla(0, 0%, 0%, 0.6);
}

/**
 * `color` hsla(0, 0%, 0%, 0.5)-50 color utility.
 */
.color-black-50 {
  color: hsla(0, 0%, 0%, 0.5);
}

/**
 * `background-color` hsla(0, 0%, 0%, 0.5)-50 color utility.
 */
.background-color-black-50 {
  background-color: hsla(0, 0%, 0%, 0.5);
}

/**
 * `color` hsla(0, 0%, 0%, 0.4)-40 color utility.
 */
.color-black-40 {
  color: hsla(0, 0%, 0%, 0.4);
}

/**
 * `background-color` hsla(0, 0%, 0%, 0.4)-40 color utility.
 */
.background-color-black-40 {
  background-color: hsla(0, 0%, 0%, 0.4);
}

/**
 * `color` hsla(0, 0%, 0%, 0.3)-30 color utility.
 */
.color-black-30 {
  color: hsla(0, 0%, 0%, 0.3);
}

/**
 * `background-color` hsla(0, 0%, 0%, 0.3)-30 color utility.
 */
.background-color-black-30 {
  background-color: hsla(0, 0%, 0%, 0.3);
}

/**
 * `color` hsla(0, 0%, 0%, 0.2)-20 color utility.
 */
.color-black-20 {
  color: hsla(0, 0%, 0%, 0.2);
}

/**
 * `background-color` hsla(0, 0%, 0%, 0.2)-20 color utility.
 */
.background-color-black-20 {
  background-color: hsla(0, 0%, 0%, 0.2);
}

/**
 * `color` hsla(0, 0%, 0%, 0.1)-10 color utility.
 */
.color-black-10 {
  color: hsla(0, 0%, 0%, 0.1);
}

/**
 * `background-color` hsla(0, 0%, 0%, 0.1)-10 color utility.
 */
.background-color-black-10 {
  background-color: hsla(0, 0%, 0%, 0.1);
}

/**
 * `color` hsl(0, 0%, 100%)-100 color utility.
 */
.color-white-100 {
  color: hsl(0, 0%, 100%);
}

/**
 * `background-color` hsl(0, 0%, 100%)-100 color utility.
 */
.background-color-white-100 {
  background-color: hsl(0, 0%, 100%);
}

/**
 * `color` hsla(0, 0%, 100%, 0.9)-90 color utility.
 */
.color-white-90 {
  color: hsla(0, 0%, 100%, 0.9);
}

/**
 * `background-color` hsla(0, 0%, 100%, 0.9)-90 color utility.
 */
.background-color-white-90 {
  background-color: hsla(0, 0%, 100%, 0.9);
}

/**
 * `color` hsla(0, 0%, 100%, 0.8)-80 color utility.
 */
.color-white-80 {
  color: hsla(0, 0%, 100%, 0.8);
}

/**
 * `background-color` hsla(0, 0%, 100%, 0.8)-80 color utility.
 */
.background-color-white-80 {
  background-color: hsla(0, 0%, 100%, 0.8);
}

/**
 * `color` hsla(0, 0%, 100%, 0.7)-70 color utility.
 */
.color-white-70 {
  color: hsla(0, 0%, 100%, 0.7);
}

/**
 * `background-color` hsla(0, 0%, 100%, 0.7)-70 color utility.
 */
.background-color-white-70 {
  background-color: hsla(0, 0%, 100%, 0.7);
}

/**
 * `color` hsla(0, 0%, 100%, 0.6)-60 color utility.
 */
.color-white-60 {
  color: hsla(0, 0%, 100%, 0.6);
}

/**
 * `background-color` hsla(0, 0%, 100%, 0.6)-60 color utility.
 */
.background-color-white-60 {
  background-color: hsla(0, 0%, 100%, 0.6);
}

/**
 * `color` hsla(0, 0%, 100%, 0.5)-50 color utility.
 */
.color-white-50 {
  color: hsla(0, 0%, 100%, 0.5);
}

/**
 * `background-color` hsla(0, 0%, 100%, 0.5)-50 color utility.
 */
.background-color-white-50 {
  background-color: hsla(0, 0%, 100%, 0.5);
}

/**
 * `color` hsla(0, 0%, 100%, 0.4)-40 color utility.
 */
.color-white-40 {
  color: hsla(0, 0%, 100%, 0.4);
}

/**
 * `background-color` hsla(0, 0%, 100%, 0.4)-40 color utility.
 */
.background-color-white-40 {
  background-color: hsla(0, 0%, 100%, 0.4);
}

/**
 * `color` hsla(0, 0%, 100%, 0.3)-30 color utility.
 */
.color-white-30 {
  color: hsla(0, 0%, 100%, 0.3);
}

/**
 * `background-color` hsla(0, 0%, 100%, 0.3)-30 color utility.
 */
.background-color-white-30 {
  background-color: hsla(0, 0%, 100%, 0.3);
}

/**
 * `color` hsla(0, 0%, 100%, 0.2)-20 color utility.
 */
.color-white-20 {
  color: hsla(0, 0%, 100%, 0.2);
}

/**
 * `background-color` hsla(0, 0%, 100%, 0.2)-20 color utility.
 */
.background-color-white-20 {
  background-color: hsla(0, 0%, 100%, 0.2);
}

/**
 * `color` hsla(0, 0%, 100%, 0.1)-10 color utility.
 */
.color-white-10 {
  color: hsla(0, 0%, 100%, 0.1);
}

/**
 * `background-color` hsla(0, 0%, 100%, 0.1)-10 color utility.
 */
.background-color-white-10 {
  background-color: hsla(0, 0%, 100%, 0.1);
}

/**
 * `color` hsl(2, 79%, 49%)-100 color utility.
 */
.color-red-100 {
  color: hsl(2, 79%, 49%);
}

/**
 * `background-color` hsl(2, 79%, 49%)-100 color utility.
 */
.background-color-red-100 {
  background-color: hsl(2, 79%, 49%);
}

/**
 * `color` hsla(2, 79%, 49%, 0.9)-90 color utility.
 */
.color-red-90 {
  color: hsla(2, 79%, 49%, 0.9);
}

/**
 * `background-color` hsla(2, 79%, 49%, 0.9)-90 color utility.
 */
.background-color-red-90 {
  background-color: hsla(2, 79%, 49%, 0.9);
}

/**
 * `color` hsla(2, 79%, 49%, 0.8)-80 color utility.
 */
.color-red-80 {
  color: hsla(2, 79%, 49%, 0.8);
}

/**
 * `background-color` hsla(2, 79%, 49%, 0.8)-80 color utility.
 */
.background-color-red-80 {
  background-color: hsla(2, 79%, 49%, 0.8);
}

/**
 * `color` hsla(2, 79%, 49%, 0.7)-70 color utility.
 */
.color-red-70 {
  color: hsla(2, 79%, 49%, 0.7);
}

/**
 * `background-color` hsla(2, 79%, 49%, 0.7)-70 color utility.
 */
.background-color-red-70 {
  background-color: hsla(2, 79%, 49%, 0.7);
}

/**
 * `color` hsla(2, 79%, 49%, 0.6)-60 color utility.
 */
.color-red-60 {
  color: hsla(2, 79%, 49%, 0.6);
}

/**
 * `background-color` hsla(2, 79%, 49%, 0.6)-60 color utility.
 */
.background-color-red-60 {
  background-color: hsla(2, 79%, 49%, 0.6);
}

/**
 * `color` hsla(2, 79%, 49%, 0.5)-50 color utility.
 */
.color-red-50 {
  color: hsla(2, 79%, 49%, 0.5);
}

/**
 * `background-color` hsla(2, 79%, 49%, 0.5)-50 color utility.
 */
.background-color-red-50 {
  background-color: hsla(2, 79%, 49%, 0.5);
}

/**
 * `color` hsla(2, 79%, 49%, 0.4)-40 color utility.
 */
.color-red-40 {
  color: hsla(2, 79%, 49%, 0.4);
}

/**
 * `background-color` hsla(2, 79%, 49%, 0.4)-40 color utility.
 */
.background-color-red-40 {
  background-color: hsla(2, 79%, 49%, 0.4);
}

/**
 * `color` hsla(2, 79%, 49%, 0.3)-30 color utility.
 */
.color-red-30 {
  color: hsla(2, 79%, 49%, 0.3);
}

/**
 * `background-color` hsla(2, 79%, 49%, 0.3)-30 color utility.
 */
.background-color-red-30 {
  background-color: hsla(2, 79%, 49%, 0.3);
}

/**
 * `color` hsla(2, 79%, 49%, 0.2)-20 color utility.
 */
.color-red-20 {
  color: hsla(2, 79%, 49%, 0.2);
}

/**
 * `background-color` hsla(2, 79%, 49%, 0.2)-20 color utility.
 */
.background-color-red-20 {
  background-color: hsla(2, 79%, 49%, 0.2);
}

/**
 * `color` hsla(2, 79%, 49%, 0.1)-10 color utility.
 */
.color-red-10 {
  color: hsla(2, 79%, 49%, 0.1);
}

/**
 * `background-color` hsla(2, 79%, 49%, 0.1)-10 color utility.
 */
.background-color-red-10 {
  background-color: hsla(2, 79%, 49%, 0.1);
}

/**
 * `color` hsl(358, 70%, 37%)-100 color utility.
 */
.color-bordeaux-100 {
  color: hsl(358, 70%, 37%);
}

/**
 * `background-color` hsl(358, 70%, 37%)-100 color utility.
 */
.background-color-bordeaux-100 {
  background-color: hsl(358, 70%, 37%);
}

/**
 * `color` hsla(358, 70%, 37%, 0.9)-90 color utility.
 */
.color-bordeaux-90 {
  color: hsla(358, 70%, 37%, 0.9);
}

/**
 * `background-color` hsla(358, 70%, 37%, 0.9)-90 color utility.
 */
.background-color-bordeaux-90 {
  background-color: hsla(358, 70%, 37%, 0.9);
}

/**
 * `color` hsla(358, 70%, 37%, 0.8)-80 color utility.
 */
.color-bordeaux-80 {
  color: hsla(358, 70%, 37%, 0.8);
}

/**
 * `background-color` hsla(358, 70%, 37%, 0.8)-80 color utility.
 */
.background-color-bordeaux-80 {
  background-color: hsla(358, 70%, 37%, 0.8);
}

/**
 * `color` hsla(358, 70%, 37%, 0.7)-70 color utility.
 */
.color-bordeaux-70 {
  color: hsla(358, 70%, 37%, 0.7);
}

/**
 * `background-color` hsla(358, 70%, 37%, 0.7)-70 color utility.
 */
.background-color-bordeaux-70 {
  background-color: hsla(358, 70%, 37%, 0.7);
}

/**
 * `color` hsla(358, 70%, 37%, 0.6)-60 color utility.
 */
.color-bordeaux-60 {
  color: hsla(358, 70%, 37%, 0.6);
}

/**
 * `background-color` hsla(358, 70%, 37%, 0.6)-60 color utility.
 */
.background-color-bordeaux-60 {
  background-color: hsla(358, 70%, 37%, 0.6);
}

/**
 * `color` hsla(358, 70%, 37%, 0.5)-50 color utility.
 */
.color-bordeaux-50 {
  color: hsla(358, 70%, 37%, 0.5);
}

/**
 * `background-color` hsla(358, 70%, 37%, 0.5)-50 color utility.
 */
.background-color-bordeaux-50 {
  background-color: hsla(358, 70%, 37%, 0.5);
}

/**
 * `color` hsla(358, 70%, 37%, 0.4)-40 color utility.
 */
.color-bordeaux-40 {
  color: hsla(358, 70%, 37%, 0.4);
}

/**
 * `background-color` hsla(358, 70%, 37%, 0.4)-40 color utility.
 */
.background-color-bordeaux-40 {
  background-color: hsla(358, 70%, 37%, 0.4);
}

/**
 * `color` hsla(358, 70%, 37%, 0.3)-30 color utility.
 */
.color-bordeaux-30 {
  color: hsla(358, 70%, 37%, 0.3);
}

/**
 * `background-color` hsla(358, 70%, 37%, 0.3)-30 color utility.
 */
.background-color-bordeaux-30 {
  background-color: hsla(358, 70%, 37%, 0.3);
}

/**
 * `color` hsla(358, 70%, 37%, 0.2)-20 color utility.
 */
.color-bordeaux-20 {
  color: hsla(358, 70%, 37%, 0.2);
}

/**
 * `background-color` hsla(358, 70%, 37%, 0.2)-20 color utility.
 */
.background-color-bordeaux-20 {
  background-color: hsla(358, 70%, 37%, 0.2);
}

/**
 * `color` hsla(358, 70%, 37%, 0.1)-10 color utility.
 */
.color-bordeaux-10 {
  color: hsla(358, 70%, 37%, 0.1);
}

/**
 * `background-color` hsla(358, 70%, 37%, 0.1)-10 color utility.
 */
.background-color-bordeaux-10 {
  background-color: hsla(358, 70%, 37%, 0.1);
}

/**
 * `color` hsl(31, 98%, 83%)-100 color utility.
 */
.color-sand-100 {
  color: hsl(31, 98%, 83%);
}

/**
 * `background-color` hsl(31, 98%, 83%)-100 color utility.
 */
.background-color-sand-100 {
  background-color: hsl(31, 98%, 83%);
}

/**
 * `color` hsla(31, 98%, 83%, 0.9)-90 color utility.
 */
.color-sand-90 {
  color: hsla(31, 98%, 83%, 0.9);
}

/**
 * `background-color` hsla(31, 98%, 83%, 0.9)-90 color utility.
 */
.background-color-sand-90 {
  background-color: hsla(31, 98%, 83%, 0.9);
}

/**
 * `color` hsla(31, 98%, 83%, 0.8)-80 color utility.
 */
.color-sand-80 {
  color: hsla(31, 98%, 83%, 0.8);
}

/**
 * `background-color` hsla(31, 98%, 83%, 0.8)-80 color utility.
 */
.background-color-sand-80 {
  background-color: hsla(31, 98%, 83%, 0.8);
}

/**
 * `color` hsla(31, 98%, 83%, 0.7)-70 color utility.
 */
.color-sand-70 {
  color: hsla(31, 98%, 83%, 0.7);
}

/**
 * `background-color` hsla(31, 98%, 83%, 0.7)-70 color utility.
 */
.background-color-sand-70 {
  background-color: hsla(31, 98%, 83%, 0.7);
}

/**
 * `color` hsla(31, 98%, 83%, 0.6)-60 color utility.
 */
.color-sand-60 {
  color: hsla(31, 98%, 83%, 0.6);
}

/**
 * `background-color` hsla(31, 98%, 83%, 0.6)-60 color utility.
 */
.background-color-sand-60 {
  background-color: hsla(31, 98%, 83%, 0.6);
}

/**
 * `color` hsla(31, 98%, 83%, 0.5)-50 color utility.
 */
.color-sand-50 {
  color: hsla(31, 98%, 83%, 0.5);
}

/**
 * `background-color` hsla(31, 98%, 83%, 0.5)-50 color utility.
 */
.background-color-sand-50 {
  background-color: hsla(31, 98%, 83%, 0.5);
}

/**
 * `color` hsla(31, 98%, 83%, 0.4)-40 color utility.
 */
.color-sand-40 {
  color: hsla(31, 98%, 83%, 0.4);
}

/**
 * `background-color` hsla(31, 98%, 83%, 0.4)-40 color utility.
 */
.background-color-sand-40 {
  background-color: hsla(31, 98%, 83%, 0.4);
}

/**
 * `color` hsla(31, 98%, 83%, 0.3)-30 color utility.
 */
.color-sand-30 {
  color: hsla(31, 98%, 83%, 0.3);
}

/**
 * `background-color` hsla(31, 98%, 83%, 0.3)-30 color utility.
 */
.background-color-sand-30 {
  background-color: hsla(31, 98%, 83%, 0.3);
}

/**
 * `color` hsla(31, 98%, 83%, 0.2)-20 color utility.
 */
.color-sand-20 {
  color: hsla(31, 98%, 83%, 0.2);
}

/**
 * `background-color` hsla(31, 98%, 83%, 0.2)-20 color utility.
 */
.background-color-sand-20 {
  background-color: hsla(31, 98%, 83%, 0.2);
}

/**
 * `color` hsla(31, 98%, 83%, 0.1)-10 color utility.
 */
.color-sand-10 {
  color: hsla(31, 98%, 83%, 0.1);
}

/**
 * `background-color` hsla(31, 98%, 83%, 0.1)-10 color utility.
 */
.background-color-sand-10 {
  background-color: hsla(31, 98%, 83%, 0.1);
}

/**
 * `color` hsl(231, 53%, 34%)-100 color utility.
 */
.color-blue-100 {
  color: hsl(231, 53%, 34%);
}

/**
 * `background-color` hsl(231, 53%, 34%)-100 color utility.
 */
.background-color-blue-100 {
  background-color: hsl(231, 53%, 34%);
}

/**
 * `color` hsla(231, 53%, 34%, 0.9)-90 color utility.
 */
.color-blue-90 {
  color: hsla(231, 53%, 34%, 0.9);
}

/**
 * `background-color` hsla(231, 53%, 34%, 0.9)-90 color utility.
 */
.background-color-blue-90 {
  background-color: hsla(231, 53%, 34%, 0.9);
}

/**
 * `color` hsla(231, 53%, 34%, 0.8)-80 color utility.
 */
.color-blue-80 {
  color: hsla(231, 53%, 34%, 0.8);
}

/**
 * `background-color` hsla(231, 53%, 34%, 0.8)-80 color utility.
 */
.background-color-blue-80 {
  background-color: hsla(231, 53%, 34%, 0.8);
}

/**
 * `color` hsla(231, 53%, 34%, 0.7)-70 color utility.
 */
.color-blue-70 {
  color: hsla(231, 53%, 34%, 0.7);
}

/**
 * `background-color` hsla(231, 53%, 34%, 0.7)-70 color utility.
 */
.background-color-blue-70 {
  background-color: hsla(231, 53%, 34%, 0.7);
}

/**
 * `color` hsla(231, 53%, 34%, 0.6)-60 color utility.
 */
.color-blue-60 {
  color: hsla(231, 53%, 34%, 0.6);
}

/**
 * `background-color` hsla(231, 53%, 34%, 0.6)-60 color utility.
 */
.background-color-blue-60 {
  background-color: hsla(231, 53%, 34%, 0.6);
}

/**
 * `color` hsla(231, 53%, 34%, 0.5)-50 color utility.
 */
.color-blue-50 {
  color: hsla(231, 53%, 34%, 0.5);
}

/**
 * `background-color` hsla(231, 53%, 34%, 0.5)-50 color utility.
 */
.background-color-blue-50 {
  background-color: hsla(231, 53%, 34%, 0.5);
}

/**
 * `color` hsla(231, 53%, 34%, 0.4)-40 color utility.
 */
.color-blue-40 {
  color: hsla(231, 53%, 34%, 0.4);
}

/**
 * `background-color` hsla(231, 53%, 34%, 0.4)-40 color utility.
 */
.background-color-blue-40 {
  background-color: hsla(231, 53%, 34%, 0.4);
}

/**
 * `color` hsla(231, 53%, 34%, 0.3)-30 color utility.
 */
.color-blue-30 {
  color: hsla(231, 53%, 34%, 0.3);
}

/**
 * `background-color` hsla(231, 53%, 34%, 0.3)-30 color utility.
 */
.background-color-blue-30 {
  background-color: hsla(231, 53%, 34%, 0.3);
}

/**
 * `color` hsla(231, 53%, 34%, 0.2)-20 color utility.
 */
.color-blue-20 {
  color: hsla(231, 53%, 34%, 0.2);
}

/**
 * `background-color` hsla(231, 53%, 34%, 0.2)-20 color utility.
 */
.background-color-blue-20 {
  background-color: hsla(231, 53%, 34%, 0.2);
}

/**
 * `color` hsla(231, 53%, 34%, 0.1)-10 color utility.
 */
.color-blue-10 {
  color: hsla(231, 53%, 34%, 0.1);
}

/**
 * `background-color` hsla(231, 53%, 34%, 0.1)-10 color utility.
 */
.background-color-blue-10 {
  background-color: hsla(231, 53%, 34%, 0.1);
}

/**
 * `color` hsla(231, 53%, 34%, 0.05)-5 color utility.
 */
.color-blue-5 {
  color: hsla(231, 53%, 34%, 0.05);
}

/**
 * `background-color` hsla(231, 53%, 34%, 0.05)-5 color utility.
 */
.background-color-blue-5 {
  background-color: hsla(231, 53%, 34%, 0.05);
}

/**
 * `color` hsl(30, 100%, 44%)-100 color utility.
 */
.color-orange-100 {
  color: hsl(30, 100%, 44%);
}

/**
 * `background-color` hsl(30, 100%, 44%)-100 color utility.
 */
.background-color-orange-100 {
  background-color: hsl(30, 100%, 44%);
}

/**
 * `color` hsla(30, 100%, 44%, 0.9)-90 color utility.
 */
.color-orange-90 {
  color: hsla(30, 100%, 44%, 0.9);
}

/**
 * `background-color` hsla(30, 100%, 44%, 0.9)-90 color utility.
 */
.background-color-orange-90 {
  background-color: hsla(30, 100%, 44%, 0.9);
}

/**
 * `color` hsla(30, 100%, 44%, 0.8)-80 color utility.
 */
.color-orange-80 {
  color: hsla(30, 100%, 44%, 0.8);
}

/**
 * `background-color` hsla(30, 100%, 44%, 0.8)-80 color utility.
 */
.background-color-orange-80 {
  background-color: hsla(30, 100%, 44%, 0.8);
}

/**
 * `color` hsla(30, 100%, 44%, 0.7)-70 color utility.
 */
.color-orange-70 {
  color: hsla(30, 100%, 44%, 0.7);
}

/**
 * `background-color` hsla(30, 100%, 44%, 0.7)-70 color utility.
 */
.background-color-orange-70 {
  background-color: hsla(30, 100%, 44%, 0.7);
}

/**
 * `color` hsla(30, 100%, 44%, 0.6)-60 color utility.
 */
.color-orange-60 {
  color: hsla(30, 100%, 44%, 0.6);
}

/**
 * `background-color` hsla(30, 100%, 44%, 0.6)-60 color utility.
 */
.background-color-orange-60 {
  background-color: hsla(30, 100%, 44%, 0.6);
}

/**
 * `color` hsla(30, 100%, 44%, 0.5)-50 color utility.
 */
.color-orange-50 {
  color: hsla(30, 100%, 44%, 0.5);
}

/**
 * `background-color` hsla(30, 100%, 44%, 0.5)-50 color utility.
 */
.background-color-orange-50 {
  background-color: hsla(30, 100%, 44%, 0.5);
}

/**
 * `color` hsla(30, 100%, 44%, 0.4)-40 color utility.
 */
.color-orange-40 {
  color: hsla(30, 100%, 44%, 0.4);
}

/**
 * `background-color` hsla(30, 100%, 44%, 0.4)-40 color utility.
 */
.background-color-orange-40 {
  background-color: hsla(30, 100%, 44%, 0.4);
}

/**
 * `color` hsla(30, 100%, 44%, 0.3)-30 color utility.
 */
.color-orange-30 {
  color: hsla(30, 100%, 44%, 0.3);
}

/**
 * `background-color` hsla(30, 100%, 44%, 0.3)-30 color utility.
 */
.background-color-orange-30 {
  background-color: hsla(30, 100%, 44%, 0.3);
}

/**
 * `color` hsla(30, 100%, 44%, 0.2)-20 color utility.
 */
.color-orange-20 {
  color: hsla(30, 100%, 44%, 0.2);
}

/**
 * `background-color` hsla(30, 100%, 44%, 0.2)-20 color utility.
 */
.background-color-orange-20 {
  background-color: hsla(30, 100%, 44%, 0.2);
}

/**
 * `color` hsla(30, 100%, 44%, 0.1)-10 color utility.
 */
.color-orange-10 {
  color: hsla(30, 100%, 44%, 0.1);
}

/**
 * `background-color` hsla(30, 100%, 44%, 0.1)-10 color utility.
 */
.background-color-orange-10 {
  background-color: hsla(30, 100%, 44%, 0.1);
}

/**
 * `color` hsl(180, 100%, 33%)-100 color utility.
 */
.color-mint-green-100 {
  color: hsl(180, 100%, 33%);
}

/**
 * `background-color` hsl(180, 100%, 33%)-100 color utility.
 */
.background-color-mint-green-100 {
  background-color: hsl(180, 100%, 33%);
}

/**
 * `color` hsla(180, 100%, 33%, 0.9)-90 color utility.
 */
.color-mint-green-90 {
  color: hsla(180, 100%, 33%, 0.9);
}

/**
 * `background-color` hsla(180, 100%, 33%, 0.9)-90 color utility.
 */
.background-color-mint-green-90 {
  background-color: hsla(180, 100%, 33%, 0.9);
}

/**
 * `color` hsla(180, 100%, 33%, 0.8)-80 color utility.
 */
.color-mint-green-80 {
  color: hsla(180, 100%, 33%, 0.8);
}

/**
 * `background-color` hsla(180, 100%, 33%, 0.8)-80 color utility.
 */
.background-color-mint-green-80 {
  background-color: hsla(180, 100%, 33%, 0.8);
}

/**
 * `color` hsla(180, 100%, 33%, 0.7)-70 color utility.
 */
.color-mint-green-70 {
  color: hsla(180, 100%, 33%, 0.7);
}

/**
 * `background-color` hsla(180, 100%, 33%, 0.7)-70 color utility.
 */
.background-color-mint-green-70 {
  background-color: hsla(180, 100%, 33%, 0.7);
}

/**
 * `color` hsla(180, 100%, 33%, 0.6)-60 color utility.
 */
.color-mint-green-60 {
  color: hsla(180, 100%, 33%, 0.6);
}

/**
 * `background-color` hsla(180, 100%, 33%, 0.6)-60 color utility.
 */
.background-color-mint-green-60 {
  background-color: hsla(180, 100%, 33%, 0.6);
}

/**
 * `color` hsla(180, 100%, 33%, 0.5)-50 color utility.
 */
.color-mint-green-50 {
  color: hsla(180, 100%, 33%, 0.5);
}

/**
 * `background-color` hsla(180, 100%, 33%, 0.5)-50 color utility.
 */
.background-color-mint-green-50 {
  background-color: hsla(180, 100%, 33%, 0.5);
}

/**
 * `color` hsla(180, 100%, 33%, 0.4)-40 color utility.
 */
.color-mint-green-40 {
  color: hsla(180, 100%, 33%, 0.4);
}

/**
 * `background-color` hsla(180, 100%, 33%, 0.4)-40 color utility.
 */
.background-color-mint-green-40 {
  background-color: hsla(180, 100%, 33%, 0.4);
}

/**
 * `color` hsla(180, 100%, 33%, 0.3)-30 color utility.
 */
.color-mint-green-30 {
  color: hsla(180, 100%, 33%, 0.3);
}

/**
 * `background-color` hsla(180, 100%, 33%, 0.3)-30 color utility.
 */
.background-color-mint-green-30 {
  background-color: hsla(180, 100%, 33%, 0.3);
}

/**
 * `color` hsla(180, 100%, 33%, 0.2)-20 color utility.
 */
.color-mint-green-20 {
  color: hsla(180, 100%, 33%, 0.2);
}

/**
 * `background-color` hsla(180, 100%, 33%, 0.2)-20 color utility.
 */
.background-color-mint-green-20 {
  background-color: hsla(180, 100%, 33%, 0.2);
}

/**
 * `color` hsla(180, 100%, 33%, 0.1)-10 color utility.
 */
.color-mint-green-10 {
  color: hsla(180, 100%, 33%, 0.1);
}

/**
 * `background-color` hsla(180, 100%, 33%, 0.1)-10 color utility.
 */
.background-color-mint-green-10 {
  background-color: hsla(180, 100%, 33%, 0.1);
}

/**
 * `color` hsl(120, 41%, 67%)-100 color utility.
 */
.color-green-100 {
  color: hsl(120, 41%, 67%);
}

/**
 * `background-color` hsl(120, 41%, 67%)-100 color utility.
 */
.background-color-green-100 {
  background-color: hsl(120, 41%, 67%);
}

/**
 * `color` hsla(120, 41%, 67%, 0.9)-90 color utility.
 */
.color-green-90 {
  color: hsla(120, 41%, 67%, 0.9);
}

/**
 * `background-color` hsla(120, 41%, 67%, 0.9)-90 color utility.
 */
.background-color-green-90 {
  background-color: hsla(120, 41%, 67%, 0.9);
}

/**
 * `color` hsla(120, 41%, 67%, 0.8)-80 color utility.
 */
.color-green-80 {
  color: hsla(120, 41%, 67%, 0.8);
}

/**
 * `background-color` hsla(120, 41%, 67%, 0.8)-80 color utility.
 */
.background-color-green-80 {
  background-color: hsla(120, 41%, 67%, 0.8);
}

/**
 * `color` hsla(120, 41%, 67%, 0.7)-70 color utility.
 */
.color-green-70 {
  color: hsla(120, 41%, 67%, 0.7);
}

/**
 * `background-color` hsla(120, 41%, 67%, 0.7)-70 color utility.
 */
.background-color-green-70 {
  background-color: hsla(120, 41%, 67%, 0.7);
}

/**
 * `color` hsla(120, 41%, 67%, 0.6)-60 color utility.
 */
.color-green-60 {
  color: hsla(120, 41%, 67%, 0.6);
}

/**
 * `background-color` hsla(120, 41%, 67%, 0.6)-60 color utility.
 */
.background-color-green-60 {
  background-color: hsla(120, 41%, 67%, 0.6);
}

/**
 * `color` hsla(120, 41%, 67%, 0.5)-50 color utility.
 */
.color-green-50 {
  color: hsla(120, 41%, 67%, 0.5);
}

/**
 * `background-color` hsla(120, 41%, 67%, 0.5)-50 color utility.
 */
.background-color-green-50 {
  background-color: hsla(120, 41%, 67%, 0.5);
}

/**
 * `color` hsla(120, 41%, 67%, 0.4)-40 color utility.
 */
.color-green-40 {
  color: hsla(120, 41%, 67%, 0.4);
}

/**
 * `background-color` hsla(120, 41%, 67%, 0.4)-40 color utility.
 */
.background-color-green-40 {
  background-color: hsla(120, 41%, 67%, 0.4);
}

/**
 * `color` hsla(120, 41%, 67%, 0.3)-30 color utility.
 */
.color-green-30 {
  color: hsla(120, 41%, 67%, 0.3);
}

/**
 * `background-color` hsla(120, 41%, 67%, 0.3)-30 color utility.
 */
.background-color-green-30 {
  background-color: hsla(120, 41%, 67%, 0.3);
}

/**
 * `color` hsla(120, 41%, 67%, 0.2)-20 color utility.
 */
.color-green-20 {
  color: hsla(120, 41%, 67%, 0.2);
}

/**
 * `background-color` hsla(120, 41%, 67%, 0.2)-20 color utility.
 */
.background-color-green-20 {
  background-color: hsla(120, 41%, 67%, 0.2);
}

/**
 * `color` hsla(120, 41%, 67%, 0.1)-10 color utility.
 */
.color-green-10 {
  color: hsla(120, 41%, 67%, 0.1);
}

/**
 * `background-color` hsla(120, 41%, 67%, 0.1)-10 color utility.
 */
.background-color-green-10 {
  background-color: hsla(120, 41%, 67%, 0.1);
}

/**
 * `color` hsl(228, 29%, 97%)-100 color utility.
 */
.color-blue-gray-100 {
  color: hsl(228, 29%, 97%);
}

/**
 * `background-color` hsl(228, 29%, 97%)-100 color utility.
 */
.background-color-blue-gray-100 {
  background-color: hsl(228, 29%, 97%);
}

/**
 * `color` hsla(228, 29%, 97%, 0.9)-90 color utility.
 */
.color-blue-gray-90 {
  color: hsla(228, 29%, 97%, 0.9);
}

/**
 * `background-color` hsla(228, 29%, 97%, 0.9)-90 color utility.
 */
.background-color-blue-gray-90 {
  background-color: hsla(228, 29%, 97%, 0.9);
}

/**
 * `color` hsla(228, 29%, 97%, 0.8)-80 color utility.
 */
.color-blue-gray-80 {
  color: hsla(228, 29%, 97%, 0.8);
}

/**
 * `background-color` hsla(228, 29%, 97%, 0.8)-80 color utility.
 */
.background-color-blue-gray-80 {
  background-color: hsla(228, 29%, 97%, 0.8);
}

/**
 * `color` hsla(228, 29%, 97%, 0.7)-70 color utility.
 */
.color-blue-gray-70 {
  color: hsla(228, 29%, 97%, 0.7);
}

/**
 * `background-color` hsla(228, 29%, 97%, 0.7)-70 color utility.
 */
.background-color-blue-gray-70 {
  background-color: hsla(228, 29%, 97%, 0.7);
}

/**
 * `color` hsla(228, 29%, 97%, 0.6)-60 color utility.
 */
.color-blue-gray-60 {
  color: hsla(228, 29%, 97%, 0.6);
}

/**
 * `background-color` hsla(228, 29%, 97%, 0.6)-60 color utility.
 */
.background-color-blue-gray-60 {
  background-color: hsla(228, 29%, 97%, 0.6);
}

/**
 * `color` hsl(231, 27%, 67%)-50 color utility.
 */
.color-blue-gray-50 {
  color: hsl(231, 27%, 67%);
}

/**
 * `background-color` hsl(231, 27%, 67%)-50 color utility.
 */
.background-color-blue-gray-50 {
  background-color: hsl(231, 27%, 67%);
}

/**
 * `color` hsla(228, 29%, 97%, 0.4)-40 color utility.
 */
.color-blue-gray-40 {
  color: hsla(228, 29%, 97%, 0.4);
}

/**
 * `background-color` hsla(228, 29%, 97%, 0.4)-40 color utility.
 */
.background-color-blue-gray-40 {
  background-color: hsla(228, 29%, 97%, 0.4);
}

/**
 * `color` hsl(231, 27%, 80%)-30 color utility.
 */
.color-blue-gray-30 {
  color: hsl(231, 27%, 80%);
}

/**
 * `background-color` hsl(231, 27%, 80%)-30 color utility.
 */
.background-color-blue-gray-30 {
  background-color: hsl(231, 27%, 80%);
}

/**
 * `color` hsla(228, 29%, 97%, 0.2)-20 color utility.
 */
.color-blue-gray-20 {
  color: hsla(228, 29%, 97%, 0.2);
}

/**
 * `background-color` hsla(228, 29%, 97%, 0.2)-20 color utility.
 */
.background-color-blue-gray-20 {
  background-color: hsla(228, 29%, 97%, 0.2);
}

/**
 * `color` hsl(233, 29%, 95%)-10 color utility.
 */
.color-blue-gray-10 {
  color: hsl(233, 29%, 95%);
}

/**
 * `background-color` hsl(233, 29%, 95%)-10 color utility.
 */
.background-color-blue-gray-10 {
  background-color: hsl(233, 29%, 95%);
}

/**
 * `color` hsl(230, 26%, 87%)-100 color utility.
 */
.color-lila-blue-100 {
  color: hsl(230, 26%, 87%);
}

/**
 * `background-color` hsl(230, 26%, 87%)-100 color utility.
 */
.background-color-lila-blue-100 {
  background-color: hsl(230, 26%, 87%);
}

/**
 * `color` hsla(230, 26%, 87%, 0.9)-90 color utility.
 */
.color-lila-blue-90 {
  color: hsla(230, 26%, 87%, 0.9);
}

/**
 * `background-color` hsla(230, 26%, 87%, 0.9)-90 color utility.
 */
.background-color-lila-blue-90 {
  background-color: hsla(230, 26%, 87%, 0.9);
}

/**
 * `color` hsla(230, 26%, 87%, 0.8)-80 color utility.
 */
.color-lila-blue-80 {
  color: hsla(230, 26%, 87%, 0.8);
}

/**
 * `background-color` hsla(230, 26%, 87%, 0.8)-80 color utility.
 */
.background-color-lila-blue-80 {
  background-color: hsla(230, 26%, 87%, 0.8);
}

/**
 * `color` hsla(230, 26%, 87%, 0.7)-70 color utility.
 */
.color-lila-blue-70 {
  color: hsla(230, 26%, 87%, 0.7);
}

/**
 * `background-color` hsla(230, 26%, 87%, 0.7)-70 color utility.
 */
.background-color-lila-blue-70 {
  background-color: hsla(230, 26%, 87%, 0.7);
}

/**
 * `color` hsla(230, 26%, 87%, 0.6)-60 color utility.
 */
.color-lila-blue-60 {
  color: hsla(230, 26%, 87%, 0.6);
}

/**
 * `background-color` hsla(230, 26%, 87%, 0.6)-60 color utility.
 */
.background-color-lila-blue-60 {
  background-color: hsla(230, 26%, 87%, 0.6);
}

/**
 * `color` hsla(230, 26%, 87%, 0.5)-50 color utility.
 */
.color-lila-blue-50 {
  color: hsla(230, 26%, 87%, 0.5);
}

/**
 * `background-color` hsla(230, 26%, 87%, 0.5)-50 color utility.
 */
.background-color-lila-blue-50 {
  background-color: hsla(230, 26%, 87%, 0.5);
}

/**
 * `color` hsla(230, 26%, 87%, 0.4)-40 color utility.
 */
.color-lila-blue-40 {
  color: hsla(230, 26%, 87%, 0.4);
}

/**
 * `background-color` hsla(230, 26%, 87%, 0.4)-40 color utility.
 */
.background-color-lila-blue-40 {
  background-color: hsla(230, 26%, 87%, 0.4);
}

/**
 * `color` hsla(230, 26%, 87%, 0.3)-30 color utility.
 */
.color-lila-blue-30 {
  color: hsla(230, 26%, 87%, 0.3);
}

/**
 * `background-color` hsla(230, 26%, 87%, 0.3)-30 color utility.
 */
.background-color-lila-blue-30 {
  background-color: hsla(230, 26%, 87%, 0.3);
}

/**
 * `color` hsla(230, 26%, 87%, 0.2)-20 color utility.
 */
.color-lila-blue-20 {
  color: hsla(230, 26%, 87%, 0.2);
}

/**
 * `background-color` hsla(230, 26%, 87%, 0.2)-20 color utility.
 */
.background-color-lila-blue-20 {
  background-color: hsla(230, 26%, 87%, 0.2);
}

/**
 * `color` hsla(230, 26%, 87%, 0.1)-10 color utility.
 */
.color-lila-blue-10 {
  color: hsla(230, 26%, 87%, 0.1);
}

/**
 * `background-color` hsla(230, 26%, 87%, 0.1)-10 color utility.
 */
.background-color-lila-blue-10 {
  background-color: hsla(230, 26%, 87%, 0.1);
}

/**
 * `color` hsl(38, 93%, 53%)-100 color utility.
 */
.color-alert-orange-100 {
  color: hsl(38, 93%, 53%);
}

/**
 * `background-color` hsl(38, 93%, 53%)-100 color utility.
 */
.background-color-alert-orange-100 {
  background-color: hsl(38, 93%, 53%);
}

/**
 * `color` hsla(38, 93%, 53%, 0.9)-90 color utility.
 */
.color-alert-orange-90 {
  color: hsla(38, 93%, 53%, 0.9);
}

/**
 * `background-color` hsla(38, 93%, 53%, 0.9)-90 color utility.
 */
.background-color-alert-orange-90 {
  background-color: hsla(38, 93%, 53%, 0.9);
}

/**
 * `color` hsla(38, 93%, 53%, 0.8)-80 color utility.
 */
.color-alert-orange-80 {
  color: hsla(38, 93%, 53%, 0.8);
}

/**
 * `background-color` hsla(38, 93%, 53%, 0.8)-80 color utility.
 */
.background-color-alert-orange-80 {
  background-color: hsla(38, 93%, 53%, 0.8);
}

/**
 * `color` hsla(38, 93%, 53%, 0.7)-70 color utility.
 */
.color-alert-orange-70 {
  color: hsla(38, 93%, 53%, 0.7);
}

/**
 * `background-color` hsla(38, 93%, 53%, 0.7)-70 color utility.
 */
.background-color-alert-orange-70 {
  background-color: hsla(38, 93%, 53%, 0.7);
}

/**
 * `color` hsla(38, 93%, 53%, 0.6)-60 color utility.
 */
.color-alert-orange-60 {
  color: hsla(38, 93%, 53%, 0.6);
}

/**
 * `background-color` hsla(38, 93%, 53%, 0.6)-60 color utility.
 */
.background-color-alert-orange-60 {
  background-color: hsla(38, 93%, 53%, 0.6);
}

/**
 * `color` hsla(38, 93%, 53%, 0.5)-50 color utility.
 */
.color-alert-orange-50 {
  color: hsla(38, 93%, 53%, 0.5);
}

/**
 * `background-color` hsla(38, 93%, 53%, 0.5)-50 color utility.
 */
.background-color-alert-orange-50 {
  background-color: hsla(38, 93%, 53%, 0.5);
}

/**
 * `color` hsla(38, 93%, 53%, 0.4)-40 color utility.
 */
.color-alert-orange-40 {
  color: hsla(38, 93%, 53%, 0.4);
}

/**
 * `background-color` hsla(38, 93%, 53%, 0.4)-40 color utility.
 */
.background-color-alert-orange-40 {
  background-color: hsla(38, 93%, 53%, 0.4);
}

/**
 * `color` hsla(38, 93%, 53%, 0.3)-30 color utility.
 */
.color-alert-orange-30 {
  color: hsla(38, 93%, 53%, 0.3);
}

/**
 * `background-color` hsla(38, 93%, 53%, 0.3)-30 color utility.
 */
.background-color-alert-orange-30 {
  background-color: hsla(38, 93%, 53%, 0.3);
}

/**
 * `color` hsla(38, 93%, 53%, 0.2)-20 color utility.
 */
.color-alert-orange-20 {
  color: hsla(38, 93%, 53%, 0.2);
}

/**
 * `background-color` hsla(38, 93%, 53%, 0.2)-20 color utility.
 */
.background-color-alert-orange-20 {
  background-color: hsla(38, 93%, 53%, 0.2);
}

/**
 * `color` hsla(38, 93%, 53%, 0.1)-10 color utility.
 */
.color-alert-orange-10 {
  color: hsla(38, 93%, 53%, 0.1);
}

/**
 * `background-color` hsla(38, 93%, 53%, 0.1)-10 color utility.
 */
.background-color-alert-orange-10 {
  background-color: hsla(38, 93%, 53%, 0.1);
}

/**
 * `color` hsl(36, 32%, 23%)-100 color utility.
 */
.color-brown-100 {
  color: hsl(36, 32%, 23%);
}

/**
 * `background-color` hsl(36, 32%, 23%)-100 color utility.
 */
.background-color-brown-100 {
  background-color: hsl(36, 32%, 23%);
}

/**
 * `color` hsla(36, 32%, 23%, 0.9)-90 color utility.
 */
.color-brown-90 {
  color: hsla(36, 32%, 23%, 0.9);
}

/**
 * `background-color` hsla(36, 32%, 23%, 0.9)-90 color utility.
 */
.background-color-brown-90 {
  background-color: hsla(36, 32%, 23%, 0.9);
}

/**
 * `color` hsla(36, 32%, 23%, 0.8)-80 color utility.
 */
.color-brown-80 {
  color: hsla(36, 32%, 23%, 0.8);
}

/**
 * `background-color` hsla(36, 32%, 23%, 0.8)-80 color utility.
 */
.background-color-brown-80 {
  background-color: hsla(36, 32%, 23%, 0.8);
}

/**
 * `color` hsla(36, 32%, 23%, 0.7)-70 color utility.
 */
.color-brown-70 {
  color: hsla(36, 32%, 23%, 0.7);
}

/**
 * `background-color` hsla(36, 32%, 23%, 0.7)-70 color utility.
 */
.background-color-brown-70 {
  background-color: hsla(36, 32%, 23%, 0.7);
}

/**
 * `color` hsla(36, 32%, 23%, 0.6)-60 color utility.
 */
.color-brown-60 {
  color: hsla(36, 32%, 23%, 0.6);
}

/**
 * `background-color` hsla(36, 32%, 23%, 0.6)-60 color utility.
 */
.background-color-brown-60 {
  background-color: hsla(36, 32%, 23%, 0.6);
}

/**
 * `color` hsla(36, 32%, 23%, 0.5)-50 color utility.
 */
.color-brown-50 {
  color: hsla(36, 32%, 23%, 0.5);
}

/**
 * `background-color` hsla(36, 32%, 23%, 0.5)-50 color utility.
 */
.background-color-brown-50 {
  background-color: hsla(36, 32%, 23%, 0.5);
}

/**
 * `color` hsla(36, 32%, 23%, 0.4)-40 color utility.
 */
.color-brown-40 {
  color: hsla(36, 32%, 23%, 0.4);
}

/**
 * `background-color` hsla(36, 32%, 23%, 0.4)-40 color utility.
 */
.background-color-brown-40 {
  background-color: hsla(36, 32%, 23%, 0.4);
}

/**
 * `color` hsla(36, 32%, 23%, 0.3)-30 color utility.
 */
.color-brown-30 {
  color: hsla(36, 32%, 23%, 0.3);
}

/**
 * `background-color` hsla(36, 32%, 23%, 0.3)-30 color utility.
 */
.background-color-brown-30 {
  background-color: hsla(36, 32%, 23%, 0.3);
}

/**
 * `color` hsla(36, 32%, 23%, 0.2)-20 color utility.
 */
.color-brown-20 {
  color: hsla(36, 32%, 23%, 0.2);
}

/**
 * `background-color` hsla(36, 32%, 23%, 0.2)-20 color utility.
 */
.background-color-brown-20 {
  background-color: hsla(36, 32%, 23%, 0.2);
}

/**
 * `color` hsla(36, 32%, 23%, 0.1)-10 color utility.
 */
.color-brown-10 {
  color: hsla(36, 32%, 23%, 0.1);
}

/**
 * `background-color` hsla(36, 32%, 23%, 0.1)-10 color utility.
 */
.background-color-brown-10 {
  background-color: hsla(36, 32%, 23%, 0.1);
}

/**
 * `color` hsl(231, 62%, 28%)-100 color utility.
 */
.color-dark-blue-100 {
  color: hsl(231, 62%, 28%);
}

/**
 * `background-color` hsl(231, 62%, 28%)-100 color utility.
 */
.background-color-dark-blue-100 {
  background-color: hsl(231, 62%, 28%);
}

/**
 * `color` hsla(231, 62%, 28%, 0.9)-90 color utility.
 */
.color-dark-blue-90 {
  color: hsla(231, 62%, 28%, 0.9);
}

/**
 * `background-color` hsla(231, 62%, 28%, 0.9)-90 color utility.
 */
.background-color-dark-blue-90 {
  background-color: hsla(231, 62%, 28%, 0.9);
}

/**
 * `color` hsla(231, 62%, 28%, 0.8)-80 color utility.
 */
.color-dark-blue-80 {
  color: hsla(231, 62%, 28%, 0.8);
}

/**
 * `background-color` hsla(231, 62%, 28%, 0.8)-80 color utility.
 */
.background-color-dark-blue-80 {
  background-color: hsla(231, 62%, 28%, 0.8);
}

/**
 * `color` hsla(231, 62%, 28%, 0.7)-70 color utility.
 */
.color-dark-blue-70 {
  color: hsla(231, 62%, 28%, 0.7);
}

/**
 * `background-color` hsla(231, 62%, 28%, 0.7)-70 color utility.
 */
.background-color-dark-blue-70 {
  background-color: hsla(231, 62%, 28%, 0.7);
}

/**
 * `color` hsla(231, 62%, 28%, 0.6)-60 color utility.
 */
.color-dark-blue-60 {
  color: hsla(231, 62%, 28%, 0.6);
}

/**
 * `background-color` hsla(231, 62%, 28%, 0.6)-60 color utility.
 */
.background-color-dark-blue-60 {
  background-color: hsla(231, 62%, 28%, 0.6);
}

/**
 * `color` hsla(231, 62%, 28%, 0.5)-50 color utility.
 */
.color-dark-blue-50 {
  color: hsla(231, 62%, 28%, 0.5);
}

/**
 * `background-color` hsla(231, 62%, 28%, 0.5)-50 color utility.
 */
.background-color-dark-blue-50 {
  background-color: hsla(231, 62%, 28%, 0.5);
}

/**
 * `color` hsla(231, 62%, 28%, 0.4)-40 color utility.
 */
.color-dark-blue-40 {
  color: hsla(231, 62%, 28%, 0.4);
}

/**
 * `background-color` hsla(231, 62%, 28%, 0.4)-40 color utility.
 */
.background-color-dark-blue-40 {
  background-color: hsla(231, 62%, 28%, 0.4);
}

/**
 * `color` hsla(231, 62%, 28%, 0.3)-30 color utility.
 */
.color-dark-blue-30 {
  color: hsla(231, 62%, 28%, 0.3);
}

/**
 * `background-color` hsla(231, 62%, 28%, 0.3)-30 color utility.
 */
.background-color-dark-blue-30 {
  background-color: hsla(231, 62%, 28%, 0.3);
}

/**
 * `color` hsla(231, 62%, 28%, 0.2)-20 color utility.
 */
.color-dark-blue-20 {
  color: hsla(231, 62%, 28%, 0.2);
}

/**
 * `background-color` hsla(231, 62%, 28%, 0.2)-20 color utility.
 */
.background-color-dark-blue-20 {
  background-color: hsla(231, 62%, 28%, 0.2);
}

/**
 * `color` hsla(231, 62%, 28%, 0.1)-10 color utility.
 */
.color-dark-blue-10 {
  color: hsla(231, 62%, 28%, 0.1);
}

/**
 * `background-color` hsla(231, 62%, 28%, 0.1)-10 color utility.
 */
.background-color-dark-blue-10 {
  background-color: hsla(231, 62%, 28%, 0.1);
}

/**
 * `color` hsl(232, 41%, 24%)-100 color utility.
 */
.color-article-blue-100 {
  color: hsl(232, 41%, 24%);
}

/**
 * `background-color` hsl(232, 41%, 24%)-100 color utility.
 */
.background-color-article-blue-100 {
  background-color: hsl(232, 41%, 24%);
}

/**
 * `color` hsla(232, 41%, 24%, 0.9)-90 color utility.
 */
.color-article-blue-90 {
  color: hsla(232, 41%, 24%, 0.9);
}

/**
 * `background-color` hsla(232, 41%, 24%, 0.9)-90 color utility.
 */
.background-color-article-blue-90 {
  background-color: hsla(232, 41%, 24%, 0.9);
}

/**
 * `color` hsla(232, 41%, 24%, 0.8)-80 color utility.
 */
.color-article-blue-80 {
  color: hsla(232, 41%, 24%, 0.8);
}

/**
 * `background-color` hsla(232, 41%, 24%, 0.8)-80 color utility.
 */
.background-color-article-blue-80 {
  background-color: hsla(232, 41%, 24%, 0.8);
}

/**
 * `color` hsla(232, 41%, 24%, 0.7)-70 color utility.
 */
.color-article-blue-70 {
  color: hsla(232, 41%, 24%, 0.7);
}

/**
 * `background-color` hsla(232, 41%, 24%, 0.7)-70 color utility.
 */
.background-color-article-blue-70 {
  background-color: hsla(232, 41%, 24%, 0.7);
}

/**
 * `color` hsla(232, 41%, 24%, 0.6)-60 color utility.
 */
.color-article-blue-60 {
  color: hsla(232, 41%, 24%, 0.6);
}

/**
 * `background-color` hsla(232, 41%, 24%, 0.6)-60 color utility.
 */
.background-color-article-blue-60 {
  background-color: hsla(232, 41%, 24%, 0.6);
}

/**
 * `color` hsla(232, 41%, 24%, 0.5)-50 color utility.
 */
.color-article-blue-50 {
  color: hsla(232, 41%, 24%, 0.5);
}

/**
 * `background-color` hsla(232, 41%, 24%, 0.5)-50 color utility.
 */
.background-color-article-blue-50 {
  background-color: hsla(232, 41%, 24%, 0.5);
}

/**
 * `color` hsla(232, 41%, 24%, 0.4)-40 color utility.
 */
.color-article-blue-40 {
  color: hsla(232, 41%, 24%, 0.4);
}

/**
 * `background-color` hsla(232, 41%, 24%, 0.4)-40 color utility.
 */
.background-color-article-blue-40 {
  background-color: hsla(232, 41%, 24%, 0.4);
}

/**
 * `color` hsla(232, 41%, 24%, 0.3)-30 color utility.
 */
.color-article-blue-30 {
  color: hsla(232, 41%, 24%, 0.3);
}

/**
 * `background-color` hsla(232, 41%, 24%, 0.3)-30 color utility.
 */
.background-color-article-blue-30 {
  background-color: hsla(232, 41%, 24%, 0.3);
}

/**
 * `color` hsla(232, 41%, 24%, 0.2)-20 color utility.
 */
.color-article-blue-20 {
  color: hsla(232, 41%, 24%, 0.2);
}

/**
 * `background-color` hsla(232, 41%, 24%, 0.2)-20 color utility.
 */
.background-color-article-blue-20 {
  background-color: hsla(232, 41%, 24%, 0.2);
}

/**
 * `color` hsla(232, 41%, 24%, 0.1)-10 color utility.
 */
.color-article-blue-10 {
  color: hsla(232, 41%, 24%, 0.1);
}

/**
 * `background-color` hsla(232, 41%, 24%, 0.1)-10 color utility.
 */
.background-color-article-blue-10 {
  background-color: hsla(232, 41%, 24%, 0.1);
}

/**
 * `color` hsl(210, 20%, 98%)-100 color utility.
 */
.color-neutral-light-100 {
  color: hsl(210, 20%, 98%);
}

/**
 * `background-color` hsl(210, 20%, 98%)-100 color utility.
 */
.background-color-neutral-light-100 {
  background-color: hsl(210, 20%, 98%);
}

/**
 * `color` hsla(210, 20%, 98%, 0.9)-90 color utility.
 */
.color-neutral-light-90 {
  color: hsla(210, 20%, 98%, 0.9);
}

/**
 * `background-color` hsla(210, 20%, 98%, 0.9)-90 color utility.
 */
.background-color-neutral-light-90 {
  background-color: hsla(210, 20%, 98%, 0.9);
}

/**
 * `color` hsla(210, 20%, 98%, 0.8)-80 color utility.
 */
.color-neutral-light-80 {
  color: hsla(210, 20%, 98%, 0.8);
}

/**
 * `background-color` hsla(210, 20%, 98%, 0.8)-80 color utility.
 */
.background-color-neutral-light-80 {
  background-color: hsla(210, 20%, 98%, 0.8);
}

/**
 * `color` hsla(210, 20%, 98%, 0.7)-70 color utility.
 */
.color-neutral-light-70 {
  color: hsla(210, 20%, 98%, 0.7);
}

/**
 * `background-color` hsla(210, 20%, 98%, 0.7)-70 color utility.
 */
.background-color-neutral-light-70 {
  background-color: hsla(210, 20%, 98%, 0.7);
}

/**
 * `color` hsla(210, 20%, 98%, 0.6)-60 color utility.
 */
.color-neutral-light-60 {
  color: hsla(210, 20%, 98%, 0.6);
}

/**
 * `background-color` hsla(210, 20%, 98%, 0.6)-60 color utility.
 */
.background-color-neutral-light-60 {
  background-color: hsla(210, 20%, 98%, 0.6);
}

/**
 * `color` hsla(210, 20%, 98%, 0.5)-50 color utility.
 */
.color-neutral-light-50 {
  color: hsla(210, 20%, 98%, 0.5);
}

/**
 * `background-color` hsla(210, 20%, 98%, 0.5)-50 color utility.
 */
.background-color-neutral-light-50 {
  background-color: hsla(210, 20%, 98%, 0.5);
}

/**
 * `color` hsla(210, 20%, 98%, 0.4)-40 color utility.
 */
.color-neutral-light-40 {
  color: hsla(210, 20%, 98%, 0.4);
}

/**
 * `background-color` hsla(210, 20%, 98%, 0.4)-40 color utility.
 */
.background-color-neutral-light-40 {
  background-color: hsla(210, 20%, 98%, 0.4);
}

/**
 * `color` hsla(210, 20%, 98%, 0.3)-30 color utility.
 */
.color-neutral-light-30 {
  color: hsla(210, 20%, 98%, 0.3);
}

/**
 * `background-color` hsla(210, 20%, 98%, 0.3)-30 color utility.
 */
.background-color-neutral-light-30 {
  background-color: hsla(210, 20%, 98%, 0.3);
}

/**
 * `color` hsla(210, 20%, 98%, 0.2)-20 color utility.
 */
.color-neutral-light-20 {
  color: hsla(210, 20%, 98%, 0.2);
}

/**
 * `background-color` hsla(210, 20%, 98%, 0.2)-20 color utility.
 */
.background-color-neutral-light-20 {
  background-color: hsla(210, 20%, 98%, 0.2);
}

/**
 * `color` hsla(210, 20%, 98%, 0.1)-10 color utility.
 */
.color-neutral-light-10 {
  color: hsla(210, 20%, 98%, 0.1);
}

/**
 * `background-color` hsla(210, 20%, 98%, 0.1)-10 color utility.
 */
.background-color-neutral-light-10 {
  background-color: hsla(210, 20%, 98%, 0.1);
}

/**
 * `color` hsla(210, 20%, 98%, 0.05)-5 color utility.
 */
.color-neutral-light-5 {
  color: hsla(210, 20%, 98%, 0.05);
}

/**
 * `background-color` hsla(210, 20%, 98%, 0.05)-5 color utility.
 */
.background-color-neutral-light-5 {
  background-color: hsla(210, 20%, 98%, 0.05);
}

/**
 * `color` hsl(220, 13%, 91%)-100 color utility.
 */
.color-neutral-medium-100 {
  color: hsl(220, 13%, 91%);
}

/**
 * `background-color` hsl(220, 13%, 91%)-100 color utility.
 */
.background-color-neutral-medium-100 {
  background-color: hsl(220, 13%, 91%);
}

/**
 * `color` hsla(220, 13%, 91%, 0.9)-90 color utility.
 */
.color-neutral-medium-90 {
  color: hsla(220, 13%, 91%, 0.9);
}

/**
 * `background-color` hsla(220, 13%, 91%, 0.9)-90 color utility.
 */
.background-color-neutral-medium-90 {
  background-color: hsla(220, 13%, 91%, 0.9);
}

/**
 * `color` hsla(220, 13%, 91%, 0.8)-80 color utility.
 */
.color-neutral-medium-80 {
  color: hsla(220, 13%, 91%, 0.8);
}

/**
 * `background-color` hsla(220, 13%, 91%, 0.8)-80 color utility.
 */
.background-color-neutral-medium-80 {
  background-color: hsla(220, 13%, 91%, 0.8);
}

/**
 * `color` hsla(220, 13%, 91%, 0.7)-70 color utility.
 */
.color-neutral-medium-70 {
  color: hsla(220, 13%, 91%, 0.7);
}

/**
 * `background-color` hsla(220, 13%, 91%, 0.7)-70 color utility.
 */
.background-color-neutral-medium-70 {
  background-color: hsla(220, 13%, 91%, 0.7);
}

/**
 * `color` hsla(220, 13%, 91%, 0.6)-60 color utility.
 */
.color-neutral-medium-60 {
  color: hsla(220, 13%, 91%, 0.6);
}

/**
 * `background-color` hsla(220, 13%, 91%, 0.6)-60 color utility.
 */
.background-color-neutral-medium-60 {
  background-color: hsla(220, 13%, 91%, 0.6);
}

/**
 * `color` hsla(220, 13%, 91%, 0.5)-50 color utility.
 */
.color-neutral-medium-50 {
  color: hsla(220, 13%, 91%, 0.5);
}

/**
 * `background-color` hsla(220, 13%, 91%, 0.5)-50 color utility.
 */
.background-color-neutral-medium-50 {
  background-color: hsla(220, 13%, 91%, 0.5);
}

/**
 * `color` hsla(220, 13%, 91%, 0.4)-40 color utility.
 */
.color-neutral-medium-40 {
  color: hsla(220, 13%, 91%, 0.4);
}

/**
 * `background-color` hsla(220, 13%, 91%, 0.4)-40 color utility.
 */
.background-color-neutral-medium-40 {
  background-color: hsla(220, 13%, 91%, 0.4);
}

/**
 * `color` hsla(220, 13%, 91%, 0.3)-30 color utility.
 */
.color-neutral-medium-30 {
  color: hsla(220, 13%, 91%, 0.3);
}

/**
 * `background-color` hsla(220, 13%, 91%, 0.3)-30 color utility.
 */
.background-color-neutral-medium-30 {
  background-color: hsla(220, 13%, 91%, 0.3);
}

/**
 * `color` hsla(220, 13%, 91%, 0.2)-20 color utility.
 */
.color-neutral-medium-20 {
  color: hsla(220, 13%, 91%, 0.2);
}

/**
 * `background-color` hsla(220, 13%, 91%, 0.2)-20 color utility.
 */
.background-color-neutral-medium-20 {
  background-color: hsla(220, 13%, 91%, 0.2);
}

/**
 * `color` hsla(220, 13%, 91%, 0.1)-10 color utility.
 */
.color-neutral-medium-10 {
  color: hsla(220, 13%, 91%, 0.1);
}

/**
 * `background-color` hsla(220, 13%, 91%, 0.1)-10 color utility.
 */
.background-color-neutral-medium-10 {
  background-color: hsla(220, 13%, 91%, 0.1);
}

/**
 * `color` hsl(231, 74%, 10%)-100 color utility.
 */
.color-title-blue-100 {
  color: hsl(231, 74%, 10%);
}

/**
 * `background-color` hsl(231, 74%, 10%)-100 color utility.
 */
.background-color-title-blue-100 {
  background-color: hsl(231, 74%, 10%);
}

/**
 * `color` hsla(231, 74%, 10%, 0.9)-90 color utility.
 */
.color-title-blue-90 {
  color: hsla(231, 74%, 10%, 0.9);
}

/**
 * `background-color` hsla(231, 74%, 10%, 0.9)-90 color utility.
 */
.background-color-title-blue-90 {
  background-color: hsla(231, 74%, 10%, 0.9);
}

/**
 * `color` hsla(231, 74%, 10%, 0.8)-80 color utility.
 */
.color-title-blue-80 {
  color: hsla(231, 74%, 10%, 0.8);
}

/**
 * `background-color` hsla(231, 74%, 10%, 0.8)-80 color utility.
 */
.background-color-title-blue-80 {
  background-color: hsla(231, 74%, 10%, 0.8);
}

/**
 * `color` hsla(231, 74%, 10%, 0.7)-70 color utility.
 */
.color-title-blue-70 {
  color: hsla(231, 74%, 10%, 0.7);
}

/**
 * `background-color` hsla(231, 74%, 10%, 0.7)-70 color utility.
 */
.background-color-title-blue-70 {
  background-color: hsla(231, 74%, 10%, 0.7);
}

/**
 * `color` hsla(231, 74%, 10%, 0.6)-60 color utility.
 */
.color-title-blue-60 {
  color: hsla(231, 74%, 10%, 0.6);
}

/**
 * `background-color` hsla(231, 74%, 10%, 0.6)-60 color utility.
 */
.background-color-title-blue-60 {
  background-color: hsla(231, 74%, 10%, 0.6);
}

/**
 * `color` hsla(231, 74%, 10%, 0.5)-50 color utility.
 */
.color-title-blue-50 {
  color: hsla(231, 74%, 10%, 0.5);
}

/**
 * `background-color` hsla(231, 74%, 10%, 0.5)-50 color utility.
 */
.background-color-title-blue-50 {
  background-color: hsla(231, 74%, 10%, 0.5);
}

/**
 * `color` hsla(231, 74%, 10%, 0.4)-40 color utility.
 */
.color-title-blue-40 {
  color: hsla(231, 74%, 10%, 0.4);
}

/**
 * `background-color` hsla(231, 74%, 10%, 0.4)-40 color utility.
 */
.background-color-title-blue-40 {
  background-color: hsla(231, 74%, 10%, 0.4);
}

/**
 * `color` hsla(231, 74%, 10%, 0.3)-30 color utility.
 */
.color-title-blue-30 {
  color: hsla(231, 74%, 10%, 0.3);
}

/**
 * `background-color` hsla(231, 74%, 10%, 0.3)-30 color utility.
 */
.background-color-title-blue-30 {
  background-color: hsla(231, 74%, 10%, 0.3);
}

/**
 * `color` hsla(231, 74%, 10%, 0.2)-20 color utility.
 */
.color-title-blue-20 {
  color: hsla(231, 74%, 10%, 0.2);
}

/**
 * `background-color` hsla(231, 74%, 10%, 0.2)-20 color utility.
 */
.background-color-title-blue-20 {
  background-color: hsla(231, 74%, 10%, 0.2);
}

/**
 * `color` hsla(231, 74%, 10%, 0.1)-10 color utility.
 */
.color-title-blue-10 {
  color: hsla(231, 74%, 10%, 0.1);
}

/**
 * `background-color` hsla(231, 74%, 10%, 0.1)-10 color utility.
 */
.background-color-title-blue-10 {
  background-color: hsla(231, 74%, 10%, 0.1);
}

/**
  * General.
  */
/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
  * Objects.
  */
/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.dot {
  width: 12px;
  height: 12px;
  background-color: hsl(2, 79%, 49%);
  border-radius: 50%;
  position: fixed;
  bottom: -100vh;
  z-index: 5000;
  left: 0;
  pointer-events: none;
  transition: height 100ms ease-in-out, width 100ms ease-in-out;
  backdrop-filter: none !important;
  display: none;
}

.dot:active {
  height: 8px;
  width: 8px;
}

.shrink {
  height: 8px;
  width: 8px;
}

@media not all and (hover: none) {
  .dot {
    display: block;
    bottom: 0;
    top: 0;
  }
  .dot.clicking {
    background-color: red;
  }
  .dot.text {
    clip-path: url(#cursorText);
  }
}
.dot.dotHover {
  height: 20px;
  width: 20px;
}

.dotHover.shrink {
  height: 15px;
  width: 15px;
}

.dot.drag {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dot.drag::after {
  content: "< sleep >";
  color: hsl(0, 0%, 100%);
  font-size: 14px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (hover: none) {
  .dot {
    display: none;
  }
}
/**
  * Components.
  */
/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.navigation-mobile {
  position: fixed;
  top: 0;
  right: -100vw;
  bottom: 0;
  max-width: 1176px;
  max-height: calc(100% - 80px);
  width: 100%;
  height: 100%;
  transition: all 500ms ease;
  background: hsl(210, 20%, 98%);
  opacity: 0;
  z-index: 9999;
  overflow-x: clip;
  padding: 180px 190px 98px 120px;
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
}

@media screen and (max-height: 848px) {
  .navigation-mobile {
    overflow-y: auto;
  }
}
@media screen and (max-width: 768px) {
  .navigation-mobile .header__search {
    top: 72px;
    left: 24px;
    display: flex;
    position: absolute;
    aspect-ratio: 1/1;
    width: 45px;
    height: 45px;
  }
  .navigation-mobile .header__search .tx-kesearch-pi1 .kesearchbox {
    right: 0;
    left: 32px;
    bottom: 10px;
    z-index: 9999;
  }
  .navigation-mobile .header__search .tx-kesearch-pi1 .kesearchbox input {
    width: 100%;
    max-width: 240px;
    border-radius: 16px;
    padding: 12px !important;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .navigation-mobile {
    padding: 120px 60px 98px 60px;
  }
}
@media only screen and (max-width: 1199px) {
  .navigation-mobile {
    max-height: 100%;
    max-width: 1012px;
    padding: 160px 40px 60px 80px;
  }
}
@media only screen and (max-width: 899px) {
  .navigation-mobile {
    padding: 140px 40px 115px 80px;
    max-width: calc(100% - 40px);
    overflow-y: scroll;
  }
}
@media screen and (max-width: 768px) {
  .navigation-mobile {
    padding: 115px 34px 140px 34px;
    max-width: calc(100% - 16px);
    height: calc(100% - 16px);
  }
  .navigation-mobile::before {
    position: fixed;
    background: linear-gradient(180deg, rgba(244, 245, 249, 0) 0%, #F4F5F9 83.04%);
    content: "";
    width: calc(100% - 16px);
    height: 138px;
    right: -100vw;
    bottom: 16px;
    z-index: 2;
    pointer-events: none;
    transition: all 500ms ease;
    border-bottom-right-radius: 32px;
    border-bottom-left-radius: 32px;
  }
}
@media only screen and (max-width: 599px) {
  .navigation-mobile {
    padding: 115px 34px 140px 34px;
    max-width: calc(100% - 16px);
    height: calc(100% - 16px);
  }
  .navigation-mobile::before {
    position: fixed;
    background: linear-gradient(180deg, rgba(244, 245, 249, 0) 0%, #F4F5F9 83.04%);
    content: "";
    width: calc(100% - 16px);
    height: 138px;
    right: -100vw;
    bottom: 16px;
    z-index: 2;
    pointer-events: none;
    transition: all 500ms ease;
    border-bottom-right-radius: 32px;
    border-bottom-left-radius: 32px;
  }
}
.navigation-mobile.is-active {
  right: 0;
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .navigation-mobile.is-active::before {
    opacity: 1;
    right: 0;
  }
}
@media only screen and (max-width: 599px) {
  .navigation-mobile.is-active::before {
    opacity: 1;
    right: 0;
  }
}
.navigation-mobile::-webkit-scrollbar {
  display: none;
}

.navigation-mobile .wrapper {
  height: 100%;
}

.navigation-mobile .header__hamburger {
  position: absolute;
  height: fit-content;
  right: 132px;
  top: 88px;
  display: none;
}

@media screen and (min-width: 1850px) {
  .navigation-mobile .header__hamburger {
    right: 240px;
    top: 88px;
  }
}
@media only screen and (max-width: 1199px) {
  .navigation-mobile .header__hamburger {
    right: 80px;
    top: 80px;
  }
}
@media only screen and (max-width: 899px) {
  .navigation-mobile .header__hamburger {
    right: 40px;
    top: 50px;
  }
}
@media screen and (max-width: 768px) {
  .navigation-mobile .header__hamburger {
    top: 80px;
    right: 24px;
  }
}
@media only screen and (max-width: 599px) {
  .navigation-mobile .header__hamburger {
    top: 80px;
    right: 24px;
  }
}
.navigation-mobile .navigation-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-right: 36px;
}

@media only screen and (max-width: 899px) {
  .navigation-mobile .navigation-wrapper {
    padding-right: 8px;
  }
}
@media screen and (max-width: 768px) {
  .navigation-mobile .navigation-wrapper {
    padding-right: 0;
    flex-direction: column;
    gap: 40px;
  }
}
@media only screen and (max-width: 599px) {
  .navigation-mobile .navigation-wrapper {
    padding-right: 0;
    flex-direction: column;
  }
}
.navigation-mobile .navigation-wrapper__main {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 400px;
  width: 100%;
}

@media only screen and (max-width: 899px) {
  .navigation-mobile .navigation-wrapper__main {
    max-width: 332px;
  }
}
@media screen and (max-width: 768px) {
  .navigation-mobile .navigation-wrapper__main {
    max-width: 100%;
    margin-top: 32px;
  }
}
.navigation-mobile .navigation-wrapper__main ul {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.navigation-mobile .navigation-wrapper__main li {
  width: fit-content;
}

.navigation-mobile .navigation-wrapper__main li a {
  font-weight: 700;
  line-height: 1em;
  font-size: 49px;
  color: hsl(231, 53%, 34%);
  width: 100%;
  text-transform: uppercase;
  position: relative;
  transition: all 0.3s ease-in-out;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .navigation-mobile .navigation-wrapper__main li a {
    font-size: 42px;
  }
}
@media only screen and (max-width: 899px) {
  .navigation-mobile .navigation-wrapper__main li a {
    font-size: 32px;
  }
}
.navigation-mobile .navigation-wrapper__main li a .punctuation--red {
  font-size: 49px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .navigation-mobile .navigation-wrapper__main li a .punctuation--red {
    font-size: 42px;
  }
}
@media only screen and (max-width: 899px) {
  .navigation-mobile .navigation-wrapper__main li a .punctuation--red {
    font-size: 32px;
  }
}
.navigation-mobile .navigation-wrapper__main li a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: hsl(2, 79%, 49%);
  transition: all 0.3s ease-in-out;
}

.navigation-mobile .navigation-wrapper__main li a:hover {
  padding-left: 4px;
}

.navigation-mobile .navigation-wrapper__secondary {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media only screen and (max-width: 899px) {
  .navigation-mobile .navigation-wrapper__secondary {
    max-width: 284px;
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .navigation-mobile .navigation-wrapper__secondary {
    max-width: 100%;
    flex-direction: column-reverse;
    gap: 40px;
  }
}
.navigation-mobile .navigation-wrapper__secondary ul li a {
  color: hsl(231, 53%, 34%);
  position: relative;
  width: fit-content;
}

.navigation-mobile .navigation-wrapper__secondary ul li a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: hsl(2, 79%, 49%);
  transition: width 0.3s ease-in-out;
}

.navigation-mobile .navigation-wrapper__secondary ul li a:hover::before {
  width: 100%;
}

.navigation-mobile .navigation-wrapper__secondary .header__buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
  max-width: 295px;
  padding-bottom: 40px;
}

@media screen and (max-width: 768px) {
  .navigation-mobile .navigation-wrapper__secondary .header__buttons {
    flex-wrap: wrap;
    padding-bottom: 0px;
  }
}
.navigation-mobile .navigation-wrapper__secondary .header__buttons .header__button--white {
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
}

.navigation-mobile .navigation-wrapper__secondary .header__buttons .header__button--white:hover {
  transform: translateY(-4px);
}

.navigation-mobile .navigation-wrapper__secondary .header__buttons .header__button--blue {
  color: hsl(0, 0%, 100%);
  background-color: hsl(231, 53%, 34%);
}

.navigation-mobile .navigation-wrapper__secondary .header__buttons .header__button--blue:hover {
  transform: translateY(-4px);
}

.navigation-mobile .navigation-wrapper__secondary .header__buttons .header__button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.navigation-mobile .navigation-wrapper__secondary .header__buttons .header__button--yellow:hover {
  transform: translateY(-4px);
}

.navigation-mobile .navigation-wrapper__secondary .header__buttons .header__button--red {
  color: hsl(0, 0%, 100%);
  background-color: hsl(2, 79%, 49%);
}

.navigation-mobile .navigation-wrapper__secondary .header__buttons .header__button--red:hover {
  transform: translateY(-4px);
}

@media only screen and (max-width: 899px) {
  .navigation-mobile .navigation-wrapper__secondary .header__buttons {
    margin-left: unset;
  }
}
@media only screen and (max-width: 599px) {
  .navigation-mobile .navigation-wrapper__secondary .header__buttons {
    max-width: fit-content;
  }
}
@media only screen and (max-width: 599px) {
  .navigation-mobile .navigation-wrapper__secondary .header__buttons .button.header__button--blue {
    display: flex;
  }
}
.navigation-mobile .navigation__social {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
}

@media only screen and (max-width: 899px) {
  .navigation-mobile .navigation__social {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 768px) {
  .navigation-mobile .navigation__social {
    display: none;
  }
}
@media only screen and (max-width: 599px) {
  .navigation-mobile .navigation__social {
    display: none;
  }
}
.navigation-mobile .navigation__social a {
  min-width: 44px;
  max-width: 44px;
  aspect-ratio: 1;
  width: 100%;
  height: auto;
  background-color: hsla(231, 53%, 34%, 0.3);
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 250ms ease-in-out;
}

.navigation-mobile .navigation__social a svg path {
  fill: hsl(232, 41%, 24%);
}

.navigation-mobile .navigation__social a:hover {
  transform: translateY(-4px);
}

.navigation-mobile .navigation__social a span {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/**
 * Main menu.
 */
.navigation-mobile__main {
  padding: 10px 0;
}

.navigation-mobile__main > li {
  position: relative;
}

.navigation-mobile__main > li.current_page_ancestor > a, .navigation-mobile__main > li.current-menu-item > a {
  color: hsl(0, 0%, 0%);
}

.navigation-mobile__main > li.is-active > a {
  color: hsl(0, 0%, 0%);
}

.navigation-mobile__main > li.is-active > a > span svg {
  transform: rotate(-90deg);
}

.navigation-mobile__main > li > a {
  font-size: 20px;
  line-height: 24px;
  display: block;
  position: relative;
  width: 100%;
  font-weight: 700;
  margin: 22px 0 0 0;
  color: hsl(0, 0%, 0%);
}

.navigation-mobile__main > li > a > span {
  padding: 0 20px 0 5px;
  cursor: pointer;
}

.navigation-mobile__main > li > a > span svg {
  position: absolute;
  top: calc(50% - 8px);
  right: 0;
  width: 18px;
  height: 18px;
  margin-left: 5px;
  transition: all 500ms ease;
  color: hsl(0, 0%, 0%);
}

.navigation-mobile__main > li .submenu-container {
  display: none;
  position: relative;
  margin-top: 10px;
  padding-top: 20px;
}

.navigation-mobile__main > li .submenu-container li a {
  font-size: 14px;
  line-height: 18px;
  position: relative;
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: hsl(0, 0%, 0%);
}

.navigation-mobile__main > li .submenu-container li.current_page_ancestor > a, .navigation-mobile__main > li .submenu-container li.current-menu-item > a {
  color: hsl(0, 0%, 0%);
}

.navigation-mobile__main > li .submenu-container li.is-active > a {
  color: hsl(0, 0%, 0%);
}

/**
 * Disable scroll.
 */
body {
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  background: hsla(231, 53%, 34%, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
}

body.is-active {
  overflow: hidden !important;
}

body.is-active .header::before {
  bottom: 0;
}

body.is-active::before {
  opacity: 1;
  pointer-events: all;
}

html:has(body.is-active) {
  overflow: hidden;
}

.main-nav .nav-item.active a {
  font-weight: 800;
}

.secondary-nav .nav-item {
  margin-bottom: 16px;
}

.secondary-nav .nav-item.active a {
  font-family: Barlow;
  font-size: 25px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
}

.secondary-nav .nav-item.active a:after {
  content: ".";
  color: hsl(2, 79%, 49%);
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.header {
  width: 100%;
  position: relative;
}

header:not(:has(.header__notice)) {
  margin-top: 20px;
}

.header__notice {
  background-color: hsl(31, 98%, 83%);
  padding: 12px 0;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 950;
}

.header__notice > * {
  color: hsl(36, 32%, 23%);
  font-size: 16px;
  font-weight: 500;
}

@media only screen and (max-width: 1199px) {
  .header__notice > * {
    font-size: 14px;
  }
}
@media only screen and (min-width: 1512px) {
  .header__notice {
    max-height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .header__notice {
    padding: 8px 0;
  }
}
@media only screen and (max-width: 899px) {
  .header__notice {
    padding: 4px 24px;
    margin-bottom: 16px;
  }
}
@media only screen and (max-width: 599px) {
  .header__notice {
    margin-bottom: 0;
  }
}
.header__logo {
  max-width: 150px;
  max-height: 180px;
  width: 100%;
  height: 100%;
  margin-right: 40px;
  position: relative;
  z-index: 950;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .header__logo {
    margin-right: 40px;
    max-width: 132px;
    max-height: 164px;
  }
}
@media only screen and (max-width: 1199px) {
  .header__logo {
    max-width: 122px;
    max-height: 146px;
    margin-right: 40px;
  }
}
@media only screen and (max-width: 899px) {
  .header__logo {
    max-width: 106px;
    max-height: 128px;
    margin-right: 0;
  }
}
@media only screen and (max-width: 599px) {
  .header__logo {
    max-width: 88px;
    max-height: 106px;
  }
}
.header__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.header__container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.header__content {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

@media only screen and (max-width: 899px) {
  .header__content {
    justify-content: unset;
  }
}
@media only screen and (max-width: 599px) {
  .header__content {
    padding-block: 20px 12px;
  }
}
.header__nav {
  width: 100%;
  padding-bottom: 60px;
}

@media screen and (max-width: 1032px) {
  .header__nav {
    display: none;
  }
}
@media only screen and (max-width: 899px) {
  .header__nav {
    display: none;
  }
}
.header__nav ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 100%;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .header__nav ul {
    gap: 24px;
  }
}
.header__nav ul li {
  width: fit-content;
}

.header__nav ul li:nth-child(n+5) {
  display: none;
}

@media only screen and (max-width: 1199px) {
  .header__nav ul li:nth-child(n+3) {
    display: none;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1355px) {
  .header__nav ul li:nth-child(n+3) {
    display: none;
  }
}
.header__nav ul li a {
  font-weight: 700;
  line-height: 1em;
  display: inline-flex;
  width: 100%;
  position: relative;
  color: hsl(232, 41%, 24%);
  text-transform: uppercase;
  font-size: 20px;
  align-items: baseline;
  padding-bottom: 2px;
}

@media only screen and (min-width: 1512px) {
  .header__nav ul li a {
    font-size: 22px;
  }
}
.header__nav ul li a::before {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: hsl(2, 79%, 49%);
  transition: width 0.3s ease-in-out;
}

.header__nav ul li a:hover::before {
  width: 100%;
}

.header__buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  margin-right: 40px;
  gap: 16px;
  width: 100%;
  max-width: 295px;
  padding-bottom: 60px;
}

@media screen and (max-width: 768px) {
  .header__buttons {
    padding-bottom: 40px;
  }
}
.header__buttons .header__button--white {
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
}

.header__buttons .header__button--white:hover {
  transform: translateY(-4px);
}

.header__buttons .header__button--blue {
  color: hsl(0, 0%, 100%);
  background-color: hsl(231, 53%, 34%);
}

.header__buttons .header__button--blue:hover {
  transform: translateY(-4px);
}

.header__buttons .header__button--yellow {
  color: hsl(36, 32%, 23%);
  background-color: hsl(38, 93%, 53%);
}

.header__buttons .header__button--yellow:hover {
  transform: translateY(-4px);
}

.header__buttons .header__button--red {
  color: hsl(0, 0%, 100%);
  background-color: hsl(2, 79%, 49%);
}

.header__buttons .header__button--red:hover {
  transform: translateY(-4px);
}

@media screen and (max-width: 1032px) {
  .header__buttons {
    max-width: 100%;
    justify-content: flex-end;
    margin-right: 24px;
  }
}
@media only screen and (max-width: 899px) {
  .header__buttons {
    margin-left: auto;
  }
}
@media only screen and (max-width: 599px) {
  .header__buttons {
    max-width: fit-content;
  }
}
@media only screen and (max-width: 599px) {
  .header__buttons .button.header__button--blue {
    display: none;
  }
}
.header__button--blue {
  background: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  transition: transform 350ms ease;
  padding-bottom: 40px;
}

.header__button--blue:hover {
  transform: translateY(-4px);
}

.header__button--yellow {
  background: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
  transition: transform 350ms ease;
  padding-bottom: 40px;
  color: hsl(36, 32%, 23%);
}

.header__button--yellow:hover {
  transform: translateY(-4px);
}

.header__hamburger {
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  max-width: 44px;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
  margin-left: 18px;
  position: relative;
  z-index: 100000000000000000;
}

.header__hamburger:focus-visible {
  outline: 1px solid red;
}

@media screen and (max-width: 768px) {
  .header__hamburger {
    margin-bottom: 40px;
  }
}
@media only screen and (max-width: 599px) {
  .header__hamburger {
    max-width: 36px;
    gap: 4px;
    padding: 0 8px;
    margin-left: 0;
  }
}
.header__hamburger.is-active span:first-child {
  rotate: 45deg;
  translate: 0 6px;
}

@media only screen and (max-width: 599px) {
  .header__hamburger.is-active span:first-child {
    translate: 0 3px;
  }
}
.header__hamburger.is-active span:nth-child(2) {
  display: none;
}

.header__hamburger.is-active span:nth-child(3) {
  rotate: -45deg;
  translate: 0 -3px;
}

@media only screen and (max-width: 599px) {
  .header__hamburger.is-active span:nth-child(3) {
    translate: 0 -4px;
  }
}
.header__hamburger span {
  width: 100%;
  content: "";
  height: 3px;
  background-color: hsl(231, 53%, 34%);
  border-radius: 4px;
  transition: all 300ms ease-in-out;
}

.header__search {
  background-color: hsla(231, 53%, 34%, 0.1);
  border: 2px solid hsl(231, 53%, 34%);
  border-radius: 50%;
  aspect-ratio: 1;
  min-width: 45px;
  max-width: 45px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 60px;
  position: relative;
}

.header__search:focus-visible {
  border-color: red;
}

@media screen and (max-width: 768px) {
  .header__search {
    margin-bottom: 40px;
  }
}
.header__search .tx-kesearch-pi1 .kesearchbox {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: -250px;
  bottom: 0;
  width: 100%;
  max-width: 240px;
  transition: opacity 300ms ease-in-out;
}

.header__search .tx-kesearch-pi1 .kesearchbox input {
  width: 100%;
  max-width: 240px;
  border-radius: 16px;
  padding: 12px !important;
}

.header__search .tx-kesearch-pi1 .kesearchbox .clearer {
  cursor: pointer;
}

.header__search .tx-kesearch-pi1 .kesearchbox #ke_search_sword {
  border-radius: 32px;
  border: 2px solid #696FA7;
  color: #696FA7 !important;
  padding: 8px 24px !important;
  height: 46px !important;
}

.header__search .tx-kesearch-pi1 .kesearchbox #ke_search_sword::placeholder {
  color: #696FA7 !important;
}

@media only screen and (max-width: 599px) {
  .header__search .tx-kesearch-pi1 .kesearchbox #ke_search_sword {
    margin-top: 8px;
  }
}
.header__search .tx-kesearch-pi1.is-active .kesearchbox, .header__search .tx-kesearch-pi1:focus-visible .kesearchbox {
  opacity: 1;
  pointer-events: all;
}

.header__search .tx-kesearch-pi1 .submitbutt {
  display: none;
}

@media only screen and (max-width: 599px) {
  .header__search {
    display: none;
  }
}
.header__search .header__search-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navigation-mobile .header__search {
  display: none;
}

@media only screen and (max-width: 599px) {
  .navigation-mobile .header__search {
    display: flex;
  }
}
.header__hamburger {
  position: relative;
  z-index: 99999;
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.footer {
  position: relative;
  background-color: hsla(231, 53%, 34%, 0.2);
  margin-top: 132px;
  color: hsl(231, 53%, 34%);
}

@media only screen and (max-width: 899px) {
  .footer .header__logo {
    max-width: 150px;
    max-height: 180px;
    width: 100%;
    height: 100%;
  }
}
.footer .header__logo img {
  margin-top: -104px;
  position: relative;
  z-index: 1;
}

@media only screen and (max-width: 899px) {
  .footer .header__logo img {
    width: 100%;
    height: 100%;
  }
}
.footer::before {
  content: "";
  position: absolute;
  left: 0;
  top: -105px;
  background-image: url("data:image/svg+xml,%3Csvg width='590' height='106' viewBox='0 0 590 106' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0C187.478 59.3267 385.22 95.558 589.891 105.352H0V0Z' fill='%23D4D7E6'/%3E%3C/svg%3E%0A");
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 106px;
  pointer-events: none;
  z-index: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .footer::before {
    left: -10%;
  }
}
@media only screen and (max-width: 899px) {
  .footer::before {
    left: 0;
    top: -80px;
  }
}
@media only screen and (max-width: 599px) {
  .footer::before {
    top: -68px;
  }
}
.footer ul {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer li {
  width: fit-content;
}

.footer li a {
  font-weight: 700;
  line-height: 1em;
  font-size: 31px;
  color: hsl(231, 53%, 34%);
  width: 100%;
  position: relative;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .footer li a {
    font-size: 28px;
  }
}
@media only screen and (max-width: 899px) {
  .footer li a {
    font-size: 24px;
  }
}
.footer li a span, .footer li a .punctuation--red {
  font-size: 31px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .footer li a span, .footer li a .punctuation--red {
    font-size: 28px;
  }
}
@media only screen and (max-width: 899px) {
  .footer li a span, .footer li a .punctuation--red {
    font-size: 24px;
  }
}
.footer li a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: hsl(2, 79%, 49%);
  transition: width 0.3s ease-in-out;
}

.footer li a:hover::before {
  width: 100%;
}

.footer .footer__top {
  padding-block: 80px 40px;
}

@media only screen and (max-width: 1199px) {
  .footer .footer__top {
    padding-block: 60px 40px;
  }
}
.footer .footer__button--yellow {
  margin-top: 64px;
  background: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
  transition: transform 350ms ease;
}

.footer .footer__button--yellow:hover {
  transform: translateY(-4px);
}

@media only screen and (max-width: 899px) {
  .footer .footer__button--yellow {
    margin-top: 32px;
  }
}
.footer .footer__columns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 80px;
}

@media only screen and (max-width: 1199px) {
  .footer .footer__columns {
    flex-wrap: wrap;
    gap: 60px 0;
  }
}
@media only screen and (max-width: 899px) {
  .footer .footer__columns {
    flex-direction: column;
    gap: 60px;
  }
}
.footer .footer__columns .footer__column-content {
  margin-top: 40px;
  color: hsl(232, 41%, 24%);
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .footer .footer__columns .footer__column-content {
    margin-top: 32px;
  }
}
@media only screen and (max-width: 899px) {
  .footer .footer__columns .footer__column-content {
    margin-top: 24px;
  }
}
.footer .footer__columns .footer__column-content a {
  position: relative;
  width: fit-content;
  color: hsl(232, 41%, 24%);
}

.footer .footer__columns .footer__column-content a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: hsl(2, 79%, 49%);
  transition: width 0.3s ease-in-out;
}

.footer .footer__columns .footer__column-content a:hover::before {
  width: 100%;
}

.footer .footer__columns .footer__column {
  width: 100%;
}

@media only screen and (max-width: 1199px) {
  .footer .footer__columns .footer__column {
    width: 50%;
  }
}
@media only screen and (max-width: 899px) {
  .footer .footer__columns .footer__column {
    width: 100%;
  }
}
.footer .footer__columns .footer__column--buttons {
  max-width: 300px;
}

.footer .footer__columns .footer__column--contact {
  max-width: 306px;
}

.footer .footer__columns .footer__column--sites {
  max-width: 306px;
}

.footer .footer__columns .footer__column--sites p, .footer .footer__columns .footer__column--sites a {
  line-height: 2.2;
}

.footer .footer__columns .footer__column--social {
  max-width: 306px;
}

.footer .footer__columns .footer__column h3 {
  font-weight: 700;
  line-height: 1em;
  font-size: 31px;
  color: hsl(231, 53%, 34%);
  width: 100%;
  position: relative;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .footer .footer__columns .footer__column h3 {
    font-size: 28px;
  }
}
@media only screen and (max-width: 899px) {
  .footer .footer__columns .footer__column h3 {
    font-size: 24px;
  }
}
.footer .footer__columns .navigation__social {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
}

.footer .footer__columns .navigation__social a {
  min-width: 44px;
  max-width: 44px;
  aspect-ratio: 1;
  width: 100%;
  height: auto;
  background-color: hsla(231, 53%, 34%, 0.3);
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 250ms ease-in-out;
}

.footer .footer__columns .navigation__social a:hover {
  transform: translateY(-4px);
}

.footer .footer__columns .navigation__social a span {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer .footer__columns .footer__social {
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

@media only screen and (max-width: 899px) {
  .footer .footer__columns .footer__social {
    margin-top: 24px;
    gap: 24px;
  }
}
.footer .footer__columns .footer__social a {
  min-width: 44px;
  max-width: 44px;
  aspect-ratio: 1;
  width: 100%;
  height: auto;
  background-color: hsl(231, 53%, 34%);
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 250ms ease-in-out;
}

.footer .footer__columns .footer__social a:hover {
  transform: translateY(-4px);
}

.footer .footer__columns .footer__social a span {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 899px) {
  .footer__legal {
    width: 100%;
  }
}
.footer__legal ul.legal-nav {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

@media only screen and (max-width: 899px) {
  .footer__legal ul.legal-nav {
    flex-wrap: wrap;
  }
}
.footer__legal ul.legal-nav li a {
  font-size: 22px;
  line-height: 1.8;
  color: hsl(231, 53%, 34%);
  font-weight: 400;
  padding-bottom: 8px;
  position: relative;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .footer__legal ul.legal-nav li a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  .footer__legal ul.legal-nav li a {
    font-size: 18px;
    line-height: 1.6;
  }
}
.footer__legal ul.legal-nav li a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: hsla(231, 53%, 34%, 0.3);
  transition: all 0.3s ease-in-out;
}

.footer__legal ul.legal-nav li a:hover::before {
  background-color: hsl(2, 79%, 49%);
}

.footer__bottom {
  padding-block: 40px 80px;
  border-top: 1px solid hsla(231, 53%, 34%, 0.3);
}

@media only screen and (max-width: 899px) {
  .footer__bottom {
    padding-block: 40px;
  }
}
.footer__bottom .footer__container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
}

@media only screen and (max-width: 899px) {
  .footer__bottom .footer__container {
    flex-direction: column;
    gap: 16px;
    align-items: baseline;
  }
}
.footer__bottom .footer__copyright {
  font-size: 18px;
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.hero-header {
  padding-bottom: 70px;
}

@media only screen and (max-width: 899px) {
  .hero-header {
    padding-bottom: 0px;
  }
}
.hero-header .hero-header__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.hero-header .hero-header__container {
  background-color: hsl(231, 53%, 34%);
  border-radius: 32px;
  display: flex;
  padding: 92px 130px 128px 120px;
  position: relative;
  margin-bottom: 10px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .hero-header .hero-header__container {
    padding: 64px 80px 64px 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-header .hero-header__container {
    padding: 60px 60px 160px 60px;
  }
}
@media only screen and (max-width: 899px) {
  .hero-header .hero-header__container {
    padding: 80px 60px 120px 60px;
    flex-direction: column;
    align-items: baseline;
  }
}
@media screen and (max-width: 788px) {
  .hero-header .hero-header__container {
    gap: 40px;
    padding: 60px 24px 100px 24px;
  }
}
@media only screen and (max-width: 599px) {
  .hero-header .hero-header__container {
    padding: 60px 24px;
    flex-direction: column;
    gap: 30px;
  }
}
.hero-header .hero-header__container::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsl(2, 79%, 49%);
  z-index: -1;
  border-radius: 32px;
  pointer-events: none;
}

.hero-header .hero-header__container .hero-header__content {
  max-width: 730px;
  width: 100%;
  margin-top: 32px;
}

@media only screen and (max-width: 899px) {
  .hero-header .hero-header__container .hero-header__content {
    max-width: 450px;
    width: 100%;
    margin-top: 0;
  }
}
@media only screen and (min-width: 1512px) {
  .hero-header .hero-header__container .hero-header__content h0 span,
  .hero-header .hero-header__container .hero-header__content h1 span {
    font-size: 78px;
  }
}
.hero-header .hero-header__container .hero-header__media {
  max-width: 540px;
  max-height: 477px;
  width: 100%;
  height: 100%;
  position: relative;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .hero-header .hero-header__container .hero-header__media {
    max-width: 500px;
    max-height: 440px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1374px) {
  .hero-header .hero-header__container .hero-header__media {
    max-width: 400px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-header .hero-header__container .hero-header__media {
    max-width: 356px;
  }
}
@media only screen and (max-width: 899px) {
  .hero-header .hero-header__container .hero-header__media {
    max-width: 408px;
  }
}
.hero-header .hero-header__container .hero-header__media .hero-header__image-container {
  height: 100%;
}

.hero-header .hero-header__container .hero-header__media img {
  border-radius: 24px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-width: 540px;
  max-height: 477px;
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .hero-header .hero-header__container .hero-header__media img {
    max-width: 500px;
    max-height: 440px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1374px) {
  .hero-header .hero-header__container .hero-header__media img {
    max-width: 400px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-header .hero-header__container .hero-header__media img {
    max-width: 356px;
  }
}
@media only screen and (max-width: 899px) {
  .hero-header .hero-header__container .hero-header__media img {
    max-width: 408px;
    aspect-ratio: 407/297;
  }
}
@media screen and (max-width: 788px) {
  .hero-header .hero-header__container .hero-header__media img {
    max-height: 189px;
    height: 100%;
    aspect-ratio: unset;
    border-radius: 16px;
    width: calc(100% - 24px);
  }
}
.hero-header .hero-header__container .hero-header__info {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-end;
}

@media only screen and (max-width: 899px) {
  .hero-header .hero-header__container .hero-header__info {
    margin-top: 0;
  }
}
@media screen and (max-width: 788px) {
  .hero-header .hero-header__container .hero-header__info {
    margin-top: 44px;
    align-items: flex-start;
    flex-direction: column-reverse;
  }
}
.hero-header .hero-header__container .hero-header__person {
  background-color: hsl(0, 0%, 100%);
  border-radius: 16px;
  overflow: clip;
  margin-top: -70px;
}

@media only screen and (min-width: 900px) {
  .hero-header .hero-header__container .hero-header__person {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 408px;
    position: relative;
  }
}
@media only screen and (min-width: 900px) and (max-width: 1199px) {
  .hero-header .hero-header__container .hero-header__person {
    width: calc(100% + 48px);
  }
}
.hero-header .hero-header__container .hero-header__person .hero-header__person-name {
  padding: 16px 24px 0 24px;
  font-size: 31px;
  line-height: 1.25;
  font-weight: 700;
  color: hsl(231, 53%, 34%);
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .hero-header .hero-header__container .hero-header__person .hero-header__person-name {
    font-size: 28px;
    line-height: 1.25;
  }
}
@media only screen and (max-width: 899px) {
  .hero-header .hero-header__container .hero-header__person .hero-header__person-name {
    font-size: 24px;
    line-height: 1.45;
  }
}
.hero-header .hero-header__container .hero-header__person .hero-header__person-position {
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
  color: hsl(2, 79%, 49%);
  padding-left: 24px;
  padding-top: 8px;
}

.hero-header .hero-header__container .hero-header__person blockquote.hero-header__person-quote {
  background-color: hsl(231, 62%, 28%);
  padding: 16px 24px;
  margin-top: 16px;
  color: hsl(233, 29%, 95%);
  font-weight: 500;
  font-style: italic;
  position: relative;
}

.hero-header .hero-header__container .hero-header__person blockquote.hero-header__person-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='19' viewBox='0 0 30 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.2 18.08C0.88 18.08 0.64 18 0.48 17.84C0.32 17.6267 0.293333 17.3333 0.4 16.96L6.16 0.799995C6.32 0.266663 6.66667 -3.8147e-06 7.2 -3.8147e-06H13.92C14.6667 -3.8147e-06 14.96 0.346663 14.8 1.04L11.12 17.2C10.96 17.7867 10.6133 18.08 10.08 18.08H1.2ZM15.36 18.08C15.04 18.08 14.8 18 14.64 17.84C14.48 17.6267 14.4533 17.3333 14.56 16.96L20.24 0.799995C20.4 0.266663 20.7467 -3.8147e-06 21.28 -3.8147e-06H28C28.6933 -3.8147e-06 28.96 0.346663 28.8 1.04L25.28 17.2C25.1733 17.7867 24.8267 18.08 24.24 18.08H15.36Z' fill='%23DF201A'/%3E%3C/svg%3E%0A");
  background-size: contain;
  background-repeat: no-repeat;
  width: 30px;
  height: 19px;
  content: "";
  position: absolute;
  top: -8px;
  right: 20px;
}

.hero-header .hero-header__content > * {
  color: hsl(0, 0%, 100%);
}

.hero-header .hero-header__text {
  margin-top: 48px;
  display: none;
}

@media only screen and (max-width: 899px) {
  .hero-header .hero-header__text {
    display: none;
  }
}
.hero-header h0,
.hero-header h1,
.hero-header h2,
.hero-header h3,
.hero-header h4 {
  color: hsl(0, 0%, 100%);
}

.hero-header .hero-header__buttons {
  margin-top: 40px;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

@media only screen and (max-width: 899px) {
  .hero-header .hero-header__buttons {
    margin-top: 24px;
    flex-direction: column;
    align-items: baseline;
    gap: 24px;
  }
}
@media only screen and (max-width: 599px) {
  .hero-header .hero-header__buttons {
    flex-direction: column;
    align-items: baseline;
  }
}
.hero-header .hero-header__buttons .hero-header__button--white {
  background: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  transition: transform 350ms ease;
}

.hero-header .hero-header__buttons .hero-header__button--white:hover {
  transform: translateY(-4px);
}

.hero-header .hero-header__buttons .hero-header__button--red {
  background: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
  transition: transform 350ms ease;
}

.hero-header .hero-header__buttons .hero-header__button--red:hover {
  transform: translateY(-4px);
}

.hero-header .hero-header__buttons .hero-header__button {
  height: auto;
}

.hero-header .hero-header__buttons .hero-header__button--white {
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
}

.hero-header .hero-header__buttons .hero-header__button--white:hover {
  transform: translateY(-4px);
}

.hero-header .hero-header__buttons .hero-header__button--blue {
  color: hsl(0, 0%, 100%);
  background-color: hsl(231, 53%, 34%);
}

.hero-header .hero-header__buttons .hero-header__button--blue:hover {
  transform: translateY(-4px);
}

.hero-header .hero-header__buttons .hero-header__button--yellow {
  color: hsl(231, 53%, 34%);
  background-color: hsl(38, 93%, 53%);
}

.hero-header .hero-header__buttons .hero-header__button--yellow:hover {
  transform: translateY(-4px);
}

.hero-header .hero-header__buttons .hero-header__button--red {
  color: hsl(0, 0%, 100%);
  background-color: hsl(2, 79%, 49%);
}

.hero-header .hero-header__buttons .hero-header__button--red:hover {
  transform: translateY(-4px);
}

.hero-header__video-trigger {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: hsl(2, 79%, 49%);
  border-radius: 100px;
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  cursor: pointer;
  transition: all 250ms ease-in-out;
}

.hero-header__video-trigger:hover .hero-header__video-play-icon svg {
  transform: scale(1.25);
}

.hero-header__video-trigger .hero-header__video-play-icon svg {
  transition: all 250ms ease-in-out;
}

.hero-header__video-trigger .hero-header__video-text {
  display: none;
}

.hero-header__video-lightbox {
  max-width: 1280px;
  padding: 40px;
  max-height: 755px;
  background: hsl(210, 20%, 98%);
  position: fixed;
  width: calc(100% - 60px);
  height: 100%;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  border-radius: 32px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .hero-header__video-lightbox {
    max-height: 640px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-header__video-lightbox {
    max-width: calc(100vw - 80px);
    max-height: calc(100vh - 80px);
  }
}
@media only screen and (max-width: 599px) {
  .hero-header__video-lightbox {
    max-width: calc(100vw - 80px);
    max-height: 450px;
    padding: 24px;
  }
}
.hero-header__video-lightbox.is-active {
  display: block !important;
}

.hero-header__video-lightbox iframe {
  width: 100%;
  height: 100%;
}

.hero-header__video-lightbox .hero-header__video-lightbox-close {
  position: absolute;
  top: -20px;
  right: -20px;
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  cursor: pointer;
  border-radius: 100px;
  transition: all 250ms ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-header__video-lightbox-content {
  height: 100%;
}

.hero-header__video-lightbox-container {
  height: 100%;
}

.hero-header__dynamictitles.js-dynamic-titles {
  margin-top: 90px;
}

@media only screen and (max-width: 1199px) {
  .hero-header__dynamictitles.js-dynamic-titles {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 899px) {
  .hero-header__dynamictitles.js-dynamic-titles {
    margin-top: 0;
    min-height: 120px !important;
  }
}
.js-editor {
  min-height: fit-content;
  height: fit-content;
}

.js-editor ul li {
  padding-left: 32px;
  position: relative;
}

.js-editor ul li::before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='12' viewBox='0 0 20 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2938 1.04297C13.6828 0.649798 14.317 0.651137 14.7079 1.04199L18.9569 5.29395L19.0262 5.36914C19.3273 5.73475 19.3259 6.26487 19.0262 6.63184L18.9579 6.70801L14.7079 10.9512C14.3176 11.3447 13.6849 11.3371 13.2958 10.9521C12.9028 10.5631 12.904 9.92889 13.2948 9.53809L15.8368 6.99609H1.74988C1.19618 6.99609 0.749878 6.54979 0.749878 5.99609C0.750087 5.44258 1.19631 4.99609 1.74988 4.99609H15.8368L13.2948 2.4541V2.45312C12.9023 2.06292 12.9094 1.43184 13.2938 1.04297Z' fill='%23DF201A' stroke='%23DF201A' stroke-width='0.5'/%3E%3C/svg%3E%0A");
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px;
  height: 12px;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .js-editor ul li {
    font-size: 16px;
  }
}
.hero-header__title {
  margin-bottom: 24px;
}

@media only screen and (max-width: 1199px) {
  .hero-header__title {
    margin-bottom: 24px;
  }
}
@media only screen and (max-width: 899px) {
  .hero-header__title {
    max-width: 90%;
  }
}
@media only screen and (max-width: 599px) {
  .hero-header__title {
    max-width: 100%;
  }
}
@media only screen and (max-width: 899px) {
  .hero-header__title-text * {
    font-size: 44px;
    line-height: 1.45;
  }
}
@media only screen and (max-width: 899px) {
  .hero-header__title-text {
    font-size: 44px;
    line-height: 1.45;
  }
}
.hero-header__dynamictitles .hero-header__dynamictitle {
  display: flex;
  flex-direction: column;
}

.hero-header__dynamictitles .js-word {
  display: none;
}

.hero-header__dynamictitles .js-editor .punctuation--red:first-child {
  color: hsl(0, 0%, 100%);
}

.hero-header__dynamictitles .js-editor li {
  margin-bottom: 8px;
}

.hero-header__dynamictitles .js-editor li span {
  line-height: 140% !important;
}

@media only screen and (max-width: 899px) {
  .hero-header__dynamictitles .js-editor {
    display: none;
  }
}
.hero-header__dynamictitle ul {
  margin-top: 16px;
}

@media only screen and (min-width: 900px) {
  .hero-header__person.mobile {
    display: none;
  }
}
@media only screen and (max-width: 899px) {
  .hero-header__person.mobile {
    display: block;
    max-width: 374px;
    width: 100%;
    left: 60px;
    position: absolute;
    z-index: 2;
    bottom: 80px;
  }
}
@media screen and (max-width: 788px) {
  .hero-header__person.mobile {
    position: relative;
    left: 0;
    bottom: 0;
    max-width: 275px;
    justify-content: flex-end;
    display: flex;
    margin-left: auto;
    margin-top: -32px !important;
  }
}
@media only screen and (max-width: 899px) {
  .hero-header__person {
    display: none;
  }
}
.hero-header__play-button {
  padding-block: 6px;
  border: 2px solid hsl(0, 0%, 100%);
  border-radius: 4px;
  color: hsl(0, 0%, 100%);
  font-size: 16px;
  font-weight: 500;
  height: 38px;
  width: fit-content;
  margin-bottom: 24px;
  transition: all 250ms ease-in-out;
  display: flex;
  align-items: center;
}

.hero-header__play-button:hover {
  transform: translateY(-4px);
}

.hero-header__play-button .hero-play-button-text {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding-inline: 12px;
  font-size: 16px;
  font-weight: 500;
}

.hero-header__play-button .hero-header__pause-button-text {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding-inline: 12px;
  font-size: 16px;
  font-weight: 500;
}

.hero-header__play-button span.hero-header__play-button-icon,
.hero-header__play-button span.hero-header__pause-button-icon {
  display: flex;
  width: 12px;
}

.hero-header__buttons {
  display: none;
}

.hero-header__dynamictitle.is-active .hero-header__buttons {
  display: flex;
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.cta .wrapper {
  padding-right: 0;
  padding-block: 80px;
}

@media only screen and (max-width: 1199px) {
  .cta .wrapper {
    padding-block: 60px;
  }
}
@media only screen and (max-width: 899px) {
  .cta .wrapper {
    padding-block: 40px;
  }
}
.cta__container {
  padding: 75px 100px 80px 100px;
  border-top-left-radius: 32px;
  border-bottom-left-radius: 32px;
  background-color: hsl(231, 53%, 34%);
  position: relative;
  overflow: clip;
}

@media only screen and (max-width: 899px) {
  .cta__container {
    padding: 40px 24px;
  }
}
.cta__container::before {
  background-image: url("data:image/svg+xml,%3Csvg width='538' height='300' viewBox='0 0 538 300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='724.5' cy='628.5' r='704.5' stroke='%23FF0000' stroke-width='40'/%3E%3Ccircle cx='724.5' cy='628.5' r='704.5' stroke='url(%23paint0_linear_4709_1865)' stroke-opacity='0.2' stroke-width='40'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_4709_1865' x1='235' y1='167.5' x2='162' y2='530.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-opacity='0'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
  background-size: 100%;
  background-repeat: no-repeat;
  top: 0;
  right: 0;
  position: absolute;
  content: "";
  width: 40%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

@media screen and (max-width: 1000px) {
  .cta__container::before {
    width: 100%;
    right: -45%;
    rotate: -80deg;
    background-image: url("data:image/svg+xml,%3Csvg width='590' height='580' viewBox='0 0 590 580' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M294.717 16C448.903 16 573.433 138.837 573.434 289.8C573.434 440.763 448.903 563.6 294.717 563.6C140.531 563.6 16 440.763 16 289.8C16.0001 138.837 140.531 16 294.717 16Z' stroke='%23FF0000' stroke-width='32'/%3E%3Cpath d='M294.717 16C448.903 16 573.433 138.837 573.434 289.8C573.434 440.763 448.903 563.6 294.717 563.6C140.531 563.6 16 440.763 16 289.8C16.0001 138.837 140.531 16 294.717 16Z' stroke='url(%23paint0_linear_6920_3243)' stroke-opacity='0.2' stroke-width='32'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_6920_3243' x1='95.5948' y1='105.4' x2='66.845' y2='250.787' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-opacity='0'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
  }
}
@media only screen and (max-width: 899px) {
  .cta__container::before {
    width: 100%;
    right: -45%;
    rotate: -80deg;
    background-image: url("data:image/svg+xml,%3Csvg width='590' height='580' viewBox='0 0 590 580' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M294.717 16C448.903 16 573.433 138.837 573.434 289.8C573.434 440.763 448.903 563.6 294.717 563.6C140.531 563.6 16 440.763 16 289.8C16.0001 138.837 140.531 16 294.717 16Z' stroke='%23FF0000' stroke-width='32'/%3E%3Cpath d='M294.717 16C448.903 16 573.433 138.837 573.434 289.8C573.434 440.763 448.903 563.6 294.717 563.6C140.531 563.6 16 440.763 16 289.8C16.0001 138.837 140.531 16 294.717 16Z' stroke='url(%23paint0_linear_6920_3243)' stroke-opacity='0.2' stroke-width='32'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_6920_3243' x1='95.5948' y1='105.4' x2='66.845' y2='250.787' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-opacity='0'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
  }
}
@media only screen and (max-width: 599px) {
  .cta__container::before {
    width: 100%;
    right: -55%;
    rotate: -80deg;
    background-image: url("data:image/svg+xml,%3Csvg width='590' height='580' viewBox='0 0 590 580' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M294.717 16C448.903 16 573.433 138.837 573.434 289.8C573.434 440.763 448.903 563.6 294.717 563.6C140.531 563.6 16 440.763 16 289.8C16.0001 138.837 140.531 16 294.717 16Z' stroke='%23FF0000' stroke-width='32'/%3E%3Cpath d='M294.717 16C448.903 16 573.433 138.837 573.434 289.8C573.434 440.763 448.903 563.6 294.717 563.6C140.531 563.6 16 440.763 16 289.8C16.0001 138.837 140.531 16 294.717 16Z' stroke='url(%23paint0_linear_6920_3243)' stroke-opacity='0.2' stroke-width='32'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_6920_3243' x1='95.5948' y1='105.4' x2='66.845' y2='250.787' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-opacity='0'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
  }
}
.cta__container .cta__title {
  color: hsl(0, 0%, 100%);
  position: relative;
  z-index: 1;
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.faq {
  padding-block: 70px 80px;
}

@media only screen and (max-width: 1199px) {
  .faq {
    padding-block: 60px;
  }
}
@media only screen and (max-width: 899px) {
  .faq {
    padding-block: 40px;
  }
}
.faq > * {
  color: hsl(231, 53%, 34%);
}

.faq.wrapper--small:not(.faq--blue) .faq__background {
  padding-block: 75px 80px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .faq.wrapper--small:not(.faq--blue) .faq__background {
    padding-block: 64px;
  }
}
@media only screen and (max-width: 899px) {
  .faq.wrapper--small:not(.faq--blue) .faq__background {
    padding-block: 40px;
  }
}
@media only screen and (max-width: 599px) {
  .faq.wrapper--small:not(.faq--blue) .faq__background {
    padding-block: 40px;
  }
}
.faq__item__text {
  font-size: 25px;
  line-height: 1.25;
  font-weight: 700;
  color: hsl(231, 53%, 34%);
  text-align: left;
  padding-right: 16px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .faq__item__text {
    font-size: 24px;
    line-height: 1.25;
  }
}
@media only screen and (max-width: 899px) {
  .faq__item__text {
    font-size: 20px;
    line-height: 1.45;
    padding-right: 8px;
  }
}
.faq__title {
  margin-bottom: 40px;
}

@media only screen and (max-width: 599px) {
  .faq__title {
    margin-bottom: 32px;
  }
}
.faq__text h1, .faq__text h2, .faq__text h3, .faq__text h4, .faq__text h5, .faq__text h6 {
  margin-bottom: 40px;
}

@media only screen and (max-width: 599px) {
  .faq__text h1, .faq__text h2, .faq__text h3, .faq__text h4, .faq__text h5, .faq__text h6 {
    margin-bottom: 32px;
  }
}
.faq__item__icon {
  min-width: 40px;
  max-width: 40px;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  position: relative;
}

.faq__item__icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 20px);
  height: 2px;
  background-color: hsl(0, 0%, 100%);
  border-radius: 100px;
}

.faq__item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  width: calc(100% - 20px);
  height: 2px;
  background-color: hsl(0, 0%, 100%);
  border-radius: 100px;
  transition: all 250ms ease;
}

.faq__item__toggle {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.faq__item__toggle.is-active .faq__item__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq__item__toggle:focus-visible {
  outline: 1px solid red;
}

.faq__item__answer-content {
  padding-top: 24px;
}

.faq__item__answer-content > *:not(a) {
  font-size: 18px;
  font-weight: 500;
  color: hsl(232, 41%, 24%);
}

@media only screen and (max-width: 899px) {
  .faq__item__answer-content > *:not(a) {
    font-size: 16px;
  }
}
.faq__item__answer-content a {
  font-size: 18px;
  font-weight: 500;
  color: hsl(2, 79%, 49%);
}

@media only screen and (max-width: 899px) {
  .faq__item__answer-content a {
    font-size: 16px;
  }
}
.faq__item__answer-content ul {
  list-style: none;
  padding: 16px 0 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq__item__answer-content ul li {
  position: relative;
  padding-left: 44px;
  font-size: 18px;
  font-weight: 500;
  color: hsl(232, 41%, 24%);
  line-height: 1.6;
}

@media only screen and (max-width: 899px) {
  .faq__item__answer-content ul li {
    font-size: 16px;
  }
}
.faq__item__answer-content ul li span,
.faq__item__answer-content ul li p {
  font-size: 18px;
  font-weight: 500;
  color: hsl(232, 41%, 24%);
  line-height: 1.6;
}

@media only screen and (max-width: 899px) {
  .faq__item__answer-content ul li span,
  .faq__item__answer-content ul li p {
    font-size: 16px;
  }
}
.faq__item__answer-content ul li:before {
  content: "";
  height: 32px;
  width: 32px;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z' fill='%238ACE8A' fill-opacity='0.5'/%3E%3Cpath d='M22.5877 10.1907C23.0346 10.5157 23.1346 11.1407 22.8096 11.5876L14.8096 22.5876C14.6377 22.8251 14.3721 22.972 14.0783 22.997C13.7846 23.022 13.5002 22.9126 13.2939 22.7063L9.29395 18.7063C8.90332 18.3157 8.90332 17.6813 9.29395 17.2907C9.68457 16.9001 10.3189 16.9001 10.7096 17.2907L13.8814 20.4626L21.1939 10.4095C21.5189 9.96259 22.1439 9.86259 22.5908 10.1876L22.5877 10.1907Z' fill='%23467F4D'/%3E%3C/svg%3E%0A");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0px;
}

.faq__text {
  color: hsl(232, 41%, 24%);
}

.faq__item {
  padding-block: 36px;
  border-bottom: 1px solid hsla(231, 53%, 34%, 0.5);
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .faq__item {
    padding-block: 24px;
  }
}
.faq__item:first-child {
  border-top: 1px solid hsla(231, 53%, 34%, 0.5);
}

.faq__item:hover .faq__item__text, .faq__item:hover .faq__item__icon {
  transform: translateY(-4px);
}

.faq__item__text, .faq__item__icon {
  transition: transform 300ms ease-in-out;
}

.faq__container {
  margin-top: 60px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .faq__container {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 899px) {
  .faq__container {
    margin-top: 32px;
  }
}
@media only screen and (max-width: 599px) {
  .faq__container {
    margin-top: 24px;
  }
}
@media only screen and (min-width: 1200px) {
  .faq--blue.wrapper--small {
    max-width: 1584px;
    padding-inline: 220px;
    width: 100%;
    margin: 0 auto;
  }
}
.faq--blue.wrapper--small .faq__background {
  margin-block: 80px;
  padding: 75px 80px 80px 80px;
  background-color: hsl(233, 29%, 95%);
  border-radius: 32px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .faq--blue.wrapper--small .faq__background {
    padding: 64px;
  }
}
@media only screen and (min-width: 900px) and (max-width: 1199px) {
  .faq--blue.wrapper--small .faq__background {
    margin-inline: 40px;
  }
}
@media only screen and (max-width: 899px) {
  .faq--blue.wrapper--small .faq__background {
    padding: 40px;
    margin-block: 40px;
  }
}
@media only screen and (max-width: 599px) {
  .faq--blue.wrapper--small .faq__background {
    padding: 24px;
    margin-block: 24px;
  }
}
.faq--blue.wrapper--small .faq__background .faq__container {
  margin-top: 75px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .faq--blue.wrapper--small .faq__background .faq__container {
    margin-top: 64px;
  }
}
@media only screen and (max-width: 899px) {
  .faq--blue.wrapper--small .faq__background .faq__container {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 599px) {
  .faq--blue.wrapper--small .faq__background .faq__container {
    margin-top: 24px;
  }
}
.faq__search {
  background-color: hsla(231, 53%, 34%, 0.05);
  margin-top: 60px;
  border-radius: 16px;
  padding: 24px 40px;
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: center;
}

.faq__search .submitbutt input {
  margin-right: 0 !important;
}

@media only screen and (max-width: 899px) {
  .faq__search {
    flex-direction: column;
    gap: 24px;
    align-items: baseline;
    padding: 24px;
    margin-top: 40px;
  }
}
.faq__search h3 {
  font-size: 25px;
  line-height: 1.25;
  font-weight: 700;
  color: hsl(231, 53%, 34%);
  display: flex;
  align-items: center;
}

.faq__search h3 span.punctuation--red {
  font-size: 25px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .faq__search h3 {
    font-size: 24px;
    line-height: 1.25;
  }
}
.faq__search .kesearch_searchbox {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: center;
}

@media only screen and (max-width: 899px) {
  .faq__search .kesearch_searchbox {
    flex-direction: column;
    align-items: baseline;
  }
}
.faq__search .tx-kesearch-pi1,
.faq__search form,
.faq__search input,
.faq__search div.kesearchbox,
.faq__search #ke_search_sword {
  width: 100% !important;
  height: 42px !important;
}

@media only screen and (max-width: 899px) {
  .faq__search .tx-kesearch-pi1,
  .faq__search form,
  .faq__search input,
  .faq__search div.kesearchbox,
  .faq__search #ke_search_sword {
    height: 100% !important;
  }
}
.faq__search #ke_search_sword {
  border-radius: 32px;
  border: 2px solid #696FA7;
  color: #696FA7 !important;
  padding: 8px 24px !important;
}

@media only screen and (max-width: 899px) {
  .faq__search #ke_search_sword {
    padding: 16px 24px !important;
  }
}
.faq__search #ke_search_sword::placeholder {
  color: #696FA7 !important;
}

.faq__search .submitbutt input {
  background: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
  transition: transform 350ms ease;
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
  width: fit-content !important;
  min-width: fit-content !important;
  max-width: fit-content !important;
  border: unset !important;
}

.faq__search .submitbutt input:hover {
  transform: translateY(-4px);
}

.faq__search .submitbutt input:hover {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.faq__link {
  margin-top: 40px;
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.position-slider {
  padding-block: 80px;
}

@media only screen and (max-width: 1199px) {
  .position-slider {
    padding-block: 60px;
  }
}
@media only screen and (max-width: 899px) {
  .position-slider {
    padding-block: 40px;
  }
}
.position-slider .wrapper--bg {
  padding-right: 0;
  position: relative;
}

.position-slider .wrapper--bg::before {
  content: "";
  position: absolute;
  top: 0;
  right: -100vw;
  bottom: 0;
  background-color: hsla(231, 53%, 34%, 0.05);
  z-index: 0;
  pointer-events: none;
  width: 100vw;
}

.position-slider:has(.wrapper--bg) {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

.position-slider .position-slider__item__image {
  display: none;
}

.position-slider .position-slider__container:first-child {
  background-color: hsla(231, 53%, 34%, 0.05);
  border-top-left-radius: 32px;
  border-bottom-left-radius: 32px;
  padding: 75px 120px 80px 120px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .position-slider .position-slider__container:first-child {
    padding: 64px 80px 64px 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .position-slider .position-slider__container:first-child {
    padding: 60px;
  }
}
@media only screen and (max-width: 899px) {
  .position-slider .position-slider__container:first-child {
    padding: 40px;
  }
}
.position-slider .position-slider__text {
  margin-top: 40px;
  max-width: 730px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .position-slider .position-slider__text {
    margin-top: 32px;
  }
}
@media only screen and (max-width: 899px) {
  .position-slider .position-slider__text {
    margin-top: 32px;
  }
}
.position-slider .position-slider__text p {
  color: hsl(232, 41%, 24%);
}

.position-slider .position-slider__wrapper {
  margin-top: 80px;
  overflow-x: clip !important;
  overflow-y: visible !important;
  max-width: 1440px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .position-slider .position-slider__wrapper {
    margin-top: 64px;
  }
}
@media only screen and (max-width: 899px) {
  .position-slider .position-slider__wrapper {
    margin-top: 40px;
  }
}
.position-slider .position-slider__wrapper .position-slider__item {
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 16px;
  min-height: 384px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 32px;
  position: relative;
  z-index: 1;
  overflow: visible;
  transform-style: preserve-3d;
  cursor: pointer;
}

@media only screen and (min-width: 1512px) {
  .position-slider .position-slider__wrapper .position-slider__item {
    aspect-ratio: 342/440;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .position-slider .position-slider__wrapper .position-slider__item {
    padding: 32px 24px;
  }
}
.position-slider .position-slider__wrapper .position-slider__item::before {
  background: linear-gradient(190deg, rgba(36, 43, 87, 0) -4.31%, rgba(36, 43, 87, 0.85) 71.4%);
  border-radius: 16px;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  transition: all 150ms ease-in-out;
}

.position-slider .position-slider__wrapper .position-slider__item::after {
  background: hsl(231, 53%, 34%);
  border-radius: 16px;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  transition: all 350ms ease-in-out;
  opacity: 0;
}

@media only screen and (min-width: 600px) {
  .position-slider .position-slider__wrapper .position-slider__item:hover::after, .position-slider .position-slider__wrapper .position-slider__item:focus-visible::after {
    opacity: 1;
  }
  .position-slider .position-slider__wrapper .position-slider__item:hover .position-slider__item__icon::after, .position-slider .position-slider__wrapper .position-slider__item:focus-visible .position-slider__item__icon::after {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .position-slider .position-slider__wrapper .position-slider__item:hover .position-slider__item__icon::before, .position-slider .position-slider__wrapper .position-slider__item:focus-visible .position-slider__item__icon::before {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}
@media only screen and (max-width: 599px) {
  .position-slider .position-slider__wrapper .position-slider__item::after {
    opacity: var(--after-opacity, 0);
  }
  .position-slider .position-slider__wrapper .position-slider__item .position-slider__item__icon::after {
    transform: var(--icon-after-transform, translate(-50%, -50%) rotate(-90deg));
  }
  .position-slider .position-slider__wrapper .position-slider__item .position-slider__item__icon::before {
    transform: var(--icon-before-transform, translate(-50%, -50%) rotate(0deg));
  }
}
.position-slider .position-slider__wrapper .position-slider__item__icon {
  min-width: 40px;
  max-width: 40px;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  position: relative;
  margin-left: auto;
  z-index: 2;
}

.position-slider .position-slider__wrapper .position-slider__item__icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 20px);
  height: 2px;
  background-color: hsl(231, 53%, 34%);
  border-radius: 100px;
  transition: all 350ms ease;
}

.position-slider .position-slider__wrapper .position-slider__item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  width: calc(100% - 20px);
  height: 2px;
  background-color: hsl(231, 53%, 34%);
  border-radius: 100px;
  transition: all 350ms ease;
}

.position-slider .position-slider__wrapper .position-slider__item__content {
  position: relative;
  z-index: 1;
}

.position-slider .position-slider__wrapper .position-slider__item__category {
  display: none;
  visibility: hidden;
}

.position-slider .position-slider__wrapper .position-slider__item__link {
  background: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
  transition: transform 350ms ease;
  font-size: 16px;
  margin-top: 24px;
  overflow: hidden;
}

.position-slider .position-slider__wrapper .position-slider__item__link:hover {
  transform: translateY(-4px);
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .position-slider .position-slider__wrapper .position-slider__item__link {
    font-size: 14px;
  }
}
.position-slider .position-slider__wrapper .position-slider__item__link .position-slider__item__plus-icon {
  display: none;
}

.position-slider .position-slider__wrapper .position-slider__item__title {
  color: hsl(0, 0%, 100%);
  max-width: 85%;
}

.position-slider .position-slider__wrapper .position-slider__item__text {
  overflow: clip;
  color: hsl(0, 0%, 100%);
}

.position-slider .position-slider__wrapper .position-slider__item__text ul li {
  border-bottom: 1px solid hsl(0, 0%, 100%);
  padding-block: 8px;
  padding-left: 32px;
  font-size: 18px;
  position: relative;
  line-height: normal;
}

.position-slider .position-slider__wrapper .position-slider__item__text ul li::before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='12' viewBox='0 0 20 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2938 1.04297C13.6828 0.649798 14.317 0.651137 14.7079 1.04199L18.9569 5.29395L19.0262 5.36914C19.3273 5.73475 19.3259 6.26487 19.0262 6.63184L18.9579 6.70801L14.7079 10.9512C14.3176 11.3447 13.6849 11.3371 13.2958 10.9521C12.9028 10.5631 12.904 9.92889 13.2948 9.53809L15.8368 6.99609H1.74988C1.19618 6.99609 0.749878 6.54979 0.749878 5.99609C0.750087 5.44258 1.19631 4.99609 1.74988 4.99609H15.8368L13.2948 2.4541V2.45312C12.9023 2.06292 12.9094 1.43184 13.2938 1.04297Z' fill='%23DF201A' stroke='%23DF201A' stroke-width='0.5'/%3E%3C/svg%3E%0A");
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px;
  height: 12px;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .position-slider .position-slider__wrapper .position-slider__item__text ul li {
    font-size: 16px;
  }
}
.position-slider .position-slider__wrapper .position-slider__item__text span,
.position-slider .position-slider__wrapper .position-slider__item__text a {
  position: relative;
  line-height: normal;
}

.position-slider .position-slider__wrapper .position-slider__item__text span::before,
.position-slider .position-slider__wrapper .position-slider__item__text a::before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='12' viewBox='0 0 20 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2938 1.04297C13.6828 0.649798 14.317 0.651137 14.7079 1.04199L18.9569 5.29395L19.0262 5.36914C19.3273 5.73475 19.3259 6.26487 19.0262 6.63184L18.9579 6.70801L14.7079 10.9512C14.3176 11.3447 13.6849 11.3371 13.2958 10.9521C12.9028 10.5631 12.904 9.92889 13.2948 9.53809L15.8368 6.99609H1.74988C1.19618 6.99609 0.749878 6.54979 0.749878 5.99609C0.750087 5.44258 1.19631 4.99609 1.74988 4.99609H15.8368L13.2948 2.4541V2.45312C12.9023 2.06292 12.9094 1.43184 13.2938 1.04297Z' fill='%23DF201A' stroke='%23DF201A' stroke-width='0.5'/%3E%3C/svg%3E%0A");
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px;
  height: 12px;
  content: "";
  position: absolute;
  top: 50%;
  left: -32px;
  transform: translateY(-50%);
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .position-slider .position-slider__wrapper .position-slider__item__text span,
  .position-slider .position-slider__wrapper .position-slider__item__text a {
    font-size: 16px;
  }
}
.position-slider__scrollbar {
  position: relative;
  width: 100%;
  height: 1px;
  background-color: hsla(231, 53%, 34%, 0.3);
  border-radius: 1px;
  overflow-x: clip;
}

.position-slider__scrollbar::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: hsl(2, 79%, 49%);
  border-radius: 1px;
  transform: translateY(-50%) scaleX(var(--progress-scale, 0));
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.position-slider__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 80px;
  gap: 174px;
  max-width: 1260px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .position-slider__bottom {
    gap: 100px;
    max-width: 1164px;
    margin-top: 40px;
  }
}
@media only screen and (max-width: 899px) {
  .position-slider__bottom {
    gap: 24px;
    margin-top: 40px;
  }
}
.position-slider__navigation {
  display: flex;
  gap: 12px;
}

.position-slider__prev,
.position-slider__next {
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  aspect-ratio: 1;
  border: 2px solid hsl(231, 53%, 34%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 48px;
  max-width: 48px;
  width: 100%;
}

.position-slider__prev:hover,
.position-slider__next:hover {
  background-color: hsla(231, 53%, 34%, 0.1);
}

.position-slider__prev.disabled,
.position-slider__next.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.position-slider__prev svg,
.position-slider__next svg {
  display: block;
}

.position-slider__link {
  background: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  transition: transform 350ms ease;
}

.position-slider__link:hover {
  transform: translateY(-4px);
}

.position-slider__content {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: baseline;
  max-width: 1440px;
}

@media only screen and (max-width: 899px) {
  .position-slider__content {
    flex-direction: column;
  }
}
.position-slider__item--gradient {
  height: 20px;
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  z-index: -1;
  transform: translateZ(-1px);
  background-color: var(--data-color);
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.article-latest {
  padding-block: 75px 80px;
}

@media only screen and (max-width: 1199px) {
  .article-latest {
    padding-block: 60px;
  }
}
@media only screen and (max-width: 899px) {
  .article-latest {
    padding-block: 40px;
  }
}
.article-latest__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media only screen and (max-width: 899px) {
  .article-latest__header {
    flex-direction: column;
    align-items: baseline;
    gap: 24px;
  }
}
.article-latest__link {
  background: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  transition: transform 350ms ease;
}

.article-latest__link:hover {
  transform: translateY(-4px);
}

.article-latest__container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 80px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .article-latest__container {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 1199px) {
  .article-latest__container {
    margin-top: 40px;
  }
}
.article-latest__top-row {
  display: flex;
  flex-direction: row;
  gap: 32px;
  min-height: 360px;
}

@media only screen and (max-width: 899px) {
  .article-latest__top-row {
    flex-direction: column;
    gap: 24px;
  }
}
.article-latest__top-row > .article-latest__item {
  width: 100%;
  border-radius: 16px;
  overflow: clip;
  max-height: 480px;
  position: relative;
}

@media only screen and (max-width: 899px) {
  .article-latest__top-row > .article-latest__item {
    min-height: 358px;
  }
}
.article-latest__top-row > .article-latest__item:hover .article-latest__item--large__link::after {
  opacity: 1;
}

.article-latest__top-row > .article-latest__item > * {
  color: hsl(0, 0%, 100%);
}

.article-latest__top-row > .article-latest__item::before {
  background: hsla(231, 53%, 34%, 0.5);
  border-radius: 16px;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.article-latest__top-row > .article-latest__item:first-child {
  max-width: 60%;
}

@media only screen and (max-width: 899px) {
  .article-latest__top-row > .article-latest__item:first-child {
    max-width: 100%;
  }
}
.article-latest__top-row > .article-latest__item:last-child {
  max-width: 40%;
}

@media only screen and (max-width: 899px) {
  .article-latest__top-row > .article-latest__item:last-child {
    max-width: 100%;
  }
}
.article-latest__top-row > .article-latest__item .article-latest__item--large__title {
  font-weight: 700;
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .article-latest__top-row > .article-latest__item .article-latest__item--large__title {
    font-size: 28px;
    line-height: 1.25;
  }
}
@media only screen and (max-width: 599px) {
  .article-latest__top-row > .article-latest__item .article-latest__item--large__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
}
.article-latest__top-row > .article-latest__item .article-latest__item--large__date {
  font-size: 22px;
  line-height: 1.8;
  font-weight: 500;
  font-size: 18px;
}

@media only screen and (max-width: 899px) {
  .article-latest__top-row > .article-latest__item .article-latest__item--large__date {
    font-size: 18px;
    line-height: 1.6;
  }
}
.article-latest__top-row > .article-latest__item .article-latest__item--large__type {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
  text-transform: uppercase;
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 600;
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 1;
  border-radius: 100px;
  backdrop-filter: blur(32px);
}

.article-latest__top-row > .article-latest__item .article-latest__item--large__link {
  margin-top: auto;
  padding-bottom: 8px;
  position: relative;
  font-size: 16px;
  max-width: fit-content;
  font-weight: 600;
  color: hsl(0, 0%, 100%);
  transition: padding-bottom 250ms ease-in-out;
}

@media only screen and (max-width: 599px) {
  .article-latest__top-row > .article-latest__item .article-latest__item--large__link {
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    display: block !important;
    margin-top: 32px !important;
  }
}
.article-latest__top-row > .article-latest__item .article-latest__item--large__link::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: hsl(0, 0%, 100%);
  transition: all 150ms ease-in-out;
  opacity: 0;
}

@media only screen and (max-width: 599px) {
  .article-latest__top-row > .article-latest__item .article-latest__item--large__link::after {
    opacity: 1 !important;
    bottom: -2px;
  }
}
.article-latest__top-row > .article-latest__item .article-latest__item--large__link:hover::after {
  bottom: -2px;
}

.article-latest__item--large__content {
  position: absolute;
  bottom: 56px;
  left: 56px;
  right: 56px;
  z-index: 1;
}

@media only screen and (max-width: 1199px) {
  .article-latest__item--large__content {
    bottom: 32px;
    left: 32px;
    right: 32px;
  }
}
.article-latest__bottom-row {
  display: flex;
  flex-direction: row;
  gap: 32px;
}

@media only screen and (max-width: 899px) {
  .article-latest__bottom-row {
    display: none;
  }
}
@media only screen and (max-width: 599px) {
  .article-latest__bottom-row {
    gap: 0;
  }
}
.article-latest__bottom-row > .article-latest__item {
  width: 100%;
  max-width: calc(33% - 16px);
  background-color: hsl(232, 41%, 24%);
  border-radius: 16px;
  overflow: clip;
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
}

.article-latest__bottom-row > .article-latest__item > * {
  color: hsl(228, 29%, 97%);
}

.article-latest__bottom-row > .article-latest__item h5 {
  font-weight: 700;
}

.article-latest__bottom-row .article-latest__item--small__type {
  background-color: hsl(231, 27%, 67%);
  color: hsl(0, 0%, 100%);
  text-transform: uppercase;
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 600;
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 1;
  border-radius: 100px;
  backdrop-filter: blur(32px);
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .article-latest__bottom-row .article-latest__item--small__type {
    top: 16px;
    left: 16px;
  }
}
@media only screen and (max-width: 1199px) {
  .article-latest__bottom-row .article-latest__item--small__type {
    top: 16px;
    left: 16px;
  }
}
.article-latest__bottom-row .article-latest__item--small__date {
  font-size: 22px;
  line-height: 1.8;
  color: hsl(231, 27%, 80%);
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 18px;
}

@media only screen and (max-width: 899px) {
  .article-latest__bottom-row .article-latest__item--small__date {
    font-size: 18px;
    line-height: 1.6;
  }
}
.article-latest__bottom-row .article-latest__item--small__content {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.article-latest__bottom-row .article-latest__item--small__title {
  margin-bottom: 32px;
}

.article-latest__bottom-row .article-latest__item--small__link {
  margin-top: auto;
  padding-bottom: 8px;
  position: relative;
  font-size: 16px;
  max-width: fit-content;
  font-weight: 600;
  color: hsl(228, 29%, 97%);
  transition: padding-bottom 250ms ease-in-out;
}

.article-latest__bottom-row .article-latest__item--small__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: hsl(228, 29%, 97%);
  transition: bottom 250ms ease-in-out;
}

.article-latest__bottom-row .article-latest__item--small__link:hover::after {
  bottom: -2px;
}

.article-latest__bottom-row .article-latest__item--small__image {
  aspect-ratio: 16/9;
  width: 100%;
}

.article-latest__bottom-row .article-latest__item--small__image img {
  aspect-ratio: 16/9;
  width: 100%;
  object-fit: cover;
}

.article-latest__item--large {
  position: relative;
  border-radius: 16px;
}

.article-latest__item--large .article-latest__item--large__image {
  width: 100%;
  height: 100%;
}

.article-latest__item--large .article-latest__item--large__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media only screen and (max-width: 899px) {
  .article-latest__item--large .article-latest__item--large__image img {
    min-height: 358px;
  }
}
.article-latest__row {
  display: flex;
  flex-direction: row;
  gap: 32px;
}

@media only screen and (max-width: 899px) {
  .article-latest__row {
    gap: 0;
  }
}
.article-latest__row > .article-latest__item {
  width: 100%;
  max-width: calc(33% - 16px);
  background-color: hsl(232, 41%, 24%);
  border-radius: 16px;
  overflow: clip;
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
}

.article-latest__row > .article-latest__item > * {
  color: hsl(228, 29%, 97%);
}

.article-latest__row > .article-latest__item h5 {
  font-weight: 700;
}

.article-latest__row .article-latest__item--small__type {
  background-color: hsl(231, 27%, 67%);
  color: hsl(0, 0%, 100%);
  text-transform: uppercase;
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 600;
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 1;
  border-radius: 100px;
  backdrop-filter: blur(32px);
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .article-latest__row .article-latest__item--small__type {
    top: 16px;
    left: 16px;
  }
}
@media only screen and (max-width: 1199px) {
  .article-latest__row .article-latest__item--small__type {
    top: 16px;
    left: 16px;
  }
}
.article-latest__row .article-latest__item--small__date {
  font-size: 22px;
  line-height: 1.8;
  color: hsl(231, 27%, 80%);
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 18px;
}

@media only screen and (max-width: 899px) {
  .article-latest__row .article-latest__item--small__date {
    font-size: 18px;
    line-height: 1.6;
  }
}
.article-latest__row .article-latest__item--small__content {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.article-latest__row .article-latest__item--small__title {
  margin-bottom: 32px;
  word-break: break-all;
}

.article-latest__row .article-latest__item--small__link {
  margin-top: auto;
  padding-bottom: 8px;
  position: relative;
  font-size: 16px;
  max-width: fit-content;
  font-weight: 600;
  color: hsl(228, 29%, 97%);
  transition: padding-bottom 250ms ease-in-out;
}

.article-latest__row .article-latest__item--small__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: hsl(228, 29%, 97%);
  transition: bottom 250ms ease-in-out;
}

.article-latest__row .article-latest__item--small__link:hover::after {
  bottom: -2px;
}

.article-latest__row .article-latest__item--small__image {
  width: 100%;
  height: 240px;
}

.article-latest__row .article-latest__item--small__image img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.article-latest__item--small:hover .article-latest__item--small__image img {
  transform: scale(1.02);
}

.article-latest__item--small:hover .article-latest__item--small__link::after {
  bottom: -2px;
}

.article-latest__item--small .article-latest__item--small__image img {
  transition: all 300ms ease-in-out;
}

.article-latest__item--large__link--hovered::after {
  opacity: 1;
  bottom: -2px !important;
}

.article-latest__scrollbar {
  position: relative;
  width: 100%;
  height: 1px;
  background-color: hsla(231, 53%, 34%, 0.3);
  border-radius: 1px;
  overflow-x: clip;
}

.article-latest__scrollbar::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: hsl(2, 79%, 49%);
  border-radius: 1px;
  transform: translateY(-50%) scaleX(var(--progress-scale, 0));
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.article-latest__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 80px;
  gap: 174px;
  max-width: 1260px;
  display: none;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .article-latest__bottom {
    gap: 100px;
    max-width: 1164px;
    margin-top: 40px;
  }
}
@media only screen and (max-width: 899px) {
  .article-latest__bottom {
    gap: 24px;
    margin-top: 40px;
    display: flex;
  }
}
.article-latest__navigation {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.article-latest__prev,
.article-latest__next {
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  aspect-ratio: 1;
  border: 2px solid hsl(231, 53%, 34%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 48px;
  max-width: 48px;
  width: 100%;
}

.article-latest__prev:hover,
.article-latest__next:hover {
  background-color: hsla(231, 53%, 34%, 0.1);
}

.article-latest__prev.disabled,
.article-latest__next.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.article-latest__prev svg,
.article-latest__next svg {
  display: block;
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.team-select {
  padding-block: 80px;
}

@media only screen and (max-width: 1199px) {
  .team-select {
    padding-block: 60px;
  }
}
@media only screen and (max-width: 899px) {
  .team-select {
    padding-block: 40px;
  }
}
.team-select .team-select__item__quote {
  display: none;
}

.team-select__scrollbar {
  position: relative;
  width: 100%;
  height: 1px;
  background-color: hsla(231, 53%, 34%, 0.3);
  border-radius: 1px;
  overflow-x: clip;
}

.team-select__scrollbar::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: hsl(2, 79%, 49%);
  border-radius: 1px;
  transform: translateY(-50%) scaleX(var(--progress-scale, 0));
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.team-select__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 80px;
  gap: 174px;
  max-width: 1260px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .team-select__bottom {
    gap: 100px;
    max-width: 1164px;
    margin-top: 40px;
  }
}
@media only screen and (max-width: 899px) {
  .team-select__bottom {
    gap: 24px;
    margin-top: 40px;
  }
}
.team-select__navigation {
  display: flex;
  gap: 12px;
}

.team-select__prev,
.team-select__next {
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  aspect-ratio: 1;
  border: 2px solid hsl(231, 53%, 34%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 48px;
  max-width: 48px;
  width: 100%;
}

.team-select__prev:hover,
.team-select__next:hover {
  background-color: hsla(231, 53%, 34%, 0.1);
}

.team-select__prev.disabled,
.team-select__next.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.team-select__prev svg,
.team-select__next svg {
  display: block;
}

.team-select__item {
  position: relative;
  overflow: visible !important;
}

.team-select__item:hover .team-select__item__photo {
  transform: translateY(-10px);
}

.team-select__item__photo {
  transition: all 300ms ease-in-out;
}

.team-select__item__name {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .team-select__item__name {
    font-size: 20px;
    line-height: 1.25;
  }
}
.team-select__item__content {
  background-color: hsl(0, 0%, 100%);
  width: fit-content;
  padding: 8px 16px;
  border-radius: 16px;
  max-width: 100%;
  box-shadow: 0 4px 20px 0 hsla(231, 53%, 34%, 0.1);
  position: absolute;
  bottom: 0;
  left: 0;
}

.team-select__item__function {
  color: hsl(2, 79%, 49%);
  font-size: 18px;
  font-weight: 500;
}

.team-select__slider {
  overflow-x: clip !important;
  overflow-y: visible !important;
  padding-left: 12px;
}

.team-select__text {
  max-width: 730px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .team-select__text {
    margin-top: 32px;
  }
}
@media only screen and (max-width: 899px) {
  .team-select__text {
    margin-top: 32px;
  }
}
.team-select__text p {
  color: hsl(232, 41%, 24%);
}

.team-select__content {
  margin-top: 40px;
  margin-bottom: 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
}

@media only screen and (max-width: 899px) {
  .team-select__content {
    margin-top: 0px;
  }
}
.team-select__link {
  background: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  transition: transform 350ms ease;
}

@media only screen and (max-width: 899px) {
  .team-select__link {
    margin-top: 40px;
  }
}
.team-select__link:hover {
  transform: translateY(-4px);
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button,
.banner-header .banner-header__button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red,
.banner-header .banner-header__button {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover,
.banner-header .banner-header__button:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.banner-header .wrapper {
  border-radius: 32px;
  overflow: clip;
  max-height: 480px;
}

.banner-header .banner-header__image {
  border-radius: 32px;
  position: relative;
  max-height: 480px;
}

@media only screen and (max-width: 899px) {
  .banner-header .banner-header__image {
    min-height: 440px;
  }
}
.banner-header .banner-header__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 32px;
  max-height: 480px;
}

@media only screen and (max-width: 899px) {
  .banner-header .banner-header__image img {
    min-height: 440px;
  }
}
@media only screen and (max-width: 599px) {
  .banner-header .banner-header__image img {
    object-position: 75%;
  }
}
.banner-header .banner-header__image::before {
  background: linear-gradient(245deg, rgba(36, 43, 87, 0) -4.31%, rgba(36, 43, 87, 0.85) 71.4%);
  border-radius: 32px;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
}

.banner-header .banner-header__content {
  position: absolute;
  top: 120px;
  left: 100px;
  right: 100px;
}

@media only screen and (max-width: 1199px) {
  .banner-header .banner-header__content {
    top: 60px;
    left: 60px;
    right: 60px;
  }
}
@media only screen and (max-width: 599px) {
  .banner-header .banner-header__content {
    top: 80px;
    left: 24px;
    right: 24px;
  }
}
.banner-header .banner-header__content > * {
  color: hsl(0, 0%, 100%);
}

.banner-header .banner-header__button {
  margin-top: 26px;
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.position-list .wrapper {
  padding-block: 80px;
}

@media only screen and (max-width: 1199px) {
  .position-list .wrapper {
    padding-block: 60px;
  }
}
@media only screen and (max-width: 899px) {
  .position-list .wrapper {
    padding-block: 40px;
  }
}
.position-list__text {
  padding-block: 0 60px;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: 899px) {
  .position-list__text {
    padding-block: 0 32px;
  }
}
.position-list__text p {
  color: hsl(232, 41%, 24%);
}

.position-list__container {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.position-list__category {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.position-list__item__link {
  background: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  transition: transform 350ms ease;
  margin-inline: 32px;
  margin-top: auto;
}

.position-list__item__link:hover {
  transform: translateY(-4px);
}

@media only screen and (max-width: 899px) {
  .position-list__item__link {
    margin-inline: 24px;
  }
}
.position-list__item__link .position-list__item__plus-icon {
  display: none;
}

.position-list__category-title {
  width: fit-content;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: hsl(0, 0%, 100%);
  padding: 12px 20px;
  line-height: normal;
}

.position-list__item__link {
  margin-top: auto;
  width: fit-content;
}

.position-list__item__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.position-list__items {
  display: flex;
  flex-direction: row;
  gap: 57px 24px;
  flex-wrap: wrap;
}

@media only screen and (max-width: 899px) {
  .position-list__items {
    gap: 24px;
  }
}
.position-list__items .position-list__item {
  align-items: baseline;
  align-self: unset;
}

.position-list__item {
  max-width: calc(33% - 16px);
  width: 100%;
  background: hsl(0, 0%, 100%);
  background-image: none !important;
  display: flex;
  flex-direction: column;
  height: auto;
  align-self: end;
  cursor: pointer;
}

@media only screen and (max-width: 1199px) {
  .position-list__item {
    max-width: calc(50% - 16px);
  }
}
@media only screen and (max-width: 899px) {
  .position-list__item {
    max-width: 100%;
  }
}
.position-list__item .position-list__item__category {
  display: none;
}

.position-list__item:hover .position-list__item__image img {
  transform: scale(1.05);
}

.position-list__item .position-list__item__image-wrap {
  overflow: hidden;
  border-radius: 16px;
}

.position-list__item .position-list__item__image {
  width: 100%;
  height: auto;
  aspect-ratio: 460/336;
  border-radius: 16px;
  position: relative;
  margin-bottom: 32px;
}

.position-list__item .position-list__item__image::before {
  background: linear-gradient(190deg, rgba(36, 43, 87, 0) -4.31%, rgba(36, 43, 87, 0.85) 71.4%);
  border-radius: 16px;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  transition: all 150ms ease-in-out;
}

.position-list__item .position-list__item__image::after {
  height: 24px;
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
  transition: all 150ms ease-in-out;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  background-color: var(--data-color);
}

.position-list__item .position-list__item__image img {
  object-fit: cover;
  object-position: center;
  aspect-ratio: 460/336;
  border-radius: 16px;
  position: relative;
  z-index: 1;
  transition: all 300ms ease-in-out;
}

@media only screen and (max-width: 899px) {
  .position-list__item .position-list__item__image img {
    aspect-ratio: 460/336;
  }
}
.position-list__item .position-list__item__image .position-list__item__title--overlay {
  position: absolute;
  bottom: 32px;
  left: 32px;
  right: 32px;
  z-index: 3;
  color: hsl(0, 0%, 100%);
}

@media only screen and (max-width: 899px) {
  .position-list__item .position-list__item__image .position-list__item__title--overlay {
    bottom: 24px;
    left: 24px;
    right: 24px;
  }
}
.position-list__item .position-list__item__text {
  padding: 0 32px 24px 32px;
}

@media only screen and (max-width: 899px) {
  .position-list__item .position-list__item__text {
    padding: 0 24px 24px 24px;
  }
}
.position-list__item .position-list__item__text > * {
  font-size: 18px;
  font-weight: 500;
  color: hsl(232, 41%, 24%);
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.position-single__header {
  padding-block: 40px 80px;
}

@media only screen and (max-width: 899px) {
  .position-single__header {
    padding-block: 40px;
  }
}
.position-single__header--background {
  padding: 120px 100px;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 32px;
  position: relative;
}

@media only screen and (max-width: 899px) {
  .position-single__header--background {
    padding: 80px 40px;
  }
}
@media only screen and (max-width: 599px) {
  .position-single__header--background {
    padding: 80px 24px;
  }
}
.position-single__header--background::before {
  background: linear-gradient(245deg, rgba(36, 43, 87, 0) -4.31%, rgba(36, 43, 87, 0.85) 71.4%);
  border-radius: 32px;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
}

.position-single__header--content {
  position: relative;
  z-index: 1;
}

.position-single__header--content .position-single__title {
  color: hsl(0, 0%, 100%);
  margin-top: 12px;
}

.position-single__header--content .position-single__category {
  width: fit-content;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: hsl(0, 0%, 100%);
  padding: 12px 20px;
  line-height: normal;
}

.position-single__breadcrumbs ul {
  display: flex;
  flex-direction: row;
  gap: 0 36px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}

.position-single__breadcrumbs ul li:not(.current) {
  text-decoration: underline;
}

.position-single__breadcrumbs ul li.current {
  position: relative;
}

.position-single__breadcrumbs ul li.current::before {
  content: "/";
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
}

@media only screen and (max-width: 599px) {
  .position-single__breadcrumbs ul li.current::before {
    display: none;
  }
}
.position-single__breadcrumbs ul a {
  transition: all 300ms ease-in-out;
}

.position-single__breadcrumbs ul li {
  transition: all 300ms ease-in-out;
}

.position-single__breadcrumbs ul li:hover {
  text-decoration-color: hsl(2, 79%, 49%);
}

.position-single__breadcrumbs ul li a.position-single__back-link {
  position: relative;
  transition: all 300ms ease-in-out;
}

.position-single__breadcrumbs ul li a.position-single__back-link::before {
  content: "/";
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
}

.position-single__breadcrumbs ul li:not(:has(span, a)) {
  position: relative;
}

.position-single__breadcrumbs ul li:not(:has(span, a))::before {
  content: "/";
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
}

.position-single__breadcrumbs li, .position-single__breadcrumbs a, .position-single__breadcrumbs span {
  color: hsl(0, 0%, 100%);
  font-size: 16px;
  letter-spacing: 0.32px;
}

.position-single__navigation a {
  border: 2px solid hsl(228, 29%, 97%);
  font-size: 16px;
  line-height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease-in-out;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  color: hsl(228, 29%, 97%);
  margin-top: 32px;
  gap: 8px;
}

.position-single__navigation a:hover {
  transform: translateY(-4px);
}

.position-single__navigation a .position-single__back-link {
  font-size: 16px;
  line-height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.position-single__navigation a .position-single__back-link svg {
  width: 15px;
  height: 12px;
  margin-right: 8px;
}

.position-single__intro * {
  color: hsl(232, 41%, 24%);
}

.social-share__link {
  transition: transform 250ms ease-in-out;
}

.social-share__link:hover {
  transform: translateY(-4px);
}

.social-share__link.article-single__back-link {
  border: 2px solid hsl(231, 53%, 34%);
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease-in-out;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  color: hsl(231, 53%, 34%);
  margin-top: 32px;
  gap: 8px;
  margin-top: 0;
}

@media only screen and (max-width: 599px) {
  .social-share__link.article-single__back-link {
    width: 100%;
  }
}
.social-share__link.article-single__back-link:hover {
  transform: translateY(-4px);
}

.position-single > .wrapper {
  padding-bottom: 80px;
}

@media only screen and (max-width: 899px) {
  .position-single > .wrapper {
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 899px) {
  .position-single-wrapper .social-share {
    margin-bottom: 40px;
  }
}
/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.text-person .wrapper {
  padding-right: 0;
}

.text-person__container {
  background-color: hsl(228, 29%, 97%);
  padding: 80px 100px;
  border-top-left-radius: 32px;
  border-bottom-left-radius: 32px;
}

.text-person__container {
  display: flex;
  justify-content: space-between;
  gap: 160px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .text-person__container {
    gap: 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .text-person__container {
    gap: 80px;
  }
}
@media only screen and (max-width: 899px) {
  .text-person__container {
    flex-direction: column;
    gap: 40px;
    padding: 40px;
  }
}
@media only screen and (max-width: 599px) {
  .text-person__container {
    padding: 40px 24px;
  }
}
.text-person__title {
  margin-bottom: 40px;
}

@media only screen and (max-width: 899px) {
  .text-person__title {
    margin-bottom: 24px;
  }
}
.text-person__text > * {
  font-size: 18px;
  font-weight: 400;
  color: hsl(232, 41%, 24%);
}

@media only screen and (max-width: 899px) {
  .text-person__text > * {
    font-size: 18px;
  }
}
.text-person__text .lead {
  font-size: 22px;
  font-style: normal;
  line-height: 180%;
}

.text-person__text ul {
  list-style: none;
  padding: 16px 0 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.text-person__text ul li {
  position: relative;
  padding-left: 48px;
  font-size: 18px;
  font-weight: 400;
  color: hsl(232, 41%, 24%);
  line-height: 1.6;
}

@media only screen and (max-width: 899px) {
  .text-person__text ul li {
    font-size: 18px;
  }
}
.text-person__text ul li span,
.text-person__text ul li p {
  font-size: 18px;
  font-weight: 400;
  color: hsl(232, 41%, 24%);
  line-height: 1.6;
}

@media only screen and (max-width: 899px) {
  .text-person__text ul li span,
  .text-person__text ul li p {
    font-size: 18px;
  }
}
.text-person__text ul li:before {
  content: "";
  height: 24px;
  width: 24px;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z' fill='%238ACE8A' fill-opacity='0.5'/%3E%3Cpath d='M22.5877 10.1907C23.0346 10.5157 23.1346 11.1407 22.8096 11.5876L14.8096 22.5876C14.6377 22.8251 14.3721 22.972 14.0783 22.997C13.7846 23.022 13.5002 22.9126 13.2939 22.7063L9.29395 18.7063C8.90332 18.3157 8.90332 17.6813 9.29395 17.2907C9.68457 16.9001 10.3189 16.9001 10.7096 17.2907L13.8814 20.4626L21.1939 10.4095C21.5189 9.96259 22.1439 9.86259 22.5908 10.1876L22.5877 10.1907Z' fill='%23467F4D'/%3E%3C/svg%3E%0A");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0px;
}

.text-person__left {
  max-width: 65%;
}

@media only screen and (max-width: 899px) {
  .text-person__left {
    max-width: 100%;
  }
}
.text-person__right {
  max-width: 35%;
  position: relative;
  height: fit-content;
}

@media only screen and (max-width: 899px) {
  .text-person__right {
    max-width: 65%;
  }
}
@media only screen and (max-width: 599px) {
  .text-person__right {
    max-width: 100%;
  }
}
.text-person__right .text-person__person {
  background-color: hsl(0, 0%, 100%);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  z-index: 2;
}

.text-person__right::before {
  position: absolute;
  content: "";
  height: 24px;
  width: 100%;
  bottom: -8px;
  left: 0;
  border-radius: 0 0 16px 16px;
  background-color: hsl(231, 27%, 80%);
  z-index: 0;
  pointer-events: none;
}

.text-person__right .text-person__person__quote {
  display: none;
}

.text-person__right .text-person__person__name {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .text-person__right .text-person__person__name {
    font-size: 28px;
    line-height: 1.25;
  }
}
@media only screen and (max-width: 899px) {
  .text-person__right .text-person__person__name {
    font-size: 24px;
    line-height: 1.45;
  }
}
.text-person__right .text-person__person__function {
  color: hsl(2, 79%, 49%);
  font-size: 22px;
  font-weight: 400;
  margin-top: 8px;
}

@media only screen and (max-width: 899px) {
  .text-person__right .text-person__person__function {
    font-size: 18px;
  }
}
/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.default-element .wrapper {
  padding-block: 80px;
}

@media only screen and (max-width: 1199px) {
  .default-element .wrapper {
    padding-block: 60px;
  }
}
@media only screen and (max-width: 899px) {
  .default-element .wrapper {
    padding-block: 40px;
  }
}
.default-element .default-element__title {
  margin-bottom: 24px;
}

.default-element > * {
  color: hsl(232, 41%, 24%);
  font-weight: 500;
  font-size: 18px;
}

@media only screen and (max-width: 899px) {
  .default-element > * {
    font-size: 16px;
  }
}
.default-element ul {
  list-style: none;
  padding: 16px 0 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.default-element ul li {
  position: relative;
  padding-left: 48px;
  font-size: 18px;
  font-weight: 500;
  color: hsl(232, 41%, 24%);
  line-height: 1.6;
}

@media only screen and (max-width: 899px) {
  .default-element ul li {
    font-size: 16px;
  }
}
.default-element ul li span,
.default-element ul li p {
  font-size: 18px;
  font-weight: 500;
  color: hsl(232, 41%, 24%);
  line-height: 1.6;
}

@media only screen and (max-width: 899px) {
  .default-element ul li span,
  .default-element ul li p {
    font-size: 16px;
  }
}
.default-element ul li:before {
  content: "";
  height: 24px;
  width: 24px;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z' fill='%238ACE8A' fill-opacity='0.5'/%3E%3Cpath d='M22.5877 10.1907C23.0346 10.5157 23.1346 11.1407 22.8096 11.5876L14.8096 22.5876C14.6377 22.8251 14.3721 22.972 14.0783 22.997C13.7846 23.022 13.5002 22.9126 13.2939 22.7063L9.29395 18.7063C8.90332 18.3157 8.90332 17.6813 9.29395 17.2907C9.68457 16.9001 10.3189 16.9001 10.7096 17.2907L13.8814 20.4626L21.1939 10.4095C21.5189 9.96259 22.1439 9.86259 22.5908 10.1876L22.5877 10.1907Z' fill='%23467F4D'/%3E%3C/svg%3E%0A");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0px;
}

.default-element blockquote {
  padding: 80px 24px 0 24px;
  position: relative;
}

@media only screen and (max-width: 899px) {
  .default-element blockquote {
    padding: 64px 24px 0 24px;
  }
}
.default-element blockquote::before {
  position: absolute;
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='19' viewBox='0 0 30 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.2 18.08C0.88 18.08 0.64 18 0.48 17.84C0.32 17.6267 0.293333 17.3333 0.4 16.96L6.16 0.799995C6.32 0.266663 6.66667 -3.8147e-06 7.2 -3.8147e-06H13.92C14.6667 -3.8147e-06 14.96 0.346663 14.8 1.04L11.12 17.2C10.96 17.7867 10.6133 18.08 10.08 18.08H1.2ZM15.36 18.08C15.04 18.08 14.8 18 14.64 17.84C14.48 17.6267 14.4533 17.3333 14.56 16.96L20.24 0.799995C20.4 0.266663 20.7467 -3.8147e-06 21.28 -3.8147e-06H28C28.6933 -3.8147e-06 28.96 0.346663 28.8 1.04L25.28 17.2C25.1733 17.7867 24.8267 18.08 24.24 18.08H15.36Z' fill='%23DF201A'/%3E%3C/svg%3E%0A");
  background-size: contain;
  background-repeat: no-repeat;
  width: 30px;
  height: 19px;
  content: "";
  position: absolute;
  top: 40px;
  left: 0px;
}

@media only screen and (max-width: 899px) {
  .default-element blockquote::before {
    top: 32px;
  }
}
.default-element blockquote * {
  color: hsl(231, 27%, 67%);
  font-weight: 500;
  font-size: 26px;
  font-style: italic;
}

@media only screen and (max-width: 899px) {
  .default-element blockquote * {
    font-size: 20px;
  }
}
.default-element__text h1, .default-element__text h2, .default-element__text h3, .default-element__text h4, .default-element__text h5 {
  margin-bottom: 24px;
  margin-top: 60px;
}

.default-element__text .lead {
  font-family: Barlow;
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
}

.default-element__text p, .default-element__text a {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 180%;
}

.default-element__text a {
  text-decoration: underline;
  transition: all 300ms ease-in-out;
}

.default-element__text a:hover {
  opacity: 0.7;
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.social-share__container {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  gap: 16px;
  align-items: center;
}

@media only screen and (max-width: 899px) {
  .social-share__container {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}
.social-share__item a {
  min-width: 44px;
  max-width: 44px;
  aspect-ratio: 1;
  width: 100%;
  height: auto;
  background-color: hsl(231, 53%, 34%);
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
}

.social-share__item a span {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-share__item a span svg path {
  fill: hsl(0, 0%, 100%);
}

.social-share__link {
  margin-right: auto;
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.teasers .wrapper {
  padding-block: 80px;
}

@media only screen and (max-width: 1199px) {
  .teasers .wrapper {
    padding-block: 60px;
  }
}
@media only screen and (max-width: 899px) {
  .teasers .wrapper {
    padding-block: 40px;
  }
}
.teasers__container {
  display: flex;
  flex-direction: row;
  gap: 40px;
  flex-wrap: wrap;
}

@media screen and (min-width: 900px) and (max-width: 1400px) {
  .teasers__container {
    gap: 20px;
  }
}
@media only screen and (max-width: 899px) {
  .teasers__container {
    flex-wrap: wrap;
  }
}
.teasers__container .teasers__item {
  width: 100%;
  max-width: calc(33% - 40px);
  border-radius: 16px;
  overflow: clip;
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
}

@media screen and (min-width: 900px) and (max-width: 1400px) {
  .teasers__container .teasers__item {
    max-width: calc(33% - 20px);
  }
}
@media only screen and (max-width: 899px) {
  .teasers__container .teasers__item {
    max-width: calc(50% - 20px);
  }
}
@media only screen and (max-width: 599px) {
  .teasers__container .teasers__item {
    max-width: 100%;
  }
}
.teasers__container .teasers__item--red {
  background-color: hsl(2, 79%, 49%);
}

.teasers__container .teasers__item--red *:not(.teasers__item__button) {
  color: hsl(0, 0%, 100%);
}

.teasers__container .teasers__item--blue {
  background-color: hsl(231, 53%, 34%);
}

.teasers__container .teasers__item--blue *:not(.teasers__item__button) {
  color: hsl(0, 0%, 100%);
}

.teasers__container .teasers__item--grey {
  background-color: hsl(233, 29%, 95%);
}

.teasers__container .teasers__item--grey *:not(.teasers__item__button) {
  color: hsl(231, 53%, 34%);
}

.teasers__container .teasers__item .teasers__item__content {
  padding: 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .teasers__container .teasers__item .teasers__item__content {
    padding: 24px;
  }
}
.teasers__container .teasers__item .teasers__item__title {
  word-break: break-word;
  margin-bottom: 16px;
  font-weight: 700;
}

.teasers__container .teasers__item .teasers__item__image {
  width: 100%;
  height: 205px;
}

.teasers__container .teasers__item .teasers__item__image img {
  width: 100%;
  height: 205px;
  object-fit: cover;
}

.teasers__item__text {
  margin-bottom: 16px;
}

.teasers__item__text * {
  font-size: 18px;
  line-height: 1.6;
}

.teasers__item__buttons {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.teasers__item__button {
  height: auto;
  width: fit-content;
}

.teasers__item__button--white {
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
}

.teasers__item__button--white:hover {
  transform: translateY(-4px);
}

.teasers__item__button--blue {
  color: hsl(0, 0%, 100%);
  background-color: hsl(231, 53%, 34%);
}

.teasers__item__button--blue:hover {
  transform: translateY(-4px);
}

.teasers__item__button--yellow {
  color: hsl(36, 32%, 23%);
  background-color: hsl(38, 93%, 53%);
}

.teasers__item__button--yellow:hover {
  transform: translateY(-4px);
}

.teasers__item__button--red {
  color: hsl(0, 0%, 100%);
  background-color: hsl(2, 79%, 49%);
}

.teasers__item__button--red:hover {
  transform: translateY(-4px);
}

.teasers__item__button--download.button {
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  padding-left: 44px;
  position: relative;
}

.teasers__item__button--download.button::after {
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.21211 1.6124C8.21211 1.21756 7.89445 0.899902 7.49961 0.899902C7.10477 0.899902 6.78711 1.21756 6.78711 1.6124V8.9185L4.9168 7.04818C4.63773 6.76912 4.18648 6.76912 3.91039 7.04818C3.6343 7.32725 3.63133 7.7785 3.91039 8.05459L6.99492 11.1421C7.27398 11.4212 7.72523 11.4212 8.00133 11.1421L11.0918 8.05459C11.3709 7.77553 11.3709 7.32428 11.0918 7.04818C10.8127 6.77209 10.3615 6.76912 10.0854 7.04818L8.21508 8.9185V1.6124H8.21211ZM2.81492 8.9749H2.74961C1.70164 8.9749 0.849609 9.82693 0.849609 10.8749V13.2499C0.849609 14.2979 1.70164 15.1499 2.74961 15.1499H12.2496C13.2976 15.1499 14.1496 14.2979 14.1496 13.2499V10.8749C14.1496 9.82693 13.2976 8.9749 12.2496 8.9749H12.1843L10.7593 10.3999H12.2496C12.5109 10.3999 12.7246 10.6137 12.7246 10.8749V13.2499C12.7246 13.5112 12.5109 13.7249 12.2496 13.7249H2.74961C2.48836 13.7249 2.27461 13.5112 2.27461 13.2499V10.8749C2.27461 10.6137 2.48836 10.3999 2.74961 10.3999H4.23992L2.81492 8.9749ZM11.7746 12.0624C11.7746 11.6676 11.457 11.3499 11.0621 11.3499C10.6673 11.3499 10.3496 11.6676 10.3496 12.0624C10.3496 12.4572 10.6673 12.7749 11.0621 12.7749C11.457 12.7749 11.7746 12.4572 11.7746 12.0624Z' fill='%23283583'/%3E%3C/svg%3E%0A");
  background-size: 15px 16px;
  background-repeat: no-repeat;
  content: "";
  width: 15px;
  height: 16px;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.teasers__item__button--download.button:hover {
  transform: translateY(-4px);
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.team-list .wrapper {
  padding-block: 80px;
}

@media only screen and (max-width: 1199px) {
  .team-list .wrapper {
    padding-block: 60px;
  }
}
@media only screen and (max-width: 899px) {
  .team-list .wrapper {
    padding-block: 40px;
  }
}
@media only screen and (max-width: 599px) {
  .team-list .wrapper {
    padding-block: 32px;
  }
}
.team-list .team-list__items {
  display: flex;
  flex-direction: row;
  gap: 40px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

.team-list .team-list__item {
  background-color: hsl(233, 29%, 95%);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  z-index: 2;
  max-width: calc(25% - 30px);
  display: flex;
  flex-direction: column;
  height: auto;
}

@media only screen and (max-width: 1199px) {
  .team-list .team-list__item {
    max-width: calc(33% - 20px);
  }
}
@media only screen and (max-width: 899px) {
  .team-list .team-list__item {
    max-width: calc(50% - 20px);
  }
}
@media only screen and (max-width: 599px) {
  .team-list .team-list__item {
    max-width: 100%;
  }
}
.team-list .team-list__item::before {
  position: absolute;
  content: "";
  height: 24px;
  width: 100%;
  bottom: -8px;
  left: 0;
  border-radius: 0 0 16px 16px;
  background-color: hsl(231, 27%, 80%);
  z-index: 0;
  pointer-events: none;
}

.team-list .team-list__item::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-color: hsl(233, 29%, 95%);
  border-radius: 16px;
  z-index: 0;
  top: 0;
  left: 0;
  pointer-events: none;
}

.team-list .team-list__item__quote {
  display: none;
}

.team-list .team-list__item__name {
  font-size: 31px;
  line-height: 1.25;
  margin-bottom: 8px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .team-list .team-list__item__name {
    font-size: 28px;
    line-height: 1.25;
  }
}
@media only screen and (max-width: 899px) {
  .team-list .team-list__item__name {
    font-size: 24px;
    line-height: 1.45;
  }
}
.team-list .team-list__item__function {
  color: hsl(2, 79%, 49%);
  font-size: 22px;
  font-weight: 400;
  margin-top: auto;
  word-break: break-all;
}

@media only screen and (max-width: 899px) {
  .team-list .team-list__item__function {
    font-size: 18px;
  }
}
.team-list .team-list__item__photo {
  position: relative;
  z-index: 2;
}

.team-list .team-list__item__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.article-list {
  padding-bottom: 80px;
}

@media only screen and (max-width: 899px) {
  .article-list {
    padding-bottom: 40px;
  }
}
.article-list__header {
  background-color: hsl(231, 53%, 34%);
  position: relative;
  padding: 120px 100px 160px 100px;
  border-radius: 32px;
  overflow: clip;
}

@media only screen and (max-width: 899px) {
  .article-list__header {
    padding: 80px 24px 120px 24px;
  }
}
.article-list__header::before {
  background-image: url("data:image/svg+xml,%3Csvg width='418' height='480' viewBox='0 0 418 480' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='724.5' cy='628.5' r='704.5' stroke='%23FF0000' stroke-width='40'/%3E%3Ccircle cx='724.5' cy='628.5' r='704.5' stroke='url(%23paint0_linear_4651_7455)' stroke-opacity='0.2' stroke-width='40'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_4651_7455' x1='235' y1='167.5' x2='162' y2='530.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-opacity='0'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
  background-size: contain;
  background-repeat: no-repeat;
  top: 0;
  right: -80%;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.article-list__header .article-list__title {
  color: hsl(0, 0%, 100%);
  position: relative;
  z-index: 1;
}

.article-list__filters {
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
}

.article-list__filters .article-list__filter {
  color: hsl(0, 0%, 100%);
  border: 1px solid hsl(0, 0%, 100%);
  font-size: 18px;
  text-transform: uppercase;
  padding: 12px 20px;
}

.article-list__filters .article-list__filter:hover {
  transform: translateY(-4px);
}

.article-list__filters .article-list__filter.article-list__filter--active {
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
}

.article-list__container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  flex-wrap: wrap;
  padding-inline: 100px;
  margin-top: -80px;
  position: relative;
  z-index: 1;
}

@media only screen and (max-width: 1199px) {
  .article-list__container {
    padding-inline: 24px;
    gap: 16px;
    grid-template-columns: repeat(2, 1fr);
    margin-top: -40px;
  }
}
@media only screen and (max-width: 599px) {
  .article-list__container {
    grid-template-columns: repeat(1, 1fr);
  }
}
.article-list__item {
  width: 100%;
  background-color: hsl(233, 29%, 95%);
  border-radius: 16px;
  overflow: clip;
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
}

.article-list__item:not(:has(img)) .article-list__item__content {
  margin-top: 64px;
}

.article-list__item > * {
  color: hsl(231, 53%, 34%);
}

.article-list__item h5 {
  font-weight: 700;
}

.article-list__item:hover .article-list__item__image img {
  transform: scale(1.05);
}

.article-list__item__type {
  background-color: hsl(231, 27%, 67%);
  color: hsl(0, 0%, 100%);
  text-transform: uppercase;
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 600;
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 1;
  border-radius: 100px;
  backdrop-filter: blur(32px);
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .article-list__item__type {
    top: 16px;
    left: 16px;
  }
}
@media only screen and (max-width: 1199px) {
  .article-list__item__type {
    top: 16px;
    left: 16px;
  }
}
.article-list__item__date {
  font-size: 22px;
  line-height: 1.8;
  color: hsl(2, 79%, 49%);
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 18px;
}

@media only screen and (max-width: 899px) {
  .article-list__item__date {
    font-size: 18px;
    line-height: 1.6;
  }
}
.article-list__item__content {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.article-list__item__title {
  margin-bottom: 32px;
}

.article-list__item__link {
  margin-top: auto;
  position: relative;
  font-size: 16px;
  max-width: fit-content;
  font-weight: 600;
  color: hsl(231, 53%, 34%);
  transition: padding-bottom 250ms ease-in-out;
}

.article-list__item__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: hsl(231, 53%, 34%);
  transition: width 250ms ease-in-out;
}

.article-list__item__link:hover::after {
  width: 100%;
}

.article-list__item__image img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: all 300ms ease-in-out;
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.article-single__header {
  padding-block: 40px 80px;
}

@media only screen and (max-width: 899px) {
  .article-single__header {
    padding-block: 40px;
  }
}
@media only screen and (max-width: 899px) {
  .article-single-wrapper {
    padding-bottom: 40px;
  }
}
.article-single__type {
  display: none;
}

.article-single__header--background {
  padding: 120px 100px 40px 100px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 32px;
  position: relative;
}

@media only screen and (max-width: 899px) {
  .article-single__header--background {
    padding: 80px 40px;
  }
}
@media only screen and (max-width: 599px) {
  .article-single__header--background {
    padding: 80px 24px;
  }
}
.article-single__header--background::before {
  background: linear-gradient(245deg, rgba(36, 43, 87, 0) -4.31%, rgba(36, 43, 87, 0.85) 71.4%);
  border-radius: 32px;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
}

.article-single__header--content {
  position: relative;
  z-index: 1;
  max-width: 70%;
}

@media only screen and (max-width: 899px) {
  .article-single__header--content {
    max-width: 100%;
  }
}
.article-single__header--content .article-single__title {
  color: hsl(0, 0%, 100%);
}

.article-single__date {
  color: hsl(0, 0%, 100%);
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 22px;
  line-height: 1.8em;
  gap: 8px;
  margin-top: 24px;
}

.article-single__date span {
  font-weight: 700;
}

.article-single__navigation .article-single__back-link {
  border: 2px solid hsl(231, 53%, 34%);
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease-in-out;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  color: hsl(231, 53%, 34%);
  margin-top: 32px;
  gap: 8px;
}

.article-single__navigation .article-single__back-link:hover {
  transform: translateY(-4px);
}

.article-single__back-link > .article-single__navigation {
  border: 2px solid hsl(231, 53%, 34%);
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease-in-out;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  color: hsl(231, 53%, 34%);
  margin-top: 32px;
  gap: 8px;
}

.article-single__back-link > .article-single__navigation:hover {
  transform: translateY(-4px);
}

.article-single .article-single__content div:nth-child(-n+2) .wrapper {
  padding-block: 40px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .article-single .article-single__content div:nth-child(-n+2) .wrapper {
    padding-block: 32px;
  }
}
@media only screen and (max-width: 899px) {
  .article-single .article-single__content div:nth-child(-n+2) .wrapper {
    padding-block: 24px;
  }
}
.article-single .article-single__content div:nth-child(-n+2) .wrapper h0, .article-single .article-single__content div:nth-child(-n+2) .wrapper h1, .article-single .article-single__content div:nth-child(-n+2) .wrapper h2, .article-single .article-single__content div:nth-child(-n+2) .wrapper h3, .article-single .article-single__content div:nth-child(-n+2) .wrapper h4, .article-single .article-single__content div:nth-child(-n+2) .wrapper h5, .article-single .article-single__content div:nth-child(-n+2) .wrapper h6 {
  margin-bottom: 24px;
}

.article-single .article-single__content div:nth-child(n+3) .wrapper {
  padding-block: 40px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .article-single .article-single__content div:nth-child(n+3) .wrapper {
    padding-block: 32px;
  }
}
@media only screen and (max-width: 899px) {
  .article-single .article-single__content div:nth-child(n+3) .wrapper {
    padding-block: 24px;
  }
}
.article-single .article-single__content div:nth-child(n+3) .wrapper h0, .article-single .article-single__content div:nth-child(n+3) .wrapper h1, .article-single .article-single__content div:nth-child(n+3) .wrapper h2, .article-single .article-single__content div:nth-child(n+3) .wrapper h3, .article-single .article-single__content div:nth-child(n+3) .wrapper h4, .article-single .article-single__content div:nth-child(n+3) .wrapper h5, .article-single .article-single__content div:nth-child(n+3) .wrapper h6 {
  margin-bottom: 24px;
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.embed-element .wrapper {
  padding-block: 80px;
}

@media only screen and (max-width: 1199px) {
  .embed-element .wrapper {
    padding-block: 60px;
  }
}
@media only screen and (max-width: 899px) {
  .embed-element .wrapper {
    padding-block: 40px;
  }
}
.embed-element iframe {
  width: 100%;
  height: 500px;
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.image-element img {
  max-height: 600px;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .image-element img {
    max-height: 450px;
  }
}
@media only screen and (max-width: 899px) {
  .image-element img {
    max-height: 350px;
  }
}
.image-element .image-element__caption {
  color: #696FA7;
  margin-top: 8px;
  font-size: 18px;
  font-weight: 500;
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.form-element {
  margin-block: 80px;
  padding-block: 80px;
}

@media only screen and (max-width: 1199px) {
  .form-element {
    padding-block: 60px;
    margin-block: 60px;
  }
}
@media only screen and (max-width: 899px) {
  .form-element {
    padding-block: 40px;
    margin-block: 40px;
  }
}
.form-element .wrapper--bg {
  padding-right: 0;
  position: relative;
}

.form-element .wrapper--bg::before {
  content: "";
  position: absolute;
  top: 0;
  right: -100vw;
  bottom: 0;
  background-color: hsla(231, 53%, 34%, 0.05);
  z-index: 0;
  pointer-events: none;
  width: 100vw;
}

.form-element:has(.wrapper--bg) {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

.form-element .form-element__main {
  width: 100%;
}

.form-element .form-element__title {
  margin-bottom: 40px;
}

.form-element .form-element__item__image {
  display: none;
}

.form-element .form-element__container--wrapper {
  display: flex;
  flex-wrap: wrap;
}

.form-element .form-element__left {
  max-width: 65%;
}

.form-element .form-element__left #mc_embed_signup label {
  margin-left: 0;
  font-family: "Barlow";
  font-size: 18px;
  font-weight: 500;
  color: hsl(232, 41%, 24%);
}

.form-element .form-element__left #mc_embed_signup .mc-field-group {
  padding-bottom: 12px;
}

.form-element .form-element__left #mc_embed_signup .mc-field-group input {
  border-radius: 32px;
  border: 2px solid #696FA7 !important;
  color: #696FA7 !important;
  padding: 8px 24px !important;
}

@media only screen and (max-width: 899px) {
  .form-element .form-element__left #mc_embed_signup .mc-field-group input {
    padding: 16px 24px !important;
  }
}
.form-element .form-element__left #mc_embed_signup .mc-field-group input::placeholder {
  color: #696FA7 !important;
}

.form-element .form-element__left #mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
  color: hsl(2, 79%, 49%);
  background-color: transparent;
}

.form-element .form-element__left #mc_embed_signup form {
  margin: 20px 0 0 0;
}

.form-element .form-element__left #mc_embed_signup form > * {
  font-family: "Barlow";
  font-size: 18px;
}

.form-element .form-element__left #mc_embed_signup input.button {
  background: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
  transition: transform 350ms ease;
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.form-element .form-element__left #mc_embed_signup input.button:hover {
  transform: translateY(-4px);
}

.form-element .form-element__left #mc_embed_signup .mc-sms-phone-group {
  padding-block: 24px 8px;
}

.form-element .form-element__left #mc_embed_signup .mc-sms-phone-group > *,
.form-element .form-element__left #mc_embed_signup .mc-sms-phone-group a {
  font-family: "Barlow";
  font-size: 14px;
  color: hsl(232, 41%, 24%);
  font-weight: 500;
}

.form-element .form-element__left #mc_embed_signup .mc-sms-phone-group a {
  text-decoration: underline;
  font-weight: 700;
  transition: all 250ms ease-in-out;
}

.form-element .form-element__left #mc_embed_signup .mc-sms-phone-group a:hover {
  text-decoration-color: hsl(2, 79%, 49%);
  color: hsl(2, 79%, 49%);
}

@media only screen and (max-width: 899px) {
  .form-element .form-element__left {
    max-width: 100%;
  }
}
.form-element .form-element__right {
  max-width: 35%;
  position: relative;
  height: fit-content;
  margin-left: auto;
}

@media only screen and (max-width: 899px) {
  .form-element .form-element__right {
    max-width: 100%;
  }
}
.form-element .form-element__container:first-child {
  background-color: hsla(231, 53%, 34%, 0.05);
  border-top-left-radius: 32px;
  border-bottom-left-radius: 32px;
  padding: 75px 120px 80px 120px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .form-element .form-element__container:first-child {
    padding: 64px 80px 64px 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .form-element .form-element__container:first-child {
    padding: 60px;
  }
}
@media only screen and (max-width: 899px) {
  .form-element .form-element__container:first-child {
    padding: 40px;
  }
}
.form-element .form-element__text {
  margin-top: 40px;
  max-width: 730px;
  color: hsl(232, 41%, 24%);
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .form-element .form-element__text {
    margin-top: 32px;
  }
}
@media only screen and (max-width: 899px) {
  .form-element .form-element__text {
    margin-top: 32px;
  }
}
.form-element .form-element__text > * {
  color: hsl(232, 41%, 24%);
  font-weight: 500;
  font-size: 18px;
}

@media only screen and (max-width: 899px) {
  .form-element .form-element__text > * {
    font-size: 16px;
  }
}
.form-element .form-element__text ul {
  list-style: none;
  padding: 16px 0 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-element .form-element__text ul li {
  position: relative;
  padding-left: 48px;
  font-size: 18px;
  font-weight: 500;
  color: hsl(232, 41%, 24%);
  line-height: 1.6;
}

@media only screen and (max-width: 899px) {
  .form-element .form-element__text ul li {
    font-size: 16px;
  }
}
.form-element .form-element__text ul li span,
.form-element .form-element__text ul li p {
  font-size: 18px;
  font-weight: 500;
  color: hsl(232, 41%, 24%);
  line-height: 1.6;
}

@media only screen and (max-width: 899px) {
  .form-element .form-element__text ul li span,
  .form-element .form-element__text ul li p {
    font-size: 16px;
  }
}
.form-element .form-element__text ul li:before {
  content: "";
  height: 24px;
  width: 24px;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z' fill='%238ACE8A' fill-opacity='0.5'/%3E%3Cpath d='M22.5877 10.1907C23.0346 10.5157 23.1346 11.1407 22.8096 11.5876L14.8096 22.5876C14.6377 22.8251 14.3721 22.972 14.0783 22.997C13.7846 23.022 13.5002 22.9126 13.2939 22.7063L9.29395 18.7063C8.90332 18.3157 8.90332 17.6813 9.29395 17.2907C9.68457 16.9001 10.3189 16.9001 10.7096 17.2907L13.8814 20.4626L21.1939 10.4095C21.5189 9.96259 22.1439 9.86259 22.5908 10.1876L22.5877 10.1907Z' fill='%23467F4D'/%3E%3C/svg%3E%0A");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0px;
}

.form-element .form-element__wrapper {
  margin-top: 80px;
  overflow: visible !important;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .form-element .form-element__wrapper {
    margin-top: 64px;
  }
}
@media only screen and (max-width: 899px) {
  .form-element .form-element__wrapper {
    margin-top: 40px;
  }
}
.form-element__scrollbar {
  position: relative;
  width: 100%;
  height: 2px;
  background-color: hsla(231, 53%, 34%, 0.3);
  border-radius: 1px;
  overflow: hidden;
}

.form-element__scrollbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsl(2, 79%, 49%);
  border-radius: 1px;
  transform: scaleX(var(--progress-scale, 0));
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.form-element__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 80px;
  gap: 174px;
  max-width: 1260px;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .form-element__bottom {
    gap: 100px;
    max-width: 1164px;
    margin-top: 40px;
  }
}
@media only screen and (max-width: 899px) {
  .form-element__bottom {
    gap: 24px;
    margin-top: 40px;
  }
}
.form-element__navigation {
  display: flex;
  gap: 12px;
}

.form-element__container--wrapper {
  max-width: 1440px;
}

.form-element__prev,
.form-element__next {
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  aspect-ratio: 1;
  border: 1px solid hsl(231, 53%, 34%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-element__prev:hover,
.form-element__next:hover {
  background-color: hsla(231, 53%, 34%, 0.1);
}

.form-element__prev.disabled,
.form-element__next.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.form-element__prev svg,
.form-element__next svg {
  display: block;
}

.form-element__link {
  background: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  transition: transform 350ms ease;
}

.form-element__link:hover {
  transform: translateY(-4px);
}

.form-element__content {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: baseline;
  max-width: 1440px;
}

@media only screen and (max-width: 899px) {
  .form-element__content {
    flex-direction: column;
  }
}
.form-element__item--gradient {
  height: 20px;
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  z-index: -1;
  transform: translateZ(-1px);
  background-color: var(--data-color);
}

/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Laptop.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
*::selection {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(0, 0%, 100%);
  color: hsl(231, 53%, 34%);
  font-family: "Barlow";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Barlow";
}

.button svg {
  width: 21px;
  height: 20px;
}

.button.has-svg-right svg {
  margin-left: 10px;
}

.button.has-svg-left svg {
  margin-right: 10px;
}

/**
 * Button (blue).
 */
.button--blue {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
}

.button--blue:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (white).
 */
.button--white {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

.button--white:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Button (red).
 */
.button--red {
  background-color: hsl(2, 79%, 49%);
  color: hsl(0, 0%, 100%);
}

.button--red:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (yellow).
*/
.button--yellow {
  background-color: hsl(38, 93%, 53%);
  color: hsl(36, 32%, 23%);
}

.button--yellow:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
p:not(:last-child) {
  margin-bottom: 1em;
}

.is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}

img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

table {
  word-break: break-word;
}

table td {
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.punctuation--red {
  color: hsl(2, 79%, 49%);
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -40px;
}

p:has(small) {
  line-height: 1.4 !important;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1512px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  src: url("../Fonts/barlow-v12-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  src: url("../Fonts/barlow-v12-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/barlow-v12-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("../Fonts/barlow-v12-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("../Fonts/barlow-v12-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/barlow-v12-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  src: url("../Fonts/barlow-v12-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  src: url("../Fonts/barlow-v12-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: hsl(0, 0%, 0%);
  margin-left: 15px;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  border-radius: 4px;
  padding: 11px 15px;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

select:focus,
input:focus,
textarea:focus {
  background-color: hsl(0, 0%, 100%);
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(2, 79%, 49%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}

.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}

.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(2, 79%, 49%);
  background-color: hsla(2, 79%, 49%, 0.1);
}

.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(2, 79%, 49%, 0.1);
  color: hsl(2, 79%, 49%);
}

.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(2, 79%, 49%);
}

.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(2, 79%, 49%);
}

.gform_confirmation_message br {
  display: none;
}

.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

/**
 * Heading.
 */
h0,
h1,
h2,
h3,
h4 {
  font-family: "Barlow";
  color: hsl(231, 53%, 34%);
  font-weight: 700;
}

h0 span,
h1 span,
h2 span,
h3 span,
h4 span {
  position: relative;
  width: fit-content;
}

h0.is-white,
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

h0 .punctuation--red,
h1 .punctuation--red,
h2 .punctuation--red,
h3 .punctuation--red,
h4 .punctuation--red {
  color: red;
}

/**
  * Heading 1.
*/
h0,
h1,
.heading-1 {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0,
  h1,
  .heading-1 {
    font-size: 38px;
    line-height: 1.45;
  }
}
h0 span, h0 p,
h1 span,
h1 p,
.heading-1 span,
.heading-1 p {
  font-size: 61px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h0 span, h0 p,
  h1 span,
  h1 p,
  .heading-1 span,
  .heading-1 p {
    font-size: 38px;
    line-height: 1.45;
  }
}
/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 1.45;
  }
}
h2 span, h2 p,
.heading-2 span,
.heading-2 p {
  font-size: 49px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h2 span, h2 p,
  .heading-2 span,
  .heading-2 p {
    font-size: 32px;
    line-height: 1.45;
  }
}
/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 28px;
    line-height: 1.45;
  }
}
h3 span, h3 p,
.heading-3 span,
.heading-3 p {
  font-size: 35px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h3 span, h3 p,
  .heading-3 span,
  .heading-3 p {
    font-size: 28px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h4 {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 1.45;
  }
}
h4 span, h4 p {
  font-size: 31px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h4 span, h4 p {
    font-size: 24px;
    line-height: 1.45;
  }
}
/**
* Heading 3.
*/
h5 {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 1.45;
  }
}
h5 span, h5 p {
  font-size: 25px;
  line-height: 1.25;
}

@media only screen and (max-width: 899px) {
  h5 span, h5 p {
    font-size: 20px;
    line-height: 1.45;
  }
}
/**
 * Subheading.
 */
p,
span,
a {
  font-size: 22px;
  line-height: 1.8;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  p,
  span,
  a {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media only screen and (max-width: 899px) {
  p,
  span,
  a {
    font-size: 18px;
    line-height: 1.6;
  }
}
p.is-white,
span.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  position: relative;
  transition: all 600ms ease-in-out;
  transition-delay: 250ms;
  opacity: 0;
}

.has-lazy-load.header {
  transition-delay: 550ms;
  transition: all 350ms ease-in-out;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
  flex-wrap: wrap;
}

.pagination .wrapper {
  justify-content: center;
}

.pagination .page-numbers,
.pagination .article-list__pagination-number {
  font-size: 22px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  transition: all 250ms ease;
  color: #696FA7;
  font-weight: 500;
  background-color: #F4F5F9;
  border: 2px solid hsl(231, 27%, 67%);
  min-width: 48px;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 100px;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current, .pagination .page-numbers.active,
.pagination .article-list__pagination-number:hover,
.pagination .article-list__pagination-number.current,
.pagination .article-list__pagination-number.active {
  background-color: hsl(231, 53%, 34%);
  color: hsl(0, 0%, 100%);
  border: 2px solid hsl(231, 53%, 34%);
}

.pagination .page-numbers.prev, .pagination .page-numbers.next,
.pagination .article-list__pagination-number.prev,
.pagination .article-list__pagination-number.next {
  margin-right: 15px;
}

.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg,
.pagination .article-list__pagination-number.prev svg,
.pagination .article-list__pagination-number.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}

.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover,
.pagination .article-list__pagination-number.prev:hover,
.pagination .article-list__pagination-number.next:hover {
  color: hsl(2, 79%, 49%);
}

.pagination .page-numbers.next,
.pagination .article-list__pagination-number.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1440px + 96px);
  padding: 0 48px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper {
    max-width: calc(1272px + 96px);
    padding: 0 48px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1280px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--small {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (background)
 */
.wrapper--bg {
  max-width: calc(1680px + 64px);
  padding: 0 32px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--bg {
    max-width: calc(1352px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--bg {
    max-width: calc(1133px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--bg {
    max-width: calc(1280px + 32px);
    padding: 0 16px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--bg {
    max-width: calc(1280px + 16px);
    padding: 0 8px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Wrapper (teasers)
 */
.wrapper--teasers {
  max-width: calc(1040px + 128px);
  padding: 0 64px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .wrapper--teasers {
    max-width: calc(952px + 128px);
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1199px) {
  .wrapper--teasers {
    max-width: calc(1133px + 64px);
    padding: 0 32px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--teasers {
    max-width: calc(1272px + 40px);
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--teasers {
    max-width: calc(1140px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}
/**
 * Settings.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.kesearch__wrapper {
  margin-top: 100px;
}

#kesearch_num_results {
  color: hsl(231, 53%, 34%) !important;
  margin-bottom: 24px;
}

#kesearch_results {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

#kesearch_results .result-list-item {
  background-color: hsl(228, 29%, 97%);
  border-radius: 16px;
  width: calc(50% - 12px);
  padding: 24px !important;
  cursor: pointer;
  transition: all 300ms ease-in-out;
  margin: 0 !important;
}

@media only screen and (max-width: 899px) {
  #kesearch_results .result-list-item {
    width: 100%;
  }
}
#kesearch_results .result-list-item:hover {
  transform: translateY(-4px);
}

#kesearch_results .result-list-item .result-number {
  display: none !important;
}

#kesearch_results .result-list-item .teaser_icon {
  display: none !important;
}

#kesearch_results .result-list-item .result-title a {
  font-family: "Barlow" !important;
  color: hsl(231, 53%, 34%) !important;
  font-weight: 700 !important;
  font-size: 25px !important;
  line-height: 1.25 !important;
  margin-bottom: 8px;
  display: block;
}

#kesearch_results .result-list-item .result-teaser {
  color: hsl(232, 41%, 24%) !important;
  font-size: 16px !important;
  display: flex;
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px white, 0 0 0 6px orange;
}

#kesearch_pagebrowser_bottom {
  padding-block: 40px;
}

#kesearch_pagebrowser_bottom .pages_total {
  border-top: none !important;
}

#kesearch_pagebrowser_bottom .result_txt {
  display: none;
}

.content-wrapper > .tx-kesearch-pi1 {
  padding-top: 120px;
  margin-inline: auto;
}

@media only screen and (max-width: 899px) {
  .content-wrapper > .tx-kesearch-pi1 {
    padding-top: 80px;
  }
}
@media only screen and (max-width: 599px) {
  .content-wrapper > .tx-kesearch-pi1 {
    padding-top: 40px;
  }
}
.content-wrapper > .tx-kesearch-pi1 #kesearch_results {
  font-size: 61px;
  line-height: 1.25;
  font-weight: 700;
  align-items: baseline;
}

@media only screen and (min-width: 1200px) and (max-width: 1511px) {
  .content-wrapper > .tx-kesearch-pi1 #kesearch_results {
    font-size: 56px;
    line-height: 1.25;
  }
}
@media only screen and (max-width: 899px) {
  .content-wrapper > .tx-kesearch-pi1 #kesearch_results {
    font-size: 38px;
    line-height: 1.45;
  }
}
.content-wrapper > .tx-kesearch-pi1 #kesearch_results span.punctuation--red {
  position: relative;
}

.content-wrapper > .tx-kesearch-pi1 #kesearch_results span.punctuation--red::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -24px;
  background-color: hsl(2, 79%, 49%);
  font-size: 30px;
  border-radius: 100px;
  height: 10px;
  width: 10px;
}

#main-content:has(.content-wrapper > .tx-kesearch-pi1) .faq .faq__background {
  padding-top: 0;
}

#main-content:has(.content-wrapper > .tx-kesearch-pi1) .faq .faq__text {
  margin-top: 20px;
}

#main-content:has(.content-wrapper > .tx-kesearch-pi1) .faq .faq__search {
  margin-top: 40px;
}

#main-content:not(:has(#kesearch_num_results)) .tx-kesearch-pi1 {
  max-width: 1104px;
  padding-inline: 32px;
}

@media only screen and (max-width: 899px) {
  #main-content:not(:has(#kesearch_num_results)) .tx-kesearch-pi1 {
    padding-inline: 16px;
  }
}
#main-content:has(#kesearch_num_results) .faq {
  display: none;
}

/* Accessibility CSS - Focus indicators and screen reader utilities */
/* Skip to content link */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 100001;
  border-radius: 0 0 4px 4px;
  transition: top 0.3s;
}

.skip-to-content:focus {
  top: 0;
}

/* Screen reader only content */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  z-index: 100001;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: inherit !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: inherit !important;
}