@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);

/** MEDIDAS PLAYER **/
.wrhplayer .player-wpr {
   max-width:100%; /* 350px */
   min-width:260px;
   height:220px;
   font-family:'Roboto Condensed',Arial,sans-serif;
   position:relative;
   border-radius:8px;
   overflow:hidden;
   }
.wrhplayer .player-ctr {
   height:220px;
   background:transparent;
   position:absolute;
   top:0;
   left:0;
   right:0;
   margin:0 auto;
   z-index:10;
  }
.wrhplayer .blur {
   width:100%;
   height:220px;
   background-size:cover;
   position:absolute;
   top:0;
   -webkit-filter:blur(20px): -ms-filter: blur(20px);
   filter:blur(20px);
   transform:scale(1.15);
   opacity:.94;
   z-index:1;
   }
.wrhplayer .wpr_op1,.wpr_op2,.wpr_op3,.wpr_op4 {
   width: calc(100% - 4px);
   background:transparent;
   position:relative;
   display:flex;
   justify-content: space-between;
   left:2px;
   margin-top:1.5px;
   } 
/** OPCIONES 1 **/   
.wrhplayer .left-op1-wpr,.center-op1-wpr,.right-op1-wpr {
   height:40px;
   text-align:center;
   position:relative;
   }
.wrhplayer .left-op1-wpr {
   width:40px;
   background:transparent;
   }
.wrhplayer .center-op1-wpr {
   width: calc(100% - 80px);
   background:transparent;
   }   
.wrhplayer .right-op1-wpr {
   width:40px;
   background:transparent;
   }
.wrhplayer .actualizar {
   width:40px;
   height:40px;
   display: flex;
   justify-content: center;
   align-items: center;
   background:transparent;
   }
.wrhplayer .boton_actualizar {
   width:28px;
   height:28px;
   border-radius:50%;
   background:transparent;
   border:2px solid #9f9996;
   border-radius:50%;
   cursor:pointer;
 }
.wrhplayer .boton_actualizar {
   background: url(../img/bot_actualizar.svg) center center no-repeat;
   }   
.wrhplayer .servertitle2 {
   width: 100%;
   font-size:18px;
   background:transparent;
   color:rgba(255,255,255,.7);
   text-shadow:3px 4px 4px #000;
   line-height: 38px;
   }
.wrhplayer .horarios {
   width:40px;
   height:40px;
   display: flex;
   justify-content: center;
   align-items: center;
   background:transparent;
 }
.wrhplayer .boton_horario {
   width:28px;
   height:28px;
   border-radius:50%;
   background:transparent;
   border:2px solid #9f9996;
   border-radius:50%;
   cursor:pointer;
 }
.wrhplayer .boton_horario {
   background: url(../img/bot_horarios.svg) center center no-repeat;
 }     
  /** OPCIONES 2 **/   
 .wrhplayer .left-op2-wpr,.center-op2-wpr,.right-op2-wpr {
   height:25px;
   text-align:center;
   }
.wrhplayer .left-op2-wpr {
   width:0px;
   background:transparent;
   }
.wrhplayer .center-op2-wpr {
   width: calc(100% - 0px);
   background:transparent;
   }
.wrhplayer .right-op2-wpr {
   width:0px;
   background:transparent;
   }
#sonic_dj { 
   background:transparent;
   color: #fff;
   font-size:18px;
   line-height: 23px;
   } 
   /** OPCIONES 3 **/
.wrhplayer .left-op3-wpr,.center-op3-wpr,.right-op3-wpr {
   height:95px;
   text-align:center;
   }
.wrhplayer .left-op3-wpr {
   width:55px;
   background:transparent;
   }
.wrhplayer .center-op3-wpr {
   width: calc(100% - 108px);
   background:transparent;
   }
.wrhplayer .right-op3-wpr {
   width:55px;
   background:transparent;
   }
.wrhplayer .icons-left,.wrhplayer .icons-right {
   width:24px;
   height:24px;
   font-size:24px;
   color:rgba(255,255,255,.92);
   cursor:pointer;
 }  
.wrhplayer .icons-right {
   bottom:-65px;
   right:16px;
   background:transparent;
   position:relative;
   text-align:left;
   float: right;
   }
.wrhplayer .icons-serverinfo:before {
   content:"\f0c9";
 }
.wrhplayer .icons-history:before {
   content:"\f1da";
 }
.wrhplayer .icons-share:before {
   content:"\f1e0";
 }
.wrhplayer .icons-volume1:before {
   content:"\f026";
 }
.wrhplayer .icons-volume2:before {
   content:"\f027";
 }
.wrhplayer .icons-volume3:before,.wrhplayer .icons-volumeM:before {
   content:"\f028";
 }
.wrhplayer .icons-volumeM {
   display:none;
 }
.wrhplayer .icons-volumeM2:before {
   content:"\f026";
 }
.wrhplayer .icons-close:before {
   content:"\f00d";
 }  
 img { 
   width:90px;
   height:90px;
   border-radius:20%;
   margin-top:3px;
   }
/** CONFING VOLUMEN **/ 
.wrhplayer .volume-slider {
   bottom:0px;
   margin-top:75px;
   z-index:10;
   right:14px;
   position:relative;
   }   
.wrhplayer input[type=range] {
   width:65px;
   height:6px;
   background:0 0;
   padding:0px 0px;
   transform:rotate(-0deg);
   transform-origin:bottom;
   -webkit-appearance:none;
   cursor:pointer;
 }   
.wrhplayer input[type=range]:focus {
   outline:0;
 }
.wrhplayer input[type=range]::-webkit-slider-runnable-track {
   width:100%;
   height:6px;
   background:rgba(255,255,255,.54);
   margin:0;
   padding:0;
   border:0;
   border-radius:8px;
   cursor:pointer;
   animate:.2s;
 }
.wrhplayer input[type=range]:focus::-webkit-slider-runnable-track {
   background:rgba(255,255,255,.54);
 }
.wrhplayer input[type=range]::-webkit-slider-thumb {
   width:16px;
   height:16px;
   background:#ccc;
   margin-top:-5px;
   border:5px solid #ff6600;
   border-radius:50%;
   cursor:pointer;
   -webkit-appearance:none;
 }   
/** OPCIONES 4 **/
.wrhplayer .left-op4-wpr,.center-op4-wpr,.right-op4-wpr {
   height:52px;
   text-align:center;
   }
.wrhplayer .left-op4-wpr {
   width:54px;
   background:transparent;
   }
.wrhplayer .center-op4-wpr {
   width: calc(100% - 108px);
   background:transparent;
   }
.wrhplayer .right-op4-wpr {
   width:54px;
   background:transparent;
   }
.wrhplayer .ppBtn {
   width:41px;
   height:41px;
   background-position:center center;
   position:relative;
   bottom:0px;
   float:left;
   margin:0 auto;
   border:4px solid rgba(255,255,255,.2);
   border-radius:50%;
   cursor:pointer;
   }
.wrhplayer .ppBtn:before {
   content:"";
   width:35px;
   height:37px;
   background-color:rgba(255,255,255,.54);
   position:absolute;
   top:2px;
   left:3px;
   border-radius:50%;
   transition:background-color ease .5s;
   }
.wrhplayer .ppBtn:hover:before {
   background-color:rgba(255,255,255,.44);
   }
.wrhplayer .play-btn {
   background:url(../img/play.svg) center center no-repeat;
   background-size:32px 32px;
   -webkit-transition:background .5s;
   -moz-transition:background .5s;
   transition:background .5s;
   }
.wrhplayer .stop-btn {
   background:url(../img/pause.svg) center center no-repeat;
   background-size:32px 32px;
   -webkit-transition:background .5s;
   -moz-transition:background .5s;
   transition:background .5s;
   } 
.wrhplayer .track-info-wpr {
   max-width:100%;
   height:25px;
   box-sizing:border-box;color:rgba(255,255,255,1);
   font-size:18px;
   border-left:1px solid rgba(255,255,255,.87);
   border-right:1px solid rgba(255,255,255,.87);
   margin:15px 0px 0 0; /*-- AR DR AB IZ --*/
   }
.wrhplayer .track-info-ctr {
   width: calc(100% - 10px);
   overflow:hidden; 
   margin:0 5px 0 5px; /*-- AR DR AB IZ --*/
   }
.marquee {
   white-space:nowrap;
   position:relative;
   transform:translateX(-50%);
   display:inline-block;
   left:50%;
   padding-top:0;
   animation:linear infinite;
   overflow:hidden;
   text-align:left;
   animation-duration:10s;
   animation-name:
   movement-smooth;
   animation-direction:normal;
  }
.marquee:hover {
   animation-play-state:paused;
   }
.marquee.marquee-speed-custom:before {
   animation-duration:inherit;
   }
.marquee.marquee-speed-normal:before {
   animation-duration:10s;
   }
.marquee.marquee-movement-smooth:before {
   animation-name:movement-smooth;
   }
.marquee.marquee-direction-left:before,.marquee.marquee-direction-normal:before {
   animation-direction:normal;
   }  
@keyframes movement-smooth {
   from {
   transform:translateX(0);
   left:100%;
 } to { transform:translateX(-100%);left:0; }
} 
.wrhplayer .album-cover-wpr {
   }
.wrhplayer .album-cover {
   width:50px;
   height:50px;
   background:url(../img/logo.png);
   margin:0 auto; 
   margin-top:1px;
   }