html, body {height:100%; }
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; }

body {
	margin:0;
	padding:0;	
	background: #03193e url(img/bodybg.jpg) no-repeat fixed;
	color:#ecf5f6;	
}

	
/*----- boxes -------------------------*/
.clearer {clear:both;height:150px; width:100%; }


.wrapper {	
	width:100%;
	height:100%;	
	margin: 0 0;
	text-align: left;

}

#leftbox {
	width:30%;
	XXmax-width:400px;	
	padding:0;
	min-height: 70vh;
  	display: flex;
  	align-items: center;     /* Vertikale Zentrierung */
	justify-content: right;
	position:fixed;
}
.mainbox {	width:60%; margin-left: 35%; position:absolute; top:0px;}





.contentbox {float:left; width:70%; }
.contentbox .inner { margin: 80px 0 80px 0;  }
.mainbox #contentwide {float:left; width:90%;}

.rightbox {float:right;  width:25%; max-width:250px; font-size:0.95em;}
.rightbox .inner { margin: 100px 0 0 0;}

.rightbox .inner h2 { margin:5px 0 0 0; line-height: 120%; }
.rightbox .inner h3 { margin:5px 0 0 0; line-height: 120%;  }
.rightbox .inner p { margin:0 0 5px 0; 	line-height: 130%; }





.footer {width:100%; height:150px; position: fixed; left: 0px;	bottom: 0px; background: transparent url(img/footer.png) repeat-x; pointer-events: none; background-size: 100% 100%;	}
.footer .inner { width:35%; max-width:400px;  margin:80px 0 0 30px;  font-size:11px; color:#839cc3; }
.footer .inner a {text-decoration: none; color:#aec0db ! important;}





#mainmenu {	
	max-width:350px;	
	text-align:right;
}

#mainmenu ul {
	margin: 0;
	padding: 0 0 20px 0;
	list-style-type: none;
	list-style-image: none;	
}

#mainmenu li {
	display:block;	
	padding: 0;
	list-style-type: none;
	list-style-image: none;
	margin:0 0 0 0;			
}



#mainmenu li ul {display:none; }
#mainmenu li.menu-current>ul, #mainmenu li.menu-parent>ul {display:block;}
#mainmenu li ul li {margin:0; font-size:1em;}


#mainmenu a {}


#mainmenu a {
	display:block;	
	color: #fff;
	text-decoration: none;
	font-size:0.95em;
	padding:4px 10px 4px 0;
	margin:0 ;	
	text-shadow: 0px 0px 4px #fff;
	background-color: transparent;	
	word-wrap: break-word;
	//background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: right top;	
}


#mainmenu a.lev0 {font-size:1.2em;  font-weight: bold; padding:15px 10px 4px 0;}
#mainmenu a.lev1 {font-size:1.0em; padding:6px 10px 4px 0; }


#mainmenu a.menu-current, #mainmenu a.menu-parent {font-weight: bold; background-image: url(img/mbg.png); }
#mainmenu a.menu-current {color: #dcf0f2; }
#mainmenu a:hover {color: #b3f8fe; font-weight: bold; text-shadow: none; background-image:  url(img/mhbg.png);}
#mainmenu li.menu-parent li.menu-current a {}


#go-up, #menuswitch {  position: fixed;  bottom: 20px;  right: 20px; z-index: 1000; transition: all 0.4s ease;  cursor: pointer;}

#menuswitch {top:20px; right:1%; bottom:auto; display:none; opacity:0.7;}
#go-up {display:block; opacity: 0; width: 30px; height: 30px; background: 0b3c78; border-radius:50%; border: 1px solid #fff; text-align:center;}
#go-up.show {opacity: 1;  }
#go-up:hover { bottom: 25px;}
#go-up img {  width: 16px; margin-top:4px; height: auto;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*Extras   */
.mod_topic_loop img.tp_thumb {max-width: 25% ! important;}
.topic_block2 img.tp_pic {max-width: 100% ! important;}





/* ======================================================================
Smaller Screens */




@media screen and (max-width: 1100px) {
	
	.wrapper {}	
	.mainbox {	width:82%; margin-left: 12%; padding-bottom: 60px;}
	
	.footer { height:60px; clear:both;}
	.footer .inner { width:80%; max-width:400px;  margin:30px 0 0 10px;  }
	
	#menuswitch {display:block;}
	#nav2closer {position:fixed; display:none; width:100%; height:100%; z-index:7000; top: 0; left: 0; background: rgba(0,0,0,0.4); }
	body.menuopen #nav2closer {display:block;}
	
	#leftbox {z-index:9000;}
	#mainmenu li ul {display:block; }
	#mainmenu {position:fixed; z-index:9000; left: -250px; top: 0; width:250px; height: 100vh; background: rgba(0,0,0,0.6); overflow-y: auto; transition: 1s left; }
	body.menuopen #mainmenu {left: 0;}
	
}

	
@media screen and (max-width: 700px) {
	body { background-image: url(img/bodybgmobile.jpg);}
		
	.contentbox, .mainbox #contentwide, .rightbox {float:none; font-size: 1em; width:98%; margin:0;  max-width: 98%; overflow-x: hidden;}
	.contentbox { padding: 30px 0 0 0;  }
	.contentbox .inner { margin: 20px 0 20px 0; }
	.rightbox .inner {     margin: 20px 0 0 0;}
	
	.clearer {height:60px;}
}