﻿div#myCarousel {
    height: 408px;
    padding-left: 24px;
    padding-right: 24px;
}

.carousel-inner {
    border-radius: 16px;
}

.carousel-image {
    height: 320px;
    border-radius: 16px;
    max-height: 100%;
    width: auto;
}

.background-none {
    background: none !important;
}

.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
    height: 50px !important;
    width: 35px !important;
    top: 139px !important;
    filter: invert(68%) sepia(99%) saturate(710%) hue-rotate(354deg) brightness(220%) contrast(101%) !important;
}

img.glyphicon-chevron-right {
    transform: rotate(180deg) !important;
    right: 54px !important;
}

img.glyphicon-chevron-left {
    left: 54px !important;
}

.opacity-none {
    opacity: 1 !important;
}

li.carousel-bottom-circles {
    width: 16px !important;
    height: 16px !important;
    margin-left: 3px !important;
    margin-right: 3px !important;
    border-radius: 50% !important;
    border: 0px !important;
    background-color: rgba(255, 193, 7, 1) !important;
}

.carousel-indicators {
    height: 6px !important;
    z-index: 0 !important;
}

@media screen and (min-width: 1921px) {
    div#myCarousel {
        height: 408px;
    }

    .carousel-image {
        height: 380px;
    }
}

@media screen and (max-width:1920px) and (min-width: 1201px) {
    div#myCarousel {
        height: 328px;
    }

    .carousel-image {
        height: 300px;
    }
}

@media screen and (max-width:1200px) and (min-width: 993px) {

    div#myCarousel {
        height: 288px;
    }

    .carousel-image {
        height: 260px;
    }

    carousel-control .glyphicon-chevron-right,
    carousel-control .glyphicon-chevron-left {
        top: 120px !important;
    }
}


@media screen and (max-width:992px) and (min-width: 577px) {
    div#myCarousel {
        height: 288px;
    }

    .carousel-image {
        height: 260px;
    }
}

@media screen and (max-width:576px) and (min-width: 541px) {
    div#myCarousel {
        height: 208px;
    }

    .carousel-image {
        height: 180px;
    }
}

@media screen and (max-width:540px) and (min-width: 391px) {
    div#myCarousel {
        height: 188px;
    }

    .carousel-image {
        height: 160px;
    }
}

@media screen and (max-width:390px) {
    div#myCarousel {
        height: 168px;
    }

    .carousel-image {
        height: 140px;
    }
}