@import url("css2-Robotowght400900_swap.css");
/**
 * THE FUTURE IS OPEN HERO
 * `sc-fio-hero` — Apply to content row. 
 *  - H1 Level headlines will default to FIO style (with optional vertical line)
 *  - Applies gateway to the *first* background image
 */
.sc-fio-hero h1 {
  font-family: Roboto, Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  line-height: 0.9em !important;
  position: relative;
  font-size: clamp(32px, 5vw, 8rem) !important;
  margin: 0 auto;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.sc-fio-hero .wp-block-heading.redpill h1:after,
.sc-fio-hero h1.redpill:after {
  background: #caccd1 !important;
  min-width: 2px !important;
  max-width: 2px !important;
  border-radius: 0 !important;
  height: calc(100% - 0.25em) !important;
  top: 0.125em !important;
}

.sc-fio-hero > .row > div > div > div > div > .row > div > div > div > div > .col-body > .col-wallpaper,
.sc-fio-hero > .row > .wp-block-spark-columns > .row > .wp-block-spark-column > .col-body > .col-wallpaper {
  width: 50%;
  margin-left: auto;
}

.sc-fio-hero > .row > div > div > div > div > .row > div > div > div > div > .col-body > .col-wallpaper:after,
.sc-fio-hero > .row > .wp-block-spark-columns > .row > .wp-block-spark-column > .col-body > .col-wallpaper:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-image: url(../image/gateway-white-no-animation.svg);
  background-size: 200%;
  background-position: 20% 45%;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .sc-fio-hero > .row > .wp-block-spark-columns > .row > .wp-block-spark-column > .col-body > .col-wallpaper {
    opacity: 0.25;
    width: 85%;
  }

  .sc-fio-hero > .row > div > div > div > div > .row > div > div > div > div > .col-body > .col-wallpaper,
.sc-fio-hero > .row > .wp-block-spark-columns > .row > .wp-block-spark-column > .col-body > .col-wallpaper {
    max-height: 100vw;
  }
}
.sc-fio-product-hero {
  background: #e1e2e5;
}

.sc-fio-product-hero > .row > div > div > div > div > .row > div > div > div > div > .col-body > .col-wallpaper,
.sc-fio-product-hero > .row > .wp-block-spark-columns > .row > .wp-block-spark-column > .col-body > .col-wallpaper {
  width: 55%;
  margin-left: auto;
}

.sc-fio-product-hero > .row > div > div > div > div > .row > div > div > div > div > .col-body > .col-wallpaper:after,
.sc-fio-product-hero > .row > .wp-block-spark-columns > .row > .wp-block-spark-column > .col-body > .col-wallpaper:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-image: url(../image/gateway-grey-no-animation.svg);
  background-size: 200%;
  background-position: 20% 45%;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .sc-fio-product-hero > .row > .wp-block-spark-columns > .row > .wp-block-spark-column > .col-body > .col-wallpaper {
    opacity: 0.25;
    width: 85%;
  }

  .sc-fio-product-hero > .row > div > div > div > div > .row > div > div > div > div > .col-body > .col-wallpaper,
.sc-fio-product-hero > .row > .wp-block-spark-columns > .row > .wp-block-spark-column > .col-body > .col-wallpaper {
    max-height: 100vw;
  }
}
.sc-fio-product-hero .wp-block-spark-breadcrumbs .entry-breadcrumbs {
  color: #121315;
}

.sc-fio-product-hero .wp-block-spark-breadcrumbs .entry-breadcrumbs a {
  color: inherit !important;
}

/*# sourceMappingURL=spark.fio.css.map */