.menu-btn {
	display: flex;	
	width: 3rem;
	height: 3rem;
	margin-left: auto;
	align-items: center;
}
.menu-btn span:after,
.menu-btn span:before,
.menu-btn span {
	display: block;
	position: absolute;
  	width: 2.3rem;
  	height: .35rem;
	background-color: #dfd294;
	transition: .3s cubic-bezier(.1, .7, 1, 1);
}
.menu-btn span:after,
.menu-btn span:before {
	content: '';
}
.menu-btn span:after {
	transform: translate(.4rem, .7rem);
}
.menu-btn span:before {
	transform: translate(.4rem, -0.7rem);
}
.menu-btn:hover span::after {
	transform: translate(0, .7rem);	
}
.menu-btn:hover span::before {
	transform: translate(0, -0.7rem);	
}


.menu-btn.active span {
	animation: transform-in-cross-center  .3s cubic-bezier(.1, .7, 1, 1);
	animation-delay: 1s;
	animation-fill-mode: forwards;
}
.menu-btn.active span::after,
.menu-btn.active span::before {
	animation: transform-in-line  1s cubic-bezier(.1, .7, 1, 1);
	animation-fill-mode: forwards;
}

@keyframes transform-in-line {
	70% {transform: translate(0, 0) rotate(0);}
	100% {transform: translate(0, 0) rotate(-90deg);}
}
@keyframes transform-in-cross-center {
	from {transform: rotate(0);}
	100% {transform: rotate(135deg);}
}