/* css of page header */
#page_header {
    margin-bottom: 1rem;
}

#page_header #mobile_view_menu_toggle_icon {
    display: none;
}

#page_header .page_logo {
    background-color: #002A46;
}

#page_header .page_logo img {
    padding-top: 0.3rem;
    padding-left: 0.3rem;
    height: 4rem;
}

#image_slider img {
    width: 100%;
}

.metroline_shaped_navbar {
    display: flex;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 0.25rem;
    justify-content: center;
    align-items: center;
    background-color: #006bb3;
}

.metroline_shaped_navbar_images img {
    float: left;
    max-width: 12.3vw;
}

.navbar ul {
    display: flex;
    flex-direction: row;
    margin: 0; padding: 0;
    list-style-type: none;
    text-align: center;
}

.navbar li {
    height: 100%;
    flex-basis: 100%;
    font-size: 0.9vw;
    font-family: 'Ultra System Sans';
    background-color: #006bb3;
    /*padding: 0.8rem;*/
    margin-left: 0.2rem;
    transition: background-color 0.3s ease-in-out;
}

.navbar a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 0.8rem;
}

.navbar li:nth-of-type(1) {
    margin-left: 0;
}

/* the color of first menu item if the mouse is on the menu item, or the menu is opened */
.navbar li:first-of-type:hover,
.navbar li:first-of-type.opened,
.navbar li:first-of-type.selected_by_mshaped {
    background-color: #ffd800;
}
.navbar li:first-of-type:hover a,
.navbar li:first-of-type.opened a,
.navbar li:first-of-type.selected_by_mshaped a {
    color: black;
}

.navbar li:nth-of-type(2):hover,
.navbar li:nth-of-type(2).opened,
.navbar li:nth-of-type(2).selected_by_mshaped {
    background-color: #cc0000;
}

.navbar li:nth-of-type(3):hover,
.navbar li:nth-of-type(3).opened,
.navbar li:nth-of-type(3).selected_by_mshaped {
    background-color: #0000e6;
}

.navbar li:nth-of-type(4):hover,
.navbar li:nth-of-type(4).opened,
.navbar li:nth-of-type(4).selected_by_mshaped {
    background-color: #4ca22f;
}

.navbar li:nth-of-type(5):hover,
.navbar li:nth-of-type(5).opened,
.navbar li:nth-of-type(5).selected_by_mshaped {
    background-color: #821066;
}

.navbar li:nth-of-type(6):hover,
.navbar li:nth-of-type(6).opened,
.navbar li:nth-of-type(6).selected_by_mshaped {
    background-color: #824c00;
}

.navbar li:nth-of-type(7):hover,
.navbar li:nth-of-type(7).opened,
.navbar li:nth-of-type(7).selected_by_mshaped {
    background-color: #e47203;
}

/* page container max width is about 1600px, so navbar should not use vw units 
if the browser window width is bigger than 1600px */
@media screen and (min-width: 1600px) {

    .metroline_shaped_navbar_images img {
        max-width: 12.3rem;
    }

    .navbar a {
        font-size: 1rem;
    }

}

/* tablet and mobile view*/
@media screen and (max-width: 1024px) {
    #page_header .page_logo, #image_slider, .metroline_shaped_navbar, .navbar .navbar_menu {
        display: none;
    }

    .navbar_menu.active {
        display: block;
    }

    #page_header #mobile_view_menu_toggle_icon {
        display: block;
    }

    #page_header #mobile_view_menu_toggle_icon img {
        height: 3rem;
    }

    .navbar ul {
        flex-direction: column;
        margin: auto;
        /*width: 97%;*/
    }

    .navbar li {
        margin-left: 0;
        margin-bottom: 0.2rem;
        font-size: 1rem;
        
    }
}

@media screen and (max-width: 520px) {
    #page_header #mobile_view_menu_toggle_icon img {
        height: 2rem;
    }
}

/* css of page footer */
#page_footer {
    background-color: #002A46;
    text-align: center;
    padding-top: 0.3rem; /*TODO*/
}

#page_footer_flex_container {
    /*width: 45%;*/
    display: flex;
    justify-content: center; /* horizontal */
    margin: auto;
    padding-top: 0.3rem;
    padding-bottom: 0.2rem;
}

#page_footer img {
    height: 4rem;
}
#page_footer img:first-of-type {
    margin-right: 0.5rem;
}

@media screen and (max-width: 1024px) {
    #page_footer img {
        height: 3rem;
    }
}

@media screen and (max-width: 768px) {
    #page_footer img {
        height: 2.5rem;
    }
}

@media screen and (max-width: 480px) {
    #page_footer img {
        height: 1.7rem;
    }
}