.ppq-audio-player .play-pause-btn .play-pause-icon:after {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

/* .ppq-audio-player .play-pause-btn .play-pause-icon:after,
.ppq-audio-player.player-playing .play-pause-icon:after {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAASCAMAAADrP+ckAAABNVBMVEUAAAAAmIcAmYgAm4sAnIsAnIwAnI0AnY0AnY4Ano4Ano8An5AAoJEAoZEAoZIAopMBn5ABoJABoJEBoZEBoZIBoZMBopMCoZICopMCopQCo5QDoJEDoZEDo5QDo5UFopMGo5QKpJYLpJYMpZcMppgNpZcNppgNp5gOppcOppgOp5gOp5kQqJoSp5kSqJoTqZsbrJ4drJ8irZ8mrqEnsKMrsqUtsqYytKg0tak5t6tHvLJJvbNLvbNqycBrysFsycFwy8Jwy8N3zsZ+0MiA0cqD0suH1M2L1c6P1tCk3tmm39mv4t285+PE6ebH6ufN7erS7+zV7+3W8O3X8O7a8u/k9fPs+Pft+Pfx+fjx+fnx+vny+vr1+/v2+/v5/fz7/f38/f38/v38/v79/v7+/v7+//////+ALAV1AAAAAXRSTlMAQObYZgAAATxJREFUKM+F0tlWwjAQBuAgQgHTRFFrqaK4IALiiuKugPsKrqUo0DbO+z+CDYHIFZ279nznP3P+DHLh4+L8HWybAQM+qDdlUgGXMRcqpIwYnIwoG7ct6LjAfgdUKlZoAmPQLMRSCBrLZH4idPAEbqcb11eamm1w1ciqGgJrFVPNiMydfkLH8X5LhXMWV1YOc7WCKSGGHty6A9Z2ZRbFGaEymApFKaHJceXoFRxnmPKcZoQXL79huPLijKng/ouP4nFJZcdXUWJML/gpLyo6du2zPTUmQ3uPw7cnWiK8dPUDzn+rUvVaFXUdv4Fjy+51nBcqj3XxQl71o9v33eqlipO0yZWZJnEE5pqqJZTZsy/xjHKvYqBk82+7FCgiaO1GZqKHz/2TkKpWrYv7qldryIGH9c2bFrR75yXV4PwBrZh1OjRqx9oAAAAASUVORK5CYII=);
    background-size: 37px 18px
} */

.ppq-audio-player {
    line-height: 111px;
    position: relative;
    overflow: hidden;
    height: auto;
    margin: 0 auto;
    background: transparent;
}

.ppq-audio-player audio {
    position: absolute;
    vertical-align: baseline
}

.ppq-audio-player .play-pause-btn {
    float: left;
    margin: 18px 0 0 0;
}


/* .ppq-audio-player .play-pause-btn .play-pause-icon:after {
    display: block;
    content: "";
    background-position: 0 0;
    width: 17px;
    height: 18px;
}

.ppq-audio-player.player-playing .play-pause-icon:after {
    background-position: -25px 0;
    width: 12px;
    height: 17px
} */

.ppq-audio-player .player-time {
    float: left;
    width: 51px;
    margin-right: 10px;
    text-align: right;
}

.ppq-audio-player .player-time-duration {
    float: right;
    margin: 0 0 0 16px;
    text-align: left
}

.ppq-audio-player .player-bar {
    position: relative;
    overflow: hidden;
    height: 1px;
    margin-top: 55px;
    background-color: #fff
}

.ppq-audio-player .player-bar .player-bar-loaded {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%;
    border-radius: 3px;
    background: #030303;
    opacity: 0.8;
}

.ppq-audio-player .player-bar .player-bar-played {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-radius: 3px;
    background: #030303;
    opacity: 0.8;
}

.ppq-audio-player .player-bar-container {
    position: relative;
    width: 100%;
    background:transparent;
    height: 1px;
    z-index: 2;
}

.ppq-audio-player .player-bar-container .player-bar-seek {
    position: absolute;
    top: calc(-9px + 0.5px);
    left: 136px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffe17f;
    display: block;
}

/* icon */
.ppq-audio-player .play-pause-btn .play-pause-icon, .ppq-audio-player.player-playing .play-pause-btn .play-pause-icon {
    position: relative;
    display: block;
    width: 80px;
    height: 80px;
    border-width: 0;
    border-radius: 0;
    background-color: transparent;
    background-position: center right;
    background-size: 65%;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAACXBIWXMAAAsSAAALEgHS3X78AAABo0lEQVRogdXYy03DQBSF4QNiDx2QTqAEtjMaCUpIB7gDoIMsomSJqIDQQTogdAAVGFnylcCK4zPjedz5t0kkf4rOXfisbVt0GetuATwAaLab9QEVdj545HsAn8a6xlh3VRtniJEeARyMdcv8jxTeGKbrEsCTsa5D3WmHYAIjXQN4Ndbt+l2pjcFINwDejXUrY91CI8gHI6k9EiEYSd2RmIOBtiMxFyOpOBKxMFLRIxEbIxU5EqkwUtYjkRqDnEciB0ZKfiRyYqRkR6IERop+JEpipGhHQgMGsY6EFow060how0hBR0IrRvI6EtoxEnUkasGAORI1YaTRI1EjRuqOxL9/6KLo44T3BmA5fPNaG+ajf328O/ZhLZivHrE69SXtmB8Az9vNumG+rBnz0v8b3+wPNGKOjptJE+bkuJk0YKhxM5XEeI2bqRTGe9xMuTHB42bKhZk9bqbUmGjjZkqFiT5uphSYJONmiolJOm6mGJgs42aag8k6bqYQTJFxM/liio2bicUUHzfTFEbNuJnGMOrGzTTEqB0301/MHsBC67gnA/ALBIXEPwFn8UAAAAAASUVORK5CYII=);
}
.ppq-audio-player.player-playing .play-pause-btn .play-pause-icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAACXBIWXMAAAsSAAALEgHS3X78AAAAfUlEQVRoge3PzQ1AQBgG4XdFYZRBlCeUoQUdrbg5bzYxh3nu38+UWmtey7pNSa40Oo+9tEz2vDu0LiEyhsoYKmOojKEyhsoYKmOojKEyhsoYKmOojKEyhsoYKmOojKEyhsoYKmOojKEyhsoYKmOojKEaP3/dSeYf/uxzN8kDCxoNh++eoXwAAAAASUVORK5CYII=);
}

.ppq-audio-player.player-paused .play-pause-btn .play-pause-icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAACXBIWXMAAAsSAAALEgHS3X78AAABo0lEQVRogdXYy03DQBSF4QNiDx2QTqAEtjMaCUpIB7gDoIMsomSJqIDQQTogdAAVGFnylcCK4zPjedz5t0kkf4rOXfisbVt0GetuATwAaLab9QEVdj545HsAn8a6xlh3VRtniJEeARyMdcv8jxTeGKbrEsCTsa5D3WmHYAIjXQN4Ndbt+l2pjcFINwDejXUrY91CI8gHI6k9EiEYSd2RmIOBtiMxFyOpOBKxMFLRIxEbIxU5EqkwUtYjkRqDnEciB0ZKfiRyYqRkR6IERop+JEpipGhHQgMGsY6EFow060how0hBR0IrRvI6EtoxEnUkasGAORI1YaTRI1EjRuqOxL9/6KLo44T3BmA5fPNaG+ajf328O/ZhLZivHrE69SXtmB8Az9vNumG+rBnz0v8b3+wPNGKOjptJE+bkuJk0YKhxM5XEeI2bqRTGe9xMuTHB42bKhZk9bqbUmGjjZkqFiT5uphSYJONmiolJOm6mGJgs42aag8k6bqYQTJFxM/liio2bicUUHzfTFEbNuJnGMOrGzTTEqB0301/MHsBC67gnA/ALBIXEPwFn8UAAAAAASUVORK5CYII=);
}

@media (max-width: 767px){
    .ppq-audio-player .play-pause-btn .play-pause-icon, .ppq-audio-player.player-playing .play-pause-btn .play-pause-icon {
        width: 22.5px !important;
        height: 25px !important;
        background-size: 100% !important;
        margin-right: 5px;
    }
    .ppq-audio-player .player-bar {
        margin-top: 31px;
    }
    .ppq-audio-player .player-time {
        display: none;
    }
    
    .ppq-audio-player .player-time-duration {
        display: none;
    }

    .ppq-audio-player .player-bar-container .player-bar-seek {
        left: 20px;
    }
}
/* media query to add for 767 */