/* ======================================================================================================================== */
/*                            Desktop menu min. 944px                                                                         */
/* ======================================================================================================================== */

#menuToggle {
    display: none;
}

@media (min-width: 944px) {
    .mobile-submenu > ul {
        display: none !important;
    }

    #menuZahlavi {
        width: 944px;
        margin: 0 -2px;
        padding: 0 0 10px 0;
        line-height: 0;
        text-align: left;
        font-size: 0;

        /*background-image: url(/img/ms50/menu.jpg);*/
        /*background-position: center top;*/
        /*background-repeat: no-repeat;*/

        background: linear-gradient(to bottom, #FFAB17 0%, #FF9A00 50%, #F57E00 50.1%, #FD9C00 100%);
        border-radius: 20px;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
        z-index: 10000;
    }

    #menuZahlavi #obalMenu {
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: center;
    }

    #menuZahlavi #obalMenu #menuList {
        margin: 0;
        padding: 0;
    }

    #menuZahlavi #obalMenu #menuList A {
        float: left;
        display: inline;
        margin: 8px 12px 0 13px;
        padding: 9px 15px 8px 15px;
        line-height: 18px;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
        color: #FFFFFF;
    }

    #menuZahlavi #obalMenu #menuList A:hover {
        background: linear-gradient(to bottom, #25B0E7 0%, #009FE0 50%, #0084D6 50.1%, #00A7E4 100%);
        border-radius: 16px;
        /*background-image: url(/img/ms50/menu_li_hover.gif);*/
        /*background-position: left top;*/
        /*background-repeat: no-repeat;*/
    }

    #menuZahlavi #obalMenu #menuList A SPAN {
        padding: 9px 17px 8px 0;
    }

    #menuZahlavi #obalMenu #menuList A:hover SPAN {
        /*background-image: url(/img/ms50/menu_li_a_hover.gif);*/
        /*background-position: right top;*/
        /*background-repeat: no-repeat;*/
    }

    #menuZahlavi #obalMenu #menuList li.aktivni A {
        background: linear-gradient(to bottom, #25B0E7 0%, #009FE0 50%, #0084D6 50.1%, #00A7E4 100%);
        border-radius: 16px;
        /*background-image: url(/img/ms50/menu_li_hover.gif);*/
        /*background-position: left top;*/
        /*background-repeat: no-repeat;*/
    }

    #menuZahlavi #obalMenu #menuList A.aktivni SPAN {
        /*background-image: url(/img/ms50/menu_li_a_hover.gif);*/
        /*background-position: right top;*/
        /*background-repeat: no-repeat;*/
    }
}

/* ======================================================================================================================== */
/*                            BURGER MENU POD 944px                                                                        */
/* ======================================================================================================================== */

@media (max-width: 944px) {
    #menuToggle {
        display: block;
        cursor: pointer;
        padding: 0;
        margin: 0 0 0 auto;
        background: linear-gradient(125deg, #d3ebfa, #ffffff);
        border-radius: 0;
        color: transparent;
        font-size: 24px;
    }

    #menuZahlavi {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background: unset;
        background-color: #f6f9fc;
        border-top: 1px solid  #0084D6;
        border-bottom: 1px solid  #0084D6;
        border-radius: 0;
        box-shadow: unset;
        padding: 0;
        z-index: 10000;
    }

    #menuZahlavi.active {
        display: block;
    }

    #obalMenu {
        padding: 0 20px;
    }

    #menuZahlavi #obalMenu #menuList {
        display: none;
        width: 100%;
        flex-direction: column;
        background-color: white;
        border-radius: 0 0 20px 20px;
        padding-left: 0;
    }

    #menuZahlavi.active #obalMenu #menuList {
        display: flex;
    }

    /* Mobilní menu by default skryté */
    #menuZahlavi #obalMenu #menuList {
        display: none;
        flex-direction: column;
    }

    #menuZahlavi #obalMenu #menuList.active {
        display: flex !important;
    }

    #menuZahlavi #obalMenu #menuList .toggle-submenu.open {
        background: linear-gradient(235deg, #f6fafc, #afe1fa);
    }

    #menuZahlavi #obalMenu #menuList .toggle-submenu.open .mobile-submenu {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-left: 0;
    }

    #menuZahlavi #obalMenu #menuList .toggle-submenu .mobile-submenu {
        display: none;
    }

    /* Podmenu v mobilu */
    #menuZahlavi #obalMenu #menuList .toggle-submenu .mobile-submenu ul {
        display: flex !important;
        flex-direction: column;
        position: relative;
        padding-left: 0;
    }

    /* vsechny urovne vertikalniho menu */
    #menuZahlavi #obalMenu #menuList LI {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin: auto;
        padding-top: 0;
        padding-bottom: 0;
        text-align: center;
        color: #FFAB17;
    }

    #menuZahlavi #obalMenu #menuList > LI {
        border-top: 1px solid #78bdee;
        background-color: #f6f9fc;
    }

    #menuZahlavi #obalMenu #menuList > LI.open {
        flex-direction: column;
    }

    #menuZahlavi #obalMenu #menuList LI A {
        display: inline-block;
        height: 35px;
        align-content: center;
        margin: 0;
        padding: 15px 6px 16px 6px;
        color: #003f6c;
        font-size: 16px;
        line-height: 19px;
        text-decoration: none;
    }

    #menuZahlavi #obalMenu #menuList LI A:hover,
    #menuZahlavi #obalMenu #menuList LI.aktivni A {
        background: none;
        font-weight: bolder;
    }

    /* druha uroven vertikalniho menu */
    #menuZahlavi #obalMenu #menuList LI LI A {
        color: white;
    }

    #menuZahlavi #obalMenu #menuList LI LI {
        background: linear-gradient(125deg, #0c9fe9, #79cdf0);
        border-top: 1px solid #cbecfc;
    }
}