@charset 'utf-8';
/*@import url('rangeslider.css');*/

html, body {height: 100%}
body {
	font: 110%/0 sans-serif;
	margin: 0; padding: 0;
	/*
	background: rgb(14,11,56);
	background: -moz-radial-gradient(center, circle cover, rgba(14,11,56,1) 29%, rgba(249,204,205,1) 30%, rgba(188,32,34,1) 31%, rgba(119,0,19,1) 43%, rgba(249,204,205,1) 45%, rgba(188,32,34,1) 46%, rgba(119,0,19,1) 57%, rgba(249,204,205,1) 59%, rgba(188,32,34,1) 60%, rgba(119,0,19,1) 71%, rgba(249,204,205,1) 73%, rgba(188,32,34,1) 74%, rgba(119,0,19,1) 85%, rgba(249,204,205,1) 87%, rgba(188,32,34,1) 88%, rgba(119,0,19,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(29%,rgba(14,11,56,1)), color-stop(30%,rgba(249,204,205,1)), color-stop(31%,rgba(188,32,34,1)), color-stop(43%,rgba(119,0,19,1)), color-stop(45%,rgba(249,204,205,1)), color-stop(46%,rgba(188,32,34,1)), color-stop(57%,rgba(119,0,19,1)), color-stop(59%,rgba(249,204,205,1)), color-stop(60%,rgba(188,32,34,1)), color-stop(71%,rgba(119,0,19,1)), color-stop(73%,rgba(249,204,205,1)), color-stop(74%,rgba(188,32,34,1)), color-stop(85%,rgba(119,0,19,1)), color-stop(87%,rgba(249,204,205,1)), color-stop(88%,rgba(188,32,34,1)), color-stop(100%,rgba(119,0,19,1)));
	background: -webkit-radial-gradient(center, circle cover, rgba(14,11,56,1) 29%,rgba(249,204,205,1) 30%,rgba(188,32,34,1) 31%,rgba(119,0,19,1) 43%,rgba(249,204,205,1) 45%,rgba(188,32,34,1) 46%,rgba(119,0,19,1) 57%,rgba(249,204,205,1) 59%,rgba(188,32,34,1) 60%,rgba(119,0,19,1) 71%,rgba(249,204,205,1) 73%,rgba(188,32,34,1) 74%,rgba(119,0,19,1) 85%,rgba(249,204,205,1) 87%,rgba(188,32,34,1) 88%,rgba(119,0,19,1) 100%);
	background: -o-radial-gradient(center, circle cover, rgba(14,11,56,1) 29%,rgba(249,204,205,1) 30%,rgba(188,32,34,1) 31%,rgba(119,0,19,1) 43%,rgba(249,204,205,1) 45%,rgba(188,32,34,1) 46%,rgba(119,0,19,1) 57%,rgba(249,204,205,1) 59%,rgba(188,32,34,1) 60%,rgba(119,0,19,1) 71%,rgba(249,204,205,1) 73%,rgba(188,32,34,1) 74%,rgba(119,0,19,1) 85%,rgba(249,204,205,1) 87%,rgba(188,32,34,1) 88%,rgba(119,0,19,1) 100%);
	background: -ms-radial-gradient(center, circle cover, rgba(14,11,56,1) 29%,rgba(249,204,205,1) 30%,rgba(188,32,34,1) 31%,rgba(119,0,19,1) 43%,rgba(249,204,205,1) 45%,rgba(188,32,34,1) 46%,rgba(119,0,19,1) 57%,rgba(249,204,205,1) 59%,rgba(188,32,34,1) 60%,rgba(119,0,19,1) 71%,rgba(249,204,205,1) 73%,rgba(188,32,34,1) 74%,rgba(119,0,19,1) 85%,rgba(249,204,205,1) 87%,rgba(188,32,34,1) 88%,rgba(119,0,19,1) 100%);
	background: radial-gradient(circle at center, rgba(14,11,56,1) 29%,rgba(249,204,205,1) 30%,rgba(188,32,34,1) 31%,rgba(119,0,19,1) 43%,rgba(249,204,205,1) 45%,rgba(188,32,34,1) 46%,rgba(119,0,19,1) 57%,rgba(249,204,205,1) 59%,rgba(188,32,34,1) 60%,rgba(119,0,19,1) 71%,rgba(249,204,205,1) 73%,rgba(188,32,34,1) 74%,rgba(119,0,19,1) 85%,rgba(249,204,205,1) 87%,rgba(188,32,34,1) 88%,rgba(119,0,19,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0b38', endColorstr='#770013',GradientType=1 );
	*/
}
#outer-frame {
	position: relative;
	width: 100%; height: 100%;
	overflow: hidden;
	background: url('img/decor/circles-bg.jpg') center center no-repeat;
	background-size: cover;
}

#inner-frame {
	position: relative;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin: 0 auto;
	width: 70%;
	max-height: 80%;
}
#inner-frame > * {
}

/* #player contains the media itself and playback controls */
#player {
	width: 70%;
	margin: 0 auto;
}
/* #media contains the video element, a possible background and any screen overlays */
#media {
	position: relative;
	z-index: 970;
	text-align: center;
	box-shadow: 0 0 1vw #000;
	margin: 0 auto;
}
/* #video is the actual video element */
#video {
	width: 100%;
	height: auto;
}

/* #bufferingtext is shown when the video is loading */
#bufferingtext {
	position: absolute;
	z-index: 980;
	top: 50%; left: 0; right: 0;
	text-align: center;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 2vw;
	font-weight: bold;
	color: #fff;
}

.thumbs {
	position: absolute;
	z-index: 960;
	top: 0;
	width: 15%;
	height: 100%;
}
#left-thumbs {
	left: 0;
}
#right-thumbs {
	right: 0;
}
.thumbs > * {
	position: relative;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	padding: 0.5%;
}
.thumbs img {
	width: 100%;
	height: auto;
}

@media (max-width: 640px), (orientation: portrait) and (max-width: 1280px) {
	#inner-frame {
		max-height: 90%;
	}
	#player {
		width: 100%;
	}
	.thumbs {
		position: static;
		width: auto;
		height: auto;
	}
	.thumbs > * {
		position: static;
		top: inherit;
		transform: none;
		text-align: center;
	}
	.thumbs img {
		width: 30%;
		height: auto;
	}
}

#controls {
	position: relative;
	z-index: 970;
	text-align: center;
	margin: 0 auto;
	width: 100%;
	margin-top: 1vh;
}

#controls > [id|='btn'] {
	float: left;
	height: 32px;
}

#range-seek {
	width: auto;
	margin-left: 32px;
	height: 32px;
}
#range-seek > input {
	width: 100%;
}
input[type='range'], ::-moz-range-track, ::-ms-track {
	-webkit-appearance: none;
	background-color: #3f91e5;
}
::-webkit-slider-thumb, ::-moz-range-thumb, ::-ms-thumb {
	-webkit-appearance: none;
	background-color: #666;
	width: 10px;
	height: 20px;
}




.hidden {
	display: none !important;
}



#infobutton {
	position: absolute;
	top: 8px; right: 8px;
	z-index: 1000;
	line-height: 1;
}
#infobutton a {
	color: #fff;
	font-size: 300%;
	text-decoration: none;
	font-weight: bold;
}
#infobutton a:hover {
	color: #ff9;
}

#infopane {
	position: absolute;
	z-index: 1001;
	top: 20%; bottom: 20%;
	left: 20%; right: 20%;
	background-color: #fff;
	border: 4px solid #000;
	padding: 3%;
	line-height: 1.4;
	overflow: scroll;
}

.curtain {
	position: absolute;
	z-index: 990;
	top: 0; bottom: 0;
	width: 10%;
	background: url('img/decor/curtain.jpg') no-repeat;
	background-size: cover;
	-moz-transition: all 1.8s ease-in-out;
	-webkit-transition: all 1.8s ease-in-out;
	transition: width 1.8s ease-in-out;
}
#left-curtain {
	left: 0;
	background-position: top right;
}
#right-curtain {
	right: 0;
	background-position: top left;
}
.curtain.closed {
	width: 52%;
}