body {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
body{
  overflow: ;
  overflow-y:  !important;
  overflow-x:  !important;
}

.svg {
  width: 250px;
  height: 250px;
  margin: 70px auto 50px;
  float:center !important;
  
}
.volumeBg {

  margin: 0px auto auto auto;
  float:center;
  
  
}
.logo img { 
  margin: 50px auto;
}
.playerLine {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #ggg;
}
.playerLine img {
  margin: 0 auto;
  height: 20px;
}
.arkista{
	
	width:%100;
	height:20px;
	float:center;
	margin: 0px auto 0px;
}

.name {
  margin: 15px auto;
  float: left;
  color: #fff;
  font-size: 2em;
  font-weight: 700;
}

/* -------------------------------------------------------------- */

.slogan {
	
  margin: -5px auto;
  color: #fff;
  font-size: 1.8em;
  font-weight: 500;
  /*text-shadow: 2px 2px 8px #FF0000;*/
}
/* -------------------------------------------------------------- */



.trackinfo_artist {
	margin:   auto;
	float: center;
    padding-top: 0px;
    font-weight: 600;
    color: #f29200;
	
}
#audio_player {
  display:none;
  float: center;
  margin: 0px auto auto 0px;
  visibility: hidden;
  width: 30px;
  padding-top: 0px;
}

#audioplayer{
	display:block;
	
 
}
 
#pButton {
  border: none;
  float: center; 
  outline: none;
  width:250px;
  height:250px;
  
} 
.play{
  background-color: transparent;
  float:center;
}
.pause{
  background-color: transparent;
}
.play:before {
  float: center;
  content: url('../imgs/PlayButon.svg'); 
}
.pause:before {
  float: center;
  content: url('../imgs/RadyoArkista.svg');   

}
 
#timeline{
  width: 300px;
  height: 3px;
  margin: 0px auto auto -25px; 
  position: relative;
  float: left;
  border-radius: 0px;
  border: white 1px ;
  display:none;
  background-color: #aaa;
  background-image: #fff(
    center bottom,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
  );
  box-shadow:
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  
}
 
#playhead{
  position: relative;
  display:none;
  width: 25px;
  height: 5px;
  border-radius: 10%;
  margin-top: -1px;
  background: rgba(0, 0, 0,1);
  opacity:0.5;
}


 
#volume_control{
  margin: 240px  auto auto 0px ;
  background-image: url('../imgs/VolumeBar.svg');
  background-repeat: no-repeat;
  width:275px;
  height:30px;
  visibility: visible;  
  display:;
  opacity: 1;
  filter: alpha(opacity=50);
  
  
  

}

#volume_control:before {            
  margin: 0px;
  font-family: FontAwesome;
  content: "\f028";
  font-size: 18px;
  visibility: hidden;
  color: #f29200;
  
  

}
#rngVolume_label{

    margin:auto;
    vertical-align:middle;
    color: #f29200;
	visibility: hidden;
	
	
	
}

 
#rngVolume{
	
  background-color: transparent;
  
  margin-top: -20px;
  vertical-align:center;
  visibility: visible;
  -webkit-appearance: none;
   height:3px;
   opacity:1;
   cursor: pointer;
   outline:none;
   
   
}

#rngVolume::-webkit-slider-thumb {
  -webkit-appearance: none;
   margin: 3px auto auto 0px;
  width: 28px;
  height: 28px;
  background: #f29200;
  cursor: pointer;
  opacity:0.8 !important;
  border-radius: 50%;
}

#rngVolume::-moz-range-thumb {
 margin: 30px auto auto 0px;
  width: 28px;
  height: 28px;
  background: #f29200;
  cursor: pointer;
  opacity:0.8 !important;
  border-radius: 50%;
}


#mute{
  margin: 0px auto auto 0px;
  background-color: transparent;
  border: none;
  float: center; 
  outline: none;
  opacity:0.8;
  margin-left:-30px;
} 


.mute:before {

  margin: 0px auto auto -32px;
  font-family: FontAwesome;
  content: "\f028";
  font-size: 21px;
  visibility: visible;
  color: #f29200;
  
}
.unmute:before{
	
  margin: 0px auto auto -42px;
  font-family: FontAwesome;
  content: "\f026";
  font-size: 21px;
  visibility: visible;
  color: #f29200;
  
}