@charset "UTF-8";
/* CSS Document */

/********** GENERAL **********/
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
}
body {
	font-family: 'Catamaran', Helvetica, sans-serif;
    font-size: 18px;
	color: #ffffff;
	background-color: #030626;
	background-size: cover;
	background-position: center center;
	-webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
	overflow: hidden;
}
p {
	margin: 0;
}
a {
	color: #ffffff;
}


/********** DEMO **********/
#StartScreen {
	position: relative;
	text-align: center;
	width: 100%;
	height: 100%;
}
	#StartScreenTitle {
		width: 100%;
		max-width: 730px;
	}
#MainContainer {
	width: 1920px;
	height: 1080px;
	/* background-color: dimgrey; */
}
#BackgroundContainer {
	position: absolute;
	width: 1920px;
	height: 1080px;
	left: 0;
	top: 0;
}
	#BackgroundImage {
		position: absolute;
		width: 1920px;
		height: 1080px;
		left: 0;
		top: 0;
	}

#MainMenuContainer {
	position: absolute;
	width: 1920px;
	height: 1080px;
	left: 0;
	top: 0;
}
	.MainMenuButton {
		position: absolute;
		width: 310px;
		height: 370px;
		top: 54%;
		transform: translate(-50%, -50%);
		box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.0);
		transition: box-shadow 0.1s linear, opacity 0.5s linear, transform 0.5s ease-in-out;
		border-radius: 15px;
	}
		.MainMenuButton.Hilight {
			box-shadow: 0px 0px 20px 10px rgba(255,255,255,0.5);
		}
	#IntroButton { left: 25.8%; }
	#DemoButton { left: 50%; }
	#OutroButton { left: 73.6%; }
	#PlayAllButton {
		position: absolute;
		right: 26px;
		bottom: 15px;
		width: 192px;
		height: 75px;
		border-radius: 15px;
		box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.0);
		transition: box-shadow 0.5s linear;
	}
	#PlayAllButton.Hilight { box-shadow: 0px 0px 20px 10px rgba(255,255,255,0.5); }
.MainVideo {
	position: absolute;
	width: 1920px;
	height: 1080px;
	left: 0;
	top: 0;
	background-color: #000000;
}

#IntroOutroMainMenu {
	position: absolute;
    width: 280px;
    height: 60px;
    bottom: 52px;
    left: 38px;
    border-radius: 8px;
}
	#IntroOutroMainMenu.Hilight { box-shadow: 0px 0px 20px 10px rgba(255,255,255,0.5); }

#DemoContainer {
	position: absolute;
	width: 1920px;
	height: 1080px;
	left: 0;
	top: 0;
}
.DemoMenuParticleLoop, .DemoVideoParticleLoop {
	position: absolute;
	width: 1920px;
	height: 1080px;
	left: 0;
	top: 0;
}
#DemoMenuContainer {
	position: absolute;
	width: 1920px;
	height: 1080px;
	left: 0;
	top: 0;
	transition: opacity 0.5s linear;
}
	.DemoMenuButton {
		position: absolute;
		width: 200px;
		height: 90px;
		box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.0);
		transition: box-shadow 0.1s linear;
		border-radius: 15px;
	}
		.DemoMenuButton.Hilight {
			box-shadow: 0px 0px 20px 10px rgba(255,255,255,0.5);
		}
		#DemoMenuButton1 { transform: translateX(-50%); left: 960px; top: 160px; width: 230px; height: 130px; }
		#DemoMenuButton2 { left: 1197px; top: 411px; width: 430px; }
		#DemoMenuButton3 { left: 1085px; top: 737px; width: 407px; }
		#DemoMenuButton4 { right: 1085px; top: 735px; width: 490px; }
		#DemoMenuButton5 { right: 1196px; top: 406px; width: 374px; }

		#DemoMenuContainer.SideMenu .DemoMenuButton { left: 40px; height: 74px; }
		#DemoMenuContainer.SideMenu #DemoMenuButton1 { transform: none; top: 461px; width: 247px; }
		#DemoMenuContainer.SideMenu #DemoMenuButton2 { top: 551px; width: 355px; }
		#DemoMenuContainer.SideMenu #DemoMenuButton3 { top: 641px; width: 333px; }
		#DemoMenuContainer.SideMenu #DemoMenuButton4 { top: 731px; width: 287px; }
		#DemoMenuContainer.SideMenu #DemoMenuButton5 { top: 820px; width: 310px; }
		#DemoMenuContainer.SideMenu #DemoMenuPlayAll { display: none; }

		#DemoMenuZoom {
			position: absolute;
			width: 1920px;
			height: 1080px;
			left: 0;
			top: 0;
		}
	#DemoMenuButtonMM {
		position: absolute;
		width: 282px;
		height: 63px;
		left: 37px;
		bottom: 56px;
		box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.0);
		transition: box-shadow 0.1s linear;
		border-radius: 10px;
	}
	#DemoMenuButtonMM.Hilight { box-shadow: 0px 0px 20px 10px rgba(255,255,255,0.5); }
	#DemoMenuPlayAll {
		position: absolute;
		width: 192px;
		height: 75px;
		left: 50%;
		top: 82%;
		transform: translateX(-50%);
		box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.0);
		transition: box-shadow 0.1s linear;
		border-radius: 15px;
		background-image: url(assets/button-playall.png)
	}
	#DemoMenuPlayAll.Hilight { box-shadow: 0px 0px 20px 10px rgba(255,255,255,0.5); }

.DemoVideo {
	position: absolute;
	width: 1920px;
	height: 1080px;
	background-color: #000000;
}

/********** MISCELLANY **********/
.Hidden {
	opacity: 0.0;
}
.Disabled {
	display: none;
}
.Fader {
	transition: opacity 1s linear;
}
.Centered {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
#CloseButton {
	position: absolute;
	top: 15px;
    right: 15px;
    width: 60px;
    height: 60px;
}
#MuteButton {
	position: absolute;
	top: 15px;
    right: 90px;
    width: 60px;
    height: 60px;
	background-image: url(assets/button-mute-toggle.png);
	background-size: 120px 60px;
	background-position: 0px 0px;
}
#MuteButton.Muted { background-position: -60px 0px; }

/********** FONT FACES **********/
@font-face {
	font-family: Catamaran;
	src: url(font-catamaran/Catamaran-Regular.ttf);
	font-weight: normal;
}
@font-face {
	font-family: Catamaran;
	src: url(font-catamaran/Catamaran-Bold.ttf);
	font-weight: bold;
}
@font-face {
	font-family: Catamaran;
	src: url(font-catamaran/Catamaran-Black.ttf);
	font-weight: 900;
}