.paragraph--type--pg-audio-image .field--name-field-audio {
  display: none;
}


.paragraph--type--pg-audio-image .field--name-field-image > div > div .field--name-image {
  cursor: pointer;
  display: block;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: relative;
  top: 0;
  width: 100%;
}

.paragraph--type--pg-audio-image .field--name-field-image > div > div .field--name-image::before {
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
  background-image: url(../images/play.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: block;
  height: 25%;
  left: 50%;
  opacity: .7;
  pointer-events: none;
  position: absolute;
  top: 50%;
  width: 80px;
}

.paragraph--type--pg-audio-image.silent .field--name-field-image > div > div .field--name-image::before {
  background-image: url(../images/play.png);
}

.paragraph--type--pg-audio-image.playing .field--name-field-image > div > div .field--name-image::before {
  background-image: url(../images/pause.png);
}

.paragraph--type--pg-audio-image:hover .field--name-field-image > div > div .field--name-image::before {
  opacity: 1 !important;
}