@font-face {
  font-family: 'Champion-HTF-Lightweight';
  src: url('fuentes/Champion-HTF-Lightweight.ttf') format('truetype'),
       url('fuentes/Champion-HTF-Lightweight.woff') format('woff'),
       url('fuentes/Champion-HTF-Lightweight.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Champion-HTF-Welterweight';
  src: url('fuentes/Champion-HTF-Welterweight.ttf') format('truetype'),
       url('fuentes/Champion-HTF-Welterweight.woff') format('woff'),
       url('fuentes/Champion-HTF-Welterweight.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DINPro-Regular';
  src: url('fuentes/DINPro-Regular.ttf') format('truetype'),
       url('fuentes/DINPro-Regular.woff') format('woff'),
       url('fuentes/DINPro-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Soigne';
  src: url('fuentes/Soign.ttf') format('truetype'),
       url('fuentes/Soign.woff') format('woff'),
       url('fuentes/Soign.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}




html, body {
	padding: 0;
	margin: 0;
	height: 100%;
	font-family: 'DINPro-Regular';
}


/*---------------------------------*/
/* SECCIÓN: Logo animado de la FIL */
/*---------------------------------*/
.encabezado {
	background-color: #D2AC2B;
	padding: 30px;
}
.encabezado .interior {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
	justify-content: space-between;
	max-width: 1280px;
	margin: auto;
}
.encabezado .izq {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
.encabezado .der {
	display: none;
}
.encabezado .logo-uabc {
	width: 80px;
	min-width: 50px;
	margin-right: 25px;
}
	.encabezado .logo-uabc img {
		width: 100%;
		height: auto;
	}
.encabezado .logo-fil {
	width: 70px;
	min-width: 50px;
	margin-left: 25px;
}
	.encabezado .logo-fil img {
		width: 100%;
		height: auto;
	}
.encabezado .txt-fil {
	text-transform: uppercase;
}
.encabezado .txt-fil span {
	display: block;
}
.encabezado .txt-fil .txt-1 {
	font-size: 0.8em;
}
.encabezado .txt-fil .txt-2 {
	color: #E43F66;
	font-family: 'Champion-HTF-Welterweight';
	font-size: 1.5em;
	line-height: 1;
}
.encabezado .txt-fil .txt-3 {
	font-size: 0.8em;
}
.encabezado .txt-fechalugar {
	text-transform: uppercase;
	text-align: right;
	padding-top: 22px;
}
.encabezado .txt-fechalugar span {
	display: block;
}
.encabezado .txt-fechalugar .txt-1,
.encabezado .txt-fil .txt-4 {
	font-family: 'Champion-HTF-Welterweight';
	font-size: 1.5em;
	line-height: 1;
}
.encabezado .txt-fechalugar .txt-2,
.encabezado .txt-fil .txt-5 {
	font-size: 0.8em;
}

@media screen and (min-width: 790px) {
	.encabezado .interior {
		-webkit-flex-direction: row;
		-moz-flex-direction: row;
		-ms-flex-direction: row;
		-o-flex-direction: row;
		flex-direction: row;
	}
	.encabezado .der {
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
	}
	.encabezado .txt-fil .txt-4,
	.encabezado .txt-fil .txt-5 {display: none;}
}
@media screen and (min-width: 1100px) {
	.encabezado .der {
	}
	.encabezado .logo-uabc {
		width: 100px; }
	.encabezado .logo-fil {
		width: 140px; }
	.encabezado .txt-fil .txt-1 {
		font-size: 1em; }
	.encabezado .txt-fil .txt-2 {
		font-size: 2.7em; }
	.encabezado .txt-fil .txt-3 {
		font-size: 1em; }
	.encabezado .txt-fechalugar {}
	.encabezado .txt-fechalugar .txt-1 {
		font-size: 2.7em; }
	.encabezado .txt-fechalugar .txt-2 {
		font-size: 1em; }
}



/*---------------------------------*/
/* SECCIÓN: Logo animado de la FIL */
/*---------------------------------*/
.bloque-logofil {
	background-color: #D2AC2B;
	padding: 10px 20px;
	position: relative;
}


.fil-animado {
	max-width: 1000px;
	margin: 100px auto;
	position: relative;
	/*height: 650px;*/
}
.letras svg {
	height: 100%;
	animation-name: dibujar;
	fill-opacity: 0;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
.texto-fil {
}
.texto-fil svg {
	width: 100%;
	stroke-dasharray: 111900px;
	stroke-dashoffset: 111900px;

}
.texto-uabc {
	position: absolute;
    right: 90px;
    text-align: right;
	top: 430px;
}
.texto-uabc svg {
	stroke-dasharray: 64100px;
	stroke-dashoffset: 64100px;
	width: 50%;
}
.texto-xx {
	top: -40px;
	position: absolute;
	left: 40px;
}
.texto-xx svg {
	width: 34%;
	stroke-dasharray: 57700px;
	stroke-dashoffset: 57700px;
}

@keyframes dibujar {
	90% {
		stroke-dashoffset: 0;
		fill-opacity: 0;
	}
	100% {
		fill-opacity: 1;
	}
}

.objetos {
	width: 420px;
	height: 335px;
	position: absolute;
	top: 380px;
	left: -40px;
}
.interior-objetos {
	width: 100%;
	height: 100%;
	position: relative;
}
.portal {
	width: 420px;
	height: 335px;
	/*background-color: rgba(255, 255, 255, 0.15);
	margin-top: -100px;*/
}

.plumayave {
	width: 400px;
	height: 335px;
	overflow: hidden;
	position: absolute;
	margin-top: 30px;
	top: 0;
	left: 264px;
}
.plumayave .interior {
	width: 100%;
	height: 100%;
	position: relative;
}
.pluma {
	height: auto;
	margin-left: -120px;
	position: absolute;
	top: 130px;
	left: -325px;
	animation-name: mostrarpluma-ancho-B;
	fill-opacity: 0;
    animation-duration: 4s;
    animation-delay: 9s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
}
@keyframes mostrarpluma-ancho-A {
	0% {
		left: -95px;
		top: 130px;
		transform: rotate3d(11, 0, 7, -5deg);
	}
	50% {
		left: 70px;
		top: 110px;
		transform: rotate3d(11, 0, 7, -40deg);
	}
	100% {
		left: 45px;
		top: 130px;
		transform: rotate3d(11, 0, 7, -20deg);
	}
}

@keyframes mostrarpluma-ancho-B {
	0% {
		left: -155px;
		top: 130px;
		transform: rotate3d(11, 0, 7, -5deg);
	}
	50% {
		left: 80px;
		top: 110px;
		transform: rotate3d(11, 0, 7, -40deg);
	}
	100% {
		left: 45px;
		top: 130px;
		transform: rotate3d(11, 0, 7, -20deg);
	}
}

@keyframes mostrarpluma-ancho-C {
	0% {
		left: -325px;
		top: 90px;
		transform: rotate3d(11, 0, 7, -5deg);
	}
	50% {
		left: 0px;
		top: 90px;
		transform: rotate3d(11, 0, 7, -40deg);
	}
	100% {
		left: -10px;
		top: 130px;
		transform: rotate3d(11, 0, 7, -20deg);
	}
}

.ave {
	width: 160px;
	height: auto;
	left: -205px;
	position: absolute;
	opacity: 0;
	animation-name: mostrarave;
    animation-duration: 1.5s;
    animation-delay: 12.75s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
}
@keyframes mostrarave {
	0% {
		top: 125px;
		left: 5px;
		opacity: 0;
	}
	50% {
	}
	100% {
		top: 135px;
		left: 15px;
		opacity: 1;
	}
}

@media screen and (min-width: 1px) {
	.fil-animado {
		width: 320px;
		height: 250px;
		margin: 10px auto;
	}
	.texto-xx {top: -9px;}
	.texto-uabc {
		top: 135px;
		right: 0;
	}
	.objetos {
		width: 220px;
		height: 175px;
		top: 70px;
		left: -40px;
	}
	.portal {
		width: 170px;
		height: 145px;
	}
	.plumayave {
		width: 270px;
		top: -110px;
		left: 106px;
	}
	.pluma {
		width: 210px;
		animation-name: mostrarpluma-ancho-A;
	}
	.ave {
		width: 80px;
	}
}
@media screen and (min-width: 650px) {
	.fil-animado {
		width: 580px;
		height: 480px;
		margin: 100px auto;
	}
	.texto-xx {
		top: -20px;
	}
	.texto-uabc {
		top: 240px;
		right: 0;
	}
	.objetos {
		top: 140px;
	}
	.portal {
		width: 270px;
		height: 215px;
	}
	.plumayave {
		top: -70px;
		left: 169px;
	}
	.ave {width: 110px;}
	.pluma {
		width: 280px;
		animation-name: mostrarpluma-ancho-B;
	}
}
@media screen and (min-width: 1000px) {
	.fil-animado {
		width: 1000px;
		height: 650px;
		margin: 100px auto;
	}
	.texto-xx {
		top: -40px;
	}
	.texto-uabc {
		top: 430px;
		right: 90px;
	}
	.objetos {
		width: 420px;
		height: 335px;
		top: 380px;
		left: -40px;
	}
	.portal {
		width: 420px;
		height: 335px;
		margin-top: -100px;
	}
	.plumayave {
		width: 400px;
		top: 0;
		left: 263px;
	}
	.pluma {
		width: auto;
		animation-name: mostrarpluma-ancho-C;
	}
	.ave {
		width: 160px;
	}
}

/*---------------------------------*/
/* SECCIÓN: Medios institucionales */
/*---------------------------------*/
.bloque-mediosuabc {
	background-color: #333231;
	color: #D2AC2B;
	padding: 50px 30px;
}
.bloque-mediosuabc .frase {
	font-size: 1.4em;
}
.bloque-mediosuabc a {
	color: #fff;
	text-decoration: none;
}
.bloque-mediosuabc .enlaces {
	
}
.bloque-mediosuabc .link {
	background-color: #fff;
	margin: 10px;
	-webkit-transform: skewX(-3deg);
	-ms-transform: skewX(-3deg);
	-o-transform: skewX(-3deg);
	transform: skewX(-3deg);
}
.bloque-mediosuabc .link .interior {
	-webkit-transform: skewX(3deg);
	-ms-transform: skewX(3deg);
	-o-transform: skewX(3deg);
	transform: skewX(3deg);
}
.bloque-mediosuabc .link a {
	color: #000;
	padding: 10px 30px;
	-webkit-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-ms-align-items: center;
	align-items: center;
}
.bloque-mediosuabc .link a:hover {
	padding: 15px 35px;
}
.bloque-mediosuabc .link a:hover img {
	width: 65px;
}
.bloque-mediosuabc .enlaces .imagen {
	height: 90px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	-ms-align-items: center;
	align-items: center;
}
.bloque-mediosuabc .enlaces img {
	width: 60px;
	height: auto;
	margin-right: 20px;
	-webkit-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
.bloque-mediosuabc .enlaces .txt-descripcion {
	display: block;
	margin: 0;
	min-height: 45px;
}
.bloque-mediosuabc .enlace-radio {}
.bloque-mediosuabc .enlace-imagentv {}
.bloque-mediosuabc .enlace-gaceta {}

@media screen and (min-width: 800px) {
	
	.bloque-mediosuabc .frase {
		font-size: 1.75em;
		margin-right: 50px;
	}
	.bloque-mediosuabc .enlaces {
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		-ms-align-items: center;
		align-items: center;
	}
	.bloque-mediosuabc .enlaces .imagen {
		height: 150px;
	}
	.bloque-mediosuabc .enlaces img {
		width: 100px;
		margin-right: initial; 
	}
	.bloque-mediosuabc .link {
		margin: 0 10px;
	}
	.bloque-mediosuabc .link a {
		display: block;
		text-align: center;
		width: 170px;
		padding: 30px;
	}
	.bloque-mediosuabc .link a:hover {
		padding: 35px;
	}
	.bloque-mediosuabc .link a:hover img {
		width: 110px;
	}
}
@media screen and (min-width: 1200px) {
	.bloque-mediosuabc {
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		justify-content: center;
		-ms-align-items: center;
		align-items: center;
	}.bloque-mediosuabc .frase {
		font-size: 2em; 
	}
	.bloque-mediosuabc .link a {
		width: 200px;
	}
	.bloque-mediosuabc .enlaces img {
		width: 120px; 
	}
	.bloque-mediosuabc .link a:hover {
		padding: 35px 40px;
	}
	.bloque-mediosuabc .link a:hover img {
		width: 130px;
	}
}


/*--------------------------*/
/* SECCIÓN: Empatía Musical */
/*--------------------------*/
.bloque-empatia {
	background-color: #2BBAD2;
	padding: 50px 20px;
}
.banner-em {
	margin: auto;
	max-width: 1650px;
}
.banner-em img {
	width: 100%;
	height: auto;
}

/* Texto de transmisión de conciertos */
.txt-transmision {
	text-align: center;
	font-size: 1.25em;
	line-height: 1.1;
	margin: 50px 0;
}
.txt-transmision .texto-grande {
	font-size: 1.5em;
	font-weight: bold;
	color: #EECC08;
}
@media screen and (min-width: 800px) {
	.txt-transmision {
		font-size: 2em;
	}
	.txt-transmision .texto-grande {
		font-size: 1.25em;
	}
}
@media screen and (min-width: 1200px) {
	.txt-transmision {
		font-size: 2.15em;
	}
	.txt-transmision .texto-grande {
		font-size: 1.4em;
	}
}

.artistas {
	max-width: 1600px;
	margin: auto;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}
/* Artista */
.artista {
	max-width: 400px;
	margin: 0 0 100px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex: 1 1 100%;
	-moz-flex: 1 1 100%;
	-ms-flex: 1 1 100%;
	-o-flex: 1 1 100%;
	flex: 1 1 100%;
}
.artista .viñeta-1 {}
.artista .viñeta-2 {
	max-height: 770px;
	overflow: auto;
}
.video-adaptable {
	position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.video-adaptable iframe {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.artista .viñeta-2 .txt-concierto {
	margin-top: 15px;
}
.artista .izq {
	width: 120px;
	min-width: 120px;
}
.artista .izq img {
	width: 100%;
	height: auto;
}
.artista .der {
	padding: 0 20px;
}
@media screen and (min-width: 420px) {
	.artista {
		max-width: 640px;
	}
}
@media screen and (min-width: 720px) {
	.artista {
		max-width: 630px;
		margin: 20px;
		-webkit-flex: 1 1 50%;
		-moz-flex: 1 1 50%;
		-ms-flex: 1 1 50%;
		-o-flex: 1 1 50%;
		flex: 1 1 50%;
	}
	.artista .izq {width: 263px;}
	.artista .der {
		padding: 0 30px;
	}
}
@media screen and (min-width: 1200px) {
	.artista {
		margin: 30px 60px;
		-webkit-flex: 1 1 30%;
		-moz-flex: 1 1 30%;
		-ms-flex: 1 1 30%;
		-o-flex: 1 1 30%;
		flex: 1 1 30%;
	}
	.artista .izq {
		min-width: 263px;
	}
}
@media screen and (min-width: 1600px) {
	.artista {
		max-width: 650px;
	}
}
.artista .rueda-fecha {
	background: url(../img/rueda-pay.png) no-repeat center;
	-webkit-background-size: contain;
	background-size: contain;
	color: #93D7FA;
	float: right;
	padding: 30px;
	text-align: center;
	width: 90px;
}
.artista .dia {
	display: block;
	font-family: 'Champion-HTF-Lightweight';
	font-size: 1.5em;
	line-height: 1.15;
}
.artista .hora {
	display: block;
}
@media screen and (min-width: 720px) {
	.artista .rueda-fecha {width: 110px;}
	.artista .dia {font-size: 2em;}
	.artista .hora {font-size: 1.5em;}
}
.artista .txt-concierto {
	color: #E43F66;
	display: block;
	font-family: 'Champion-HTF-Welterweight';
	font-size: 1.5em;
	margin-top: 120px;
	text-transform: uppercase;
}
.artista .txt-artista {
	color: #fff;
	font-family: 'Champion-HTF-Welterweight';
	font-size: 3em;
	line-height: 1;
	text-transform: uppercase;
}
.artista .txt-artista small {
	font-size: 0.5em;
	display: block;
}
.artista .txt-descripcion {
	color: #fff;
	padding: 10px;
	max-width: 160px;
}
@media screen and (min-width: 420px) {
	.artista .txt-descripcion {
		max-width: initial;
	}
}
@media screen and (min-width: 720px) {
	.artista .txt-concierto {font-size: 2em;}
	.artista .txt-artista {font-size: 5em;}
	.artista .txt-artista small {font-size: 0.5em;}
	.artista .txt-descripcion {
		padding: 10px 30px;
		max-width: initial;
	}
}
.artista a.enlace-vermas {
	color: #fff;
	background: #333;
	display: block;
	font-family: 'Champion-HTF-Welterweight';
	font-size: 1.55em;
	padding: 10px;
	text-decoration: none;
	max-width: 180px;
}
.artista a.enlace-vermas svg {
	width: 50px;
	height: 50px;
	margin-left: -30px;
	margin-top: -20px;
}
.artista .lista-reproduccion img {
	width: 100%;
	height: auto;
}
@media screen and (min-width: 420px) {
	.artista a.enlace-vermas {
		max-width: initial;
	}
}
@media screen and (min-width: 720px) {
	.artista a.enlace-vermas {
		max-width: initial;
	}
	.artista .lista-reproduccion {
		margin-left: 30px;
	}
}



/*-------------------*/
/* SECCIÓN: Detalles */
/*-------------------*/
a.boton-cerrar {
	position: fixed;
	top: 0px;
	right: 30px;
	background-color: #000;
	color: #fff;
	padding: 5px;
	display: none;
	cursor: pointer;
}
.area-detalles {
	position: fixed;
	background-color: #D2AC2B;
	right: 0px;
	top: 0;
	height: calc(100% - 40px);
	overflow: auto;
	display: none;
	max-width: 1000px;
	padding: 40px 0 0;
}

.detalles-artista {
	background: #D2AC2B;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
.detalles-artista .izq {
	-webkit-flex: 1 1 50%;
	-moz-flex: 1 1 50%;
	-ms-flex: 1 1 50%;
	-o-flex: 1 1 50%;
	flex: 1 1 50%;
}
.detalles-artista .der {
	-webkit-flex: 1 1 50%;
	-moz-flex: 1 1 50%;
	-ms-flex: 1 1 50%;
	-o-flex: 1 1 50%;
	flex: 1 1 50%;
}

.detalles-artista .media img {
	width: 100%;
	height: auto;
}
.area-detalles .artista {
	margin: 20px;
}
.area-detalles .txt-descripcion {
	max-width: initial;
}
.info .txt-concierto {
	margin-top: 30px;
}
@media screen and (min-width: 720px) {
	.area-detalles {
		padding: 0;
		height: 100%;
	}
	.detalles-artista {}
}