.jAudio, .jAudio * { padding: 0; margin: 0; box-sizing: border-box; outline: none; font-family: "Open Sans"; color: #888; font-weight: 100; }

.jAudio { display: table; overflow: hidden; margin: 10px auto; width: 100%; }
.jAudio:after { content: " "; display: block; width: 100%; clear: both; }
.jAudio--ui { position: relative; width: 100%; padding: 50px 0px 0px 0px; float: left; }
.jAudio--status-bar { width: 100%; z-index: 1; position: relative; padding: 1rem 1rem 1rem 1rem; display: table; background:#000; }
.jAudio--status-bar:after { content: " "; display: block; width: 100%; clear: both; }
.jAudio--controls { width: 30%; margin: auto; background: #fafafa; 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: 5rem; float: left; list-style: none; }
.jAudio--control { position: relative; overflow: hidden; position: absolute; top: 0; left: 0; width: 50%; height: 60%; border: 0; background: #000; border-radius:50%; }

.jAudio--control span { position: absolute; display: table; height: 15px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); overflow: hidden; }
.jAudio--control span:before, .jAudio--control span:after { display: block; content: " "; height: 0; float: left; border-color: transparent; border-style: solid; }
.jAudio--control:active { background: #f5f5f5; }
.jAudio--control-prev span:before, .jAudio--control-prev span:after, .jAudio--control-next span:before, .jAudio--control-next span:after, .jAudio--control-play span:before, .jAudio--control-play span:after { border-top: 7.5px solid transparent; border-bottom: 7.5px solid transparent; }
.jAudio--control-prev span:before, .jAudio--control-prev span:after { border-right: 15px solid #777; border-left: 0; }
.jAudio--control-prev:active span:before, .jAudio--control-prev:active span:after { border-right-color: #005E9B !important; }
.jAudio--control-next span:before, .jAudio--control-next span:after { border-left: 15px solid #777; border-right: 0; }
.jAudio--control-next:active span:before, .jAudio--control-next:active span:after { border-left-color: #005E9B !important; }
.jAudio--control-play span:before { border-left: 15px solid #777; 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: #005E9B !important; }
.jAudio--control-pause span:before, .jAudio--control-pause span:after { width: 5px; height: 15px; background: #005E9B; border: 0; }
.jAudio--control-pause span:before { margin-right: 5px; }
.jAudio--control-pause span:active:before, .jAudio--control-pause span:active:after, .jAudio--control-pause span.active:before, .jAudio--control-pause span.active:after { background: #fff; margin-right: 5px; }
.jAudio--thumb { position: absolute; top: 0; left: 0; height: 70%; 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: #09F; text-shadow: 0 1px 1px #000; font-size: 0.9rem; }
.jAudio--time-elapsed { text-align: left; }
.jAudio--time-total { text-align: right; }
.jAudio--details * { color: #fff; text-shadow: 0 1px 1px #000; font-size: 1.2rem; }
.jAudio--details *:first-of-type { font-weight: bold; }
.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, 0.3); cursor: pointer; border-radius: 10px; overflow: hidden; }
.jAudio--progress-bar-played { height: 10px; background: #005E9B; position: relative; border-radius: 10px; }
.jAudio--progress-bar-pointer { height: 10px; width: 10px; border-radius: 50%; position: absolute; right: 0; background: #fff; }
.jAudio--playlist { background: #fff; position: relative; display: table; width: 100%; }
.jAudio--playlist-item { display: block; width: 50%; float: left; padding: 1rem 1rem; display: table; }
.jAudio--playlist-item:after { content: " "; display: block; width: 100%; clear: both; }
.jAudio--playlist-item.active { height:20px; background: #005E9B; border-bottom-color: #005E9B; border-radius:50px; }
.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: 0.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: 0.5rem; }
.jAudio--playlist-meta-track-name { font-size: 1rem; color: #000; }
.jAudio--playlist-meta-track-artist { font-size: 0.8rem; }

.jAudio--controls li button span:before, .jAudio--controls li button span:after { -webkit-transition: border-color 0.3s ease 0s; transition: border-color 0.3s ease 0s; }
.jAudio--thumb { -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }
.jAudio--progress-bar-played { -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; }
.jAudio--playlist-item { -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }
.jAudio--playlist-item * { -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }

@media only screen and (max-width: 500px){
    .jAudio--playlist-item { display: block; width: 100%; float: left; padding: 1rem 1rem; display: table; }
	.jAudio--control { width: 100%; height: 60%; border: 0; background: #000; border-radius:50%; }
	.jAudio--controls { width: 50%; margin: auto; background: #fafafa; display: table; }
}