/* Light Carousel v1.0.0 | (c) 2015 Taisuke J | This project is released under the MIT license. */

/*-------------------------------------------------------------------------------------------*/
/* Settings (tweek it for your use) */
/*-------------------------------------------------------------------------------------------*/

.caption {
    background: #003580;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-family: Questrial, sans-serif;
}

.thumbnails li {
    width: 10%;
    padding: 3px;
}

@media screen and (max-width: 767px) {
    .thumbnails li {
        width: 20%;
        padding: 3px;
    }
}

.thumbnails .selected div:before {
    border-color: #e57649;
    background: #e57649;
}


/*-------------------------------------------------------------------------------------------*/
/* Core CSS */
/*-------------------------------------------------------------------------------------------*/
@font-face {
    font-family: 'Questrial';
}

.carousel {
    position: relative;
    overflow: hidden;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

    .carousel ul {
        list-style: none;
        margin: 0;
        padding: 0;
        width:100%;
        display:block;
    }
     .carousel ul li img{
        width:100%;
        height:auto;

     }
    .carousel li {
        opacity: 0;
        filter: alpha(opacity=0);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        -webkit-transition: 0.4s linear;
        transition: 0.4s linear;
    }

        .carousel li:first-child {
            opacity: 1;
            filter: alpha(opacity=100);
        }

        .carousel li.current {
            opacity: 1;
            filter: alpha(opacity=100);
        }


.caption {
    opacity: 0;
    -webkit-transform: translate3d(30px, 0, 0);
    transform: translate3d(30px, 0, 0);
    position: absolute;
    right: 0;
    bottom: 10px;
    width: 50%;
    padding: 20px 30px;
    font-size: 14px;
    -webkit-transition: 0.6s 0.8s;
    transition: 0.6s 0.8s;
}

@media screen and (max-width: 767px) {
    .caption {
        bottom: 0;
        width: 100%;
        padding: 15px 15px;
        font-size: 14px;
    }
}

@media screen and (max-width: 400px) {
    .caption {
        padding: 10px 15px;
        font-size: 14px;
    }
}

.caption span {
    display: block;
    opacity: 0;
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
    -webkit-transition: 0.6s 1.2s;
    transition: 0.6s 1.2s;
}

.current .caption,
.current .caption span {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.mobile .controls {
    display: none;
}

.carousel:hover .prev,
.carousel:hover .next {
    opacity: 0.8;
    filter: alpha(opacity=80);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

    .carousel:hover .prev:hover,
    .carousel:hover .next:hover {
        opacity: 0.5;
        filter: alpha(opacity=50);
    }

.prev {
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    right: 50px;
    top: 10%;
    line-height: 1;
    margin-top: -35px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #fff;
}

    .prev:before {
        display: block;
        color: #fff;
        font-family: Questrial, sans-serif;
        content: "\f104";
    }

.next {
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    right: 10px;
    top: 10%;
    line-height: 1;
    margin-top: -35px;
    font-size: 70px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #fff;
}

    .next:before {
        display: block;
        color: #fff;
        font-family: Questrial, sans-serif;
        content: "\f105";
    }

.thumbnails {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .thumbnails ul {
        overflow: hidden;
        list-style: none;
        margin: 0;
        padding: 3px;
    }

    .thumbnails li {
        float: left;
    }

    .thumbnails div {
        position: relative;
        background: #fff;
    }

    .thumbnails .selected div:before {
        display: block;
        position: absolute;
        left: -6px;
        top: -6px;
        width: 100%;
        height: 100%;
        border-width: 6px;
        border-style: solid;
        content: "";
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

    .thumbnails img {
        display: block;
        position: relative;
        z-index: 10;
        width: 100%;
        height: auto;
        border: none;
        vertical-align: bottom;
        cursor: pointer;
        -webkit-transform: translateZ(0); /* bug fix for chrome */
        -webkit-transition: 0.4s;
        transition: 0.4s;
    }

        .thumbnails img:hover {
            opacity: 0.7;
            filter: alpha(opacity=70);
        }

    .thumbnails .selected img {
        cursor: default;
    }

        .thumbnails .selected img:hover {
            opacity: 1;
            filter: alpha(opacity=100);
        }