/* Applying base CSS styles */

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  padding:0;
  margin:0;
  background: transparent; /* Otherwise white in Chrome */
}



input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}



input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}



input[type=range]::-ms-track {
  width: 50%;
  cursor: pointer;
  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}


/* Styling the Thumb */

/* Special styling for WebKit/Blink */

input[type=range]::-webkit-slider-thumb {

  -webkit-appearance: none;

  height: 100%;

  width: 1px;  

   background:transparent;	  

  cursor: pointer;

  margin-top: 0px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */



}



/* All the same stuff for Firefox */

input[type=range]::-moz-range-thumb {

  height: 100%;

  width: 1px;  

   background:transparent;	  

  cursor: pointer;

}



/* All the same stuff for IE */

input[type=range]::-ms-thumb {

  height: 100%;

  width: 1px;  

  background: white;

  cursor: pointer;

}





/* Styling the track */



input[type=range]::-webkit-slider-runnable-track {

  width: 100%;

  height: 58px;

  cursor: pointer;

   background:transparent;	  

}



input[type=range]:focus::-webkit-slider-runnable-track {

  background:transparent;	

}



input[type=range]::-moz-range-track {

  width: 100%;

  height: 3px;

  cursor: pointer;

  background:transparent;	

}



input[type=range]::-ms-track {

  width: 100%;

  height: 3px;

  cursor: pointer;

  background: transparent;

  color: transparent;

}

input[type=range]::-ms-fill-lower {

  background: #000;	

}

input[type=range]:focus::-ms-fill-lower {

  background: #000;	

}

input[type=range]::-ms-fill-upper {

 background: #000;	

}

input[type=range]:focus::-ms-fill-upper {

 background: #000;	

}



.audio-player {position:relative;border:2px solid black;font-size:24px;height:60px;line-height:60px;color: black}



.audio,

.play-pause {background-position:center;background-size:50px;background-repeat: no-repeat;}



.control {position: relative;width:100%}



.play-pause {position:absolute;top:0px;left:0px;;width:60px;height:60px;cursor:pointer;border:0;z-index:4}

.duration {position:absolute;top:0px;right:1%;height:60px;line-height:60px;width:100%;text-align: right;z-index:2}

.seek-bar {position: absolute;top: 0px;left: 0;width:100%;height: 60px;z-index:3;background-color: transparent}

.seek-bar-bg {position: absolute;top: 0px;left: 0;width:0%;height: 60px;z-index:1}

.volume-bar {position: absolute;top: 6px;left: 92%;width: 8%;height: 18px;}

.audio {position: absolute;top: 6px;left: 85%;width: 43px;height: 18px;cursor: pointer;border: 0;}





.play {background-image:url(/img/icon-play-black.svg)}

.play:hover {background-image:url(/img/icon-play-black.svg)}

.pause {background-image:url(/img/icon-pause-black.svg)}

.pause:hover {background-image:url(/img/icon-pause-black.svg)}



@media screen and (max-width:500px) {

	.audio-player {font-size:18px}

}