.nav {
    position: fixed;
    border-bottom: #E7E9EB solid 1px;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    padding: 24px 32px;
    width: calc(100% - 48px);
    background-color: white;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.nav-logo {
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
}

    .nav-logo img {
        height: 48px;
    }

    .nav-logo h3 {
        margin-left: 12px;
    }

.nav ul {
    display: flex;
    flex-flow: row;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
    margin: 0px !important;
}

    .nav ul a {
        text-decoration: none;
        display: block;
        padding: 6px 0px;
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: #222322;
        margin: 0px 24px;
    }

        .nav ul a:hover {
            border-bottom: 4px solid cornflowerblue;
            margin-bottom: -4px;
       }

.call-out-button:hover {
    opacity: 0.8;
    border-bottom: unset !important;
    margin-bottom: 0px !important;
}

.display-nav-links {
    display: flex !important;
}

.menu-icon {
    display: none;
}


@media all and (max-width: 720px) {
    .nav {
        flex-flow: column wrap;
        align-items: stretch;
        padding: 12px 16px;
        width: calc(100% - 32px);
    }

    .nav-logo {
        justify-content: space-between;
    }

    .nav ul {
        display: none;
        flex-flow: column;
        justify-content: space-between;
        padding: 12px 0px;
    }

        .nav ul li {
            padding: 12px 0px;
        }

            .nav ul li a {
                padding: 0px;
            }

    .menu-icon {
        display: unset;
    }
}