/* sm */
@media (max-width: 400px) {

    .top-area p {
        display: none;
    }

    #home-slider {
        height: 400px;
    }

    img {
        max-width: 100%;
        height: auto;
    }
}


/* xs */
@media (max-width: 767px) {
   

    body {
        font-size: 13px;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    #home-slider {
        height: auto;
        max-height: 450px;
    }

        #home-slider .caption h1 {
            font-size: 40px;
        }

        #home-slider .caption {
            font-size: 15px;
            padding: 0 30px;
        }

        #home-slider:hover .right-control {
            right: 15px;
        }

        #home-slider:hover .left-control {
            left: 15px;
        }

    .carousel-fade .carousel-inner .item {
        height: 300px;
    }

    .left-control, .right-control {
        font-size: 20px;
        height: 30px;
        line-height: 25px;
        width: 30px;
    }

    .caption .btn-start {
        font-size: 12px;
        padding: 10px 30px;
    }

    .navbar-brand {
        padding: 0 15px 15px;
    }

    .navbar-toggle {
        border: 1px solid #346a91;
    }

        .navbar-toggle .icon-bar {
            background-color: #346a91;
        }

    .dropdown-menu span {
        width: 100%;
    }


    .navbar li a {
        font-size: 12px;
        padding-bottom: 8px;
        padding-top: 10px;
    }

    #footer .footer-bottom {
        text-align: center;
    }

    .footer-bottom p.pull-right {
        float: none !important;
    }

    .router-image {
        max-width: 300px;
        padding: 5px;
        display: block;
    }
}

@media only screen and (max-width: 700px) {
    /* Force table to not be like tables anymore */
    #no-more-tables table,
    #no-more-tables thead,
    #no-more-tables tbody,
    #no-more-tables th,
    #no-more-tables td,
    #no-more-tables tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        #no-more-tables thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    #no-more-tables tr {
        border: 1px solid #ccc;
    }

    #no-more-tables td {
        /* Behave like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        /*padding-left: 50%;*/
        white-space: normal;
        text-align: left;
    }

        #no-more-tables td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            /*width: 45%;*/
            padding-right: 10px;
            white-space: nowrap;
            text-align: left;
            font-weight: bold;
        }

        /*
        Label the data 
        */
        #no-more-tables td:before {
            content: attr(data-title);
        }

    /* Force table to not be like tables anymore */
    #no-more-tables-header table,
    #no-more-tables-header thead,
    #no-more-tables-header tbody,
    #no-more-tables-header th,
    #no-more-tables-header td,
    #no-more-tables-header tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        #no-more-tables-header thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    #no-more-tables-header tr {
        border: 1px solid #ccc;
    }

    #no-more-tables-header td {
        /* Behave like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 70%;
        white-space: normal;
        text-align: left;
    }

        #no-more-tables-header td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 65%;
            padding-right: 10px;
            white-space: nowrap;
            text-align: left;
            font-weight: bold;
        }

        /*
        Label the data
        */
        #no-more-tables-header td:before {
            content: attr(data-title);
        }


    /* Force table to not be like tables anymore */
    .no-more-tables table,
    .no-more-tables thead,
    .no-more-tables tbody,
    .no-more-tables th,
    .no-more-tables td,
    .no-more-tables tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        .no-more-tables thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    .no-more-tables tr {
        border: 1px solid #ccc;
    }

    .no-more-tables td {
        /* Behave like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        /*padding-left: 50%;*/
        white-space: normal;
        text-align: left;
    }

        .no-more-tables td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            /*width: 45%;*/
            padding-right: 10px;
            white-space: nowrap;
            text-align: left;
            font-weight: bold;
        }

    /*
        Label the data
        */
    /*.no-more-tables td:before { content: attr(data-title); }*/
}