/* 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: #F37039;	
}

input[type=range]:focus::-ms-fill-lower {
  background: #F37039;	
}

input[type=range]::-ms-fill-upper {
 background: #F37039;	
}

input[type=range]:focus::-ms-fill-upper {
 background: #F37039;	
}

.audio-player {position:relative;border:2px solid #F37039;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:10px;height:60px;line-height:60px;width:100%;text-align: right;z-index:2;color:#F37039}
.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;background-color:#F37039}
.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}
}