header {
    background-color: rgb(22, 22, 22);
    color: rgb(255, 255, 255);
    padding: 0 24px;
    height: 60px;
}
@media (min-width: 1200px) {
    header {
        height: 72px;
    }
}

/* Header Logo */
#HeaderLogo {
    padding-right: 0
}    
#HeaderLogo .logo {
    height: 34px;
    width: 100px;
}
@media (max-width: 575px) {
    #HeaderLogo {
        padding-left: 0
    }
}
@media (min-width: 1200px) {
    #HeaderLogo .logo {
        height: 41px;
        width: 121px;
    }
}

/* Site Name */
#SiteName {
    height: 60px;
    font-family: "Helvetica Neue LT Std", sans-serif;
    font-size: 18px;
    display: flex;
    align-items: center;
}
@media (min-width: 1200px) {
    #SiteName {
        height: 72px;
        font-size: 23px;
    }
}

/* Header Menu */
#HeaderMenu {
    display: none;
    font-size: 13px;
    position: fixed;
    background: rgb(245, 245, 245);
    max-height: 100vh;
    height: 100vh;
    width: 295px;
    top: 0;
    left: 0;
    overflow: auto;
    color: rgb(22, 22, 22);
    padding: 15px;
    z-index: 2;
}
#HeaderMenu.show {
    display: block;
}
#HeaderMenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#HeaderMenu ul:not(.submenu) > li > span,
#HeaderMenu ul:not(.submenu) > li > a:link,
#HeaderMenu ul:not(.submenu) > li > a:visited,
#HeaderMenu ul:not(.submenu) > li > a:hover {
    display: block;
    padding: 12px 0;
    font-weight: 500;
    color: rgb(22, 22, 22);
    text-decoration: none;
}
#HeaderMenu ul:not(.submenu) > li[aria-expanded='false'] .fa-chevron-up,
#HeaderMenu ul:not(.submenu) > li[aria-expanded='true'] .fa-chevron-down {
    display: none;
}
#HeaderMenu ul:not(.submenu) > li ul.submenu {
    display: none;
}
#HeaderMenu ul:not(.submenu) > li ul.submenu.show {
    display: flex;
}
@media (min-width: 1200px) {
    #HeaderMenu {
        display: flex;
        position: relative;
        background: none;
        height: 72px;
        width: auto;
        overflow: visible;
        color: rgb(255, 255, 255);
        padding: 0;
    }
    #HeaderMenu .util-pull-right {
        float: none;
    }
    #HeaderMenu ul:not(.submenu) {
        display: flex;
        align-content: center;
        align-items: stretch;
        height: 100%;
    }
    #HeaderMenu ul:not(.submenu) > li[aria-expanded='true'] .fa-chevron-up {
        display: none;
    }
    #HeaderMenu ul:not(.submenu) > li[aria-expanded='true'] .fa-chevron-down {
        display: inline;
    }
    #HeaderMenu ul:not(.submenu) > li {
        display: flex;
        align-items: center;
        padding: 0 15px;
        position: relative;
        border-bottom: 4px solid transparent;
    }
    #HeaderMenu ul:not(.submenu) > li > span,
    #HeaderMenu ul:not(.submenu) > li > a:link,
    #HeaderMenu ul:not(.submenu) > li > a:visited,
    #HeaderMenu ul:not(.submenu) > li > a:hover {
        color: rgb(255, 255, 255);
    }
    #HeaderMenu ul:not(.submenu) > li.nav-blue[aria-expanded='true'],
    #HeaderMenu ul:not(.submenu) > li.nav-blue:hover {
        border-bottom: 4px solid rgb(6, 178, 227);
    }
    #HeaderMenu ul:not(.submenu) > li.nav-yellow[aria-expanded='true'],
    #HeaderMenu ul:not(.submenu) > li.nav-yellow:hover {
        border-bottom: 4px solid rgb(252, 204, 0);
    }
    #HeaderMenu ul:not(.submenu) > li.nav-pink[aria-expanded='true'],
    #HeaderMenu ul:not(.submenu) > li.nav-pink:hover {
        border-bottom: 4px solid rgb(229, 0, 148);
    }
    #HeaderMenu ul:not(.submenu) > li ul.submenu {
        display: none;
    }
    #HeaderMenu ul:not(.submenu) > li:hover ul.submenu,
    #HeaderMenu ul:not(.submenu) > li ul.submenu.show {
        display: flex;
    }
}

/* Login Menu */
#LoginMenu {
    font-size: 13px;
    height: 60px;
}
#LoginMenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#LoginMenu ul:not(.submenu) {
    display: flex;
    align-content: center;
    align-items: stretch;
    height: 100%;
}
#LoginMenu ul:not(.submenu) > li {
    display: flex;
    align-items: center;
    padding: 0 15px;
    position: relative;
    border-bottom: 4px solid transparent;
}
#LoginMenu ul:not(.submenu) > li:not(.no-effects)[aria-expanded='true'],
#LoginMenu ul:not(.submenu) > li:not(.no-effects):hover {
    border-bottom: 4px solid rgb(6, 178, 227);
}
#LoginMenu ul:not(.submenu) > li ul.submenu {
    display: none;
}
/*#LoginMenu ul:not(.submenu) > li:hover ul.submenu,*/
#LoginMenu ul:not(.submenu) > li ul.submenu.show {
    display: flex;
}
#LoginMenu ul:not(.submenu) a.btn {
    background-color: rgba(92, 92, 92, 0.25);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 10px 16px;
    color:rgb(255, 255, 255);
}
@media (min-width: 1200px) {
    #LoginMenu {
        height: 72px;
    }
}

/* Sub Menu */
#HeaderMenu ul.submenu,
#LoginMenu ul.submenu {
    display: flex;
    flex-direction: column;
}
#LoginMenu ul.submenu {
    position: absolute;
    top: 60px;
    right: 0;
    z-index: 1;
    background-color: rgb(245, 245, 245);
}

#HeaderMenu ul.submenu li,
#LoginMenu ul.submenu li {
    padding: 5px;
    background-color: rgb(255, 255, 255);
    color: rgb(22, 22, 22);
    width: 100%;
    margin-bottom: 5px;
}
#HeaderMenu ul.submenu li a:link,
#HeaderMenu ul.submenu li a:visited,
#HeaderMenu ul.submenu li a:hover,
#LoginMenu ul.submenu li a:link,
#LoginMenu ul.submenu li a:visited,
#LoginMenu ul.submenu li a:hover {
    color: rgb(22, 22, 22);
    text-decoration: none;
}
@media (min-width: 1200px) {
    #HeaderMenu ul.submenu {
        position: absolute;
        top: 72px;
        left: 0;
        z-index: 1;
        background-color: rgb(245, 245, 245);
    }
    #LoginMenu ul.submenu {
        top: 72px;
    }
    
}

/* Sub Menu (1x) */
#LoginMenu ul.submenu-1x {
    width: 274px;
    padding: 15px 15px 10px 15px;
}
@media (min-width: 1200px) {
    #HeaderMenu ul.submenu-1x {
        width: 274px;
        padding: 15px 15px 10px 15px;
    }
}

/* Sub Menu (2x) */
#LoginMenu ul.submenu-2x {
    width: 532px;
    padding: 15px 0 10px 15px;
    flex-direction: row;
    flex-wrap: wrap;
}
#LoginMenu ul.submenu-2x li {
    width: calc(50% - 15px);
    margin-right: 15px;
}
@media (min-width: 1200px) {
    #HeaderMenu ul.submenu-2x {
        width: 532px;
        padding: 15px 0 10px 15px;
        flex-direction: row;
        flex-wrap: wrap;
    }
    #HeaderMenu ul.submenu-2x li {
        width: calc(50% - 15px);
        margin-right: 15px;
    }
}