body {
	background: url(../../../images/fondo_inicio.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.oculto {
	display: none;
}

#cabecera {

	height: 15%;
	/* 15% de la altura total */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;



	background: url(../../../images/cabecera01.jpg);
	background-size: cover;
}

#contenido {
	flex: 1;
	/* Ocupa el espacio restante */
	overflow-y: auto;
	/* Habilita el scroll si las filas ocupan mucho espacio */
}

#contenedorAudios {
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: scroll;
	/* Ocupa toda la altura de la ventana */
	width: 100%;
}

.btAudio{
	background-color: white;
	border-color: #888888;
	border-width: 1px;
	border-style: solid;
	
	padding: 5px;
	text-align: center;
}
.pulsado{
	background-color: #FED49B;
}

video {
	width: 0;       /* Oculta el ancho del video */
	height: 30px;      /* Oculta la altura del video */
}
.tituloAudio {
	font-family: "Open Sans", sans-serif;
	font-size: 0.8em;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	width: auto;
	flex: 10;
	margin-right: 10px;
	margin-left: 10px;
}



#botonesAudio {
	background-color: #aaaaaa;
	display: flex;
	flex-flow: row;
}

#btVolver {
	flex: 1;
}

#btImagenAudio {
	flex: 1;
}

#btTextoAudio {
	flex: 1;
}
#imagenAudio {

	height: 100%;
	/* 15% de la altura total */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;



	background: url(../../../images/cabecera01.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #000000;
}
#textoAudio{
	display: block;
	color: white;
	padding: 15px;
}
#contctr01{
	display: flex;
	background-color:black;
	margin: 0px;
	padding: 0px;
	width: 100%;
}
#reproductor{
	display: flex;
	width: 100%;
}




.cAudio {

	height: auto;
	width: 100%;
	background-color: #ffffff;
	padding: 10px;
	display: flex;
	align-items: top;
	justify-content: space-between;
	box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.5);
	border-bottom: #888888;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

.numIda {
	height: 36px;
	width: 36px;
	background: url(../../../images/numida.png);
	background-size: cover;
	text-align: center;
	color: white;
	padding: 5px;

}

.numVuelta {
	background: url(../../../images/numvuelta.png);
	background-size: cover;
	height: 36px;
	width: 36px;


	text-align: center;
	color: #ED1C24;
	padding: 5px;
}

.bten {
	height: 36px;
	width: 36px;
	background: url(../../../images/bt_en.png);
	background-size: cover;

}

.btes {

	height: 36px;
	width: 36px;
	background: url(../../../images/bt_es.png);
	background-size: cover;

}

/*
.bten {
	position: absolute;
	height: 36px;
	width: 36px;
	left: 40px;
	top: 5px;
	background: url(../../../images/bt_en.png);
	background-size: contain;
}

.btes {
	position: absolute;
	height: 36px;
	width: 36px;
	left: 10px;
	top: 5px;
	background: url(../../../images/bt_es.png);
	background-size: contain;
}
*/
.pcompleta {
	position: absolute;
	left: 0px;
	top: 0px;
	height: 100%;
	width: 100%;
	background-color: #000000;
}

#pinicio {
	background: url(../../../images/fondo_general.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
#pInfo {
	background: url(../../../images/fondo_general.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
#btAtras{
	position: absolute;
	width: 20%;
	left: 80%;
	height: 10%;
	top: 0%;
	background: url(../../../images/bAtras.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}


#txtInfo01{
	position: absolute;
	width: 90%;
	left: 5%;
	height:auto;
	top: 10%;
	font-size: 1.2em;
	color:white;
}
#txtInfo02{
	position: absolute;
	width: 90%;
	left: 5%;
	height:auto;
	top: 30%;
	font-size: 1em;
	color:white;
}
#txtInfo03{
	position: absolute;
	width: 90%;
	left: 5%;
	height:auto;
	top: 60%;
	font-size: 0.85em;
	color:white;
}
#infoLogos{
	position: absolute;
	width: 100%;
	left: 0%;
	height: 30%;
	top: 70%;
	background: url(../../../images/logos_financia.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/*

            <div id="txtInfo01">Proyecto:<br>“Página web y audioguía en el museo de la Casa de los Volcanes”</div>
            <div id="txtInfo02"><b>Objetivo especifico 3.1</b> Contribuir a posibilitar una economía azul sostenible en las zonas costeras insulares e interiores, y a fomentar el desarrollo de las comunidades pesqueras y acuícolas<br><b>Líneas de ayudas</b> Aplicaciones de las Estrategias de Desarrollo Local Participativo (operación 3.1.02.14)</div>
            <div id="txtInfo03">Cofinanciado por la UE en un 70% a través de FEMPA y en un 30% por la Consejería de Agricultura, Pesca, Agua y Desarrollo Rural de la Junta de Andalucía</div>
            <div id="infoLogos">TEXTO</div>
*/
#logoAudioguia{
	position: absolute;
	width: 90%;
	left: 5%;
	height: 20%;
	top: 5%;
	background: url(../../../images/logo_audioguia.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
#btIniciar{
	position: absolute;
	width: 70%;
	left: 15%;
	height: 10%;
	top: 35%;
	background: url(../../../images/bIniciar.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
#btInfo{
	position: absolute;
	width: 20%;
	left: 80%;
	height: 10%;
	top: 0%;
	background: url(../../../images/bInfo.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#logoGalp{
	position: absolute;
	width: 36%;
	left: 32%;
	height: 20%;
	top: 45%;
	background: url(../../../images/logo_galpa.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#textoFinancia{
	position: absolute;
	width: 90%;
	left: 5%;
	height: 20%;
	top: 65%;
	font-size: 0.85em;
	color:white;
}
#logosFinancia{
	position: absolute;
	width: 100%;
	left: 0%;
	height: 30%;
	top: 70%;
	background: url(../../../images/logos_financia.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#paudios {
	background: url(../../../images/fondo01.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

#c_registro {
	background: url(../../../images/fondo01.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}


#c_sinPreguntas {
	background: url(../../../images/fondo01.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding: 10px;
}

#c_sociales {
	background: url(../../../images/fondo02.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding: 10px;
}

#c_descripcion {
	background: url(../../../images/fondo01.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding: 10px;
}

#c_explicacion {
	background: url(../../../images/fondo03.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding: 10px;
}

#c_enunciado {
	background: url(../../../images/fondo_preguntas.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding: 10px;
}

#c_ranking {
	background: url(../../../images/fondo_ranking.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding: 10px;
}

#c_recuperarPass {
	background: url(../../../images/fondo_recuperar_pass.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding: 10px;
}


#fondoDescripcion {
	background: url(../../../images/fondo_descripcion.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left;

}

#fondoExplicacion {
	background: url(../../../images/fondo_explicacion.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left;

}

#fondoRanking {
	background: url(../../../images/cab_ranking.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left;

}

#tiempoRestante {
	position: absolute;
	width: 90%;
	left: 5%;
	bottom: 10px;
	background-color: white;
	height: 60px;
	border-radius: 30px;
	text-align: center;
	box-shadow: rgba(0, 0, 0, 0.54) 0px 3px 8px;
	padding-left: 15px;
	padding-right: 15px;
}

#ocultarComodines {
	position: absolute;
	width: 50px;
	left: 80%;
	bottom: 90px;
	height: 50px;
	text-align: center;
	padding-left: 15px;
	padding-right: 15px;
	margin-right: -80px;
}

#comodines {
	position: absolute;
	width: 90%;
	left: 5%;
	bottom: 80px;
	background-color: white;
	height: 60px;
	border-radius: 30px;
	text-align: center;
	box-shadow: rgba(0, 0, 0, 0.54) 0px 3px 8px;
	padding-left: 15px;
	padding-right: 15px;
}


#icono_reloj {
	position: absolute;
	top: 15px;
	left: 5px;
}

#progreso {
	position: absolute;
	width: 100%;
	height: 10px;
	top: 5px;
	left: 5px;
}

.logoCabecera-lg {
	text-align: center;
	margin: 10px;
}

.ico_numRespuesta {
	width: 30px !important;
	height: 30px !important;
	border-radius: 15px !important;
}

.caja-respuesta {
	padding: 0rem !important;
	padding-top: 2rem !important;

}

.ico_letra_respuesta {
	position: absolute;
	top: -25px;
	left: 50%;
	margin-left: -25px;
}

/*
<div id="c_portada" class="pcompleta">
            </div>
            <div id="c_login" class="pcompleta">
            </div>
            <div id="c_registro" class="pcompleta">
            </div>
            
            <div id="c_descripcion" class="pcompleta">
            </div>
            <div id="c_enunciado" class="pcompleta">
            </div>
            <div id="c_explicacion" class="pcompleta">
            </div>
            <div id="c_ranking" class="pcompleta">
            </div>
*/

/* DatePicker Container */
.ui-datepicker {
	width: 100% !important;
	height: auto;
	margin: 5px auto 0;
	font: 12pt Arial, sans-serif !important;

}

.ui-datepicker a {
	text-decoration: none;
}

/* DatePicker Table */
.ui-datepicker table {
	width: 100%;
}

.ui-datepicker-header {
	color: #e0e0e0;
	font-weight: bold;
	line-height: 30px;
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: #111;
}

.ui-datepicker-title {
	text-align: center;
}

.ui-datepicker-prev,
.ui-datepicker-next {
	display: inline-block;
	width: 30px;
	height: 30px;
	text-align: center;
	cursor: pointer;
	line-height: 600%;
	overflow: hidden;
}

.ui-datepicker-prev {
	float: left;
	background-position: center -30px;
}

.ui-datepicker-next {
	float: right;
	background-position: center 0px;
}

.ui-datepicker thead {
	background-color: #ffffff;
	border-bottom: 1px solid #bbb;
}

.ui-datepicker th {
	text-transform: uppercase;
	font-size: 10pt;
	padding: 5px 0;
	color: #666666;

}

.ui-datepicker tbody td {
	padding: 0;
	/*border-right: 1px solid #bbb;*/
}

.ui-datepicker tbody td:last-child {
	border-right: 0px;
}

.ui-datepicker tbody tr {
	border-bottom: 0px solid #bbb;
}

.ui-datepicker tbody tr:last-child {
	border-bottom: 0px;
}

.ui-datepicker td span,
.ui-datepicker td a {
	display: inline-block;
	font-weight: bold;
	text-align: center;
	width: 30px;
	height: 30px;
	line-height: 30px;
	color: #666666;

}

.ui-datepicker-calendar .ui-state-default {
	background: #ededed;
	width: 100% !important;
	text-align: center;
	border-style: none !important;

}

.ui-datepicker-calendar .ui-state-hover {
	background: #f7f7f7;
}

.ui-datepicker-calendar .ui-state-active {
	background: #6eafbf;
	border: 0px solid #55838f;
	border-radius: 10px;
	position: relative;
	margin: -1px;
}

.ui-datepicker-unselectable .ui-state-default {
	background: #f4f4f4;
	color: #b4b3b3;
}

.ui-datepicker-calendar td:first-child .ui-state-active {
	width: 29px;
	margin-left: 0;
}

.ui-datepicker-calendar td:last-child .ui-state-active {
	width: 29px;
	margin-right: 0;
}

.ui-datepicker-calendar tr:last-child .ui-state-active {
	height: 29px;
	margin-bottom: 0;
}

.tabla_pegada {
	padding: 0px !important;
	margin: 0px !important;
}


#botonesAvance {
	background-color: #ffffff;
	display: flex;
	font-weight: 700;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	padding: 5px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#botonesAvanceMvl {
	background-color: #ffffff;

	font-weight: 700;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	padding: 10px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}


.cajaSombra {
	background-color: #eeeeee;
	font-weight: 700;
	border-radius: 10px;
	padding: 10px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.cajaSombraBlanca {
	background-color: #ffffff;
	font-weight: 700;
	border-radius: 10px;
	padding: 10px;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 8px;
}


#btSiguiente {
	margin: 5px;
}

#btAnterior {
	margin: 5px;
}

#logotipo {
	position: relative;
	width: 80px !important;
	height: 80px !important;
	background: url(../../../images/logo.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	cursor: pointer;
}

#progreso {
	position: relative;
	width: 400px !important;
	height: 80px !important;
	background: url(../../../images/progreso01.png);
	background-repeat: no-repeat;
	background-position: center;


}

#imgIzquierda {
	position: relative;
	width: 110px !important;
	height: 60px !important;
	background: url(../../../images/btizq01.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	cursor: pointer;
}

#imgDerecha {
	position: relative;
	width: 110px !important;
	height: 60px !important;
	background: url(../../../images/btdcha01.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	cursor: pointer;
}

#imgCarrito {
	position: relative;
	width: 60px !important;
	height: 60px !important;
	background: url(../../../images/carrito01.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	cursor: pointer;
}

#botonesAvanceMvl {
	display: none;
}

#smAnterior {
	margin: 0px;
	background: url(../../../images/btizq01.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: relative;
	border-style: none;
	width: 60px;
	height: 60px;
}

#smSiguiente {
	margin: 0px;
	background: url(../../../images/btdcha01.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	border-style: none;
	position: relative;
	width: 60px;
	height: 60px;
}

#smCarrito {
	margin: 0px;
	background: url(../../../images/carrito01.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: relative;
	border-style: none;
	width: 60px;
	height: 60px;
}

.contenedorPrincipal {
	margin-top: 120px;

}

#contenedorInfoFechas {
	margin: 10px;
	border-radius: 15px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	background-color: rgba(255, 255, 255, 0.5);
	padding: 15px;
	font-size: larger;
	text-align: center;
}

#contenedorInfoEntradas {
	margin: 10px;
	border-radius: 15px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	background-color: rgba(255, 255, 255, 0.5);
	padding: 15px;
	font-size: larger;
	text-align: center;
}

#contenedorInfoExtras {
	margin: 10px;
	border-radius: 15px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	background-color: rgba(255, 255, 255, 0.5);
	padding: 15px;
	font-size: larger;
	text-align: center;
}


#contenedorFechas {
	margin: 10px;
	border-radius: 15px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	background-color: rgba(255, 255, 255, 0.85);
	padding: 15px;
}

.cajaFecha {
	position: relative;
	height: 100px;
	text-align: center;
	width: 30%;
	/*background-color:#a2dae3;
	background:url(../../../images/fondo_dia.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	*/
	padding: 0px;
	margin: 6px;
	border-radius: 0.5em;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	cursor: pointer;
	color: #010101;
	/*flex-basis: 200px;*/
}

.calendario_dia {
	position: relative;
	width: 100%;
	height: 40%;
	background-color: #50690e;
	display: flex;
	color: white;
	font-weight: 700;
	align-items: center;
	justify-content: center;
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
}

.calendario_precio {
	position: relative;
	width: 100%;
	height: 60%;
	background-color: #eeeeee;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 1280px) {
	.cajaFecha {
		width: 30%;
	}

}

@media (max-width: 800px) {
	.cajaFecha {
		width: 100%;
		height: 70px;
	}

	.cajaFecha hr {
		margin-top: 5px;
		margin-bottom: 5px;
	}

	#cabecero {
		height: 50px, !important;
	}

	.contenedorPrincipal {
		margin-top: 70px;
	}

	#logotipo {

		width: 150px !important;
		height: 50px !important;
		cursor: pointer;
	}

	#progreso {
		display: none;
	}



	#botonesAvance {
		display: none;
	}

	#botonesAvanceMvl {
		display: flex;
	}
}



.cajaFecha:hover {
	box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 8px;
}

.cajaFecha.activo .calendario_precio {
	background-color: #17a2b8;
	color: #eeeeee;
}



.cajaFecha.fechaPasada .calendario_dia {
	background-color: #aaaaaa;
	box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px;
	color: #555555;
	cursor: default;
}

.cajaFecha.incompatible .calendario_dia {
	background-color: red;
	box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px;
	color: white;
	cursor: default;
}


.etFecha {

	text-align: center;
}

.etPrecio {
	font-weight: bold;
	font-size: larger;
	line-height: 10px;
}

#btFechaAnterior {
	position: relative;
	width: 50px;
	height: 100px;
	background: url(../../../images/flchaIzq01.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	cursor: pointer;
}

#btFechaAnterior.desactivado {
	background: url(../../../images/flchaIzq02.png);
	cursor: default;
}

#btFechaPosterior {
	position: relative;
	width: 50px;
	height: 100px;
	background: url(../../../images/flchaDcha01.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	cursor: pointer;
}

#btFechaPosterior.desactivado {
	background: url(../../../images/flchaDcha02.png);
	cursor: default;
}



.td70 {
	position: relative;
	width: 70% !important;
}

.td30 {
	position: relative;
	margin-left: 40px;
	padding-left: 30px;
	background-color: #6eafbf;
	width: 30% !important;
}

.col50 {
	position: relative;
	width: 50%;
	float: left;
}

.col70 {
	position: relative;
	width: 70%;
	float: left;
}

.col30 {
	position: relative;
	width: 30%;
	float: left;
}

.fondoCupon {
	background: url(../../../images/fondo_cupon.jpg);
	background-repeat: no-repeat;
	background-position: left;
	background-size: cover;
}

.fondoCalendario {
	background: url(../../../images/calendario02a.jpg);
	background-repeat: no-repeat;
	background-position: left;
	background-size: cover;
}

.fondoEntradas {
	background: url(../../../images/fondo_tickets.jpg);
	background-repeat: no-repeat;
	background-position: left;
	background-size: cover;
}

.fondoExtras {
	background: url(../../../images/fondo_extras.jpg);
	background-repeat: no-repeat;
	background-position: left;
	background-size: cover;
}

.fondoProcesa {
	background: url(../../../images/fondo_procesa.jpg);
	background-repeat: no-repeat;
	background-position: left;
	background-size: cover;
}

.fondoCaja {
	background: url(../../../images/fondo_comprueba.jpg);
	background-repeat: no-repeat;
	background-position: left;
	background-size: cover;
}

.fondoGracias {
	background: url(../../../images/fondo_gracias.jpg);
	background-repeat: no-repeat;
	background-position: left;
	background-size: cover;
}

.etAhorro {
	font-size: 0.6em;
	color: darkmagenta;
}

h1 {
	font-size: 2em !important;
}

h2 {
	font-size: 1.6em !important;
}

h3 {
	font-size: 1.4em !important;
}

h4 {
	font-size: 1.2em !important;
}

h5 {
	font-size: 1em !important;
}

#infoProducto {
	position: absolute;
	height: 90%;
	width: 100%;
	background-color: #50690e;
}