.nav-top-logo { width: 200px; }

.nav-top-icon
{ 
    padding-right: 10px;
    width: 24px;
    vertical-align: sub;

    filter:

        invert(36%)
        sepia(99%)
        saturate(2870%)
        hue-rotate(187deg)
        brightness(91%)
        contrast(101%);
}

.nav-top
{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    background-color: #122348;
}

.nav-top-header
{
    display: block;
    background-color: #00071a;
}

.nav-top-item
{
    cursor: pointer;
    padding: 20px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}

.nav-top-item:hover { background-color: #004492; }

.nav-top-static { padding: 10px 20px; }

@media only screen and (min-width: 320px)
{
    .nav-top { justify-content: flex-start; }
    .nav-top-header { display: block; }
}

@media only screen and (min-width: 640px)
{
    .nav-top { justify-content: flex-start; }
    .nav-top-header { display: block; }
}

@media only screen and (min-width: 1024px)
{
    .nav-top { justify-content: flex-end; }
    .nav-top-header { display: none; }
}