/* =========================================================
   ASP.NET RESPONSIVE MULTI-LEVEL MENU
   Desktop  : Hover dropdown
   Mobile   : Hamburger + Click accordion
   Supports : Level 1 / 2 / 3 / 4 / 5
   ========================================================= */


/* =========================================================
   MAIN MENU
   ========================================================= */

.menu {
    width: 100%;
    background: #990F02;
    font-family: "Segoe UI", Arial, sans-serif;
    position: relative;
    z-index: 9999;
}

    .menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .menu li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .menu a {
        text-decoration: none;
    }


/* =========================================================
   DESKTOP MAIN MENU
   ========================================================= */

@media (min-width: 769px) {

    /* -----------------------------------------------------
       LEVEL 1
       ----------------------------------------------------- */

    .menu > ul {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        width: 100%;
    }

        .menu > ul > li {
            position: relative;
        }

            .menu > ul > li > a {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 52px;
                box-sizing: border-box;
                padding: 14px 16px;
                color: #ffffff;
                background: #990F02;
                font-size: 16px;
                font-weight: 600;
                white-space: nowrap;
                transition: background-color .25s ease, color .25s ease;
            }

            /* Level 1 hover */

            .menu > ul > li:hover > a {
                background: #ffffff;
                color: #990F02;
            }


    /* =====================================================
       ALL SUBMENUS
       ===================================================== */

    .menu ul ul {
        position: absolute;
        display: none;
        width: 240px;
        min-width: 240px;
        margin: 0;
        padding: 0;
        background: #ffffff;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 8px 25px rgba(0,0,0,.20);
        z-index: 999999;
    }


    /* =====================================================
       LEVEL 2
       ===================================================== */

    .menu > ul > li > ul {
        top: 100%;
        left: 0;
    }


    /* Show Level 2 */

    .menu > ul > li:hover > ul {
        display: block;
    }


    /* =====================================================
       LEVEL 2 / 3 / 4 ITEMS
       ===================================================== */

    .menu ul ul li {
        position: relative;
        width: 100%;
    }

        .menu ul ul li > a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            min-height: 42px;
            box-sizing: border-box;
            padding: 11px 16px;
            color: #333333;
            background: #ffffff;
            font-size: 14px;
            font-weight: 500;
            border-bottom: 1px solid #eeeeee;
            white-space: nowrap;
            transition: background-color .20s ease, color .20s ease, padding-left .20s ease;
        }


        /* Submenu hover */

        .menu ul ul li:hover > a {
            background: #fff5f3;
            color: #990F02;
            padding-left: 22px;
        }


    /* =====================================================
       LEVEL 3
       ===================================================== */

    .menu ul ul > li > ul {
        top: 0;
        left: 100%;
        margin-left: 2px;
        border-radius: 0 8px 8px 8px;
    }


    /* Show Level 3 */

    .menu ul ul > li:hover > ul {
        display: block;
    }


    /* =====================================================
       LEVEL 4
       ===================================================== */

    .menu ul ul ul > li > ul {
        top: 0;
        left: 100%;
        margin-left: 2px;
        border-radius: 0 8px 8px 8px;
    }


    /* Show Level 4 */

    .menu ul ul ul > li:hover > ul {
        display: block;
    }


    /* =====================================================
       LEVEL 5
       ===================================================== */

    .menu ul ul ul ul > li > ul {
        top: 0;
        left: 100%;
        margin-left: 2px;
        border-radius: 0 8px 8px 8px;
    }


    .menu ul ul ul ul > li:hover > ul {
        display: block;
    }


    /* =====================================================
       DESKTOP ARROWS
       ===================================================== */

    .menu li.has-submenu > a::after {
        content: "›";
        margin-left: auto;
        padding-left: 15px;
        font-size: 18px;
        font-weight: 700;
        color: #990F02;
    }


    /* Main menu arrow */

    .menu > ul > li.has-submenu > a::after {
        content: "⌄";
        margin-left: 8px;
        padding-left: 0;
        font-size: 14px;
        color: #ffffff;
    }


    /* Main arrow on hover */

    .menu > ul > li.has-submenu:hover > a::after {
        color: #990F02;
    }


    /* =====================================================
       SUBMENU LAST ITEM
       ===================================================== */

    .menu ul ul li:last-child > a {
        border-bottom: none;
    }
}


/* =========================================================
   HAMBURGER
   ========================================================= */

.menu-toggle {
    display: none !important;
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

@media (max-width: 768px) {


    /* =====================================================
       HAMBURGER BUTTON
       ===================================================== */

    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 44px;
        height: 40px;
        margin: 8px 15px;
        padding: 8px;
        background: #ffffff;
        border: none;
        border-radius: 7px;
        cursor: pointer;
        box-shadow: 0 3px 10px rgba(0,0,0,.20);
        position: relative;
        z-index: 100000;
    }


        .menu-toggle .bar {
            display: block;
            width: 100%;
            height: 3px;
            background: #990F02;
            border-radius: 5px;
            transition: all .25s ease;
        }


        .menu-toggle:hover {
            background: #fff5f3;
        }


    /* =====================================================
       MENU CLOSED
       ===================================================== */

    .menu {
        display: none !important;
        width: 100% !important;
        background: #990F02 !important;
        position: relative;
    }


        /* MENU OPEN */

        .menu.is-active {
            display: block !important;
        }


        /* =====================================================
       MAIN UL
       ===================================================== */

        .menu > ul {
            display: block !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
        }


        /* =====================================================
       ALL LI
       ===================================================== */

        .menu li {
            position: relative !important;
            display: block !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
        }


        /* =====================================================
       ALL LINKS
       ===================================================== */

        .menu a {
            display: flex !important;
            align-items: center;
            justify-content: space-between;
            width: 100% !important;
            min-height: 48px;
            box-sizing: border-box !important;
            padding: 14px 18px !important;
            color: #ffffff !important;
            background: #990F02 !important;
            font-size: 15px !important;
            font-weight: 600;
            border-bottom: 1px solid rgba(255,255,255,.15);
            white-space: normal !important;
        }


        /* Main hover */

        .menu > ul > li > a:hover {
            color: #990F02 !important;
            background: #ffffff !important;
        }


        /* =====================================================
       HIDE ALL SUBMENUS
       ===================================================== */

        .menu li > ul {
            display: none !important;
            position: static !important;
            width: 100% !important;
            min-width: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            box-shadow: none !important;
            border-radius: 0 !important;
        }


        /* =====================================================
       SHOW OPEN SUBMENU
       THIS WORKS AT EVERY LEVEL
       ===================================================== */

        .menu li.is-open > ul {
            display: block !important;
        }


        /* =====================================================
       LEVEL 2
       ===================================================== */

        .menu > ul > li > ul {
            background: #720b02 !important;
            border-left: 4px solid #ffb703;
        }


            .menu > ul > li > ul > li > a {
                padding: 13px 18px 13px 35px !important;
                background: #720b02 !important;
                color: #ffffff !important;
                font-size: 14px !important;
            }


        /* =====================================================
       LEVEL 3
       ===================================================== */

        .menu ul ul ul {
            background: #4f0802 !important;
            border-left: 4px solid #ffd166;
        }


            .menu ul ul ul li > a {
                padding: 13px 18px 13px 52px !important;
                background: #4f0802 !important;
                color: #ffffff !important;
                font-size: 14px !important;
            }


            /* =====================================================
       LEVEL 4
       ===================================================== */

            .menu ul ul ul ul {
                background: #350501 !important;
                border-left: 4px solid #ffe29a;
            }


                .menu ul ul ul ul li > a {
                    padding: 13px 18px 13px 69px !important;
                    background: #350501 !important;
                    color: #ffffff !important;
                    font-size: 14px !important;
                }


                /* =====================================================
       LEVEL 5
       ===================================================== */

                .menu ul ul ul ul ul {
                    background: #250301 !important;
                    border-left: 4px solid #ffffff;
                }


                    .menu ul ul ul ul ul li > a {
                        padding: 13px 18px 13px 86px !important;
                        background: #250301 !important;
                        color: #ffffff !important;
                        font-size: 14px !important;
                    }


        /* =====================================================
       MOBILE SUBMENU HOVER
       ===================================================== */

        .menu ul ul a:hover {
            background: #ffffff !important;
            color: #990F02 !important;
        }


        /* =====================================================
       MOBILE ARROWS
       ===================================================== */

        .menu li.has-submenu > a::after {
            content: "⌄";
            margin-left: auto;
            padding-left: 15px;
            color: #ffd166;
            font-size: 18px;
            font-weight: 700;
            transition: transform .25s ease;
        }


        /* Rotate opened submenu arrow */

        .menu li.has-submenu.is-open > a::after {
            transform: rotate(180deg);
            color: #ffffff;
        }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .menu a {
        min-height: 46px;
        padding: 13px 15px !important;
        font-size: 14px !important;
    }


    .menu > ul > li > ul > li > a {
        padding-left: 30px !important;
    }


    .menu ul ul ul li > a {
        padding-left: 45px !important;
    }


    .menu ul ul ul ul li > a {
        padding-left: 60px !important;
    }


    .menu ul ul ul ul ul li > a {
        padding-left: 75px !important;
    }
}