#top-bar {
    display: none;
    height: 5rem;
    background-color: #313b45;
    z-index: 999
}


.anchor {
    top: -5rem
}

#menu {
    font-size: 1.25rem;
    color: #fff !important;
    z-index: 100
}

#menu li a:hover,
#menu li a:active {
    color: #fff !important
}

#menu li a::after {
    display: block;
    content: "";
    border-bottom: solid 1px #fff;
    transform: scaleX(0);
    transition: transform 250ms ease-in-out;
    transform-origin: 0% 50%
}

#menu li a:hover::after,
#menu li a:active::after,
#menu li a.is-active::after {
    transform: scaleX(1)
}

#nav_button {
    z-index: 300;
    cursor: pointer
}

#nav_button a {
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
}

#nav_button a span {
    transition-duration: 0
}

#nav_button a span::before,
#nav_button a span::after {
    content: "";
    position: absolute;
    transition-property: margin, transform;
    transition-duration: .2s;
    transition-delay: .2s, 0
}

#nav_button a span::before {
    margin-top: -0.8rem
}

#nav_button a span::after {
    margin-top: .8rem
}

#nav_button a span,
#nav_button a span:before,
#nav_button a span:after {
    display: block;
    width: 3rem;
    height: .1rem;
    background-color: #fff
}

#nav_button a:hover span,
#nav_button a:hover span:before,
#nav_button a:hover span:after {
    background-color: #fff
}

#nav_button a.open span {
    background-color: rgba(0, 0, 0, 0)
}

#nav_button a.open span::before,
#nav_button a.open span::after {
    background-color: #313b45;
    margin-top: 0;
    transform: rotate(45deg);
    transition-delay: 0s, .2s
}

#nav_button a.open span::before {
    transform: rotate(45deg)
}

#nav_button a.open span::after {
    transform: rotate(-45deg)
}

#nav_button a.open:hover span:before,
#nav_button a.open:hover span:after {
    background-color: #fff
}

@media(max-width: 767px) {
    .anchor {
        top: -4.5rem
    }

    #top-bar {
        height: 5rem
    }

    #menu {
        position: fixed;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        flex-direction: column;
        justify-content: center;
        padding: 6rem 2.5rem;
        font-size: 1.75rem;
        background-color: #313b45
    }

    #menu li {
        padding-top: 2rem;
        align-self: start
    }

    #menu.open {
        display: flex
    }

    #nav_button a.open span:before,
    #nav_button a.open span:after {
        background-color: #fff
    }
}