/*=========================================
            LUNA SWIPER
=========================================*/

div.luna_swiper1 {

    position: relative;
    overflow: hidden;
    background: #000;

}

/*=========================================
            MAIN SLIDER
=========================================*/

div.luna_swiper1 .hero_slider,
div.luna_swiper1 .hero_slider .swiper-slide {

    height: 600px;

}

div.luna_swiper1 .hero_slider .swiper-wrapper {

    align-items: center;          /* Default: stretch */

}

div.luna_swiper1 .hero_slider .swiper-slide {

    width: auto !important;       /* Default: 100% */
    flex-shrink: 0;               /* Default: 1 */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;

}

div.luna_swiper1 picture {

    display: block;
    width: auto;
    height: 100%;
    line-height: 0;

}

div.luna_swiper1 .hero_image {

    display: block;
    width: auto;
    height: 100%;
    max-width: none;              /* Default: 100% */

}

/*=========================================
            NAVIGATION
=========================================*/

div.luna_swiper1 .hero_navigation {

    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;

}

div.luna_swiper1 .hero_prev,
div.luna_swiper1 .hero_next {

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgba(0,0,0,.6);
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
    transition: .3s;

}

div.luna_swiper1 .hero_prev {

    left: 20px;

}

div.luna_swiper1 .hero_next {

    right: 20px;

}

div.luna_swiper1 .hero_prev:hover,
div.luna_swiper1 .hero_next:hover {

    background: #000;

}

/*=========================================
        PAGINATION + PLAY
=========================================*/

div.luna_swiper1 .hero_bottom_controls {

    position: absolute;
    left: 50%;
    bottom: 110px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 20;

}

div.luna_swiper1 .hero_pagination {

    position: static !important;  /* Swiper Default: absolute */
    display: flex !important;     /* Swiper Default: block */

}

div.luna_swiper1 .hero_pagination .swiper-pagination-bullet {

    width: 10px;                  /* Default: 8px */
    height: 10px;                 /* Default: 8px */
    background: #fff;
    opacity: .5;                  /* Default: 0.2 */

}

div.luna_swiper1 .hero_pagination .swiper-pagination-bullet-active {

    opacity: 1;

}

div.luna_swiper1 .hero_play_pause {

    width: 35px;
    height: 24px;
    border: none;
    border-radius: 38%;
    background: #fff;
    color: #000;
    cursor: pointer;

}

/*=========================================
            THUMBNAILS
=========================================*/

div.luna_swiper1 .hero_thumbs {

    position: absolute;
    left: 50%;
    bottom: 15px;
    transform: translateX(-50%);
    width: 460px;
    max-width: 90%;
    height: 80px;
    overflow: hidden;
    z-index: 20;

}

div.luna_swiper1 .hero_thumbs .swiper-slide {

    height: 100%;
    opacity: .4;                  /* Default: 1 */
    cursor: pointer;
    transition: .3s;

}

div.luna_swiper1 .hero_thumbs .swiper-slide-thumb-active {

    opacity: 1;

}

div.luna_swiper1 .hero_thumb_image {

    width: 100%;
    height: 100%;
    object-fit: cover;            /* Default: fill */
    border-radius: 8px;

}

/*=========================================
            TABLET
=========================================*/

@media (max-width: 991px) {

    div.luna_swiper1 .hero_slider,
    div.luna_swiper1 .hero_slider .swiper-slide {

        height: 420px;

    }

    div.luna_swiper1 .hero_thumbs {

        width: 350px;
        height: 60px;

    }

}

/*=========================================
            MOBILE
=========================================*/

@media (max-width: 576px) {

    div.luna_swiper1 .hero_slider,
    div.luna_swiper1 .hero_slider .swiper-slide {

        height: 260px;

    }

    div.luna_swiper1 .hero_navigation div {

        width: 36px;
        height: 36px;

    }

    div.luna_swiper1 .hero_bottom_controls {

        bottom: 80px;

    }

    div.luna_swiper1 .hero_thumbs {

        width: 250px;
        height: 50px;

    }

}