.MenuWrapper {
	display: flex;
	align-items: center;
	gap: 20px;
	cursor: pointer;
	height: 100%;
	overflow: hidden;
}

.MenuWrapper .MenuText {
	transition: transform 0.2s ease-in-out;
	font-size: 15px;
}

.MenuIcon {
	width: 15px;
	height: 11px;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	font-size: 16px;
	-webkit-transition: -webkit-transform 300ms cubic-bezier(0.65, 0.05, 0.36, 1);
	transition: transform 300ms cubic-bezier(0.65, 0.05, 0.36, 1);
	cursor: pointer;
}

.MenuIcon i {
	position: absolute;
	width: 15px;
	border-radius: 18px;
	left: 0px;
	border-bottom: 1.27px solid;
	display: block;
	-webkit-transition: all 300ms cubic-bezier(0.49, 0.49, 0.51, 0.51);
	transition: all 150ms cubic-bezier(0.13, 0.1, 0.93, 0.96);
}

.MenuIcon .l_1 {
	top: 0px;
}

.MenuIcon .l_2 {
	top: 5px;
}

.MenuIcon .l_3 {
	bottom: 0px;
	top: auto;
}

.MenuWrapper.active .l_1 {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: 5px;
	left: 0px;
	width: 15px;
}

.MenuWrapper.active .MenuIcon .l_3 {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	bottom: 5px;
	left: 0px;
	width: 15px;
}

.MenuWrapper.active .MenuIcon .l_2 {
	opacity: 0;
	width: 0;
	right: 10px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.MenuWrapper.active .MenuText {
	transform: translatey(100px);
	font-size: 0;
}

.nav-bar.active {
	transform: translatey(0);
}

.nav-bar {
	transform: translatey(-200px);
	transition: all 0.2s linear;
}

.nav-bar.active {
	transform: translatey(0);
}