.icon {
    display: inline-block;
    width: 2em;
    height: 2em;
    font-size: 30px;
    fill: #d7dce2;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}


.player,
.player__album:before,
.player__play svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.player.play .player__timeline {
    -webkit-transform: translateY(-90%);
    -ms-transform: translateY(-90%);
    transform: translateY(-90%)
}

.player.play .player__album:after {
    -webkit-box-shadow: 0 30px 28px -10px rgba(0, 0, 0, .2);
    box-shadow: 0 30px 28px -10px rgba(0, 0, 0, .2)
}

.player.play .player__album {
    top: -65px
}

.player.play .pause {
    display: inline-block
}

.player.play .play {
    display: none
}

.player__album {
    width: 112px;
    height: 112px;
    margin-right: 22px;
    position: relative;
    top: -50px;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.player__album:before {
    content: '';
    width: 25px;
    height: 25px;
    z-index: 3;
    background: #fff
}

.player__album,
.player__album:after,
.player__album:before,
.player__albumImg {
    -webkit-border-radius: 50%;
    border-radius: 50%
}

.player__album:after {
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: absolute
}

.player__albumImg {
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    display: none
}

.player__albumImg.active-song {
    display: block
}

.player__bar,
.player__controls,
.player__play,
.player__prev {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.player__bar {
    background: #fff;
    /* padding: 10px 25px; */
    height: 100px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: 0 30px 56px 6px rgba(0, 0, 0, .1);
    box-shadow: 0 30px 56px 6px rgba(0, 0, 0, .1);
    position: relative;
    z-index: 3
}

.player__controls,
.player__play,
.player__prev {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.player__play,
.player__prev {
    cursor: pointer;
    height: 80px;
    width: 80px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    margin-right: 3px
}

.player__prev {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.player__next:hover,
.player__play:hover,
.player__prev:hover {
    background: #d7dce2
}

.player__play:hover svg,
.player__prev:hover svg {
    fill: #fff
}

.player__play {
    position: relative
}

.player__play svg {
    font-size: 20px
}

.player__play svg.pause {
    display: none
}

.player__next,
.player__play,
.player__timeline {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.player__next {
    cursor: pointer;
    width: 80px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    margin-left: -8px;
    height: 80px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.player__next:hover svg {
    fill: #fff
}

.player__timeline {
    background: #fff6fb;
    height: 95px;
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    /* left: -35px;
    right: -156px; */
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    z-index: 1;
    padding-left: 160px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.player #playhead,
.player__timeline,
.player__timelineBar {
    -webkit-border-radius: 15px;
    border-radius: 15px
}

.player__timelineBar {
    background: #e7e7e7;
    margin-top: 13px;
    width: 95%;
    /* height: 4px; */
    position: relative
}

.player #playhead {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #fd6d94
}

.player__author {
    line-height: 1;
    font-weight: 700;
    margin-bottom: 6px;
    margin-top: 15px
}

.player__song {
    line-height: 1;
    margin: 0;
    font-size: 12px;
    color: #949494
}


/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1haW4uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QkEsSyxDQUNDLG9CLENBQ0EsUyxDQUNBLFUsQ0FDQSxjLENBQ0EsWSxDQUNBLHNDLENBQUEsaUMsQ0FBQSw4QixDQUdELEksQ0FBQSxJLENBQ0MsVyxDQUdELEksQ0FDQyxrQixDQUNBLGlCLENBR0QsTyxDQXNCRSxxQixDQStFQSxpQixDQXBHRCxpQixDQUNBLE8sQ0FDQSxRLENBQ0Esc0MsQ0FBQSxrQyxDQUFBLDhCLENBSkQsOEIsQ0FPRyxrQyxDQUFBLDhCLENBQUEsMEIsQ0FQSCxpQyxDQVVHLG1ELENBQUEsMkMsQ0FWSCwyQixDQWFHLFMsQ0FiSCxtQixDQWdCRyxvQixDQWhCSCxrQixDQW1CRyxZLENBR0YsYyxDQUNDLFcsQ0FDQSxZLENBRUEsaUIsQ0FDQSxpQixDQUNBLFMsQ0FDQSxzQyxDQUFBLGlDLENBQUEsOEIsQ0FQQSxxQixDQVNDLFUsQ0FDQSxVLENBQ0EsVyxDQUVBLFMsQ0FJQSxlLENBakJGLGMsQ0FBQyxvQixDQUFBLHFCLENBZ0NELGlCLENBTUMseUIsQ0FBQSxpQixDQXRDQSxvQixDQXFCQyxVLENBRUEsSyxDQUNBLE8sQ0FDQSxRLENBQ0EsTSxDQUVBLHVCLENBQUEsZSxDQUNBLHNDLENBQUEsaUMsQ0FBQSw4QixDQVBBLGlCLENBVUYsaUIsQ0FDQyw2QixDQUFBLHFCLENBQ0EsMEIsQ0FDQSwyQixDQUNBLFUsQ0FDQSxXLENBRUEsaUIsQ0FDQSxTLENBQ0EsWSxDQVRBLDZCLENBV0MsYSxDQUdGLFksQ0FXQSxpQixDQXNCQSxhLENBbEJBLGEsQ0FIQyxtQixDQUFBLG9CLENBQUEsbUIsQ0FBQSxZLENBWkQsWSxDQUNDLGUsQ0FDQSxpQixDQUNBLFksQ0FFQSx3QixDQUFBLHFDLENBQUEscUIsQ0FBQSw2QixDQUNBLDBCLENBQUEsa0IsQ0FDQSxpRCxDQUFBLHlDLENBQ0EsaUIsQ0FDQSxTLENBRUQsaUIsQ0FzQkEsYSxDQWxCQSxhLENBRkMsd0IsQ0FBQSwwQixDQUFBLHFCLENBQUEsa0IsQ0FvQkQsYSxDQWxCQSxhLENBbUJDLGMsQ0FDQSxXLENBQ0EsVSxDQUlBLDBCLENBQUEsa0IsQ0FDQSxzQyxDQUFBLGlDLENBQUEsOEIsQ0FDQSxnQixDQTNCRCxhLENBQ0MsZ0MsQ0FBQSw0QixDQUFBLHdCLENBSUEsdUIsQ0FBQSw4QixDQUFBLG9CLENBQUEsc0IsQ0F5Q0EsbUIsQ0E1QkEsbUIsQ0FsQkEsbUIsQ0FZQyxrQixDQU1ELHVCLENBbEJBLHVCLENBY0UsUyxDQUlILGEsQ0FVQyxpQixDQVZBLGlCLENBa0JDLGMsQ0FsQkQsdUIsQ0F3QkUsWSxDQUlILGEsQ0E1QkEsYSxDQTZDQSxpQixDQWFDLHVCLENBQUEsOEIsQ0FBQSxvQixDQUFBLHNCLENBOUJELGEsQ0FDQyxjLENBRUEsVSxDQUNBLG1CLENBQUEsb0IsQ0FBQSxtQixDQUFBLFksQ0FFQSx3QixDQUFBLDBCLENBQUEscUIsQ0FBQSxrQixDQUNBLDBCLENBQUEsa0IsQ0FFQSxnQixDQVBBLFcsQ0FNQSxzQyxDQUFBLGlDLENBQUEsOEIsQ0FSQSx1QixDQWFFLFMsQ0FJSCxpQixDQUNDLGtCLENBQ0EsVyxDQUVBLGlCLENBQ0EsUSxDQUNBLFMsQ0FDQSxVLENBQ0EsK0IsQ0FBQSwyQixDQUFBLHVCLENBQ0Esc0MsQ0FBQSxpQyxDQUFBLDhCLENBQ0EsUyxDQUNBLGtCLENBQ0EsMkIsQ0FBQSw0QixDQUFBLDZCLENBQUEseUIsQ0FBQSxxQixDQTlKRixpQixDQWtKQyxpQixDQWVBLG9CLENBWUMsMEIsQ0FBQSxrQixDQVpELG9CLENBQ0Msa0IsQ0FJQSxlLENBSEEsUyxDQUNBLFUsQ0FHQSxpQixDQXZLRixpQixDQTBLRSxpQixDQUNBLEssQ0FDQSxNLENBRUEsTyxDQUNBLFcsQ0FDQSxrQixDQUVELGUsQ0FDQyxhLENBQ0EsZSxDQUNBLGlCLENBQ0EsZSxDQUVELGEsQ0FDQyxhLENBQ0EsUSxDQUNBLGMsQ0FDQSxhIiwiZmlsZSI6Im1haW4uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGNoYXJzZXQgXCJVVEYtOFwiO1xyXG5cclxuQGltcG9ydCAnbWl4aW5zJztcclxuXHJcbi8qKiogTUlYSU5TIFVTQUdFICoqKlxyXG5cclxuXHRAaW5jbHVkZSBmb250LWZhY2UoXCJmb250TmFtZVwiLCBcIi4uL2ZvbnRzL2ZvbnRQYXRoL2ZvbnROYW1lXCIsIG5vcm1hbCk7IFxyXG5cclxuXHRAaW5jbHVkZSB4cygxMik7XHJcblx0QGluY2x1ZGUgc20oMTIpO1xyXG5cdEBpbmNsdWRlIG1kKDEyKTtcclxuXHRAaW5jbHVkZSBsZygxMik7XHJcblxyXG5cdEBpbmNsdWRlIHIoNzY4KTtcclxuXHRAaW5jbHVkZSBybWluKDc2OCk7XHJcblxyXG5cdEBpbmNsdWRlIHRyYW5zIC8gdHJhbnMoJHdoYXQgJGR1ciAkZWFzaW5nKTtcclxuXHRAaW5jbHVkZSBjb3ZlcjtcclxuXHJcblx0QGluY2x1ZGUgY2VudGVyWCAvIGNlbnRlclhhXHJcblx0QGluY2x1ZGUgY2VudGVyWSAvIGNlbnRlcllhXHJcblxyXG5cdEBpbmNsdWRlIG92ZXJsYXkoJG9wYWNpdHkpXHJcbioqKi9cclxuXHJcbi5pY29uIHtcclxuXHRkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XHJcblx0d2lkdGg6IDJlbTtcclxuXHRoZWlnaHQ6IDJlbTtcclxuXHRmb250LXNpemU6IDMwcHg7XHJcblx0ZmlsbDogI0Q3RENFMjtcclxuXHR0cmFuc2l0aW9uOiBhbGwgLjJzIGVhc2UtaW4tb3V0O1xyXG59XHJcblxyXG5odG1sLCBib2R5IHtcclxuXHRoZWlnaHQ6IDEwMCU7XHJcbn1cclxuXHJcbmJvZHkge1xyXG5cdGJhY2tncm91bmQ6ICNmZmVmZjU7XHJcblx0cG9zaXRpb246IHJlbGF0aXZlO1xyXG59XHJcblxyXG4ucGxheWVyIHtcclxuXHRwb3NpdGlvbjogYWJzb2x1dGU7XHJcblx0dG9wOiA1MCU7XHJcblx0bGVmdDogNTAlO1xyXG5cdHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIC01MCUpO1xyXG5cdCYucGxheSB7XHJcblx0XHQucGxheWVyX190aW1lbGluZSB7XHJcblx0XHRcdHRyYW5zZm9ybTogdHJhbnNsYXRlWSgtOTAlKTtcclxuXHRcdH1cclxuXHRcdC5wbGF5ZXJfX2FsYnVtOmFmdGVyIHtcclxuXHRcdFx0Ym94LXNoYWRvdzogMHB4IDMwcHggMjhweCAtMTBweCByZ2JhKDAsMCwwLC4yKTtcclxuXHRcdH1cclxuXHRcdC5wbGF5ZXJfX2FsYnVtIHtcclxuXHRcdFx0dG9wOiAtNjVweDtcclxuXHRcdH1cclxuXHRcdC5wYXVzZSB7XHJcblx0XHRcdGRpc3BsYXk6IGlubGluZS1ibG9jaztcclxuXHRcdH1cclxuXHRcdC5wbGF5IHtcclxuXHRcdFx0ZGlzcGxheTogbm9uZTtcclxuXHRcdH1cclxuXHR9XHJcblx0Jl9fYWxidW0ge1xyXG5cdFx0d2lkdGg6IDExMnB4O1xyXG5cdFx0aGVpZ2h0OiAxMTJweDtcdFx0XHJcblx0XHRib3JkZXItcmFkaXVzOiA1MCU7XHJcblx0XHRtYXJnaW4tcmlnaHQ6IDIycHg7XHJcblx0XHRwb3NpdGlvbjogcmVsYXRpdmU7XHJcblx0XHR0b3A6IC01MHB4O1xyXG5cdFx0dHJhbnNpdGlvbjogYWxsIC40cyBlYXNlLWluLW91dDtcclxuXHRcdCY6YmVmb3JlIHtcclxuXHRcdFx0Y29udGVudDogJyc7XHJcblx0XHRcdHdpZHRoOiAyNXB4O1xyXG5cdFx0XHRoZWlnaHQ6IDI1cHg7XHJcblx0XHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuXHRcdFx0ei1pbmRleDogMztcclxuXHRcdFx0dG9wOiA1MCU7XHJcblx0XHRcdGxlZnQ6IDUwJTtcclxuXHRcdFx0dHJhbnNmb3JtOiB0cmFuc2xhdGUoLTUwJSwgLTUwJSk7XHJcblx0XHRcdGJhY2tncm91bmQ6ICNmZmY7XHJcblx0XHRcdGJvcmRlci1yYWRpdXM6IDUwJTtcclxuXHRcdH1cclxuXHRcdCY6YWZ0ZXIge1xyXG5cdFx0XHRjb250ZW50OiAnJztcclxuXHRcdFx0cG9zaXRpb246IGFic29sdXRlO1xyXG5cdFx0XHR0b3A6IDA7XHJcblx0XHRcdHJpZ2h0OiAwO1xyXG5cdFx0XHRib3R0b206IDA7XHJcblx0XHRcdGxlZnQ6IDA7XHJcblx0XHRcdGJvcmRlci1yYWRpdXM6IDUwJTtcclxuXHRcdFx0Ym94LXNoYWRvdzogbm9uZTtcclxuXHRcdFx0dHJhbnNpdGlvbjogYWxsIC4zcyBlYXNlLWluLW91dDtcclxuXHRcdH1cclxuXHR9XHJcblx0Jl9fYWxidW1JbWcge1xyXG5cdFx0YmFja2dyb3VuZC1zaXplOiBjb3ZlcjtcclxuXHRcdGJhY2tncm91bmQtcG9zaXRpb246IGNlbnRlcjtcclxuXHRcdGJhY2tncm91bmQtcmVwZWF0OiBuby1yZXBlYXQ7XHJcblx0XHR3aWR0aDogMTAwJTtcclxuXHRcdGhlaWdodDogMTAwJTtcclxuXHRcdGJvcmRlci1yYWRpdXM6IDUwJTtcclxuXHRcdHBvc2l0aW9uOiByZWxhdGl2ZTtcclxuXHRcdHotaW5kZXg6IDI7XHJcblx0XHRkaXNwbGF5OiBub25lO1xyXG5cdFx0Ji5hY3RpdmUtc29uZyB7XHJcblx0XHRcdGRpc3BsYXk6IGJsb2NrO1xyXG5cdFx0fVxyXG5cdH1cclxuXHQmX19iYXIge1xyXG5cdFx0YmFja2dyb3VuZDogI2ZmZjtcclxuXHRcdHBhZGRpbmc6IDEwcHggMjVweDtcclxuXHRcdGhlaWdodDogMTAwcHg7XHJcblx0XHRkaXNwbGF5OiBmbGV4O1xyXG5cdFx0anVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xyXG5cdFx0Ym9yZGVyLXJhZGl1czogMTVweDtcclxuXHRcdGJveC1zaGFkb3c6IDAgMzBweCA1NnB4IDZweCByZ2JhKDAsMCwwLDAuMSk7XHJcblx0XHRwb3NpdGlvbjogcmVsYXRpdmU7XHJcblx0XHR6LWluZGV4OiAzO1xyXG5cdH1cclxuXHQmX19jb250cm9scyB7XHJcblx0XHRkaXNwbGF5OiBmbGV4O1xyXG5cdFx0YWxpZ24taXRlbXM6IGNlbnRlcjtcclxuXHR9XHJcblx0Jl9fcHJldiB7XHJcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpO1xyXG5cdFx0aGVpZ2h0OiA4MHB4O1xyXG5cdFx0d2lkdGg6IDgwcHg7XHJcblx0XHRkaXNwbGF5OiBmbGV4O1xyXG5cdFx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XHJcblx0XHRhbGlnbi1pdGVtczogY2VudGVyO1xyXG5cdFx0Y3Vyc29yOiBwb2ludGVyO1xyXG5cdFx0Ym9yZGVyLXJhZGl1czogMTVweDtcclxuXHRcdHRyYW5zaXRpb246IGFsbCAuMnMgZWFzZS1pbi1vdXQ7XHJcblx0XHRtYXJnaW4tcmlnaHQ6IDNweDtcclxuXHRcdCY6aG92ZXIge1xyXG5cdFx0XHRiYWNrZ3JvdW5kOiAjRDdEQ0UyO1xyXG5cdFx0XHRzdmcge1xyXG5cdFx0XHRcdGZpbGw6ICNmZmY7XHJcblx0XHRcdH1cclxuXHRcdH1cclxuXHR9XHJcblx0Jl9fcGxheSB7XHJcblx0XHRjdXJzb3I6IHBvaW50ZXI7XHJcblx0XHRoZWlnaHQ6IDgwcHg7XHJcblx0XHR3aWR0aDogODBweDtcclxuXHRcdGRpc3BsYXk6IGZsZXg7XHJcblx0XHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcclxuXHRcdGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcblx0XHRib3JkZXItcmFkaXVzOiAxNXB4O1xyXG5cdFx0dHJhbnNpdGlvbjogYWxsIC4ycyBlYXNlLWluLW91dDtcclxuXHRcdG1hcmdpbi1yaWdodDogM3B4O1x0XHRcclxuXHRcdHBvc2l0aW9uOiByZWxhdGl2ZTtcclxuXHRcdCY6aG92ZXIge1xyXG5cdFx0XHRiYWNrZ3JvdW5kOiAjRDdEQ0UyO1xyXG5cdFx0XHRzdmcge1xyXG5cdFx0XHRcdGZpbGw6ICNmZmY7XHJcblx0XHRcdH1cclxuXHRcdH1cclxuXHRcdHN2ZyB7XHJcblx0XHRcdGZvbnQtc2l6ZTogMjBweDtcclxuXHRcdFx0cG9zaXRpb246IGFic29sdXRlO1xyXG5cdFx0XHR0b3A6IDUwJTtcclxuXHRcdFx0bGVmdDogNTAlO1xyXG5cdFx0XHR0cmFuc2Zvcm06IHRyYW5zbGF0ZSgtNTAlLCAtNTAlKTtcclxuXHRcdFx0Ji5wYXVzZSB7XHJcblx0XHRcdFx0ZGlzcGxheTogbm9uZTtcclxuXHRcdFx0fVxyXG5cdFx0fVxyXG5cdH1cclxuXHQmX19uZXh0IHtcclxuXHRcdGN1cnNvcjogcG9pbnRlcjtcclxuXHRcdGhlaWdodDogODBweDtcclxuXHRcdHdpZHRoOiA4MHB4O1xyXG5cdFx0ZGlzcGxheTogZmxleDtcclxuXHRcdGp1c3RpZnktY29udGVudDogY2VudGVyO1xyXG5cdFx0YWxpZ24taXRlbXM6IGNlbnRlcjtcclxuXHRcdGJvcmRlci1yYWRpdXM6IDE1cHg7XHJcblx0XHR0cmFuc2l0aW9uOiBhbGwgLjJzIGVhc2UtaW4tb3V0O1xyXG5cdFx0bWFyZ2luLWxlZnQ6IC04cHg7XHJcblx0XHQmOmhvdmVyIHtcclxuXHRcdFx0YmFja2dyb3VuZDogI0Q3RENFMjtcclxuXHRcdFx0c3ZnIHtcclxuXHRcdFx0XHRmaWxsOiAjZmZmO1xyXG5cdFx0XHR9XHJcblx0XHR9XHJcblx0fVxyXG5cdCZfX3RpbWVsaW5lIHtcclxuXHRcdGJhY2tncm91bmQ6ICNmZmY2ZmI7O1xyXG5cdFx0aGVpZ2h0OiA5NXB4O1xyXG5cdFx0Ym9yZGVyLXJhZGl1czogMTVweDtcclxuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuXHRcdGJvdHRvbTogMDtcclxuXHRcdGxlZnQ6IDEwcHg7XHJcblx0XHRyaWdodDogMTBweDtcclxuXHRcdHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwKTtcclxuXHRcdHRyYW5zaXRpb246IGFsbCAuM3MgZWFzZS1pbi1vdXQ7XHJcblx0XHR6LWluZGV4OiAxO1xyXG5cdFx0cGFkZGluZy1sZWZ0OiAxNjBweDtcclxuXHRcdGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XHJcblx0XHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcclxuXHR9XHJcblx0Jl9fdGltZWxpbmVCYXIge1xyXG5cdFx0YmFja2dyb3VuZDogI0U3RTdFNztcclxuXHRcdHdpZHRoOiA5NSU7XHJcblx0XHRoZWlnaHQ6IDRweDtcclxuXHRcdGJvcmRlci1yYWRpdXM6IDE1cHg7XHJcblx0XHRtYXJnaW4tdG9wOiAxM3B4O1xyXG5cdFx0cG9zaXRpb246IHJlbGF0aXZlO1xyXG5cdH1cclxuXHQjcGxheWhlYWQge1xyXG5cdFx0cG9zaXRpb246IGFic29sdXRlO1xyXG5cdFx0dG9wOiAwO1xyXG5cdFx0bGVmdDogMDtcclxuXHRcdGJvcmRlci1yYWRpdXM6IDE1cHg7XHJcblx0XHR3aWR0aDogMDtcclxuXHRcdGhlaWdodDogMTAwJTtcclxuXHRcdGJhY2tncm91bmQ6ICNmZDZkOTQ7XHJcblx0fVxyXG5cdCZfX2F1dGhvciB7XHJcblx0XHRsaW5lLWhlaWdodDogMTtcclxuXHRcdGZvbnQtd2VpZ2h0OiBib2xkO1xyXG5cdFx0bWFyZ2luLWJvdHRvbTogNnB4O1xyXG5cdFx0bWFyZ2luLXRvcDogMTVweDtcclxuXHR9XHJcblx0Jl9fc29uZyB7XHJcblx0XHRsaW5lLWhlaWdodDogMTtcclxuXHRcdG1hcmdpbjogMDtcclxuXHRcdGZvbnQtc2l6ZTogMTJweDtcclxuXHRcdGNvbG9yOiAjOTQ5NDk0O1xyXG5cdH1cclxufVxyXG4iXX0= */




/** 2nd audio */
.player1,
.player__album1:before,
.player__play1 svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.player1.play1 .player__timeline1{
    -webkit-transform: translateY(-90%);
    -ms-transform: translateY(-90%);
    transform: translateY(-90%)
}

.player1.play1 .player__album1:after {
    -webkit-box-shadow: 0 30px 28px -10px rgba(0, 0, 0, .2);
    box-shadow: 0 30px 28px -10px rgba(0, 0, 0, .2)
}

.player1.play1 .player__album1 {
    top: -65px
}

.player1.play1 .pause {
    display: inline-block
}

.player1.play1 .play1 {
    display: none
}

.player__album1 {
    width: 112px;
    height: 112px;
    margin-right: 22px;
    position: relative;
    top: -50px;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.player__album1:before {
    content: '';
    width: 25px;
    height: 25px;
    z-index: 3;
    background: #fff
}

.player__album1,
.player__album1:after,
.player__album1:before,
.player__albumImg1 {
    -webkit-border-radius: 50%;
    border-radius: 50%
}

.player__album1:after {
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: absolute
}

.player__albumImg1 {
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    display: none
}

.player__albumImg1.active-song1 {
    display: block
}

.player__bar1,
.player__controls1,
.player__play1,
.player__prev1 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.player__bar1 {
    background: #fff;
    /* padding: 10px 25px; */
    height: 100px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: 0 30px 56px 6px rgba(0, 0, 0, .1);
    box-shadow: 0 30px 56px 6px rgba(0, 0, 0, .1);
    position: relative;
    z-index: 3
}

.player__controls1,
.player__play1,
.player__prev1 {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.player__play1,
.player__prev1 {
    cursor: pointer;
    height: 80px;
    width: 80px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    margin-right: 3px
}

.player__prev1 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.player__next1:hover,
.player__play1:hover,
.player__prev1:hover {
    background: #d7dce2
}

.player__play1:hover svg,
.player__prev1:hover svg {
    fill: #fff
}

.player__play1 {
    position: relative
}

.player__play1 svg {
    font-size: 20px
}

.player__play1 svg.pause {
    display: none
}

.player__next1,
.player__play1,
.player__timeline1 {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.player__next1 {
    cursor: pointer;
    width: 80px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    margin-left: -8px;
    height: 80px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.player__next1:hover svg {
    fill: #fff
}

.player__timeline1 {
    background: #fff6fb;
    height: 95px;
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    z-index: 1;
    padding-left: 160px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.player1 #playhead1,
.player__timeline1,
.player__timelineBar1 {
    -webkit-border-radius: 15px;
    border-radius: 15px
}

.player__timelineBar1 {
    background: #e7e7e7;
    margin-top: 13px;
    width: 95%;
    /* height: 4px; */
    position: relative
}

.player1 #playhead1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #fd6d94
}

.player__author1 {
    line-height: 1;
    font-weight: 700;
    margin-bottom: 6px;
    margin-top: 15px
}

.player__song1 {
    line-height: 1;
    margin: 0;
    font-size: 12px;
    color: #949494
}


/** 3rd audio */
.player2,
.player__album2:before,
.player__play2 svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.player2.play2 .player__timeline2{
    -webkit-transform: translateY(-90%);
    -ms-transform: translateY(-90%);
    transform: translateY(-90%)
}

.player2.play2 .player__album2:after {
    -webkit-box-shadow: 0 30px 28px -10px rgba(0, 0, 0, .2);
    box-shadow: 0 30px 28px -10px rgba(0, 0, 0, .2)
}

.player2.play2 .player__album2 {
    top: -65px
}

.player2.play2 .pause {
    display: inline-block
}

.player2.play2 .play2 {
    display: none
}

.player__album2 {
    width: 112px;
    height: 112px;
    margin-right: 22px;
    position: relative;
    top: -50px;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.player__album2:before {
    content: '';
    width: 25px;
    height: 25px;
    z-index: 3;
    background: #fff
}

.player__album2,
.player__album2:after,
.player__album2:before,
.player__albumImg2 {
    -webkit-border-radius: 50%;
    border-radius: 50%
}

.player__album2:after {
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: absolute
}

.player__albumImg2 {
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    display: none
}

.player__albumImg2.active-song2 {
    display: block
}

.player__bar2,
.player__controls2,
.player__play2,
.player__prev2 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.player__bar2 {
    background: #fff;
    /* padding: 10px 25px; */
    height: 100px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: 0 30px 56px 6px rgba(0, 0, 0, .1);
    box-shadow: 0 30px 56px 6px rgba(0, 0, 0, .1);
    position: relative;
    z-index: 3
}

.player__controls2,
.player__play2,
.player__prev2 {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.player__play2,
.player__prev2 {
    cursor: pointer;
    height: 80px;
    width: 80px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    margin-right: 3px
}

.player__prev2 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.player__next2:hover,
.player__play2:hover,
.player__prev2:hover {
    background: #d7dce2
}

.player__play2:hover svg,
.player__prev2:hover svg {
    fill: #fff
}

.player__play2 {
    position: relative
}

.player__play2 svg {
    font-size: 20px
}

.player__play2 svg.pause {
    display: none
}

.player__next2,
.player__play2,
.player__timeline2 {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.player__next2 {
    cursor: pointer;
    width: 80px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    margin-left: -8px;
    height: 80px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.player__next2:hover svg {
    fill: #fff
}

.player__timeline2 {
    background: #fff6fb;
    height: 95px;
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    z-index: 1;
    padding-left: 160px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.player2 #playhead2,
.player__timeline2,
.player__timelineBar2 {
    -webkit-border-radius: 15px;
    border-radius: 15px
}

.player__timelineBar2 {
    background: #e7e7e7;
    margin-top: 13px;
    width: 95%;
    /* height: 4px; */
    position: relative
}

.player2 #playhead2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #fd6d94
}

.player__author2 {
    line-height: 1;
    font-weight: 700;
    margin-bottom: 6px;
    margin-top: 15px
}

.player__song2 {
    line-height: 1;
    margin: 0;
    font-size: 12px;
    color: #949494
}




/** 4th audio */
.player3,
.player__album3:before,
.player__play3 svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.player3.play3 .player__timeline3{
    -webkit-transform: translateY(-90%);
    -ms-transform: translateY(-90%);
    transform: translateY(-90%)
}

.player3.play3 .player__album3:after {
    -webkit-box-shadow: 0 30px 28px -10px rgba(0, 0, 0, .2);
    box-shadow: 0 30px 28px -10px rgba(0, 0, 0, .2)
}

.player3.play3 .player__album3 {
    top: -65px
}

.player3.play3 .pause {
    display: inline-block
}

.player3.play .play3 {
    display: none
}

.player__album3 {
    width: 112px;
    height: 112px;
    margin-right: 22px;
    position: relative;
    top: -50px;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.player__album3:before {
    content: '';
    width: 25px;
    height: 25px;
    z-index: 3;
    background: #fff
}

.player__album3,
.player__album3:after,
.player__album3:before,
.player__albumImg3 {
    -webkit-border-radius: 50%;
    border-radius: 50%
}

.player__album3:after {
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: absolute
}

.player__albumImg3 {
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    display: none
}

.player__albumImg3.active-song3 {
    display: block
}

.player__bar3,
.player__controls3,
.player__play3,
.player__prev3 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.player__bar3 {
    background: #fff;
    /* padding: 10px 25px; */
    height: 100px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: 0 30px 56px 6px rgba(0, 0, 0, .1);
    box-shadow: 0 30px 56px 6px rgba(0, 0, 0, .1);
    position: relative;
    z-index: 3
}

.player__controls3,
.player__play3,
.player__prev3 {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.player__play3,
.player__prev3 {
    cursor: pointer;
    height: 80px;
    width: 80px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    margin-right: 3px
}

.player__prev3 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.player__next3:hover,
.player__play3:hover,
.player__prev3:hover {
    background: #d7dce2
}

.player__play3:hover svg,
.player__prev3:hover svg {
    fill: #fff
}

.player__play3 {
    position: relative
}

.player__play3 svg {
    font-size: 20px
}

.player__play3 svg.pause {
    display: none
}

.player__next3,
.player__play3,
.player__timeline3 {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.player__next3 {
    cursor: pointer;
    width: 80px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    margin-left: -8px;
    height: 80px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.player__next3:hover svg {
    fill: #fff
}

.player__timeline3 {
    background: #fff6fb;
    height: 95px;
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    z-index: 1;
    padding-left: 160px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.player3 #playhead3,
.player__timeline3,
.player__timelineBar3 {
    -webkit-border-radius: 15px;
    border-radius: 15px
}

.player__timelineBar3 {
    background: #e7e7e7;
    margin-top: 13px;
    width: 95%;
    /* height: 4px; */
    position: relative
}

.player3 #playhead3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #fd6d94
}

.player__author3 {
    line-height: 1;
    font-weight: 700;
    margin-bottom: 6px;
    margin-top: 15px
}

.player__song3 {
    line-height: 1;
    margin: 0;
    font-size: 12px;
    color: #949494
}


/** 5th audio */
.player4,
.player__album4:before,
.player__play4 svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.player4.play4 .player__timeline4{
    -webkit-transform: translateY(-90%);
    -ms-transform: translateY(-90%);
    transform: translateY(-90%)
}

.player4.play4 .player__album4:after {
    -webkit-box-shadow: 0 30px 28px -10px rgba(0, 0, 0, .2);
    box-shadow: 0 30px 28px -10px rgba(0, 0, 0, .2)
}

.player4.play4 .player__album4 {
    top: -65px
}

.player4.play4 .pause {
    display: inline-block
}

.player4.play .play4 {
    display: none
}

.player__album4 {
    width: 112px;
    height: 112px;
    margin-right: 22px;
    position: relative;
    top: -50px;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.player__album4:before {
    content: '';
    width: 25px;
    height: 25px;
    z-index: 3;
    background: #fff
}

.player__album4,
.player__album4:after,
.player__album4:before,
.player__albumImg4 {
    -webkit-border-radius: 50%;
    border-radius: 50%
}

.player__album4:after {
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: absolute
}

.player__albumImg4 {
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    display: none
}

.player__albumImg4.active-song4 {
    display: block
}

.player__bar4,
.player__controls4,
.player__play4,
.player__prev4 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.player__bar4 {
    background: #fff;
    /* padding: 10px 25px; */
    height: 100px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: 0 30px 56px 6px rgba(0, 0, 0, .1);
    box-shadow: 0 30px 56px 6px rgba(0, 0, 0, .1);
    position: relative;
    z-index: 3
}

.player__controls4,
.player__play4,
.player__prev4 {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.player__play4,
.player__prev4 {
    cursor: pointer;
    height: 80px;
    width: 80px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    margin-right: 3px
}

.player__prev4 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.player__next4:hover,
.player__play4:hover,
.player__prev4:hover {
    background: #d7dce2
}

.player__play4:hover svg,
.player__prev4:hover svg {
    fill: #fff
}

.player__play4 {
    position: relative
}

.player__play4 svg {
    font-size: 20px
}

.player__play4 svg.pause {
    display: none
}

.player__next4,
.player__play4,
.player__timeline4 {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.player__next4 {
    cursor: pointer;
    width: 80px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    margin-left: -8px;
    height: 80px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.player__next4:hover svg {
    fill: #fff
}

.player__timeline4 {
    background: #fff6fb;
    height: 95px;
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    z-index: 1;
    padding-left: 160px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.player4 #playhead4,
.player__timeline4,
.player__timelineBar4 {
    -webkit-border-radius: 15px;
    border-radius: 15px
}

.player__timelineBar4 {
    background: #e7e7e7;
    margin-top: 13px;
    width: 95%;
    /* height: 4px; */
    position: relative
}

.player4 #playhead4 {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #fd6d94
}

.player__author4 {
    line-height: 1;
    font-weight: 700;
    margin-bottom: 6px;
    margin-top: 15px
}

.player__song4 {
    line-height: 1;
    margin: 0;
    font-size: 12px;
    color: #949494
}


/** 6th audio */
.player5,
.player__album5:before,
.player__play5 svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.player5.play5 .player__timeline5{
    -webkit-transform: translateY(-90%);
    -ms-transform: translateY(-90%);
    transform: translateY(-90%)
}

.player5.play5 .player__album5:after {
    -webkit-box-shadow: 0 30px 28px -10px rgba(0, 0, 0, .2);
    box-shadow: 0 30px 28px -10px rgba(0, 0, 0, .2)
}

.player5.play5 .player__album5 {
    top: -65px
}

.player5.play5 .pause {
    display: inline-block
}

.player5.play .play5 {
    display: none
}

.player__album5 {
    width: 112px;
    height: 112px;
    margin-right: 22px;
    position: relative;
    top: -50px;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.player__album5:before {
    content: '';
    width: 25px;
    height: 25px;
    z-index: 3;
    background: #fff
}

.player__album5,
.player__album5:after,
.player__album5:before,
.player__albumImg5 {
    -webkit-border-radius: 50%;
    border-radius: 50%
}

.player__album5:after {
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: absolute
}

.player__albumImg5 {
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    display: none
}

.player__albumImg5.active-song5 {
    display: block
}

.player__bar5,
.player__controls5,
.player__play5,
.player__prev5 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.player__bar5 {
    background: #fff;
    /* padding: 10px 25px; */
    height: 100px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: 0 30px 56px 6px rgba(0, 0, 0, .1);
    box-shadow: 0 30px 56px 6px rgba(0, 0, 0, .1);
    position: relative;
    z-index: 3
}

.player__controls5,
.player__play5,
.player__prev5 {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.player__play5,
.player__prev5 {
    cursor: pointer;
    height: 80px;
    width: 80px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    margin-right: 3px
}

.player__prev5 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.player__next5:hover,
.player__play5:hover,
.player__prev5:hover {
    background: #d7dce2
}

.player__play5:hover svg,
.player__prev5:hover svg {
    fill: #fff
}

.player__play5 {
    position: relative
}

.player__play5 svg {
    font-size: 20px
}

.player__play5 svg.pause {
    display: none
}

.player__next5,
.player__play5,
.player__timeline5 {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.player__next5 {
    cursor: pointer;
    width: 80px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    margin-left: -8px;
    height: 80px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.player__next5:hover svg {
    fill: #fff
}

.player__timeline5 {
    background: #fff6fb;
    height: 95px;
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    z-index: 1;
    padding-left: 160px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.player5 #playhead5,
.player__timeline5,
.player__timelineBar5 {
    -webkit-border-radius: 15px;
    border-radius: 15px
}

.player__timelineBar5 {
    background: #e7e7e7;
    margin-top: 13px;
    width: 95%;
    /* height: 4px; */
    position: relative
}

.player5 #playhead5 {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #fd6d94
}

.player__author5 {
    line-height: 1;
    font-weight: 700;
    margin-bottom: 6px;
    margin-top: 15px
}

.player__song5 {
    line-height: 1;
    margin: 0;
    font-size: 12px;
    color: #949494
}