/*	==========================================================================
   	Fonts
   	========================================================================== */
/*	==========================================================================
   	Links
   	========================================================================== */
/*	==========================================================================
   	Buttons
   	========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");
/*	==========================================================================
   	Fonts
   	========================================================================== */
/*	==========================================================================
   	Links
   	========================================================================== */
/*	==========================================================================
   	Buttons
   	========================================================================== */
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin: 0;
  padding: 0;
  font-style: normal;
  list-style: none;
}

:root {
  font-family: "Inter", sans-serif;
  font-size: 1px;
  font-feature-settings: "pnum" on, "lnum" on;
}

:root {
  font-size: 1px;
}
@media screen and (min-width: 1440px) {
  :root {
    font-size: calc(1px + (1.75 - 1) * ((100vw - 1440px) / (3840 - 1440)));
  }
}

#root,
[id^=story--] {
  padding: 2%;
}

[id=story--form-controls-dropdown--expanded] {
  min-height: 12vh;
}

p,
div,
li,
h1,
h2,
h3,
h4,
h5,
h6,
span,
a,
button,
input {
  /* Desktop/Paragraph */
  font-family: "Inter" !important;
  font-style: normal;
  font-weight: 400;
  /* or 141% */
  font-feature-settings: "tnum" on, "lnum" on;
}

p,
div,
span,
a,
p,
div,
span,
a,
button {
  /* Desktop/Paragraph */
  font-size: 16rem;
  line-height: 24rem;
  /* or 141% */
}

em {
  font-style: italic;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

summary {
  display: block;
  /* works in firefox */
  list-style: none;
  /* works in firefox */
}

summary::after {
  display: block;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

/* Mobile 480px */
@media only screen and (max-width: 480px) {
  p,
div,
span,
li {
    font-size: 16rem;
    line-height: 24rem;
  }
}
.hide {
  display: none !important;
}

.text-content p,
.text-content h2,
.text-content .h2,
.text-content h3,
.text-content .h3,
.text-content ul:not([class]),
.text-content ol:not([class]) {
  max-width: 780rem;
}
.text-content p + p, .text-content p + ul, .text-content p + ol, .text-content p + address, .text-content p + table, .text-content p + nav,
.text-content ul + p,
.text-content ul + ul,
.text-content ul + ol,
.text-content ul + address,
.text-content ul + table,
.text-content ul + nav,
.text-content ol + p,
.text-content ol + ul,
.text-content ol + ol,
.text-content ol + address,
.text-content ol + table,
.text-content ol + nav,
.text-content address + p,
.text-content address + ul,
.text-content address + ol,
.text-content address + address,
.text-content address + table,
.text-content address + nav,
.text-content table + p,
.text-content table + ul,
.text-content table + ol,
.text-content table + address,
.text-content table + table,
.text-content table + nav,
.text-content nav + p,
.text-content nav + ul,
.text-content nav + ol,
.text-content nav + address,
.text-content nav + table,
.text-content nav + nav {
  margin-top: 12rem;
}
@media only screen and (min-width: 1200px) {
  .text-content p + p, .text-content p + ul, .text-content p + ol, .text-content p + address, .text-content p + table, .text-content p + nav,
.text-content ul + p,
.text-content ul + ul,
.text-content ul + ol,
.text-content ul + address,
.text-content ul + table,
.text-content ul + nav,
.text-content ol + p,
.text-content ol + ul,
.text-content ol + ol,
.text-content ol + address,
.text-content ol + table,
.text-content ol + nav,
.text-content address + p,
.text-content address + ul,
.text-content address + ol,
.text-content address + address,
.text-content address + table,
.text-content address + nav,
.text-content table + p,
.text-content table + ul,
.text-content table + ol,
.text-content table + address,
.text-content table + table,
.text-content table + nav,
.text-content nav + p,
.text-content nav + ul,
.text-content nav + ol,
.text-content nav + address,
.text-content nav + table,
.text-content nav + nav {
    margin-top: 20rem;
  }
}
.text-content p + h2, .text-content p + .h2, .text-content p + h3, .text-content p + .h3,
.text-content ul + h2,
.text-content ul + .h2,
.text-content ul + h3,
.text-content ul + .h3,
.text-content ol + h2,
.text-content ol + .h2,
.text-content ol + h3,
.text-content ol + .h3,
.text-content address + h2,
.text-content address + .h2,
.text-content address + h3,
.text-content address + .h3,
.text-content table + h2,
.text-content table + .h2,
.text-content table + h3,
.text-content table + .h3,
.text-content nav + h2,
.text-content nav + .h2,
.text-content nav + h3,
.text-content nav + .h3 {
  margin-top: 20rem;
}
.text-content a {
  font-size: 1em;
  text-underline-offset: 3rem;
  color: black;
}
.text-content a:hover {
  text-decoration: none;
}
.text-content ul:not([class]):not([id]),
.text-content ol:not([class]):not([id]) {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  margin-bottom: 30rem;
  list-style-type: none;
}
.text-content ul:not([class]):not([id]) li {
  padding-left: 17rem;
  position: relative;
}
.text-content ul:not([class]):not([id]) li::before {
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  background-color: currentColor;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  top: 12rem;
}
.text-content ol:not([class]):not([id]) {
  counter-reset: ol_counter;
}
.text-content ol:not([class]):not([id]) li {
  position: relative;
  padding-left: 30rem;
}
.text-content ol:not([class]):not([id]) li::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  counter-increment: ol_counter;
  content: counter(ol_counter) ".";
}
.text-content table {
  border-collapse: collapse;
}
.text-content table *,
.text-content table caption {
  text-align: left;
}
.text-content table caption {
  margin-bottom: 12rem;
  font-size: 28rem;
  line-height: 40rem;
}
.text-content table td,
.text-content table th {
  border: solid 1px;
  padding: 8rem;
}
.text-content address {
  margin-bottom: 12rem;
}
@media only screen and (min-width: 1200px) {
  .text-content address {
    margin-bottom: 20rem;
  }
}

@media only screen and (max-width: 480px) {
  .text-content ul:not([class]):not([id]) li:before {
    top: 8rem;
  }
}
h1 {
  font-weight: 700;
  font-size: 28rem;
  line-height: 42rem;
}

h2 {
  font-weight: 700;
  font-size: 20rem;
  line-height: 32rem;
}

@media only screen and (min-width: 768px) {
  h1 {
    font-size: 40rem;
    line-height: 60rem;
  }
  h2 {
    font-size: 24rem;
    line-height: 36rem;
  }
}
body {
  padding: 20rem;
  display: flex;
  flex-direction: column;
  gap: 40rem;
}
body > * {
  width: 100%;
}

header,
main,
footer {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

main {
  gap: 40rem;
}
main h2:not(:first-child) {
  margin-top: 20rem;
}
main .video-container,
main picture img,
main nav {
  margin-top: 20rem;
}

@media only screen and (min-width: 576px) {
  body {
    gap: 80rem;
    padding-top: 40rem;
  }
  header,
main,
footer {
    max-width: 550rem;
  }
  header nav {
    flex-direction: row;
    justify-content: space-between;
  }
  main {
    gap: 80rem;
  }
  main .content-body {
    max-width: 550rem;
    margin: 0 auto;
  }
}
@media only screen and (min-width: 992px) {
  header,
main,
footer {
    max-width: 920rem;
  }
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.button {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12rem 24rem;
  margin: 0;
  max-height: 48rem;
  border: none;
  cursor: pointer;
  border-radius: 6rem;
  text-decoration: none;
  transition: all 0.3s;
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
}
.button, .button span {
  font-weight: 600;
  font-size: 17rem;
  line-height: 24rem;
}
.button.style--primary {
  color: white;
  background-color: #2C5DE5;
}
.button.style--primary:hover {
  background-color: black;
}
.button.style--primary.state--disabled {
  background-color: #aaa;
}
.button.style--secondary {
  color: #2C5DE5;
  border: #2C5DE5 solid 1rem;
  background-color: transparent;
}
.button.style--secondary:hover {
  color: black;
  border-color: black;
}
.button.style--secondary.state--disabled {
  color: #aaa;
  border-color: #aaa;
}
.button.style--primary-contrast {
  background-color: #ffffff;
  color: #2C5DE5;
}
.button.style--secondary-contrast {
  color: rgba(255, 255, 255, 0.75);
  border: rgba(255, 255, 255, 0.75) solid 2rem;
  background-color: transparent;
}
.button.state--disabled {
  cursor: not-allowed;
}
.button.with-icon.with-icon--right {
  padding: 12rem 20rem 12rem 24rem;
}
.button.with-icon.with-icon--right svg {
  margin-left: 12rem;
}
.button.with-icon.with-icon--left {
  padding: 12rem 24rem 12rem 20rem;
}
.button.with-icon.with-icon--left svg {
  order: -1;
  margin-right: 12rem;
}

header {
  display: flex;
  flex-direction: column;
}
header .logo {
  height: 48rem;
}
header .logo img {
  height: 100%;
}
header nav ul {
  margin-top: 40rem;
  display: flex;
  gap: 20rem;
}
header nav ul li a {
  color: #2C5DE5;
  font-weight: 600;
  font-size: 14rem;
  line-height: 20rem;
  text-underline-offset: 3rem;
}

@media only screen and (min-width: 576px) {
  header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  header .logo {
    height: 64rem;
  }
  header nav {
    height: 80rem;
    display: flex;
  }
  header nav ul {
    align-items: center;
    margin-top: 0rem;
  }
}
.header {
  display: flex;
  flex-direction: column;
  gap: 20rem;
}
.header h1 {
  margin-bottom: 8rem;
}
.header hr {
  margin: 40rem 0;
}
.header .header__content nav {
  display: flex;
  gap: 24rem;
  align-items: flex-start;
}
.header .header__content nav ul {
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
.header .header__content nav ul li p {
  margin-top: 8rem;
  font-size: 12rem;
  line-height: 16rem;
  color: #50545E;
  max-width: 218rem;
}
.header .header__content *:not(hr) + nav {
  margin-top: 20rem;
}
.header .header__thumb img {
  max-width: 50%;
}

@media only screen and (min-width: 576px) {
  .header .header__content nav ul {
    flex-direction: row;
    gap: 24rem;
  }
}
@media only screen and (min-width: 992px) {
  .header {
    gap: 80rem;
    align-items: center;
    flex-direction: row;
  }
  .header .header__content {
    display: flex;
    flex-direction: column;
    width: 50%;
  }
  .header .header__thumb {
    order: 1;
    width: 50%;
  }
  .header .header__thumb img {
    max-width: 100%;
  }
  .header hr {
    margin: 80rem 0;
  }
}
footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  row-gap: 80rem;
}
footer p {
  font-size: 12rem;
  line-height: 16rem;
  color: #50545E;
}
footer nav ul {
  display: flex;
  flex-direction: column;
  row-gap: 16rem;
}
footer nav .link {
  -moz-column-gap: 16rem;
       column-gap: 16rem;
}
footer nav .link svg {
  order: -1;
  min-width: 23rem;
  min-height: 32rem;
}

@media only screen and (min-width: 576px) {
  footer {
    padding: 48px 0;
    flex-direction: row;
  }
  footer nav ul {
    flex-direction: row;
    -moz-column-gap: 80rem;
         column-gap: 80rem;
  }
  footer nav .link svg {
    order: 1;
  }
}