/* Use player with a w-8c grid class*/
/* Styling for the player itself */
.simple-player-container {
  display: inline-block;
  padding: 0 10px 10px 10px;
}
.simple-player-container > div > ul {
  margin: 0;
  padding-left: 0;
}
.simple-player-container > div > ul > li {
  margin: 10px 0 0;
}
.simple-player-container .progressbar-wrapper {
  width: 83%;
  margin: 0 15px;
  width: 298px;
}
.simple-player-container .progressbar-wrapper .progressbar {
  transition: width 0.3s ease 0s;
  opacity: 0.15;
}
.simpleplayer-play-control {
  display: inline-block;
  vertical-align: middle;
  height: 32px;
  width: 32px;
  background: 0 0;
  background-image: url(/assets/images/audioplayer/play.png);
  background-repeat: no-repeat;
  background-position: 7px center;
  cursor: pointer;
}
.simpleplayer-play-control:hover {
  background-image: url(/assets/images/audioplayer/play_hover.png);
}
.simpleplayer-stop-control {
  display: inline-block;
  vertical-align: middle;
  height: 32px;
  width: 32px;
  background: 0 0;
  background-image: url(/assets/images/audioplayer/pause.png);
  background-repeat: no-repeat;
  background-position: 7px center;
  cursor: pointer;
}
.simpleplayer-play-control,
.simpleplayer-stop-control {
  opacity: 0.5;
  transition: opacity 0.1s ease-in-out;
}
.simpleplayer-play-control:hover {
  opacity: 1;
}
.simpleplayer-stop-control.active {
  animation: playing 1s ease infinite alternate;
}
@keyframes playing {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.95);
  }
}
/* Active state for pause button */
.simpleplayer-stop-control:hover,
.simpleplayer-stop-control.active {
  background-image: url(/assets/images/audioplayer/pause_hover.png);
  opacity: 1;
}
/* Active state for progress bar fill */
.progressbar.active {
  opacity: 1 !important;
}
/* Styling for the area around the player */
.audioplayer-wrapper {
  position: relative;
  top: 15px;
}
.audioplayer-external-container {
  display: block !important;
  position: relative;
  z-index: 10;
  background-color: #f6f8f8;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}
.audioplayer-info-container {
  background: #EEE;
  padding: 20px;
  margin-top: -32px;
}
.audioplayer-info-container .audioplayer-track-info {
  word-spacing: normal;
}
.audioplayer-track-title {
  padding: 10px 0 !important;
  font-size: 18px !important;
  font-style: italic;
}
/* Styling for a smaller player to be used with a w-6c grid class */
.smaller-audioplayer .audioplayer-wrapper {
  text-align: center;
}
.smaller-audioplayer .audioplayer-wrapper .progressbar-wrapper {
  width: 196px;
}
/* 
Add no-control class to hide control bar - this way the player can be used in different dimensions without the control bar breaking boundaries. 
Removing control bar is useful for short audio demos.
*/
.no-control .audioplayer-wrapper {
  text-align: center;
}
.no-control .audioplayer-wrapper .progressbar-wrapper {
  display: none !important;
}
/* Style of the container in which 2 audio players are used for the dry/wet audio demos of certain product pages */
.dry-wet-audio-container {
  padding: 20px;
  background: #EEEEEE;
}
.dry-wet-audio-container .audioplayer-wrapper:nth-of-type(2) {
  margin-top: -38px;
}
.dry-wet-audio-container .progressbar-wrapper {
  width: 260px;
}
/* RESPONSIVE STUFF */
/* Large (not full) window width */
@media all and (max-width: 1464px) {
  .simple-player-container .progressbar-wrapper {
    width: 174px;
  }
  .audioplayer-info-container {
    margin-top: -24px;
  }
  .audioplayer-track-info,
  .audioplayer-track-title {
    font-size: 15px !important;
  }
  .dry-wet-audio-container .progressbar-wrapper {
    width: 130px;
  }
  .smaller-audioplayer .audioplayer-wrapper .progressbar-wrapper {
    width: 104px;
  }
}
/* Medium window width */
@media all and (max-width: 980px) {
  .simple-player-container .progressbar-wrapper {
    width: 114px;
  }
  .audioplayer-info-container {
    margin-top: -26px;
  }
  .audioplayer-track-info,
  .audioplayer-track-title {
    font-size: 14px !important;
  }
  .dry-wet-audio-container .progressbar-wrapper {
    width: 74px;
  }
  .smaller-audioplayer .audioplayer-wrapper .progressbar-wrapper {
    width: 100px;
  }
}
/* Small window width */
@media all and (max-width: 760px) {
  .audioplayer-track-title {
    font-size: 18px !important;
    font-weight: 600 !important;
  }
  .audioplayer-track-info {
    font-size: 16px !important;
  }
  .simple-player-container .progressbar-wrapper {
    width: 342px;
  }
  .dry-wet-audio-container .progressbar-wrapper {
    width: 304px;
  }
  .smaller-audioplayer .audioplayer-wrapper .progressbar-wrapper {
    width: 274px;
  }
}
/* Mini window width */
@media all and (max-width: 550px) {
  .simple-player-container .progressbar-wrapper {
    width: 210px;
  }
  .audioplayer-track-info,
  .audioplayer-track-title {
    font-size: 15px !important;
  }
  .dry-wet-audio-container .progressbar-wrapper {
    width: 174px;
  }
  .smaller-audioplayer .audioplayer-wrapper .progressbar-wrapper {
    width: 180px;
  }
}