﻿/*****************************************************************************
** ModuleMenu
*****************************************************************************/

@media all {
    .MMCLogo { text-align: center; overflow: hidden; margin-bottom: 10px; }
        .MMCLogo img { max-height: 60px; display: inline-block; }

    .MMCMenuMobile { display: none; text-align: right; height: 60px; }
        .MMCMenuMobile .MMCLogo { float: left; margin-bottom: 0; margin-left: 10px; display: none; }
            .MMCMenuMobile .MMCLogo img { }
    button.MMCMenu { width: 40px; height: 40px; padding-left: 0; padding-right: 0; pointer-events: visible; margin: 20px 0 0 0; }
        button.MMCMenu[aria-expanded='true'] { color: #fff; background-color: #17406d; border-color: #17406d; }

    div.MMCMenu { }
    ul.MMCMenu { list-style: none; padding: 0; margin: 0; margin-bottom: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: flex-start; }
        ul.MMCMenu > li { background-color: #ddd; color: #fff; flex-grow: 1; flex-shrink: 1; flex-basis: auto; margin: 0 5px; height: 60px; cursor: pointer; }
            ul.MMCMenu > li:hover { }
            ul.MMCMenu > li:first-child { margin-left: 0; }
            ul.MMCMenu > li:last-child { margin-right: 0; }
            ul.MMCMenu > li > a { color: #fff; width: 100%; height: 100%; text-transform: uppercase; font-size: 0.8125rem; font-weight: 600; line-height: 20px; display: inline-flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: flex-start; text-align: center; padding: 0 20px; }
                ul.MMCMenu > li > a:hover { text-decoration: none; }
                ul.MMCMenu > li > a > span { display: inline-block; }
                    ul.MMCMenu > li > a > span:first-child { padding: 5px 20px 5px 0; flex-grow: 1; flex-shrink: 1; flex-basis: auto; }
                    ul.MMCMenu > li > a > span:last-child { flex-grow: 0; flex-shrink: 0; flex-basis: 15px; }
                        ul.MMCMenu > li > a > span:last-child img { display: inline-block; max-width: 15px; max-height: 15px; }
                ul.MMCMenu > li > a[aria-expanded='true'] { }
            ul.MMCMenu > li[aria-haspopup='true'] > a { }
            ul.MMCMenu > li > ul { z-index: 10; position: relative; margin: 0; padding: 0; list-style: none; }
                ul.MMCMenu > li > ul[aria-hidden='true'] { visibility: hidden; opacity: 0; }
                ul.MMCMenu > li > ul[aria-hidden='false'] { visibility: visible; opacity: 1; }
                ul.MMCMenu > li > ul > li { background-color: #ddd; color: #fff; backdrop-filter: blur(80px); -webkit-backdrop-filter: blur(80px); opacity: 0.9; cursor: pointer; }
                    ul.MMCMenu > li > ul > li:hover { backdrop-filter: blur(80px); -webkit-backdrop-filter: blur(80px); opacity: 1; }
                    ul.MMCMenu > li > ul > li > a { display: inline-block; padding: 10px 20px; width: 100%; }
                        ul.MMCMenu > li > ul > li > a:hover { }
                        ul.MMCMenu > li > ul > li > a > img { display: inline-block; max-width: 32px; max-height: 32px; margin-right: 10px; vertical-align: middle; }
                        ul.MMCMenu > li > ul > li > a > i { font-family: 'IcoMoon'; color: #fff; font-style: normal; display: inline-block; vertical-align: middle; font-size: 1.125rem; font-weight: 400; line-height: 20px; margin-right: 5px; }
                        ul.MMCMenu > li > ul > li > a > span { color: #fff; text-transform: uppercase; display: inline-block; vertical-align: middle; font-size: 0.875rem; font-weight: 400; line-height: 20px; }
}

/*bootstrap grid xxl*/
@media all and (min-width: 1920px) {
}

/*bootstrap grid xl*/
@media all and (max-width: 1919px) and (min-width: 1600px) {
}

/*bootstrap grid lg2*/
@media all and (max-width: 1599px) and (min-width: 1366px) {
    ul.MMCMenu > li > a { font-size: 0.8125rem; padding: 0 20px; }
        ul.MMCMenu > li > a > span:first-child { padding: 5px 10px 5px 0; }
        ul.MMCMenu > li > a > span:last-child { flex-basis: 15px; }
            ul.MMCMenu > li > a > span:last-child img { max-width: 15px; max-height: 15px; }
    ul.MMCMenu > li > ul { width: 200%; }
        ul.MMCMenu > li > ul > li > a { padding: 10px 10px; }
            ul.MMCMenu > li > ul > li > a > img { max-width: 24px; max-height: 24px; margin-right: 5px; }
            ul.MMCMenu > li > ul > li > a > i { font-size: 0.8125rem; font-weight: 400; line-height: 20px; }
            ul.MMCMenu > li > ul > li > a > span { font-size: 0.8125rem; font-weight: 400; line-height: 20px; }
}

/*bootstrap grid lg*/
@media all and (max-width: 1365px) and (min-width: 1200px) {
    ul.MMCMenu > li > a { font-size: 0.8125rem; padding: 0 20px; }
        ul.MMCMenu > li > a > span:first-child { padding: 5px 10px 5px 0; }
        ul.MMCMenu > li > a > span:last-child { flex-basis: 15px; }
            ul.MMCMenu > li > a > span:last-child img { max-width: 15px; max-height: 15px; }
    ul.MMCMenu > li > ul { width: 200%; }
        ul.MMCMenu > li > ul > li > a { padding: 10px 10px; }
            ul.MMCMenu > li > ul > li > a > img { max-width: 24px; max-height: 24px; margin-right: 5px; }
            ul.MMCMenu > li > ul > li > a > i { font-size: 0.8125rem; font-weight: 400; line-height: 20px; }
            ul.MMCMenu > li > ul > li > a > span { font-size: 0.8125rem; font-weight: 400; line-height: 20px; }
}

/*bootstrap grid md*/
@media all and (max-width: 1199px) and (min-width: 992px) {
    ul.MMCMenu > li > a { height: 60px; }
}

/*bootstrap grid sm*/
@media all and (max-width: 991px) and (min-width: 768px) {
    ul.MMCMenu li[data-hide-in-tablet='true'] { display: none; }
}

/*bootstrap grid xs*/
@media all and (max-width: 767px) and (min-width: 577px) {
    ul.MMCMenu li[data-hide-in-mobile='true'] { display: none; }
}

/*bootstrap grid xxs*/
@media all and (max-width: 576px) {
    .MMCMenuMobile .MMCLogo { display: block; }
    ul.MMCMenu li[data-hide-in-mobile='true'] { display: none; }
}

@media all and (max-width: 1199px) {
    .MMCMenuMobile { display: block; }
    div.MMCMenu { position: relative; z-index: 10; }
    ul.MMCMenu { position: absolute; z-index: 100; flex-direction: column; width: 100%; width: calc(100% - 10px); left: 10px; }
        ul.MMCMenu[aria-hidden='true'] { display: none; visibility: hidden; opacity: 0; }
        ul.MMCMenu[aria-hidden='false'] { visibility: visible; opacity: 1; }
        ul.MMCMenu > li { margin: 0; height: auto; }
            ul.MMCMenu > li > a { font-size: 0.8125rem; padding: 10px 20px; }
                ul.MMCMenu > li > a > span:first-child { padding: 5px 10px 5px 0; }
                ul.MMCMenu > li > a > span:last-child { flex-basis: 15px; }
                    ul.MMCMenu > li > a > span:last-child img { max-width: 15px; max-height: 15px; }
            ul.MMCMenu > li > ul[aria-hidden='true'] { display: none; }
            ul.MMCMenu > li > ul > li > a { padding: 10px 10px; }
                ul.MMCMenu > li > ul > li > a > img { max-width: 24px; max-height: 24px; margin-right: 5px; }
                ul.MMCMenu > li > ul > li > a > i { font-size: 0.8125rem; font-weight: 400; line-height: 20px; }
                ul.MMCMenu > li > ul > li > a > span { font-size: 0.8125rem; font-weight: 400; line-height: 20px; }
}

/*screen, bootstrap grid md, mouse*/
@media only screen and (max-width: 1199px) and (min-width: 992px) and (pointer: fine) {
}

/*screen, bootstrap grid sm, mouse*/
@media only screen and (max-width: 991px) and (min-width: 768px) and (pointer: fine) {
}

/*screen, bootstrap grid xs, mouse*/
@media only screen and (max-width: 767px) and (min-width: 577px) and (pointer: fine) {
}

/*screen, bootstrap grid xs, touch*/
@media only screen and (max-width: 1199px) and (min-width: 992px) and (pointer: coarse) {
}

@media only print {
}
