/*
VERSIÓN v.1.0
Fecha:			ENERO.2025
Descripción:	Página web del centro de buceo URPEKO GASTEIZ.
Herramientas:	JavaScript, CSS3, HTML5, jQuery3.4
*/

/* ····················································································· ESTILOS PRINCIPALES ········································································ */
body {
	background-image: url('../img/costa.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center top;
	background-size: cover;
	font-family: 'Helvetica', Arial, sans-serif;
}
input {							/* Para evitar el resalte cuando se hace focus */
	outline: none; 
}
a:active {
    text-decoration: none;
}
a {
	text-decoration-line: none;
}
* {								/* Para evitar el sombreado de elementos en dispositivos móviles */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
p {								/* Para controlar márgenes */
    margin-block-start: 0px;
    margin-block-end: 0px;
}
.leaflet-container { 			/* Controles de los mapas */
	font-size: 8px !important;
}
.leaflet-popup-content {		
	font-size: 12px !important;
}
.leaflet-bar a {
	width: 25px !important;
	height: 25px !important;
	line-height: 25px !important;
}
table {								/* Mejora el estilo de las tablas */
	border-collapse: collapse;
}
#caja {								/* Caja Contenedora */
	position: absolute;
	top: 0px;
	left: calc(50% - 400px);
	width: 800px;
	height: 100%;
	background-color: rgba(15,15,15,0.4);
	color: white;
	min-width: 320px;
}
#botonMenu, #textoMenu {						/* Botón menú de navegación */
	display: none;
}
.container p:not(:last-child) {					/* Esta clase controla el estilo de las BARRAS DE SCROLL */
	margin-bottom: 1rem;
}
.container::-webkit-scrollbar {				/* Tamaño del scroll */
	width: 6px;     /* Tamaño del scroll en vertical */
    height: 6px;    /* Tamaño del scroll en horizontal */
}
.container::-webkit-scrollbar-thumb {		/* Estilos barra (thumb) de scroll para Navegaores WebKIT. Otros se controlan desde el archivo comandos.js*/
	background: rgb(50,50,50);
	border-radius: 4px;
}
.container::-webkit-scrollbar-thumb:active {
	background-color: rgb(100,100,100);
}
.container::-webkit-scrollbar-thumb:hover {
	background: rgb(50,50,50);
	box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
.container::-webkit-scrollbar-track {		/* Estilos track de scroll */
	background: rgb(120,120,120);
	border-radius: 4px;
}
.container::-webkit-scrollbar-track:hover, 
.container::-webkit-scrollbar-track:active {
	background: rgb(100,100,100);
}
#cajaGiro {						/* Caja con las indicaciones de GIRO DE PANTALLA EN DISPOSITIVOS MÓVILES */
	position: absolute;
	top: 0px;
	left: 2px;
	width: calc(100% - 4px);
	height: 100%;
	display: none;
}
#girar {
	position: absolute;
	top: calc(50% - 300px / 2);
	left: calc(50% - 291.8px / 2);
	height: 300px;
}

/* ·························· ELEMENTOS DE LA CABECERA ··············································· */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
header {
	position: absolute;
	top: 0.5px;
	width: 800px;
	left: calc(50% - 400px);
	z-index: 10;
}
#botones {
	position: absolute;
	top: 1px;
	width: 100%;
	height: 65px;
}
#urpeko {
	position: absolute;
	left: 15px;
	height: 60px;
	top: calc(50% - 28px);
}
.menu {
	position: absolute;
	border: 1px solid white;
	padding: 5px 10px;
	font-size: 15px;
	width: 95px;
	color: white;
	border-radius: 20px;
	top: calc(50% - 8px);
	text-align: center;
}
.menu:hover {
	background-color: rgba(127,37,37,0.7);
	box-shadow: 0 0 15px 0px #88F5E9;
	cursor: pointer;
}
#m_contacto {
	right: 20px;
}
#m_consultas {
	right: 155px;
}
#m_formacion {
	right: 290px;
}
#m_conocenos {
	right: 425px;
}
	
/* ·························· ELEMENTOS DEL FOOTER ··············································· */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
footer {
	position: absolute;
	bottom: 0.5px;
	width: 800px;
	left: calc(50% - 400px);
}
#logos {
	position: absolute;
	bottom: 1px;
	width: 100%;
	height: 70px;
	background-color: rgba(15,15,15,0.5);
}
#padi, #aqualung, #dan {
	position: absolute;
	height: 40px;
	top: 8px;
}
#padi {
	right: 345px;
}
#aqualung {
	right: 164px;
}
#dan {
	right: 15px;
}
#bases {
	position: absolute;
	bottom: 1px;
	width: 100%;
	height: 17px;
	background-color: rgba(15,15,15,0.8);
	font-size: 12px;
	color: rgb(150,150,150);
}
#p_ur{
	position: absolute;
	bottom: 1px;
	left: 5px;
}
#pieCookies {
	position: absolute;
	padding: 2px;
	font-size: 11px;
	left: 10px;
	top: 5px;
}
#pieLegal {
	position: absolute;
	padding: 2px;
	font-size: 11px;
	left: 10px;
	bottom: 23px;
}
#pieCookies a, #pieLegal a {
	color: white;
}
#pieCookies a:hover, #pieLegal a:hover {
	color: #66b9f3;
}
#pieCookies a::before {
	content: "· Política de Cookies";
}
#pieLegal a::before {
	content: "· Aviso Legal";
}


/* ·························· MENÚ INICIAL DE ACCESO A LA APLICACIÓN ····································· PAG. 0 */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* ***************************************************************************************** SE COMENTA EL ANUNCIO PARA NO MOSTRARLO ************************
#anuncio {
	z-index: 3;
	display: none;
	position:absolute;
	width: 600px;
	height: 600px;
	left: calc(50% - 300px);
	top:calc(50% - 300px);
	box-shadow: 0 0 50px 25px #88F5E9;
	border-radius: 25px;
}
#anuncio_imagen {
	position: relative;
	width: 100%;
	border: 2px solid black;
}
#anuncio_X {
	z-index: 4;
	position: absolute;
	width: 50px;
	top: -25px;
	right: -25px;
	box-shadow: 0 0 50px 35px #88F5E9;
	border-radius: 25px;
}
#anuncio_X:hover {
	cursor: pointer;
	width: 56px;
	top: -28px;
	right: -28px;
	border-radius: 30px;
}
***************************************************************************************** SE COMENTA EL ANUNCIO PARA NO MOSTRARLO ************************ */
#cajaAcceso {
	position: absolute;
	top: 5px;
	height: calc(100% - 78px);
	width: 98%;
	left: 1%;
	overflow: auto;
}
#burbujas {
	width: 785px;
}
#logo01 { /* Urpeko */
	position: absolute;
	top: -190px;
	left: calc(50% - 68px);
	height: 136px;
}
#titulo1 {					/* Título */
	position: absolute;
	top: calc(40% - 25px);
	width: 100%;
	font-size: 50px;
	text-align: center;
}
#subtitulo1 {
	border-top: 1px solid white;
	width: 100%;
	padding-top: 25px;
	text-align: center;
	font-size: 25px;
}
#subtitulo2 {
	width: 100%;
	padding-top: 25px;
	text-align: center;
	font-size: 18px;
}
.servicios {								/* Botones página principal */
	position: absolute;
	width: 150px;
	height: 160px;
	top: calc(50% + 100px);
	font-size: 20px;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	padding-top: 10px;
	border-style: solid;
	border-radius: 25px;
	border-color: white;
	border-width: 1px;
	color: rgb(250,250,250);
	text-shadow: 2px 2px #040404;
}
.servicios:hover {
	cursor: pointer;
	box-shadow: 0 0 10px 0px #88F5E9;
	color: yellow;
	font-weight: bold;
}
.centrar {
	position: absolute;
	top: calc(50% - 10px);
	width: 100%;
	text-align: center;
}
#conocenos {
	left: 25px;
	background-image: url('../img/1_conocenos.jpg');
}
#formacion {
	left: calc(25% + 25px);
	background-image: url('../img/1_formacion.jpg');
}
#consultas {
	left: calc(50% + 25px);
	background-image: url('../img/1_consultas.jpg');
}
#contacto {
	left: calc(75% + 25px);
	background-image: url('../img/1_contacto.jpg');
}
.rrss {						/* Botones RRSS */
	position: absolute;
	top: calc(100% - 40px);
	height: 30px;
	border: 1px solid rgba(0,0,0,0);
}
.rrss:hover {
	box-shadow: 0 0 15px 0px #88F5E9;
	border-radius: 30px;
	border: 1px solid black;
}
#INS {
	left: calc(50% - 60px);
}
#FB {
	left: calc(50% + 30px);
}
/* ·························· MENÚ CONÓCENOS ····································· PAG. 1 */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#cajaConocenos, #cajaInmersiones, #cajaCookies, #cajaLegal, #cajaFormacion, #cajaContacto, #cajaConsultas {
	position: absolute;
	top: 70px;
	height: calc(100% - 143px);
	width: 100%;
	overflow: auto;
}
#titulo2, #titulo3, #titulo4, #titulo5, #titulo6, #titulo7, #titulo8 {					/* Títulos */
	position: absolute;
	top: 25px;
	width: calc(100% - 30px);
	font-size: 30px;
	border-bottom: 1px solid white;
	left: 15px;
}
#mascara_img {
	position: absolute;
	top: 22px;
	right: 15px;
	width: 35px;
}
#subtitulo3 {
	position: absolute;
	left: 18px;
	width: calc(100% - 36px);
	top: 70px;
	text-align: right;
	font-size: 16px;
	left: 15px;
	width: calc(100% - 30px);
}
#bloque01 {							/* Instalaciones */
	position: absolute;
	top: 170px;
	left: 15px;
	width: calc(100% - 30px);
	height: 300px;
}
#subtitulo4 {			
	text-align: right;
	font-size: 22px;
	border-bottom: 0.5px solid white;
}
#subtitulo5 {			
	position: relative;
	top: 10px;
	font-size: 16px;
}
#bloque02 {							
	position: relative;
	top: 10px;
	width: 100%;
}
#aula1, #aula2, #aula3 {
	position: absolute;
	top: 10px;
	width: calc((100%/3) - 5px);
}
#aula2 {
	left: calc((100%)/3 + (5px/2));
}
#aula3 {
	right: 0px;
}
#bloque03 {							/* Equipo */
	position: relative;
	top: 500px;
	left: 15px;
	width: calc(100% - 30px);
	height: 380px;
}
#subtitulo6 {			
	width: 100%;
	font-size: 22px;
	border-bottom: 0.5px solid white;
}
#eq1, #eq2, #eq3 {
	position: absolute;
	top: 40px;
	width: calc((100%/3) - 5px);
}
#eq2 {
	left: calc((100%)/3 + (5px/2));
}
#eq3 {
	right: 0px;
}
.guaperas {
	width: 100%
}
#eq4, #eq5, #eq6 {
	position: absolute;
	bottom: 10px;
	left: 5px;
	font-size: 13px;
	text-shadow: 2px 2px #040404;
}
#bloque04 {							/* Inmersiones */
	position: absolute;
	top: 910px;
	left: 15px;
	width: calc(100% - 30px);
	height: 450px;
}
#subtitulo7 {			
	width: 100%;
	text-align: right;
	font-size: 22px;
	border-bottom: 0.5px solid white;
}
#inmersiones {
	position: absolute;
	border: 1px solid white;
	padding: 3px 5px 2px 5px;
	font-size: 13px;
	width: 80px;
	color: white;
	border-radius: 20px;
	top: 35px;
	right: 5px;
	text-align: center;
	background-color: rgba(47,75,199,0.6);
	z-index: 10;
}
#inmersiones:hover {
	background-color: rgba(47,75,199,1);
	box-shadow: 0 0 15px 0px #dae1e0;
	font-weight: bold;
	cursor: pointer;
}
#I2 {
	display: none;
}
#subtitulo8 {			
	position: relative;
	top: 10px;
	text-align: left;
	font-size: 16px;
}
#mapaInmersiones {
	position: relative;
	width: 100%;
	top: 20px;
	border: 1px solid white;
	height: 350px;
}
#subtitulo9 {			
	position: relative;
	top: 30px;
	text-align: left;
	font-size: 16px;
	padding-bottom: 10px;
}

/* ·························· PÁGINA DE LAS INMERSIONES ····································· PAG. 2 */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#buzo_img {
	position: absolute;
	top: 23px;
	right: 15px;
	height: 32px;
}
#subtitulo10 {			
	position: absolute;
	top: 77px;
	left: 15px;
	width: calc(100% - 16px);
	font-size: 14px;
}
#titulo9 {
	position: absolute;
	top: 2095px;
	width: calc(100% - 30px);
	font-size: 30px;
	text-align: right;
	border-bottom: 1px solid white;
	left: 15px;
}
#subtitulo24, #subtitulo25 {			
	position: absolute;
	left: 15px;
	width: calc(100% - 16px);
	font-size: 14px;
}
#subtitulo24 {			
	top: 1815px;
}
#subtitulo25 {			
	top: 2148px;
}
.inmersion {										/*Descripción de las Inmersiones*/	
	position: absolute;
	left: 8px;
	width: calc(100% - 16px);
	height: 217px;
	font-size: 13px;
}
#inm1 {	
	top: 110px;
}
#inm2 {	
	top: 355px;
}
#inm3 {	
	top: 600px;
}
#inm4 {	
	top: 845px;
}
#inm5 {	
	top: 1090px;
}
#inm6 {	
	top: 1335px;
}
#inm7 {	
	top: 1580px;
}
#inm8 {	
	top: 1850px;
}
#inm9 {	
	top: 2180px;
}
#inm10 {	
	top: 2425px;
}
#inm11 {	
	top: 2670px;
}
#inm12 {	
	top: 2915px;
}
#inm13 {	
	top: 3160px;
}
#inm14 {	
	top: 3405px;
}
.descripcion {
	position: absolute;
	width: calc(50% - 8px);
}
#descripcion1, #descripcion3, #descripcion5, #descripcion7, #descripcion9, #descripcion11, #descripcion13 {
	right: 8px;
}
#descripcion2, #descripcion4, #descripcion6, #descripcion8, #descripcion10, #descripcion12 {
	text-align: right;
}
#descripcion14 {
	text-align: right;
	height: 227px;
}
.foto {
	position: absolute;
	width: calc(50% - 8px);
	height: 100%;
	background-repeat: no-repeat;
	background-position: center top;
}
#foto1 {
	background-image: url('../img/i_Mina.png');
}
#foto2 {
	background-image: url('../img/i_Arcos.png');
	right: 8px;
}
#foto3 {
	background-image: url('../img/i_Harribolas.jpg');
}
#foto4 {
	background-image: url('../img/i_Potorro.jpg');
	right: 8px;
}
#foto5 {
	background-image: url('../img/i_Corte.jpg');
}
#foto6 {
	background-image: url('../img/i_CaboM.jpg');
	right: 8px;
}
#foto7 {
	background-image: url('../img/i_Elantxobe.png');
}
#foto8 {
	background-image: url('../img/i_Pantano.jpg');
	right: 8px;
}
#foto9 {
	background-image: url('../img/i_Piscina.jpg');
}
#foto10 {
	background-image: url('../img/i_SAndres.jpg');
	right: 8px;
}
#foto11 {
	background-image: url('../img/i_MLevante.jpg');
}
#foto12 {
	background-image: url('../img/i_MPoniente.jpg');
	right: 8px;
}
#foto13 {
	background-image: url('../img/i_Calderas.jpg');
}
#foto14 {
	background-image: url('../img/i_Pasillos.jpg');
	right: 8px;
	height: 217px;
}


/* ·························· POLÍTICA DE COOKIES ····································· PAG. 3 */
/* ·························· AVISO LEGAL ····································· PAG. 4 */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#cookie_img {
	position: absolute;
	top: 1px;
	right: 2px;
	width: 30px;
}
#legal_img {
	position: absolute;
	right: 2px;
	width: 30px;
}
#subtitulo11, #subtitulo12, #subtitulo13, #subtitulo14, #subtitulo15 {			
	position: absolute;
	top: 50px;
	left: 8px;
	width: calc(100% - 16px);
	font-size: 13px;
}
#subtitulo11 a, #subtitulo12 a, #subtitulo13 a, #subtitulo14 a {			
	color: #66b9f3;
}
#subtitulo11 a:hover, #subtitulo12 a:hover, #subtitulo13 a:hover, #subtitulo14 a:hover {			
	color: #e0f366
}


/* ·························· PÁGINA CON LA FORMACIÓN ····································· PAG. 5 */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#formacion_img {
	position: absolute;
	top: -10px;
	right: 2px;
	width: 32px;
}
/* Estilo de las pestañas */
#catalogo {
	position: absolute;
	top: 120px;
	left: 20px;
	width: calc(100% - 40px);
	font-size: 14px;
}
#catalogo a {			
	color: #66b9f3;
}
#catalogo a:hover {			
	color: #e0f366;
}
.ui-accordion .ui-accordion-content {
	padding: 10px;
	height: 100% !important;
}
.ui-widget-content {
	background: none;
	color: white;
}
.ui-state-active {
	border: 1px solid white;
	font-weight: bold;
	background-color: #3172ca8c !important;
}
.ui-state-active:hover {
	color: white !important;
	cursor: default;
}
.ui-state-default {
	border: 1px solid white;
	background-color: #311e1e;
	color: white;
}
.ui-state-default:hover {			
	color: #e0f366;
	font-weight: bold;
}
.texto1 {
 	padding: 12px;
	border: 0.5px solid white;
}
.texto2 {
    padding: 12px;
    display: none;
	border: 0.5px solid white;
}
.texto3 {
    padding: 12px;
    display: none;
	border: 0.5px solid white;
}
.texto4 {
    padding: 12px;
    display:none;
	border: 0.5px solid white;
}
.fotoCurso {
	position: relative;
	width: 65%;
	left: 17.5%;
}
.fotoEspecialidad, .fotoBautizo {
	position: relative;
	width: calc(50% - 5px);
	left: 3px;
}
.fotoTec {
	position: relative;
	width: 70%;
	left: 15%;
}
/* Se controlan las tablas */
#cursos caption, #especialidades caption {
	text-align: left;	
}
#cursos, #especialidades {
	text-align: left;
	width: 100%;
}
#cursos th, #especialidades th {
	border-bottom: 0.5px solid white;
}
#cursos tr, #especialidades tr {
	border-bottom: 0.5px solid white;
	height: 25px;
}
.colum1 {
	padding-left: 5px;
	width: calc(100% - 80px - 100px);
}
.colum2 {
	width: 80px;
	text-align: center
}
.colum3 {
	width: 100px;
	text-align: center;
}
.colum3 a {
	font-weight: bold;
}

/* ·························· PÁGINA CON LA INFORMACIÓN DE CONTACTO ····································· PAG. 6 */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#contacto_img {
	position: absolute;
	top: 1px;
	right: 2px;
	width: 30px;
}
.rrssContacto {
	height: 40px;
	margin-left: 10px;
	margin-right: 10px;
	border: 1px solid rgba(0,0,0,0);
}
.rrssContacto:hover {
	box-shadow: 0 0 15px 0px #88F5E9;
	border-radius: 30px;
	border: 1px solid black;
}
#mapaUrpeko {
	position: absolute;
	top: 230px;
	right: 25px;
	height: 360px;
	width: 350px;
	border: 1px solid white;
}
#accesoGoogleMaps {
	display: none;
}
#accesoGoogleMaps:hover {
	cursor: pointer;
}
#logo03 {
	width: 40px;
	padding-left: calc(50% - 20px);
}

/* ·························· PÁGINA CON LAS CONSULTAS ····································· PAG. 7 */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#consultas_img {
	position: absolute;
	top: 1px;
	right: 2px;
	width: 30px;
}
#subtitulo16 {			/* Legislación */
	position: absolute;
	width: 100%;
	top: 120px;
	left: 20px;
	width: calc(100% - 40px);
	font-size: 22px;
	border-bottom: 0.5px solid white;
}
#subtitulo17 {			
	position: absolute;
	width: 100%;
	top: 155px;
	left: 20px;
	width: calc(100% - 40px);
	font-size: 13px;
}
#subtitulo17 a {			
	color: #66b9f3;
}
#subtitulo17 a:hover {			
	color: #e0f366
}
#subtitulo18 {			/* Calendario */
	position: absolute;
	width: 100%;
	top: 205px;
	left: 20px;
	width: calc(100% - 40px);
	font-size: 22px;
	border-bottom: 0.5px solid white;
	text-align: right;
}
#subtitulo19 {			
	position: absolute;
	width: 100%;
	top: 240px;
	left: 20px;
	width: calc(100% - 40px);
	font-size: 13px;
}
#calendario {			
	position: absolute;
	top: 280px;
	padding: 15px 15px 18px 15px;
	left: calc(50% - (270px / 2));
	width: 270px;
	height: 20px;
	font-size: 20px;
	text-align: center;
	border: 2px solid white;
	border-radius: 25px;
	background-color: #6363d563;
}
#calendario:hover {
	background-color: rgba(127, 37, 37, 0.7);
    box-shadow: 0 0 15px 0px #88F5E9;
	cursor: pointer;
}
#calendario a {
	color: white;
}
#calendario label:hover {
	cursor: pointer;
}
#subtitulo20{			/* Estado del mar */
	position: absolute;
	width: 100%;
	top: 365px;
	left: 20px;
	width: calc(100% - 40px);
	font-size: 22px;
	border-bottom: 0.5px solid white;
}
#subtitulo21 {			
	position: absolute;
	width: 100%;
	top: 400px;
	left: 20px;
	width: calc(100% - 40px);
	font-size: 13px;
}
#partemar {			
	position: absolute;
	width: 100%;
	top: 425px;
	left: 20px;
	width: calc(100% - 40px);
	height: 268px;
}
#subtitulo22{			/* Meteorología */
	position: absolute;
	width: 100%;
	top: 860px;
	left: 20px;
	width: calc(100% - 40px);
	font-size: 22px;
	border-bottom: 0.5px solid white;
	text-align: right;
}
#subtitulo23 {			
	position: absolute;
	width: 100%;
	top: 895px;
	left: 20px;
	width: calc(100% - 40px);
	font-size: 13px;
}
#tiempo {			
	position: absolute;
	top: 935px;
	left: calc(50% - (544px / 2));
	width: 544px;
	height: 101px;
}
#logo04 {
	position: absolute;
	width: 100%;
	top: 1055px;
	left: calc(50% - 110px);
	width: 220px;
	padding-bottom: 10px;
}