@font-face {
    font-family: Yekan;
    src: url("yekan.ttf");
}
*{
   margin:0;
   padding:0;
}
html,body{
   height:100%;
}
body{
   font-size:18px;
   font-family: Yekan;
   text-align:center;
}
.wrap{
   position:relative;
   width:100%;
   height:100%;
   background:#00BBD6;
}
h1 {
   width:100%;
   height:40px;
   position:absolute;
   top:0;
   right:0;
   bottom:0;
   left:0;
   margin:auto;
   color:#fff;
}



aside{
   font-size: 18px;
   width: 220px; 
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   z-index: 999;
   background:#D0063A;
}
nav{
   width:100%;
   margin:40px 0 0 0;
   float:left;
}
nav ul{
   text-align:left;
}
nav ul li {
   list-style-type:none;
}
nav ul li:hover {
   background:#ff0;
}
nav ul li a {
   text-decoration:none;
   color:#fff;
   padding:5px 0;
   display:block;
   text-indent:10px;
}
nav ul li a:hover {
   color:#D0063A;
}


/* Button -----*/
#btn-menu {
	display: block;
	width: 30px;
	height: 26px;
	left: 10px;
	top: 10px;
	position: fixed !important;
	z-index: 99999999;
	cursor: pointer;
}
#btn-menu .barra {
    width: 24px;
    height: 4px;
    background: #fff;
    margin: 0 0 4px 0;
}

.latAparece{
	left: 0px;
	transition:all .3s ease;
}
.latDesaparece{
	left: -220px; 
	transition:all .3s ease;
}


#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 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;
	}
}

@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;
	}
}