/*---------- HARMONIZE BROWSER DEFAULTS ----------*/

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, details, dd, del, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, frame, frameset, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, label, legend, li, mark, menu, nav, object, ol, option, output, p, pre, q, ruby, s, samp, section, select, small, span, strike, strong, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, tr, tt, u, ul, var, video
{ margin: 0; padding: 0; border: none; outline: none; font-size: 100%; letter-spacing: 0px; vertical-align: baseline; background-color: transparent; }

* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

html, body { width: 100vw; height: 100vh; }

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

table { border-collapse: collapse; border-spacing: 0; empty-cells: show; table-layout: auto; }

img { -ms-interpolation-mode: bicubic; }



/*---------- GENERAL FONT SETTINGS ----------*/

@font-face					{ font-family: 'swe'; font-weight: normal; font-style: normal; src: url('swe-regular.ttf')  format('truetype'); }
@font-face					{ font-family: 'swe'; font-weight: bold; font-style: normal; src: url('swe-bold.ttf')  format('truetype'); }
@font-face					{ font-family: 'milstencil'; font-weight: normal; font-style: normal; src: url('milstencil.woff')  format('woff'); }

body						{ font-family: "swe"; font-weight: normal; font-size: 17px; line-height: 1.33em; color: rgb(220,220,160);
							  -webkit-text-size-adjust: none; }

table, div, p, textarea, input, ul, li
							{ font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; -webkit-text-size-adjust: none; }

	

/*---------- LAYERS ----------

1	#bg1
2	#bg2
3	#menubar

10	#startlogo / title animation
11	#info
12	#team
13	#kontakt

*/



/*---------- GLOBAL SETTINGS ----------*/

html, body					{ background-color: rgb(0,0,0); scrollbar-base-color: rgb(0,0,0); overflow: hidden; }
							  
h3							{ font-family: milstencil; font-size: 30px; font-weight: normal; color: rgb(255,150,0); margin-bottom: 0.5em; }

p							{ margin-bottom: 0.5em; }
p:last-child				{ margin-bottom: 0; }

ul							{ margin-left: 1em; }
li							{ margin-bottom: 0.5em; }

span.at						{ padding: 0 3px; }

a							{ color: rgb(255,255,255); text-decoration: none; cursor: pointer; }
a:hover						{ color: rgb(255,150,0); }
a.u							{ text-decoration: underline; }

span.link					{ color: rgb(255,255,255); text-decoration: none; cursor: pointer; }
span.link:hover				{ color: rgb(255,150,0); }


sup							{ font-weight: bold; position: relative; top: -0.5em; font-size: 0.7em; }
							  
#bg1						{ position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%;
							  background-image: url(../img/slideshow/rs-00100.jpg); background-size: cover;
							  background-position: 50% 50%; transition: opacity 2000ms ease-in-out; }

#bg2						{ position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%;
							  background-size: cover; transition: opacity 2000ms ease-in-out; }

.alpha0						{ opacity: 0.0; filter: alpha(opacity=000); transition: opacity 3000ms ease-in-out; }
.alpha100					{ opacity: 1.0; filter: alpha(opacity=100); transition: opacity 500ms ease-in-out; }
.alpha70					{ opacity: 0.7; filter: alpha(opacity=100); transition: opacity 500ms ease-in-out; }

#bg1.alpha70				{ transition: opacity 15000ms ease-in; }
#startlogo.alpha100			{ transition: opacity 2000ms ease-in; }



/* ---------- MAIN MENU ---------- */

#menubar					{ position: absolute; z-index: 3; bottom: 0; left: 0; width: 100vw; height: auto;
						 	 padding: 0.5em 0; background-color: rgba(30,30,0,0.9); text-align: center; transition: opacity 25000ms ease-in; }

#menubar #textmenu			{ font-family: milstencil; font-size: 20px; }
#menubar .menuitem			{ color: rgb(255,255,255); text-decoration: none; cursor: pointer; }
#menubar .menuitem:hover	{ color: rgb(255,150,0); }
#menubar .menuitem:active	{ color: rgb(255,150,0); }
#menubar .separator			{ margin: 0 0.5em; }



/* ---------- TITLE ANIMATION ---------- */

.title						{ position: absolute; z-index: 10; width: 100vw; left: 0; top: calc(50% - 20px); text-align: center;
							  transform: translate(0, -50%); pointer-events: none;
							  filter: drop-shadow(0 0.1vw 0.2vw rgb(0,0,0,1));
							  font-family: "milstencil"; font-weight: normal; font-size: 4vw;
							  line-height: 1em; color: rgb(220,220,160); -webkit-text-size-adjust: none; }


#startlogo					{ width: 20vw; height: auto; left: 50vw; transform: translate(-50%, -49%); }




/* ---------- TEXT WINDOWS ---------- */

.window						{ position: absolute; bottom: 12vh; right: 3vw; width: 90vw; height: auto;
							  padding: 2vw; background-color: rgba(30,30,0,0.9); transition: opacity 1000ms ease-in-out; display: none; }

#info						{ z-index: 11; max-width: 850px; }
#team						{ z-index: 12; max-width: 850px; }
#kontakt					{ z-index: 13; max-width: 400px; }
#impressum					{ z-index: 14; max-width: 850px; }



/*---------- RESPONSIVE DESIGN ----------*/

@media screen and (orientation: portrait)
	{
	#startlogo			{ width: 60vw; }
	.title				{ font-size: 8vw; }
	.window				{ bottom: 6vh; width: 88vw; padding: 3vw; }
	#menubar #textmenu	{ font-size: 18px; }
	#menubar .menuitem:hover	{ color: rgb(255,255,255); }
	#menubar .menuitem:active	{ color: rgb(255,255,255); }
	}

@media screen and (orientation: landscape) and (max-height: 600px)
	{
	.window						{ padding: 3vh; max-height: 66vh; scrollbar-base-color: rgb(30,30,0); overflow-y: auto; }
	#menubar .menuitem:hover	{ color: rgb(255,255,255); }
	#menubar .menuitem:active	{ color: rgb(255,255,255); }
	}