body{
	font: 24px Helvetica;
	margin-top:1%;
	margin:2%;
	z-index:-10;
}
@font-face{
	font-family:walrus;
	src:url(../fuentes/Walrus-Bold.otf);
}
h2{
	color:blue;
	text-align:right;
	font-family:walrus;
	transition-property:all;
	transition-duration:0.5s;
	transition-timing-function:linear;
}
h2:hover{
	color:white;
	text-align:right;
	font-family:walrus;
	transition-property:all;
	transition-duration:0.5s;
	transition-timing-function:linear;
}

h4{
	color:white;
	font-size:15px;
}
audio{
	
}
.subtitulo-breviario{
	text-decoration:underline;
	font-size:19px;
	color:violet;
	transition-property:all;
	transition-duration:0.5s;
	transition-timing-function:linear;
}
.subtitulo-breviario:hover{
	text-decoration:underline;
	font-size:19px;
	color:red;
	transition-property:all;
	transition-duration:0.5s;
	transition-timing-function:linear;
}


#audio1{
	transition-property:all;
	transition-duration:0.5s;
	transition-timing-function:linear;
	width:200px;
	background-image:url(../img/caratulas/starshiptroopers.jpg);
}
#audio1:hover{
	transition-property:all;
	transition-duration:1s;
	transition-timing-function:linear;
	height:130px;
}
#audio2{
	transition-property:all;
	transition-duration:0.5s;
	transition-timing-function:linear;
	width:200px;
	background-image:url(../img/caratulas/elektronomia-caratula.jpg);
}
#audio2:hover{
	transition-property:all;
	transition-duration:1s;
	transition-timing-function:linear;
	height:130px;
}
#audio3{
	transition-property:all;
	transition-duration:0.5s;
	transition-timing-function:linear;
	width:200px;
	background-image:url(../img/caratulas/alanwalker-caratula.jpg);
}
#audio3:hover{
	transition-property:all;
	transition-duration:1s;
	transition-timing-function:linear;
	height:130px;
}
#logo{
	text-align:left;
	width:50px;
	height:50px;
	position:absolute;
	right:1100px;
	left:200px;
	
	
	transition-property:all;
	transition-duration:0.5s;
	transition-timing-function:linear;
}
#logo:hover{
	transition-property:all;
	transition-duration:0.5s;
	transition-timing-function:linear;
	width:100px;
	height:100px;
}
h3{
	color:white;
}
h6{
	color:white;
	transition-property:all;
	transition-duration:0.5s;
	transition-timing-function:linear;
}
h6:hover{
	color:blue;
	transition-property:all;
	transition-duration:0.5s;
	transition-timing-function:linear;
}
* {
	margin:0px;
	padding:0px;
}
			
#header {
	margin:auto;
	width:50%;
	font-family:Arial, Helvetica, sans-serif;
	opacity:0.9;	
}
			
ul, ol {
	list-style:none;
}
			
.nav > li {
	float:left;
	
}
			
.nav li a {
	background-color:#0B0B61;
	color:#fff;
	text-decoration:none;
	padding:10px 12px;
	display:block;
	transition-property:all;
	transition-duration:0.8s;
	transition-timing-function:linear;
}
			
.nav li a:hover {
	background-color:#0000FF;
	transition-property:all;
	transition-duration:0.8s;
	transition-timing-function:linear;
}
			
.nav li ul {
	display:none;
	position:absolute;
	min-width:140px;
}
			
.nav li:hover > ul {
	display:block;
}
			
.nav li ul li {
	position:relative;
}
			
.nav li ul li ul {
	right:-140px;
	top:0px;
}
#logo img {
	width:50px;	
}

#main{
	min-height:800px;
	margin:0px;
	padding:0px;
	display:flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: -mz-flex;
	flex-direction:row;
	-webkit-flex-direction:row;
}

#main > article {
	text-align:center;
	margin:4px;
	padding:5px;
	border: 1px solid #08088A;
	border-radius: 7pt;
	opacity:0.9;
	background: #0700D6;
	flex-grow:3;
	flex-shrink:1;
	flex-basis:60%;
	order:2;
	-webkit-order:2;
	background-image:url(../img/textura5.jpg);
}
#main > nav {
	text-align:center;
	margin:4px;
	padding:5px;
	border: 1px solid #000000;
	border-radius: 7pt;
	opacity:0.9;
	background:#0700D6;
	flex-grow:3;
	flex-shrink:1;
	flex-basis:20%;
	order:1;
	-webkit-order:1;
     background-image:url(../img/textura5.jpg);
}
#main > aside {
	margin:4px;
	padding:5px;
	border: 1px solid #000000;
	opacity:0.9;
	border-radius: 7pt;
	background: #0700D6;
	flex-grow:3;
	flex-shrink:1;
	flex-basis:2%;
	order:3;
	-webkit-order:3;
	background-image:url(../img/textura5.jpg);
}
.licencia{
	font-size:15px;
	color:white;
}
header,footer{
	text-align:center;
	display:block;
	opacity:0.9;
	margin:4px;
	padding:5px;
	min-height:100px;
	border:1px solid #000000;
	border-radius:7pt;
	background:#0700D6;
	z-index:1;
	background-image:url(../img/textura5.jpg);
	width:100%;
}
.box1{
	margin:4px;
	padding:5px;
	border: 2px solid black;
	border-radius: 7px;
	background: #6E6E6E;

	height:40%;
	width :90%;
	color :black;
	text-align:center;
	background-image:url(../img/textura-cajas.jpg);
}


.box2{
	margin:4px;
	padding:5px;
	border: 2px solid #08088A;
	border-radius: 7px;
	background: #6E6E6E;
	height:100px;
	color :black;
	transition-property:all;
	transition-duration:0.5s;
	transition-timing-function:linear;
	background-image:url(../img/textura-cajas.jpg);
}
.box2:hover{
	
	transition-property:all;
	transition-duration:0.5s;
	transition-timing-function:linear;
	height: 200px;
}
iframe{
	border: 2px solid #08088A;
}





@media all and (max-width: 640px) {
	#main {
		flex-direction: column;
		-webkit-flex-direction: column;
	}
	#main > article, #main > nav, #main > aside{
			-webkit-order:0;
	}
	#main > article, #main > aside,header,footer{
		min-height:50px;
		max-height:50px;
	}
	}