/* ---------------------------------------------------------------------------- */
/* COLORES GENERALES DEL INTERFACE */
/* ---------------------------------------------------------------------------- */
:root {
    --color-ppal: #003380;
    --color-secundario: #477bab;
    --color-terciario: #f80;
    --color-catalogo: #cd0067;
}

/* ---------------------------------------------------------------------------- */
/* IMPORTACIÓN DE LA FUENTE ROBOTO DE GOOGLE FONTS */
/* ---------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

/* ---------------------------------------------------------------------------- */
/* Animaciones css */
/* ---------------------------------------------------------------------------- */
@-webkit-keyframes miAnimacionFade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframe miAnimacionFade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@-webkit-keyframes zoom {
	from { -webkit-transform: scale(1.5, 1.5); }
	to { -webkit-transform: scale(1, 1); }
}
@keyframes zoom {
	from { transform: scale(1.5, 1.5); }
	to { transform: scale(1, 1); }
}

/* ---------------------------------------------------------------------------- */
/* VALORES GENERALES DEL INTERFACE. EL TEXTO DE COLOR NEGRO #000 en fuente 12px */
/* ---------------------------------------------------------------------------- */
html, body {
    width: 100%;
    height: 100%;
	margin:0;
	padding:0;
}
body{ 
    font-family: 'Roboto', sans-serif;
	font-size:14px; 
    overflow-x: hidden;
    display:flex; 
    flex-direction:column; 
    animation: miAnimacionFade 1s;
	color:#000;
}
body.ephox-candy-mountain {
	display:initial !important;		
}
div {
    /* position:relative; */
}
/* Los enlaces sin subrayado y con el color definido como ppal */
a, a:link {
    color: var(--color-ppal);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
/* Las imagenes grandes se ajustan a la pantalla */
img {
    max-width:100%;
}
/* Img circular y  aro bordeándola */
img.circular {
     max-width:150px;
     border-radius:100%;
}
img.aro {
     padding:10px;
     margin: 10px;
     border: 3px solid #f0f0f0;
}
img.zoom {
	transition: transform 0.2s;
}
a:hover img.aro {
    border: 3px solid rgba(0,0,0,0.5);
}
a:hover img.zoom{
	transform: scale(1.25);
}
/* Alineaciones del contenido */
.dchaTexto {
    text-align: right;
}
.izqTexto {
    text-align: left;
}
.centraTexto {
    text-align: center;
}
/* Colores de texto */
.miColor1 {
	color: var(--color-ppal);
}
.miColor2 {
	color: var(--color-secundario);
}
.miColor3 {
	color: var(--color-terciario);
}
.blanco {
    color:#fff;
}
.negro {
    color:#000;
}
.rojo {
    color:#a00;
}
.verde {
    color:#0a0;
}
.azul {
    color:#00a;
}
.amarillo {
    color:#fc0;
}
.margenSuperior {
    margin-top: 15px;
}
.margenInferior {
    margin-bottom: 15px;
}
.dobleEspaciado{
    line-height:150%;
}
.redondeado {
	border-radius:10px;
}
.sombreado {
    box-shadow: 5px 5px 3px 0px rgba(128,128,128,0.7);
}
.sinsombra {
    box-shadow: none;
}
.destacado {
    background-color: rgb(183, 156, 19, 0.9);
    border-radius:5px;
    padding: 3px;
    color: #fff;
}    
.bordeado {
    border: 1px solid #c0c0c0;
}
.bordeSuperior {
    border-top: 1px solid #c0c0c0;
}
.bordeInferior {
    border-bottom: 1px solid #c0c0c0;
}
.nota {
  background-color: #f9f9f9;
  border-left: 10px solid var(--color-ppal);
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
.separador:before {
  content: "|";
  padding:0px 10px;
}
ul.corporativo, ul.listaEnlaces, ul.simple {
    list-style: none;
}
ul.corporativo li {
    list-style-position: inside;
    list-style-image: url(./imagenes/iconolista.png);
}
ul.listaEnlaces li:before {
	content:'\221E';
	font-size:1.8em;
	font-weight:700;
	color: var(--color-terciario);	
	padding-right:5px;
}
/* ---------------------------------------------------------------------------- */
/* ENLACES / DESCARGAS */
/* ---------------------------------------------------------------------------- */
a.fichero:after {
	content: 'Descargar fichero »';
	margin-left:5px;
	cursor:pointer;
}
a.pdf:before {
	content:'';
	padding-right: 28px;
    top: -5px;
    position: relative;
    padding-bottom: 8px;
    background-repeat: no-repeat;	
    background-image: url(../imagenes/pdf-icon.png);    
}
a.jpg:before {
    content:'';
    padding-right: 28px;
    top: -5px;
    position: relative;
    padding-bottom: 8px;
    background-repeat: no-repeat;    
    background-image: url(../imagenes/img-icon.png);    
}
a.html:before {
    content:'';
    padding-right: 28px;
    top: -5px;
    position: relative;
    padding-bottom: 8px;
    background-repeat: no-repeat;    
    background-image: url(../imagenes/icono.html.png);    
}
a.htm:before {
    content:'';
    padding-right: 28px;
    top: -5px;
    position: relative;
    padding-bottom: 8px;
    background-repeat: no-repeat;    
    background-image: url(../imagenes/icono.html.png);    
}
a.destaca:before {
    content:'';
    padding-right: 28px;
    top: -5px;
    position: relative;
    padding-bottom: 8px;
    background-repeat: no-repeat;    
    background-image: url(../imagenes/icono.destacada.png);    
}
a.txt:before {
    content:'';
    padding-right: 28px;
    top: -5px;
    position: relative;
    padding-bottom: 8px;
    background-repeat: no-repeat;    
    background-image: url(../imagenes/icono.txt.png);    
}
a.gpx:before {
    content:'';
    padding-right: 28px;
    top: -5px;
    position: relative;
    padding-bottom: 8px;
    background-repeat: no-repeat;    
    background-image: url(../imagenes/icono.descarga.png);    
}
a.kmz:before {
    content:'';
    padding-right: 28px;
    top: -5px;
    position: relative;
    padding-bottom: 8px;
    background-repeat: no-repeat;    
    background-image: url(../imagenes/icono.descarga.sitio.png);    
}
a.kml:before {
    content:'';
    padding-right: 28px;
    top: -5px;
    position: relative;
    padding-bottom: 8px;
    background-repeat: no-repeat;    
    background-image: url(../imagenes/icono.descarga.png);    
}
a.map:before {
    content:'';
    padding-right: 28px;
    top: -5px;
    position: relative;
    padding-bottom: 8px;
    background-repeat: no-repeat;    
    background-image: url(../imagenes/icono.google.maps.png);    
}
a.no:before {
    content:'';
    padding-right: 28px;
    top: -5px;
    position: relative;
    padding-bottom: 8px;
    background-repeat: no-repeat;    
}
a.no:before {
    background-image: url(../imagenes/icono.tarea.pendiente.png);    
}

a.DOC:before {
    background-image: url(../imagenes/doc-icon.png);	
    background-repeat: no-repeat;	
}
a.XLS:before {
    background-image: url(../imagenes/xls-icon.png);	
    background-repeat: no-repeat;	
}
a.ZIP:before {
    background-image: url(../imagenes/zip-icon.png);	
    background-repeat: no-repeat;	
}
a.leermas:after {
	content: 'Leer más »';
	margin-left:5px;
	cursor:pointer;
}
a.leermas:after {
	content: 'Más información »';
	margin-left:5px;
	cursor:pointer;
}

/* ---------------------------------------------------------------------------- */
/* ZONA CABECERA (LOGO, BUSCADOR Y MENU) */
/* ---------------------------------------------------------------------------- */
#cabecera{
    position: fixed;
    width: 100%;
    font-size:24px;
    z-index:8000;
    background: transparent;
    transition: background-color 1000ms linear;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
}
#logotipo {
    width:auto;
    max-height:120px;
    padding:5px 15px;	
}
#iconoMenu{
    display:none; /* oculto por defecto */ 
    color: #fff;
    text-shadow: 2px 2px 2px #000;
}
#menuPrincipal {
    background-color: #FFFFFF;
    color: var(--color-ppal);
    padding: 20px 0;
    z-index: 10000;
}
#menu {
    position:relative;
    padding-top: 40px;
    text-align:right;
    
}
#menu a {
    color: var(--color-ppal);
    text-decoration: none;
    padding:1px;
    transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
}
#menu > ul > li {
	padding-right:20px;
}
#menu ul li span {
    font-size: 1em;
}
#menu ul li ul {
     box-shadow: 0 0 0 #000;
}
#menu ul li ul li a {
    font-size: 2rem;
}

.buscador{
	padding: 3px 25px 3px 3px;
    font-size: 14px;
    font-weight: normal;
	width:calc(100% - 55px);
    max-width:350px;
    color:var(--color-ppal);
}
lupa {
	color:var(--color-ppal);
	background:transparent;
	border:none;
    width:0px;
    height:0px;
}
.buscador + lupa::after {
	content:'\0260C';
	font-family: sans-serif;
	font-size:22pt;
	font-weight:700;	
	display:inline-block;	
	transform:rotate(110deg);
	position:relative;
	top:6px;
	left:-20px;
}
#tfno-cabecera {
    position:absolute;
    top:20px;
    right:20px;
    text-align: right;
    line-height:100%;    
    letter-spacing:2px;
}        
#tfno-cabecera a {
    color: var(--color-ppal);
    font-size:2em;    
}    

/* ---------------------------------------------------------------------------- */
/* BANNER PORTADA */
/* ---------------------------------------------------------------------------- */
.bx-viewport, .bx-wrapper{
    position:relative;
    top:0;
    left:0;
    width:100%;
    #height:100%;
    border: none;
    padding:0px;
    margin:0px;
    height: 720px;
}
.sliderPortada {
    height: 100%;
    padding: 0;
    margin: 0;
}
.sliderPortada li{
    height: 100%;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1,1);
}
.sliderPortada div.leyenda {
    position:relative;
    top:90%;
    left:5%;
    font-size:1.7em;
    color:#fff;
    max-width:90%;
    text-shadow: 5px 5px 5px #fff;
}
.sliderPortada div.leyenda h1 {
    font-size:2.0em;
    margin:0;
}

div.leyenda a, div.leyenda a:hover {
    text-shadow: 2px 2px 5px #808080;
	text-decoration:none;
}

/* ---------------------------------------------------------------------------- */
/* CONTENIDOS DE LA PAGINA */
/* ---------------------------------------------------------------------------- */
.tituloPagina {
    color: var(--color-ppal);
	font-weight:700;
	font-size:1.2em;
}
.titulo {
	color: var(--color-ppal);
}
.migas {
    font-size: 0.85em;
} 
/* ---------------------------------------------------------------------------- */
/* ESTRUCTURAS FILA, COLUMNA (LAYOUTS) */
/* ---------------------------------------------------------------------------- */
table[class*="fila"] {
	width:100%;
}
div[class*="fila"] {
	width:100%;
	display:inline-block;
}

div.fila:after {
  content: '';
  display: table;
  clear: both;
}
div.fila5 > div {
	width:calc(20% - 2px);
	float:left;
}
div.fila4 > div {
	width:calc(25% - 2px);
	float:left;
}
div.fila3 > div {
	width:calc(33.33% - 2px);
	float:left;
}
div.fila2 > div {
	width:calc(50% - 2px);
	float:left;
}

div[class*="col"] {
	float:left;

}
div.col100 {
	float:none;
	display:block;
	clear: both;
}
.col5  { width:calc(5% - 2px); }
.col10 { width:calc(10% - 2px); }
.col15 { width:calc(15% - 2px); }
.col20 { width:calc(20% - 2px); }
.col25 { width:calc(25% - 2px); }
.col33 { width:calc(33.33% - 2px); }
.col50 { width:calc(50% - 2px); }
.col66 { width:calc(66.66% - 2px); }
.col75 { width:calc(75% - 2px); }
.col80 { width:calc(80% - 2px); }
.col85 { width:calc(85% - 2px); }
.col90 { width:calc(90% - 2px); }
.col95 { width:calc(95% - 2px); }
.col100 { width:calc(100% - 2px); }

.lcol5  { width:calc(5% - 2px); }
.lcol10 { width:calc(10% - 2px); }
.lcol15 { width:calc(15% - 2px); }
.lcol20 { width:calc(20% - 2px); }
.lcol25 { width:calc(25% - 2px); }
.lcol33 { width:calc(33.33% - 2px); }
.lcol50 { width:calc(50% - 2px); }
.lcol66 { width:calc(66.66% - 2px); }
.lcol75 { width:calc(75% - 2px); }
.lcol80 { width:calc(80% - 2px); }
.lcol85 { width:calc(85% - 2px); }
.lcol90 { width:calc(90% - 2px); }
.lcol95 { width:calc(95% - 2px); }
.lcol100 { width:calc(100% - 2px); }

/* ---------------------------------------------------------------------------- */
/* PARA EL CONTENIDO DE BLOQUES DE NOTICIAS 									*/
/* ---------------------------------------------------------------------------- */
.noticia {
	font-size:1em;
}
.noticia .fecha{
	font-size: 0.85em;
	display:block;
}
.noticia .titulo{
	font-weight:700;
	color:var(--color-ppal);
	display:block;
	padding:5px;
}
.noticia .subtitulo{
	font-style:italic; 
	display:block;
	padding-right:10px;
}
.noticia img{
	float: left;
	width: auto;
	height:120px;
	margin-right:10px;
    border-radius: 20px;
}
.noticia img:hover {
	box-shadow: 0 0 8px 3px var(--color-ppal);
}
/* ---------------------------------------------------------------------------- */
/* PARA GALERÍAS FOTOGRÁFICAS													*/
/* ---------------------------------------------------------------------------- */
.galeriaFotografica {
	font-size:1em;
	text-align: center;
}
.galeriaFotografica img {
	width: auto;
    height: 150px;
    display: block;
    margin: 0px auto 10px !important;
	cursor: pointer;
}
.galeriaFotografica img:hover {
	box-shadow: 0 0 8px 3px var(--color-ppal);
}
.galeriaFotografica > img.imgZoom {
    position: relative;
    width:auto;
    height:auto;
}
.galeriaFotografica img.imgZoom:after {
    content:"";
    width: 24px;
    height: 24px;
    position: absolute;
    top: 10px;
    left: 10px;
    color:#fff;
    background-image:url(./imagenes/zoom.png);
    background-position:bottom right;
    background-repeat:no-repeat;    
}
.galeriaFotografica .titulo {
    color: var(--color-ppal);
	font-weight:bold;
	display: block;
}


/* ---------------------------------------------------------------------------- */
/* PARA ZONA DE DOCUMENTOS														*/
/* ---------------------------------------------------------------------------- */
.documento {
	font-size:1em;
	text-align:center;
}
.documento  img {
    display: block;
    width: auto;
    height:150px;
    margin: 0px auto 10px !important;
    border-radius: 20px;
}
.documento img:hover {
	box-shadow: 0 0 8px 3px var(--color-ppal);
}
.documento .titulo {
    font-weight: 700;
	display: block;
}
.documento .enlace {
	text-decoration:none;
}
.documento .enlace:before {
    content: '\027A7';
	padding-right:5px;
}
.documento .enlace:after {
    content: '(descargar)';
	font-size: 0.85em;
	padding-left:5px;
	color: #009;
}

/* ---------------------------------------------------------------------------- */
/* FORMULARIOS          														*/
/* ---------------------------------------------------------------------------- */

input, textarea{
    width:100%;
    padding: 5px;
	border-radius:5px;
	border: 1px solid #c0c0c0;
}
input.corto {
    width:50%;
    max-width:240px;
}
input[type=checkbox] {
    width:25px;
	border:none;
}
input[type=submit], input[type=reset] {
    border-radius: 15%;
    width:120px;
    float:right;
    margin:0px 100px;
}
input[type=reset] {
    float:left;
}
input[type=submit]:hover, input[type=reset]:hover {
    background-color: var(--color-ppal);
    color:#fff;
}
.imgcaptcha {
    height:24px;
    width:auto;
    margin-top:10px;
}
.boton {
    width:auto;
    max-width:250px;
    padding: 2px 10px;
    border: 1px solid #c0c0c0;
    border-radius: 5px;    
    background-color: #F0F0F0;
    color:#000;
}
.boton.activo, .boton:hover {
    background-color: var(--color-ppal);
    color:#fff;
}

/* ZONA PIE */

footer{
    margin-top:auto; 
    height:40px;
}
#volverArriba {
    cursor: pointer;
    position: fixed;
    bottom: 80px;
    right: 20px;
    display:none;
    width:54px;
    height:48px;
    background-color:#f0f0f0;
    border: 1px solid #c0c0c0;
	border-radius:5px;
    color:#333;
    text-align: center;
    z-index:99;
}
#volverArriba:before {
	content: '\27A7';
    font-size: 4.5em;	
	display: inline-block;
	position:absolute;
	top:-18px;	
	left:5px;
	color:var(--color-ppal);
	transform: rotate(-90deg);
}
#volverArriba:hover {
	background-color:var(--color-ppal);
}
#volverArriba:hover::before {
	color:#fff;
}

#pie {
    width: 100%;
    background-color: var(--color-ppal);
    color: #fff;
    padding: 20px 0px;
}
#pie a {
    color : #fff;
}
.contactoPie {
    background-color: var(--color-ppal);
    padding: 20px 0px;
}
.menupie {
    padding-top:0px;
}
.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
    width:48px;
    height:48px;
    background-color:#f0f0f0;
    border: 1px solid #c0c0c0;
    color:#555;
    font-size: 32px;
    text-align: center;
    z-index:99;
    padding-left: 5px;
}

.subseccion {
  padding-left:15px;    
}
a.enlacepie {
    text-decoration: none;
    
}
a.enlacepie:hover {
    text-decoration: underline;
}

.youtube-player { border-radius: 10px; position: relative;padding-bottom:56.23%;height:0;overflow:hidden;max-width:100%;background:#000;margin:8px 0 8px 0;}
.youtube-player iframe { position:absolute;top: 0;left:0;width:100%;height:100%;z-index:100;background: transparent;}
.youtube-player img { bottom:0;display:block;left:0;margin:auto;max-width:100%;width:100%;position:absolute;right:0;top: 0;border:none;height:auto;cursor:pointer;-webkit-transition: .4s all;-moz-transition: .4s all;transition: .4s all;}
.youtube-player img:hover {-webkit-filter:brightness(75%);}
.youtube-player .play {height:72px;width:72px;left:50%;top:50%;margin-left:-36px;margin-top:-36px;position:absolute;background: url("//i.imgur.com/TxzC70f.png") no-repeat;}

.videosYoutube{
    width:100%;
    height: auto;
}
@media screen and (max-width: 1024px) {
    #menu {
        position: relative;
        padding-top: 40px;        
    }
	/* Los cambios de tamaño de los bloques */
    .mcol5  { width:calc(5% - 2px); }
    .mcol10 { width:calc(10% - 2px); }
    .mcol15 { width:calc(15% - 2px); }
    .mcol20 { width:calc(20% - 2px); }
    .mcol25 { width:calc(25% - 2px); }
    .mcol33 { width:calc(33.33% - 2px); }
    .mcol50 { width:calc(50% - 2px); }
    .mcol66 { width:calc(66.66% - 2px); }
    .mcol75 { width:calc(75% - 2px); }
    .mcol80 { width:calc(80% - 2px); }
    .mcol85 { width:calc(85% - 2px); }
    .mcol90 { width:calc(90% - 2px); }
    .mcol95 { width:calc(95% - 2px); }
    .mcol100 { width:calc(100% - 2px); }
   
}

@media screen and (max-width:768px) {
    #logotipo {
        max-height:100px;
        padding: 10px 5px 10px 0px;
    }
    #tfno-cabecera {
        position:absolute;
        top:20px;
        right:120px;
        color: #477bab;    
        font-size: 10px;
        text-align: right;
        line-height:100%;    
    }
	/* Sistema de menús	responsive sin uso de la clase rgbMenu */
    #menu {
        position:absolute;
        padding: 0px;
        text-align:right;        
    }
    #menu > ul{
        top:100px;
        padding-bottom:30px;
    }
    #menu ul{
        display:none;
        right:0;
        position:inline;
        border-bottom:2px solid #fff;
        width:100%;
        background-color: var(--color-ppal);
        transition: background-color 1000ms linear;
        -webkit-transition: background-color 1000ms linear;
        -ms-transition: background-color 1000ms linear;
        transition: background-color 1000ms linear;
    }
    #menu ul li{
        display: block;
        background: transparent;
        color: var(--color-ppal);
        position: static;
        text-align: right;
    }
    #menu ul li span.nombreEnlace, #menu ul li a, , #menu ul li a span{
        font-size:1rem;

    }
    #menu ul li ul {
        position:relative;
        text-align:right;
        width:100%;
    }
    #menu ul li ul li {
        text-align:right;
    }
    #menu ul li ul li a {
        padding:0px 20px;
        color: var(--color-ppal);
    }
    
    #menu ul li span, #menu ul li a{
        color: var(--color-ppal);
    }
    .sinSubmenus {
        padding-right:20px;
    }
    .liPrimero {
        padding-right:5px;
    }        
    #iconoMenu{
        display:block;
        text-align:right;
        font-size:4rem; 
        padding:10px;
    }   
    .bloque{
        width:100%;
		display:block;
		float:none;
    }
	div[class*="fila"] > div {
		/* width:calc(98% - 2px); */
	}
    
    .scol5  { width:calc(5% - 2px); }
    .scol10 { width:calc(10% - 2px); }
    .scol15 { width:calc(15% - 2px); }
    .scol20 { width:calc(20% - 2px); }
    .scol25 { width:calc(25% - 2px); }
    .scol33 { width:calc(33.33% - 2px); }
    .scol50 { width:calc(50% - 2px); }
    .scol66 { width:calc(66.66% - 2px); }
    .scol75 { width:calc(75% - 2px); }
    .scol80 { width:calc(80% - 2px); }
    .scol85 { width:calc(85% - 2px); }
    .scol90 { width:calc(90% - 2px); }
    .scol95 { width:calc(95% - 2px); }
    .scol100 { width:calc(100% - 2px); }    
    
	.col5, .col10  { width:calc(10% - 2px); }
	.col15, .col20  { width:calc(20% - 2px); }
	.col25,	.col33, .col50, .col66 { width:calc(50% - 2px); }
	.col75, .col80, .col85, .col90, .col95 { width:calc(80% - 2px); }
   
}
@media screen and (max-width: 480px) {
	div[class*="fila"] > div, [class*=col] {
		/*width:100%;*/
	}
    .xcol5  { width:calc(5% - 2px); }
    .xcol10 { width:calc(10% - 2px); }
    .xcol15 { width:calc(15% - 2px); }
    .xcol20 { width:calc(20% - 2px); }
    .xcol25 { width:calc(25% - 2px); }
    .xcol33 { width:calc(33.33% - 2px); }
    .xcol50 { width:calc(50% - 2px); }
    .xcol66 { width:calc(66.66% - 2px); }
    .xcol75 { width:calc(75% - 2px); }
    .xcol80 { width:calc(80% - 2px); }
    .xcol85 { width:calc(85% - 2px); }
    .xcol90 { width:calc(90% - 2px); }
    .xcol95 { width:calc(95% - 2px); }
    .xcol100 { width:calc(100% - 2px); }
	
}