@charset "utf-8";

/* *************** General ****************** */
body, html {
	position: absolute;
	font-family: Verdana, Arial, SansSerif;
	width: 100%;
	padding: 0;
	margin: 0 auto;
	background-color: #2E3956;
	font-size: 1.4vh;
}

a {
	color: #000000;
	text-decoration: none;
}
a:hover {
	font-weight: bold;
}
ul {
	margin: 0em 0 0 1.5em;
	padding: 0;
}
li {
	list-style-position: outside;
}
em {
	color: #ce0202;
}
h2 {
	font-size: larger;
	font-weight: bold;
	margin: 0;;
}
h3 {
	font-size: medium;
	font-weight: bold;
	display: inline;
}

/* *************** Classes ****************** */
.yellow {
	color: #fff100;
}
.green {
	color: #6c7740;
	}
.red {
	color: #ce0202;
}
.larger {
	font-size: larger;
}
.smaler {
	padding-left: 1em;
	font-size: smaller;
}
/* +++++++++++++++ Content ++++++++++++++++++ */
#outerPage {
	position: absolute;
	box-sizing: border-box;
	width: 99vw;
	height: 100vh;
	padding: 0 auto;
	float: left;

}
#innerPage {
	position: relative;
	height: 100vh;
	text-align: left;
	width: fit-content;
	float: left;
}
#innerContent, p.leg {
	position: relative;
	box-sizing: border-box;
	top: -28vh;
	padding: 0 1.5em;
	height: 16vh;
	width: 64vh;
	z-index: 2;
	overflow: auto;
}
p.leg {
	font-weight: bold;
	color: #D1CCE5;
}
#HBimg {
	position: relative;
	display: block;
	rotate: 8deg;
	top: 38em;
	left: -6em;
	height: 29%;
	z-index: 3;
	overflow: hidden;
}
#innerContent {
	background-color: #ffffff;
	margin-top: 2.5em;
	padding-bottom: 5em;
	height: 64vh;
}
#innerContent a {
	color: #d1a82b;
}
#innerContent a:hover {
	font-weight: bold;
}
/* ----------------------- Header ------------------------- */
#header {
	position: relative;
	display: block;
	pointer-events: none;
	box-sizing: border-box;
	padding-top: 1.5em;
	width: fit-content;
	z-index: 3;
	float: none;
}
#header img {
	width: 20vh;
	pointer-events: all;
}
#header a {
	display: block;
}
#rightrow {
	position: relative;
	box-sizing: border-box;
	display: block;
	top: 0; 
	height: 100vh;
	width: 29vh;
	float: left;
	overflow: visible;
}
#rightrow img {
	height: 100vh;
}
#rightrow img.tree {
	height: 79.9vh;
}
/* ------------------------ MENÜ -------------------------- */
#menu {
	position: relative;
	box-sizing: border-box;
	display: block;
	line-height: 2.7vh;
	height: 98vh;
	padding: 16.5vh 2.5vh 0 0;
	top: 0;
	left: auto;
	float: left;
	text-align: right;
	z-index: 5;
}
#menu.On {
	width: 25vw;
	min-width: min-content;
}
#menu.Off {
	width: 7vw;
}
#menu.On #entr {
/*	width: 33vw;*/
}
#menu a {
	color:#ffffff;
	display: block;
}
#menu a:hover {
	color:#fff100;
}
#menu a.yellow {
	color: #fff100;
}
#menu a.cnt {

	display:  none;
}
#menu svg {
	fill: #ffffff;
}
#menu svg:hover {
	fill: #fff100;
}
#menu a.cnt svg#a {
	display: none;
}
/* ----------------------- Portrait ------------------------- */
@media screen and (orientation: portrait){
	#menu.On {
		width: 24vw;
	}
	#menu a.cnt{
		display: block;
	}	
	#innerPage {

	}
	#outerPage .Narrow {
		width: 65vw;
	}
	#outerPage .Wide {
		width: 85vw;
	}
	#header {
		width: 65vw;
	}
	#innerContent {
		height: 65vh;
		margin: 0;
		padding-top: 1vh;
		margin-top: 2.5em;
	}
	p.leg {
		width: auto;
	}
	#rightrow.Narrow {
		margin-left: 24vw;
		width: 65vw;
		height: auto;
	}
	#rightrow.Narrow img {
		width: 65vw;
		height: auto;
	}
	#rightrow.wide {
		margin-left: 7vw;
	}
	#rightrow.Wide img {
		width: 85vw;
		height: auto;
	}
	#HBimg {
		left: -12em;
	}
}
/* ------------------------ Mobile -------------------------- */
@media screen and (max-width: 650px), (max-height: 450px){
	#innerContent {	font-size: larger;}

}