.site-nav{
    position: absolute;
    right: 20px;
    top: 60px;
    z-index: 9999;
    background: rgba(226, 181, 0, 1);
    height: 300px;
}
.site-nav ul {
    display: none;
    padding: 1.5em;
}
.site-nav ul li{
    padding: .3em 0;
}

.site-nav ul.opening {
    display: block;
    height: 30px;
}

.site-nav--icon {
    font-size: 1.4em;
    margin-right: 1em;
    width: 1.1em;
    text-align: right;
    color: rgba(255,255,255,.4);
}

.menu-toggle {
    position: absolute;
    padding: 0.8em;
    top: 1em;
    right: .5em;
    cursor: pointer;
    z-index: 9999;
}

.hamburger, .hamburger::before, .hamburger::after {
    content: '';
    display: block;
    background: #EBEBD3;
    height: 3px;
    width: 2em;
    border-radius: 3px;
    -webkit-transition: all ease-in-out 350ms;
    transition: all ease-in-out 350ms;
}

.hamburger::before {
    -webkit-transform: translateY(-7px);
    transform: translateY(-7px);
}

.hamburger::after {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
}

.open .hamburger {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.open .hamburger::before { display: none; }

.open .hamburger::after {
    -webkit-transform: translateY(-1px) rotate(-90deg);
    transform: translateY(-1px) rotate(-90deg);
}

@media (min-width: 780px) {

    .menu-toggle { display: none; }

    .site-nav{
        position: absolute;
        right: 20px;
        top: 60px;
        z-index: 9999;
        background: rgba(226, 181, 0, 0.8);
        height: 300px;
    }
}