@charset "utf-8";
*{
    box-sizing: border-box;
	margin: 0px;
	padding: 0px;
}
body{
    margin: 0px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
	
}
header {
	position: sticky;
    top:0px;
    background-image: url(../imagenes/imagenes_cabecera/cascada61.jpg);	
    background-size: cover;
	border:15px ridge ;
	border-color:white;
	max-height: 20vh;
	min-width: 100%;
}
header > div {
    display: flex;
	flex-direction: row;
    justify-content: space-between;
    align-items: center;
	max-height: 20vh;
}
.imagenCascada{
	width: 100%;
    display: flex;
	flex-direction: column;    
    align-items: center;
	
}

.imagen_salvaje{
	
	padding-left: 1%;
}
.imagen_glassy{
	padding-right: 1%;
	
}
.titulo_pagina{
	margin: 0%;
	text-align: center;
	font-family:Baskerville Old Face;
	font-size:2.5em;
	color:black;
}
.titulo_pagina1{
	margin: 0%;
	text-align: center;
	font-family:Baskerville Old Face;
	font-size:4em;
	color:black;
}
/* <font face="Baskerville Old Face" size="+3" color="WHITE">

hidden="true" type="audio/mpeg" autostar="true" playcount="2" width="200" height="43",align="right" */

.musica{
	text-align: center;
	width:15em;
	height:1.5em;
	hidden:true;
	type:audio/mpeg;
	autostar:true;
	playcount:2;
	
}
aside {
	display:flex;
	flex-direction: row;
}

body aside nav{
	margin: 0px;
	padding: 0px;
	border:15px ridge ;
	border-color:white;	
	background-color: silver;
}
/* menu_navegación */


nav{
    background:#e1e1e1; margin-top:1em; 
}
#nav{
    margin:0px; padding:0; float:left;font-size:1em;
}
#nav ul li {list-style:none;  background: #d6f9ff; /* Old browsers */
background: -moz-linear-gradient(top, #d6f9ff 0%, #9ee8fa 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d6f9ff), color-stop(100%,#9ee8fa)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* IE10+ */
background: linear-gradient(to bottom, #d6f9ff 0%,#9ee8fa 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6f9ff', endColorstr='#9ee8fa',GradientType=0 ); width:218px; border:1px outset #4bcdc8;}

#nav ul li a {display: block; padding:1em; border-left:0.5em solid #444; text-decoration:none; box-shadow:0.4em 0.4em 0.5em #ccc; color:#555;}

#nav ul li a:hover {border-left:0.4em solid #069; background: #b3dced;
background: -moz-linear-gradient(top, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee));
background: -webkit-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
background: -o-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
background: -ms-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
background: linear-gradient(to bottom, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=0 );}

#nav ul li ul {display:none;font-size:11pt;}

#nav ul li:hover ul {
	display:block;
	margin-left:0.1em;
}

#nav ul li:hover ul li {background: rgb(122,188,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,188,255,1)), color-stop(44%,rgba(96,171,248,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */;}

#nav ul li:hover ul li a { color:#fff;}

#nav ul li:hover ul li a:hover {background: #b3dced;
background: -moz-linear-gradient(top, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee));
background: -webkit-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
background: -o-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
background: -ms-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
background: linear-gradient(to bottom, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=0 );}

#nav ul li ul li ul li {color:#fff; font-size:10pt;}

#nav ul li ul li ul li {display:none;}

#nav ul li ul li:hover ul li{
	display:block;
	margin-left:0.1em;		
}

#nav ul li ul li:hover ul li a{color:#000;}

#nav ul li ul li:hover ul li{background: rgb(222,239,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(222,239,255,1) 0%, rgba(152,190,222,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(222,239,255,1)), color-stop(100%,rgba(152,190,222,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deefff', endColorstr='#98bede',GradientType=0 );
}






.cuerpo{
	border:15px ridge ;
	border-color:white;
	min-height: 100vh;
	width: 100%;
	background-color: black;
	color:white;
	font-weight: bold;	
}

footer {
	border:15px ridge ;
	border-color:white;	
	background-color: black;
	color:white;
	text-align: center;
	width: 100%;
}
#iconoabrir, #iconocerrar {
    position: fixed;
    top: 11em;
    left: 1em;
    width: 4em;
    height: auto;
    z-index: 51;
    cursor: pointer;
	
}

#iconoabrir, #iconocerrar{
	background-color: white;
	display: none;
}
@media screen and (max-width:1200px){
	.titulo_pagina{		
		font-size:1.9em;
	}
	.titulo_pagina1{		
		font-size:3em;
	}
}
@media screen and (max-width: 960px){
	.titulo_pagina{		
		font-size:1.5em;
	}
	.titulo_pagina1{		
		font-size:2em;
	}
}
	
	/* adaptcion para tablets */
	@media screen and (max-width: 850px){
		
		.titulo_pagina{			
			font-size:1.1em;			
		}
		.titulo_pagina1{			
			font-size:2em;			
		}
		.musica{
			text-align: center;
			width:10em;
			height:1em;
			hidden:true;
			type:audio/mpeg;
			autostar:true;
			playcount:2;
			
		}
		
		
		#nav {
			position: fixed;
			top: 15em; /*a 100px de arriba*/
			right: 100%; /*posiciiona el menú a la derecha fuera de la pantalla(al 100% de la izquierda) */			
			transition: transform .5s ease-in 0s;
			z-index: 50;
		}
		#iconoabrir, #iconocerrar {
			position: fixed;
			top: 11em;	
			
		}
		#iconocerrar{
			background-color: white;
			display: none;
		}
		#iconoabrir{
			display:block;
		
		}
		
		
	
	
	/* adaptcion para moviles */
	@media screen and (max-width: 500px){
		
		header {
			position: sticky;
			border:10px ridge ;
			height: 100%;
		
		}
		
		header > div {
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			height: 100%;
		}
		
		.imagen_salvaje{	
			display: none;
		}
		.imagen_glassy{
			display: none;			
		}
		
		.titulo_pagina{			
			font-size:1em;
			align-items: center;			
		}

		.titulo_pagina1{			
			font-size:1.5em;
			align-items: center;			
		}

		.musica{
			align-items: center;
			
			
		}
		
		
		aside {
			display:flex;
			flex-direction: column;
		}
		
		body aside nav{
			margin: 0px;
			padding: 0px;
			border:10px ridge ;
			border-color:white;	
			background-color: silver;
		}

		.cuerpo{
			border:10px ridge ;
			border-color:white;
			min-height: 100vh;
			width: 100%;
			background-color: black;
			color:white;
			font-weight: bold;
		
		}
	
	
	
		#nav {
			position: fixed;
			top: 11em; /*a 100px de arriba*/
			right: 100%; /*posiciiona el menú a la derecha fuera de la pantalla(al 100% de la izquierda) */			
			transition: transform .5s ease-in 0s;
			z-index: 50;
		}
		#iconoabrir, #iconocerrar {
			position: fixed;
			top: 6em;
			left: 0.6em;
			width: 4em;
			height: auto;
			z-index: 51;
			cursor: pointer;
			
		}
		#iconocerrar{
			background-color: white;
			display: none;
		}
		#iconoabrir{
			display:block;
		
		}
		footer {
			border:10px ridge ;
		}


	}
	@media screen and (max-width: 375px){
		.titulo_pagina{			
			font-size:0.5em;			
		}

		.titulo_pagina1{			
			font-size:1em;			
		}
	}