.voice-player {
  z-index: 500;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transition: box-shadow 80ms ease-in-out;
  outline: 0;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16);
  position: fixed;
  right: 25px;
  bottom: 136px;
  /*   background: #1f8ceb; */
  /* display: flex; */
  /*   align-items: center; */
  /*   justify-content: center; */
  -webkit-transition: box-shadow 80ms ease-in-out;
  background-image: url("/wp-content/uploads/imgs/play.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}

.paused {
  background-image: url("/wp-content/uploads/imgs/pause.png");
}

.voice-player :before,
.voice-player :after {
  content: "";
  position: absolute;
  transition: 0.3s;
}

.voice-player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voice-player .play {
  height: 40%;
  width: 40%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.voice-player .play:before,
.voice-player .play:after {
  background: #fff;
  height: 100%;
  width: 51%;
  top: 0;
  will-change: transform;
  z-index: -1;
}
.voice-player .play:before {
  left: 0;
}
.voice-player .play:after {
  right: 0;
}
.voice-player .play.paused:before {
  transform: translateX(-25%);
}
.voice-player .play.paused:after {
  transform: translateX(25%);
}
.voice-player .play.paused .pause:before,
.voice-player .play.paused .pause:after {
  transform: rotate(0);
}
.voice-player .pause:before,
.voice-player .pause:after {
  height: 100%;
  width: 150%;
  background: #1f8ceb;
  outline: 1px solid transparent;
}
.voice-player .pause:before {
  top: -100%;
  transform-origin: 0% 100%;
  transform: rotate(26.5deg);
}
.voice-player .pause:after {
  transform-origin: 0% 0%;
  transform: rotate(-26.5deg);
  top: 100%;
}