@import url("reset.css");
@import url("normalize.css");
@import url("fonts.css");
@import url("base.css");

@media (min-width: 768px) and (max-width: 979px) {
    .headerNav ul.nav > li {
         padding:0 1%;
    }
    .headerNav ul.nav>li>a {
        font-size:0.85em;
    }
    .m-content-block {
        width: 63%;
    }
    .m-content-block.noleft {
        width: 95%;
    }
    .footer .span7 {
        clear: both;
        text-align: left;
    }
    ul.social {
        clear: both;
        float: none;
    }
    .innerContent .hover-boxes-row li {
        width: 46%;
    }
    .hover-boxes-row p {
        /* This keeps gray overlay box where it should be */
        left: auto;
        right: auto;
    }    
}
@media (min-width: 1px) and (max-width: 979px) {
    .footer .span7 {
        width: 95%;
    }
}
@media (min-width: 1px) and (max-width: 767px) {
    .headerNav ul.nav > li {
         padding:0 3%;
    }
    #searchform {
        float: none;
        margin: 10px auto;
    }
    .headerNav ul.nav>li {
        clear: both;
        width: 96%;
        padding: 0 2%;
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
        border-left: none;
        border-right: none;
    }
    .headerNav ul.nav > li:hover, .headerNav ul.nav > li.active {
        background: none repeat scroll 0 0 #D09700;
        border-left: none;
        border-right: none;
        border-top: 1px solid #FFFFFF;
        border-bottom: 1px solid #FFFFFF;
        border-left: none;
        border-right: none;
        display: block;
    }
    .headerNav ul.nav > li > ul {
        z-index: 2;
    }
    .headerNav ul.nav > li > ul {
        border-top: 1px solid white;
        border-right: 1px solid white;
        border-bottom: 1px solid white;
        border-left: none;
    }
    .headerNav ul.nav > li > ul > li > ul {
         border: 1px solid white;
    }
    .innerContent {
        height: auto;
    }
    .headerNav ul.nav > li > ul {
        width: 50%;
    }
    .headerNav ul.nav>li a {
         text-align: left;
    }
    .gridSet2 {
        background: none;
    }
    .footer .span7 {
        clear: both;
        text-align: left;
    }
    ul.social {
        clear: both;
        float: none;
    }
    .logo a img {
        margin: 0;
    }
    .innerContent .pictures-row li {
       clear: both;
       padding: 0 0 10px;
       width: 80%;
    }
    .innerContent .hover-boxes-row li {
        clear: both;
        width: 90%;
    }
    .hover-boxes-row img {
        max-width: 100%;
        max-height: 284px;
    }     
    .hover-boxes-row p, .home .hover-boxes-row p {
        /* This keeps gray overlay box where it should be - home and interior */
        left: 0;
        right: 0;
    }    
    .span7.gridSet1 {
        margin: 0;
    }
}
@media (min-width: 660px) and (max-width: 767px) {
    .m-content-block {
        width: 59%;
    }
    .m-content-block.noleft {
        width: 93%;
    }
}
@media (min-width: 570px) and (max-width: 659px) {
    .m-content-block {
        width: 53%;
    }
    .m-content-block.noleft {
        width: 93%;
    }
    h2 {
        font-size: 22px;
        line-height: 30px;
    }
}
@media (min-width: 500px) and (max-width: 569px) {
    .m-content-block {
        width: 43%;
    }
    .m-content-block.noleft {
        width: 93%;
    }
    h2 {
        font-size: 22px;
        line-height: 30px;
    }
    .left-column, .right-column {
        clear: both;
        float: none;
        width: 90%;
    }
}
@media (min-width: 1px) and (max-width: 499px) {
    .m-content-block {
        clear: both;
        width: 90%;
        background: white;
        padding: 0 5px;
        float: none;
        width: 100%;
    }
    .sidebar {
        float: none;
        clear: both;
        background: none;
        min-height: auto;
        margin: 0 auto;
        margin: 0 0 10px;
    }
    .m-content-block h1 {
        text-align: center;
    }
    .m-content-block.noleft {
        width: 95%;
    }
    .left-column, .right-column {
        clear: both;
        float: none;
        width: 100%;
        padding: 0;
    }
    .hover-boxes-row {
        margin: 0 auto;
        width: 60%;
    }
}
@media (min-width: 1px) and (max-width: 400px) {
    .logo a img {
        margin: 0;
    }
    .wrapperTopNavigation {
        height: auto;
    }
    ul.topNavigation {
        float: none;
    }
    .container {
        padding: 5px 0 10px;
    }
    ul.topNavigation {
        padding:0;
        margin: 0;
    }
    ul.topNavigation li a{
        margin: 0 10px;
    }
    ul.topNavigation li a.last-link {
        margin: 0 0 0 10px;
    }
    .footer {
        padding: 5px;
    }
    h2 {
        font-size: 22px;
        line-height: 30px;
    }
}
@media (min-width: 1px) and (max-width: 199px) {
    .sider {
        float: none;
    }
    .innerContent .hover-boxes-row p {
        padding: 0;
    }
}