/*href='https://icono-49d6.kxcdn.com/icono.min.css*/
.icono-volumeMedium:before{border:2px solid}
.icono-volumeMedium:before,.icono-volumeMute:after,.icono-volumeMute:before{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.icono-volumeMedium,.icono-volumeMute{width:0;height:0;border:7px solid;border-left:none;border-top-color:transparent;border-bottom-color:transparent;padding:6px 3px;box-shadow:inset 4px 0;margin:4px 10px 4px 11px}
.icono-volumeMedium{margin:4px 14px 4px 7px}
.icono-volumeMedium:before{width:15px;height:15px;position:absolute;border-radius:50%;border-top-color:transparent;border-bottom-color:transparent;border-left-color:transparent;left:2px}
.icono-volumeMedium{margin:4px 16px 4px 5px}
.icono-volumeMedium:before{border-style:double;border-width:6px;left:-2px}
.icono-volumeMute{margin:4px 16px 4px 5px}
.icono-volumeMute:after,.icono-volumeMute:before{box-shadow:inset 0 0 0 32px}
.icono-volumeMute:before{width:10px;height:2px;left:17px}
.icono-volumeMute:after{height:10px;width:2px;left:21px}
.icono-volumeMute:after,.icono-volumeMute:before{-webkit-transform:translateY(-50%) rotate(45deg);transform:translateY(-50%) rotate(45deg)}
[class*=icono-]{display:inline-block;vertical-align:middle;position:relative;font-style:normal;color:#ddd;text-align:left;text-indent:-9999px;direction:ltr}
[class*=icono-]:after,[class*=icono-]:before{content:'';pointer-events:none}
[class*=icono-],[class*=icono-] *{box-sizing:border-box}

.audio-player {margin: 0 auto 40px;
  height: 60px;  width: 50%; min-width:270px; max-width:900px;
  background: #444;  box-shadow: 0 0 15px 0 #000a;
  font:normal 16px arial;  color: white;
  overflow: hidden;  display: grid;  grid-template-rows: 16px auto;
}
.audio-player .timeline {  background: white;  width: 100%;
  position: relative;  cursor: pointer;  box-shadow: 0 2px 10px 0 #0008;
}
.audio-player .timeline .progress {  background: #ff7f50;
  width: 0%;  height: 100%;  transition: 0.25s;
}
.audio-player .controls {
  display: flex;  justify-content: space-between;
  align-items: stretch;  padding: 0 20px;
}
.audio-player .controls > * {  display: flex;
  justify-content: center;  align-items: center;
}
.audio-player .controls .toggle-play.play {
  cursor: pointer;  position: relative;
  left: 0;  height: 0;  width: 0;
  border: 7px solid #0000;  border-left: 13px solid white;
}
.audio-player .controls .toggle-play.play:hover {  transform: scale(1.1);}
.audio-player .controls .toggle-play.pause {
  height: 15px;  width: 20px;  cursor: pointer;  position: relative;
}
.audio-player .controls .toggle-play.pause:before {
  position: absolute;  top: 0;  left: 0px;  background: white;
  content: "";  height: 15px;  width: 3px;
}
.audio-player .controls .toggle-play.pause:after {
  position: absolute;  top: 0;  right: 8px;  background: white;
  content: "";  height: 15px;  width: 3px;
}
.audio-player .controls .toggle-play.pause:hover {  transform: scale(1.1);}
.audio-player .controls .time {  display: flex;}
.audio-player .controls .time > * {  padding: 2px;}
.audio-player .controls .volume-container {  cursor: pointer;  position: relative;  z-index: 2;}
.audio-player .controls .volume-container .volume-button {  height: 26px;  display: flex;  align-items: center;
}
.audio-player .controls .volume-container .volume-button .volume {  transform: scale(0.7);}
.audio-player .controls .volume-container .volume-slider {  position: absolute;
  left: -3px;  top: 15px;  z-index: -1;  width: 0;
  height: 16px;  background: white;  box-shadow: 0 0 20px #000a;  transition: 0.25s;
}

.audio-player .controls .volume-container .volume-slider .volume-percentage {background:#ff7f50;height: 100%;width:75%;}
.audio-player .controls .volume-container:hover .volume-slider {left: -133px;  width: 130px;}

@media (max-width : 1050px) { 
.audio-player {width:98% }
}

@media (max-width : 460px) { 
.audio-player {font:normal 12px arial;}
}