@charset "utf-8";


@font-face {
  src: url("RADIOSTA.TTF") format("truetype");
  src: url("RARLRDBD.TTF") format("truetype");

}

.progresso {
  -webkit-appearance: none;
  height: 2rem;
  margin-top: .25rem;
  background: #696969;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.progresso:hover {
  opacity: 1;
}

.progresso::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  border: none;
  width: .6rem;
  height: .6rem;
  border-radius:.3rem;
  background: #000;
  cursor: pointer;
}

.progresso::-moz-range-thumb {
  display: none;
  width: 0;
  height: 0;
  border-radius:0;
  background: none;
  cursor: pointer;
}

.progresso::-moz-range-progress {
	
  background-color: #2f4f4f;
  height: 2rem;
}


.volume {
	float: left;
	width: 100%;
}


.volume {
  -webkit-appearance: none;
  height: .3rem;
  margin-top: .25rem;
  background: #fff;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.volume:hover {
  opacity: 1;
}

.volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius:.5rem;
  background: #fff;
  cursor: pointer;
}

.volume::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius:.5rem;
  background: #fff;
  cursor: pointer;
}


.duration {
	width: 20%;
    height: 2rem;
	line-height: 2rem;
	padding: 0;	
	text-align:center;
	font-size: .8rem;
    margin-top: .25rem;
	background: #696969;
	color: #fff;
	outline: none;
	opacity: 0.7;
}

.totaltime {
	width: 20%;
    height: 2rem;
	line-height: 2rem;
	padding: 0;	
	text-align:center;
	font-size: .8rem;
    margin-top: .25rem;
	background: #696969;
	color: #fff;
	outline: none;
	opacity: 0.7;
    
}


/***********************************/

.svgbox {
    width: 2rem;
    height: 2rem;
	cursor: pointer;
	 transistion: all .3s;
	 color: rgba(100,100,100,0.5);
}
.svgbox:hover {
	color: rgba(180,180,180,0.5);
}

.lista-musicas {background: #0a2a2a; position: relative; font-size: .8rem; margin-bottom: .3rem; padding: .5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.lista-musicas:hover { background: rgba(0,0,0,0.5);}
.lista-play { position: absolute;  width: 3rem; height: 3rem; padding: .2rem;}
.lista-musica { margin: 0 0 0 3.5rem;  padding: 0 0 0 0; }
.lista-info {  margin: 0 0 0 3.5rem;  padding: 0 0 0 0; }
.clear: {clear:both;}


/***********************************/

.svg-box {
	display:flex;
	color: #858796;
}
.svg-box a {
	margin: .1rem; 
	/*transition: all 1s;*/
	color: #858796;
}

.svg-box a:hover {
	color: #2f4f4f;
}
.svgbox {
	width: 2rem;
}

.svgboxer {	
	width: 2.6rem;
}

.ativa {
	color: #2f4f4f;
}

@media (max-width: 432px) {
 .svgbox {
	width: 1.5rem;
}
}


/*********************************/

.playimagem {
	position: relative; 
}
.on {
	
	color:#fc0;
}


.charge {
  color: #fff;
  display: inline-block;
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
}
.charge div {
  transform-origin: 50px 50px;
  animation: charge 1.2s linear infinite;
}
.charge div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 49px;
  width: 5px;
  height: 14px;
  border-radius: 20%;
  background: #fff;
}
.charge div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.charge div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.charge div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.charge div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.charge div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.charge div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.charge div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.charge div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.charge div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.charge div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.charge div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.charge div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes charge {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


.pausado {
  display: none;
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(0,0,0,.6);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

.tocando {
  display: none;
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(0,0,0,.2);
  border-radius: 50%;
   top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  transistion: all .3s;
}


.pausado  div {
  position: absolute;
  top: 22%;
  left: 50%;
   margin-left: -20px;
  border-top: 30px solid transparent; 
  border-left: 60px solid rgba(255,255,255,.2);
  border-bottom: 30px solid transparent; 
  transistion: all .3s;
}

.aa {
  position: absolute;
  top: 22%;
  left: 25px;
  width: 20px;
  height: 60px;
  background: rgba(255,255,255,.2);
  transistion: all .3s;
}

.bb {
  position: absolute;
  top: 22%;
  left: 55px;
  width: 20px;
  height: 60px;
  background: rgba(255,255,255,.2);
  transistion: all .3s;

}

.pausado:hover, .tocando:hover {
	background: rgba(0,0,0,.7);
}


/*********************************/

.progress {
   width: 60%;
   height:2rem;
   padding: .7rem 0;
   float: left;
     background: none;
}
.progressos {
  -webkit-appearance: none;
  height: .6rem; 
  outline: none;
  background: #333;
  width: 100%;
}

.progressos::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  border: none;
  width: .6rem;
  height: .6rem;
  border-radius:.3rem;
  background: #000;
  cursor: pointer;
}

.progressos::-moz-range-thumb {
  width: .6rem;
  height: .6rem;
  border-radius:.3rem;
  background: #333;
  cursor: pointer;
}

.progressos::-moz-range-progress {
	background: #999;
   outline: none;
   border: none;
  height: .6em;
}


/**************************************/
.bg-dark {
    background: #2a2a2a;
}
.col-md-6, .col-xl-6 {
    padding-right: 0.;
padding-left: 0;
}

@media (max-width: 480px) {
#player {
     
}


}
.ativa {
	background: #1a1a1a;
	transition: all 0.3s;
	padding: 0;
	margin: 0;
}

.ativa:hover {
   background: #0a0a0a;
   color: #fff;
   	padding: 0;
	margin: 0;
}

#playlist {
  font-size: .8rem;
}

#playlist a{
	text-decoration: none;
}

#playlist div{
      transition: all 0.3s;
}

#playlist div:hover {
   background: #0a0a0a;
   color: #fff;
}

.links {
  padding: 0.75rem;
  transition: all 0.3s;
  
}
.links:hover {
   background: #0a0a0a;
   color: #fff;
}





/************************************************/
#player {
	display:none; 
	background: #000; 
	z-index: 999;
	
}

#player-imagem {
	position: relative;
	margin: 0 auto;
	width: 20rem; 
	height: 20rem; 
	text: center
	 
}
#datainfo {
	position:absolute;
	left: 0;
	right:0;
	bottom: 0;
	background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
	color: #fff; 

}
.playerdata { font-family: "Radio Stars"; padding: 0 .5rem 0 0; font-size: 2rem; color: #fc0; text-align: right; text-shadow: .1rem .1rem rgba(0,0,0, 0.9);   margin-bottom: -.8rem;}
.playercantor{font-family: "Arial Rounde MT Bold", arial; font-size: .9rem; font-weight: bold;  padding: 0 .5rem 0 0; text-shadow: .1rem .1rem  rgba(0,0,0, 0.9);  text-align: right;}
.playertitulo{font-family: "Arial Rounde MT Bold", arial; font-size: .8rem;  padding: 0 .5rem .5rem 0; text-shadow: .1rem .1rem rgba(0,0,0, 0.9);  text-align: right;}

/****************************************/
 
.play {
  
  position: absolute;
  width: 3rem;
  height: 3rem;
  background: rgba(0,0,0,.2);
  border-radius: 50%;
  top:2.2rem;
  left:3rem;
  margin-left: -1.5rem;
  margin-top: -1.5rem;
}


.play div {
  position: absolute;
  top:  .75rem;
  left: 1rem;
   margin-left: 0;
  border-top: .75rem solid transparent; 
  border-left: 1.5rem solid rgba(255,255,255,.2);
  border-bottom: .75rem solid transparent; 
  transition: all .3s;
}

.play:hover{
	background: rgba(0,0,0,.5);
}

/****************************************/
 
 .spaces {
     margin: 1rem 0;
 }

.banners {
	display:flex;  flex-wrap: wrap; justify-content: space-between;
}

.banners img {
	opacity: .8;
	transition: all .3s;
	max-width: 31%; 
	margin: 1%; 
	cursor:pointer;
}

.banners img:hover {
	opacity: 1;
}

.patrocinador {
	text-align:center; display:flex;
}

.patrocinador img {
	opacity: 1;
	transition: all .3s;
	cursor:pointer;
}

.patrocinador img:hover {
	opacity: 1;
}



.anunciantes {
	display:flex;  flex-wrap: wrap; justify-content: space-between;
}

.anunciante {
	max-width: 31%; 
	margin: 1%; 
}

.anunciante img {
	opacity: .8;
	transition: all .3s;
	max-width: 100%; 
	cursor:pointer;
}

.anunciante img:hover {
	opacity: .8;
}


/***********************************/

.geral {
	padding: 1rem;
}
.bolds {
	font-weight: bold;
}

.umenu {
	padding: 1rem 0;
	border-bottom: 1px solid rgba(255, 10,10, 0.2);
	margin-bottom: 0;
	line-height: 100%;
}

.geral a{
	text-decoration: none;
}
.msvgs {
    margin: 0 1rem -.1rem 0;
}

/****************************/