@import url(https://fonts.googleapis.com/css?family=Open+Sans:100,400,300,600,700);html{background:#383B44}.jAudio,.jAudio *{padding:0;margin:0;box-sizing:border-box;outline:0;font-family:"Open Sans";color:#888;font-weight:100}.jAudio{display:table;overflow:hidden;background:#fff;box-shadow:0 0 5px rgba(0,0,0,.8)

;margin:10px auto;width:322px}.jAudio:after{content:" ";display:block;width:100%;clear:both}.jAudio--ui{position:relative;width:100%}.jAudio--status-bar{width:100%;z-index:1;position:relative;padding:100px 2rem 2rem;display:table}.jAudio--status-bar:after{content:" ";display:block;width:100%;clear:both}.jAudio--controls{width:100%;background:#FFC30;display:table}.jAudio--controls:after{content:" ";display:block;width:100%;clear:both}

.jAudio--controls ul{display:table;overflow:hidden;width:100%}.jAudio--controls ul:after{content:" ";display:block;width:100%;clear:both}.jAudio--controls li{position:relative;width:33.3333%;height:5rem;line-height:15rem;float:left;list-style:none}.jAudio--control{overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100%;background:0;border:0}.jAudio--control span{position:absolute;display:table;height:1px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);overflow:hidden}.jAudio--control span:after,.jAudio--control span:before{display:block;content:" ";height:0;float:left;border-color:transparent;border-style:solid}.jAudio--control:active{background:#f5f5f5}.jAudio--control-next span:after,.jAudio--control-next span:before,.jAudio--control-play span:after,.jAudio--control-play span:before,.jAudio--control-prev span:after,.jAudio--control-prev span:before{border-top:7.5px solid transparent;border-bottom:7.5px solid transparent}

.jAudio--control-prev span:after,.jAudio--control-prev span:before{border-right:15px solid #FFC300;border-left:0}.jAudio--control-prev:active span:after,.jAudio--control-prev:active span:before{border-right-color:#F66!important}.jAudio--control-next span:after,.jAudio--control-next span:before{border-left:15px solid #FFC300;border-right:0}.jAudio--control-next:active span:after,.jAudio--control-next:active span:before{border-left-color:#F66!important}.jAudio--control-play span:before{border-left:15px solid #FFC300;border-right:0}.jAudio--control-play span:after{display:none}.jAudio--control-play.active span:before,.jAudio--control-play:active span:before{border-left-color:#F66!important}.jAudio--control-pause span:after,.jAudio--control-pause span:before{width:5px;height:15px;background:#F66;border:0}.jAudio--control-pause span:before{margin-right:5px}.jAudio--control-pause span.active:after,.jAudio--control-pause span.active:before,.jAudio--control-pause span:active:after,.jAudio--control-pause span:active:before{background:#fff;margin-right:5px}.jAudio--thumb{position:absolute;top:0;left:0;height:100%;width:100%;background-size:cover;background-position:center center}.jAudio--time{display:table;width:100%}.jAudio--time:after{content:" ";display:block;width:100%;clear:both}.jAudio--time *{width:50%;display:block;float:left;color:#fff;text-shadow:0 1px 1px #000;font-size:.9rem}.jAudio--time-elapsed{text-align:left}.jAudio--time-total{text-align:right}.jAudio--details *{color:#FFC300;text-shadow:0 1px 1px #000;font-size:1.2rem}.jAudio--details :first-of-type{font-weight:700}.jAudio--details p{width:100%}.jAudio--details p span{display:block}

.jAudio--progress-bar{margin:1.33333rem 0}.jAudio--progress-bar-wrapper{width:100%;position:relative;background:rgba(255,255,255,.3);cursor:pointer;border-radius:10px;overflow:hidden}

.jAudio--progress-bar-played{height:10px;background: black;position:relative;border-radius:10px}

.jAudio--progress-bar-pointer{height:10px;width:10px;border-radius:50%;position:absolute;right:0;background:#200640}.jAudio--playlist{background:#fff}.jAudio--playlist-item{width:100%;padding:1.33333rem 2rem;display:table}.jAudio--playlist-item:after{content:" ";display:block;width:100%;clear:both}.jAudio--playlist-item.active{background:#AA00FF;border-bottom-color:#f55c5c}.jAudio--playlist-item.active *{color:#fff}.jAudio--playlist-item:not(.active):hover{background:#fafafa}.jAudio--playlist-item:last-of-type{border:0;margin-bottom:0}.jAudio--playlist-thumb{float:left;margin-right:.66667rem;display:table}.jAudio--playlist-thumb:after{content:" ";display:block;width:100%;clear:both}.jAudio--playlist-thumb img{height:2.4rem;width:2.4rem;border-radius:50%;float:left;margin-right:.5rem}.jAudio--playlist-meta-track-name{font-size:1rem;color:#000}.jAudio--playlist-meta-track-artist{font-size:.8rem}.jAudio--controls li button span:after,.jAudio--controls li button span:before{-webkit-transition:border-color .3s ease 0s;transition:border-color .3s ease 0s}.jAudio--thumb{-webkit-transition:all .5s ease 0s;transition:all .5s ease 0s}.jAudio--progress-bar-played{-webkit-transition:all .2s ease 0s;transition:all .2s ease 0s}.jAudio--playlist-item{-webkit-transition:all .5s ease 0s;transition:all .5s ease 0s}.jAudio--playlist-item *{-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}