/* navigation - primary/mobile */
@media only screen and (min-width:0)
{
    .navi
    {
        font-size: .75rem;

        position: absolute;
        top: 12px;
        right: 10px;
    }

    .navi__row
    {
        display: flex;
        flex-direction: row;

        margin-left: 0;
        padding-left: 0;
    }

    .navi__list
    {
        display: block;

        text-align: center;

        flex: auto;
    }

    .navi__label
    {
        font-size: 12px;
        font-weight: 400;

        display: block;

        margin: 0 auto;

        text-decoration: none;
    }

    .navi__icon
    {
        display: block;

        width: 32px;
        margin: 0 auto;
    }

    .navi__icon path
    {
        fill: #888;
    }

    .navi__active path
    {
        fill: #015570;
    }

    .navi__active .navi__label
    {
        color: #015570;
    }

    .navi__link,
    .navi__link:visited,
    .navi__link:active
    {
        display: block;

        padding: 8px 10px;

        text-decoration: none;
        text-transform: uppercase;

        color: #000;
        border: 1px solid transparent;
    }

    .navi__link.active
    {
        border: 1px solid #000;
    }
}

@media only screen and (min-width:768px)
{
    .navi__link,
    .navi__link:visited,
    .navi__link:active
    {
        margin-top: 8px;
        padding: 10px 20px;
    }
}

@media only screen and (min-width:1024px)
{
    .navi {
        right: 15px;
    }

    .navi__link,
    .navi__link:visited,
    .navi__link:active
    {
        margin-top: 20px;
        padding: 10px 20px;
    }
}

@media only screen and (min-width:1440px)
{
}