/* - - - Division - - - */

/* .audio */
.audio image,
.audio img,
.audio svg {
  height:32px;
    vertical-align:middle;
}

/* .audio .button */
.audio .button {
  text-align:center;
    min-width:50px;
}

/* .audio .gap */
.audio .gap {
  min-width:25px;
    display:table-cell;
}

/* .audio .player */
.audio .player {
  font-size:0;
  line-height:50px;
  white-space:nowrap;
    background-color:#fff;
    width:100%;
      display:none;
      border-radius:5px;
      box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* .audio .slider */
.audio .slider {
  width:100%;
    cursor:hand; cursor:pointer;
    display:table-cell;
    position:relative;
}
.audio .slider:after,
.audio .sliderBar,
.audio .sliderDial {
  position:absolute;
  top:50%; left:0%;
    transform:translate(0, -50%);
}
.audio .slider:after {
  content:'';
    background-color:rgba(0, 0, 0, 0.2);
    width:100%; height:4px;
      border-radius:2px;
}
.audio .sliderBar {
  background-color:#1777ff;
  width:0%; height:4px;
  z-index:1;
    border-radius:2px;
}
.audio .sliderDial {
  background-color:#1777ff;
  width:16px; height:16px;
  z-index:2;
    border-radius:50%;
    box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.25);
      transform:translate(-50%, -50%);
}

/* .audio .time */
.audio .time {
  color:rgba(0, 0, 0, 0.3);
  font-family:'Montserrat', Helvetica, sans-serif;
  font-size:16px; font-style:normal; font-weight:500;
  letter-spacing:1px;
  text-align:right;
    min-width:54px;
      display:table-cell;
      padding-right:32px;
      position:relative;
      vertical-align:middle;
}
.audio .time:after {
  content:'';
    background-image:url(/base/assets/icon/general/time/black.png);
    background-image:url(/base/assets/icon/general/time/black.svg);
    background-position:center; background-repeat:no-repeat; background-size:32px;
    width:32px; height:32px;
    z-index:1;
      opacity:0.3;
      position:absolute;
      top:50%; right:3px;
        transform:translateY(-50%);
}

/* - - - Responsive - - - */

/* mobile */
@media screen and (max-width:799px) {

  /* .audio .button */
  .audio .button {
    min-width:50px
  }
  .audio .button.mute,
  .audio .button.stop {
    display:none;
  }

  /* .audio .gap */
  .audio .gap {
    min-width:5px;
  }

  /* .audio .time */
  .audio .time {
    min-width:60px;
  }
  .audio .time span:after {
    display:none;
  }

}

/* - - - Exception - - - */

/* desktop */
@media screen and (pointer:fine) and (min-width:1080px)  {

  /* .audio .button */
  .audio .button:hover .black {
    display:inline-block;
  }
  .audio .button:hover .white {
    display:none;
  }

}