.menu-icon {
	 height: 30px;
	 width: 30px;
	 position: fixed;
	 z-index: 2001;
	 right: 80px;
	 top: 80px;
}
 .menu-icon__line {
	 height: 2px;
	 width: 30px;
	 display: block;
	 background-color: #000;
	 margin-bottom: 4px;
	 transition: transform 0.2s ease, background-color 0.5s ease;
}
 .menu-icon__line-left {
	 width: 15px;
	 margin-bottom: 3px;
}

.nav-active .menu-icon__line-left {
	margin-bottom: 4px;
}

 .menu-icon__line-right {
	 width: 15px;
	 float: right;
}
 .nav {
	 position: fixed;
	 z-index: 2000;
	 top: 0;
	 left: 0;
	 opacity: 0;
	 transition: opacity .5s ease-in;
}

.nav-active .nav {
	opacity: 1;
}




 .nav:before, .nav:after {
	 content: "";
	 position: fixed;
	 width: 100vw;
	 height: 100vh;
	 background: rgba(234, 234, 234, .2);
	 z-index: -1;
	 transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
	 transform: translateX(0%) translateY(-100%);
}
 .nav:after {
	 background: rgba(255, 255, 255, 1);
	 transition-delay: 0s;
}
 .nav:before {
	 transition-delay: 0.1s;
}
 .nav .menu {
	 position: fixed;
	 top: 50%;
	 transform: translate(0%, -50%);
	 width: 100%;
	 text-align: center;
	 font-size: calc(2vw + 10px);
	 font-weight: 200;
	 cursor: pointer;
	 pointer-events: none;
}

.nav-active .nav .menu {
	pointer-events: auto;
}

 .nav ul {
 	padding: 0;
 	margin: 0;
 }

 .nav ul li {
	 position: relative;
	 display: inline-flex;
	 transition-delay: 0.8s;
	 opacity: 0;
	 transform: translate(0%, 100%);
	 transition: opacity 0.2s ease, transform 0.3s ease;
	 margin-right: 25px;
	 margin-bottom: 25px;
}
 .nav ul li:before {
	 content: "";
	 position: absolute;
	 background: #000;
	 width: 20px;
	 height: 1px;
	 top: 100%;
	 transform: translate(0%, 0%);
	 transition: all 0.3s ease;
	 z-index: -1;
}
 .nav ul li:hover:before {
	 width: 100%;
}
 body.nav-active .menu-icon__line {
	 background-color: #000;
	 transform: translateX(0px) rotate(-45deg);
}
 body.nav-active .menu-icon__line-left {
	 transform: translateX(1px) rotate(45deg);
}
 body.nav-active .menu-icon__line-right {
	 transform: translateX(-2px) rotate(45deg);
}
 body.nav-active .nav {
	 visibility: visible;
}
 body.nav-active .nav:before, body.nav-active .nav:after {
	 transform: translateX(0%) translateY(0%);
}
 body.nav-active .nav:after {
	 transition-delay: 0.1s;
}
 body.nav-active .nav:before {
	 transition-delay: 0s;
}
 body.nav-active .nav ul li {
	 opacity: 1;
	 transform: translateX(0%);
	 transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}
 body.nav-active .nav ul li:nth-child(0) {
	 transition-delay: 0.5s;
}
 body.nav-active .nav ul li:nth-child(1) {
	 transition-delay: 0.6s;
}
 body.nav-active .nav ul li:nth-child(2) {
	 transition-delay: 0.7s;
}
 body.nav-active .nav ul li:nth-child(3) {
	 transition-delay: 0.8s;
}
 body.nav-active .nav ul li:nth-child(4) {
	 transition-delay: 0.9s;
}
 body.nav-active .nav ul li:nth-child(5) {
	 transition-delay: 1s;
}
 body.nav-active .nav ul li:nth-child(6) {
	 transition-delay: 1.1s;
}
 body.nav-active .nav ul li:nth-child(7) {
	 transition-delay: 1.2s;
}
 body.nav-active .nav ul li:nth-child(8) {
	 transition-delay: 1.3s;
}
 body.nav-active .nav ul li:nth-child(9) {
	 transition-delay: 1.4s;
}
 body.nav-active .nav ul li:nth-child(10) {
	 transition-delay: 1.5s;
}
 body.nav-active .nav ul li:nth-child(11) {
	 transition-delay: 1.6s;
}
 body.nav-active .nav ul li:nth-child(12) {
	 transition-delay: 1.7s;
}
 body.nav-active .nav ul li:nth-child(13) {
	 transition-delay: 1.8s;
}
 body.nav-active .nav ul li:nth-child(14) {
	 transition-delay: 1.9s;
}
 body.nav-active .nav ul li:nth-child(15) {
	 transition-delay: 2s;
}
 body.nav-active .nav ul li:nth-child(16) {
	 transition-delay: 2.1s;
}
 body.nav-active .nav ul li:nth-child(17) {
	 transition-delay: 2.2s;
}
 body.nav-active .nav ul li:nth-child(18) {
	 transition-delay: 2.3s;
}
 body.nav-active .nav ul li:nth-child(19) {
	 transition-delay: 2.4s;
}
 body.nav-active .nav ul li:nth-child(20) {
	 transition-delay: 2.5s;
}
 body.nav-active .nav ul li:nth-child(21) {
	 transition-delay: 2.6s;
}