.music{display:block;height:50px;margin:10px auto 5px;position:relative;width:320px}#ap span{color:#000}.ap{background:#f2f2f2;border-top:1px solid #ccc;bottom:0;box-shadow:0 -1px 10px #0000001a;font-family:inherit;font-size:14px;height:50px;position:absolute;-webkit-user-select:none;user-select:none;width:100%;z-index:2}.ap__inner{display:flex;margin:auto;max-width:1440px}.ap__item{align-items:center;display:flex;flex:1;justify-content:center}.ap__item--playback>.ap__controls,.ap__item--settings>.ap__controls{flex:0 25%}@keyframes fs{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.ap__item--track{flex:1 40%;padding:0 20px}.track{align-self:flex-start;padding:5px 0 0;position:relative;width:100%}.track__title{display:none;overflow:hidden;padding-right:80px;position:absolute;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}.track__time{position:absolute;right:0;top:5px}.progress-container{cursor:pointer;margin-top:15px;overflow:hidden;padding:7px 0;position:relative}.progress-container:hover .progress__bar:after{opacity:1}.progress{background:#ddd;border-radius:3px;height:3px}.progress__bar,.progress__preload{border-radius:3px 0 0 3px;height:3px;position:absolute;width:0}.progress__bar{background:#4682b4;z-index:1}.progress__bar:after{background:#4682b4;border-radius:6px;content:"";height:10px;margin-top:-3px;opacity:0;position:absolute;right:-10px;top:0;transition:opacity .3s;width:10px}.progress__bar--active:after{transform:scale(1.4)}.progress__preload{background:#c4c4c4;z-index:0}.ap button,.ap__controls{background:#0000;border:0;cursor:pointer;display:block;height:50px;margin:0;outline:0;padding:0;position:relative;text-align:center;transition:background .3s}.ap button:active,.ap__controls:active{background:#0000001a}.ap button:hover,.ap__controls:hover{opacity:1}.icon-play>path{transition:.3s}.is-playing .icon-play{fill:#4682b4}.volume-btn{display:block;text-align:center;width:100%}.volume{background:#f2f2f2;border:1px solid #ccc;border-radius:1px;bottom:45px;height:120px;left:50%;margin-left:-20px;opacity:0;position:absolute;transform:translateY(10px);transition:.3s cubic-bezier(.17,.72,.26,1.23);visibility:hidden;width:40px;z-index:2}.volume:after,.volume:before{border:7px solid #0000;border-top-color:#f2f2f2;bottom:-12px;content:"";left:50%;margin-left:-7px;position:absolute}.volume:after{border-top:7px solid #ccc;bottom:-14px;z-index:-1}.volume-container:hover .volume{opacity:1;transform:translateY(0);visibility:visible}.volume__track{background:#ddd;border-radius:3px;display:block;height:100px;margin:10px auto;overflow:hidden;position:relative;width:3px}.volume__bar{background:#4682b4;bottom:0;height:50%;left:0;position:absolute;right:0}.has-muted .icon-volume-on,.icon-volume-off{display:none}.has-muted .icon-volume-off{display:inline;opacity:.7}.ap__controls.is-active>svg{fill:#4682b4;filter:drop-shadow(0 0 3px rgba(70,130,180,.4))}.pl-container{background:#fff;bottom:0;display:none;font-family:inherit;font-size:14px;overflow:auto;position:absolute;width:100%;z-index:1}.pl-ul{margin:0 auto;max-height:300px;max-width:550px;overflow:scroll;padding:15px 10px 55px;width:100%}.pl-list{align-items:center;display:flex;height:40px;line-height:40px}.pl-list svg{fill:#4682b4}.pl-list+.pl-list{border-top:1px solid #eee}.pl-list:not(.pl-list--current):hover{background:#f6f6f6}.pl-list__remove,.pl-list__track{flex:0 50px;text-align:center}.pl-list__icon{border-bottom:5px solid #0000;border-left:8px solid #555;border-top:5px solid #0000;display:inline-block;height:0;width:0}.pl-list__title{cursor:pointer;flex:1;overflow:hidden;padding-right:10px;text-align:left;text-overflow:ellipsis;white-space:nowrap}.pl-list__remove{background:#0000;border:0;cursor:pointer;height:100%;opacity:0;outline:0;transition:opacity .2s}.pl-list__remove>svg{height:16px;width:16px}.pl-list__eq{display:none}.pl-list--current{background:#4682b4;color:#fff}.pl-list--current svg{fill:#fff}.pl-list--current .pl-list__eq{display:block}.pl-list--current .pl-list__icon{display:none}.pl-list--current .pl-list__remove,.pl-list:hover .pl-list__remove{opacity:1}.pl-list--current .pl-list__remove:hover{background:#3f75a2}.pl-list--empty{color:#ccc;font-size:2rem;left:50%;letter-spacing:2px;position:absolute;top:50%;transform:translate(-50%,-50%)}@keyframes eq{0%,to{height:3px}50%{height:20px}}.eq{align-items:flex-end;display:flex;height:20px;justify-content:space-between;margin:0 auto;width:20px}.eq__bar{background:#fff;filter:drop-shadow(0 0 5px #fff);width:4px}.eq__bar:first-child{animation:.8s ease-in-out infinite eq}.eq__bar:nth-child(2){animation:.8s ease-in-out .2s infinite eq}.eq__bar:nth-child(3){animation:.8s ease-in-out .4s infinite eq}.h-hide{display:none}.h-show{display:block}@media(max-width:1024px){.ap__item>.ap__controls{flex:1}}@media screen and (max-width:680px){.music{height:106px}}@media(max-width:580px){.ap{min-width:250px}.ap,.ap__inner{height:auto}.ap__inner{flex-wrap:wrap}.ap__item--track{flex:1 1 100%;margin-bottom:10px;order:1;padding:0 20px}.ap__item--playback,.ap__item--settings{flex:1 1 50%;order:2}}
/*# sourceMappingURL=player-html5.css.map */