.none{
    display:none;
}
#btn-menu .barra {
    width: 25px;
    height: 4px;
    background: #00662D;
    margin: 0 0 4px 0;
}
aside{
   font-size: 20px;
   width: 220px; 
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   z-index: 999;
   background-image:linear-gradient(to top, #5F0609, #000);
    overflow-y: auto;
}
nav{
   width:220px;
   margin-top:40px;
   padding:0;
   float:left;
   text-align:left;
}
nav ul li {
   list-style-type:none;
}

nav ul li p {
   text-decoration:none;
   color:#fff;
   padding: 0.75rem 1rem;
   display:block;
   text-indent:10px;
   margin:0 auto;
   cursor:pointer;
}
nav ul li p:hover {
   color:#FFC800;
   
}
.sub{
    
    background-color:#354358;
}

/* Button -----*/
#btn-menu {
	display: block;
	width: 30px;
	height: 26px;
	left: 10px;
	top: 10px;
	position: fixed !important;
	z-index: 99999999;
	cursor: pointer;
}


/* Styles to display the nav menu */
.latAparece{
	left: 0px;
	transition:all .3s ease;
}
.latDesaparece{
	left: -220px; /* The same positive value of WIDTH property in aside element */
	transition:all .3s ease;
}


/* Button animation - - - - */
#btn-menu .barra1on {
	-webkit-animation: barra1on 0.7s forwards;
		-ms-animation: barra1on 0.7s forwards;
			animation: barra1on 0.7s forwards;
}
#btn-menu .barra2on {
	-webkit-animation: barra2on 0.7s forwards;
		-ms-animation: barra2on 0.7s forwards;
			animation: barra2on 0.7s forwards;
}
#btn-menu .barra3on {
	-webkit-animation: barra3on 0.7s forwards;
		-ms-animation: barra3on 0.7s forwards;
			animation: barra3on 0.7s forwards;
}
#btn-menu .barra1off {
	-webkit-animation: barra1off 0.7s forwards;
		-ms-animation: barra1off 0.7s forwards;
			animation: barra1off 0.7s forwards;
}
#btn-menu .barra2off {
	-webkit-animation: barra2off 0.7s forwards;
		-ms-animation: barra2off 0.7s forwards;
			animation: barra2off 0.7s forwards;
}
#btn-menu .barra3off {
	-webkit-animation: barra3off 0.7s forwards;
		-ms-animation: barra3off 0.7s forwards;
			animation: barra3off 0.7s forwards;
}


/* Keyframes to button animation - - - */
@keyframes barra1on{
	0%{
		width: 24px;
		transform: rotate(0deg) translate(0px,0px);
		transform-origin: left center;
	}
	80%{
		width: 20px;
		transform: rotate(-50deg) translate(-7px,6px);
		transform-origin: left center;
	}
	88%{
		width: 20px;
		transform: rotate(-40deg) translate(-7px,6px);
		transform-origin: left center;
	}
	94%{
		width: 20px;
		transform: rotate(-50deg) translate(-7px,6px);
		transform-origin: left center;
	}
	96%{
		width: 20px;
		transform: rotate(-40deg) translate(-7px,6px);
		transform-origin: left center;
	}
	100%{
		width: 20px;
		transform: rotate(-45deg) translate(-7px,6px);
		transform-origin: left center;
	}
}

/*BARRA2ON - - - */
@keyframes barra2on{
	0%{
		transform: scale(1,1);
		transform-origin: left center;
	}
	50%{
		transform: scale(0.5,1.8);
		transform-origin: right center;
	}
	100%{
		transform: scale(0.9,1);
		transform-origin: right center;
	}
}




@keyframes barra3on{
	0%{
		width: 24px;
		transform: rotate(0deg) translate(0px,0px);
		transform-origin: left center;
	}
	80%{
		width: 20px;
		transform: rotate(50deg) translate(-7px,-6px);
		transform-origin: left center;
	}
	88%{
		width: 20px;
		transform: rotate(40deg) translate(-7px,-6px);
		transform-origin: left center;
	}
	93%{
		width: 20px;
		transform: rotate(50deg) translate(-7px,-6px);
		transform-origin: left center;
	}
	97%{
		width: 20px;
		transform: rotate(40deg) translate(-7px,-6px);
		transform-origin: left center;
	}
	100%{
		width: 20px;
		transform: rotate(45deg) translate(-7px,-6px);
		transform-origin: left center;
	}
}

@keyframes barra1off{
	0%{
		width: 20px;
		transform: rotate(-45deg) translate(-7px,6px);
		transform-origin: left center;
	}
	80%{
		width: 24px;
		transform: rotate(5deg) translate(0px,0px);
		transform-origin: left center;
	}
	88%{
		width: 24px;
		transform: rotate(-5deg) translate(0px,0px);
		transform-origin: left center;
	}
	93%{
		width: 24px;
		transform: rotate(5deg) translate(0px,0px);
		transform-origin: left center;
	}
	97%{
		width: 24px;
		transform: rotate(0deg) translate(0px,0px);
		transform-origin: left center;
	}
	100%{
		width: 24px;
		transform: rotate(0deg) translate(0px,0px);
		transform-origin: left center;
	}
}


@keyframes barra2off{
	0%{
		transform: scale(0.9,1);
		transform-origin: left center;
	}
	20%{
		transform: scale(0.5,1.8);
		transform-origin: left center;
	}
	70%{
		transform: scale(1.2,0.5);
		transform-origin: left center;
	}
	80%{
		transform: scale(0.8,1.4);
		transform-origin: left center;
	}
	90%{
		transform: scale(1.1,0.85);
		transform-origin: left center;
	}
	100%{
		transform: scale(1,1);
		transform-origin: left center;
	}
}


@keyframes barra3off{
	0%{
		width: 20px;
		transform: rotate(45deg) translate(-7px,-6px);
		transform-origin: left center;
	}
	80%{
		width: 24px;
		transform: rotate(-5deg) translate(0px,0px);
		transform-origin: left center;
	}
	88%{
		width: 24px;
		transform: rotate(5deg) translate(0px,0px);
		transform-origin: left center;
	}
	93%{
		width: 24px;
		transform: rotate(0deg) translate(0px,0px);
		transform-origin: left center;
	}
	97%{
		width: 24px;
		transform: rotate(5deg) translate(0px,0px);
		transform-origin: left center;
	}
	100%{
		width: 24px;
		transform: rotate(0deg) translate(0px,0px);
		transform-origin: left center;
	}
}