/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/* page */ 

/* Generated by Font Squirrel (https://www.fontsquirrel.com) on September 22, 2016 */



@font-face {
    font-family: 'motion_control_neue_litebold';
    src: url('motioncontrolneuelite-webfont.woff2') format('woff2'),
         url('motioncontrolneuelite-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'super_retro_m54regular';
    src: url('super_retro_m54-webfont.woff2') format('woff2'),
         url('super_retro_m54-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
	background: #000;
    font-family: 'super_retro_m54regular';
	background-image: url(bg.jpg);
	background-size: 100%;
    overflow: hidden;
}

header {
	z-index: 1000;
    position: relative;
}

#main {
	display: none;
	margin: 0 auto;
	width: 100%;
	/*max-width: 1280px;*/
	margin-top: 0.5vw;
	/*box-shadow: 0px 20px 100px #000;*/
	height: 33vw;
}

#beam {
	position: absolute;
    top: -12vw;
    left: 16vw;
    opacity: 0.3;
    width: 133%;
    height: 162%;
    transform: rotate(-4deg);
}

#splash {
	position: absolute;
    width: 100%;
	overflow: hidden;
    height: 100vh;
	cursor: pointer;
}

#splash img {
	margin: 0 auto;
	width: 100%;
}

#menu {
	padding: 2vw 4vw;
    margin: 0;
}
		
#menu ul {
	list-style: none;
	margin: 2vw -2vw 0;
}

#menu li {
	margin: 0 0 2vw 0;
	text-align: right;
}


#menu a {
    font-size: 1.5vw;
	color: #c7a300;
	text-decoration: none;
}

#menu a:hover {
	color: #666;
}


img {
	width: 100%;
}

#player {
	margin-top: -0.2vw;
	/*
    position: absolute;
    top: 30vw;
    left: 50vw;
    width: 46vw;
    height: 27vw;
    background: #000;
    overflow: hidden;
	*/
}

#projektor-placeholder {
    opacity: 0.8;
    width: 18vw;
    bottom: 1.5vw;
    position: absolute;
    left: 8.5vw;
}

#player-placeholder {
    position: absolute;
    /* top: 2vw; */
	bottom: 3.5vw;
    left: 48vw;
	width: 48vw;
    /* height: 27vw; */
}

/*@media screen and (min-width: 768px) , screen and (max-height: 600px) {*/
@media screen and (max-height: 600px) {
	#player-placeholder {
		width: 38vw;
	}
	#beam {
		top: -7.5vw;
		height: 133%;
		transform: rotate(0deg);
	}
}

#projektor {
}

#logo {
    width: 33vw;
    max-width: 400px;
    position: absolute;
    top: 10%;
    left: 5%;
}
#logo-player {
	width: 54%;
    opacity: 0.7;
    margin-left: 10vw;
    /* position: relative; */
    z-index: 1;
    margin-top: 3vw;
}

#untermenu {
	display: none;
	position: absolute;
    top: 37vw;
    left: 52vw;
    font-size: 42px;
    width: 26vw;
}
#untermenu li {
	cursor: pointer;
	padding: 5px 10px;
}
#untermenu li:hover {
	background: #ccc;
}
#untermenu li.active {
	background: #ccc;
}

#content-text {
	background: #000;
	color: #fff;
	font-family: helvetica;
	font-size: 1.3vw;
	line-height: 1.4vw;
	padding: 20px 20px 1px;
	height: 24vw;
	overflow-y: auto;
}
#content-text p {
	margin: 0 0 20px;
}
#content-text a {
	color: #fff;
}

footer {
    position: absolute;
    bottom: 1.5vw;
	color: #aaa;
    font-size: 12px;
    font-family: tahoma;
    right: 2vw;
    text-align: right;
}
footer ul {
	list-style: none;
}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media screen and (max-width: 730px) {
	body {
		overflow: auto;
	}
	#logo {
		width: 60%;
		position: relative;
		margin: 5vw auto;
		left: 0;
		top: 0;
	}
    #projektor-placeholder {
		display: none;
    }
	
	#player-placeholder {
		position: static;
		width: 88%;
		margin: 0 6vw;
	}
	
	#logo-player {
		display: none;
	}
	
	#menu {
	}
	#menu ul {
		margin: 0;
	}
	#menu li {
		margin: 0 0 2vw 0;
		text-align: center;
	}
	#menu a {
		font-size: 6vw;
	}
		
	#content-text {
		font-size: 14px;
		line-height: 16px;
		height: auto;
		margin: 0 0 6vw;
	}
	
	.videoWrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px;
		height: 0;
	}
	.videoWrapper object,
	.videoWrapper embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	footer {
		position: static;
		text-align: center;
		padding: 4vw 0 2vw;
	}
}


/*
	body.portrait {
		overflow: auto;
	}
	.portrait #logo {
		width: 80%;
		position: relative;
		margin: 5vw auto;
		left: 0;
		top: 0;
	}
    .portrait #projektor-placeholder {
		display: none;
    }
	
	.portrait #player-placeholder {
		position: static;
		width: 88%;
		margin: 0 6vw;
	}
	
	.portrait #logo-player {
		display: none;
	}
	
	.portrait #menu {
	}
	.portrait #menu ul {
		margin: 0;
	}
	.portrait #menu li {
		margin: 0 0 2vw 0;
		text-align: center;
	}
	.portrait #menu a {
		font-size: 6vw;
	}
		
	.portrait #content-text {
		font-size: 14px;
		line-height: 16px;
		height: auto;
		margin: 0 0 6vw;
	}
	
	.portrait .videoWrapper {
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 25px;
		height: 0;
	}
	.portrait .videoWrapper object,
	.portrait .videoWrapper embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}	
*/