* {				/* los estilos universales */
	padding:0; 	/* eliminar padding exterior */
	margin:0; 	/* eliminar margenes interiores */
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;}
 
html {
	min-width: 320px; /* vinx */
}
body {
	background:#F5F5F5;		
	font-family: sans-serif, Verdana, Arial, Helvetica, Consolas; 
	/*font-family: "Arial","Myriad Pro Light","Lucida Grande","Helvetica Neue","Helvetica","Verdana","sans-serif";*/
	font-size:13px;
	font-weight:normal;
	max-width: 1200px; /* vinx */
	min-width: 320px; /* vinx */
	width:100%;
	margin:auto;	
	letter-spacing:0px;
	line-height:105%;
	border:0px solid;
	border-color:#A9A9A9;
	}
	
section {
	padding:20px; } /* separar los contenidos de section */
	
h1 { 
	font-family: sans-serif, Verdana, Arial, Helvetica, Consolas; 
	font-size:14px;
	font-weight:bold;
	margin:auto;	
	letter-spacing:0px;
	line-height:105%;
	}

h2 { 
 	font-family: sans-serif, Verdana, Arial, Helvetica, Consolas; 
	font-size:14px;
	font-weight:bold;
	margin:auto;	
	letter-spacing:0px;
	line-height:105%;
	}

h3 { 
 	font-family: sans-serif, Verdana, Arial, Helvetica, Consolas; 
	font-size:14px;
	font-weight:bold;
	margin:auto;	
	letter-spacing:0px;
	line-height:105%;
	}		
 
 p  { 
 	font-family: sans-serif, Verdana, Arial, Helvetica, Consolas;
	font-size:13px;
	font-weight:lighter;
	margin-bottom:5px;

	}	
	
A:link    
{text-decoration:none;color:#FFFFFF;font-weight:normal}

A:active
{text-decoration:none;color:#FFFFFF;font-weight:normal}

A:visited
{text-decoration:none;color:#FFFFFF;font-weight:normal;
background:#F5F5F5}

A:hover
{text-decoration:none;color:#FFD700;font-weight:normal}




/* COLORES HEXADECIMALES
#000000 negro
#696969 gris barra de menu
#808080 gris + claro   (barra de menú seleccionado)
#A9A9A9 gris ++ claro  (menú desplegado)
#C0C0C0 gris +++ claro
#D3D3D3 gris ++++ claro
#DCDCDC gris +++++ claro
#F5F5F5 gris ++++++ claro (fondo del body)
#FFFFFF blanco

#0000FF azul 
#FFD700 amarillo oro
#FF0000 rojo
#008000 verde
*/

/* FUENTES * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


/* el MENU DE ESCRITORIO * * * * * * * * * * * * * * * * * * * * * * * * * */

.menu_bar {
	display: none; 					/*desactivar el menú responsive */  
	}
.margen100 {
	display: none;
	}

header {								/* la cabecera del menu */
	width: 100%;} 					/* abarcar el 100% */

header nav { 				
	background: #fff; 			/* color de fondo de la barra de menú de escritorio */
	z-index: 1000;					/* que el menú se muestre por encima de grafico, fotos... */
	/*max-width: 800px; */				/* ancho máximo */
	width: 100%; 					/* ocupando el nnn % */
	margin: 10px auto;} 				/* SupInf:10px - IzdaDcha:auto */

header nav ul {						/* elemento UL */
	list-style:none;}				/* elimina los puntitos */

header nav ul li {					/* elemento LI (las distintas opciones NIVEL-1 del menú) */
	display:inline-block;
	border-right:1px solid #696969; /* vinx */
	position: relative;}
	
@media screen and (max-width: 800px) {
	header nav ul li {
		padding:3px 0; /* vinx */
		border-bottom:1px solid #000 !important; /* vinx */
		border-right:0; /* vinx */
	}
	header nav ul li ul li:last-child {
		border-bottom:0 !important; /* vinx */
	}
	header nav ul li .children {
		background:#fff !important; /* vinx */
	}
}


header nav ul li:last-child {	
		border-right:0; /* vinx */
}
/*
header nav ul li:hover {			// elemento LI HOVER (al pasar por encima del NIVEL-1 del menú) //
	background:#808080;} 			// gris //		
*/
header nav ul li:hover a {
	color:#f00 !important;
}

header nav ul li a {				/* estilo de los elementos A: lo que vemos del menú (textos, iconos, etc) */
	color: #696969 !important; 					/* color del texto y de los iconos */
	display:block;					/* para que el padding afecte también Superior e Inferior */
	text-decoration:none;
	padding: 5px 10px;	/* vinx */				/* NOS DA LA ALTURA DEL MENU - margen interior*/	
/*	font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;*/
	font-size:14px;}
		
header nav ul li a span {			/* los iconos */
	margin-right:10px;} 				/* espaciado entre el icono y el siguiente elemento */ 

header nav ul li:hover .children {
	display:block;} 					/* HOVER: despliega los submenus al pasar por encima del NIVEL-1, sin hacer click */

header nav ul li .children {
	display: none;
	position: absolute;
/*	width: 250%; */ /* 150 */
	width: 250px; /* vinx */
	z-index:1000;
	background:#fafafa;}				/* el fondo del NIVEL-2 */ 

header nav ul li .children li {
	display:block;
	overflow: hidden;
	border-right:0 !important; /* vinx */
	border-bottom: 4px solid #FFFFFF;/* vinx */
	padding:3px 0; /* vinx */}

header nav ul li .children li a {
	color:#696969 !important; /* vinx */
	display: block;} 
	
header nav ul li .children li:hover a {
	color:#f00 !important; /* vinx */} 

header nav ul li .children li a span {
	float: right;
	position: relative;
	top:3px;
	margin-right:0;
	margin-left:10px;} 

header nav ul li .caret {
	position: relative;
	top:3px;
	margin-left:10px;
	margin-right:0px;}
/* fin de el MENU de ESCRITORIO  * * * * * * * * * * * * * * * * * * * * * * * */


/* los DIV de ESCRITORIO * * * * * * * * * * * * * * * * * * * * * * * * * * * */



/* inici - efecte zoom onMouseOver  * * * * * * * * * * * * * * * * * * */


.div-img-zoom {/*Ancho y altura son modificables al requerimiento de cada uno*/
width:200px;
height:1120px;
overflow:hidden;
}
.img-zoom {
   with: 100%;
   height: 100%;
   transition: 0,5s;
   object-fit: cover;
}
.img-zoom:hover {
transform:scale(1.25);
}
/* fi - efecte zoom onMouseOver  * * * * * * * * * * * * * * * * * * */











#LimiteContenidos{
	height:100%;
	position: relative;
	width:100%;
/*	max-width:800px; */
	margin:auto;
	text-align:left;
	border:0px solid;
	border-color:#A9A9A9;
	margin: 0px auto;
	background:#FFFFFF;	
}

#PieDePagina{
	background:#424242;
	height: 220px;  						/* establece la altura del pie de página */
	margin-top: -10px; 					/* estas cifras tienen que ser opostas */
	color: #FFFFFF; 						/* color del texto */
	font-size: 15px; 
	font-color:#FFFFFF;						/* tamaño letra cabecera */
	/*font-weight: bold;*/					/* en negrita */
	text-decoration: none;
	padding:10px 10px 10px 10px; 
	border:0px solid;}
	
.contenedor25 {
	float:left;
	width:25%;
	border:0px solid;
	border-color:#000000;
	padding:5px;}
	
.contenedor50 {
	float:left;
	width:50%;
	border:0px solid;
	border-color:#000000;
	padding:5px;}
	
.contenedor100 {
	float:left;
	width:100%;
	padding:2px;}
.contenedor100b {
	float:left;
	width:100%;
	padding:2px;}
	
.contenido25 {
	position:relative;
   float:left;
	width:25%;
	font-size: 18px;
	font-weight: normal;
	border:0px solid;
	border-color:#A9A9A9;
	padding:5px;}

.contenido25r {
	float:left;
	width:25%;
	font-size: 18px;
	font-weight: normal;
	border-right: 1px solid #D3D3D3;
	padding:5px;}
		
.contenido50 {
	float:left;
	width:50%;
	border:0px solid;
	border-color:#A9A9A9;
	padding:5px;}
	
.contenido50r {
	float:left;
	width:50%;
	border-right: 1px solid #D3D3D3;
	padding:5px;}	

.contenido50txtR {
	float:left;
	width:50%;
	border:0px solid;
	border-color:#A9A9A9;
	padding:5px;
	text-align:right;}

.contenido100 {
	float:left;
	width:100%;
	padding:5px;}
	
.fondoGris {
	float:left;
	width:100%;
	border:0px solid;
	border-color:#000000;
	font-size: 12px; 
	font-color:#FFFFFF;
	padding:5px;
	background:#424242;
	 }	

.Grupo {
	float:left;
	width:100%;
	border-bottom:3px solid; color:#FFD700;
	font-size: 12px; 
	font-color:#000000;
	padding:5px;
	 }	 
	
.CentradoAmarillo {
	display:table; 
	margin:auto;
	border:0px solid;
	border-color:#000000; 
	padding:5px;
	background:#EBDC0F;}	

.EtiquetaAmarillaEscritorio{
	display:table; 
	margin:auto;
/*	max-width: 800px; 	*/			/* ancho máximo */
	width:100%;

 
	padding:5px;
	}		
	
.EtiquetaAmarillaTablet{
	display:table; 
	margin:auto;
/*	max-width: 800px; */				/* ancho máximo */
	width:100%;
	border:0px solid;
	border-color:#000000; 
	padding:5px;
	background:#FFFFFF;
	}	

.EtiquetaAmarillaPhone{
	display:table; 
	margin:auto;
/*	max-width: 800px; */ 				/* ancho máximo */
	width:100%;
	border:0px solid;
	border-color:#000000; 
	padding:5px;
	background:#FFFFFF;
	}			
	
.EtiquetaAmarillaTablet {
	display: none;
	}
.EtiquetaAmarillaPhone {
	display: none;
	}	
		
		
/* fin de los DIV DE ESCRITORIO  * * * * * * * * * * * * * * * * * * * * * */


/* las FOTOS RESPONSIVE  * * * * * * * * * * * * * * * * * * * * * * * * * */  
.imagen100 {
  padding-top: 5px;
  max-width: 100%;
  height: auto;}
/* fin FOTOS RESPONSIVE  * * * * * * * * * * * * * * * * * * * * * * * * * */ 


/* MENU para TABLETAS (770px)  * * * * * * * * * * * * * * * * * * * * * * */

@media screen and (max-width: 800px) {	
body {
	padding-top:1px;}					/* 33 px desplazamiento hacia abajo del bloque de opciones de menú */
						
.EtiquetaAmarillaEscritorio {
	display: none;
/*z-index:1;*/
z-index:900; /* vinx */}	
.EtiquetaAmarillaTablet {
/*z-index:1;*/
z-index:900; /* vinx */
	display:inherit;
	padding-top: 50px;
	position:fixed;}
	
.EtiquetaAmarillaPhone {
/*z-index:1;*/
z-index:900; /* vinx */
	display: none;}		 					  

.margen100 {
	display: block;}

.menu_bar {								/* la cabecera del menú responsive */
/*z-index:1;*/
z-index:950; /* vinx */
	display:block; 						/* que aparezca, ya que lo teniamos oculto en el menu de escritorio */
	width:100%;							/* ancho de la barra del menú */
	position: fixed;
	top:40;								/* desplazamiento de la barra de menú para que quede la etiqueta amarilla a la vista */
	border:0px 0px 2px 0px solid;
	border-color:#000000;
	background:#FFFFFF;					/* teniendo el .menu_bar .bt-menu, creo que no hace falta */
	padding-top:px;} 					/* 3px desplazamiento hacia abajo de la barra de menu */

.menu_bar .bt-menu {					/* la cabecera del menu responsive */
	display: block;						/* desplegar las opciones del menú en bloque */
	padding: 10px;						/* afecta al alto que tiene la barra de menú */
	background:#696969;					/* color de la barra (gris oscuro) */
	color: #FFFFFF; 						/* color del texto */
	overflow: hidden;					/* a revisar */
	font-size: 10px;						/* valor anterior = 13px - tamaño letra cabecera */
	font-weight: bold;					/* en negrita */
	text-decoration: none;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;}

.menu_bar span {						/* la parte derecha de la cabecera */
	float:inherit;
	font-size: 18px;}

header nav {
	width: 50%;							/* el ancho de las opciones*/
	height: calc(100% - 50px); 			/* el alto del menú */
	position: fixed;	
	left:-100%;							/* lo tenemos aparcado fuera de la pantalla :-) */
	right:100%;
	margin: 0;
	margin-top:42px;
/* 	overflow: scroll; */}

header nav ul li { 						/* los elementos LI (la oferta del menu) */
	display: block; 						/* abarcará todo el ancho*/
	border-bottom:1px solid #FFFFFF;		/* el borde inferior distinto color para diferenciar las opciones */
	border-top:1px solid #FFFFFF;	} 
										
header nav ul li a {
	display: block;}

/*header nav ul li:hover .children {	/* HOVER con none: no despliega los submenus al pasar por encima del NIVEL-1, HAY que hacer click */
	/*display: none;}*/

header nav ul li:hover .children {
	display:block;} 						/* HOVER con block: despliega los submenus al pasar por encima del NIVEL-1, sin hacer click */

header nav ul li .children {
	width: 100%;
	position: relative;}

header nav ul li .children li a {
	margin-left:20px;}

header nav ul li .caret {
	float: right;}


/* restringir el lightbox */
.modal {
	display:none;
}


/* fin del MENU para TABLETAS (770px)  * * * * * * * * * * * * * * * * * * */

/* DIV RESPONSIVE para TABLETA   * * * * * * * * * * * * * * * * * * * * * */

.contenedor25 {
	float:left;
	width:50%;
	margin: 0 auto;
	border:0px solid;
	border-color:#000000;
	padding:5px;}	
	
.contenedor50 {
	float:left;
	margin: 0 auto;
	width:100%;
	border:0px solid;
	border-color:#000000;
	border-bottom:2px solid #D3D3D3;	
	padding:5px;}
	
.contenedor100 {
	float:left;
	margin: 0 auto;
	width:100%;
	padding:2px;}
.contenedor100b {
	float:left;
	margin: 0 auto;
	width:100%;
	padding-bottom:2px;
	border-bottom:2px solid #D3D3D3;}	

.contenido25 {
	float:left;
	margin: 0 auto;
	width:50%;
	border:0px solid;
	border-color:#A9A9A9;
	padding:5px;}
.contenido25r {
	float:left;
	margin: 0 auto;
	width:50%;
	border-right: 1px solid #D3D3D3;
	padding:5px;}

.contenido50 {
	float:left;
	margin: 0 auto;
	width:50%;
	border:0px solid;
	border-color:#A9A9A9;
	padding:5px;}
.contenido50r {
	float:left;
	margin: 0 auto;
	width:50%;
	border-right: 1px solid #D3D3D3;
	padding:5px;}
	
.contenido100 {
	float:left;
	width:100%;
	margin: 0 auto;
	border:0px solid;
	border-color:#A9A9A9;
	padding:5px;}
contenido100r {
	float:left;
	margin: 0 auto;
	width:100%;
	border-right: 1px solid #D3D3D3;
	padding:5px;}	
	
.fondoGris {
	float:left;
	margin: 0 auto;
	width:100%;
	border:0px solid;
	border-color:#000000; 
	padding:5px;
	background:#A9A9A9;}	

   



@media screen and (max-width: 481px) {

/* restringir el lightbox */
.modal {
	display:none;	
}
.modal:target {
	display:none;
}
.modal h3 {
	display:none;	
}
.imagen {
	display:none;	
}
.controles {
	display:none;	
}
.imagen a {
	display:none;	
}
.imagen img {
	display:none;	
}
.cerrar {
	display:none;	
}
/* fin de restringir el lightbox */

#menu li {
	float:left;
	width: 96%;
	padding: 0px;}
#menu a{
	float:left;
	background-color:#ccc;
	width: 100%;
	padding: 5px;}
#menu a:hover{  
	background-color:#eee;
	width: 100%;
	padding: 5px;}
	
header nav {
	width: 62%;							/* el ancho de las opciones*/
	height: calc(100% - 50px); 			/* el alto del menú */
	position: fixed;	
	left:-100%;							/* lo tenemos aparcado fuera de la pantalla :-) */
	right:100%;
	margin: 0;
	margin-top:42px;
/* 	overflow: scroll; */}

header nav ul li:hover .children {
	display:block;} 

.margen100 {
	display: block;}	

.EtiquetaAmarillaEscritorio {
	display: none;}
.EtiquetaAmarillaTablet {
	display: none;}	
.EtiquetaAmarillaPhone {
	display:inherit;
	padding-top: 50px;
	position:fixed;}					  


	

	
/* DIV RESPONSIVE */

.contenedor25 {
	float:left;
	margin: 0 auto;
	width:100%;
	border:0px;
	padding:5px;}
	
.contenedor50 {
	float:left;
	margin: 0 auto;
	width:100%;
	border:0px;
	padding:5px;}

.contenedor100 {
	float:left;
	margin: 0 auto;
	width:100%;
	border:0px;	
	padding-bottom:2px;}	
.contenedor100b {
	float:left;
	margin: 0 auto;
	width:100%;
	border:0px;	
	padding-bottom:2px;
	border-bottom:0px solid #D3D3D3;}	
	
.contenido25 {
	float:left;
	width:100%;
	margin: 0 auto;
	border:0px;
	border-bottom: 2px solid #D3D3D3;
	padding:5px;}
.contenido25r {
	float:left;
	margin: 0 auto;
	width:100%;
	border:0px;
	border-bottom: 2px solid #D3D3D3;
	padding:5px;}

.contenido50 {
	float:left;
	width:100%;
	border:0px;
	border-bottom: 2px solid #D3D3D3;
	padding:5px;}
.contenido50r {
	float:left;
	margin: 0 auto;
	width:100%;
	border:0px;
	border-bottom: 2px solid #D3D3D3;
	padding:5px;}
	
.contenido100 {
	float:left;
	margin: 0 auto;
	width: 100%;
	border:0px;
	border-bottom: 2px solid #D3D3D3;
	padding:5px;}

.fondoGris {
	float:left;
	width: 100%;
	margin: 0 auto;
	border:0px solid;
	border-color:#000000; 
	padding:5px;
	background:#A9A9A9;}