.agp-sp {
  color: #3E3E3E;
  font-size: 15px;
  padding: 0;
  width: 100%;
  position: relative;
  margin-top: -10px;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  transition: opacity 0.3s; }
  .agp-sp.ios {
    opacity: 0.5;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    transition: opacity 1s; }
    .agp-sp.ios .agp-sp__track[data-track-status="play"] .agp-sp__track__waveform {
      height: 0 !important;
      -webkit-transform: scale3D(1 1 1);
      -moz-transform: scale3D(1 1 1);
      -ms-transform: scale3D(1 1 1);
      -o-transform: scale3D(1 1 1);
      transform: scale3D(1 1 1); }
    .agp-sp.ios[data-status="play"] .agp-sp__track[data-track-status=""],
    .agp-sp.ios[data-status="play"] .agp-sp__track[data-track-status="pause"] {
      opacity: 1; }
    .agp-sp.ios[data-status="play"] .agp-sp__track[data-track-status="play"] .agp-sp__track__infos__duration:before {
      content: '\f04b'; }
    .agp-sp.ios-ready {
      opacity: 1; }
      .agp-sp.ios-ready .agp-sp__track[data-track-status="play"] .agp-sp__track__waveform {
        height: 40px !important;
        -webkit-transform: scale3D(1 1.1 1);
        -moz-transform: scale3D(1 1.1 1);
        -ms-transform: scale3D(1 1.1 1);
        -o-transform: scale3D(1 1.1 1);
        transform: scale3D(1 1.1 1); }
      .agp-sp.ios-ready .agp-sp__track[data-track-status="play"] .agp-sp__track__infos__duration:before {
        content: '\f04c' !important; }
      .agp-sp.ios-ready[data-status="play"] .agp-sp__track[data-track-status=""],
      .agp-sp.ios-ready[data-status="play"] .agp-sp__track[data-track-status="pause"] {
        opacity: .33; }
  .agp-sp, .agp-sp * {
    box-sizing: border-box;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none; }
  .agp-sp__playlist {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1; }
  .agp-sp[data-status="play"] .agp-sp__track[data-track-status=""],
  .agp-sp[data-status="play"] .agp-sp__track[data-track-status="pause"] {
    opacity: .33; }
    .agp-sp[data-status="play"] .agp-sp__track[data-track-status=""]:hover,
    .agp-sp[data-status="play"] .agp-sp__track[data-track-status="pause"]:hover {
      opacity: 1; }
  .agp-sp__track {
    opacity: 1;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    transition: opacity 0.3s; }
    .agp-sp__track[data-track-status="error"] {
      opacity: .25; }
    .agp-sp__track[data-track-status="ready"], .agp-sp__track[data-track-status="pause"] {
      opacity: 1; }
    .agp-sp__track[data-track-status="play"] .agp-sp__track__waveform, .agp-sp__track[data-track-status="passing"] .agp-sp__track__waveform {
      opacity: 1;
      height: 40px;
      -webkit-transform: scale3D(1 1.1 1);
      -moz-transform: scale3D(1 1.1 1);
      -ms-transform: scale3D(1 1.1 1);
      -o-transform: scale3D(1 1.1 1);
      transform: scale3D(1 1.1 1); }
    .agp-sp__track__waveform {
      width: 100%;
      position: relative;
      overflow: hidden;
      height: 0;
      opacity: 0;
      -webkit-transform: scale3D(1 0 1);
      -moz-transform: scale3D(1 0 1);
      -ms-transform: scale3D(1 0 1);
      -o-transform: scale3D(1 0 1);
      transform: scale3D(1 0 1);
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      transition: all 0.5s; }
      .agp-sp__track__waveform:hover {
        cursor: pointer; }
      .agp-sp__track__waveform__wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 40px;
        overflow: hidden; }
    .agp-sp__track__infos {
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      padding: 10px 0px;
      cursor: pointer; }
      .agp-sp__track__infos__pos {
        width: 40px; }
      .agp-sp__track__infos__title {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
        -webkit-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 100%; }
        .agp-sp__track__infos__title span {
          left: 0;
          max-width: 100%;
          position: absolute;
          padding: 0 80px 0 30px;
          display: block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis; }
      .agp-sp__track__infos__duration {
        width: 80px;
        text-align: right;
        position: relative; }
        .agp-sp__track__infos__duration:before {
          font: normal normal normal 8px/1 FontAwesome;
          line-height: 15px;
          content: '\f04b';
          color: #FFF;
          width: 20px;
          height: 15px;
          background: #3E3E3E;
          position: absolute;
          left: 15px;
          text-align: center;
          border-radius: 2px; }
    .agp-sp__track.loading .agp-sp__track__infos__duration:before {
      content: '...'; }
    .agp-sp__track[data-track-status="play"] .agp-sp__track__infos__duration:before {
      content: '\f04c'; }

/*# sourceMappingURL=agp-sp.css.map */