.menu-trigger,
.menu-trigger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
		outline: none;
		z-index:3;

}
.menu-trigger {
		position: relative;
		width: 50px;
		height: 23px;
		background: none;
		border: none;
		appearance: none;
		cursor: pointer;
}
.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #000;
}
.menu-trigger span:nth-of-type(1) {
		top: 0;
}
.menu-trigger span:nth-of-type(2) {
		top: 10px;
}
.menu-trigger span:nth-of-type(3) {
		bottom: 0;
}


.menu-trigger::after {
		position: absolute;
		left: 0;
		bottom: -30px;
		content: 'MENU';
		display: block;
		width: 100%;
		color: #000;
		font-size: 12px;
		text-decoration: none;
		text-align: center;
		white-space: nowrap;
		transition: all .4s;
}
.menu-trigger.active::after {
		content: 'CLOSE';
		bottom: -25px;
}
.menu-trigger.active span:nth-of-type(1) {
		transform: translateY(10px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
		opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
		transform: translateY(-10px) rotate(45deg);
}


.menu-trigger:hover,
.menu-trigger:focus {
		color: #C00;
}