/* CSS Document */
html,body { height: 100% }
body { background-color: #FFFB9F; background-image: url(/images/fondo-colores.jpg); background-size: cover; background-repeat: repeat-y; background-position: top; }
footer { background-image: url(/images/fondo-colores.jpg); background-size: cover; background-repeat: repeat-y; background-position: top; padding-top: 50px; }

#bar{ background-image: url('/images/fondo.gif'); background-position: right top; background-repeat: no-repeat;}
#logo-fondo { background-image: url("/images/logo-stylfm.jpg"); background-position: left top; background-repeat: no-repeat; max-height: 148px }
#logo-fondo video { max-width: 100% }
@media (max-width: 440px) { 
	#logo-fondo { background: none; }
}
.player { font-size: 18px; color: #666666; }
.player a {
	color: #000000;
	font-size: 80px;
	text-decoration: none;
	padding: 10px;
}
.player a:hover { color: #0000FF; } 
.player .directo { background-color: #FF0004; color: #FFFFFF; padding: 2px 10px; border-radius: 20px; text-transform: uppercase; font-weight: bold } 
.player i { font-size: 16px }
.player .fa-volume-off{ margin: 0 5px 0 40px;}
.player-gormatica { text-align: center; }

.logos a { font-size: 30px; margin-left: 10px; color: aliceblue; text-align: center  } 
.logos a:hover { color: #F8FF00; } 
.logos i:hover { border-color: #F8FF00 }
.logos i { border-radius: 50%; border: 2px solid grey; padding:10px; width: 55px }
@media (max-width: 664px) { 
	#bar { background: none; }
}
@media (max-width: 992px) { 
	.player-gormatica {background-color: rgba(255,255,255,0.50) }
	.player a { font-size: 40px; padding: 5px; } 
	.player-gormatica { }  
	.player .directo { padding: 2px 6px; border-radius: 12px; text-transform: uppercase; font-weight: bold; font-size: 13px; } 
	.player .fa-volume-off{margin: 0 5px 0 15px;}
	.player .fa-volume-up{margin-right:15px !important;}
	.logos i { width: 45px; padding: 5px }
}



#equaliser {
	width: 28px;
	height: 15px;
	position: relative;
	margin-left: 10px;
}

.bar {
  float:left;
  width: 4px;
  height: 10px;
  background:red;
  position: absolute;
  bottom:0;
}

.primera { 
  left: 0px;
  -webkit-animation: firstBar  1s infinite;
}
.segunda { 
  left: 6px; 
  -webkit-animation: secondBar  1s infinite;
}
.tercera { 
  left: 12px; 
  -webkit-animation: thirdBar  1s infinite;
}

.cuarta { 
  left: 18px; 
  -webkit-animation: fourthBar  1s infinite;
}

.quinta { 
  left: 24px; 
  -webkit-animation: secondBar  1s infinite;
}

@-webkit-keyframes firstBar {
  0%   { height: 5px; }
  50%  { height: 15px; }
  100% { height: 5px; }
}

@-webkit-keyframes secondBar {
  0%   { height: 15px; }
  50%  { height: 5px; }
  100% { height: 15px; }
}

@-webkit-keyframes thirdBar {
  0%   { height: 10px; }
  70%  { height: 15px; }
  100% { height: 10px; }
}
@-webkit-keyframes fourthBar {
  0%   { height: 7px; }
  30%  { height: 15px; }
  100% { height: 7px; }
}

/* Programacio */

.text p{
	color:  #243D6E;
	font-size: 20px;
	margin: 0;
}

.text{
	margin: 0 0 10px;
	padding: 0;
}

.text a{
	color: #0D2A82;
	display:inline-block;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.8;
	text-decoration: none;
}

.text a:hover {
	color: #3D0747;
	text-decoration: underline
}


/* FOOTER ****************************************************/
.footer-distributed{
	background-color: rgba(255,255,255,0.40);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	text-align: left;
	font: normal 16px sans-serif;
	padding: 50px;
}

.footer-distributed .footer-left p{
	color:  #666666;
	font-size: 14px;
	margin: 0;
}


/* Footer links */

.footer-distributed p.footer-links{
	margin: 0 0 10px;
	padding: 0;
}

.footer-distributed p.footer-links a{
	color: #243D6E;
	display:inline-block;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.8;
	text-decoration: none;
}

.footer-distributed p.footer-links a:hover {
	color: #3D0747;
	text-decoration: underline
}

.footer-distributed .footer-right{
	float: right;
	margin-top: 6px;
	max-width: 375px;
}



/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 575px) {
	footer { padding-top: 40px; }
	.footer-distributed{ padding: 10px; }
	.footer-distributed .footer-left,
	.footer-distributed .footer-right{
		text-align: center;
	}

	.footer-distributed .footer-right{
		float: none;
		margin: 0 auto 20px;
	}

	.footer-distributed .footer-left p.footer-links{
		line-height: 1.8;
	}
	.footer-distributed p.footer-links a{
		font-size: 12px;
	}
}