@font-face{
	font-family:'latin';
	src: url(../fonts/latin.ttf);
}
p {
	font:24px latin;
}
body{
	font:24px helvetica;
	background: #fff
}
header{
	display:flex;
	background:#383838;
	border:1px solid #ffff4a;
	border-radius:7pt;
	margin:5px;
	padding:5px;
	height:70px;
	min-height:90px;
	justify-content:center;
}
h1{
	font-family:latin;
	font-size:130%;
	
	letter-spacing:10px;
	text-align:left;
	text-transform:uppercase;
	float:left;
}
#Zombie{
	width: 200px;
	height: 312px;
	position:absolute;
	animation: play 1.8s steps(5) infinite ;
	background-image:url(../img/zombie.png);
	
	transition:all 6s linear;
	transform:translatex(500px);
}
#Zombie:hover{
	transition:all 6s linear;
	transform:translatex(10px);
}

#primary_nav_wrap
{
	margin-top:15px;
	font-family:latin;
}

#primary_nav_wrap ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0;
	font-family:latin;
}

#primary_nav_wrap ul a
{
	display:block;
	color:#ffff4a;
	text-decoration:none;
	font-weight:700;
	font-size:15px;
	line-height:45px;
	padding:10px;
	font-family:latin,Helvetica,Arial,sans-serif
}


#primary_nav_wrap ul li:hover
{
	background:#f6f6f6;
	

}

#main{
	min-height:800px;
	margin:0px;
	padding:0px;
	
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	
	align-items:stretch;
	flex-wrap:nowrap;
	
}
#main > article {
	margin:4px;
	padding:5px;
	border:1px solid #ffff4a;
	border-radius:7pt;
	background:#f6f6f6;
	flex-grow:3;
	flex-shrink:1;
	order:2;
	flex-basis:60%;
	font-family:latin;
	
	text-align:center;
	line-height:300px;
}
#galeria{
	width:900px;
	margin:auto;
}
 #galeria img{
	 width:240px;
	 height:180px;
	 
 }
#main > nav{
	margin:4px;
	padding:5px;
	background:#383838;
	border:1px solid #ffff4a;
	border-radius:7pt;
	flex-grow:1;
	flex-shrink:6;
	flex-basis:20%;
	order:1;
	font-family:latin;
		
	text-align:center;
}

#main > aside{
	margin:4px;
	padding:5px;
	background:#383838;
	border:1px solid #ffff4a;
	border-radius:7pt;
	flex-basis:20%;
	flex-grow:1;
	order:3;
	color:#ffff4a;
	
	text-align:center;
}
#galeria{
	width:900px;
	margin:auto;
}
 #galeria img{
	 width:240px;
	 height:180px;
	 
 }
.col1 {
	
	width:200px;
	height:200px;
	margin:1em auto;
}
.col1:hover{
	transition:all 4s linear;
	transform:translate(50px, 100px);
}
.col2 {
	
	width:200px;
	height:200px;
	margin:1em auto;
}
.col2:hover{
	transition:all 4s linear;
	transform:translate(50px, 100px);
}
@keyframes play {
	from { background-position:    0px;  }
	to { background-position: -2000px;  }
}
@keyframes animacion1{
	0%{
		background:red;
		width:200px;
	}
	50% {
		background:blue;
		width:400px;
	}
	100%{
		background:gray;
		width:200px;
	}
}

footer{
	display:flex;
	background:#383838;
	justify-content:center;
	border:1px solid #ffff4a;
	border-radius:7pt;
	margin:5px;
	padding:5px;
	height:70px;
}
@media all and (max-width: 640px){
	#main {
		flex-flow:column;
	}
	#main > aside {
		order:3;
		padding:25px;
	}
	#main > article {
		order:1;
	}
	#main > nav {
		order:0;
		padding:25px;
	}
}