@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: #0f1012;

	 z-index: 5;

	 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: 50%;
	 margin:auto;

}

 .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:15px;

}

 .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 (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: transparent;

		 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);

	}

}