.video-js .vjs-control-bar {
	display: none;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	height: 42px;
	background-color: rgba(0,0,0,.9);
	//@include background-color-with-alpha($primary-background-color, $primary-background-transparency);
}

// Video has started playing
.vjs-has-started .vjs-cb-header-caption,
.vjs-has-started .vjs-control-bar {
	@include display-flex;
	visibility: visible;
	opacity: 1;

	$trans: visibility 0.1s, opacity 0.1s; // Var needed because of comma
	@include transition($trans);
}

// IE 8 hack for media queries
$ie8screen: "\\0screen";

// Video has started playing AND user is inactive
.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-cb-header-caption,
.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
	// Remain visible for screen reader and keyboard users
	visibility: visible;
	opacity: 0;

	$trans: visibility 1.0s, opacity 1.0s;
	@include transition($trans);

	// Make controls hidden in IE8 for now
	@media #{$ie8screen} {
		visibility: hidden;
	}
}
.vjs-controls-disabled .vjs-cb-header-caption,
.vjs-using-native-controls .vjs-cb-header-caption,
.vjs-error .vjs-cb-header-caption,
.vjs-controls-disabled .vjs-control-bar,
.vjs-using-native-controls .vjs-control-bar,
.vjs-error .vjs-control-bar {
	// !important is ok in this context.
	display: none !important;
}

// Don't hide the control bar if it's audio
.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-cb-header-caption,
.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
	opacity: 1;
	visibility: visible;
}


// IE8 is flakey with fonts, and you have to change the actual content to force
// fonts to show/hide properly.
// - "\9" IE8 hack didn't work for this
// Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
	@media #{$ie8screen} { content: ""; }
}

// IE 8 + 9 Support
.vjs-has-started.vjs-no-flex .vjs-control-bar {
	display: table;
}