header {
	height: 79%;
    display: -webkit-flex;
    display:         flex;
    flex-flow: row;    
}
.sombra {
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}
header #foto {
	flex: 3 1 20%;
	order: 1;
	margin: 1%; 
	background-image: url(/images/batman.jpg);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	-moz-box-shadow: 0 0 5px 5px #888;
	-webkit-box-shadow: 0 0 5px 5px#888;
	box-shadow: 0 0 5px 5px #888;
}
header #nombre {
	flex: 1 6 80%;
	order: 2;
	margin-top: 1%;
	margin-left: 2%;
	margin-bottom: 1%;
	padding-left: 10px;
	-moz-box-shadow: 0 0 5px 5px #06722E;
	-webkit-box-shadow: 0 0 5px 5px#06722E;
	box-shadow: 0 0 5px 5px #06722E;
}
header #nombre h2 { text-decoration: underline; font-size: 16px;}
#nombre h1 { font-size: 20px;}
#nombre ul li { font-size: 14px; line-height: 2;}

section { margin-top: 3%; padding-left: 2%; padding-top: 2%; padding-bottom: 2%; line-height: 20px; 
		-moz-box-shadow: 0 0 5px 5px #888;
	-webkit-box-shadow: 0 0 5px 5px#888;
	box-shadow: 0 0 5px 5px #888;}
section ul li { list-style-type: square; margin-left: 20px;}
footer h2 {text-decoration: underline; margin-top: 3%;}
#recursos {
	height: 100%;
	width: 100%;	
	-moz-box-shadow: 0 0 5px 5px #888;
	-webkit-box-shadow: 0 0 5px 5px#888;
	box-shadow: 0 0 5px 5px #888;
}
#recursos #imagen {
	float: left;
	margin-top: 1%;
	margin-bottom: 1%;	
	text-align: center;
}
#recursos #imagen img { width: 200px;}
#recursos #video {
	float: left;
	margin-top: 1%;
	margin-bottom: 1%;	
	text-align: center;
}
#recursos #audio {
	float: left;
	margin-top: 1%;
	margin-bottom: 1%;	
	text-align: center;
}
#recursos #audio audio { width: 200px; height: 30px;}