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

    .columns .container-row:not(:last-child) {
        margin: 0 auto;
    }

    .columns .container-row > [class*="container-"] {
        width: 100%;
        margin: 0 auto;
        text-align: center !important;
        display: block;
    }

    .columns .container-row > [class*="container-"] figure {
        display: none;
    }

    .find-us {
        padding: 0 15px;
    }

    .find-us .google-map, .hero {
        width: 100%;
        background-position: center;
    }

    .gallery figure {
        margin: 8px 8px 0 0 !important;
    }

}

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

    .wrap {
        padding-top: 120px;
    }

    label[for="menu_active"] {
        display: block;
        position: absolute;
        z-index: 999;
        top: 0;
        left: 50%;
        margin-left: -97.5px;
    }

    .navigation {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.8);
        opacity: 0;
        pointer-events: none;
        z-index: 99;
        position: fixed;
        padding-top: 100px;
        -webkit-transition: opacity 300ms linear;
        -moz-transition: opacity 300ms linear;
        -o-transition: opacity 300ms linear;
        -ms-transition: opacity 300ms linear;
        transition: opacity 300ms linear;
    }

    .navigation a {
        background: none;
        width: 100%;
        line-height: 96px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    #menu_active:checked + label[for="menu_active"] {
        position: fixed;
    }

    #menu_active:checked ~ .navigation {
        opacity: 1;
        pointer-events: auto;
    }

    .products figure .product {
        width: 120px;
        height: 120px;
    }

}