#header-nav{
	position: fixed;
    top: 0;
	z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
	width: 100%;
    height: 5.05rem;
	background-color: #ffffff;
	border-bottom: #0040ad 0.4rem solid;
    box-sizing: border-box;
}

/* Level 1 */
#header-nav > .menu > li {
	display: inline-block;
}
#header-nav > .menu > li > a{
    display: block;
    padding: 1.85rem 2.75rem;
    color: black;
    font-weight: bold;
	text-decoration: none;
}

/* A placeholder for the navbar when jumping to an anchor */
.anchor {
    height: 5.05rem;
}

/* Desktop Style */
@media screen and (min-width: 769px) {

    #navbar-icon {
        display: none;
    }

    /* Level 1 */
    #header-nav > .menu > li:hover > a,
    #header-nav > .menu > li > a:hover {
        background-color: #0040ad;
        color: white;
    }
    #header-nav > .menu > li > a{
        font-size: 1.35rem;
    }

    /* Level 2 */
    #header-nav > .menu > li > .sub-menu {
        display: none;
        position: absolute;
        /* Use the followings to prevent sub-menu from disappearing
         * when mouse hovers at the gap between title and the sub-menu. */
        top: 4.85rem;
        padding-top: 0.2rem;
    }
    #header-nav > .menu > li:hover > .sub-menu {
        display: block;
    }
    #header-nav > .menu > li > .sub-menu > li {
        display: block;
        border-top: white 0.25rem solid;
    }
    #header-nav > .menu > li > .sub-menu > li > a {
        display: block;
        width: 18.2rem;
        padding: 1.85rem 0 1.85rem 2.75rem;
        background-color: rgba(132, 170, 233, 0.8);
        color: black;
        font-size: 1.35rem;
        font-weight: bold;
        text-decoration: none;
    }
    #header-nav > .menu > li > .sub-menu > li > a:hover {
        color: white;
    }

}

/* Mobile Style */
@media only screen and (max-width: 768px) {

    #header-nav {
        position: fixed;
        top: 0;
        z-index: 100;
        width: 12rem;
        height: 100%;
        margin-left: calc(-12rem + 3px);
        background-color: rgba(0, 64, 173, 1);
        text-align: right;
    }
    #header-nav .menu {
        position: absolute;
        top: 3rem;
    }

    /* Level 1 */
    #header-nav > .menu > li {
        width: 100%;
    }
    #header-nav > .menu > li > a{
        position: relative;
        padding: 1rem 2rem;
        color: white;
        font-size: 1.125rem;
    }
    #header-nav > .menu > li.menu-item-has-children > a::after {
        content: '';
        display: inline-block;
        position: absolute;
        top: 55%;
        transform: translateY(-50%);
        right: 0.4375rem;
        width: 1.125rem;
        height: 0.537rem;
        background-image: url('../images/navbar-arrow-m.svg');
        background-size: 1.125rem 0.537rem;
    }
    #header-nav > .menu > li.menu-item-has-children.expanded {
        background-color: #0040ad;
    }
    #header-nav > .menu > li.menu-item-has-children.expanded > a::after {
        top: 45%;
        transform: rotate(180deg);
    }

    /* Level 2 */
    #header-nav > .menu > li > .sub-menu {
        display: block;
        background-color: #0040ad;
    }
    #header-nav > .menu > li > .sub-menu > li > a {
        display: none;
        padding-right: 2rem;
        padding-bottom: 1rem;
        color: white;
        text-decoration: none;
    }
    #header-nav > .menu > li.expanded > .sub-menu > li > a {
        display: block;
    }

    #navbar-icon {
        position: fixed;
        top: 2rem;
        left: 4.25%;
        z-index: 2;
        width: 2rem;
        cursor: pointer;
    }

}