body {
    transition: padding-bottom 300ms;
}

body.player-enabled {
    padding-bottom: 49px;
}

body.player-enabled #player {
    bottom: 0;
    opacity: 1;
}

.browserupgrade {
    margin: .2em 0;
    background: #ccc;
    color: #000;
    padding: .2em 0;
}

.ttp {
    background: #373a3c;
    border-radius: 50%;
    display: inline-block;
    height: 20px;
    margin: 0 5px -4px 0;
    width: 20px;
    position: relative;
}

.ttp:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
    background: #373a3c url(images/icon/player/play.svg) 50% no-repeat;
    background-size: contain;
}

.ttp.playing:before {
    background-image: url(images/icon/player/pause.svg);
}

#player {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #21272b;
    bottom: -49px;
    box-shadow: 0 -1px 0 0 black;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 48px;
    left: 50%;
    padding: 4px 32px 0;
    max-width: 1680px;
    opacity: 0;
    position: fixed;
    transform: translateX(-50%);
    -webkit-transition: bottom 300ms;
    transition: bottom 300ms;
    width: 100%;
    z-index: 4;
}

#player .controls {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 130px;
}

#player .controls a {
    cursor: pointer;
    height: 16px;
    opacity: .75;
    width: 16px;
}

#player .controls a:hover {
    opacity: 1;
}

#player .controls a.disabled {
    cursor: default;
    opacity: .15
}

#player .controls .prev {
    background-image: url(images/icon/player/prev.svg);
}

#player .controls .playpause {
    background-image: url(images/icon/player/play.svg);
    background-position: center center;
    background-repeat: no-repeat;
}

#player .controls .playpause.playing {
    background-image: url(images/icon/player/pause.svg)
}

#player .controls .next {
    background-image: url(images/icon/player/next.svg)
}

#player .waveform {
    cursor: pointer;
    height: 4px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(78, 249, 248, .25);
}

#player .waveform .timeBar {
    background: #4ef9f8;
    height: 2px;
    left: 0;
    position: absolute;
    -webkit-transition: width .3s linear;
    top: 1px;
    transition: width .3s linear;
    width: 0;
    z-index: 1;
}

#player .waveform .hoverTimeBar {
    background: rgba(255, 255, 255, .15);
    height: 4px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 0;
    z-index: 0;
}

#player .waveform:hover .hoverTimeBar {
    opacity: 1;
}

#player .waveform .duration {
    color: white;
    font-size: 12px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(13px);
}

#player .info {
    margin-left: 32px;
    margin-right: 32px;
    width: auto;
}

#player .info .flex {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    font-size: 12px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 0;
    text-align: center;
}

#player .info .title,
#player .info .next-title {
    color: white;
    font-size: 12px;
    white-space: nowrap;
}

#player .info .next-title {
    opacity: .35;
}

#player .info .close {
    display: none;
}