body {
  background-color: #FD65A8;
}

.audiocontainer .audio {
  width: 100%;
}

.audiocontainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

span.play-button img {
  position: absolute;
  width: 30px;
  display: none;
}

span.play-button {
  width: 30px;
  display: block;
  /* position: absolute; */
  /* top: -41px; */
  height: 40px;
}

.button {
  /* margin-bottom: 40px; */
  position: relative;
}

.audiocontainer .audio div {
  display: inline-block;
  width: 315px;
  vertical-align: middle;
}

.audiocontainer .audio div.button {
  width: 40px;
}

.audiocontainer .audio {
  padding-top: 40px;
  width: 460px;
}

span.play-button img.show {
  display: block;
}

.title-duration {
  text-align: left;
  margin-left: 50px;
}

.title-duration {
  padding-bottom: 20px;
  border-bottom: 1px solid;
}
.waveform > div {
  display: block;
  width: 315px;
  vertical-align: middle;
  margin-left: 120px;
}
.title-duration {
  color: #fff;
}

.waveform > div.title-duration {
  display: block;
  margin-left: 120px;
}

.waveform > div.audio {
  width: 50px;
  /* margin-right: 20px; */
  position: absolute;
  left: -9%;
  top: 43%;
}
div#waveforms {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.waveform {
  padding-top: 50px;
  flex-basis: 50%;
  position: relative;
}
@media only screen and (max-width: 1023px) {
  .waveform > div.audio {
    margin-left: 0;
    left: 30px;
  }

  .waveform > div.title-duration {
    margin-left: 80px;
  }

  .waveform > div {
    margin-left: 76px;
    width: 270px;
  }

  div#waveforms {
    display: block;
  }
}