/* stylelint-disable order/order */
/*
* Converts an pixel value into a rem value.
*
* @param string  $values    the pixel value(s) as a number. Can convert multiple values if values separated by a space.
* @param integer $base      the base pixel value.
*
* @return string   a space-separated string of rem values.
*/
/*
* This is an abbreviated wrapper for the responsive-values function.
*/
/*
* Creates a CSS clamp value that sizes between breakpoints.
*
* @param integer $min                    the minimum pixel value.
* @param integer $max                    the maximum pixel value.
* @param string  $smallest-breakpoint    the name of the smallest breakpoint from the $grid-breakpoints variable.
* @param string  $largest-breakpoint     the name of the largest breakpoint from the $grid-breakpoints variable.
* @param string  $screen                 whether to use a horizontal (width) breakpoint or a vertical (height) breakpoint.
*
* @return string   a CSS clamp property value.
*/
/*
* Outputs a font family value from the $fonts variable.
*
* @param string  $key   the font key.
*
* @return string   a font family value.
*/
/*
* Outputs a color value from the $paints or $additional-paints variables.
*
* @param string   $key   the color name.
*
* @return string   a color value.
*/
/*
* Outputs an effect value from the $effects variable.
*
* @param string  $key   the effect name.
*
* @return string   an effect value.
*/
/* stylelint-enable order/order */
/*
* Used to target heading selectors.
*
* @param integer  $start               the first heading element to target. 1 through 6.
* @param integer  $end                 the last heading element to target. 1 through 6.
* @param string   $beforeCombinator    the CSS combinator to include before the heading classes.
* @param string   $afterCombinator     the CSS combinator to include after the heading classes.
* @param boolean  $includeFontClasses  whether or not to include the .has-t-1... classes or just output the standard heading elements.
*
* @return string  The included CSS wrapped with selectors for the specified headings.
*/
/*
* Used to add properties to a for a pseudo element to make an icon based on the iconfont set.
*
* @param string   $content     the content for the icon. Usually uses one of the iconfont variables.
* @param string   $font-size   the font size with unit.
*
* @return string  The CSS properties for the icon.
*/
/*
* Generates CSS to fit an element into the 12-column grid. Only works when used on an element where the parent element is the width of the entire page.
*
* @return string  CSS properties to set the width of the element to the specified column sizes.
*/
/*
* Used to target elements with a background color that has a text color different from the standard color.
*
* @param string   $additionalSelectors     additional comma-separated selectors to add.
*
* @return string  The included CSS wrapped with selectors for the specified background.
*/
/*
* Used to target button elements with a background color set to use the alt button colors.
*
* @param string   $additionalSelectors     additional comma-separated selectors to add.
*
* @return string  The included CSS wrapped with selectors for the specified background.
*/
/*
* Used to add the CSS Grid properties for the 12-column grid.
*
* @return string  The CSS Grid properties for the 12-column grid.
*/
/*
* Used to visually hide an element but still allow screen readers to access the element and its contents for accessibility.
*
* @return string  The styles needed to visually hide an element.
*/
.fade-up {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: 300ms opacity 300ms ease-out, 300ms transform 300ms ease-out;
}
.fade-up.in-viewport {
  opacity: 1 !important;
  transform: none !important;
}

/****************
 * Fonts
 *
 * The font settings are defined via the gulp figma which task creates variables in the css/__base-includes/figma/_figma-font-styles.scss file based on the Figma file. Additional variables are defined here.
 ****************/
/*
* This array is used to specify the fonts used on the project with the following parameters:
	base - the name for use in the font() mixin.
		css - the output CSS value.
		figma-name: - the 'font-family' name ued in the _figma-font-variable.scss file.
	)
*/
/****************
 * Colors
 *
 * The primary colors are defined via the gulp figma task which creates variables in the css/__base-includes/figma/_figma-color-variables.scss file based on the Figma file. Additional variables are defined here.
 ****************/
/* If additional colors need to be added to the _figma-color-variables.scss, they can be added to this variable: */
/* This variable controls the background colors generated in the ACF background_color field and the background color classes - bg-white, bg-neutral-10, etc: */
/* This variable controls the default text color on a light background. Used with paint(text) to generate a CSS variable that changes to use background font colors. */
/* If a background color uses a different font color than the default color, use these variables to specify the alternate colors */
/* Backgrounds specified in this variable will use the alternative text colors: */
/* Backgrounds specified in this variable will use the alternative button colors: */
/****************
 * Effects
 ****************/
/****************
 * Grid Settings
 ****************/
/****************
 * Block Spacing
 *
 * These variables are based on the "Spacing" rules found in the "Foundations" section in Figma. These control the default spacing between blocks of different colors.
 ****************/
/*
This file can be used for optional additions to the Figma-generated font style mixins in the figma/_figma-font-styles.scss file.

For example, if you want to add styles to the @overline mixin, just create a mixin here called @overline-custom and that CSS will be added to the primary mixin:

@mixin overline-custom() {
	font-weight: 700;
}
*/
:root {
  --viewport-edges: calc(clamp(1.25rem, 0.0714285714rem + 2.4553571429vw, 4rem));
}

@media (min-width: 64rem) {
  :root {
    --viewport-edges: calc(clamp(1.25rem, -1.0657894737rem + 4.8245614035vw, 4rem));
    --column-width: calc(((var(--containerWidth)) - (11 * clamp(1rem, 0.1578947368rem + 1.7543859649vw, 2rem))) / 12);
  }
}
@keyframes progressBarFill {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
.block-hero-slider {
  padding-top: 7.25rem;
  padding-bottom: 0;
  background-color: #003661;
}
@media (max-width: 63.98rem) {
  .block-hero-slider {
    padding-top: calc(4.25rem + var(--alert-bar-height, 0px));
  }
}
@media (min-width: 64rem) {
  .block-hero-slider {
    padding-top: clamp(6.25rem, 4.9107142857rem + 2.7901785714vw, 9.375rem);
    padding-bottom: 3.5rem;
  }
}
.block-hero-slider[data-auto-sliding=false] .block-hero-slider__pagination-button.active .block-hero-slider__pagination-button-progress-bar {
  background-color: #fff;
}
.block-hero-slider > .container {
  position: relative;
  display: grid;
  grid-template-rows: 4fr;
  grid-template-columns: 1fr;
}
@media (min-width: 64rem) {
  .block-hero-slider > .container {
    grid-template-columns: repeat(12, 1fr);
    column-gap: clamp(1rem, 0.1578947368rem + 1.7543859649vw, 2rem);
  }
}
.block-hero-slider.initialized .block-hero-slider__content-slides {
  height: var(--content-height);
}
.block-hero-slider.initialized .block-hero-slider__content-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.block-hero-slider__content-slides {
  position: relative;
}
@media (max-width: 63.98rem) {
  .block-hero-slider__content-slides {
    order: 0;
  }
}
@media (min-width: 64rem) {
  .block-hero-slider__content-slides {
    grid-column: span 6;
  }
}
.block-hero-slider__content-slide {
  z-index: 2;
  transition: opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1), transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.block-hero-slider__content-slide[aria-hidden=true] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: translateY(7%);
  pointer-events: none !important;
}
.block-hero-slider__content-slide.transition-out {
  opacity: 0;
  transform: translateY(7%);
}
.block-hero-slider__content-slide.transition-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 200ms ease-in-out 450ms, transform 200ms ease-in-out 450ms;
}
.block-hero-slider__content-slide-overline {
  font-weight: var(--overline-font-weight);
  font-size: var(--overline-font-size);
  font-family: var(--overline-font-family);
  line-height: var(--overline-line-height);
  letter-spacing: var(--overline-letter-spacing);
  text-transform: var(--overline-text-transform);
  position: relative;
  display: block;
  padding-left: 1.5rem;
  color: #fff;
}
.block-hero-slider__content-slide-overline::before {
  position: absolute;
  top: 0.1875rem;
  left: 0;
  content: "";
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  background-color: #78acdd;
}
.block-hero-slider__content-slide-header {
  margin: 0.5rem 0rem;
  color: #fff;
  font-weight: 700;
  font-size: clamp(2.5rem, 2.2857142857rem + 0.4464285714vw, 3rem);
  line-height: 1.1;
}
@media (min-width: 64rem) {
  .block-hero-slider__content-slide-header {
    margin: 1rem 0rem;
  }
}
.block-hero-slider__content-slide-description {
  font-weight: var(--body-1-font-weight);
  font-size: var(--body-1-font-size);
  font-family: var(--body-1-font-family);
  line-height: var(--body-1-line-height);
  color: #fff;
}
.block-hero-slider__mobile-image-pagination-container {
  order: 2;
  display: grid;
}
@media (min-width: 64rem) {
  .block-hero-slider__mobile-image-pagination-container {
    display: contents;
  }
}
@media (max-width: 63.98rem) {
  .block-hero-slider__image-slides-container {
    position: relative;
    order: 3;
    margin: 0rem -1.25rem;
  }
}
@media (min-width: 48rem) and (max-width: 74.98rem) {
  .block-hero-slider__image-slides-container {
    margin: 0 clamp(-4rem, 1.0657894737rem + -4.8245614035vw, -1.25rem);
  }
}
@media (min-width: 992px) and (max-width: 1023px) {
  .block-hero-slider__image-slides-container {
    margin: 0 calc(clamp(-4rem, 1.0657894737rem + -4.8245614035vw, -1.25rem) - ((100vw - 992px) / 2));
  }
}
@media (min-width: 64rem) {
  .block-hero-slider__image-slides-container {
    grid-row: span 2;
    grid-column: 9/13;
    position: relative;
    margin-top: clamp(-9.375rem, -4.9107142857rem + -2.7901785714vw, -6.25rem);
    margin-right: 0;
    margin-bottom: -3.5rem;
    margin-left: 0;
  }
}
@media (min-width: 64rem) {
  .block-hero-slider__image-slides {
    position: relative;
    width: calc(100% + var(--viewport-edges));
    height: 100%;
    padding: 0;
    overflow: hidden;
  }
}
@media (min-width: 1440px) {
  .block-hero-slider__image-slides {
    width: calc(100% + (var(--vw) * 100 - var(--containerMaxWidth)) / 2);
  }
}
@media (min-width: 64rem) {
  .block-hero-slider__image-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1);
    transition-duration: 750ms;
  }
}
@media (max-width: 63.98rem) {
  .block-hero-slider__image-slide[aria-hidden=false] {
    display: block;
  }
}
.block-hero-slider__image-slide[aria-hidden=true] {
  opacity: 0;
}
@media (max-width: 63.98rem) {
  .block-hero-slider__image-slide[aria-hidden=true] {
    display: none;
  }
}
.block-hero-slider__image-slide.transition-out {
  opacity: 0;
}
.block-hero-slider__image-slide.transition-in {
  opacity: 1;
}
.block-hero-slider__image-slide picture,
.block-hero-slider__image-slide img,
.block-hero-slider__image-slide video {
  width: 100%;
  vertical-align: bottom;
}
@media (min-width: 64rem) {
  .block-hero-slider__image-slide picture,
.block-hero-slider__image-slide img,
.block-hero-slider__image-slide video {
    height: 100%;
    object-fit: cover;
  }
}
@media (max-width: 63.98rem) {
  .block-hero-slider__image-slide video {
    height: 100%;
    object-fit: cover;
  }
}
.block-hero-slider__small-image-slides {
  display: none;
}
@media (min-width: 64rem) {
  .block-hero-slider__small-image-slides {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 12vw;
    height: auto;
    max-width: 12.625rem;
    transform: translate(-50%, -50%);
    aspect-ratio: 1/2.3047619;
  }
}
.block-hero-slider__image-slide-small {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(0);
  object-fit: cover;
  transition: opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1), transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.block-hero-slider__image-slide-small[aria-hidden=true] {
  opacity: 0;
  transform: translateY(7%);
}
.block-hero-slider__image-slide-small.transition-out {
  opacity: 0;
  transform: translateY(7%);
}
.block-hero-slider__image-slide-small.transition-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 200ms ease-in-out 450ms, transform 200ms ease-in-out 450ms;
}
@media (max-width: 63.98rem) {
  .block-hero-slider__card-slides {
    margin: 2.25rem 0rem 0rem 0rem;
  }
  .block-hero-slider__card-slides:has([aria-hidden=false]) {
    margin: 2.25rem 0rem 3rem 0rem;
  }
}
@media (min-width: 64rem) {
  .block-hero-slider__card-slides {
    position: absolute;
    bottom: 0;
    right: clamp(1.25rem, 0.0714285714rem + 2.4553571429vw, 4rem);
    width: 100%;
    max-width: 14.0625rem;
  }
}
.block-hero-slider__card-slide {
  display: block;
  padding: 1rem;
}
@media (max-width: 63.98rem) {
  .block-hero-slider__card-slide {
    position: relative;
    z-index: 1;
    background-color: rgba(0, 102, 186, 0.9);
    transition: opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1);
    transition-duration: 0ms;
  }
}
@media (min-width: 64rem) {
  .block-hero-slider__card-slide {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    background-color: rgba(0, 54, 97, 0.9);
    transition: opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1), transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
  }
}
@media (max-width: 63.98rem) {
  .block-hero-slider__card-slide[aria-hidden=true] {
    display: none;
  }
}
@media (min-width: 64rem) {
  .block-hero-slider__card-slide[aria-hidden=true] {
    z-index: 1;
    opacity: 0;
    transform: translateY(7%);
  }
}
@media (min-width: 64rem) {
  .block-hero-slider__card-slide.transition-out {
    opacity: 0;
    transform: translateY(7%);
  }
}
@media (min-width: 64rem) {
  .block-hero-slider__card-slide.transition-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 200ms ease-in-out 450ms, transform 200ms ease-in-out 450ms;
  }
}
.block-hero-slider__card-slide-overline {
  font-weight: var(--overline-font-weight);
  font-size: var(--overline-font-size);
  font-family: var(--overline-font-family);
  line-height: var(--overline-line-height);
  letter-spacing: var(--overline-letter-spacing);
  text-transform: var(--overline-text-transform);
  position: relative;
  display: block;
  padding-left: 1.5rem;
  color: #fff;
}
.block-hero-slider__card-slide-overline::before {
  position: absolute;
  top: 0.1875rem;
  left: 0;
  content: "";
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  background-color: #78acdd;
}
.block-hero-slider__card-slide-header {
  font-weight: var(--title-2-font-weight);
  font-size: var(--title-2-font-size);
  font-family: var(--title-2-font-family);
  line-height: var(--title-2-line-height);
  display: block;
  margin-top: 0.8125rem;
  color: #fff;
}
.block-hero-slider__pagination {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  column-gap: 1rem;
}
@media (max-width: 63.98rem) {
  .block-hero-slider__pagination {
    order: 1;
    margin-top: 2.25rem;
  }
}
@media (min-width: 64rem) {
  .block-hero-slider__pagination {
    grid-column: span 7;
    margin-top: 3rem;
  }
}
.block-hero-slider__pagination-button {
  position: relative;
  padding: 0;
  border: none;
  background: transparent;
}
@media (max-width: 63.98rem) {
  .block-hero-slider__pagination-button {
    padding: 0.75rem 0rem;
  }
}
.block-hero-slider__pagination-button:hover .block-hero-slider__pagination-button-image img {
  transform: translateY(0) !important;
}
.block-hero-slider__pagination-button:hover .block-hero-slider__pagination-button-label {
  opacity: 1;
}
.block-hero-slider__pagination-button.active .block-hero-slider__pagination-button-progress-bar::before {
  animation: progressBarFill var(--auto-slide-duration, 5000ms) linear forwards;
}
.block-hero-slider__pagination-button.active .block-hero-slider__pagination-button-label {
  opacity: 1;
}
.block-hero-slider__pagination-button-image {
  position: relative;
  display: block;
  margin-bottom: 0.75rem;
  overflow: hidden;
  aspect-ratio: 1/0.56;
}
@media (max-width: 63.98rem) {
  .block-hero-slider__pagination-button-image {
    display: none;
  }
}
.block-hero-slider__pagination-button-image img {
  width: 100%;
  height: 100%;
  transform: translateY(101%);
  object-fit: cover;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.block-hero-slider__pagination-button-progress-bar {
  position: relative;
  display: block;
  width: 100%;
  height: 0.25rem;
  background-color: rgba(255, 255, 255, 0.5);
}
.block-hero-slider__pagination-button-progress-bar::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 0;
  height: 100%;
  background-color: #fff;
  transition: none;
}
.block-hero-slider__pagination-button-label {
  font-weight: var(--subtitle-3-font-weight);
  font-size: var(--subtitle-3-font-size);
  font-family: var(--subtitle-3-font-family);
  line-height: var(--subtitle-3-line-height);
  text-decoration: var(--subtitle-3-text-decoration);
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  color: #fff;
  text-decoration: none;
  opacity: 0;
  transform: translateY(calc(100% + 0.5rem));
  transition: opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
@media (max-width: 63.98rem) {
  .block-hero-slider__pagination-button-label {
    display: none;
  }
}