.nav{
    $width: 100vw;
    $height: 100vh;
    $font--size--calc: calc(2vw + 10px);
    $transition--easing: cubic-bezier(.77,0,.175,1);
    position: fixed;
    z-index:1;
    &:before,&:after{
        content: "";
        position: fixed;
        width:$width;
        height:$height;
        background: rgba(#eaeaea, .2);
        z-index: -1;
        transition: transform $transition--easing $transition--length + s;
        transform: translateX(0%) translateY(-100%);
    }
    &:after{
        background: rgba(#ffffff, 1);
        transition-delay: 0s;
    }
    &:before{
        transition-delay: .1s;
    }
    &__content{
        position: fixed;
        top:50%;
        transform: translate(0%,-50%);
        width: 100%;
        text-align: center;
        font-size: $font--size--calc;
        font-weight: 200;
        cursor: pointer;
    }
    &__list-item{
        position: relative;
        display: inline-block;
        transition-delay: $transition--length + s;
        opacity: 0;
        transform: translate(0%, 100%);
        transition: opacity .2s ease, transform .3s ease;
        margin-right: 25px;
        &:before{
            content: "";
            position: absolute;
            background: $font--color--active;
            width: 20px;
            height: 1px;
            top: 100%;
            transform: translate(0%, 0%);
            transition: all .3s ease;
            z-index: -1;
        }
        &:hover{
            &:before{
                width: 100%;
            }
        }
    }
}

//active state
body.nav-active{
    $menu--items--count: 4;
    .menu-icon{
        &__line{
            background-color: #000;
            transform: translateX(0px) rotate(-45deg);
        }
        &__line-left{
            transform: translateX(1px) rotate(45deg);
        }
        &__line-right{
            transform: translateX(-2px) rotate(45deg);
        }
    }
    .nav{
        visibility:visible;
        &:before,&:after{
            transform: translateX(0%) translateY(0%);
        }
        &:after{
            transition-delay: .1s;
        }
        &:before{
            transition-delay: 0s;
        }
        &__list-item{
            opacity: 1;
            transform: translateX(0%);
            transition: opacity .3s ease, transform .3s ease, color .3s ease;
            @for $i from 0 through $menu--items--count {
                &:nth-child(#{$i}){
                    transition-delay: $transition--length * $i / 8 + .5 + s;
                }
            }
        }
    }
}