/* custom video controls */
/* uses classes for size and styling so there can be multiple videos */
/* must be placed INSIDE a container with the video because of % sizes and positions */

.videoControls {
	position: absolute;
	height: 25px;
	width: 100%;
	bottom: 0px;
	left: 0px;
	margin: 0px;
	background-color: #aaaaaa;
	touch-action: none;		/* stops all default touch behavior  */
	box-sizing: border-box;
}
.play-button-container {
	position: absolute;
	height: 25px;
	width: 10%;
	bottom: 0px;
	left: 0px;
	touch-action: none;		/* stops all default touch behavior  */
}
.video-play-pause {
	position: absolute;
	height: 25px;
	width: 25px;
	bottom: 0px;
	cursor: pointer;
	touch-action: none;		/* stops all default touch behavior  */
}
.video-slider-container {
	position: absolute;
	height: 25px;
	width: 86%;	/* rounded corners hang out */
	top: 0px;
	left: 10%;
	margin-right: 1%;
	touch-action: none;		/* stops all default touch behavior  */
	padding: 0px 0px 0px 0px;	/* for IE11 */
}
.video-seek-bar {
	position: absolute;
	height: 25px;
	width: 100%;
	top: 0px;
	left: 0px;
	cursor: pointer;
	touch-action: none;		/* stops all default touch behavior  */
	padding: 0px 0px 0px 0px;	/* for IE11 */
}
input[type=range]::-webkit-slider-thumb {
	margin-top: -3px;
}
input[type=range]::-ms-thumb {
	margin-top: -1px;
}
input[type=range]::-ms-track {
	color: transparent;
	height: 10px;
	margin-top: -3px;
	padding: 0px 0px 0px 0px;	/* for IE11 */
}
.VR-drag {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
  	user-select: none;
	touch-action: none;		/* stops all default touch behavior  */
  }
.VR-drag:active { 
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
  	user-select: none;
	touch-action: none;		/* stops all default touch behavior  */
}
.VR-container {
	position: absolute;
	height: 25px;
	width: 100%;
	bottom: 0px;
	left: 0px;
	margin: 0px;
	text-align: right;	
	background-color: #aaaaaa;
	touch-action: none;		/* stops all default touch behavior  */
}
.VR-text {
	position: absolute;
	height: 25px;
	width: 60%;
	top: 0px;
	left: 0px;
	margin-top: 5px;
	margin-left: 4px;
	text-align: left;	
	font-family: "arial","sans-serif";
	font-size: 12px;
	font-weight: bold;
	touch-action: none;		/* stops all default touch behavior  */
}
.VR-button-container {
	position: absolute;
	height: 25px;
	width: 40%;
	bottom: 0px;
	right: 0px;
	margin: 0px;
	text-align: right;	
	background-color: #aaaaaa;
	font-size: 0;	 /* remove extra spacing */
	touch-action: none;		/* stops all default touch behavior  */
}
.VR-buttons {
	height: 25px;
	width: 25px;
	display: inline-block;
	cursor: pointer;
	touch-action: none;		/* stops all default touch behavior  */
}
.VR-buttonsDisabled {
	height: 25px;
	width: 25px;
	display: inline-block;
	touch-action: none;		/* stops all default touch behavior  */
}
.VR-fakePosterFrame {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0%;
	left: 0%;
	touch-action: none;		/* stops all default touch behavior  */
}