@charset "utf-8";

/* CSS Document */



.menu {

	 position: fixed;

	 top: 0;

	 right: 0;

	 height: 100%;

	 width: 100%;

	 z-index: 5;

	 pointer-events: none;

}

 .menu__wrap {

	 justify-content: space-between;

	 height: 100%;

	 display: flex;

}

 .menu__list {

	 padding: 100px 0 45px;

	 z-index: 5;

	 position: relative;

	 width: 0;

	 display: flex;

	 flex-direction: column;

	 justify-content: center;

	 color: #fff;

	 font-size: 30px;

	 line-height: 58px;

	 font-weight: 300;

	 letter-spacing: -1.03571px;

	 text-transform: uppercase;

	 background-color: #0f1012;

	 will-change: width;

	 transition: width 0.2s ease-in-out 0.7s;

	 text-align: center;

}

 .menu__list__unit {

	 overflow: hidden;

	 display: flex;

	 justify-content: center;

	 margin-bottom: 55px;

}

 .menu__list__unit a {

	 will-change: transform;

	 transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);

	 display: inline-block;

	 overflow: hidden;

	 color: grey;

	 transform: translateY(104%);

	 position: relative;

	 padding: 0 5px;

}

 .menu__list__unit a span {

	 position: relative;

	 display: inline-block;

}

 .menu__list__unit a span:before {

	 color: #fff;

	 content: attr(data-text);

	 position: absolute;

	 top: 0;

	 left: 0;

	 height: 100%;

	 font-style: inherit;

	 font-weight: inherit;

	 transition: 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06);

	 width: 0%;

	 white-space: nowrap;

	 overflow: hidden;

}

 .menu__list__unit a:hover span:before {

	 width: 100%;

}

 .menu__list__unit:last-child {

	 margin-bottom: 0;

}

 .menu__list__unit:nth-child(1) a {

	 transition-delay: 0s;

}

 .menu__list__unit:nth-child(2) a {

	 transition-delay: 0.1s;

}

 .menu__list__unit:nth-child(3) a {

	 transition-delay: 0.2s;

}

 .menu__list__unit:nth-child(4) a {

	 transition-delay: 0.3s;

}

 .menu__list__unit:nth-child(5) a {

	 transition-delay: 0.4s;

}

 .menu__list__unit:nth-child(6) a {

	 transition-delay: 0.5s;

}

 .menu__logo {

	 opacity: 0;

	 background-color: #0f1012;

	 position: relative;

	 width: 50%;

	 display: flex;

	 align-items: center;

	 justify-content: center;

	 will-change: opacity;

	 transition: opacity 0.1s ease-in-out 0.5s;

}

 .menu__logo img {

	 opacity: 0;

	 will-change: opacity, transform;

	 transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;

	 transform: translateY(-100%);

	 width: 302px;

}

 .menu__bg {

	 overflow: hidden;

	 position: absolute;

	 top: 0;

	 left: 0;

	 bottom: 0;

	 right: 0;

}

 .menu__bg__unit {

	 position: absolute;

	 top: 50%;

	 width: 100%;

	 height: 100%;

	 left: 50%;

	 transform: translate(-50%, -50%) scale(1.1);

	 opacity: 0;

	 will-change: opacity, transform;

	 transition: 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);

}

 .menu__bg__unit--active {

	 opacity: 1;

	 transition: 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);

	 transform: translate(-50%, -50%) scale(1);

}

 .menu__bg__unit:before {

	 z-index: 100000;

	 content: "";

	 position: absolute;

	 width: 100%;

	 height: 100%;

	 background-color: rgba(0, 0, 0, 0.3);

}

 .menu__bg__unit__bg {

	 will-change: transform;

	 transition: 0.5s linear 0.5s;

	 position: absolute;

	 top: 0;

	 left: 0;

	 width: 100%;

	 height: 100%;

	 transform-origin: bottom right;

	 background-size: cover;

	 background-position: center;

}

 .menu__bg__unit:nth-child(2n-1) .menu__bg__unit__bg {

	 transform-origin: bottom left;

}

 .menu__burger {

	 pointer-events: none;

	 will-change: opacity, visibility;

	 transition: opacity 0.3s ease-in-out 0s, visibility 0.3s ease-in-out 0s;

	 cursor: pointer;

	 position: fixed;

	 top: 2%;

	 right: 18px;

	 z-index: 1000000;

	 cursor: pointer;

	 width: 28px;

	 height: 20px;

}

 .menu__burger span {

	 transition: 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.44);

	 position: absolute;

	 width: 100%;

	 height: 1px;

	 background-color: #fff;

	 left: 0%;

	 transition-delay: 1.1s;

	 transform: translate3d(300%, 0, 0);

	 will-change: top, transform;

}

 .menu__burger span:nth-child(1) {

	 top: 0px;

	 transition: transform 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.1s;

}

 .menu__burger span:nth-child(2) {

	 transition: transform 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.3s, width 0.2s ease-in-out 0s, -webkit-transform 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.3s;

	 top: 9px;

}

 .menu__burger span:nth-child(3) {

	 transition: transform 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.2s, width 0.2s ease-in-out 0s, -webkit-transform 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.2s;

	 top: 18px;

}

 .menu__burger span:nth-child(4) {

	 top: 9px;

	 transform: rotate(45deg) translate3d(300%, 0, 0);

	 transition-delay: 0s;

}

 .menu__burger span:nth-child(5) {

	 top: 9px;

	 transform: rotate(-45deg) translate3d(300%, 0, 0);

	 transition-delay: 0.1s;

}

 .menu__burger--shown {

	 pointer-events: all;

	 transition: pointer-events 0.3s ease-in-out 1s;

}

 .menu__burger--shown span {

	 transform: translate3d(0%, 0, 0);

}

 .menu__burger:hover span:nth-child(2) {

	 width: 120%;

}

 .menu__burger:hover span:nth-child(3) {

	 width: 80%;

}

 .menu__socials {

	 opacity: 0;

	 visibility: hidden;

	 transition: 0.7s cubic-bezier(0.77, 0, 0.175, 1);

	 position: absolute;

	 bottom: 40px;

	 left: 50%;

	 transform: translateX(-50%);

}

 .menu:after {

	 background-color: #0f1012;

	 right: 0px;

	 top: 0px;

	 width: 100%;

	 transform: scaleX(0);

	 transform-origin: center right;

	 height: 100%;

	 content: "";

	 position: absolute;

	 will-change: transform;

	 transition: transform 1.5s cubic-bezier(0.05, 0.4, 0.2, -4);

}

 .menu--no-delay .menu__burger span:nth-child(1) {

	 top: 0px;

	 transition: transform 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.2s;

}

 .menu--no-delay .menu__burger span:nth-child(2) {

	 transition: transform 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.4s, width 0.2s ease-in-out 0s, -webkit-transform 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.4s;

	 top: 9px;

}

 .menu--no-delay .menu__burger span:nth-child(3) {

	 transition: transform 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.3s, width 0.2s ease-in-out 0s, -webkit-transform 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.3s;

	 top: 18px;

}

 .menu--no-delay .menu__burger span:nth-child(4) {

	 top: 9px;

	 transform: rotate(45deg) translate3d(300%, 0, 0);

	 transition-delay: 0s;

}

 .menu--no-delay .menu__burger span:nth-child(5) {

	 top: 9px;

	 transform: rotate(-45deg) translate3d(300%, 0, 0);

	 transition-delay: 0.1s;

}

 .menu--active {

	 pointer-events: all;

}

 .menu--active:after {

	 transform: scaleX(0.5);

	 transition: transform 1.5s cubic-bezier(0.05, 0.4, 0.2, 4);

}

 .menu--active .menu__logo {

	 opacity: 1;

}

 .menu--active .menu__logo img {

	 opacity: 1;

	 transform: translateY(0);

	 transition-delay: 1.2s;

}

 .menu--active .menu__list {

	 will-change: width;

	 transition: width 0.2s ease-in-out;

	 width: 50%;

	 position: relative;

}

 .menu--active .menu__list__unit a {

	 transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1);

	 transform: translateY(0);

}

 .menu--active .menu__list__unit:nth-child(1) a {

	 transition-delay: 0.8s;

}

 .menu--active .menu__list__unit:nth-child(2) a {

	 transition-delay: 0.9s;

}

 .menu--active .menu__list__unit:nth-child(3) a {

	 transition-delay: 1s;

}

 .menu--active .menu__list__unit:nth-child(4) a {

	 transition-delay: 1.1s;

}

 .menu--active .menu__list__unit:nth-child(5) a {

	 transition-delay: 1.2s;

}

 .menu--active .menu__list__unit:nth-child(6) a {

	 transition-delay: 1.3s;

}

 .menu--active .menu__bg__unit--active .menu__bg__unit__bg {

	 transition: 100s linear 0.5s;

	 transform: scale(2);

}

 .menu--active .menu__burger span {

	 transition-delay: 0s;

	 transform: translate3d(300%, 0, 0);

}

 .menu--active .menu__burger span:nth-child(2) {

	 transition: transform 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.3s, width 0.2s ease-in-out 0s, -webkit-transform 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.3s;

}

 .menu--active .menu__burger span:nth-child(3) {

	 transition: transform 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.2s, width 0.2s ease-in-out 0s, -webkit-transform 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.2s;

}

 .menu--active .menu__burger span:nth-child(4) {

	 transform: rotate(45deg);

	 transition-delay: 0.7s;

}

 .menu--active .menu__burger span:nth-child(5) {

	 transform: rotate(-45deg);

	 transition-delay: 0.8s;

}

 .menu--active .menu__socials {

	 opacity: 1;

	 visibility: visible;

	 transition: 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0.8s;

}

 @media (max-width: 1600px) {

	 .menu__logo img {

		 width: 225px;

	}

	 .menu__list {

		 font-size: 30px;

		 line-height: 44px;

	}

	 .menu__list__unit {

		 margin-bottom: 41px;

	}

}

 @media (max-width: 1023px) {

	 .menu__logo img {

		 width: 179px;

	}

	 .menu__list {

		 letter-spacing: -2px;

	}

}

 @media (max-width: 760px) {

	 .menu__logo {

		 display: none;

	}

	 .menu__burger {

		 top: 25px;

		 right: 15px;

	}

	 .menu__burger:hover span:nth-child(2) {

		 width: 100%;

	}

	 .menu__burger:hover span:nth-child(3) {

		 width: 100%;

	}

	 .menu__list {

		 height: 100%;

		 width: 100%;

		 transition: transform 0.1s linear 1s;

		 transform: scaleX(0);

		 transform-origin: center right;

		 letter-spacing: 0px;

		 font-size: 30px;

		 line-height: 29px;

	}
	.menu__list__unit {

		 margin-bottom: 20px;

	}

	 .menu__wrap {

		 display: block;

	}

	 .menu__socials {

		 bottom: 25px;

	}

	 .menu:after {

		 transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);

		 width: 100%;

	}

	 .menu--no-delay .menu__burger {

		 pointer-events: all;

		 transition: pointer-events 0.3s ease-in-out 1s;

	}

	 .menu--no-delay .menu__burger span {

		 transform: translate3d(0%, 0, 0);

	}

	 .menu--active:after {

		 transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);

		 transform: scaleX(1);

	}

	 .menu--active .menu__list {

		 transition: transform 0.1s linear 0.6s;

		 width: 100%;

		 transform: scaleX(1);

	}

	 .menu--active .menu__burger span {

		 transition-delay: 0s;

		 transform: translate3d(300%, 0, 0);

	}

	 .menu--active .menu__burger span:nth-child(2) {

		 transition: transform 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.3s, width 0.2s ease-in-out 0s, -webkit-transform 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.3s;

	}

	 .menu--active .menu__burger span:nth-child(3) {

		 transition: transform 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.2s, width 0.2s ease-in-out 0s, -webkit-transform 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.2s;

	}

	 .menu--active .menu__burger span:nth-child(4) {

		 transform: rotate(45deg);

		 transition-delay: 0.7s;

	}

	 .menu--active .menu__burger span:nth-child(5) {

		 transform: rotate(-45deg);

		 transition-delay: 0.8s;

	}

}

 @media (max-width: 350px) {

	 .menu__list {

		 padding-top: 20px;

	}

}

@media (max-width: 750px) {

	 .menu__list {

		 font-size:30px;

		 padding-top: 20px;

	}

}