/*-------------- AUDIO PLAYER --------------*/
.audio-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-transition: 3s all ease;
    -o-transition: 3s all ease;
    transition: 3s all ease; }
.audio-player a,
.audio-player a:hover {
    text-decoration: none; }
.audio-player.is_hidden {
    top: 100%; }
.audio-player.is_hidden .hide_player {
    bottom: 100%; }
.audio-player:hover .hide_player {
    bottom: 100%; }

.hide_player {
    position: absolute;
    bottom: -25px;
    right: 0;
    background: #333;
    color: #CCC;
    padding: 6px 10px;
    line-height: 1;
    display: inline-block;
    text-transform: uppercase;
    font-size: 12px;
    -webkit-transition: 0.3s all ease;
    -o-transition: 0.3s all ease;
    transition: 0.3s all ease; }
.hide_player:hover {
    color: #FFF; }
.hide_player:active, .hide_player:focus {
    color: #CCC; }

.touchevents .hide_player {
    bottom: 100% !important; }

.no-flexbox .audio-player {
    display: none; }

.flex-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }

.jp-controls.flex-item {
    -ms-flex-preferred-size: 150px;
    flex-basis: 150px; }

.jp-progress-container.flex-item {
    -ms-flex-preferred-size: 350px;
    flex-basis: 350px;
    -webkit-box-flex: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;
    -ms-flex-negative: 2;
    flex-shrink: 2; }

.jp-now-playing.flex-item {
    -ms-flex-preferred-size: 145px;
    flex-basis: 145px; }

.jp-toggles.flex-item {
    -ms-flex-preferred-size: 130px;
    flex-basis: 130px; }

.jp-volume-controls.flex-item {
    -ms-flex-preferred-size: 155px;
    flex-basis: 155px; }

.jp-audio,
.jp-audio-stream,
.jp-video {
    background: rgba(0, 0, 0, 0.95);
    padding: 15px;
    position: relative; }

/*Controls*/
.jp-playlist {
    display: none; }

.jp-interface .jp-controls button,
.jp-interface .jp-toggles button,
.jp-interface .jp-volume-controls button {
    background: none;
    border: none;
    outline: none;
    color: #7b7c8b;
    line-height: 24px;
    font-weight: 600;
    -webkit-transition-delay: 0;
    -o-transition-delay: 0;
    transition-delay: 0;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-property: all;
    transition-property: all;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    font-size: 20px;
    padding: 0 5px; }

.jp-interface .jp-controls .jp-play i,
.jp-interface .jp-controls .jp-previous i,
.jp-interface .jp-controls .jp-next i {
    font-size: 23px;
    color: #FFF; }

.jp-interface .jp-controls .jp-play {
    border: solid 3px #FFF;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    margin: 0 10px; }

.jp-interface .jp-controls .jp-play i {
    padding-left: 5px;
    padding-top: 5px; }

.jp-audio.jp-state-playing .jp-play i {
    padding-left: 0px; }

.jp-audio.jp-state-playing .jp-play i:before {
    content: "\f04c" !important; }

/*Progress bars*/
.jp-progress-container,
.jp-volume-bar-container {
    height: 30px;
    padding: 10px; }

.jp-progress,
.jp-seek-bar,
.jp-play-bar,
.jp-volume-bar,
.jp-volume-bar-value {
    height: 8px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px; }

.jp-progress {
    margin: 0 50px;
    background-color: #2b2b2b;
    border-radius: 5px; }

.jp-seek-bar,
.jp-volume-bar {
    cursor: pointer;
    background-color: #2b2b2b;
    border-radius: 5px; }

.jp-play-bar {
    float: left;
    position: relative;
    background-color: #ff4530;
    border-radius: 5px;
    overflow: visible !important; }

.jp-volume-bar-value {
    float: left;
    position: relative;
    background-color: #aaaaaa; }

.jp-progress .bullet,
.jp-volume-bar .bullet {
    position: absolute;
    content: "";
    top: -5px;
    right: -7px;
    height: 18px;
    width: 18px;
    background: #ffffff;
    border-radius: 50%; }

.jp-time-holder {
    position: relative;
    top: 0;
    color: #979797;
    font-size: 12px; }

.jp-time-holder .jp-current-time {
    position: absolute;
    left: 0;
    top: -3px; }

.jp-time-holder .jp-duration {
    position: absolute;
    right: 0;
    top: -3px; }

/* Track & Artist */
.jp-now-playing {
    padding: 0 10px; }

.jp-track-name {
    color: #c9c9c9;
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    max-width: 145px; }

.jp-artist-name {
    color: #6d6d6d;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    max-width: 140px; }

/* Toggles */
.jp-toggles button {
    margin: 0 3px; }

.jp-toggles button:hover {
    color: #FFF; }

.jp-state-looped .jp-toggles .jp-repeat,
.jp-state-shuffled .jp-toggles .jp-shuffle,
.jp-interface .jp-toggles .playlist-is-visible.jp-show-playlist {
    color: #00c85f; }

/* Volume Controls */
.jp-volume-controls button {
    float: left; }

.jp-volume-controls .jp-volume-bar {
    margin-left: 40px;
    margin-top: 8px; }

.jp-state-muted .jp-mute i:before {
    content: "\f026" !important; }

.jp-volume-bar,
.jp-volume-bar-value {
    border-radius: 5px; }

.jp-state-no-volume .jp-volume-controls {
    display: none; }

/* Playlist  */
.jp-playlist {
    position: absolute;
    right: 65px;
    bottom: 100%;
    background: rgba(0, 0, 0, 0.8);
    padding: 20px 25px;
    width: 400px; }

.jp-playlist ul {
    padding: 0;
    margin: 0;
    max-height: 200px;
    overflow: auto; }

.jp-playlist li {
    list-style: none; }

.jp-playlist li a {
    color: #c9c9c9;
    display: block;
    padding: 10px 0;
    outline: none;
    border-bottom: 1px solid #1F1F1F; }

.jp-playlist li:last-child a {
    border-bottom: 0; }

.jp-playlist li a:hover,
.jp-playlist li a:focus,
.jp-playlist li a:active {
    color: #00c85f;
    text-decoration: none; }

.jp-playlist li a span {
    color: #6d6d6d; }

/* ==================== Media Query ==================== */
@media (max-width: 992px) {
    .jp-now-playing {
        display: none; } }

@media (max-width: 767px) {
    .jp-volume-bar,
    .jp-volume-bar .bullet,
    .jp-time-holder {
        display: none !important; }
    .jp-progress-container.flex-item {
        -ms-flex-preferred-size: 140px;
        flex-basis: 140px;
        padding: 12px 15px; }
    .jp-progress .bullet {
        right: -10px; }
    .jp-volume-controls.flex-item {
        -ms-flex-preferred-size: 33px;
        flex-basis: 33px; }
    .jp-progress {
        margin: 0; }
    .jp-interface .jp-controls .jp-play {
        margin: 0 3px; }
    .jp-interface .jp-controls .jp-play i,
    .jp-interface .jp-controls .jp-previous i,
    .jp-interface .jp-controls .jp-next i {
        font-size: 16px; }
    .jp-interface .jp-controls .jp-play {
        width: 42px;
        height: 42px; }
    .jp-interface .jp-controls .jp-play i {
        padding-left: 3px;
        padding-top: 0; }
    .jp-state-playing .jp-interface .jp-controls .jp-play i {
        padding-left: 0; }
    .jp-controls.flex-item {
        -ms-flex-preferred-size: 100px;
        flex-basis: 100px; } }

@media (max-width: 480px) {
    .jp-toggles,
    .jp-playlist {
        display: none !important; } }