/* controls */
.controls, .controls > * {
	padding:0;
	margin:0;
}
.controls {
	overflow:hidden;
	background:#E5E5E5;
	width:100%;
	height:26px; /* of figure's height */
	position:relative;
}
.controls[data-state=hidden] {
	display:none;
}
.controls[data-state=visible] {
	display:block;
}
.controls > * {
	float:left;
	height:24px;
}
.controls > *:first-child {
	margin-left:0;
}
.controls .progress {
	cursor:pointer;
	width:60.390625%;
}
.controls .timelapse{
   width:15%;
   line-height:26px;
   text-align:center;   
}
.controls button {
	text-align:center;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	border:none;
	cursor:pointer;
	/*text-indent:-99999px;*/
	background-color:#000;
   color:#FFF;
   width:24px;
}

.controls button:hover, .controls button:focus, .subtitles-menu li button:hover, .subtitles-menu li button:focus,
.subtitles-menu li button[data-state="active"] {
	opacity:0.5;
}

.controls .buttonwrapper{
   display:inline-table;
   width:auto !important;
   float:right;
   margin-top:0px;
}

.controls .buttonwrapper button{
   float: left;
   height: 24px;
   margin-top: 0;
   margin-left:1px;
   padding: 2px 4px;
}
.controls .buttonwrapper span.fa-stack{
margin-left: -4px; margin-top:-4px; height:24px; line-height: 26px; width: 24px
}


.controls button{
	text-indent:0;
	font-size:16px;
	font-weight:bold;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
}
.controls progress {
	display:block;
	width:100%;
	height:90%;
	margin-top:2px;
   margin-left:2px;
	border:none;
	overflow:hidden;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	color:#0095dd; /* Internet Explorer uses this value as the progress bar's value colour */
   background-image: linear-gradient(to bottom, #ebebeb 0px, #f5f5f5 100%);
}
.controls progress[data-state="fake"] {
	background:#e6e6e6;
	height:65%;
}
.controls progress span {
	width:0%;
	height:100%;
	display:inline-block;
	background-color:#2a84cd;	
}
.controls progress::-moz-progress-bar {
	background-color:#0095dd;
}
/* Chrome requires its own rule for this, otherwise it ignores it */
.controls progress::-webkit-progress-value {
	background-color:#0095dd;
}
/* subtitles menu */
.subtitles-menu {
	display:none;
	position:absolute;
	bottom:26px;
	right:1px;
	background:#666;
	list-style-type:none;
	margin:0;
	padding:0;
	width:100px;
	padding:4px 0px;
}
.subtitles-menu li {
	padding:0;
	text-align:center;
}
.subtitles-menu li button {
	border:none;
	background:#000;
	color:#fff;
	cursor:pointer;
	width:90%;
	padding:2px 5px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
}

/* WebVTT cues */
::cue { 
	color:#ccc;
   margin-bottom:50px;
}

/* fullscreen */
html:-ms-fullscreen {
	width:100%;
}
:-webkit-full-screen {
	background-color:transparent;
}
video:-webkit-full-screen + .controls {
	background:#ccc; /* required for Chrome which doesn't heed the transparent value set above */
}
video:-webkit-full-screen + .controls progress {
	margin-top:0.5rem;
}

/* hide controls on fullscreen with WebKit */
#bloccovideo[data-fullscreen=true] video::-webkit-media-controls {
	display:none !important;
}
#bloccovideo[data-fullscreen=true] {
	max-width:100%;
	width:100%;
	margin:0;
	padding:0;
	max-height:100%;
}
#bloccovideo[data-fullscreen=true] video {
	height:auto;
}
#bloccovideo[data-fullscreen=true] .controls {
	position:absolute;
	bottom:1%;
	width:100%;
	z-index:2147483647;
   height:44px;
   left:0px;
   right:0px;
}
#bloccovideo[data-fullscreen=true] .controls button{
	height:36px;
   width:36px;
   font-size:24px;
   margin: 4px 4px;
}
#bloccovideo[data-fullscreen=true] .subtitles-menu {
   z-index:2147483647;
   font-size:20px;
	bottom:56px;
	width:160px;
}
#bloccovideo[data-fullscreen=true] .controls .timelapse{
   width:15%;
   line-height:46px;
   font-size:20px;
   text-align:center;   
}

#bloccovideo[data-fullscreen=true] .controls li {
	width:5%;
}
#bloccovideo[data-fullscreen=true] .controls .progress {
	width:58%;
   height:38px;
   margin-top:3px;
}

/* Media Queries */
@media screen and (max-width:1024px) {
	.controls {
		height:30px;
		height:1.876rem;
	}
	.subtitles-menu {
		right:0;
	}	
}
@media screen and (max-width:42.5em) {
	.controls {
		height:auto;
	}
	.controls > * {
		display:block;
		width:14.5667%;
		margin-left:0;
		height:40px;
		height:2.5rem;
		margin-top:2.5rem;
	}
	.controls .progress {
		position:absolute;
		top:0;
		width:100%;
		float:none;
		margin-top:0;
	}
	.controls .progress progress {
		width:98%;
		margin:0 auto;
	}
   .controls .buttonwrapper {
       margin-top: 24px;
       position: relative;
    }
	.controls button {
		background-position:center center;
	}
	.subtitles-menu {
	}
   video::-webkit-media-text-track-display {
     font-size: 200%;
   }}