@charset "utf-8";

/* Hero slider layout only. mv-fade.css and mv-carousel.css load after this and override dots/visuals. */
/* Viewport: [1/2][1][1/2]; desktop + mobile sliders */

.hero-slider-outer {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #ffffff;
}

/* Add top padding only for the homepage hero wrapper */
.ec-sliderRole.hero-slider-outer {
  padding-top: 120px;
}

.hero-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #ffffff;
}

.hero-slider--desktop {
  display: block;
  height: 26.87vw;
  min-height: 196px;
  max-height: 369px;
}

/* Desktop: visible 769px and up */
@media (max-width: 768px) {
  .hero-slider--desktop {
    display: none;
  }
}

.hero-slider--mobile {
  display: none;
}

/* Mobile: visible 768px and down */
@media (max-width: 768px) {
  .ec-sliderRole.hero-slider-outer {
    padding-top: 0;
  }
  .hero-slider--mobile {
    display: block;
    height: 26.87vw;
    min-height: 246px;
    max-height: 480px;
  }
}

.hero-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  height: 100%;
  transition: transform 0.5s ease;
  will-change: transform;
  background: #ffffff;
}

.hero-slide {
  flex: 0 0 50vw;
  width: 50vw;
  min-width: 50vw;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.hero-slide a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  display: block;
}
@media (min-width: 769px) and (max-width: 900px) {
  .ec-sliderRole.hero-slider-outer {
    padding-top: 70px;
  }
}