@font-face
{
	font-family: "Open Sans";
	src: url("fonts/OpenSans-Semibold.ttf");
	font-weight: normal;
}

@font-face
{
	font-family: "Open Sans";
	src: url("fonts/OpenSans-ExtraBold.ttf");
	font-weight: bold;
}

body
{
	background-color: #000000;
	color: #FFFFFF;
	margin: 0px;
	/*font-family: "Open Sans";*/
	overflow: hidden;
}

#bg_img
{
	position: absolute;
	width: 100%;
	height: 100%;
}

a
{
	color: #FFFFFF;
}



.blend_label
{
	font-family: sans;
	/*font-size: 1.25em;*/
	/*pointer-events: all;*/
	position: absolute;
}

.blend_label:hover
{
	color: #00C000;
}



.splash_div
{
	pointer-events: none;
	overflow: hidden;
	background-color: #000000;
	width: 100%;
	height: 100%;
	position: absolute;
}

.splash_loadlabel_vpos
{	
	position: absolute;
	bottom: 52.5%;
	width: 100%;
	text-align: center;
}

.splash_loadlabel
{
	color: #FFFFFF;
	font-family: "Open Sans";
	font-size: 12pt;
	letter-spacing: 0.5em;
}

.splash_image
{
	position: absolute;
	left: 0;
}

.splash_dark
{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.25;
}

.splash_progressframe
{
	position: absolute;
	left: calc(50% - 120px);
	top: 47.5%;
	width: 240px;
	height: 147px;
}

.splash_progressbar
{
	position: absolute;
	height: 100%;
	width: 0%;
	overflow: hidden;
	left: 0;
	top: 0;
}

.splash_toload
{
	position: absolute;
	opacity: 0.4;
	left: 0;
	top: 0;
}

.splash_toload, .splash_loaded
{
	width: 240px;
	height: 147px;
}



#blendview
{
	position: absolute;
	width: 100%;
	height: 100%;
}

#hud
{
	font-family: "Open Sans";
	pointer-events: none;
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
}

#logo
{
	position: absolute;
	margin: 10px 0 0 20px;
	width: 7%;
}

#panel
{
	position: absolute;
	right: 64px;
	top: 10%;
	border-radius: 12px;
	background-color: rgba(30, 30, 30, 0.83);
	border: 1px solid rgba(240, 78, 49, 0.3);
	font-family: "Open Sans";
	text-transform: uppercase;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	pointer-events: all;
	padding: 16px 16px 12px 16px;
}

#anims_text
{
	font-size: 12pt;
	color: #D35E48;
	margin: 32px 0 8px 28px;
}

#anim_buttons
{
	width: 100%;
}

.anim_row
{
	width: 100%;
}

.anim_activemarker
{
	vertical-align: middle;
	width: 12px;
	height: 12px;
	background-color: #F04E31;
	display: inline-block;
	margin-right: 10px;
	visibility: hidden;
}

.anim_row[data-playing="1"] .anim_activemarker
{
	visibility: visible;
}

.anim_button
{
	vertical-align: middle;
	font-size: 9pt;
	padding: 2px 4px 2px 4px;
	margin: 2px;
	display: inline-block;
	width: 264px;
	cursor: pointer;
}

.anim_button:hover
{
	background-color: rgba(133, 130, 130, 0.22);
	border-radius: 3px;
}

.anim_row[data-playing="1"] .anim_button
{
	font-weight: bold;
}

#color_selector
{
	margin: 0 0 16px 28px;
}

#colors_text
{
	font-size: 9pt;
	display: inline-block;
	vertical-align: middle;
}

#color_buttons
{
	margin-left: 24px;
	display: inline-block;
	vertical-align: middle;
	font-size: 0;
}

.color_button
{
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 8px 0 8px;
	cursor: pointer;
}

#ac_buttons
{
	width: 100%;
	text-align: right;
}

.ac_button
{
	width: 12px;
	height: 12px;
	margin: 0 4px 0 12px;
	opacity: 0.5;
	cursor: pointer;
}

.ac_button[data-active="1"]
{
	opacity: 1;
}

#cyc_buttons
{
	width: 100%;
	height: 32px;
	margin-top: 8px;
	margin-bottom: 8px;
}

.cyc_button
{
	position: absolute;
	bottom: 0;
	margin: 3.5% 4.5% 3.5% 4.5%;
	width: 4.5%;
	cursor: pointer;
	pointer-events: all;
}

#cyc_left
{
	left: 0;
}

#cyc_right
{
	right: 0;
}