@charset "utf-8";

/* ------------------------------- 1. Resets ------------------------------- */

#fwslider {
    position: relative;
    background: #e0dcd5;
    width: 100%;
    max-height: 503px;
    overflow: hidden;
}

    #fwslider .slider_container {
    }

    #fwslider .slide {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 100%;
    }

        #fwslider .slide img {
            width: 100%;
            float: left;
        }

    #fwslider .slidePrev {
        background: #000;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: -50px;
        opacity: 0.2;
        z-index:99;
    }

        #fwslider .slidePrev span {
            background-image: url("../images/left_arrow.png");
            width: 50px;
            height: 50px;
            float: left;
            background-position: 50% 50%;
            background-repeat: no-repeat;
            cursor: pointer;
        }

    #fwslider .slideNext {
        background: #000;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        right: -50px;
        opacity: 0.2;
        z-index:99;
    }

        #fwslider .slideNext span {
            background-image: url("../images/right_arrow.png");
            width: 50px;
            height: 50px;
            float: left;
            background-position: 50% 50%;
            background-repeat: no-repeat;
            cursor: pointer;
        }

    #fwslider .timers {
        height: 4px;
        position: absolute;
        bottom: 15px;
        right: 0;
        z-index: 3;
    }

    #fwslider .timer {
        height: 4px;
        width: 40px;
        background-color: #000;
        float: left;
        margin-right: 10px;
    }

    #fwslider .progress {
        height: 4px;
        width: 0%;
        background-color: #0a94c5;
        float: left;
    }

    #fwslider .slide_content {
        top:100px;
        left: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: left;
        font-size:24px;
    }

    #fwslider .slide_content_wrap { /* Slider Text Content Container Style */
        max-width: 1280px;
        margin: 15% auto;
    }

    #fwslider .title { /* Slider Title Style */
        opacity: 0;
        color: #fff;
        font-size: 36px;
        background: #000;
        padding: 10px;
        float: left;
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 400;
    }

    #fwslider .description { /* Slider Description Style */
        opacity: 0;
        color: #FC3;
        font-size: 18px;
        background: #000;
        padding: 10px;
        clear: both;
        float: left;
        margin-top: 2px;
        line-height: 24px;
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 400;
    }

    #fwslider .readmore { /* Slider Read More button Style */
        opacity: 0;
        clear: both;
        float: left;
        text-transform: uppercase;
        font-size: 10px;
        color: #919191;
        background: #000;
        padding: 10px;
        text-decoration: none;
        margin-top: 2px;
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 400;
    }

        #fwslider .readmore:hover {
            color: #fff;
        }

.footer {
    width: 100%;
    float: left;
    text-align: center;
}

    .footer p {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        color: #585858;
        margin-top: 20px;
    }


/* ------------------------------- 3. Media Query Max Width 1400, Min Width 720 ------------------------------- */



@media only screen and (min-width:720px) and (max-width: 1400px) {

    #fwslider .slide_content_wrap {
        margin-left: 75px;
        margin-top: 15%;
    }

    #fwslider .title {
        font-size: 26px;
    }

    #fwslider .description {
        font-size: 12px;
    }
}

/* ------------------------------- 4. Media Query Max Width 719 ------------------------------- */

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

    #fwslider .slide_content_wrap {
        margin: 0 auto;
        height: 100%;
    }

        #fwslider .slide_content_wrap h4,
        #fwslider .slide_content_wrap p {
            display: none;
        }

        #fwslider .slide_content_wrap a {
            background: none;
            font-size: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            float: left;
        }


    #fwslider .timers {
        display: none;
    }

    #fwslider .slide_content {
        cursor: pointer;
    }
}