/*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;
}

.contenedor {
						
						height:auto;
			}
			
#contenedor1 {
	vertical-align:top;
}

#contenedor2 {
	vertical-align:middle;
	/*A partir de aquí , líneas para que el div contenedor2 abarque todo
	el espacio con el fin de hacer el iframe que contiene responsive.*/
	position:relative;
	padding-bottom:56.25%;
	height:0;
	overflow:hidden;
}
#contenedor2 iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 2400px;
    height: 3660px;
}
/* CSS pantallas de 320px o superior */
@media (min-width: 320px) {

  #contenedor2 iframe {
    width: 200px;
    height: 150px;
  } 
}

/* CSS pantalla 768px o superior */
@media (min-width: 768px) {

  #contenedor2 iframe {
    width: 500px;
    height: 350px;
  } 
}

#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;
}

.textocabecera {
	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*/  
#contenedor2 iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding-left:3vw;
	padding-right:3vw;
	overflow:hidden;
}

/*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%;
}