header{
    position:fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
    height: var(--header-max-height);
    background-color: #FFFFFF;
    padding: 2vh 0;
    transition: .3s;
    top:0;
    left:0;
    right:0;
    z-index: 1000;
}
header.shrink{
    height: var(--header-min-height);
}
header nav.main-menu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:90vw;
}
header nav.main-menu a.logo{
    text-align: center;
    font-family: saniretro;
    font-size: 3rem;
    color: #000000;
}
header nav.main-menu a.logo span{
    display: block;
}
header nav.main-menu a.logo img{
    height: 14vh;
    transition: .3s;
}
header.shrink nav.main-menu a.logo img{
    height:8vh;
}
header nav.main-menu ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
    padding-left:10vw;
}
header nav.main-menu ul li a{
    color:#000000;
    font-size: var(--font-size-1);
}
header nav.main-menu ul li a.selected{
    text-decoration: underline;
}
header nav.main-menu a.order-here span{
    display: flex;
    justify-content: center;
    align-items: center;
    width:15vw;
    height: 8vh;
    font-size: var(--font-size-1);
    border-radius:10px;
    /*color:var(--red);*/
    /*background-color:var(--yellow);*/
    transition: .3s;
}
header.shrink nav.main-menu a.order-here span{
    height: 6vh;
}

nav#order-sub-menu{
    position:fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top:var(--header-max-height);
    left:0;
    right: 0;
    padding:2vh 0;
    background-color: #000000;
    z-index: 10;
    transition: .3s;
}
nav#order-sub-menu ul{
    display:flex;
    justify-content:space-between;
    align-items: center;
    width:80vw;
    margin:0;
    padding:0;
}
nav#order-sub-menu ul li a{
    color:#FFFFFF;
}
nav#order-sub-menu ul li a.sub-menu-selected{
    color:var(--yellow);
}
nav#order-sub-menu.header-shrinked{
    top:var(--header-min-height);
}

header#main-header nav.main-menu div#main-menu-responsive{
    /*display: none;*/
}
nav#order-sub-menu div.category-responsive{
    /*display: none;*/
}

/* ************************************** **
** ***** MENU RESPONSIVE AL DESKTOP ***** **
** ************************************** */
header nav.main-menu ul{
    display: none;
    transition:.3s;
}
header nav.main-menu ul.responsive-show{
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    background: #FFFFFF;
    top: 12vh;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 0 10vw;
    margin: 0;
    z-index: 100;
}
header nav.main-menu ul.responsive-show li,
header nav.main-menu ul.responsive-show li a,
header nav.main-menu ul.responsive-show li a span{
    display:flex;
    font-family: 'saniretro';
    width:100%;
    justify-content: flex-start;
    align-items: flex-start;
}
header#main-header nav.main-menu div#header-logo-separator{
    width: 14vh;
}
header#main-header nav.main-menu div#main-menu-responsive{
    display: inline-block;
    width:14vh;
    height:14vh;
    cursor: pointer;
}
header#main-header nav.main-menu div#main-menu-responsive svg{
    fill: #FFFFFF;
    width:14vh;
    height:14vh;
}
nav#order-sub-menu,
nav#order-sub-menu.header-shrinked{
    top: var(--header-responsive-height);
}

nav#order-sub-menu ul{
    position: fixed;
    height: 0;
    bottom: 0;
    left: 0;
    right: 0;
    top: 22vh;
    z-index: 500;
    background: #000000;
    width: auto;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
    transition: .3s;
}
nav#order-sub-menu ul.show{
    height:78vh;
    padding-bottom:15vh;
}
nav#order-sub-menu div.category-responsive{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:90vw;
    margin:0 auto;
}
nav#order-sub-menu div.category-responsive div.category-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:fit-content;
}
nav#order-sub-menu div.category-responsive div.category-container label{
    color:white;
    font-weight: bold;
    padding-right:1vw;
}
nav#order-sub-menu div.category-responsive div.category-container span#selected-category-responsive{
    width: fit-content;
    color:white;
    font-weight: bold;
    padding:0 1vw;
    border:none;
    background-color: transparent;
    cursor: inherit;
}
nav#order-sub-menu div.category-responsive div.category-container div#selected-category-responsive-icon svg{
    transition: .3s;
}
nav#order-sub-menu div.category-responsive div.category-container div#selected-category-responsive-icon.show svg{
    transform: rotate(180deg);
}
nav#order-sub-menu div.category-responsive div.menu-cart-container{
    position: relative;
    width:6vh;
    height: 6vh;
}
nav#order-sub-menu div.category-responsive div.menu-cart-container div.cart-svg-container{
    display:flex;
    justify-content: center;
    align-items: center;
    width:6vh;
    height: 6vh;
    border-radius: 50%;
    background-color: #FFFFFF;
}
nav#order-sub-menu div.category-responsive div.menu-cart-container div.cart-svg-container svg{
    fill:#000000;
    width:4vh;
    height: 4vh;
}

nav#order-sub-menu div.category-responsive div.menu-cart-container div#menu-cart-total-items{
    position: absolute;
    bottom:-1vh;
    right:0;
    display: flex;
    justify-content: center;
    align-items: center;
    width:3vh;
    height: 3vh;
    color:#FFFFFF;
    background-color: red;
    font-weight:bold;
    font-size:2vh;
    border-radius: 50%;
}


@media only screen and (max-width: 600px) {
    header#main-header nav.main-menu div#header-logo-separator{
        display: none;
    }
    header,
    header.shrink{
        height: var(--header-responsive-height);
    }
    header nav.main-menu a.logo,
    header nav.main-menu a.logo img,
    header.shrink nav.main-menu a.logo,
    header.shrink nav.main-menu a.logo img{
        height:8vh;
    }
    header nav.main-menu ul{
        display: none;
        transition:.3s;
    }
    header nav.main-menu ul.responsive-show{
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        background: #FFFFFF;
        top: 12vh;
        right: 0;
        left: 0;
        bottom: 0;
        padding: 0;
        margin: 0;
        z-index: 100;
    }
    header nav.main-menu ul.responsive-show li,
    header nav.main-menu ul.responsive-show li a,
    header nav.main-menu ul.responsive-show li a span{
        display:flex;
        width:50vh;
        justify-content: center;
        align-items: center;
    }
    header#main-header nav.main-menu div#main-menu-responsive{
        display: inline-block;
        width:6vh;
        height: 6vh;
    }
    header#main-header nav.main-menu div#main-menu-responsive svg{
        fill: #FFFFFF;
        width:6vh;
        height: 6vh;
    }
    nav#order-sub-menu,
    nav#order-sub-menu.header-shrinked{
        top: var(--header-responsive-height);
    }

    nav#order-sub-menu ul{
        position: fixed;
        height: 0;
        bottom: 0;
        left: 0;
        right: 0;
        top: 22vh;
        z-index: 500;
        background: #000000;
        width: auto;
        flex-direction: column;
        justify-content: space-around;
        overflow: hidden;
        transition: .3s;
    }
    nav#order-sub-menu ul.show{
        height:78vh;
        padding-bottom:15vh;
    }
    nav#order-sub-menu div.category-responsive{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width:90vw;
        margin:0 auto;
    }
    nav#order-sub-menu div.category-responsive div.category-container{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width:fit-content;
    }
    nav#order-sub-menu div.category-responsive div.category-container label{
        color:white;
        font-weight: bold;
        padding-right:1vw;
    }
    nav#order-sub-menu div.category-responsive div.category-container span#selected-category-responsive{
        width: fit-content;
        color:white;
        font-weight: bold;
        padding:0 1vw;
        border:none;
        background-color: transparent;
        cursor: inherit;
    }
    nav#order-sub-menu div.category-responsive div.category-container div#selected-category-responsive-icon svg{
        transition: .3s;
    }
    nav#order-sub-menu div.category-responsive div.category-container div#selected-category-responsive-icon.show svg{
        transform: rotate(180deg);
    }
    nav#order-sub-menu div.category-responsive div.menu-cart-container{
        position: relative;
        width:6vh;
        height: 6vh;
    }
    nav#order-sub-menu div.category-responsive div.menu-cart-container div.cart-svg-container{
        display:flex;
        justify-content: center;
        align-items: center;
        width:6vh;
        height: 6vh;
        border-radius: 50%;
        background-color: #FFFFFF;
    }
    nav#order-sub-menu div.category-responsive div.menu-cart-container div.cart-svg-container svg{
        fill:#000000;
        width:4vh;
        height: 4vh;
    }
    
    nav#order-sub-menu div.category-responsive div.menu-cart-container div#menu-cart-total-items{
        position: absolute;
        bottom:-1vh;
        right:0;
        display: flex;
        justify-content: center;
        align-items: center;
        width:3vh;
        height: 3vh;
        color:#FFFFFF;
        background-color: red;
        font-weight:bold;
        font-size:2vh;
        border-radius: 50%;
    }
}