sl-mandic-history-carousel {
    display: block;
    width: 100%;
    height: 430px;
    max-width: 1200px;
    opacity: 0;
    margin: 0 auto;
    position: relative;
}

sl-mandic-history-carousel.ready { opacity: 1; }
sl-mandic-history-carousel ul { list-style-type: none; }

sl-mandic-history-carousel div.top-swiper-wrapper {
    width: 92.5%;
    height: 36px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

sl-mandic-history-carousel div.top-swiper {
    border-bottom: 3px solid #ccc;
    height: 32px;
}

sl-mandic-history-carousel div.top-swiper ul { right: 39px; }

sl-mandic-history-carousel div.top-swiper li.swiper-slide {
    font-size: 1.4em;
    text-transform: uppercase;
    white-space: nowrap;
}

sl-mandic-history-carousel div.top-swiper li.swiper-slide div {
    display: table;
    margin: 0 auto;
}

sl-mandic-history-carousel div.top-swiper li.swiper-slide-active {
    font-weight: 900;
}

sl-mandic-history-carousel div.top-swiper li.swiper-slide-active div:after {
    content: "#";
    font-size: 0;
    display: block;
    height: 5px;
    width: 100%;
    background-color: #F8D162;
    position: relative;
    bottom: 6px;
}

sl-mandic-history-carousel select.mobile-nav { display: none; }

sl-mandic-history-carousel div.top-swiper-nav {
    width: 100%;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
}

sl-mandic-history-carousel div.top-swiper-nav .swiper-button-prev,
sl-mandic-history-carousel div.top-swiper-nav .swiper-button-next {
    position: absolute;
    left: auto;
}

sl-mandic-history-carousel div.top-swiper-nav .swiper-button-prev { right: 98%; }
sl-mandic-history-carousel div.top-swiper-nav .swiper-button-next { left: 98%; }

sl-mandic-history-carousel div.top-swiper-nav .swiper-button-prev:after,
sl-mandic-history-carousel div.top-swiper-nav .swiper-button-next:after {
    background: url("/wp-content/plugins/elementor-slmandic-addon/assets/images/top-arrow-right.png")
        no-repeat 0 0 / 100% 100%;
    font-size: 0;
    height: 32px;
    width: 18px;
}

sl-mandic-history-carousel div.top-swiper-nav .swiper-button-prev:after { transform: rotate(180deg); }



sl-mandic-history-carousel div.bottom-swiper-wrapper {
    width: 93.8%;
    margin: 50px auto 0;
    overflow: hidden;
    position: relative;
}

sl-mandic-history-carousel div.bottom-swiper {
    position: relative;
    right: 40px;
}

sl-mandic-history-carousel li.swiper-slide div.year-events {
    min-height: 224px;
    display: none;
    margin: 32px 0 60px;
    width: 100%;
    position: relative;
}

sl-mandic-history-carousel div.year-events h2 {
    margin-bottom: 14px;
    font-size: 2.6em;
}

sl-mandic-history-carousel div.year-events div.descriptions { width: 89.5%; }

sl-mandic-history-carousel div.year-events h3,
sl-mandic-history-carousel div.year-events h3 + p { padding-left: 6px; }

sl-mandic-history-carousel div.year-events h3 { margin-bottom: 12px; }
sl-mandic-history-carousel div.year-events h3 + p { margin-bottom: 54px; }

sl-mandic-history-carousel div.bottom-swiper-wrapper li.swiper-slide { overflow: visible; }

sl-mandic-history-carousel div.bottom-swiper-wrapper li.swiper-slide img {
    width: 100%;
    height: 100%;
    display: block;
}

sl-mandic-history-carousel li.swiper-slide-active { z-index: 1; }

sl-mandic-history-carousel li.swiper-slide-active div.year-events {
    display: block;
    width: 78.2%;
    margin: 0 0 0 4.4%;
    bottom: 10px;
}

sl-mandic-history-carousel div.bottom-swiper-wrapper li.swiper-slide-prev,
sl-mandic-history-carousel div.bottom-swiper-wrapper li.swiper-slide-next { position: relative; }

sl-mandic-history-carousel div.bottom-swiper-wrapper li.swiper-slide-prev { right: 0; }
sl-mandic-history-carousel div.bottom-swiper-wrapper li.swiper-slide-next { left: 0; }


sl-mandic-history-carousel div.bottom-swiper-wrapper li.swiper-slide-active a.button-1,
sl-mandic-history-carousel div.bottom-swiper-wrapper li.swiper-slide-active a.button-2 {
    display: inline-block;
    padding: 10px 0;
    border-radius: 8px;
    width: 280px;
    text-align: center;
    font-weight: 600;
}

sl-mandic-history-carousel div.bottom-swiper-wrapper div.nav-desktop {
    position: absolute;
    width: 122px;
    height: 48px;
    top: 64px;
    right: 6.1%;
    z-index: 1;
    font-family: "swiper-icons";
}

sl-mandic-history-carousel div.bottom-swiper-wrapper div.nav-desktop a.swiper-button-prev,
sl-mandic-history-carousel div.bottom-swiper-wrapper div.nav-desktop a.swiper-button-next {
    position: static;
    display: inline-block;
    height: 48px;
    width: 48px;
    border-radius: 26px;
}

sl-mandic-history-carousel div.bottom-swiper-wrapper div.nav-desktop a.swiper-button-prev {
    background-color: #FBFBFB;
    transform: rotate(180deg);
    margin-right: 22px;
}

sl-mandic-history-carousel div.bottom-swiper-wrapper div.nav-desktop a.swiper-button-next { background-color: #F6D400; }

sl-mandic-history-carousel div.bottom-swiper-wrapper div.nav-desktop a.swiper-button-prev:after,
sl-mandic-history-carousel div.bottom-swiper-wrapper div.nav-desktop a.swiper-button-next:after {
    content: "#";
    font-size: 0;
    display: inline-block;
    height: 26px;
    width: 28px;
    background: url('/wp-content/plugins/elementor-slmandic-addon/assets/images/arrow-right.png') no-repeat 0 0 / 100% 100%;
    vertical-align: super;
    margin-left: 10px;
}


@media screen and (min-width: 100px) and (max-width: 767px) {
    sl-mandic-history-carousel { height: 620px; }

    sl-mandic-history-carousel div.top-swiper-nav {display: none; }

    sl-mandic-history-carousel div.top-swiper-wrapper {
        height: 37px;
        width: 100%;
    }

    sl-mandic-history-carousel select.mobile-nav { display: block; }
    sl-mandic-history-carousel div.bottom-swiper-wrapper li.swiper-slide-prev { right: 6%; }
    sl-mandic-history-carousel div.bottom-swiper-wrapper li.swiper-slide-next { left: 6%; }

    sl-mandic-history-carousel div.bottom-swiper-wrapper {
        width: 100%;
        margin-top: 36px;
        padding-bottom: 37px;
    }

    sl-mandic-history-carousel div.top-swiper ul { right: 18px; }

    sl-mandic-history-carousel li.swiper-slide div.year-events {
        width: 100%;
        margin: 0;
        padding: 0 20px;
        height: 520px;
    }

    sl-mandic-history-carousel li.swiper-slide div.year-events div.descriptions {
        overflow-y: auto;
        height: 406px;
        width: 100%;
    }

    sl-mandic-history-carousel div.year-events h2 { margin-bottom: 16px; }
    sl-mandic-history-carousel div.year-events h3 + p { margin: 32px 0 20px; }

    sl-mandic-history-carousel div.bottom-swiper-wrapper div.nav-desktop {
        top: 474px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    sl-mandic-history-carousel div.bottom-swiper-wrapper li.swiper-slide-active a[class] {
        width: 100%;
        float: unset;
        display: block;
        margin: 0 auto 12px;
    }
}