/* >> reset */
html, body, div, span, h1, p, a, ol, li, audio {
    border: 0;
    font: inherit;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

ol li {
    margin: 0;
    list-style: decimal outside;
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    padding: 5px 0;
    background: #111 none;
    font: 20px/24px 'Helvetica', 'Arial', sans-serif;
    color: #eee;
}

a, a:focus, a:active, a:hover, a:visited {
    text-decoration: none;
}

a[href], a[href]:active, a[href]:visited {
    color: #ddd;
    outline: 0 none;
    text-decoration: none;
    display: block;
    padding: 5px 5px 5px 0;
    text-transform: capitalize;
}

a[href]:hover, a[href]:focus {
    color: #bbb;
}

/* << reset */

/* page style */
.page {
    position: relative;
    margin: 0 auto;
    width: 70%;
    min-width: 300px;
    max-width: 700px;
    overflow: hidden;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Audio Player */
.player-wrap {
    position: relative;
    margin: 0 0 1em;
    padding: 0;
    background-color: #222;
}

.player-wrap.enabled {
    padding-bottom: 4em;
}


.player-wrap .button {
    float: left;
    display: none;
    margin: 1.5em 2em;
    width: 5rem;
    height: 5rem;
    line-height: 5rem;
    background-color: #333;
    text-align: center;
    border-radius: 25%;
    vertical-align: middle;
}

.player-wrap .button:hover {
    background-color: #444;
    cursor: pointer;
}

.player-wrap.enabled .button {
    display: block;
}

.button .fa {
    width: 5rem;
    height: 5rem;
    line-height: 5rem;
    display: block;
}

.button .fa::before {
    width: 5rem;
    height: 5rem;
    line-height: 5rem;
    display: block;
    font-size: 3em;
}

.player-wrap .info {
    margin-left: 10em;
}

.player-wrap h1 {
    padding: 1.5em 0;
}

.player-wrap .action {
    font-style: italic;
}

.player-wrap .player {
    position: absolute;
    display: none;
    left: 0;
    bottom: 0;
    padding: 0 1em 0 6em;
    width: 100%;
    height: 1em;
    background-color: #333;
    font-size: 2em;
    box-sizing: border-box;
}

.player-wrap.enabled .player {
    display: block;
}

.player-wrap .player svg {
    margin: .25em;
    width: .5em;
    height: .5em;
    fill: currentColor;
}

.player-wrap .player div {
    display: block;
    height: 1em;
}

.player-wrap audio,
.player-wrap .player .pause {
    display: none;
}

.player-wrap .playpause, .player-wrap .timer,
.player-wrap .prev, .player-wrap .next {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    height: 1em;
    line-height: 1em;
    vertical-align: top;
    text-align: center;
}

.player-wrap .playpause,
.player-wrap .prev, .player-wrap .next {
    width: 1em;
    cursor: pointer;
}

.player-wrap .playpause {
    left: 1em;
}

.player-wrap .next {
    left: auto;
    right: 0;
}

.player-wrap .playpause:hover,
.player-wrap .prev:hover, .player-wrap .next:hover {
    background-color: #444;
}

.player-wrap .playpause, .player-wrap .play, .player-wrap .pause,
.player-wrap .prev::-moz-focus-inner,
.player-wrap .next::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.player-wrap .timer {
    left: 2em;
    width: 4em;
}

.player-wrap .timer div {
    display: inline-block;
    height: 100%;
    vertical-align: top;
    font-size: .45em;
}

.player-wrap .seek {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.playlist-wrap {
    background-color: #222;
    margin-bottom: 100px;
}

.playlist-wrap li {
    margin: 0 0 0 2em;
    padding: .25em 0 .25em .5em;
    list-style: decimal outside;
}

.playlist-wrap li.sel {
    background-color: #333;
}

.playlist-wrap li:hover {
    background-color: #444;
}

/* >> input[type=range] class: seek */
input.seek[type=range] {
    box-sizing: border-box;
    background-color: transparent;
    vertical-align: top;
    font-size: 1em;
    -webkit-appearance: none;
}

input.seek[type=range]:focus {
    outline: none;
}

input.seek[type=range]::-webkit-slider-runnable-track {
    box-sizing: border-box;
    width: 98%;
    height: .17em;
    background-color: #eee;
    cursor: pointer;
    border-radius: .1em;
    transition: all .2s ease;
}

input.seek[type=range]::-webkit-slider-thumb {
    box-sizing: border-box;
    width: .17em;
    height: .7em;
    margin-top: -.27em;
    border-radius: .1em;
    background-color: #eee;
    cursor: pointer;
    -webkit-appearance: none;
}

input.seek[type=range]:focus::-webkit-slider-runnable-track {
    background-color: #eee;
}

input.seek[type=range]::-moz-range-track {
    box-sizing: border-box;
    border: 0 solid #eee;
    width: 98%;
    height: .17em;
    background-color: #eee;
    cursor: pointer;
    border-radius: .1em;
    transition: all .2s ease;
}

input.seek[type=range]::-moz-range-thumb {
    box-sizing: border-box;
    border: 0 solid #eee;
    width: .17em;
    height: .7em;
    background-color: #eee;
    cursor: pointer;
    border-radius: .1em;
}

input.seek[type=range]::-ms-track {
    box-sizing: border-box;
    border: 0 none;
    width: 98%;
    height: .17em;
    background-color: transparent;
    color: transparent;
    cursor: pointer;
    transition: all .2s ease;
}

input.seek[type=range]::-ms-fill-lower {
    background-color: #eee;
    border-radius: .1em;
}

input.seek[type=range]::-ms-fill-upper {
    background-color: #eee;
    border-radius: .1em;
}

input.seek[type=range]::-ms-thumb {
    margin-top: -.01em;
    box-sizing: border-box;
    width: .17em;
    height: .7em;
    background-color: #eee;
    cursor: pointer;
    border-radius: .1em;
}

input.seek[type=range]:focus::-ms-fill-lower {
    background-color: #eee;
}

input.seek[type=range]:focus::-ms-fill-upper {
    background-color: #eee;
}


.back-to-playlist {

    padding: 20px !important;
    width: 200px;
    display: block;
    text-align: center;
    margin: 50px auto;
    background-color: #222;
}