/*!
Theme Name: baker-health
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: baker-health
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

baker-health is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
#nav-toggle-close{
    display: none;
}

.header-bottom .logo{
    z-index: 1;
}
.header-bottom .nav-toggle{
    z-index: 2;
}

.mobile-menu{
    display: none;
}

.header-bottom{
    position: relative;
}

@media only screen and (max-width: 600px) {
        .mobile-menu {
            position: fixed;
            border: 0;
            top:60px;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100;
            background-color: rgba(0, 0, 0, 0) !important;
            transition: background-color 0.6s ease;
        }
        .mobile-menu.active{
            display: block;
            background-color: #000;
            
        }


        /* .sub-menu.active{
            display: block;
        } */
    
        .mobile-menu .main-menu {
            display: grid;
            list-style: none;
            grid-column-gap: 0vw;
            grid-template-rows: auto auto auto;
            grid-template-columns: 1fr 1fr;
            grid-auto-flow: row;
            align-content: end;
            justify-content: start;
            align-items: start;
            padding-left: 0;
            padding-right: 0;
            position: relative;
        }
    
        .mobile-menu .main-menu .parent-menu {
            background: #000000;
            text-align: center;
            color: #ffffff;
            width: 100%;
            width: 50vw;
            height: 40vw;
            justify-content: center;
            align-items: center;
            display: flex;
            position: relative;
            overflow: hidden;
            opacity: 0;
        }

        .mobile-menu .main-menu .parent-menu.show {
            opacity: 1 !important;
        }

    
        .mobile-menu .parent-menu .menu-item {
            width: 100%;
            height: 100%;
            color: var(--primary-grey);
            border-top: 1px solid #868585;
            border-right: 1px solid #868585;
            justify-content: center;
            align-items: center;
            display: flex;
            text-decoration: none;
            font-size: 4.8vw;
            line-height: 178%;
        }

        .mobile-menu .main-menu .parent-menu::before {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: antiquewhite;
            content: "";
            transition: all 0.2s ease-in-out;
            transform: translate(100%, 100%);
        }

        .mobile-menu .main-menu .parent-menu.animate::before {
            opacity: 1;
            transform: translate(0, 0);
        }

        .mobile-menu .main-menu .parent-menu.hideani::before {
            opacity: 0 !important;
            display: none !important;
        }

        /*********/
        .sub-menu {
            position: fixed;
            border: 0;
            top:60px;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000000;
            z-index: 200;
            display: none;
        }
        .sub-menu.active{
            display: block;
        }
        .sub-menu .submenus {
            display: grid;
            list-style: none;
            grid-column-gap: 0vw;
            grid-template-rows: auto auto auto;
            grid-template-columns: 1fr 1fr;
            grid-auto-flow: row;
            align-content: end;
            justify-content: start;
            align-items: start;
            padding-left: 0;
            padding-right: 0;
            position: relative;
        }
    
        .sub-menu .submenus .child {
            background: #000000;
            text-align: center;
            color: #ffffff;
            width: 100%;
            width: 50vw;
            height: 40vw;
            justify-content: center;
            align-items: center;
            display: flex;
            position: relative;
            overflow: hidden;
            opacity: 0;
        }

        .sub-menu .submenus .child.show {
            opacity: 1 !important;
        }

        .sub-menu .submenus .menu-item-child {
            width: 100%;
            height: 100%;
            color: var(--primary-grey);
            border-top: 1px solid #868585;
            border-right: 1px solid #868585;
            justify-content: center;
            align-items: center;
            display: flex;
            text-decoration: none;
            font-size: 4.8vw;
            line-height: 178%;
        }

        .sub-menu .submenus .child::before {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: antiquewhite;
            content: "";
            transition: all 0.5s ease-in-out;
            transform: translate(100%, 100%);
        }
        
        .sub-menu .submenus .child.animate::before {
            opacity: 1;
            transform: translate(0, 0);
        }
        
        .sub-menu .submenus .child.hideani::before {
            opacity: 0 !important;
            display: none !important;
        }
        /************/



        .mobile-menu .main-menu .parent-menu.relative {
            position: relative;
        }

        .mobile-menu .main-menu .parent-menu.has-child .sub-arrow {
            position: absolute;
            top: 45%;
            z-index: 150;
            right: 12px;
            width: 28px;
            height: 28px;
            cursor: pointer;
        }
        .sub-menu .back-menu-icon {
            width: 30px;
            cursor: pointer;
        }


        .sub-menu .child.blue::before {
            background-color: blue !important;
        }
        .sub-menu .child.green::before {
            background-color: green !important;
        }
        .sub-menu .child.yellow::before {
            background-color: yellow !important;
        }
        .sub-menu .child.gray::before {
            background-color: gray !important;
        }
}