div.header {
    background-color: var(--mp-dark);
    padding: 24px 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

img.logo {
    display: inline-block;
    width:209px;
    height:37px;
    z-index: 1;
}

img.hamburger-menu {
    display: none;
    z-index: 2;
}

ul.nav-bar {
    display: inline-block;
}

li.nav-bar-item {
    display: inline-block;
}

a.nav-bar-link {
    font-family: "Nexa Heavy", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.25rem;
    color: var(--mp-dark-blue);
    text-decoration: none;
    margin-left: 1.6em;
}

/* Modal responsive styles. */
div.modal {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    display: none;
    background-color: var(--mp-dark);
    text-align: center;
    padding-top: 112px;
}

a.modal-nav-bar-link {
    font-family: "Nexa Regular", Arial, Helvetica, sans-serif;
    font-size: 1.875rem;
    color: #ffffff;
    text-decoration: none;
    display: block;
    padding-bottom: 1.2em;
}

/* Styles for medium width: Portrait tablets or resizing to a smaller window on desktop. */
@media screen and (max-width: 1023px) {
    /* Header section responsive styles. */
    div.header {
        padding: 24px 36px;
    }

    img.hamburger-menu {
        display: inline;
        width: 36px;
        height: 36px;
    }

    ul.nav-bar {
        display: none;
    }
}

/* Styles for small width: Phones. */
@media screen and (max-width: 569px) {
    div.header {
        padding: 18px 16px;
    }

    /* Header responsive styles. */
    img.logo {
        width: auto;
        height: 16px;
    }

    img.hamburger-menu {
        height: 20px;
        width: auto;
    }
}