nav#header-menu {
    margin: auto 0;
    font-size: 16px;
}

nav#header-menu span {
    margin: 0 16px;
}

nav#header-menu a {
    font-weight: bold;

    opacity: 0.6;
    color: black;
    text-transform: uppercase;
    padding-bottom: 8px;
    border-bottom: 2px solid white;
    transition: padding-bottom .2s ease-out, border-bottom-color .2s ease-out;
}

nav#header-menu a:hover:not(.selected) {
    border-bottom: 2px solid black;
    padding-bottom: 2px;
    opacity: 1;
}

nav#header-menu .hamburger {
    outline: 0;
}



nav#header-menu a.selected {
    padding-bottom: 2px;
    opacity: 1;
    cursor: text;
}

nav#header-menu .hamburger{
    display:none;
}

@media only screen and (max-width: 767px) {
    nav#header-menu .hamburger{
        display:block;
        position: relative;
        left: -16px;
        top: 16px;
    }

    nav#header-menu {
        position: absolute;
        top: 0;
        bottom: 0;
        right: -162px;
        width: 256px;
        box-shadow: none;
        transition: box-shadow 0.2s ease-out, right 0.2s ease-out;
    }

    nav#header-menu .menu-items{
        display: none;
        flex-direction: column;
        margin: 32px;
    }
    nav#header-menu .menu-items a{
        padding-bottom: 16px !important;
        border-bottom: none !important;
        transition: none !important;
    }
    nav#header-menu.is-active .menu-items{
        display: flex;
    }
    nav#header-menu.is-active{
        box-shadow: rgba(0, 0, 0, 0.12) -2px 3px 20px 0;
        background-color: white;
        top: 0;
        bottom: 0;
        right: 0;
    }
    nav#header-menu.is-active .hamburger{
        left: -16px;
    }
}