/* Responsive for Mobile Device */

@media screen and (max-width:1000px) {
    #featured .col-sm-4:first-child .featured-box{
        right: 10px;
    }
    #featured .col-sm-4:last-child .featured-box{
        left: 10px;
    }
    .f-inner{
        padding: 15px;
    }
}

@media screen and (max-width:900px) {
    #featured .col-sm-4:nth-child(2) .featured-box{
        right: 10px;
        left: 10px;
    }
    .f-inner{
        padding: 5px;
    }
    .main-navigation .col-sm-4:last-child{
        padding-left: 15px;
    }
    .page-content .col-sm-3{
        padding-right: 0;
    }
}
@media screen and (max-width:767px) {
    .main-navigation{
        width: 0;
        height: auto;
        position: fixed;
        top: 0;
        right: 0;
        left: inherit;
        overflow-y: auto;
        padding-top: 40px;
        border-top: 5px solid #2aace2;
    }
    .main-navigation.active{
        width: 90%;
        height: 100%;
    }
    .main-navigation .nav{
        max-width: 100%;
    }
    .main-navigation .nav > li:first-child > a,
    .main-navigation .nav-header{
        font-size: 24px;
        padding-top: 15px;
    }
    .main-navigation li a{
        font-size: 18px;
    }
    .main-navigation .nav{
        min-width: 500px;
    }
    .main-navigation .search .inputbox{
        width: 100%;
        max-width: 400px;
        font-size: 16px;
    }
    .menu-btn{
        text-indent: -999em;
        border-radius: 10%;
        display: block;
        background: url(../images/menu-btn.png) no-repeat center center #a7ce3b;
        transition: all 0.3s ease 0.5s;
    }
    .open-menu  .menu-btn{
        background: url(../images/menu-close.png) no-repeat center center transparent;
    }
    body.open-menu{
        overflow: hidden;
    }
    #home-banner{
        height: auto;
        min-height: 300px;
    }
    #home-banner .container{
        padding: 70px 15px 30px;
    }
    #featured{
        height: auto;
        padding: 40px 0 20px;
    }
    .featured-box{
        position: static;
        margin-bottom: 20px;
    }
    .f-inner{
        padding: 25px 20px;
        min-height: 100%;
    }
    .featured-box h3{
        margin-top: 15px;
    }
    .home-content{
        padding: 30px 0;
    }
    .home-content .btn{
        margin-top: 10px;
    }
    .footer-columns{
        padding: 30px 0;
        text-align: center;
    }
    .footer-columns .col-sm-3{
        width: 45%;
        display: inline-block;
        text-align: left;
        vertical-align: top;
    }
    .copyright{
        height: auto;
    }
    .copyright .col-sm-6{
        float: left;
        width: 50%;
    }
    .footer-columns .nav > li:first-child > a,
    .footer-columns .nav-header, .footer-columns h3{
        max-width: 100%;
    }
    .page-content .col-sm-3{
        border-top: 1px solid #f2f3f4;
    }
    .page-content .col-sm-3,
    .page-content .col-sm-9{
        width: 100%;
    }
    .page-content .col-sm-3 {
        padding-right: 15px;
    }
    .page-content .side-bar{
        padding-top: 20px;
    }
    .side-bar .nav > li{
        display: inline-block;
        width: 31%;
        padding: 0 20px 15px;
        border-bottom: none;
        vertical-align: top;
    }
    .page-content .content{
        padding: 35px 20px 20px;
    }
    #searchForm fieldset{
        padding: 0 30px;
    }

}
@media screen and (max-width:670px) {
    .main-navigation .nav{
        min-width: 350px;
    }
    .home-content .btn{
        float: none;
        max-width: 235px;
        display: block;
        margin: 0 auto;
        margin-top: 30px;
    }
    .page-content .content .btn-info{
        float: none !important;
        display: block;
        margin: 0 auto 20px;
        width: 100%;
        max-width: 400px;
    }
    .side-bar .nav > li{
        width: 49%;
    }
    .page-content .btn + .btn{
        margin-left: 0;
    }
}
@media screen and (max-width:480px){
    header .container{
        height: auto;
        padding: 10px 15px;
    }
    .logo{
        width: 170px;
        height:65px;
        background-size: 100%;
        background-position: center center;
    }
    .main-wrapper {
        margin-top: 90px;
    }
    .top-menu{
        padding: 50px 0 0;
    }
    .top-menu li{
        padding-right: 0;
        font-size: 16px;
    }
    .top-menu li:first-child{
        padding-right: 10px;
        border-right: 1px solid #949698;
        margin-right: 7px;
        line-height: 14px;
    }
    .top-menu li:last-child{
        position: absolute;
        top: 10px;
        right: 15px;
    }
    .main-navigation .nav{
        min-width: 300px;
    }
    .main-navigation .row{
        padding-right: 50px;
    }
    .breadcrumb a span, .breadcrumb span{
        font-size: 12px;
    }
    .breadcrumb .divider{
        margin: 0;
    }
    .breadcrumb:before{
        content: "You're here >";
        font-size: 12px;
    }
    .breadcrumb li{
        display: none;
    }
    .breadcrumb li:last-child{
        display: inline-block;
    }
    .footer-columns .col-sm-3{
        width: 100%;
        display: block;
        text-align: center;
        margin-bottom: 20px;
    }
    .copyright .row > div:first-child{
        padding: 10px 15px 10px;
    }
    .side-bar .nav > li{
        width: 100%;
    }
    #searchForm .btn-group:first-child{
        width: 68%;
        margin: 0;
    }
    #searchForm  .btn-group input[type=text]{
        width: 100%;
        margin: 0;
    }
    #searchForm .btn-toolbar .btn-group:first-child + .btn-group{
        width: 28%;
    }
}
@media screen and (max-width:360px){
    .main-navigation .nav{
        min-width: 250px;
    }
    .main-navigation .nav > li:first-child > a,
    .main-navigation .nav-header{
        font-size: 20px;
    }
    .top-menu li a{
        font-size: 12px;
    }
    #home-banner{
        min-height: 250px;
    }
    .banner p{
        font-size: 20px;
    }
    .footer-columns .nav > li:first-child > a,
    .footer-columns .nav-header, .footer-columns h3{
        font-size: 16px;
    }
}

@media (min-width: 1201px) {
    .container { max-width: 1330px; }
    .main-wrapper { margin-top: 135px; }
    
    /* Nav Menu */
    header .container { height: 135px; padding-top: 22px; }
    .logo { width: 239px; height: 92px; }
    .main-navigation .nav > li:first-child > a, .main-navigation .nav-header { font-size: 24px; }

    /* Footer */
    .footer-columns { padding: 95px 0 85px; }
    .footer-columns li a { font-size: 16px; line-height: 1.2; }
    .footer-columns .custom p { font-size: 16px; }
    .footer-columns .nav > li:first-child > a, .footer-columns .nav-header, .footer-columns h3 { font-size: 24px; line-height: 1.2; }
    .copyright { height: auto; }
    .copyright p { font-size: 14px; }
    .logo-foot { width: 155px; height: 60px; }
    .copyright .row > div:first-child { padding-top: 33px; }

    /* Home */
    .banner p { font-size: 30px; }
    #home-banner { height: 600px; }
    #featured { height: 240px; }
    .featured-box h3 { font-size: 21px; }
    .home-content h2 { font-size: 30px; }
    .home-content { padding: 90px 0 80px; }
    .home-content p { font-size: 20px; }

    /* Articles */
    .breadcrumb a span, .breadcrumb span { font-size: 16px; }
    .page-header h2 { font-size: 30px; }
    .page-content { padding-bottom: 60px; }
    .page-content .side-bar { padding-top: 50px; }
    .page-content .content { padding: 50px 60px; }
    .page-content .content p { font-size: 16px; }
    .side-bar .nav a { font-size: 16px; }
    .side-bar .nav ul li a { font-size: 16px; }
    .page-content .content .btn-info { font-size: 21px; height: 150px; padding-top: 43px; }
}