#burger{
    display:none;
    position:absolute;
    float:right;
    background-color:transparent;
    height:inherit;
}

@media (max-width: 767px){
    #burger{
        display:block;
    }
}

#burger nav{
    position:absolute;
    min-width:100vw;
    background-color:#fff;
    height:0px;
    transition:height .5s linear;
    overflow: scroll;
}

#burger nav ul{
    opacity:0;
    transition:opacity .3s linear;
}

#burger #burger-trigger{
    position: absolute;
    visibility:hidden;
}

#burger #burger-trigger:checked ~ nav {
    height:100vh;
}

#burger #burger-trigger:checked ~ nav ul {
    opacity:1;
    transition:opacity .5s linear;
    transition-delay: .5s;
}

#burger .burger-animation {
    width: 26px;
    height: 20px;
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

#burger .burger-animation span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #fff;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}


#burger .burger-animation span:nth-child(1) {
    top: 0px;
}

#burger .burger-animation span:nth-child(2),.burger-animation span:nth-child(3) {
    top: 8px;
}

#burger .burger-animation span:nth-child(4) {
    top: 16px;
}

#burger #burger-trigger:checked ~ .animation-holder .burger-animation span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
}

#burger #burger-trigger:checked ~ .animation-holder .burger-animation span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

#burger #burger-trigger:checked ~ .animation-holder .burger-animation span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#burger #burger-trigger:checked ~ .animation-holder .burger-animation span:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
}

#burger .animation-holder{
    position: relative;
    width: 26px;
    height: inherit;
    margin-right: 16px;
}