/* stylelint-disable */
:root {
  --headline-font: "Gotham SSm A", "Gotham SSm B", Arial, sans-serif;
  --headline-font-weight-bold: 700;
  --font: "Gotham SSm A", "Gotham SSm B", Arial, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-black: 800;
  --line-height: 1.2em;
  --letter-spacing: 20;
  --h1-spacing-bottom: 23px;
  --base-font-size: 16px;
  --h1-font-size: 28px;
  --h2-font-size: 24px;
  --h3-font-size: 21px;
  --h4-font-size: 18px;
  --h5-font-size: 18px;
  --blockquote-font-size: 18px;
  --text-font-size: 1em;
  --button-font-size: 16px;
  --button-medium-font-size: 12px;
  --button-donate-font-size: 14px;
  --button-circle-big-font-size: 18px;
  --header-bar-font-size: 14px;
  --nav-item-font-size: 1em;
  --big-title: 5em;
  --step-font-size: 26px;
  --textstyles-h2: 1.4em;
  --textstyles-h3: 1.25em;
  --textstyles-h4: 1.14em;
  --textstyles-h5: 1em;
  --white: white;
  --white-5: rgba(255, 255, 255, 0.05);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-75: rgba(255, 255, 255, 0.75);
  --black: black;
  --black-90: rgba(0, 0, 0, 0.9);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-40: rgba(0, 0, 0, 0.4);
  --black-30: rgba(0, 0, 0, 0.3);
  --black-20: rgba(0, 0, 0, 0.2);
  --black-15: rgba(0, 0, 0, 0.15);
  --black-10: rgba(0, 0, 0, 0.1);
  --black-5: rgba(0, 0, 0, 0.05);
  --color-darker-gray: #333333;
  --color-dark-gray: #323232;
  --color-access-dark-bg: #222222;
  --color-light-gray: #e8e8e8;
  --color-dark-white: #f3f3f3;
  --color-primary: var(--black);
  --color-secondary: #ffdd13;
  --color-tertiary: var(--white);
  --color-focus: #c5063b;
  --box-shadow: 3px 0 25px 0 rgba(0, 0, 0, 0.16);
  --text-color-light: #cecdcd;
  --headline-color-light: #867f7d;
  --color-accessibility-panel: var(--color-light-gray);
  --color-panel-bg: #f1f1f1;
  --color-menu-bg: #333333;
  --color-menu-bg-hover: #111111;
  --color-link: #0073aa;
  --button-shadow: #719a74;
  --button-focus-shadow: #33b3db;
  --button-border: #80a583;
  --lightgrey: #dddddd;
  --header-bar-height: 50px;
  --flag-size: 24px;
  --logo-width: 123px;
  --content-wrapper-inner: 100%;
  --title-border: 5px;
  --author-image-size: 90px;
  --bg-bar-height: 200px;
  --step-image-size: 210px;
  --step-count-size: 70px;
  --step-item-width: 295px;
  --pagination-number-size: 44px;
  --our-icon-width: 150px;
  --our-icon-height: 150px;
  --menu-col-with: 220px;
  --fixed-header-logo-height: 23px;
  --gap: 40px;
  --nav-item-gap: 2.5em;
  --spacing: 2.8em;
  --content-wrapper: 20px;
  --content-spacing: 40px;
  --list-item-spacing: 1.4em;
  --main-nav-item-spacing: 0 12px;
  --section-padding: 40px 0;
  --hero-text-padding: 30px 20px;
  --header-bar-padding: 20px;
  --content-wrapper-inner-padding: 20px;
  --breadcrumb-spacing: 30px 0 30px 0;
  --text-to-speech-spacing: 30px;
  --entry-footer-spacing: 40px;
  --item-featured-padding: 40px;
  --section-spacing: 20px;
  --step-count-position: -35px auto 17px;
  --item-cta-padding: 40px;
  --menu-item-arrow-spacing: 24px;
  --primary-nav-padding: 18px 0;
  --button-padding: 8px 20px;
  --button-amount-padding: 8px 0;
  --button-medium-padding: 0 20px;
  --button-icon-spacing: 12px;
  --button-medium-icon-spacing: 10px;
  --button-bg-color: var(--color-primary);
  --button-border-radius: 22px;
  --button-line-height: 44px;
  --button-medium-line-height: 30px;
  --button-donate-line-height: 40px;
  --button-donate-padding: 40px;
  --button-circle-size: 40px;
  --button-circle-medium-size: 44px;
  --button-circle-big-size: 50px;
  --button-circle-big-margin: 0 5px;
  --default-transition: 0.5s ease;
  --hover-transition: 0.3s ease;
  /*
    RESPONSIVE OVERRIDES
  */
}
:root .night-mode {
  --color-primary: var(--white);
}
@media (min-width: 768px) {
  :root {
    --h1-font-size: 48px;
    --h2-font-size: 36px;
    --h3-font-size: 28px;
    --h4-font-size: 24px;
    --h5-font-size: 21px;
    --blockquote-font-size: 21px;
    --button-donate-font-size: 16px;
    --logo-width: 155px;
    --title-border: 7px;
    --author-image-size: 144px;
    --bg-bar-height: 350px;
    --step-item-width: 448px;
    --our-icon-width: 200px;
    --our-icon-height: 200px;
    --fixed-header-logo-height: 35px;
    --hero-text-padding: 60px 40px;
    --content-wrapper: 40px;
    --breadcrumb-spacing: 60px 0 24px 0;
    --text-to-speech-spacing: 40px;
    --content-wrapper-inner-padding: 20px;
    --item-featured-padding: 60px;
    --section-padding: 60px 0;
    --item-cta-padding: 40px;
    --button-padding: 10px 25px;
    --button-amount-padding: 10px 0;
    --button-donate-padding: 50px;
    --button-circle-big-margin: 0 10px;
  }
}
@media (min-width: 1024px) {
  :root {
    --content-wrapper-inner: 990px;
    --entry-footer-spacing: 60px;
    --hero-text-padding: 50px 50px 0;
    --item-featured-padding: 100px;
    --section-spacing: 40px;
    --content-spacing: 60px;
  }
}
@media (min-width: 1366px) {
  :root {
    --h3-font-size: 32px;
    --button-circle-big-font-size: 25px;
    --logo-width: 155px;
    --step-item-width: 310px;
    --menu-col-with: 280px;
    --main-nav-item-spacing: 0 17px;
    --section-spacing: 60px;
    --primary-nav-padding: 20px 0;
    --button-circle-big-size: 70px;
  }
}
@media (min-width: 1920px) {
  :root {
    --h1-spacing-bottom: 43px;
    --base-font-size: 18px;
    --h1-font-size: 60px;
    --h2-font-size: 48px;
    --h3-font-size: 36px;
    --h4-font-size: 28px;
    --h5-font-size: 24px;
    --blockquote-font-size: 24px;
    --button-medium-font-size: 16px;
    --button-font-size: 18px;
    --button-donate-font-size: 21px;
    --header-bar-font-size: 16px;
    --step-font-size: 48px;
    --logo-width: 210px;
    --flag-size: 30px;
    --content-wrapper-inner: 1400px;
    --title-border: 10px;
    --author-image-size: 180px;
    --bg-bar-height: 500px;
    --step-image-size: 300px;
    --step-count-size: 100px;
    --step-item-width: 340px;
    --pagination-number-size: 60px;
    --menu-col-with: 360px;
    --fixed-header-logo-height: 50px;
    --main-nav-item-spacing: 0 25px;
    --hero-text-padding: 50px 70px 0;
    --content-wrapper: 50px;
    --header-bar-padding: 30px;
    --content-wrapper-inner-padding: 40px;
    --breadcrumb-spacing: 120px 0 42px 0;
    --text-to-speech-spacing: 80px;
    --entry-footer-spacing: 80px;
    --item-featured-padding: 120px;
    --section-spacing: 80px;
    --section-padding: 80px 0;
    --step-count-position: -50px auto 35px;
    --content-spacing: 80px;
    --item-cta-padding: 60px;
    --menu-item-arrow-spacing: 29px;
    --primary-nav-padding: 36.5px 0;
    --button-padding: 16.5px 40px;
    --button-amount-padding: 16.5px 0;
    --button-medium-padding: 0 26px;
    --button-icon-spacing: 20px;
    --button-medium-icon-spacing: 12px;
    --button-line-height: 60px;
    --button-medium-line-height: 40px;
    --button-donate-line-height: 60px;
    --button-donate-padding: 75px;
    --button-circle-medium-size: 60px;
    --button-circle-big-size: 80px;
    --button-border-radius: 30px;
  }
}

.hero {
  position: relative;
  margin-bottom: var(--section-spacing);
}
@media (min-width: 1024px) {
  .hero {
    display: flex;
    justify-content: flex-end;
  }
}
.hero .tag-nav {
  margin-bottom: 24px;
}

.hero-text {
  background-color: var(--white);
  padding: var(--hero-text-padding);
}
@media (min-width: 1024px) {
  .hero-text {
    width: 40%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
  }
}

@media (min-width: 1024px) {
  .hero-image.focus-point-image {
    width: 66%;
  }
}
.hero-image.focus-point-image a {
  padding-top: 64.1791044776%;
}
@media (min-width: 480px) {
  .hero-image.focus-point-image a {
    padding-top: 61.0465116279%;
  }
}
@media (min-width: 768px) {
  .hero-image.focus-point-image a {
    padding-top: 57.1761960327%;
  }
}
@media (min-width: 1366px) {
  .hero-image.focus-point-image a {
    padding-top: 57.2135201979%;
  }
}

.hero-title {
  line-height: 1.417em;
  margin-bottom: 0.688em;
}

.hero-donate {
  background-color: var(--color-primary);
  color: var(--white);
  padding: 30px 0 20px;
  position: relative;
  overflow: hidden;
  margin-bottom: 50px;
}
@media (min-width: 768px) {
  .hero-donate {
    padding: 80px 0 40px;
  }
}
@media (min-width: 1024px) {
  .hero-donate {
    padding: 80px 0;
  }
}
.hero-donate a {
  color: var(--white);
}
.hero-donate a.cta-button-secondary {
  color: var(--color-primary);
}
.hero-donate .content-wrapper-inner {
  position: relative;
  z-index: 2;
}
@media (min-width: 1024px) {
  .hero-donate .content-wrapper-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.hero-donation-text {
  width: 100%;
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .hero-donation-text {
    margin-bottom: 120px;
  }
}
@media (min-width: 1024px) {
  .hero-donation-text {
    width: 41.6%;
    margin-bottom: 0;
  }
}

.hero-donation-form {
  width: 100%;
  padding: 30px;
  background-color: var(--white);
  color: var(--color-primary);
}
@media (min-width: 1024px) {
  .hero-donation-form {
    width: 33.3%;
  }
}

.hero-donation-form-divider {
  margin: 20px 0 30px;
}

.amount-buttons {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  grid-gap: 8px;
  margin-bottom: 30px;
}

.amount-buttons-button {
  padding: var(--button-amount-padding);
}

.custom-amount {
  position: relative;
  margin-bottom: 25px;
}
.custom-amount .custom-amount-currency {
  position: absolute;
  top: 1px;
  bottom: 0;
  left: 0;
  line-height: var(--button-line-height);
  font-weight: var(--font-weight-black);
  font-size: 21px;
  width: 52px;
  text-align: center;
}
.custom-amount .custom-amount-input {
  width: 100%;
  padding-left: 50px;
}

.donation-frequency {
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .donation-frequency {
    display: flex;
  }
}
@media (min-width: 1024px) {
  .donation-frequency {
    display: block;
  }
}
.donation-frequency .custom-radio {
  margin-right: 25px;
}

#donate-button {
  width: 100%;
}

.hero-donate.inverted {
  background-color: var(--white);
  color: var(--color-primary);
}
.hero-donate.inverted a {
  color: var(--color-primary);
}
.hero-donate.inverted .focus-point-image .bg-image {
  opacity: 1;
}
.hero-donate.inverted a.cta-button {
  color: var(--white);
  background: var(--button-bg-color);
}

.hero-donate.variant {
  background-color: var(--white);
  color: var(--color-primary);
  overflow: visible;
  display: flex;
}
.hero-donate.variant a {
  color: var(--color-primary);
}
.hero-donate.variant a.cta-button {
  color: var(--white);
}
.hero-donate.variant .hero-donation-text {
  width: 100%;
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .hero-donate.variant .hero-donation-text {
    margin-bottom: 120px;
  }
}
@media (min-width: 1024px) {
  .hero-donate.variant .hero-donation-text {
    width: 58.33%;
  }
}
.hero-donate.variant .hero-donation-form {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.16);
}
.hero-donate.variant .hero-donation-form-image {
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .hero-donate.variant .hero-donation-form-image {
    margin-top: -75px;
  }
}
.hero-donate.variant .focus-point-image a {
  padding-top: 46.7032967033%;
}

.hero-donate.image-beside {
  padding: 0;
  background-color: #fff;
}
@media (min-width: 1024px) {
  .hero-donate.image-beside {
    display: flex;
    align-items: center;
  }
}
.hero-donate.image-beside .hero-donation-form-image {
  position: relative;
  aspect-ratio: 4/3;
  width: 100%;
  padding-top: 0;
}
@media (min-width: 1024px) {
  .hero-donate.image-beside .hero-donation-form-image {
    padding-top: 0;
    width: 66%;
  }
}
.hero-donate.image-beside .hero-donation-form-image.focus-point-image a {
  position: static;
  padding-top: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.hero-donate.image-beside .hero-donation-text {
  background-color: var(--color-secondary);
  color: var(--color-primary);
  padding: var(--content-wrapper);
}
@media (min-width: 1024px) {
  .hero-donate.image-beside .hero-donation-text {
    width: calc(100% + 80px);
    width: 46.8%;
    margin: 40px 0;
    margin-left: -100px;
    z-index: 0;
  }
}
.hero-donate.image-beside .hl-underline {
  margin-bottom: 1.4em;
}
.hero-donate.image-beside .hl-underline:after {
  background-color: var(--color-primary);
}
.hero-donate.image-beside a .item-title {
  color: black !important;
}
@media (min-width: 1024px) {
  .hero-donate.image-beside.donate .hero-donation-form-image {
    width: 50%;
  }
}
.hero-donate.image-beside.donate .hero-donation-text-wrap {
  padding: var(--content-wrapper);
}
@media (min-width: 1280px) {
  .hero-donate.image-beside.donate .hero-donation-text-wrap {
    width: 54%;
  }
}
.hero-donate.image-beside.donate .hero-donation-text {
  padding: 0;
}
@media (min-width: 1024px) {
  .hero-donate.image-beside.donate .hero-donation-text {
    width: calc(60% + 100px);
  }
}
@media (min-width: 1280px) {
  .hero-donate.image-beside.donate .hero-donation-text {
    display: flex;
  }
}
.hero-donate.image-beside.donate .hero-donation-form-beside {
  border-top: 1px solid white;
  padding: var(--content-wrapper);
}
@media (min-width: 1280px) {
  .hero-donate.image-beside.donate .hero-donation-form-beside {
    width: 48%;
    border-left: 1px solid white;
    border-top: none;
  }
}
.hero-donate.image-beside.donate .hero-donation-form {
  width: 100%;
  background-color: transparent;
  padding: 0;
}
.hero-donate.image-beside.donate .donate-button {
  width: 100%;
  background-color: var(--color-primary);
  color: white;
}
.hero-donate.image-beside.donate .hero-donation-form-title,
.hero-donate.image-beside.donate .hero-donation-form-divider {
  display: none;
}

.hero-slider-wrap {
  overflow: hidden;
}

.hero-slider-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 30px;
}
.hero-slider-nav .swiper-pagination {
  width: auto;
  margin-top: auto;
  margin-right: 40px;
}
.hero-slider-nav .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 5px;
}
.hero-slider-nav .swiper-pagination .swiper-pagination-bullet-active {
  background-color: black;
}
.hero-slider-nav .hero-slider-prev {
  margin-right: 20px;
}
.hero-slider-nav .circle-button,
.hero-slider-nav a.circle-button {
  background-color: var(--color-secondary);
  color: black;
}
/*# sourceMappingURL=hero.css.map*/