.player-wrap {
    position: fixed;
    z-index: 3;
    bottom: 0;
    height: 75px;
    width: 100%;
    left: 0;
    overflow: hidden;
    background: #fff
}

.player-wrap .player {
    position: absolute;
    width: 100%;

    opacity: 0;
    pointer-events: none;
    background: #fff;

    -webkit-transition: 1s;
    transition: 1s;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.player-wrap.page0 {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;
    -webkit-transition: 1s;
    transition: 1s;
    pointer-events: none
}

.player-wrap.page1 {
    display: block;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    -webkit-transition: opacity 1s 1s, -webkit-transform 1s 1s;
    transition: opacity 1s 1s, -webkit-transform 1s 1s;
    transition: transform 1s 1s, opacity 1s 1s;
    transition: transform 1s 1s, opacity 1s 1s, -webkit-transform 1s 1s
}

.player-wrap.page1 .player1 {
    opacity: 1;
    pointer-events: initial
}

.player-wrap.page2 .player2 {
    opacity: 1;
    pointer-events: initial;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.player-wrap.page3 .player3 {
    opacity: 1;
    pointer-events: initial;
}

.player-wrap.page4 .player4 {
    opacity: 1;
    pointer-events: initial;
}

.player-wrap.page5 .player5 {
    opacity: 1;
    pointer-events: initial;
}

.player-wrap .player .ui-progressbar-value {
    background: #fff;
    opacity: 0
}

.player-wrap.page1 .player:nth-of-type(1) .ui-progressbar-value {
    opacity: 1
}

.player-wrap.page2 .player:nth-of-type(1) .ui-progressbar-value {
    opacity: 0
}

.player-wrap.page2 .player:nth-of-type(2) .ui-progressbar-value {
    opacity: 1
}

.player-wrap.page3 .player:nth-of-type(1) .ui-progressbar-value {
    opacity: 0
}

.player-wrap.page3 .player:nth-of-type(2) .ui-progressbar-value {
    opacity: 0
}

.player-wrap.page3 .player:nth-of-type(3) .ui-progressbar-value {
    opacity: 1
}

.player-wrap.page4 .player:nth-of-type(1) .ui-progressbar-value {
    opacity: 0
}

.player-wrap.page4 .player:nth-of-type(2) .ui-progressbar-value {
    opacity: 0
}

.player-wrap.page4 .player:nth-of-type(3) .ui-progressbar-value {
    opacity: 0
}

.player-wrap.page4 .player:nth-of-type(4) .ui-progressbar-value {
    opacity: 1
}

.player-wrap.page5 .player:nth-of-type(1) .ui-progressbar-value {
    opacity: 0
}

.player-wrap.page5 .player:nth-of-type(2) .ui-progressbar-value {
    opacity: 0
}

.player-wrap.page5 .player:nth-of-type(3) .ui-progressbar-value {
    opacity: 0
}

.player-wrap.page5 .player:nth-of-type(4) .ui-progressbar-value {
    opacity: 0
}

.player-wrap.page5 .player:nth-of-type(5) .ui-progressbar-value {
    opacity: 1
}

.player-wrap .player.current-play {
    z-index: 11;
}
.player-wrap .player.current-play .timer .ui-progressbar-value {
    opacity: 1;
}

.player {
    position: relative;
    z-index: 10;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #000;
    border-top: 2px solid #F9F9F9;
}

.player .player__container {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
}

.player .player__speaker-story {
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: 32px;
    transform: translateY(-50%);
}

.player .player__mute {
    display: block;
    width: 48px;
    height: 48px;
    background: url(../../img/Speaker.svg) no-repeat center center/33%;
    border-radius: 50%;
    -webkit-transition: background-color .5s;
    transition: background-color .5s
}

.player .player__mute.off {
    background: url(../../img/SpeakerClose.svg) no-repeat center center/43%
}

.player .player__mute:hover {
    cursor: pointer;
    background-color: #F4F5F5
}

.player .wrapper {
    width: 80%;
}

.player .left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 9rem;
    margin-right: 1.8rem
}

.player .prew, .player .next {
    width: 1rem;
    height: 1rem;
    background: url(../../img/nextArrow.svg) no-repeat center center/contain;
    cursor: pointer
}

.player .prew {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.player .number {
    font-family: var(--font-roboto);
    font-size: .75rem;
    line-height: 1;
    color: #000;
    margin-bottom: .3rem
}

.player .name {
    font-family: var(--font-roboto);
    font-size: .75rem;
    line-height: 1;
    color: #C6C7C8
}

.player .timer {
    width: 30.5rem;
    margin: -2px 0 0;
}

.player .timer .player__progressbar {
    width: 100%
}

.player .timer .timesWrapper {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: .1rem
}

.player .timer .timesWrapper span {
    position: static;
    font-family: var(--font-roboto);
    font-size: .75rem;
    line-height: 1;
}

.player .time {
    font-size: 10px;
    position: relative;
    top: 14px;
    color: #C6C7C8
}

.player .player__start-time {
    color: #149A9A
}

.player .controls {
    width: 38.7rem
}

.player__audio-player {
    overflow: visible;
    background-color: #2B2B2B;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    color: #000;
}

.player .player__progressbar, .player .player__volume {
    height: 10px;
    display: inline-block;
    border-radius: 0;
    border: none;
    position: relative;
    top: 16px
}

.player .player__progressbar {
    width: 150px;
    height: 2px;
    background: #DDDEDE;
    overflow: visible;
    position: static
}

.player .player__progressbar:hover {
    cursor: pointer
}

.player .player__volume {
    display: none;
    width: 50px;
}

.player .player__play {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 45px;
    background: #149A9A;
    border-radius: 50%;
    margin-bottom: 2rem;
    font-size: 16px;
    top: 17px
}

.player .player__play:hover {
    cursor: pointer
}

.player .player__play:after {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: block;
    content: '';
    width: 12px;
    height: 11px;
    background: url(../../img/play.svg) no-repeat center center/contain;
    -webkit-transition: .5s;
    transition: .5s
}

.player .player__play.play:after {
    background: url(../../img/pause.png) no-repeat center center/contain
}

.player .player__play.pause:after {
    background: url(../../img/play.svg) no-repeat center center/contain
}

.player .player__controls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff
}

.ui-progressbar {
    background: #2B2B2B
}

.ui-progressbar-value.ui-widget-header.ui-corner-left {
    background: #149A9A
}

.ui-progressbar-value.ui-widget-header.ui-corner-left {
    position: relative
}

.ui-progressbar-value.ui-widget-header.ui-corner-left:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: #149A9A
}

/*@media screen and (min-width: 768px) and (max-width: 1023px) {
    .player-wrap .player .controls .player__play {
        width: 11.5vmin;
        height: 11.5vmin;
        margin-bottom: 3vmin;
        margin-right: 0
    }
}*/

/*@media screen and (min-width: 950px) and (max-width: 1100px) {
    .player-wrap .player .controls .player__play {
        width: 8.5vmin;
        height: 8.5vmin
    }
}*/

@media screen and (max-width: 1023px) {
    .player-wrap {
        position: fixed;
        bottom: 0;
        width: 100%;
        background: #fff;
        overflow: visible;
        /*height: 11.4vh;*/
        -webkit-transition: 1s;
        transition: 1s
    }

    .player-wrap.page1 {
        -webkit-transition: 1s;
        transition: 1s
    }

    .player-wrap .player {
        -webkit-transition: .5s;
        transition: .5s
    }

    .player {
        padding: 0
    }

    .player .left {
        width: 15rem
    }

    .player .left .next, .player .left .prew {
        width: 2rem;
        height: 2rem
    }

    .player .left .player__play, .player .left .player__mute {
        top: 0;
        margin: 0 !important
    }

    .player .player__speaker-story {
        display: none
    }

    .player .controls {
        width: 79vmin;
        padding: 10px 10px 10px 3.4vmin;
    }

    .player .controls .time {
        display: none
    }

    .player .controls .player__play {
        width: 50px;
        height: 50px;
        margin-right: 0;
    }

    .player .timer .player__progressbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    .player .wrapper {
        width: 50%;
        margin-bottom: 0;
        margin-left: 6vmin
    }

    .player .wrapper .number {
        margin-bottom: 0;
        font-size: 20px;
        text-align: center
    }

    .player .wrapper .name {
        display: none;
        font-size: 3vmin
    }

    .ui-progressbar-value.ui-widget-header.ui-corner-left:after {
        width: 2vmin;
        height: 2vmin;
        opacity: 0
    }
}

@media screen and (max-width: 767px) {
    .player .left {
        margin-right: 0
    }

    .player .left .next, .player .left .prew {
        width: 1.5rem;
        height: 2rem
    }
}