/* ================================================
   HERO BANNERS - SHARED CAROUSEL CONTAINER
   Loaded once on the home page regardless of which
   individual banners (banner1, banner2, ...) are active.
   Do NOT put any single banner's styles in this file -
   see hero_banners/bannerN.css instead.
   ================================================ */

/* Override base .owl-carousel{display:none} so content is visible before JS init */
.owl-hero-slider:not(.owl-loaded) {
    display: block;
}

/* Show first slide immediately before JS initializes */
.owl-hero-slider:not(.owl-loaded) > .item:first-child {
    display: block;
    width: 100%;
}
.owl-hero-slider:not(.owl-loaded) > .item:not(:first-child) {
    display: none;
}

/* Smooth fade-in when owl takes over */
@keyframes owl-hero-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.owl-hero-slider.owl-loaded {
    animation: owl-hero-fadein 0.12s ease forwards;
}

.owl-hero-slider .owl-stage,
.owl-hero-slider .owl-stage-outer,
.owl-hero-slider .owl-item {
    transition: none !important;
    animation: none !important;
}

/* Kill OwlCarousel's autoHeight animated resize (its own .owl-height class
   adds `transition: height .5s ease-in-out`, wherever that class lands -
   outer container or stage) - it read as a fake "loading" delay on the
   first paint. The height snaps instantly instead. */
.owl-hero-slider.owl-height,
.owl-hero-slider .owl-height {
    transition: none !important;
}

.owl-hero-slider .owl-carousel .owl-item img {
    width: auto;
}

.owl-hero-slider .owl-next,
.owl-hero-slider .owl-prev {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: #0005 !important;
    border: none !important;
    top: 45% !important;
    font-size: 25px !important;
}

.owl-hero-slider .owl-next {
    right: 2%;
    left: auto;
}

.owl-hero-slider .owl-prev {
    left: 3%;
    right: auto;
}

.owl-hero-slider .owl-prev i,
.owl-hero-slider .owl-next i {
    color: #fff;
}