/*PLANTILLA 2*/
/*3 divs alineados verticalmente: contenedor1, contenedo2, contenedor3*/
/*El div contenedor2 incluye 3 divs: imagen, texto y tabla*/
/*El div pie incluye lista de 3 elementos alineadas horizontalmente*/
/*La anchura de todos los divs 100vw para abarcar toda la ventana*/
/*El alto de cada divs en px, alineándolos con position: absolute*/

body {
   overflow-x: hidden;
}


#contenedor1 {
	vertical-align:top;
}

#contenedor2 {
	vertical-align:middle;
}

#contenedor3 {
	vertical-align:bottom;
}

/* CREACIÓN DE MENÚ HORIZONTAL sobre la imagen
Explicado más abajo, en .ulpie*/

/*DIV(contenedor1).DIV(cabecera)*/
#cabecera {
	top: 0%;
	left: 0px;
	height:65px;
	background:white;
	font-family:"neutra_textbook_alt",Arial,sans-serif;
	font-size:1.5em;
	color: black;
	text-align:center;
	vertical-align:central;
}

 
#cabecera ul {
	background: none;
	border: none;
	list-style: none;
	margin: 0;
	padding: 0;
	filter: alpha(opacity=70); /* internet explorer */
		-khtml-opacity: 0.7;      /* khtml, version anterior de safari */
		-moz-opacity: 0.7;       /* firefox, mozilla, netscape */
		opacity: 0.7;           /* safari, chrome, opera */
	    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	overflow: hidden;
}
	
#cabecera ul li {
	float: left;
	width: 33%;
}
		
#cabecera li a {
	height:50px;
	color: black;
	display: block;
	padding: 0.3em;
	text-decoration: none;
	border-left: none;
	border-right: none;
}
  
/*DIV(contenedor2).DIV(imagen)*/ 
#imagen {				
	vertical-align:top;
	left: 0px;
	width: 100%;
	opacity:0.8;
}
				
.responsive-image {
	width: 100%;
	background-size: contain;
}


/*Podría eliminar esta clase, si no quiero sobreponer texto
a la imagen*/
.textoimagen {
	font-family:"neutra_textbook_alt",Arial,sans-serif;
	text-align: center;
	font-size:2.5vw;
	color: black;
	text-align:center;
}

#imagenmenu {
	position: absolute;
	top: 10px;
	height:50px;
	width:100vw;
	background:none;
}
		 

/*DIV(contenedor2).DIV(texto)*/ 
#texto {
	vertical-align:middle;
	height:auto;
	width:90vw;
	background: white;
	/*No se porqué pero queda mejor padding-left: 4vw y padding-right:3vw*/
	padding-left: 4vw;
	padding-right: 3vw;
	padding-top: 25px;
	padding-bottom: 25px;
}

/*Para evitar que el texto aparezca, si es muy largo,
debajo del pie, establezco overflow: hidden*/
.textotexto {
	text-align: justify;
	font-family:"din_condensed_web",Arial,sans-serif;
	letter-spacing:2px;
	font-size:1.5em;
	font-weight:300;
	color: black;
	background-color: none;color: black;
	overflow: hidden;
	text-indent:2em;
}

/*DIV(contenedor2).DIV(tabla)*/ 
#tabla {
	vertical-align:bottom;
	left: 0px;
	width:80vw;
	padding-left: 10vw;
	padding-right: 10vw;
	padding-top: 25px;
	padding-bottom: 25px;
}

#tabla td {
	border: 3px solid #fff;
	left: 0px;
	height: auto;
	background: white;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	background-repeat: no-repeat;
	background-position: 100%;
	background-color: #fbf7f7;
	width: 400px;
	overflow-x: hidden;
	overflow-y: hidden;
}

.tdopacity {
filter: alpha(opacity=50); /* internet explorer */
    	-khtml-opacity: 0.5;      /* khtml, version anterior de safari */
    	-moz-opacity: 0.5;       /* firefox, mozilla, netscape */
    	opacity: 0.5;           /* safari, chrome, opera */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
				
/*DIV #pie*/  
#pie {
	left: 0px;
	height:auto;
	width:100vw;
	background:white;
		 }
		 
.textopie {
	font-family:"neutra_textbook_alt",Arial,sans-serif;
	 font-size:2vw;
	 text-align: center;
	 background-color: none;
	 color: black;
					}
	
/* CREACIÓN DE MENÚ HORIZONTAL
Eiminar las viñetas automáticas y todos los márgenes y espaciados aplicados por defecto
Añadir un borde al menú de navegación y establecer el color de fondo y los bordes de cada elemento del menú:*/
 
.ulpie {
	background: none;
	border: none;
	list-style: none;
	margin-top: 3vw;
	padding: 0;
	filter: alpha(opacity=80); /* internet explorer */
    	-khtml-opacity: 0.8;      /* khtml, version anterior de safari */
    	-moz-opacity: 0.8;       /* firefox, mozilla, netscape */
    	opacity: 0.8;           /* safari, chrome, opera */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

/*Aplicar estilos a los enlaces: mostrarlos como un elemento de bloque para 
que ocupen todo el espacio de cada <li> del menú, añadir un espacio de relleno 
y modificar los colores y la decoración por defecto*/

.ulpie li a {
	color: #333;
	display: block;
	padding: .3em;
	text-decoration: none;
}

/*Establecer la anchura de los elementos del menú. Como el menú es de anchura
 variable y contiene tres elementos, se asigna una anchura del 33% a cada
 elemento. Si se quiere tener un control más preciso sobre el aspecto de cada
 elemento, es necesario asignar una anchura fija al menú.
Además, se posiciona de forma flotante los elementos de la lista mediante
 la propiedad float. Esta es la clave de la transformación de una lista en un
 menú horizontal:
*/

.ulpie li {
  float: left;
  width: 33%;
}

/*Después de posicionar de forma flotante a todos los elementos de la lista, 
el elemento <ul> es un elemento vacío ya que en su interior no existe ningún 
elemento posicionado de forma normal.La solución de este problema consiste en 
aplicar la propiedad overflow: hidden; al elemento <ul>, de forma que 
encierre a todos los elementos posicionados de forma flotante*/

.ulpie {
  overflow: hidden;
}

/*Establecer los bordes de los elementos que forman el menú:*/

.ulpie li a {
  border-left: none;
  border-right: none;
}
.ulsocial {
	background: none;
	border: none;
	list-style: none;
}
.ulsocial li {
	float: left;
	width:100%;
}