﻿@media all and (max-width: 1024px) {
    /* RESPONSIVE MENU */


    .master-header-wrapper {
        position: relative;
    }
    .ps-container > .ps-scrollbar-y-rail {
        visibility: hidden !important;
    }
    .scrollYRemove {
        overflow: hidden !important;
        -ms-touch-action: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .overlayOffCanvas {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(221,221,221,0.6);
        z-index: 1010;
        -webkit-transition: background .3s ease-in-out;
        transition: background .3s ease-in-out;
    }
    .overlayOffCanvas.show {
        background: rgba(0,0,0,0.4);
    }
    .header-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 320px;
        height: 100%;
        background: #eee;
        text-align: left;
        overflow: hidden;
        z-index: 1070;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;    
        -webkit-transform: translate(-320px);
        -ms-transform: translate(-320px);
        transform: translate(-320px);
    }
    .header-menu.opened {    
        -webkit-transform: translate(0);
        -ms-transform: translate(0);
        transform: translate(0);
    }
    .navigation-wrapper {
        padding: 15px;
        border: 0;
        background: #57b568;
        cursor: pointer;
        overflow: hidden;
        font-size: 0;
    }
    .header-menu .close-menu,
    .header-menu ul .back-button {
        float: right;
    }
    .header-menu .close-menu span,
    .header-menu ul .back-button span {
        position: relative;
        display: inline-block;
        padding: 0;
        width: 28px;
        height: 28px;
        background: rgba(0,0,0,0.1);
        font-size: 0;
        color: #fff;
        line-height: 15px;
    }
    .header-menu .close-menu span:after,
    .header-menu ul .back-button span:after {
        content: '\e901';
        position: absolute;
        top: 50%;
        left: 50%;
        font-family: prisma;
        font-size: 8px;
        color: #fff;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    .header-menu ul .back-button {
        margin-right: 5px;
    }
    .header-menu ul .back-button span:after {
        content: '\e924';
    }
    .header-menu > ul li {
        border-bottom: 1px solid #eee;
        background: #f6f6f6;
    }
    .header-menu > ul li:after {
        content: "";
        display: block;
        clear: both;
    }
    .header-menu > ul li > a,
    .header-menu > ul li > span {
        position: relative;
        display: block;
        padding: 16px 18px;
        line-height: 17px;
        text-align: left;
        font-size: 15px;
        color: #666;
        z-index: 0;
    }
    .header-menu > ul li > a:hover,
    .header-menu > ul li > span:hover {
        color: #57b568;
    }
    .header-menu > ul li:last-child > a,
    .header-menu > ul li:last-child > span {
        border-bottom: 0;
    } 
    .header-menu > ul li > .with-subcategories {
        float: left;
    }
    .plus-button {
        position:relative;
        float: right;
        margin: 10px;
        width: 28px;
        height: 28px;
        background: #fff;
        cursor: pointer;
        z-index: 1;
    }
    .plus-button:after {
        content: '\e925';
        position: absolute;
        top: 50%;
        left: 50%;
        font-family: prisma;
        font-size: 8px;
        color: #dcdde0;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    .header-menu .sublist-wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 320px;
        height: 100%;
        background: #eee;
        box-shadow: 1px 0 5px rgba(0,0,0,0.5);
        z-index: 2;
        overflow: hidden;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }
    .header-menu .sublist-wrap {
        -webkit-transform: translate(-320px);
        -ms-transform: translate(-320px);
        transform: translate(-320px);
    }       
    .header-menu .sublist-wrap.active {
        -webkit-transform: translate(0);
        -ms-transform: translate(0);
        transform: translate(0);
    }
    .flyout-cart {
        display: none;
    }
}