@import url(slant-fonts.css);

#reproductorradio .inner
{
	min-width: 1024px;
}

#reproductorradio{
		align-items: center;    /* Centers vertically along the cross axis */
		min-height: 400px;
		display: flex;
		background-color: #2C1654;
		background-image: linear-gradient(to right, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.5)), url("../fondos/fondoradio.jpg");
		background-size: auto, cover;
		background-position: left center;
		clip-path: polygon(0% 20%, 100% 0%, 100% 100%, 0% 80%);
}
#titulocancion
{
	/*overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;*/
	max-height: 40px;
	max-width: 1024px;
	border-bottom: solid 2px rgba(255, 255, 255, 0.125);
}

#titulocancion h2{
	font-family: Raleway, Helvetica, sans-serif;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 1em 0;
	font-size: 1.2em;
	border-bottom: none;
}

#caratula img
{
	min-width: 320px;
	min-height: 196px;
}
	@media only screen and (max-width: 767px)
	{
		#caratula img
		{
		}
}

.marquee{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.marquee h3{
	max-width: calc(100% /*- 260px*/);
	width: calc(100% /*- 260px*/);
	color: #fff;
	position: relative;
	text-align: center;
	/* Starting position */
	-moz-transform:translateX(100%);
	-webkit-transform:translateX(100%);
	transform:translateX(100%);
	/* Apply animation to this element */
	-moz-animation: scroll-left 15s linear infinite alternate;
	-webkit-animation: scroll-left 15s linear infinite alternate;
	animation: scroll-left 15s linear infinite alternate;
	font-weight: bold;
	text-shadow: 2px 2px 4px #000000;
}

.marquee h2{
	max-width: calc(100% /*- 260px*/);
    width: calc(100% /*- 260px*/);
	color: #fff;
	position: relative;
	text-align: center;
	/* Starting position */
	-moz-transform:translateX(100%);
	-webkit-transform:translateX(100%);	
	transform:translateX(100%);
	/* Apply animation to this element */	
	-moz-animation: scroll-left 15s linear infinite alternate;
	-webkit-animation: scroll-left 15s linear infinite alternate;
	animation: scroll-left 15s linear infinite alternate;
	font-weight: bold;
	text-shadow: 2px 2px 4px #000000;
}

.marquee h1{
	max-width: calc(100% - 260px);
    width: calc(100% - 260px);
	color: #fff;
	position: relative;
	text-align: center;
	/* Starting position */
	-moz-transform:translateX(100%);
	-webkit-transform:translateX(100%);	
	transform:translateX(100%);
	/* Apply animation to this element */	
	-moz-animation: scroll-left 15s linear infinite alternate;
	-webkit-animation: scroll-left 15s linear infinite alternate;
	animation: scroll-left 15s linear infinite alternate;
	font-weight: bold;
}

/*Definimos la animación scroll-left*/
@-moz-keyframes scroll-left
{
	0%   { -moz-transform: translateX(100%); }
	100% { -moz-transform: translateX(-100%); }
}

@-webkit-keyframes scroll-left
{
	0%   { -webkit-transform: translateX(100%); }
	100% { -webkit-transform: translateX(-100%); }
}

@keyframes scroll-left
{
	0%
	{ 
		-moz-transform: translateX(100%); /* Browser bug fix */
		-webkit-transform: translateX(100%); /* Browser bug fix */
		transform: translateX(100%); 		
	}
	100%
	{ 
		-moz-transform: translateX(-100%); /* Browser bug fix */
		-webkit-transform: translateX(-100%); /* Browser bug fix */
		transform: translateX(-100%); 
	}
}
/*Acaba la definicion de scroll-left*/


/*ZONA DEL REPRODUCTOR DE RADIO*/
/* CUERPO (WRAPPER) */
	/*ZONA DE LA CARATULA*/
	/*SOMBRA PARA LA IMAGEN*/
#caratula.image{
	box-shadow: rgba(0, 0, 0, 0.7) 5px 5px 10px 1px;
	min-width: 310px;
	max-width: 310px;
}
/*ZONA DEL REPRODUCTOR*/
	/*BOTONERA DEL REPRODUCTOR*/
#botonerareproductor
{
	margin-top: 5px;
	display: flex;
	justify-content: left; /* Centers horizontally along the main axis */
	align-items: center;    /* Centers vertically along the cross axis */
	height: 35px;
}
	
#fondozonavolumen
{
	width: 100%;
	display: flex;
	justify-content: left; /* Centers horizontally along the main axis */
	align-items: center;    /* Centers vertically along the cross axis */
	height: 35px;
}
	
#play
{
	width: 45px;
	height: 35px;
	background-color: #7b9f4c;
	/* Color de prueba background-color: #EA580C;*/
	text-align: center;
    padding: 0px 5px 0px 5px;
	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
	border: 1px;
	border-style: solid;
	border-color: #000;
	border-radius:15px;
	box-shadow: rgba(0, 0, 0, 0.7) 5px 5px 10px 1px;
}

#botoneravolumen
{

}

#botoneraoyentes
{
	margin-top: 15px;
	display: flex;
	justify-content: right; /* Centers horizontally along the main axis */
	align-items: center;    /* Centers vertically along the cross axis */
	height: 35px;
}

#oyentes
{
	/*TEST*/
	width: 80px;
	height: 35px;
	background-color: #7b9f4c;
	/* Color de prueba background-color: #EA580C;*/
	text-align: center;
	padding: 0px 5px 0px 5px;
	box-sizing: border-box;
	color: #fff;
	font-weight: bold;
	border: 1px;
	border-style: solid;
	border-color: #000;
	border-radius:15px;
	box-shadow: rgba(0, 0, 0, 0.7) 5px 5px 10px 1px;
}

#volumen
{
	height: 35px;
	/*height: 30px;*/
	background-color: #7b9f4c;
	padding: 0px 5px 0px 5px;
	text-align: center;
	margin-left: 15px;
	box-sizing: border-box;
	cursor: pointer;
	color: #fff;
	min-width: 45px;
	align-items: center;
	border-left: 1px solid black;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-radius:15px 0px 0px 15px;
	box-shadow: rgba(0, 0, 0, 0.7) 5px 5px 10px 1px;
	/*Esto es para que la sombra no se posicione encima del siguiente div*/
	z-index:1;
}

/*Configuración del Slider de volumen*/
#zonaslidervolumen
{
	position: relative;
	width: 100%;
	height: 35px;
}

#controlvolumen
{
	position: relative;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right,  #7b9f4c 5%,#000 5%); /* W3C */
	border-right: 1px solid black;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-radius: 0px 15px 15px 0px;
	box-shadow: rgba(0, 0, 0, 0.7) 5px 5px 10px 1px;
}


.ui-slider-range
{
	/*COLORES ORIGINALES
	background: #8f888e; 
	background: -moz-linear-gradient(top,  ##8f888e 0%, #5a6464 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,##8f888e), color-stop(100%,#5a6464));
	background: -webkit-linear-gradient(top,  ##8f888e 0%,#5a6464 100%);
	background: -o-linear-gradient(top,  ##8f888e 0%,#5a6464 100%); 
	background: -ms-linear-gradient(top,  ##8f888e 0%,#5a6464 100%);
	background: linear-gradient(top,  ##8f888e 0%,#5a6464 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='##8f888e', endColorstr='#5a6464',GradientType=0 );
	*/
	background: #00ff87;
	background: linear-gradient(to right,  #7b9f4c 25%,#DC2626 100%); /* W3C */
	position: absolute;
	height: 35px;
	/*height: 30px;*/
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-radius: 0px 15px 15px 0px;
	max-width: 100%;
	min-width: 100px;
	box-shadow: 1px 0px 1px #000;
	top:-1px;
	cursor:pointer;
	/*Esto es para pisar la sombra lateral del div de su izquierda y que parezca un solo div*/
	z-index:2;
}
/*Acabamos la configuración del slider de volumen*/
/*DEFINIMOS LA ZONA DE LOS VOTOS*/
#botoneravotacion
{
	margin-top: 15px;
	display: flex;
	justify-content: left; /* Centers horizontally along the main axis */
	align-items: center;    /* Centers vertically along the cross axis */
	height: 35px;
}

#like
{
	min-width: 45px;
	height: 35px;
	background-color: #7b9f4c;
	/* Color de prueba background-color: #EA580C;*/
	text-align: center;
	padding: 0px 5px 0px 5px;
	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
	border: 1px;
	border-style: solid;
	border-color: #000;
	border-radius:15px;
	box-shadow: rgba(0, 0, 0, 0.7) 5px 5px 10px 1px;
	margin-left: 45px;
}

#dislike
{
	min-width: 45px;
	height: 35px;
	background-color: #EA580C;
	text-align: center;
	padding: 0px 5px 0px 5px;
	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
	border: 1px;
	border-style: solid;
	border-color: #000;
	border-radius:15px;
	box-shadow: rgba(0, 0, 0, 0.7) 5px 5px 10px 1px;
}


#fondozonavotacion
{
	margin-left: 45px;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center; /* Centers horizontally along the main axis */
	align-items: center;    /* Centers vertically along the cross axis */
	border: 1px solid #000; /* For visualization */
	height: 35px;
	background-color: #EA580C;
	border-radius:15px;
	box-shadow: rgba(0, 0, 0, 0.7) 5px 5px 10px 1px;
	/*background: linear-gradient(to right,  #EA580C 0%,#7b9f4c 100%); /* ESTE ESTILO LO DECLARO EN EL INDEX COMO STYLE PARA PODER MODIFICARLO SOBRE LA MARCHA*/
}

.likes
{
	display: inline-block;
	margin-right: 5px;
	font-weight: bold;
}

.dislikes
{
	display: inline-block;
	margin-left: 5px;
	margin-right: 15px;
	font-weight: bold;
}


/*AQUI ACABA TODA LA DEFINICION DEL REPRODUCTOR Y ZONAS AÑADIDAS POR MI
A CONTINUACIÓN VIENE LA PARTE DEL MAIN.CSS COPIADA Y MODIFICARA PARA QUE LA ZONA DEL REPRODUCTOR SEA DISTINTA AL RESTO*/
/*REPRODUCTORRADIO*/

/*ESTO DA LA SEPARACIÓN SUFICIENTE PARA QUE LA DIAGONAL NO SE MEZCLE CON LA SIGUIENTE SECCIÓN*/
 .reproductoryvotos
 {
	position: relative;
 }

 .reproductoryvotos.foco .inner {
 display: -moz-flex;
 display: -webkit-flex;
 display: -ms-flex;
 display: flex;
 -moz-align-items: center;
 -webkit-align-items: center;
 -ms-align-items: center;
 align-items: center;
 -moz-flex-direction: row;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
 flex-direction: row;
 }

 .reproductoryvotos.foco .image {
 border-radius: 100%;
 margin: 0 3em 2em 0;
 /*width: 22em;*//*MODIFICADO PARA QUE LAS IMAGENES SE VEAN MAS GRANDES (CIRCULOS)*/
 /*width: 500px;*/
 overflow: hidden;
 /*-ms-flex: 1;*/
 }

 .reproductoryvotos.foco .image img {
	 border-radius: 100%;
	 width: 100%;
 }

 .reproductoryvotos.foco .content {
	 /*MODIFICADO*/
	 max-width: 810px;
	 width: 100%;
 }
/*Invierte la vita del ROW para poner la imagen a la derecha*/
 .reproductoryvotos.foco .inner {
	 -moz-flex-direction: row-reverse;
	 -webkit-flex-direction: row-reverse;
	 -ms-flex-direction: row-reverse;
	 flex-direction: row-reverse;
	 text-align: right;
 }

 .reproductoryvotos.foco:nth-child(2n - 1) .image {
	 margin: 0 0 2em 3em;
 }

/*ZONA DE ULTIMAS 6 CANCIONES*/
.playlist
{
	/*#2e3141;*/
	background: #0f1115;
	/*background: linear-gradient(to right,  #7b9f4c 25%,#DC2626 100%); /* W3C */
	/*background: linear-gradient(to top, #020024 0%, #090979 35%, #002244 100%); /*Color azulado*/
	/*background: linear-gradient(to top, #1f1c2c 0%, #928dab 100%);	/*Parecido al diseño original - Por ahora el mas chulo*/
	/*background: linear-gradient(to top, #0b091a 0%, #1e1b4b 50%, #311042 100%); /*Azul oscuro a Violeta*/
	/*background: linear-gradient(to top, #0f1115 0%, #181c25 50%, #252a37 100%); /*Oscuro Gamer Clasico*/
	/*background: linear-gradient(to top, #140526 0%, #31083b 50%, #580c5f 100%); /*Retro 80*/
	/*background: linear-gradient(to top, #0f1115 0%, #181c25 50%, #252a37 100%); /*Modo Gamer Clasico*/
	/*background: linear-gradient(to top, #0f1115 0%, #1a1f29 50%, #384154 100%); /*Modo Gamer Clasico mas claro*/
	/*background: linear-gradient(to top, #0b001a 0%, #1f0e3d 60%, #3a0066 100%); /*Modo Cyberpunk*/
	/*background: linear-gradient(to top, #050b05 0%, #0d2611 60%, #1b4d22 100%);/*Matrix Cyber "Demasiaco oscuro"*/
	/*background: linear-gradient(to top, #0a0f0d 0%, #141f19 50%, #23362b 100%); /*Survivors Rogelike*/
	/*background: linear-gradient(to top, #020d06 0%, #0a2b14 55%, #195427 100%); /* Toxic retro "Demasiado claro"*/
	background-image: linear-gradient(to top, rgba(15, 17, 21, 1) 0%, rgba(26, 31, 41, 0.5) 50%, rgba(56, 65, 84, 1) 100%), url("../fondos/fondozonaultimas.jpg");
	background-size: auto, cover;
	background-position: center center;
	background-repeat: no-repeat;
	margin: 6.5em 0;
	position: relative;
	/*background-attachment: fixed;*/
}

#banner:after
 {
	content: "";
	position:absolute;
	bottom:-78px;
	left:0;
	width:100%;
	height:80px;
	/* COMENTADO background-color: #2e3141;*/
	background: inherit;
	background-attachment: fixed;
	/*clip-path: polygon(0% 0%, 100% 100%, 100% 0%);*/
	clip-path: polygon(0% 0%, 0% 100%, 100% 0%);
	z-index:5;
}

.playlist .inner 
{
		padding: 5em 0 1em 0 ;
		margin: 0 auto;
		width: 55em;
}

/* ultimascanciones */

#ultimascanciones
{
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0 0 2em 0;
}

#ultimascanciones .cancionyasonada
{
	padding: 1.75em 1.75em 0.1em 1.75em ;
	background-color: #353849;
	background-image: linear-gradient(to right, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.5)), url("../fondos/fondoultimas6.jpg");
	background-size: contain;
	background-position: center bottom;
	border-radius: 5px;
	border: 1px solid black;
	margin: 1.5em 3em 1.5em 0;
	width: calc(50% - 1.5em);
	box-shadow: rgba(0, 0, 0, 0.7) 5px 5px 10px 1px;
}

#ultimascanciones .cancionyasonada:nth-child(2n)
{
	margin-right: 0;
}

#ultimascanciones .cancionyasonada .image
 {
	border-radius: 5px 5px 0 0;
	display: block;
	margin-bottom: 1.75em;
	margin-left: -1.75em;
	margin-top: -1.75em;
	position: relative;
	width: calc(100% + 3.5em);
	box-shadow: 0 4px 2px -2px black;
}

#ultimascanciones .cancionyasonada .image img
 {
	border-radius: 5px 5px 0 0;
	width: 100%;
}

.titulocanyasonada
{
	/*overflow: hidden;
	 * white-space: nowrap;
	 * text-overflow: ellipsis;*/
	max-height: 40px;
/*	max-width: 1024px;
	border-bottom: solid 2px rgba(255, 255, 255, 0.125);*/
}

.titulocanyasonada h3
{
		border-bottom: none;
}

.fondozonavotacionult
{
	/*margin-left: 45px;*/
	margin-bottom: 20px;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center; /* Centers horizontally along the main axis */
	align-items: center;    /* Centers vertically along the cross axis */
	border: 1px solid #000; /* For visualization */
	height: 35px;
	background-color: #EA580C;
	border-radius:15px;
	box-shadow: rgba(0, 0, 0, 0.7) 5px 5px 10px 1px;
	/*background: linear-gradient(to right,  #EA580C 0%,#7b9f4c 100%); /* ESTE ESTILO LO DECLARO EN EL INDEX COMO STYLE PARA PODER MODIFICARLO SOBRE LA MARCHA*/
}

/*Zona del pie de pagina*/
/* piepagina */

#piepagina .inner
{
	padding: 5em 0 0em 0;
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-flex-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-moz-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0 auto;
	width: 55em;
}

#piepagina
{
	position:relative;
	margin-top: -6.5em;
	background-image: linear-gradient(to top, #353849 0%, #494C5D 100%);
}

#piepagina:after
{
	content: "";
	position:absolute;
	top:-80px;
	left:0;
	width:100%;
	height:80px;
	background-color: #494C5D;
	clip-path: polygon(0% 100%, 100% 100%, 100% 0%);
	z-index:5;
}

#piepagina .inner > *
{
	width: 100%;
}

/*#piepagina .inner form
{
	margin: 0 3em 0 0;
	width: calc(50% - 1.5em);
}

#piepagina .inner .contact
{
	width: calc(50% - 1.5em);
}
*/
#piepagina .inner .copyright
{
	border-top: solid 2px rgba(255, 255, 255, 0.125);
	list-style: none;
	margin: 0 0 2em 0;
	padding: 2em 0 0 0;
	width: 100%;
}

#piepagina .inner .copyright li
{
	border-left: solid 2px rgba(255, 255, 255, 0.125);
	color: rgba(255, 255, 255, 0.35);
	display: inline-block;
	font-size: 0.9em;
	line-height: 1;
	margin-left: 1em;
	padding: 0;
	padding-left: 1em;
}

#piepagina .inner .copyright li:first-child
{
	border-left: 0;
	margin-left: 0;
	padding-left: 0;
}

#piepagina .inner .copyright li a
{
	color: inherit;
}