body{
 color: #0016ff;	
 background: transparent; 
}


.rel{
	position: relative;
}

.outer-body{
	max-width: 100%;
	width: 600px;
	margin: 0 auto;
	/*border: solid 1px #dddddd;*/


}

.inner-body{
	padding: 20px;
	margin: 20px;
	background-color: #f4f400; /* For browsers that do not support gradients */
    /*background-image: linear-gradient(red, yellow);*/ /* Standard syntax (must be last) */ 
    background-image:
    linear-gradient(
      to bottom, 
      #f4f400,
      #f4f400 70%,
      #0016ff 30%
      
    );
    position: relative;
    border-radius: 10px;
}

.covers{
	box-shadow: 0 10px 10px rgba(0,0,0,0.4);
}

.user-image{
	width: 125px;
	height: 125px;
	overflow: hidden;
    border-radius: 5%;
    text-align: left;
}

.user-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;	
	box-shadow: 0 10px 10px rgba(0,0,0,0.7);

}

.social{
	position: absolute;
	top: -30px;
	right: 10px;
}

.social ul li{
	list-style: none;
	display: inline-block;
}

.social ul li a span{
	width: 30px;
	height: 30px;
	border-radius: 50%;
	/*border: 1px solid #343434;*/
	display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f2f2f2;
    color: #0016ff;
    box-shadow: 0 10px 10px rgba(0,0,0,0.4);
    transition: all 1s ease;
}

.social ul li a span:hover{
    transform: scale(1.5);
}	

.player{
	position: absolute;
	bottom: 10px;
	right: 10px;

}

.player ul li{
	list-style: none;
	display: inline-block;
	float:left;
}

.player ul li a span{
	width: 45px;
	height: 45px;
	border-radius: 50%;
	/*border: 1px solid #343434;*/
	display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f2f2f2;
    color: #0016ff;

    box-shadow: 0 10px 10px rgba(0,0,0,0.4);
    transition: all 1s ease;

}


.player ul li a span:hover{
    transform: scale(1.2);
}	


.station{
	font-weight: bold;
}


.loading{
	display: none;
}


.marquee {
  height: 30px;
  width: 650px;
  
  overflow: hidden;
  position: relative;
}

.marquee div {
  display: block;
  width: 200%;
  height: 30px;
  /*max-width: 100%;*/
  position: absolute;
  overflow: hidden;

  animation: marquee 15s linear infinite;
}

.marquee span {
  float: left;
  
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}




/*  vol  */

#player {
  width: 150px;
  height: 50px;
  position: relative;
  margin: 0 auto;
  top: 50px;
}
#player i {
  position: absolute;
  margin-top: -6px;
  color: #f4f400;
}
#player i.fa-volume-down {
  margin-left: 8px;
}
#player i.fa-volume-up {
  margin-right: -8px;
  right: 0;
}

#volume {
  position: absolute;
  left: 24px;
  margin: 0 auto;
  height: 5px;
  width: 100px;
  background: #555;
  border-radius: 15px;
}
#volume .ui-slider-range-min {
  height: 5px;
  width: 100px;
  position: absolute;
  background: #f4f400;
  border: none;
  border-radius: 10px;
  outline: none;
}
#volume .ui-slider-handle {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #FFF;
  position: absolute;
  margin-left: -8px;
  margin-top: -8px;
  cursor: pointer;
  outline: none;
}



@media only screen and (max-width: 600px) {
  
 .volume{
 	/*display: none;*/
 }

 .player {
    position: absolute;
    bottom: 4px;
    right: 10px;
}

.player ul li a span{
	width: 30px;
	height: 30px;
}

.social {
    position: absolute;
    top: -23px;
    right: 10px;
}

.social ul li a span{
	width: 20px;
	height: 20px;
	font-size: 15px;
}


.inner-body{
	padding: 12px;
	margin: 12px; 
	background-color: #f4f400; /* For browsers that do not support gradients */
    /*background-image: linear-gradient(red, yellow);*/ /* Standard syntax (must be last) */ 
    background-image:
    linear-gradient(
      to bottom, 
      #f4f400,
      #f4f400 70%,
      #0016ff 30%
      
    );
    position: relative;
}


.user-image{
	width: 80px;
	height: 80px;
	overflow: hidden;
    border-radius: 5%;
    text-align: left;
}


.marquee {
  height: 30px;
  width: 240px;
  
  overflow: hidden;
  position: relative;
}

.station p{
	margin-bottom: 0px;
}

#player {
  width: 150px;
  height: 50px;
  position: relative;
  margin: 0 auto;
  top: 42px;
}

}