@keyframes delay-pointer-events {
	 0% {
		 pointer-events: none;
	}
	 99% {
		 pointer-events: none;
	}
	 100% {
		 pointer-events: all;
	}
}
 .nav {
	 width: 100px;
	 padding: 53px 40px 0;
	 overflow: hidden;
	 position: fixed;
	 height: 100%;
	 left: 0;
	 background-color: black;
	 z-index: 3;
	 color: #fff;
	 transform: translateX(-100%);
	 will-change: opacity, width, transform, background-color;
	 transition: opacity 0.5s ease-in-out 2.5s, width 0.5s ease-in-out 0s, transform 0.5s ease-in-out 2.5s, background-color 0.5s ease-in-out;
	 justify-content: center;
	 display: flex;
	 flex-direction: column;
	 opacity: 0;
}
 .nav__logo {
	 display: block;
	 pointer-events: none;
	 position: relative;
	 transform: translateX(-18px);
	 width: 100px;
	 will-change: transform;
	 transition: transform 0.5s ease-in-out, margin 0.5s ease-in-out, pointer-events 0.5s ease-in-out 0.1s;
	 transform-origin: top left;
}
 .nav__logo img {
	 display: block;
	 width: 70%;
}
 .nav__menu {
	 pointer-events: none;
	 font-size: 26px;
	 line-height: 31px;
	 font-weight: 300;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: flex-start;
	 padding: 0;
	 margin: 0;
	 width: 241px;
	 list-style: none;
	 flex: 1;
}
 .nav__menu__unit {
	 cursor: pointer;
	 opacity: 1;
	 padding-left: 60px;
	 position: relative;
	 margin-bottom: 16px;
}
 .nav__menu__unit a {
	 will-change: opacity, transform;
	 display: inline-block;
	 transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
	 transform: translateX(20px);
	 opacity: 0;
	 font-size:17px;
}
 .nav__menu__unit__icon {
	 font-size: 0;
	 line-height: 0;
	 top: 50%;
	 transform: translateY(-50%);
	 left: 12px;
	 transition: background-color 0.5s ease-in-out;
	 position: absolute;
	 margin: 0 auto;
	 display: block;
	 width: 6px;
	 height: 6px;
	 min-height: 6px;
	 min-width: 6px;
	 border-radius: 6px;
	 background-color: #fff;
}
 .nav__menu__unit__icon svg {
	 overflow: visible;
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%) rotate(-90deg);
}
 .nav__menu__unit__icon svg circle {
	 will-change: stroke-dasharray, stroke-dashoffset;
	 transition: 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
	 stroke-dasharray: 50px;
	 stroke-dashoffset: 50px;
}
 .nav__menu__unit__icon:before {
	 background-color: #c4c4c4;
	 position: absolute;
	 bottom: calc(100% + 4px);
	 left: 50%;
	 transform: translateX(-50%) scaleY(0);
	 transform-origin: center top;
	 content: "";
	 width: 1px;
	 height: 32px;
	 transition: transform 0.5s ease-in-out 0.8s;
}
 .nav__menu__unit--small {
	 font-size: 18px;
}
 .nav__menu__unit--small:before, .nav__menu__unit--small:after {
	 top: 9px;
	 width: 16px;
	 left: 15px;
}
 .nav__menu__unit--small .nav__menu__unit__icon {
	 background-color: #969696;
}
 .nav__menu__unit--small a {
	 display: inline-block;
	 padding-left: 15px;
}
 .nav__menu__unit--active a {
	 opacity: 1;
}
 .nav__menu__unit--active .nav__menu__unit__icon svg circle {
	 transition: 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.5s;
	 stroke-dashoffset: 0;
}
 .nav__menu__unit--active .nav__menu__unit__icon:before {
	 transition: transform 0.5s ease-in-out 0s;
	 transform: translateX(-50%) scaleY(1);
}
 .nav__menu__unit:hover a {
	 opacity: 1;
}
 .nav__menu__unit--prev .nav__menu__unit__icon svg circle {
	 transition: 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.5s;
	 stroke-dashoffset: 0;
}
 .nav__menu__unit--prev .nav__menu__unit__icon:before {
	 transition: transform 0.5s ease-in-out 0s;
	 transform: translateX(-50%) scaleY(1);
}
 .nav__menu__unit:last-child {
	 margin-bottom: 0;
}
 .nav__menu__unit:first-child .nav__menu__unit__icon:before {
	 display: none;
}
 .nav__menu__submenu {
	 margin: 12px 0;
}
 .nav--hover {
	 width: 321px;
}
 .nav--hover .nav__menu {
	 pointer-events: all;
}
 .nav--hover .nav__menu__unit a {
	 opacity: 0.7;
	 transform: translateX(0);
}
 .nav--hover .nav__menu__unit:hover a {
	 opacity: 1;
}
 .nav--hover .nav__menu__unit--active a {
	 opacity: 1;
}
 .nav--hover .nav__logo {
	 pointer-events: all;
	 transform: scale(1.5909090909) translateX(38px);
}
 .nav--shown {
	 opacity: 1;
	 transform: translateX(0);
}
 .nav--filled {
	 background-color: rgba(15, 16, 18, 1);
}
 .nav--work {
	 transition: opacity 0.5s ease-in-out 0.5s, width 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0.5s, background-color 0.5s ease-in-out;
}
 .nav--work .nav__menu {
	 width: 300px;
}
 .nav--work.nav--hover {
	 width: 380px;
}
 .nav--work.nav--hover .nav__logo {
	 transform: scale(1.5909090909) translateX(63px);
}
@media (min-width: 2000px) {
 .nav__menu__unit__icon:before {
	 height: 35px;
}
}
 @media (max-width: 1600px) {
	 .nav {
		 padding: 36px 26px 0;
		 width: 75px;
	}
	 .nav__logo {
		 transform: translateX(-13px);
		 width: 49px;
	}
	 .nav__menu {
		 font-size: 20px;
		 line-height: 23px;
		 width: 180px;
	}
	 .nav__menu__unit {
		 padding-left: 45px;
		 margin-bottom: 12px;
	}
	 .nav__menu__unit:before, .nav__menu__unit:after {
		 width: 23px;
		 top: 11px;
	}
	 .nav__menu__unit__icon {
		 left: 9px;
	}
	 .nav__menu__unit__icon:before {
		 height: 21px;
	}
	 .nav__menu__unit--small {
		 font-size: 14px;
	}
	 .nav--hover {
		 width: 240px;
	}
	 .nav--hover .nav__logo {
		 transform: scale(1.5909090909) translateX(33px);
	}
	 .nav--work .nav__menu {
		 width: 235px;
	}
	 .nav--work.nav--hover {
		 width: 287px;
	}
	 .nav--work.nav--hover .nav__logo {
		 transform: scale(1.59091) translateX(50px);
	}
}
 @media (max-width: 1023px) {
	 .nav {
		 padding: 47px 26px 0;
	}
}
 @media (max-width: 760px) {
	 .nav {
		 background-color: black;
		 padding: 60px 10px 38px;
		 width: 50px;
		 overflow: visible;
	}
	 .nav--hover {
		 padding: 60px 10px 38px;
		 width: 40px;
	}
	 .nav--hover .nav {
		 width: 40px;
	}
	 .nav--hover .nav__logo {
		 width: 35px;
		 transform: scale(1);
		 margin-left: 0;
	}
	 .nav__menu {
		 pointer-events: all;
		 width: 20px;
		 overflow-x: hidden;
		 overflow-y: auto;
	}
	 .nav__menu__unit {
		 width: 100%;
		 padding-left: 0;
		 height: 7px;
		 margin-bottom: 24px;
	}
	 .nav__menu__unit a {
		 display: none;
	}
	 .nav__menu__unit:before, .nav__menu__unit:after {
		 display: none;
		 top: 4px;
		 width: 20px;
	}
	 .nav__menu__unit__icon {
		 left: 0px;
		 position: relative;
	}
	 .nav__menu__unit__icon:before {
		 height: 17px;
	}
	 .nav__menu__unit--hide-mobile {
		 display: none;
	}
	 .nav--filled {
		 background-color: transparent;
	}
	 .nav__logo {
		 top: 25px;
		 left: 3px;
		 position: fixed;
		 width: 35px;
		 transform: scale(1);
		 margin-left: 0;
	}
	 .nav--work .nav__menu {
		 width: 20px;
	}
	 .nav--work.nav--hover {
		 width: 50px;
	}
	 .nav--work.nav--hover .nav__logo {
		 transform: scale(1);
	}
}