@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);

.wrhplayer .player-wpr {
   max-width:100%;
   min-width:260px;
   height:220px;
   font-family:'Roboto Condensed',Arial,sans-serif;
   position:relative;
   border-radius:8px;
   overflow:hidden;
 }

.wrhplayer .player-ctr {
   height:220px;
   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 .album-cover-wpr {
   width:100px;
   margin:0 auto;
   border-radius:8px;
   margin-top:30px;
}

.wrhplayer .album-cover {
   width:100px;
   height:100px;
   background-size:100% 100%;
   position:relative;
   margin:12px auto 0;
   border-radius:8px;
   -webkit-box-shadow:4px 6px 30px 0 rgba(0,0,0,.6);
   -moz-box-shadow:4px 6px 30px 0 rgba(0,0,0,.6);
   box-shadow:4px 6px 30px 0 rgba(0,0,0,.6);
   z-index:2;
 }

.wrhplayer .track-info-wpr {
   max-width:100%;
   height:24px;
   box-sizing:border-box;color:rgba(255,255,255,1);
   font-size:20px;
   position:relative;
   margin:0px 60px 0;
   padding-top:0;
   border-left:1px solid rgba(255,255,255,.87);
   border-right:1px solid rgba(255,255,255,.87);
   z-index:4;
   top:30px;
 }

.wrhplayer .track-info-ctr {
   max-width: calc(100% - 10px);
   height:24px;
   position:relative;
   margin:0 auto;
   overflow:hidden; 
   margin-left:10px; 
   margin-right:10px;
   margin-top:0px;
 }

.wrhplayer .songtitle {
   color:rgba(255,255,255,.7);
   text-shadow: 3px 4px 4px #000000;
 }

.wrhplayer .artist-name,.wrhplayer .servertitle {
   color:rgba(255,255,255,1);
   text-shadow: 3px 4px 4px #000000;
 }

.wrhplayer .servertitle {
   max-width:400px;
   font-size:16px;
   text-shadow:3px 4px 4px #000;
   text-align:center;
   position:absolute;
   left:0;
   right:0;
   bottom:5px;
   margin:0 auto;
 }

.wrhplayer .servertitle2 {
   max-width:400px;
   font-size:20px;
   text-shadow:3px 4px 4px #000;
   text-align: center;
   position:absolute;
   left:0;
   right:0;
   top:5px;
   margin:0 auto; 
   color:rgba(255,255,255,.7);
   text-shadow: 3px 4px 4px #000000;
   z-index:11;
 }

.wrhplayer .listeners {
   max-width:100px;
   font-size:14px;
   color:rgba(255,255,255,.7);
   position:absolute;
   top:32px;
   right:12px;
 }

.wrhplayer .history-artist-name,.wrhplayer .history-songtitle {
   max-width:300px;
   text-overflow:
   ellipsis;
   white-space:nowrap;
   overflow:hidden;
 }

.wrhplayer .listeners:before {
   content:"\f0c0";
   font-size:14px;
   padding-right:6px;
   vertical-align:top;
 }

.wrhplayer .ppBtn {
   width:45px;
   height:45px;
   background-position:center center;
   position:absolute;
   bottom:10px;
   left:0;
   right:0;
   margin:0 auto;
   border:4px solid rgba(255,255,255,.2);
   border-radius:50%;
   cursor:pointer;
 }

.wrhplayer .ppBtn:before {
   content:"";
   width:39px;
   height:41px;
   background-color:rgba(255,255,255,.54);
   position:absolute;
   top:2px;
   left:3px;
   border-radius:50%;
   transition:background-color ease .5s;
 }

.wrhplayer .icons-left,.wrhplayer .icons-right {
   width:24px;
   height:24px;
   font-size:24px;
   color:rgba(255,255,255,.92);
   cursor:pointer;
 }

.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;
 }

/** ICONO IZ REFRESCAR Y HHORARIOS **/

.opciones {
   width:100%;
   height:40px;
   margin-top:-70px;
   background:transparent;
 }

.wrhplayer .actualizar {
   width:40px;
   height:40px;
   float: left;
   margin-left: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
   background:transparent;
 }

.wrhplayer .boton_actualizar {
   width:28px;
   height:28px;
   border-radius:50%;
   background:transparent;
   position:absolute;
   border:4px solid rgba(255,255,255,.2);
   border-radius:50%;
   cursor:pointer;
   background:transparent;
 }

.wrhplayer .boton_actualizar {
   background: url(../img/bot_actualizar.svg) center center no-repeat;
 }

/** ICONO DR VOLUMEN Y HORARIOS **/

.wrhplayer .horarios {
   width:40px;
   height:40px;
   float: right;
   margin-right:10px;
   display: flex;
   justify-content: center;
   align-items: center;
   background:transparent;
 }

.wrhplayer .boton_horario {
   width:28px;
   height:28px;
   border-radius:50%;
   background:transparent;
   position:absolute;
   border:4px solid rgba(255,255,255,.2);
   border-radius:50%;
   cursor:pointer;
   background:transparent;
 }

.wrhplayer .boton_horario {
   background: url(../img/bot_horarios.svg) center center no-repeat;
 }
/**  **/

.wrhplayer .icons-left-wpr {
   position:absolute;
   bottom:5px;
   left:16px;
   z-index:11;
 }

.wrhplayer .icons-right-wpr {
   text-align:left;
   position:absolute;
   bottom:5px;
   right:10px;
   z-index:11;
 }

.wrhplayer .icons-left {
   text-align:center;
   margin-right:28px;
 }

.wrhplayer .icons-right {
   text-align:left;
   margin-left:28px;
 }

.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";
 }

.wrhplayer .volume-slider {
   position:absolute;
   bottom:25px;
   right:5px;
   display:
   none;z-index:10;
 }

.wrhplayer input[type=range] {
   width:90px;
   height:6px;
   background:0 0;
   padding:6px 0;
   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 #fff;
   border-radius:50%;
   cursor:pointer;
   -webkit-appearance:none;
 }

.wrhplayer input[type=range]::-moz-range-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]::-moz-range-thumb {
   width:6px;
   height:6px;
   background:#ccc;
   border:5px solid #fff;
   border-radius:50%;
   cursor:pointer;
 }

@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){
.wrhplayer input[type=range] {
   width:90px;
   height:16px;
   background:0 0;
   margin-top:0;
   padding:6px 0;
   cursor:pointer;
 }
}

.wrhplayer input[type=range]::-ms-tooltip {
   display:none;
 }

.wrhplayer input[type=range]::-ms-track {
   width:100%;
   height:6px;
   background:0 0;color:transparent;
   margin:0;
   padding:0;
   border:0 transparent;
   cursor:pointer;
   animate:.2s;
 }

.wrhplayer input[type=range]::-ms-fill-lower {
   background:rgba(255,255,255,.54);
   border:0;
   border-radius:8px;
 }

.wrhplayer input[type=range]::-ms-fill-upper {
   background:rgba(255,255,255,.54);
   border:0;
   border-radius:8px;
 }

.wrhplayer input[type=range]::-ms-thumb {
   width:6px;
   height:6px;
   background:#ccc;
   border:5px solid #fff;
   border-radius:50%;
   cursor:pointer;
 }

.wrhplayer input[type=range]:focus::-ms-fill-lower {
   background:rgba(255,255,255,.54);
 }

.wrhplayer input[type=range]:focus::-ms-fill-upper {
   background:rgba(255,255,255,.54);
 }

.wrhplayer .history-wpr {
   position:absolute;
   top:0;
   left:0;
   right:0;
   margin:22px auto 0;
   z-index:5;
 }

.wrhplayer .history-title {
   font-size:20px;
   color:rgba(255,255,255,1);
   margin:0 22px 5px;
   padding-bottom:5px;
   border-bottom:1px solid rgba(255,255,255,.7);
 }

.wrhplayer .row-wpr {
   height:44px;
   background-color:rgba(255,255,255,.2);
   position:relative;
   margin:0 22px 5px;
   border-radius:5px;
 }

.wrhplayer .history-cover {
   width:35px;
   height:35px;
   position:absolute;
   top:6px;
   left:8px;
   border-radius:50%;
 }

.wrhplayer .history-track-info {
   text-align:left;
   padding-left:55px;
   padding-top:5px;
 }

.wrhplayer .history-songtitle {
   font-size:16px;
   color:rgba(255,255,255,1);
 }

.wrhplayer .history-artist-name {
   font-size:16px;
   color:rgba(255,255,255,.7);
 }

.wrhplayer .rowNum {
   width:38px;
   height:50px;
   font-size:32px;
   color:rgba(255,255,255,.2);
   text-align:center;
   position:absolute;
   top:0;
   right:0;
 }

.wrhplayer .social-share-wpr {
   width:210px;
   height:210px;
   box-sizing:border-box;
   background-color:rgba(0,0,0,.3);
   color:#fff;
   font-size:18px;
   line-height:30px;
   text-align:center;
   position:absolute;
   top:22px;
   right:0;
   left:0;
   margin:0 auto;
   padding:70px 0;
   border-radius:4px;
   overflow:hidden;
   display:none;
   z-index:11;
 }

.wrhplayer .social-link {
   width:38px;
   height:38px;
   font-size:24px;
   color:#fff;
   line-height:38px;
   text-decoration:none;
   margin:0 4px;
   border-radius:50%;
   display:inline-block;
   cursor:pointer;
 }

.wrhplayer .social-link-facebook {
   background:#3F51B5;
 }
.wrhplayer .social-link-facebook:before {
   content:"\f09a";
 }
.wrhplayer .social-link-twitter {
   background:#2196F3;
 }
.wrhplayer .social-link-twitter:before {
   content:"\f099";
 }
.wrhplayer .display {
   display:block;
 }
.wrhplayer .nodisplay {
   display:none;
 }

@media only screen and (max-width:600px){.wrhplayer .track-info-wpr { margin:0px 10px 0; }
.wrhplayer .listeners {
   max-width:100px;
   font-size:12px;
   color:rgba(255,255,255,.7);
   position:absolute;
   top:32px;
   right:8px;
 }
.wrhplayer .listeners:before {
   content:"\f0c0";
   font-size:12px;
   padding-right:5px;
   vertical-align:top;
 }
}

.animated {
   animation-duration:1s;
   animation-fill-mode:both;
 }

.animated.bounceIn {
   animation-duration:.75s;
 }

@keyframes bounceIn {
   20%,40%,60%,80%,from,to {
   animation-timing-function:cubic-bezier(.215,.61,.355,1);
 }
   0%  { opacity:0;transform:scale3d(.3,.3,.3); }
   20% { transform:scale3d(1.1,1.1,1.1); }
   40% { transform:scale3d(.9,.9,.9); }
   60% { opacity:1;transform:scale3d(1.03,1.03,1.03); }
   80% { transform:scale3d(.97,.97,.97); }
   to  { opacity:1;transform:scale3d(1,1,1); }
}

.bounceIn {
   animation-name:bounceIn;
 }

@keyframes bounceInDown {
   60%,75%,90%,from,to {
   animation-timing-function:cubic-bezier(.215,.61,.355,1);
 }
   0%  { opacity:0;transform:translate3d(0,-3000px,0); }
   60% { opacity:1;transform:translate3d(0,25px,0); }
   75% { transform:translate3d(0,-10px,0); }
   90% { transform:translate3d(0,5px,0); }
   to  { transform:none; }
}

.bounceInDown {
   animation-name:bounceInDown;
 }

.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;
 }

@keyframes movement-smooth {
   from {
   transform:translateX(0);
   left:100%;
 } to { transform:translateX(-100%);left:0; }
}

.marquee.marquee-movement-smooth:before {
   animation-name:movement-smooth;
 }

.marquee.marquee-direction-left:before,.marquee.marquee-direction-normal:before {
   animation-direction:normal;
 }