/* 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: 100%;
  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: white;
  cursor: pointer;
  margin-top: -5px; /* 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: white;
  cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  height: 15px;
  width: 15px;
   border-radius: 50%;
  background: white;
  cursor: pointer;
}


/* Styling the track */

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: white;	  
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: white;	
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: white;	
}

input[type=range]::-ms-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: white;	
}
input[type=range]:focus::-ms-fill-lower {
  background: white;	
}
input[type=range]::-ms-fill-upper {
 background: white;	
}
input[type=range]:focus::-ms-fill-upper {
 background: white;	
}

.full-screen,
.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:25px;height:25px;cursor:pointer;border:0;}
.seek-bar {position: absolute;top: 6px;left: 5.5%;width: 72%;height: 25px;}
.volume-bar {position: absolute;top: 6px;left: 86%;width: 8%;height: 25px;}
.audio {position: absolute;top: 6px;left: 80%;width: 43px;height: 24px;cursor: pointer;border: 0;}
.full-screen {position: absolute;top: 4px;right: 0px;background-image: url(../img/btn-fullscreen.svg);width: 28px;height: 28px;cursor: pointer;border: 0;}

.full-screen:hover {background-image: url(../img/btn-fullscreen-on.svg)}

.sound {background-image: url(../img/btn-sound.svg)}
.sound:hover {background-image: url(../img/btn-sound-on.svg)}
.mute {background-image: url(../img/btn-mute.svg)}
.mute:hover {background-image: url(../img/btn-mute-on.svg)}
.play {background-image:url(../img/btn-play.svg)}
.play:hover {background-image:url(../img/btn-play-on.svg)}
.pause {background-image:url(../img/btn-pause.svg)}
.pause:hover {background-image:url(../img/btn-pause-on.svg)}

.video {width:60%;margin-left:auto;margin-right:auto}

@media only screen and (max-width: 800px) {
	.video {width:100%;}
}