/* Tested on Chrome, Firefox, and Opera. */

/* BASE STYLES
------------------------------------------------------- */

button {
	border: none;
	background: none;
	outline: none;
}

/* LAYOUT
------------------------------------------------------- */

#wrapper {
	width: 50%;
	margin: 0 auto;
}

#videoContainer {        
	position: relative;
/*	height: 50%;
	height: 50%;*/
	    height: 310px;
}

#video {
	    width: 100%;
    	height: 107%;
}

#transcript p {
	font-family: 'Varela Round', sans-serif;
	font-size: 18px;
	line-height: 36px;
	margin: 20px;
}

.highlight {
	color: #ff9900;
}

/* VIDEO CONTROLS
------------------------------------------------------- */

#videoControls {
	position: absolute;
	top: 90%;
	left: 1.5%;
	right: 1.5%;
	padding: 5px;	
}

#progress {
	width: 0%;
	position: absolute;
	top: -10px;
	-webkit-appearance: none;
	background-color: #ff9900;  
	height: 5px;
	/* z-index: 1; */
	pointer-events: none;		
}

#progressBar {
	width: 98.5%;
	position: absolute;
	top: -10px;
	right: 1%;
	-webkit-appearance: none;
	background-color: #6d6e6d;  
	height: 5px;
	z-index: 0;
}
#progressBar:focus {
  	outline: none; 
}
#progressBar::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    height: 0;
    width: 0;
}
#progressBar::-moz-range-thumb {
	visibility: hidden !important ;
}

#buttons {
	opacity: 0; 
	transition: opacity .3s ease-out;
}
#videoContainer:hover #buttons {
	opacity: 1.0;
} 

#duration, #fastFwd {
	color: black;
	font-family: 'Varela Round', sans-serif;
	font-size: 14px;
	position: relative;
	bottom: 5px;
	left: 5px;
}

#mute, #closedCaption, #fullScreen, #volumeBar {
	float: right;
}

#volumeSlider {
	width: 60px;
	float: right;
}
#volumeSlider::-webkit-slider-thumb {
    background-color: green;
    height: 10px;
    width: 10px;
}

/* =========================================
   MEDIA QUERIES */


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

	#wrapper {
		width:  80%;
	}

	#transcript p {
		font-size: 14px;
		line-height: 24px;
	}

	#videoControls {
		top: 85%;
	}

}