/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : May 19, 2020, 12:23:54 AM
    Author     : sions
*/
.menu-icon{
    text-align: center;
    display: none;
}
.menu-icon a{
    display: block;
}
@media screen and (max-width: 767px){
    #header{ height: auto; }
    #header #logo{
        background-position: top center;
        text-align: center;
    }
    #header .search{
        background: transparent;
        height: auto;
    }
    #header .search form{
        margin: 0 0 0 30px;
    }
    #header .cart{
        background: transparent;
        text-align: center;
    }
    #header .cart .title{
        background-position: calc( 50% - 40px) 8px;
        margin-top: 10px;
    }
    #content{
        margin-top: 10px;
    }
}
@media screen and (max-width: 750px){
    .menu-icon{
        display: block;
    }
    #content{
        display: flex;
        flex-direction: column;
    }
    
    #content #content-inner{
        order: 2;
    }
    
    #content #catalog-menu{
        order: 1;
    }
    #content #catalog-menu .left-box, 
    #content #catalog-menu .sidebar{
        display: none;
    }
    #content #catalog-menu.active .left-box, 
    #content #catalog-menu.active .sidebar{
        display: block;
    }
    
}    
@media screen and (max-width: 550px){
    #shopping-cart-table tr,
    #shopping-cart-table th,
    #shopping-cart-table td{
        display: block;
        text-align: center !important;
    }
    #shopping-cart-table table{
        width: 100%;
    }
    #shopping-cart-table .button{
        float: none !important;
    }
}