/* home.css */

/*
======================================================================
  FINAL Responsive CSS for Home Page Image Carousel
======================================================================
*/

@media screen and (max-width: 992px) {

    #slider-container {
        width: 100%;
        height: 220px;
        overflow: hidden;
    }

    #loopedSlider,
    #loopedSlider .container,
    #loopedSlider .slides,
    #loopedSlider .slides > div {
        width: 100% !important;
        height: 100% !important;
        position: relative;
        top: auto;
        left: auto;
    }

    #loopedSlider .slides img {
        width: 100%;
        height: 100%;
        image-rendering: -webkit-optimize-contrast;
    }

    #loopedSlider .previous,
    #loopedSlider .next {
        display: none;
    }

    #loopedSlider ul.pagination {
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }
}

@media screen and (max-width: 480px) {
    #slider-container {
        height: 180px;
    }
}