/* 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: 15px;
  width: 15px;
  border-radius: 50%;
  background: #000000;
  cursor: pointer;
  margin-top: -6px; /* 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: 15px;
  width: 15px;
   border-radius: 50%;
  background: #000;
  cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  height: 15px;
  width: 15px;
   border-radius: 50%;
  background: #000;
  cursor: pointer;
}


/* Styling the track */

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background: #000;	  
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #000;	
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background: #000;	
}

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 {display:block;height:18px}

.audio,
.play-pause {background-position:0px 0px;background-size:contain;background-repeat: no-repeat;}

.control {position: relative;width:100%}

.play-pause {position:absolute;top:6px;left:0px;;width:18px;height:18px;cursor:pointer;border:0;}
.duration {position:absolute;top:6px;left:5%;line-height:18px;width:19%;text-align: center}
.seek-bar {position: absolute;top: 6px;left: 26%;width: 56%;height: 18px;}
.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;}


.sound {background-image: url(/img/es-btn-sound.svg)}
.sound:hover {background-image: url(/img/es-btn-sound-on.svg)}
.mute {background-image: url(/img/es-btn-mute.svg)}
.mute:hover {background-image: url(/img/es-btn-mute-on.svg)}
.play {background-image:url(/img/es-btn-play.svg)}
.play:hover {background-image:url(/img/es-btn-play-on.svg)}
.pause {background-image:url(/img/es-btn-pause.svg)}
.pause:hover {background-image:url(/img/es-btn-pause-on.svg)}

@media screen and (max-width: 500px) {
	.duration {font-size: 12px;letter-spacing: 0px;width: 25%;left: 4%;}
	.seek-bar {left:29%;width:50%;}
	.sound {left:80%;}
}

@media screen and (max-width: 320px) {
	.duration {width: 34%}
	.seek-bar {left:36%;width:40%;}
	.sound {left:79%;}	
}