/* ==========================================================================
   Media Queries
   ========================================================================== */

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

    #supersized {
        display: none !important;
    }

    #menu {
        display: none;
    }

    .main-navigation {
        background: none repeat scroll 0 0 black;
        display: block;
        position: relative;
        text-align: center;
        width: 100%;
        height: auto;
        min-height: 0;
        margin-bottom: 1rem;
    }

    .main-navigation .logo {
        float: left;
        margin: 0 1em 0 2em;
        width: 8em;
    }

    .main-navigation .name {
        color: white;
        font-size: 250%;
        margin: 0.5em 0 0.2em;
        padding-top: 0.5em;
    }

    .main-navigation header {
        min-height: 7rem;
    }

    .main-navigation footer,
    .main-navigation:after,
    .bg-image-slider {
        display: none;
    }

    .main-container {
        margin: 0;
    }

    #primary {
        width: 100%;
    }

    #secondary {
        float: left;
        width: 100%;
        margin-top: 1rem;
    }

    #secondary aside {
        font-size: 120%;
        width: 100%;
        float: left;
    }

    #secondary .widget.ngg_images {
        width: 100%;
        clear: both;
    }

    .widget-area .ngg-widget a {
        display: inline;
    }

    .entry-content {
        font-size: 130%;
        line-height: 140%;
    }

    #mainNav {
        height: auto;
    }

    #mainNav ul {
        clear: left;
        float: left;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease 0s;
        width: 100%;
    }

    #mainNav ul.active {
        max-height: 30rem;
        transition: max-height 0.5s ease 0s;
    }

    .grid-sizer { width: 100% !important; }

    .grid-item {
        position: static !important;
        display: block;
        clear: both;
    }

    .grid-item img {
        display: block;

    }

    .see-simulation {
        display: none;
    }

    .picture-page {
        max-width: 100% !important;
    }

    #mainNav ul li {
        float: none;
    }

    #btnMenuTrigger {
        background-color: #333333;
        display: inline;
        float: right;
        font-size: 2rem;
        text-align: right;
        text-transform: uppercase;
        width: 100%;
    }

    #btnMenuTrigger:after {
        color: white;
        content: "≡";
        font-size: 2rem;
        line-height: 2rem;
        padding: 0 0.5rem;
        text-decoration: none;
    }

    #hamburger {
        background: #333;
        width: 60px;
        display: block;
        border-radius: 10px;
        cursor: pointer;
        padding: 10px;
    }

        #hamburger a {
            color: #fff;
            text-decoration: none;
        }

}

@media only screen and (min-width: 721px) and (max-width: 1024px) {

    .entry-content {
        font-size: 120%;
        line-height: 130%;
    }

    #primary {
        width: 100%;
    }

    #secondary {
        float: left;
        width: 100%;
        margin-top: 1rem;
    }

    #secondary aside {
        width: 50%;
        float: left;
    }

    #secondary .widget.ngg_images {
        width: 100%;
        clear: both;
    }

    .widget-area .ngg-widget a {
        display: inline;
    }

}