/* ========================================= */
/* FUENTES EXTERNAS                          */
/* ========================================= */
@import url(https://fonts.googleapis.com/css?family=Port+Lligat+Sans);

*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-family: 'Port Lligat Sans', sans-serif;
	font-size: 16px;
}
a:visited{
	color:#3274AA;
}
body{
	background: #fff;
	box-shadow:0 0 .5em #000;
	margin:.5em auto;
	max-width:1200px;
	min-width: 360px;
	overflow: auto;
	width:95%;
	position:relative;
}

/* ================================= */
/* CSS GRID */
body>div{
	display: grid;
	padding:.5em;

	grid-gap: .5em;

}
body[data-pagina="index"]>div{
	grid-template-areas: "ps"
						 "nws"
						 "salidas";
}
body[data-pagina="salida"]>div{
	grid-template-areas: "info-salida"
						 "fotos-salida";
}
	body>header{
		grid-area: header;
	}
	body>footer{
		grid-area: footer;
	}
	body>nav{
		grid-area: nav;
	}
	#prox-salidas{
		grid-area: ps;
	}
	#noticias{
		grid-area: nws;
	}
	#salidas{
		grid-area: salidas;
	}
	#publicidad{
		grid-area: publicidad;
	}
/* ================================= */
	body>footer:only-of-type{
		margin-top:1em;
		padding:.5em 0;
	}
	body>footer{
		background: #3274AA;
		color:#fff;
		display: block;
		font-weight: 600;
		overflow: hidden;
		width:100%;
	}
	body>footer>p{
		display: inline-block;
		margin: .2em;
		float:left;
	}
	body>footer>p:nth-of-type(even){
		float:right;
	}
	body>footer time{
		display: inline-block;

	}
	body>header{
	background: #3274AA;
	overflow: hidden;
	padding:.5em;
	text-align: center;
}
	body>header>div{
		vertical-align: top;
	}
		body>header>div>h1{
			text-shadow: 0 0 .4em #000;
			color:#F7F544;
			font-size: 2em;
			margin:0;
			margin:.2em auto;
			text-align: center;
			width:100%;
		}
		body>header>div>h2{
			color:#51F149;
			font-size:1.2em;
			margin:0 auto;
			text-align: center;
			text-shadow: 0 0 .2em #000;
		}
		body>header>div>h3{
			color:#fff;
			margin:.4em auto;
			text-align: center;
		}
			body>header>div>h3>a{
				color:#fff;
				display: inline-block;
			}
			body>header>div>h3 a:hover{
				color:#ddd;
				text-shadow: 0 0 2em #000;
			}
		body>header>figure{
			display:block;
			margin:0;
			text-align: center;
		}
			body>header>figure>a>img{
				max-width:120px;
				max-height:auto;
				transition: all .5s;
			}

html{
	min-width: 20em;
}
img{
	max-height: 100%;
	max-width: 100%;
}

#totop{
	position: fixed;
	display: flex;
	bottom:0;
	right:0;
	text-decoration: none;
	background-color: #fff;
	font-size:4em;
	border-radius:50%;
}
#totop::before{
	padding:0;
	margin:0;
}
#totop:hover{
	box-shadow: 0 0 10px #000;
	background-color: #eee;
}

.separadorH{
	clear:both;
	width:100%;
	height:0em;
}
.margen-superior{
	margin-top:.5em;
}
/* ====================================================
   BARRA DE BÚSQUEDA EN LA FICHA DE SALIDAS
   ====================================================
*/
#barra-busqueda{
    display: flex;
	padding: .2em;
    align-items: center;
    border: 1px solid #ccc;
}
	#barra-busqueda>span{
	    padding: .4em;
	    border:1px solid transparent;
	}
	#barra-busqueda>span:hover{
		cursor: pointer;
	}
	#barra-busqueda>span:active{
		background-color: #efefef;
	}

	#barra-busqueda>input{
		margin-left: .2em;
	    border: 1px solid #fff;
	    padding: .4em;
	    font-size: 1em;
	    flex-grow:1;
	    background-color: #cac8e8;
	}
	#barra-busqueda>input:hover{
		background-color: #eee;
		cursor:pointer;
	}
	#barra-busqueda>input:focus{
		background-color: #eee;
	}
/* ************************************* */
/* PAGINA COOKIES POLICY */
#cookiesPolicy{
	padding: 0.5em;
	background: #EAE9FF;
	border: .1em solid #000;
	margin: 0 .2em;
}
.aviso-cookies{
	position: fixed;
	bottom:0;
	left:0;
	display: flex;
	flex-direction: column;
	padding:1em;
	justify-content: center;
	background-color: #696969;
	color:#fff;
	width:100%;
}
	.aviso-cookies>p{
		font-size: 1.2em;
		margin:1em auto;
		max-width: 50em;
	}
		.aviso-cookies>p>a{
			font-size:1em;
		}
	.aviso-cookies>button{
		align-self: center;
	}
.aviso-cookies a:visited{
	color:#00a;
}
/* ******************************** */
.subTitulo01{
	background: #123C5D;
	color:#fff;
	font-size:1.1em;
	margin:0;
	padding:.4em 0;
	text-align: center;
	width:100%;
}

/* ============================================
   INDEX
   ============================================ */
#salidas>header{
	display: flex;
}
#salidas>header>h2{
	transition: all .3s;
}

#salidas>header:hover>h2{
	background-color: #a4b5c1;
}
#salidas>header>h2:hover{
	background-color: #123C5D;

}

#salidas>header>h2:not(:first-of-type){
	border-left:1px solid #ccc;
}
#salidas>header>h2:not(.activo){
	background-color: #a4b5c1;
}
#salidas>header>h2:not(.activo):hover{
	cursor: pointer;
	background-color: #123C5D;
}


/* ===================================================
   BARRA DE NAVEGACION
   =================================================== */
	body>nav{
		background-color: #ddd;
		border-bottom: .1em solid #aaa;
		display: block;
		margin-bottom: .2em;
		overflow: auto;
		width:100%;
	}
	body>nav>button[title]{
		float:right;
		margin:.2em;
	}
	body>nav>ul{
		margin: 0;
		overflow: hidden;
		padding: 0;
		width: 100%;
		transition: all 1s;
	}
	body>nav>ul>li{
		display: inline-block;
		float:left;
		list-style: none;
		margin:0;
		text-align: center;
		width:50%;
	}
#main-menu{
	position: sticky;
	top:0;
	z-index: 99;

	display: flex;
}
	#main-menu>div{
		display: inline-flex;
		margin:0;
		padding: .2em;
		align-items: center;
		background-color: #fff;
	}
		#main-menu>div>input{
			margin-left:.2em;
			border: 1px solid #fff;
			padding:.2em .4em;
			font-size: 1em;
		}
		#main-menu>div>input:hover{
			background-color: #ddd;
		}
#main-menu>a{
	display: flex;
	justify-content: center;
	width:100%;
	text-align: center;
	padding:.4em;
	text-decoration: none;
	font-weight: bold;

}
#main-menu>a.activo{
	background-color: #123C5D;
	color:#fff;
}
#main-menu:hover>a{
	background-color: #ddd;
	color:#3274AA;
	transition: background-color .5s;
}

#main-menu>a:hover{
	background-color: #123C5D;
	color:#fff;
}

#main-menu>a:not(:first-of-type){
	border-left:.1em solid #3274AA;
}
#main-menu>a>span{
	font-size: 1.2em;
	display: block;
	padding: .2em .1em;
}
/******************* SECCIONES ***********************/
body>section[class^=col] section{
	margin:.5em;
}
/******************* PUBLICIDAD ***********************/
	#dvGoogleAds{
		border:.1em solid #ddd;
		padding:1em 0;
		text-align:center;
	}

	#publicidad{
		display: none;
	}
		#publicidad.visible{
			display: block;
		}

#publicidad.oculto,
#barra-busqueda.oculto{
	display: none;
}

/******************* PROXIMAS SALIDAS ***********************/
	#prox-salidas article{
			border: .1em solid #234;
		margin:.2em 0;
		overflow: hidden;
	}
		#prox-salidas article p,
		#prox-salidas article h2,
		#prox-salidas article time{
			display: inline-block;
			margin: 0;
			overflow: hidden;
			text-align: left;
			vertical-align: top;
	    padding:.2em;
		}
		#prox-salidas article p{
	    font-weight: 600;
	    width: 20%;
		}
			#prox-salidas article p:first-of-type{
				background: #ff8e01;
			}
			#prox-salidas article p:last-of-type{
				background: #fff89c;
				border-top: .1em solid #234;
			}
		#prox-salidas article h2,
		#prox-salidas article time{
			background:#fff;
			border-left: .1em solid #234;
			width:80%;
		}
		#prox-salidas article h2{
			border-top: .1em solid #234;
		}
/******************* ULTIMAS SALIDAS ***********************/
#salidas{
	text-align:left;
}
/*#ult-salidas>footer,*/
footer.botonera-nav{
	display: inline-flex;
    width: 100%;
    text-align: center;
    margin: .4em auto;
    align-items: center;
    justify-content: center;
}

	#salidas>footer>span{
		display:inline-block;
		padding: .2em .4em;
		cursor: pointer;
		transition: transform .3s;
	}
	#salidas>footer>span:hover{
		color:#1436E6;
		transform: scale(1.5);
	}

#listado-salidas{
	display: grid;
	padding:5px;
	grid-gap: .5em;
	grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
	justify-items:center;
}
	#listado-salidas>a{
		border: .1em solid #fff;
		padding: .5em;
		box-shadow: 0 0 2px #000;
		width:100%;

		transition: all .5s;
	}
	#listado-salidas>a:hover{
		box-shadow: 0 0 10px #000;
		border: .1em solid #234;
		background-color: #eee;
	}
	#listado-salidas>a>article{
		position: relative;
	}
	#listado-salidas>a>article>header{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin:.2em 0;
	}
	#listado-salidas>a>article>header>h3{
		background: #ddd;
		font-size:1em;
		margin:0;
		padding:.2em .5em;
		text-align: center;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		width:100%;
	}
	#listado-salidas>a>article>header>time{
		font-weight:bold;
		padding: .2em 0;
	}
	#listado-salidas>a>article>img{
		display: block;
		margin:.2em auto .5em;
		opacity: 1;
		transition: all .5s;

		box-shadow: 4px 4px 10px #000;
	}
	#listado-salidas>a>article>span{
		display: block;
		position: absolute;
		bottom: -5px;
		left: 0;
		background-color: #fff;
		padding: .2em .4em;
		border-radius: 10%;
		box-shadow: 1px 1px 5px #000;
	}
	#listado-salidas>a>article>span.icon-picture::before{
		padding-right: .2em;
	}

.fichaSalida>a{
	display:inline-block;
	position:relative;
	transition: all .3s;
	width:100%;
	border:.1em solid #fff;
}

.fichaSalida header>h3{
	background: #ddd;
	font-size:1em;
	margin:0;
	padding:.2em .4em;
	text-align: center;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	width:100%;
}
.fichaSalida header>p{
	margin: 0;
	padding:.2em .4em;
	text-align: center;
}
.fichaSalida header>p>time{
	font-weight:bold;
}

#fotos-salida>div{
	display:grid;
	padding:.5em;
	grid-gap:.5em;
	grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
	justify-items:center;
}
	#fotos-salida>div>a{
		transition: box-shadow .3s, background-color .3s;
		border: 1px solid #ccc;
	}
	#fotos-salida>div>a:hover{
		box-shadow: 0 0 4px #000;
		background-color: #eee;
	}
	#fotos-salida>div>a img{
		transition: opacity .3s;
	}
	#fotos-salida>div>a:hover img{
		opacity: .6;
	}
	#fotos-salida>div>a p{
		transition: transform .3s;
	}
	#fotos-salida>div>a>figure{
		margin:.4em;
		text-align: center;
	}
	#fotos-salida>div>a>figure>figcaption>p{
		margin:.2em auto;
		width:100%;
	}

/* ===============================================================================
   FOTO GRANDE
   =============================================================================== */

#divFoto{
	position: relative;
}
	#divFoto>span{
		height:100%;
		position: absolute;
		top:0;
		width:6em;
		padding-top: calc(50% - 8em);
		background-color: rgba(255,255,255,.25);
		opacity: 0;
		transition:all .5s;
	}
	#divFoto>span:hover{
		cursor: pointer;
		opacity: 1;
	}
	#divFoto>span:first-of-type{
		left:0;
		text-align: left;
	}
	#divFoto>span:nth-of-type(2){
		right:0;
		text-align: right;
	}
	#divFoto>span>span{
		opacity: 0;
		color:#000;
		font-size:4em;
		transition:all .5s;
	}
	#divFoto>span:hover>span{
		opacity: 1;
	}
span[class~=icon-spin3]{
    font-size: 6em;
    display: block;
    padding: .5em;
    text-align: center;
    width: 2em;
    padding: .5em 0;
    margin: 0 auto;
}
#datosFoto .informacion>h3{
	background:#3274AA;
	border-bottom: .1em solid #aaa;
	font-size:1.1em;
	color:#fff;
	margin: .5em 0 0;
	padding:.4em .2em;
	text-align:center;
}
#datosFoto>p.descripcion,
#foto-grande>div>p{
	margin:0;
	padding:.4em .2em;
	font-size: 1.1em;
}
#datosFoto>footer{
	background: none;
	border-top:.1em solid #aaa;
	border-bottom:.1em solid #aaa;
	text-align: center;
}
#datosFoto>footer>div{
	display: inline-block;
	margin:0 0 0 -1.875em;
	padding: 0;
}
#datosFoto>footer button{
	height:2em;
	margin:.1em;
	width:3.875em;
}
#datosFoto>footer button>span{
	font-size: 1.2em;
}
#datosFoto>footer>button[title^=Volver]{
	float:left;
}
#datosFoto>footer>div>p{
	color:#123C5D;
	display: inline-block;
	font-size:.9em;
	font-weight: 600;
	margin:.1em;
}
#fechaSalida>time{
	font-size: 1em;
}
.btn-nav,
.btn-nav:visited{
    margin: .1em;
    padding:.2em;
    font-size:1.2em;
    text-decoration: none;
    background-color:#F0F0F0;
    display: inline-block;
    border:1px solid #ccc;
    color:#000;
}
.btn-nav:hover{
    background-color:#D0D0D0;
}
#foto-grande>div{
	position: relative;
}

#div-ant,
#div-sig{
	position: absolute;
	width:20%;
	top:0;
	bottom:0;
	background-color:rgba(250,250,250,.6);
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity:0;
    transition:opacity .3s;
    cursor: pointer;
}
#div-ant{
	left:0;
}
#div-sig{
	right:0;
}

	#div-ant>span,
	#div-sig>span,
	#div-primera>span,
	#div-ultima>span{
		font-size: 3em;
	}
#div-primera,
#div-ultima{
	position: absolute;
	top:0;
	height:20%;
	width:60%;
	background-color:  rgba(250,250,250,.6);
	display: flex;
	justify-content: center;
	align-items: center;
	left:50%;
	transform: translate(-50%);
	cursor:pointer;
	opacity:0;
    transition:opacity .3s;
    align-items:center;
}
	#div-primera>span,
	#div-ultima>span{
		transform: rotate(90deg);
	}

#div-ultima{
	top:auto;
	bottom:2.2em;
}

#div-ant:hover,
#div-sig:hover,
#div-primera:hover,
#div-ultima:hover{
	opacity: .5;
}
#foto-grande>div>img{
	display: block;
	margin:0 auto;

	cursor:zoom-in;
}
#foto-grande>footer{
	display: flex;
	align-items: center;
	border-top:.1em solid #aaa;
	border-bottom:.1em solid #aaa;
}
	#foto-grande>footer>div{
		flex-grow: 2;
		text-align: center;
	}
		#foto-grande>footer>div>p{
			display: inline-block;
			margin:.2em .5em;
		}
/* ===============================================================================
   NOTICIAS
   =============================================================================== */
#noticias article>h2{
	border-bottom:.1em solid #ddd;
	color:#234;
	margin:.2em .4em 0;
	padding:.2em 0;
}
	#noticias article>h2>time{
		color:#a00;
		display: inline-block;
		font-size: .9em;
		font-style: italic;
		margin-right:.5em;
		margin-bottom: .2em;
		text-align: center;
	}
	#noticias article>h2>span{
		display: inline-block;
		text-align: center;
	}
	#noticias article>p{
		margin:0;
		padding:.4em;
	}

/* ===============================================================================
   SALIDA
   =============================================================================== */
.informacion .titulo02,
.titulo02{
  	background: none repeat scroll 0 0 #ccc;
  	border-bottom: 0.1em solid #123c5d;

	margin:0;
	text-align: center;
	padding:.5em 0;
}
#info-salida>div{

	margin-bottom: .5em;
}
	#info-salida>div>div{
  		border-bottom: 0.1em solid #123c5d;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	#info-salida>div>div>h2{
		background: none repeat scroll 0 0 #ccc;
	  	border-bottom: 0.1em solid #123c5d;
		margin:0;
		text-align: center;
		padding:.5em 0;
	}
	#info-salida>div>div>p,
	#info-salida>div>div time{
		font-size: 1.1em;
		text-align: center;
		margin:0;
		padding:.5em;
	}
#fotos{
	text-align: center;
	display: inline-block;
	width:100%;
}
	#fotos>h2:only-of-type{
		border-top: .1em solid #000;
		border-bottom: 0.1em solid #123c5d;
		background: #3274AA;
		color: #fff;
		margin-bottom:0;
		padding:.4em 0;
	}
	#fotos>div{
		text-align:center;
		display: inline-block;
		padding:1em .5em;
		width:100%;
	}
	#fotos a{
		display: inline-block;
		margin:.1em;
		width:10em;
		text-decoration: none;
	}
	#fotos a figure{
		margin: 0px;
	}
		#fotos a figure img{
			opacity: 1.0;
			transition:all .5s;
			vertical-align: top;
		}
		#fotos a figure:hover>img{
			opacity: .6;
		}
		#fotos a figure:hover>figcaption{
			color:#a00;
		}
		#fotos a figcaption{
			border-bottom:.1em solid #ccc;
			background: #fff;
		}
			#fotos a figcaption p{
				font-weight: 600;
				margin: 0;
				vertical-align: top;
				padding:.2em;
				text-align: left;
				text-overflow:ellipsis;
				width:100%;
				overflow:hidden;
				white-space:nowrap;
				transition:all .5s;
			}
			#fotos a figure:hover>figcaption>p{
				padding-left:.5em;
				text-decoration: underline;
			}

/* ===============================================================================
   SALIDAS
   =============================================================================== */
#frm-busqueda>form{
	display: block;
	width:20em;
	margin:.3em auto;
}
	#frm-busqueda>form select[name^="mes"]{
		flex-grow:2;
		margin-right:.2em;
	}
	#frm-busqueda>form [name="texto"]{
		flex-grow:2;
	}

	#frm-busqueda>form>div{
		display: inline-flex;
		justify-content: left;
		padding:.2em .4em;
		width:100%;
	}
	#frm-busqueda>form>div>label{
		width:6em;
		display: inline-block;
	}
	#frm-busqueda>form>fieldset>div>select{
		margin-right:.2em;
	}
	#frm-busqueda>form>fieldset>div>select:first-of-type{
		width:6em;
	}

	#frm-busqueda>form>div.botonera{
		justify-content: center;
	}
	#frm-busqueda>form>div.botonera>input{
		padding:.2em 1.5em;
		background-color: #3274AA;
		border:.1px solid #5498D0;
		color:#fff;
		cursor: pointer;
		margin: .4em 1em;
	}
	#frm-busqueda>form>div.botonera>input:hover{
		background-color: #6BA9AA;

	}


.centrado{
	text-align: center;
	overflow:hidden;
}
#busqueda,
#filtro{
	background: #D8E0FB;
	border-radius: 0.2em;
	border: .1em solid #aaa;
	display: inline-block;
	height:3.6em;
	margin: 0.2em;
	overflow: hidden;
	padding: .2em;
	width: 14em;
}
	#busqueda input[type=search]{
		padding: 0.1em 0.2em;
		width: 10em;
		float: left;
		margin-top: .75em;
	}

	#filtro>form>div{
		display: inline-block;
		float:left;
	}

	#filtro>form>button{
		margin: 0 0 0 0.2em;
    padding: 0;
	}

	#filtro label{
		clear:left;
		display: block;
		float:left;
		font-weight: 600;
		line-height: 1.5em;
		width:4em;
	}
	#filtro select{
		background: #fff;
		border: .1em solid #aaa;
		float:left;
		width:6em;
	}
	#filtro input[type=submit]{
		position:absolute;
		height:3em;
	}

	#filtro form button,
	#busqueda form button{
		float:right;
		height:3em;
		width:3em;
	}
	#filtro select{
		padding: .1em;
	}

	form>div#orden>label:not(:first-of-type){
		width:auto;
		margin-right:1em;
	}

	/******************************************************/
	/* LISTADO DE SALIDAS EN INDEX  */
	/******************************************************/

	#listadoSalidas{
		width:100%;
		text-align: center;
	}
	#listadoSalidas section{
			margin-left:1%;
	}

/* ===============================================================================
   MEDIA QUERIES
   =============================================================================== */

@media screen and (min-width: 480px){

	#info-salida>div>div{
		flex-direction: row;
	}
		#info-salida>div>div>h2{
			align-self: left;
			width:8em;
			display: block;
			text-align: left;
			border-bottom:none;
			align-self:stretch;
			padding-left:.5em;
			border-right:1px solid #234;
		}
		#info-salida>div>div>time,
		#info-salida>div>div>p{
			flex-grow: 2;
			width: calc(100% - 8em);
			text-align: left;
		}

}
@media all and (min-width:570px){
	#frm-busqueda>form{
		width: 100%;
	    display: flex;
	    flex-wrap: wrap;
	}
		#frm-busqueda>form>div[id^="fecha"]{
			width:50%;
		}

	body>header{
		display: flex;
		justify-content: center;
		align-items: center
	}
		body>header>figure{
			margin-right:4em;
		}
			body>header>figure>a>img{
				max-width: none;
			}
}

@media all and (min-width:800px){

	/*body[data-pagina="index"]>div{
		grid-template-areas: "ps nws nws"
							 "salidas salidas publicidad";
	}*/
	body[data-pagina="index"]>div{
		grid-template-areas: "ps nws"
							 "salidas salidas";
	}

	#publicidad{
		display: inline-block;
	}

}