sl-courses-carousel {
    display: block;
    width: 100%;
    max-width: 1280px;
    opacity: 0;
    margin: 0 auto;
    position: relative;
}

sl-courses-carousel.ready { opacity: 1; }

sl-courses-carousel div.top-swiper-wrapper {
    width: 93.8%;
    height: 34px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

sl-courses-carousel div.top-swiper { border-bottom: 3px solid #ccc; }
sl-courses-carousel ul { list-style-type: none; }

sl-courses-carousel div.top-swiper li.swiper-slide {
    font-size: 1em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

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

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

sl-courses-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;
    top: 4px;
}

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

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

sl-courses-carousel div.top-swiper-nav .swiper-button-prev,
sl-courses-carousel div.top-swiper-nav .swiper-button-next { position: absolute; }

sl-courses-carousel div.top-swiper-nav .swiper-button-next { right: 0; }

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

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





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

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

sl-courses-carousel li.swiper-slide div.description {
    min-height: 224px;
    display: none;
    margin: 55px 0 38px;
    width: calc(100% * 1.45);
    position: relative;
    right: 22.4%;
}

sl-courses-carousel div.description h3 { margin-bottom: 52px; }

sl-courses-carousel li.swiper-slide div.buttons {
    display: none;
    width: 592px;
    right: 92px;
    position: relative;
}

sl-courses-carousel li.swiper-slide-active div.buttons { display: block; }
sl-courses-carousel div.bottom-swiper-wrapper li.swiper-slide { overflow: visible; }

sl-courses-carousel div.bottom-swiper-wrapper li.swiper-slide div.media {
    margin-top: 112px;
    overflow: hidden;
    height: 272px;
    width: 388px;
    position: relative;
}

sl-courses-carousel div.bottom-swiper-wrapper li:not(.swiper-slide-active) div.media:before {
    content: "#";
    font-size: 0;
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

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

sl-courses-carousel li.swiper-slide-active { z-index: 1; }
sl-courses-carousel li.swiper-slide-active div.description { display: block; }

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

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

sl-courses-carousel div.bottom-swiper-wrapper li.swiper-slide-prev div.media { border-bottom-left-radius: 20px; }
sl-courses-carousel div.bottom-swiper-wrapper li.swiper-slide-next div.media { border-top-right-radius: 20px; }


sl-courses-carousel div.bottom-swiper-wrapper li.swiper-slide-active div.media {
    z-index: 1;
    position: relative;
    border-radius: 16px;
    border-top-left-radius: 0;
    height: 360px;
    width: 586px;
    right: 23%;
    margin-top: 68px;
}

sl-courses-carousel div.bottom-swiper-wrapper li.swiper-slide-active a.button-1,
sl-courses-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;
    font-family: 'Encode Sans';
    letter-spacing: 0.16px;
    transition: .3s ease;
}

sl-courses-carousel div.bottom-swiper-wrapper li.swiper-slide-active a.button-1 {
    border: 2px solid #F6D400;
    color: #F6D400;
    margin-right: 4.4%;
}

sl-courses-carousel div.bottom-swiper-wrapper li.swiper-slide-active a.button-1:hover {
    border: 2px solid #F8CA0F;
    background-color: transparent;
    color: #F8CA0F;
}

sl-courses-carousel div.bottom-swiper-wrapper li.swiper-slide-active a.button-2 {
    background-color: #F6D400;
    color: #655F4A;
}

sl-courses-carousel div.bottom-swiper-wrapper li.swiper-slide-active a.button-2:hover {
    background-color: #F8CA0F;
    color: #243166;
}

sl-courses-carousel div.bottom-swiper-wrapper div.nav-desktop {
    position: absolute;
    width: 100px;
    height: 40px;
    top: 484px;
    right: 25.6%;
    z-index: 1;
}

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

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

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

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

sl-courses-carousel li.swiper-slide-active div.video a.play-button {
    display: block;
    height: 63px;
    width: 55px;
    background: url("/wp-content/plugins/elementor-slmandic-addon/assets/images/play.svg") no-repeat 0 0 / 100% 100%;
    top: 38.1%;
    left: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
}

sl-courses-carousel li div[class].play a.play-button { display: none; }


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

    sl-courses-carousel div.top-swiper-wrapper {
        height: 50px;
        width: 91.4%;
    }

    sl-courses-carousel div.top-swiper-nav { display: none; }
    sl-courses-carousel div.bottom-swiper-wrapper li.swiper-slide-prev { right: 6%; }
    sl-courses-carousel div.bottom-swiper-wrapper li.swiper-slide-next { left: 6%; }

    sl-courses-carousel div.top-swiper {
        height: 0;
        overflow: hidden;
        border-bottom: unset;
    }

    sl-courses-carousel select.mobile-nav { display: block; }

    sl-courses-carousel .select2-container--default .select2-selection--single {
        height: 50px;
        padding: 10px 0;
        background-color: transparent;
        text-align: center;
        border-color: #FBFBFB;
        border-radius: 10px;
    }

    sl-courses-carousel .select2-container--default .select2-selection--single .select2-selection__rendered { color: #FBFBFB; }

    sl-courses-carousel .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 10px;
        right: 71px;
    }

    sl-courses-carousel .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: #FBFBFB transparent transparent; }



    sl-courses-carousel div.bottom-swiper-wrapper { width: 100%; }

    sl-courses-carousel div.bottom-swiper-wrapper li.swiper-slide div.media {
        margin-top: 44px;
        height: 172px;
    }

    sl-courses-carousel div.bottom-swiper-wrapper li.swiper-slide-active div.media {
        margin-top: 15px;
        border-radius: 20px;
        height: 228px;
        width: 370px;
        width: calc(100% * 2.682);
        right: 83.7%;
    }

    sl-courses-carousel li.swiper-slide div.description {
        margin-top: 117px;
        width: calc(100% * 3.02);
        right: 100%;
        padding: 0 20px;
        min-height: 298px;
    }

    sl-courses-carousel div.description h3 {
        text-align: center;
        margin-bottom: 32px;
    }

    sl-courses-carousel li.swiper-slide div.buttons {
        overflow: hidden;
        height: 110px;
    }

    sl-courses-carousel li.swiper-slide-active div.buttons {
        position: relative;
        width: calc(100% * 2);
        right: 49.6%;
    }

    sl-courses-carousel div.bottom-swiper-wrapper li.swiper-slide-active a.button-1 {
        position: absolute;
        top: 56px;
    }

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

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

    sl-testimonial-carousel li.swiper-slide-active div.video a.play-button {
        transform: scale(0.4);
        top: 7.46%;
    }
}

@media screen and (min-width: 768px) {
    sl-courses-carousel div.bottom-swiper-wrapper li.swiper-slide div.media {
        width: 100%;
        height: 22.69vw;
        max-height: 272px;
        margin-top: 28.1%;
    }

    sl-courses-carousel div.bottom-swiper-wrapper li.swiper-slide-active div.media {
        width: calc(100% * 1.464);
        height: 29.99vw;
        max-height: 360px;
        margin-top: 17%;
    }

    sl-courses-carousel li.swiper-slide div.buttons{ width: calc(100% * 1.479); }

    sl-courses-carousel div.bottom-swiper-wrapper li.swiper-slide-active a.button-1,
    sl-courses-carousel div.bottom-swiper-wrapper li.swiper-slide-active a.button-2 { width: 47.3%; }

    sl-courses-carousel li.swiper-slide div.buttons { right: 22.9%; }

    sl-testimonial-carousel li.swiper-slide-active div.video a.play-button {
        width: 11.7%;
        height: 4.07vw;
    }

    sl-courses-carousel div.bottom-swiper-wrapper div.nav-desktop { top: 42vw; }
}

@media screen and (min-width: 900px) {
    sl-courses-carousel div.bottom-swiper-wrapper div.nav-desktop { top: 41vw; }
}

@media screen and (min-width: 1020px) {
    sl-courses-carousel div.bottom-swiper-wrapper div.nav-desktop { top: 40vw; }
}

@media screen and (min-width: 1210px) {
    sl-courses-carousel div.bottom-swiper-wrapper div.nav-desktop { top: 60%; }
}