nav *, nav *:before, nav *:after {
	transition: all 300ms ease !important;
}
#showMenu input {
	display: none;
}
#headerNav label {
	display: block;
	width: 3rem;
	height: 3.5rem;
	position: relative;
}
#headerNav label span {
	position: relative;
	top: 1.5rem;
}
#headerNav label span, #headerNav label span:before, #headerNav label span:after {
	display: block;
	background: #fff;
	width: 3rem;
	height: 0.2rem;
	border-radius: 0.4rem;
}
 #headerNav label span::hover, #headerNav label span::hover {
 cursor:pointer !important;
 background-color:#EFB201 !important;
}
.to-arrow #headerNav label span:hover {
 color:red !important;
}
.to-arrow:hover #headerNav label {
	cursor: pointer !important;
	display: block;
}
#headerNav label span:before, #headerNav label span:after {
	content: '';
	position: absolute;
}
#headerNav label span:before {
	bottom: 0.8rem;
}
#headerNav label span:after {
	top: 0.8rem;
}
.left #headerNav label span:before, .top #headerNav label span:before, .bottom #headerNav label span:before {
	transform-origin: top left;
}
.left #headerNav label span:after, .top #headerNav label span:after, .bottom #headerNav label span:after {
	transform-origin: bottom left;
}
.right #headerNav label span:before {
	transform-origin: top right;
	right: 0;
}
.right #headerNav label span:after {
	transform-origin: bottom right;
	right: 0;
}
.to-arrow :hover ~ #headerNav label span:before, .to-arrow :hover ~ #headerNav label span:after {
	width: 60%;
	background-color: #EFB201;
}
.to-arrow :hover ~ #headerNav label span:before {
	bottom: -0.125rem;
	background-color: #EFB201;
}
.to-arrow :hover ~ #headerNav label span:after {
	top: -0.125rem;
	background-color: #EFB201;
}
.left :hover ~ #headerNav label span:before, .top :hover ~ #headerNav label span:before, .bottom :hover ~ #headerNav label span:before {
	transform: rotate(-40deg);
	background-color: #EFB201;
}
.left :hover ~ #headerNav label span:after, .top :hover ~ #headerNav label span:after, .bottom :hover ~ #headerNav label span:after {
	transform: rotate(40deg);
	background-color: #EFB201;
}
.right :hover ~ #headerNav label span:before {
	transform: rotate(40deg);
	background-color: #EFB201;
}
.right :hover ~ #headerNav label span:after {
	transform: rotate(-40deg);
	background-color: #EFB201;
}
.top :hover ~ #headerNav label span {
	transform: rotate(90deg);
	background-color: #EFB201;
}
.bottom :hover ~ #headerNav label span {
	transform: rotate(-90deg);
	background-color: #EFB201;
}
.x :hover ~ #headerNav label span {
	width: 0;
	background-color: #EFB201;
}
.x :hover ~ #headerNav label span:before {
	transform: rotate(45deg);
	background-color: #EFB201;
	bottom: 0;
}
.x :hover ~ #headerNav label span:after {
	transform: rotate(-45deg);
	top: 0;
	background-color: #EFB201;
}
.x1 :hover ~ #headerNav label span {
	background: none;
	background-color: #EFB201;
}
.x1 :hover ~ #headerNav label span:before {
	animation: x1Before 500ms forwards;
	background-color: #EFB201;
}
.x1 :hover ~ #headerNav label span:after {
	animation: x1After 500ms forwards;
	background-color: #EFB201;
}
@keyframes x1Before {
 50% {
 bottom: 0;
 transform: rotate(0deg);
}
 100% {
 bottom: 0;
 transform: rotate(45deg);
}
}
@keyframes x1After {
 50% {
 top: 0;
 transform: rotate(0deg);
}
 100% {
 top: 0;
 transform: rotate(-45deg);
}
}