@media only screen and (max-width: 800px) {
    nav {
        background: #fff;
        left: -25rem;
        transition: .5s ease-out;
    }

    nav[state=true] {left: 0}

    nav:after {
        width: 0;
        height: inherit;
        background: rgba(255,255,255,0.8);
        float: left;
        position: absolute;
        top: 0;
        left: 25rem;
        transition: .5s ease-out;
    }

    nav[state=true]:after {
        width: calc(100vw - 25rem);
        width: -moz-calc(100vw - 25rem);
        width: -webkit-calc(100vw - 25rem);
    }

    nav .mobile-menu-close {
        width: 100%;
        height: 5rem;
        text-align: center;
        display: block;
    }

    nav .mobile-menu-close label {
        width: 3rem;
        height: 3rem;
        margin-top: 2rem;
        display: inline-block;
        float: none;
    }

    nav>ul {
        width: 100%;
        height: calc(100vh - 20rem);
        height: -moz-calc(100vh - 20rem);
        height: -webkit-calc(100vh - 20rem);
    }


    article {width: 100%}


    header,
    #home header {
        width: calc(100% - 8rem);
        width: -moz-calc(100% - 8rem);
        width: -webkit-calc(100% - 8rem);
    }

    header .mobile-menu-open {
        width: 3rem;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }

    header .mobile-menu-open label,
    header .mobile-menu-open label:before,
    header .mobile-menu-open label:after {
        width: inherit;
        height: .1rem;
        background: #000;
    }

    header .mobile-menu-open label {
        position: absolute;
        bottom: 5.9rem;
    }

    header .mobile-menu-open label:before,
    header .mobile-menu-open label:after {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }

    header .mobile-menu-open label:before {margin-top: -.8rem}
    header .mobile-menu-open label:after {margin-bottom: -.8rem}



    #home {width: 100%}


    #banner {height: 40rem}



        /*
        ==================================
            PRODUCT DETAIL
        ==================================
        */
    #product-detail .images span {
        width: 100% !important;
        clear: both;
    }

    #product-detail .images span:not(:nth-child(1)) {margin-top: 2rem}


    #product-detail .other a {
        width: calc((100% - 4rem)/2);
        width: -moz-calc((100% - 4rem)/2);
        width: -webkit-calc((100% - 4rem)/2);
        margin: 2rem;
    }

    #product-detail .other a:nth-of-type(1),
    #product-detail .other a:nth-of-type(2) {margin-top: 0 !important;}

    #product-detail .other a:nth-of-type(2n+1) {margin-left: 0; clear: left}
    #product-detail .other a:nth-of-type(2n+2) {margin-right: 0; float: right}


}