/*
  Cascading style sheets for "(C) 2018 Prisa Radio - playertop_desktop.css http://www.prisa.com
  - Diego Sarmiento <dsarmiento@grupolatinoderadio.com> 14-12-2018
*/
/* PLAYER - definicion base ====================================================================================================================== */
.no-desktop {display: none !important;}
.on-tablet {display: block !important;}
.playertop {font: 12px/18px "proxima_nova", Helvetica, Helvetica Neue, Arial; margin: 0 auto; position: relative; background: #191e23; color: #fff;}
.playertop .playertop-inner {padding: 0 41px 0 227px; box-shadow: -1px -2px 5px 0 rgba(0, 0, 0, 0.3);}
.playertop,
.playertop .playertop-inner {height: 100px;}
.playertop .control {width: 204px; padding-left: 10px; float: left; margin: 14px 0 0; height: 72px; border-right: 1px solid #232323; position: absolute; top: 0; left: 0;}
.playertop .play {height: 71px; width: 71px;border-radius: 50%; margin-top: -3px; position: relative; float: left; cursor: pointer;}
.playertop .play .loading {background-color: #191e22; position: absolute; z-index: 10; left: 0; top: 0; bottom: 0; right: 0; margin: auto; border-radius: 100%;}
.playertop .play .contenedor_punto {transform: rotate(45deg); animation: loadingPlayer 1.5s ease-in-out infinite; -webkit-animation: loadingPlayer 1.5s ease-in-out infinite;}
.playertop .play .loading,
.playertop .play .contenedor_punto {width: 40px; height: 40px; }
.playertop .play .punto {width: 6px; height: 6px; background-color: #232323; border-radius: 100%;}
@keyframes loadingPlayer {from {transform: rotate(45deg);} to {transform: rotate(400deg);}}
@-webkit-keyframes loadingPlayer {from {transform: rotate(45deg);} to {transform: rotate(400deg);}}
.playertop .play .ico {width: 36px; height: 36px; text-align: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}
.playertop .play .ico span {font-size: 22px; line-height: 71px; display: block; height: 71px; width: 71px; margin: -18px 0 0 -18px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.playertop .play .ico .icon-play{background-image: url(/iconos/v2.x/v2.0/icn_play.svg);background-repeat: no-repeat;background-size: cover;padding-left: 5px; width: 67px;height: 67px;}
.playertop .play .ico .icon-pause {color: #ffffff;background-image: url(/iconos/v2.x/v2.0/icn_stop.svg);background-repeat: no-repeat;background-size: cover;}
.icon-play:before, .icon-pause:before, .playertop .play .ico .icon-play.oculto, .playertop .play .ico .icon-pause.oculto {display:none!important;}
.playertop .control .label {display: block; height: 34px; line-height: 41px; font-size: 15px; font-weight: 700; text-transform: uppercase; margin-left: 16px; float: left;display: none;}
.playertop .control .volume {margin-left: 12px; margin-top: 15px;height: 36px; width: 90px; float: left;}
.playertop .volume .ico {width: 34px; height: 34px; background: #bf0000; border-radius: 50%; behavior: url(lib/pie/PIE.htc); position:relative; float: left; text-align: center; cursor: pointer;}
.playertop .volume .ico span {line-height: 35px; font-size: 15px; display: block; height: 34px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.playertop .volume .slider {width: 56px; margin-top: 16px; background: #000; float: left; position: relative; cursor: pointer;}
.playertop .volume .value {position: absolute; left: 0; top: 0; background: #bf0000; width: 0;}
.playertop .volume .capturadora {position: absolute; top: -8px; left: 0; z-index: 10; width: 100%; height: 20px;}
.playertop .play:hover .ico,
.playertop .play:focus .ico {color: #bf0000;}
.playertop .play:hover .ico .icon-pause,
.playertop .play:focus .ico .icon-pause {color: #fff;}
.playertop .volume .ico:hover,
.playertop .volume .ico:focus {opacity: 0.8;}
.playertop .info {float: left; width: 100%; padding-top: 14px; position: relative; }
.playertop .info .programa {height: 34px; line-height: 41px; text-transform: uppercase; padding: 0 0 0 147px; position: relative; margin-left: 10px;}
.playertop .info .titulo {font-size: 15px; font-weight: 700; color: #fff; width: 100%; white-space: nowrap; display: block; position: relative}
.playertop .info .titulo em {font-style: normal; position: absolute; top: 0; left: -147px; display: block; }
.playertop .info .titulo a {display: none;}
.playertop .info .titulo span,
.playertop .info .titulo span a {color: #232323; display: block; position: relative; overflow: hidden; text-decoration: none; }
.playertop .info .titulo span a:hover,
.playertop .info .titulo span a:focus {opacity: 0.7;}
.playertop .info .emisora {display: none; position: relative; left: 0; top: 3px;}
.playertop .info .emisora .nombre {line-height: 24px; height: 22px; background: #14181b; border: 4px solid #14181b; display: block; float: left; padding: 0 9px 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase }
.playertop .info .emisora .conf {line-height: 10px; height: 22px; box-sizing: content-box; background: #bf0000; border: 4px solid #14181b; display: block; float: left; padding: 0 5px; font-size: 12px; color: #fff; }
.playertop .info .emisora .conf:hover,
.playertop .info .emisora .conf:focus {opacity: 0.7;}
.playertop .info .emisora .conf span {vertical-align: middle}
.playertop .info .emisora .conf span[class*="icon"] {font-size: 14px}

/* capa configuracion emisora */

.playertop .info .conf-emisora {position: absolute; top: 0; left: 0; width: 100%; z-index: 15; }
.playertop .info .conf-emisora .inner-conf {height: 30px; background: #bf0000; padding: 0 125px 0 120px  }
.playertop .info .label {position: absolute; left: 0; line-height: 30px; width: 114px; color: #232323; font-size: 12px; padding: 0 0 0 10px; border-right: 1px solid #14181b; }
.playertop .info .select {width: 50%; float: left; overflow: hidden; background: transparent url('../img/select-azul.png') right center no-repeat; height: 30px; }
.playertop .info .select select {display: block; width: 120%; height: 30px; padding: 0 0 0 8px; border: 0; border-right: 1px solid #14181b; background: url('../img/dot-trans.png'); color: #000; font-weight: 700;} 
.playertop .info .select select:selection  {background: #232323; color: #fff;}
.playertop .info .select option { padding: 3px 0 3px 8px; background-color: #bf0000; color: #000;}
.playertop .info .control-conf {position: absolute; right: 0; line-height: 28px; width: 120px; color: #fff; font-size: 14px; padding: 0 0 0 5px; }
.playertop .info .control-conf .btn-secundary  { height: 24px; line-height: 23px; margin-top: 2px; font-size: 12px; font-weight: 700; padding: 0 15px; text-transform: uppercase }
.playertop .info .control-conf .btn-secundary:hover,
.playertop .info .control-conf .btn-secundary:focus  {background: #191e23; color: #fff;}
.playertop .info .control-conf .close {top: 1px; right: -2px; color: #fff;}

/* capa enviar por correo */

.form-mail {position: absolute; top: 20px; left: 0; width: 100%; background: #bf0000; height: 62px; z-index: 15; padding-right: 31px; display: none;}   
.form-mail .form-mail-inner {padding: 4px 100px 0 140px; }
.form-mail .txt {position: absolute; top: 4px; left: 10px; width: 130px; text-transform: uppercase; font-size: 12px; line-height: 27px }
.form-mail .action {position: absolute; top: 4px; right: 33px; width: 86px} 
.form-mail .action .btn {line-height: 24px; height: 25px; background: #fff; color: #bf0000; font-weight: 700; text-transform: uppercase}
.form-mail .action .btn:hover,
.form-mail .action .btn:focus {background: #191e23; color: #fff;}
.form-mail input,
.form-mail textarea {height: 25px; line-height: 16px; border: 0; margin-bottom: 4px; display: block; padding: 0 4px; width: 100%; box-sizing: border-box; font-weight: 600;}
.form-mail textarea {padding-top: 4px; font-size: 13px;}
.form-mail .close {line-height: 33px; background: #b2b2b2; color: #fff; top: 0; right: 0; }

/* embed */

.playertop ul li button .icon-embed {font-size: 18px; line-height: 28px; background: #232323 none repeat scroll 0 0}
.embed {width: 100%; background: #bf0000; height: 30px; position: absolute; bottom: -3px; left: 0; padding-right: 30px; z-index: 15; display: none;}
.a-la-carta .embed {bottom: 2px;}
.embed .inner-embed {height: 30px; background:  #b2b2b2; padding: 0 134px 0 120px  }
.playertop .info .embed .control-conf {width: 159px;}
.embed .code {display: block; width: 50%; float: left; overflow: hidden; height: 30px; box-sizing: border-box; background: transparent; border: 0; padding-left: 5px; font: 11px/26px "Courier New", Courier, monospace;}
.playertop .share .icon-whatsapp {font-size: 18px; line-height: 22px;}
.playertop .info .titulo span.fade {display: block; width: 30px; height: 30px; position: absolute; top: 6px; right: 0;
                               background: -moz-linear-gradient(left, rgba(25,30,34,0) 0%, rgba(25,30,34,0.99) 99%, rgba(25,30,34,1) 100%); 
                               background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(25,30,34,0)), color-stop(99%,rgba(25,30,34,0.99)), color-stop(100%,rgba(25,30,34,1))); 
                               background: -webkit-linear-gradient(left, rgba(25,30,34,0) 0%,rgba(25,30,34,0.99) 99%,rgba(25,30,34,1) 100%);
                               background: -o-linear-gradient(left, rgba(25,30,34,0) 0%,rgba(25,30,34,0.99) 99%,rgba(25,30,34,1) 100%); 
                               background: -ms-linear-gradient(left, rgba(25,30,34,0) 0%,rgba(25,30,34,0.99) 99%,rgba(25,30,34,1) 100%); 
                               background: linear-gradient(to right, rgba(25,30,34,0) 0%,rgba(25,30,34,0.99) 99%,rgba(25,30,34,1) 100%); 
                               filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00191e22', endColorstr='#191e22',GradientType=1 ); 
}


/* track */

.playertop .info .track-wrapper {display: none; position: relative; padding: 7px 65px 9px 55px; margin-left: 10px; height: 19px; overflow: hidden; font-size: 12px; }
.playertop .info span[class*="-time"] {position: absolute; width: 55px; color: #666; line-height: 18px; top: 9px;  }
.playertop .info .current-time {left: 0; }
.playertop .info span.total-time {right: 0;}
.playertop .info .track {position: relative; background: #000; margin: 9px 0; cursor: pointer; }
.playertop .info .track .played {position: absolute; top: 0; left: 0; background: #bf0000; z-index: 2}
.playertop .info .track .loaded {position: absolute; top: 0; left: 0; background: #404040; z-index: 1}
.playertop .volume .dot,
.playertop .info .track .dot {position: absolute; z-index: 11; border-radius: 50%; behavior: url(lib/pie/PIE.htc); background: #bf0000; width: 10px; height: 10px; top: -5px; box-shadow: 0 0 0 2px rgba(25, 30, 34, 0.4); cursor: pointer;
transition: background-color 0.3s, box-shadow 0.3s;}
.playertop .volume .dot:hover,
.playertop .volume .dot:focus,
.playertop .info .track .dot:hover,
.playertop .info .track .dot:focus {box-shadow: 0 0 0 2px rgba(0, 159, 255, 1); background: #fff;}
.playertop .volume .slider,
.playertop .volume .value,
.playertop .info .track,
.playertop .info .track .played,
.playertop .info .track .loaded {height: 3px;}
.playertop .info .track .capturadora {position: absolute; top: -9px; left: 0; z-index: 10; width: 100%; height: 21px;}

/* modo en-directo */

.playertop.en-directo .emisora {display: block;}

/* modo a-la-carta */

.playertop.a-la-carta .track-wrapper {display: block;}

/* compartir en playertop */

.share {position: absolute; z-index: 14; top: 0; right: 0; width: 40px; height: 61px; padding-top: 20px;}
.share [class*="icon-"] {font-size: 14px; line-height: 18px; display: block;}
.share ul {width: 30px;}
.share li {position: relative; display: block; margin-bottom: 1px;}
.share button {display: block; background: #232323; border: 0; color: #fff;}
.share button:hover span,
.share button:focus span {opacity: 0.7;}
.share li,
.share button {width: 34px; height: 34px; padding: 0;}
.share ul ul {position: absolute; z-index: 4; top: 0; right: 33px; white-space: nowrap; width: 58px;}
.share ul ul li {display: inline-block; margin-right: -2px; text-align: center}
.share ul ul button {color: #fff; background: #14181b; padding: 0;}
.share .redes .prim {display: inline-block;}
.share .redes .sec {display: none;}
.share .redes .sec button {background: #232323; color: #fff;}
.share .redes .open-redes {display: block; background: #232323;}
.share .redes .close-redes {display: none; }
.share .redes-active .prim {display: none;}
.share .redes-active .sec {display: block; float: right; width: 40px;}
.share .redes-active .open-redes {display: none;}
.share .redes-active .close-redes {display: block; background-color: #232323; color: #fff; line-height: 30px;}
.share .redes-active ul {width: 111px;}
.share .redes-active ul li {margin-right: -3px;} 
.share .redes-active ul li button {width: 40px;} 
.share .redes-active button .icon-facebook {font-size: 16px; line-height: 20px;}
.share .redes-active button .icon-twitter {font-size: 18px; line-height: 22px;}
.share .redes-active .prim button:hover span,
.share .redes-active .prim button:focus span {color: #fff;}
.share .redes .sec button .icon-mail {font-size: 18px; line-height: 20px;}

/* animacion playertop on */

.ico_sonido {position: absolute; z-index: 4; left: -25px; top: 0; width: 19px; height: 40px;}
.mitad {width: 19px; height: 20px; position: absolute; z-index: 10; left: 0; top: 0;}
.inverso {transform: rotate(180deg); -webkit-transform: rotate(180deg); top: 20px; left: 1px;}
.barra {position: absolute; top: auto; bottom: 0; width: 2px; background-color: rgba(255,255,255,0.2);}

.b_1 {left: 0; height: 4px;}
.b_2 {left: 3px; height: 7px;}
.b_3 {left: 6px; height: 4px;}
.b_4 {left: 9px; height: 6px;}
.b_5 {left: 12px; height: 9px;}
.b_6 {left: 15px; height: 4px;}

.inverso .b_1 {left: 18px;}
.inverso .b_2 {left: 15px;}
.inverso .b_3 {left: 12px;}
.inverso .b_4 {left: 9px;}
.inverso .b_5 {left: 6px;}
.inverso .b_6 {left: 3px;}

.on .barra {background-color: rgba(255,255,255,0.8);}

.on .b_1 {animation: alto_1 3s alternate ease-out infinite; -webkit-animation: alto_1 3s alternate ease-out infinite;}
.on .b_2 {animation: alto_2 0.5s alternate ease-in infinite; -webkit-animation: alto_2 0.5s alternate ease-in infinite;}
.on .b_3 {animation: alto_3 3s alternate ease-in infinite; -webkit-animation: alto_3 3s alternate ease-in infinite;}
.on .b_4 {animation: alto_4 1s alternate ease-in infinite; -webkit-animation: alto_4 1s alternate ease-in infinite;}
.on .b_5 {animation: alto_5 3s alternate ease-in infinite; -webkit-animation: alto_5 3s alternate ease-in infinite;}
.on .b_6 {animation: alto_6 0.5s alternate ease-in infinite; -webkit-animation: alto_6 0.5s alternate ease-in infinite;}

@keyframes alto_1 {
  0% {height: 2px;}
  10% {height: 8px;}
  20% {height: 1px;}
  30% {height: 6px;}
  40% {height: 4px;}
  50% {height: 6px;}
  60% {height: 2px;}
  70% {height: 8px;}
  80% {height: 4px;}
  90% {height: 3px;}
  100% {height: 8px;}
}
@keyframes alto_2 {
  0% {height: 8px;}
  25% {height: 6px;}
  50% {height: 1px;}
  75% {height: 4px;}
  100% {height: 1px;}
}
@keyframes alto_3 {
  0% {height: 7px;}
  25% {height: 2px;}
  50% {height: 8px;}
  75% {height: 1px;}
  100% {height: 3px;}
}
@keyframes alto_4 {
  0% {height: 3px;}
  25% {height: 4px;}
  50% {height: 8px;}
  75% {height: 4px;}
  100% {height: 7px;}
}
@keyframes alto_5 {
  0% {height: 1px;}
  25% {height: 6px;}
  50% {height: 5px;}
  75% {height: 7px;}
  100% {height: 5px;}
}
@keyframes alto_6 {
  0% {height: 2px;}
  25% {height: 7px;}
  50% {height: 5px;}
  75% {height: 8px;}
  100% {height: 5px;}
}
@-webkit-keyframes alto_1 {
  0% {height: 2px;}
  10% {height: 8px;}
  20% {height: 1px;}
  30% {height: 6px;}
  40% {height: 4px;}
  50% {height: 6px;}
  60% {height: 2px;}
  70% {height: 8px;}
  80% {height: 4px;}
  90% {height: 3px;}
  100% {height: 8px;}
}
@-webkit-keyframes alto_2 {
  0% {height: 8px;}
  25% {height: 6px;}
  50% {height: 1px;}
  75% {height: 4px;}
  100% {height: 1px;}
}
@-webkit-keyframes alto_3 {
  0% {height: 7px;}
  25% {height: 2px;}
  50% {height: 8px;}
  75% {height: 1px;}
  100% {height: 3px;}
}
@-webkit-keyframes alto_4 {
  0% {height: 3px;}
  25% {height: 4px;}
  50% {height: 8px;}
  75% {height: 4px;}
  100% {height: 7px;}
}
@-webkit-keyframes alto_5 {
  0% {height: 1px;}
  25% {height: 6px;}
  50% {height: 5px;}
  75% {height: 7px;}
  100% {height: 5px;}
}
@-webkit-keyframes alto_6 {
  0% {height: 2px;}
  25% {height: 7px;}
  50% {height: 5px;}
  75% {height: 8px;}
  100% {height: 5px;}
}

/* PLAYER en touch: hacemos la pelota de arrastre mas grande ============================================================================= */

.playertop-touch .volume .dot,
.playertop-touch .info .track .dot {width: 17px; height: 17px; top: -7px; box-shadow: 0 0 0 8px rgba(0, 159, 255, 0.2); background: #bf0000; transition: none;}

/* PLAYER en ipad: quitamos volumen y rotulo "Esta sonando", y empujamos todo a la izquierda ================================================= */

.playertop-ipad .playertop-inner {padding-left: 105px;}
.playertop-ipad .info .programa {padding-left: 110px;}
.playertop-ipad .info .titulo em,
.playertop-ipad .control .volume {display: none;}
.playertop-ipad .control {border-right: none;}
.playertop-ipad  .info .track-wrapper {margin-left: 0;}

/* PLAYER en iframe de usuario ====================================================================================================================== */

.playertop-embebido .playertop-inner {box-shadow: none;}
.playertop-embebido .info .programa {padding-left: 80px;}
.playertop-embebido .info .titulo em {display: none;}
.playertop-embebido .info .titulo .logo {display: block; position: absolute; height: 20px; width: 45px; top: 0; left: -80px; margin-top: 8px; background: transparent url(../img/logo_cadenaser.svg) no-repeat 0 0/100% auto; text-indent: -9999px; overflow: hidden;}
.playertop-embebido .info .titulo span a {text-indent: 0;}

/* PLAYER en iframe de usuario y en ipad ====================================================================================================================== */

.playertop-ipad.playertop-embebido .info .programa {padding-left: 166px;}

/* Ocultar botones ====================================================================================================================== */

.b-embed_0 .share li.c-emb {display: none!important;}
.b-emisoras_0 .info .emisora .conf {display: none!important;}