html {
  height: 100%;
}
body{
  width: 100%;
  height: 100vh;
  background-color: #DE912F;
}
.body{
  width: 100%;
  height: 100%;
  background-color: #F15A29;
  align-items: center;
}
.radio{
  opacity: 0.2;
  position:relative;
}
.flowplayer{
  display: none !important;
}
.logo-player{

}
.play{
  width: 250px;
}
.play:hover{
  filter: saturate(200%);
  transition: all 0.5s;
  -webkit-border-radius:50%;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  background-repeat: no-repeat;
}
a:focus{
  filter: saturate(180%);
}
.nav{
  padding-top: 10px;
  padding-bottom: 10px;
}
#logo-teletica{
  padding-left: 15px;
}
#logo-classic{
  padding-top: 10px;
}


/* Footer
*******************************************************************************/
.footer{
  background-color: #242426;
  width: 100%;
  padding: 50px 0 0;
  margin: 0px 0 0;
  display: inline-block;
  position: relative;
  background-image: none;
}
.footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-image: -webkit-linear-gradient(0deg, #f8a824 25%, #f05d21 25%, #f05d21 50%, #8ac349 50%, #8ac349 75%, #22bab8 75%, #22bab8 100%);
  background-image: -ms-linear-gradient(0deg, #f8a824 25%, #f05d21 25%, #f05d21 50%, #8ac349 50%, #8ac349 75%, #22bab8 75%, #22bab8 100%);
  background-size: 100%; 
}
.footer ul li a{
  color: #fff;
}
.footer ul li a:hover{
  color: #f05d21;
}
#social li{
  display: inline;
  padding-left:10px;
  padding-right:10px;
  font-size: 30px;
}
#social li a i{
  color: #5c5c5c;
  transition: all .15s ease;
}
#social li a.facebook:hover i{
  color: #3b5998;
}
#social li a.instagram:hover i{
  color: pink;
}
#social li a.twitter:hover i{
  color: #1da1f2;
}
#social li a.youtube:hover i{
  color: #de2825;
}
.derechos{
  background-color: #000;
  color: #fff;
}

.layer-estrella2{
  display: none;
}
.layer-letras_estrellas2 {
  display: none;
}

@media (max-width: 480px){
  .logo-player{
    position: absolute;
    margin-left: 0px;
  }
  #logo-classics{
    width: 60%;
  }
  .play{
    width: 180px;
  }
  .play:hover{
    background-image: none;
    background-repeat: no-repeat;
  }
}

@media (max-width: 380px){
  .logo-player{
    position: absolute;
    margin-left: 0px;
  }
  #logo-classics{
    width: 60%;
  }
  .play{
    width: 160px;
  }
  .play:hover{
    background-image: none;
    background-repeat: no-repeat;
  }
}

@media (max-width: 365px){
  .logo-player{
    position: absolute;
    margin-left: 0px;
  }
  #logo-classics{
    width: 60%;
  }
  .play{
    width: 140px;
  }
  .play:hover{
    background-image: none;
    background-repeat: no-repeat;
  }
}