﻿.slider-container {
    position: relative;
    overflow: hidden;
}

#desktopBanner,
#mobileBanner {
    margin: auto;
    position: relative;
    overflow: hidden;
    width: 100%;
    list-style-type: none;
    padding: 0;
}

#desktopBanner li,
#mobileBanner li {
    margin: 0;
    padding: 0;
    display: none;
}

#desktopBanner li > a,
#mobileBanner li > a {
    outline: none;
}

#desktopBanner li > a img,
#mobileBanner li > a img {
    border: none;
}

#desktopBanner img,
#mobileBanner img {
    max-width: 100%;
    display: block;
}

#desktopBannerArrows a,
#mobileBannerArrows a {
    font-size: 50px;
    color: #fff;
    opacity: .5;
    text-shadow: 0 0 30px #000;
    transition: all .3s;
}

#desktopBannerArrows a:hover,
#mobileBannerArrows a:hover {
    opacity: 1;
}

#previousSlideDes,
#previousSlideMob {
    position: absolute;
    top: calc(50% - 37.5px);
    left: 100px;
}

#nextSlideDes,
#nextSlideMob {
    position: absolute;
    top: calc(50% - 37.5px);
    right: 100px;
}

/* ANIMATION CSS */
.sb-perspective {
    position: relative;
}

.sb-perspective > div {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.sb-side {
    margin: 0;
    display: block;
    position: absolute;
    -moz-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
/* ANIMATION CSS */

@media (max-width: 991px) {
    #desktopBannerArrows a,
    #mobileBannerArrows a {
        font-size: 48px;
        opacity: .7;
    }

    #previousSlideDes,
    #previousSlideMob {
        top: calc(50% - 36px);
        left: 50px;
    }

    #nextSlideDes,
    #nextSlideMob {
        top: calc(50% - 36px);
        right: 50px;
    }
}

@media (max-width: 767px) {
    #desktopBannerArrows a,
    #mobileBannerArrows a {
        font-size: 44px;
    }

    #previousSlideDes,
    #previousSlideMob {
        top: calc(50% - 33px);
    }

    #nextSlideDes,
    #nextSlideMob {
        top: calc(50% - 33px);
    }
}

@media (max-width: 575px) {
    #desktopBannerArrows a,
    #mobileBannerArrows a {
        font-size: 40px;
    }

    #previousSlideDes,
    #previousSlideMob {
        top: calc(50% - 30px);
        left: 30px;
    }

    #nextSlideDes,
    #nextSlideMob {
        top: calc(50% - 30px);
        right: 30px;
    }
}