/*=========================
BOTON MENU NAVEGACION
=========================*/
.boton-menu{
	width: 40px;
	height: 40px;
	border: none;
	background: none;
	
}
.boton-menu span{
	display: block;
	width: 100%;
	height: 4px;

	border-radius: 6px;
	background: #0F7B52;

	animation-duration: .5s;
	animation-fill-mode: forwards;



}
/*ANIMACION LINEA SUPERIOR - BOTON MENU - ABRIR*/
button.activo .top-line{
	animation-name: top-line-animation;

}
@keyframes top-line-animation{
	50%, 100%{
		margin: 0 auto;
		transform: translateY(3px) rotate(-43deg);
	}
}
/*ANIMACION LINEA MEDIO - BOTON MENU - ABRIR*/
button.activo .middle-line{
	animation-name: middle-line-animation;
}
@keyframes middle-line-animation{
	20%, 100%{
		margin: 0 auto;
		opacity: 0;
		width: 0;
	}
}
/*ANIMACION LINEA INFERIOR - BOTON MENU - ABRIR*/
button.activo .botton-line{
	animation-name: botton-line-animation;

}

@keyframes botton-line-animation{
	50%, 100%{
		margin: 0 auto;
		transform: translateY(-3px) rotate(43deg);
	}
}







.boton-menu.activoooo{
	animation-name: girarBoton;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes girarBoton{
	from{
		transform: rotate(0deg);

	}to{
		transform:  rotate(360deg);

	}
}



.boton-menu{
	animation-name: quitarGirarBoton;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes quitarGirarBoton{
	from{
		transform: rotate(357deg);

	}to{
		transform:  rotate(0deg);

	}
}

























/*CERRAR ANIMACION BOTON
-------------------------
ANIMACION LINEA SUPERIOR - BOTON MENU - CERRAR*/
button .top-line{
	animation-name: top-line-animation-cerrar;
}
@keyframes top-line-animation-cerrar{
	0%{
		margin: 0 auto;
		transform: translateY(3px) rotate(-43deg);
	}
	50%, 100%{
		margin: 0 auto;
		transform: translateY(0px) rotate(0deg);
	}
}
/*ANIMACION LINEA MEDIO - BOTON MENU - CERRAR*/
button .middle-line{
	animation-name: middle-line-animation-cerrar;
}
@keyframes middle-line-animation-cerrar{
	0%{
		margin: 0 auto;
		opacity: 0;
		width: 0;
	}
	20%, 100%{
		margin: 8px auto;
		opacity: 1;
		width: 40px;
	}	
}
/*ANIMACION LINEA INFERIOR - BOTON MENU - CERRAR*/
button .botton-line{
	animation-name: botton-line-animation-cerrar;
}
@keyframes botton-line-animation-cerrar{
	0%{
		margin: 0 auto;
		transform: translateY(-3px) rotate(43deg);
	}
	50%, 100%{
		margin: 0 auto;
		transform: translateY(0px) rotate(0deg);
	}
}