/* ==========================================================================
   Hero Slideshow Component Styling (SCSS)
   ========================================================================== */
.hero_slideshow {
  position: relative !important;
}
.hero_slideshow .wp-block-group__inner-container {
  position: relative !important;
  width: 100% !important;
  display: block !important;
}
.hero_slideshow figure.wp-block-image {
  margin: 0 !important;
  opacity: 0;
  transition: opacity 1.5s ease-in-out !important;
  /* Absolute overlap stacking rules */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  /* First slide establishes the container height */
}
.hero_slideshow figure.wp-block-image:first-child {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
}
.hero_slideshow figure.wp-block-image.active-slide {
  opacity: 1 !important;
  z-index: 2 !important;
}
.hero_slideshow figure.wp-block-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* ==========================================================================
   Hero Background Lines Animation (SVG)
   ========================================================================== */
.home_hero {
  position: relative !important;
  overflow: hidden !important;
}
.home_hero .wp-block-group__inner-container {
  position: relative !important;
  z-index: 2 !important;
}
.hero-bg-lines {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.hero-bg-lines .bg-line {
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: drawHeroLine 0.8s cubic-bezier(0.42, 0, 0.58, 1) forwards;
}
.hero-bg-lines .bg-line.bg-line-1 {
  stroke: rgba(87, 213, 250, 0.5) !important;
  stroke-width: 1px !important;
  animation-delay: 0.1s;
}
.hero-bg-lines .bg-line.bg-line-2 {
  stroke: rgba(255, 231, 0, 0.5) !important;
  stroke-width: 1px !important;
  animation-delay: 0.8s;
}
.hero-bg-lines .bg-line.bg-line-3 {
  stroke: rgba(230, 230, 230, 0.5) !important;
  stroke-width: 1px !important;
  animation-delay: 1.5s;
}
.hero-bg-lines .bg-line.bg-line-4 {
  stroke: rgba(230, 230, 230, 0.5) !important;
  stroke-width: 1px !important;
  animation-delay: 2.2s;
}
@keyframes drawHeroLine {
  to {
    stroke-dashoffset: 0;
  }
}