/* ---------[ Responsive Design ]--------- */

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

    .outer-wrap {
        width: auto;
        margin: 0px;
        padding: 0px;
    }

    .top-wrap {
        padding-top: 0px;
        background-position: -18px bottom;
    }

    .wrap {
        width: auto !important;
        padding-left: 0px;
        padding-right: 0px;
    }

    #head-content {
        width: auto;
        padding: 0 25px;
    }

    #topnav {
        width: 100%;
    }

    body.home .bottom-outer-wrap {
        top: 0;
    }

    #page { 
        padding: 0 30px;
    }

    #home-content-top-border {
        width: 100%;
        top: 0;
    }

    .featured.pages {
        height: 480px;
    }

    .featured.pages .flex-direction-nav {
        position: absolute;
        right: 2%;
        margin-right: 0;
    }

    .featured.pages .left-cover,
    .featured.pages .right-cover {
        display: none;
    }

}

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

    .outer-wrap {
        width:100% !important;
        padding:0 !important;
        margin:0 auto !important;
        border:0 !important;
        -moz-border-radius:0 !important;
        -webkit-border-radius:0 !important;
        border-radius:0 !important;
    }

    #sitetitle {
        margin-bottom: 0;
    }

    #topnav {
        margin-top: 0;
    }

    #mobile-nav {
        width: 100%;
        display: block;
        height: 45px;
        position: relative;
    }

    .btn_menu {
        display: block;
        position: absolute;
        top: 5px;
        right: 5px;
        cursor: pointer;
        background: #eef2f2 url('../img/menu.png') 8px 9px no-repeat;
        padding: 5px 5px 0;
        width:30px;
        height:30px;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
    }

    #topnav { display: none; }
    select.select-menu { display: none; }
    #topnav ul { display: block; }
   
   .top-wrap { background-image: none; }

    #topnav { margin-left: 0; width: 100%; padding: 0; }
    #topnav ul.nav { padding: 0; width: 100%; }
    #topnav ul.nav li { display: block; float: none; margin-right: 0; }

    #topnav ul.nav > li.has-children > a { padding: 5px 10px 5px 30px; }
    #topnav ul.nav > li a { padding: 5px 10px; }
    #topnav ul.nav ul li a { display: block; width: 100%; padding: 5px 10px; }
    #topnav ul.nav > li a { display: block; margin-left: 0; padding-left: 30px; }

    #topnav ul ul {
        background: none;
        margin-left: 30px;
        display: block !important;
        width: auto;
        position: static;
    }
    #topnav ul ul a {
        background: none;
    }
    #topnav ul ul ul  {
        margin: 0 0 0 15px; 
    }

    .featured.pages {
        height: 432px;
    }

    .featured.pages .entry {
        width: 720px;
        left: 24px;
        top: 273px;
        margin-left: 0px;
    }
    .featured.pages .entry .post-title {
        max-width: 661px;
    }
    .featured.pages .entry .post-excerpt {
        left: 33px;
        max-width: 657px;
    }

}

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

    #head-content {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #head-content .title,
    #head-content .description {
        text-align: center;
    }

    #topnav { display: none; }
    select.select-menu { display: none; }
    #topnav ul { display: block; }

    .featured.pages {
        height: 370px;
    }

    .featured.pages .entry {
        width: 540px;
        left: 10px;
        top: 280px;
    }
    .featured.pages .excerpt {
        height: auto;
        margin: 0;
        max-width: 530px;
    }
    .featured.pages .entry .post-excerpt {
        display: none;
    }
    .featured.pages h2.post-title,
    .featured.pages h2.post-title a {
        height: auto;
        font-size: 14px;
        line-height: 1.5em;
    }

    .featured.narrow .flex-direction-nav li .flex-next {
        right: -15px;
    }

    .featured.narrow .flex-direction-nav li .flex-prev {
        left: -15px;
    }

}

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

    .top-wrap {
        background-position: -40px bottom;
    }

    #head-content {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #page { 
        padding: 0 20px;
    }

    #topnav { display: none; }
    #catnav { display: none; }
    #topnav ul { display: block; }

    .featured.pages {
        height: 180px;
    }
    .featured.pages .entry {
        width: 310px;
        left: 5px;
        top: 100px;
    }
    .featured.pages .entry .post-title {
        padding: 5px;
    }
    .featured.pages h2.post-title,
    .featured.pages h2.post-title a {
        max-width: 300px;
        font-size: 12px;
        line-height: 1.5em;
    }

}