/* Video view */
.video-view {
	font-weight: 300;
	font-style: normal;
}


.video-view .loading-background {
	position:fixed;
	left: 0; right:0; top:0; bottom:0;
	background-size:cover;
}

.video-view .playback-wrapper {
	position:absolute;
	bottom: 0;
	left:0;
	right:0;

	z-index:2;
	padding: 90px 125px;

	display:flex;
	flex-flow:column;

	justify-content:stretch;
}

.video-view .playback-wrapper:before {
	position: absolute;
	z-index: -1;
	content: '';
	bottom: 0;
	left: 0;
	right: 0;
	height: 400px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(40%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.8)));
}

.video-view .title {
	font-size:2em;
	width: 86%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin-left:65px;
}

.video-view .subtitle {
	visibility: visible;
	width: 50%;	
	font-size: 1.4em;
	line-height: 1em;
	font-style: italic;
	color: white;
	margin-left:65px;
}

.video-view .playback-controls {
	width:100%;
	position:relative;
	margin-top: 1em;
}

.video-view .progress-bar {
	background-color: #333;
	height: 0.5em;
	margin-left:65px;
}

.video-view .progress-bar .progress {
	background-color: #ef6c00;
	height: 0.5em;
}

.video-view .playback-controls .progress-text {
	position:absolute;
	top: 1em;
	left: 0.2em;
	font-size: 1.2em;
	margin-left:65px;
}

.video-view .playback-controls .duration-text {
	position:absolute;
	top: 1em;
	right: .2em;
	font-size: 1.2em;
}

.video-view .playback-wrapper .pause-overlay {
	position: absolute;

	top: -25px;
	left: 0;

	width: 50px;
	height: 50px;
	visibility: hidden;
	background: url('../img/video-paused-overlay-small.webp');
}

.logo {
	width: 100px;
	height: 154px;
	background-repeat: no-repeat;
	position: absolute;
	right: 7em;
	bottom: 6em;
	background-size: contain;
	background-image: url("../img/logo-watermark.webp");
}

video::-webkit-media-controls-overlay-enclosure {
	max-width:100%;
}