.jp-audio {
  font-family: 'Montserrat', sans-serif;
  color: #999;

  .jp-play,
  .jp-pause {

    & > div {
      width: 40px;
      height: 40px;
      color: #c30d27;
      border-radius: 50%;
      border: 2px solid #c30d27;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      -webkit-flex-direction: column;
      justify-content: center; /* center items vertically, in this case */
      align-items: center;
      text-align: center;
      font-size: 0;


      .glyphicon {
        top: 0;
        left: 1px;
      }

      svg {
        position: relative;
        left: 0;
        top: 0;
        width: 18px;
        height: 18px;
        fill: #c30d27;
      }

      span {
        text-align: center;
      }
    }
  }

  .jp-play svg {
    left: 1px !important;
    top: 0;

  }

  .jp-pause {
    display: none;
  }

  li {
    list-style: none;
    display: inline-block;
  }

  li:nth-child(2) {
    flex: 1;
    -webkit-flex: 1;
    padding: 18px 0 10px 20px;
  }


  .jp-progress {
    position: relative;
    overflow: visible;
    background-color: #ddd;
    height: 4px;

    width: 100%;
  }

  .jp-seek-bar {
    background: #dcdcdc;
    width: 0;

    height: 100%;
    cursor: pointer;

  }

  .jp-play-bar {
    background: #c30d27;
    width: 0;
    /* height:15px; */
    height: 100%;
    position: absolute;
    overflow: visible;

    &:after {
      content: " ";
      position: absolute;
      top: -7px;
      right: -10px;
      width: 17px;
      height: 17px;
      border: 2px solid #c30d27;
      background-color: #fff;
      border-radius: 50%;
    }
  }

  .play-button {
    background: url(triangle.svg);
    background-size: contain;
    width: 20px;
    height: 20px;
    position: relative;
    top: 0;
    left: 2px;
  }

  .pause-button {
    font-size: 0;

    & > div {
      width: 8px;
      height: 18px;

      border: 2px solid #c30d27;
      display: inline-block;

      &:nth-child(1) {
        margin-right: 2px
      }
    }

  }

  .time-info {
    position: relative;
    height: 24px;
    font-size: 10px;
  }

  .jp-current-time {
    position: absolute;
    left: 0;
    bottom: 2px;
  }

  .jp-duration {
    position: absolute;
    right: 0;
    bottom: 2px;
  }

  ul {
    display: flex;
    display: -webkit-flex;
    width: 100%;
    padding-left: 0;
  }
}