@charset "utf-8";

@font-face {
    font-family:'true crimes';
	src:url(true-crimes-webfont.woff);
}

body, html {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	background:#EDCCAC;
}

#caja {
   height:100%;
   display:-webkit-flex; /* Para navegadores webkit, como Safari */
   display:flex;
   flex-flow: column;
   -webkit-flow:column;  
}

.cabecera h1 {
	margin:0px;
	padding:0pc;
	font-family: true crimes, "Fira Sans", "Fira Mono", "Fira Sans Heavy", sans-serif, serif;
	font-size:48px;
	text-align:center;
	}

#caja nav {
	flex: 1 6 20%;
	order: 0;
}

#caja section {
	height:100%;
	flex: 3 1 60%;
	order: 0;
}

/*#caja nav, #caja section, #caja aside {
	-webkit-order:0;
	order:0;
	}
#caja nav {
	height:1000px;
	}*/
	
/* div de las fotos */
#fotos div {
	float: left;
	padding: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	border: 1px solid #666;
}

/* div de las fotos */

#videos div {
	float:left;
	padding: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	border: 1px solid #666;
}

#caja1 {
	display: -webkit-flex; /* Para navegadores webkit, como Safari */
	display:flex;
	/*display:inline-flex; */
	/*display:-webkit-inline-flex; */
	flex-flow:column;
	-webkit-flow:column;
}

#caja1 header {
	display:flex;
	flex: 2 3 80%;
	order: 0;
}

#superman img {
	height: 50px;
	width: 75px;
	border: 5px solid #C00;
	border-radius:5px;
	
}

#caja1 article {
	flex: 2 3 60%;
	order: 0;
	font-family: 'Princess Sofia', cursive;
	}
#caja1 footer {
	height:20%;
	}
/* aqui termina */
#caja aside {
	flex: 1 6 20%;
	order: 0;
}

#caja aside video {
	/* no se porque no aparece arriba y hay un poco del aside */
	width:20%;
	height:15%;
	}

header, footer {
	display: block;
	min-height: 10%;
}