/* Tested on Chrome, Firefox, and Opera. */
body{background:#333;}
/* BASE STYLES
------------------------------------------------------- */

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

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

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

#videoContainer{
	height:50%;
}

#video {
	width:100%;
}

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

.highlight {
	color: #ffc107;
}

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

#videoControls {
	width:100%;
}

#progress {
	width: 0%;
	position: absolute;
	top:2px;
	-webkit-appearance: none;
	background-color: #ffc107;  
	height: 5px;
	z-index: 1;
	pointer-events: none;		
	border-radius:10px;
}

#progressBar {
	width:100%;
	position: absolute;
	top:0;
	-webkit-appearance: none;
	background-color:#555;  
	height: 5px;
	z-index: 0;
	border-radius:10px;
}
#progressBar:focus {
  	outline: none; 
}
#progressBar::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    height: 0;
    width: 0;
}
#progressBar::-moz-range-thumb {
	visibility: hidden !important ;
}
#buttonControls{padding-top:10px;}
#buttons {
	opacity: 0; 
	transition: opacity .3s ease-out;
}
#videoContainer:hover #buttons {
	opacity: 1.0;
} 

#duration, #fastFwd {
	color:#ffc107;
	font-family:'Varela Round', sans-serif;
	font-size:14px;
	padding-top:7px;
	vertical-align:sub;
}
#fastFwd{float:right; padding:2px; margin-top:8px}


#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:100%;
		
	}

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

	#videoControls {
		bottom:0;
	}

}

#fullScreen {
	color:#ffc107;
	font-size: 13px;
}
#fullScreen{float:right; padding:0 5px; margin-top:5px; margin-left:10px;}
#play{color:#ffc107; font-size:30px; line-height:20px; float:left; width:40px; height:20px; padding:0; margin-top:5px; cursor:pointer; vertical-align:middle;}