html {height:100%;}

body {
	background: #a4b9d7 url(img/bg.png) repeat-x;
	margin: 0; padding: 0; 
	height:100%;
	color: #737171;
  font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
}




/*.wrapper {
   width: 1000px;
   min-height:99%;
   margin: 0 auto 0 auto; 
   padding: 0;
   background-image: url(img/content.jpg) ;
   background-repeat: repeat-y;  
}  

.wrapper {
	max-width: 1000px;
    width: 90%;
    margin: 30px auto;
	background: #fff; 
	position:relative;
	box-shadow:  0px 5px 10px 0px rgba(50, 50, 50, 0.2);
	border-radius: 20px 0 20px 0; 
} */
.wrapper { 
max-width: 1000px;
width: 100%;
margin: 0 auto 0 auto;
padding: 0;
position:relative; 
background-image: url(img/content.jpg) ;
background-repeat: repeat-y; 
align-items:stretch;
}

#topmenubar2container  {width:100%; position:fixed; top:-60px; left:0;}
#topmenubar2  { max-width: 1000px; width: 90%; margin: 0 auto; }
#topmenubar2container.isvisible {top:0;  transition:0.5s top;}

.header, .footer { width: 100%;  position:relative; border-radius: 0 0 0 0;}

.header  { position:relative; float:left; width: 100%;  margin: 0 0 0 0;  }
.footer {	position:relative; float:left;  height:30px;} 

.logopic {max-width:100%;  position:absolute; top:100px; left: 3%; }
/*.innerheader {height:100px; width:100%; background: #fff url(img/header-logo.jpg) no-repeat center center;}*/
.innerheader {
	height:100px;
	background-image: url(img/header-logo.jpg);
	background-repeat:no-repeat;
background-size:contain;
background-position:center;
  }

.contentbox {width: 74%; background-image: url(img/content.jpg) ;
   background-repeat: repeat-y;
   }
.contentbox .inner {min-height:99%; margin: 15px 10% 20px 10%;}
.contentbox .inner p img {max-width:100%; height: auto ! important;}

.contentboxwide {width: 100% ! important;  }
.contentboxwide .inner {margin: 15px 2% 20px 2%;}

.rightbox {width: 26%; float:right;     background-image: url(img/content.jpg) ;
   background-repeat: repeat-y;  }
.rightbox .inner {margin: 15px 4% 20px 1%;}
.rightbox .inner p img {max-width:100%; height: auto ! important;}

.footer .inner { 	font-size: 14px;
	color: #FFFFFF;
  padding-left: 260px;
	width: auto;
	padding: 0;
  vertical-align: middle;
 }

.footer .inner span { color: #777; }


.flex-direction-nav {display:none;}
.flexslider {height:150px; margin: 0 0 0 0 ! important;}

/***********************************

	menu

************************************/

a#mobilemenu  {
    display:  none;   
}

a#mobilemenu span {display:block; padding: 10px 15px ; font-weight: bold;}

.search_box {float:right;  width:160px; text-align:right; margin-top:9px; }
.search_box .searchstring {	
	width:90px;	
	font-size:14px;
	padding: 5px 2px 3px 2px;
	border:  #fff 2px solid; 
	background: rgba(255, 255, 255, 0.7);
}

.search_box .submitbutton {
	vertical-align: top; margin:0 9px 0 2px;  background: none; border: none;
}


#showlogin {display:block; float:left; position:relative;  width:30px; text-align:right; margin:6px 6px 0 0; }
#login-box {position:absolute; width:200px; left:30px; top:-10px; padding:5px; font-size:11px; z-index:2000; background: rgba(255, 255, 255, 0.9);}
#login-box .loginsubmit {border:0;}
#login-box .inputfield {width:80px; border: 1px solid #c9e8f9; padding:1px;}


.topmenubar {height:30px; display:block;clear:both; background: transparent url(img/menue-bg1.png) repeat-x;}

a#mobilemenu {background:#0b3e77;}
.topmenubar, a#mobilemenu {}

.topmenubar a, a#mobilemenu {font-size: 12px ! important; font-family:Arial, Helvetica, sans-serif;}
	



/* Link Formatting */

ul.nav, ul.extramenu { 
	list-style-type: none;
	margin-left:  10px;  
	padding: 0px;
	width: auto;
	/*
	(Disappearing List-Background)
	http://www.positioniseverything.net/explorer/ie-listbug.html
	*/
	position: relative; /* Fix the Stupid IE6 Bug */

}


ul.nav li {float: left; color: #C9D4E4; text-align: center; font-weight: normal; }
.nav li a {display: block; background: transparent; padding: 8px 10px 4px 10px; color: #043882; text-decoration: none; font-weight: normal;text-align: center; }

/* Hover Formatting 
.nav  li a:hover, .nav li a:focus, .nav li a:active, .nav li a.active, .nav a.menu-current, .nav a.menu-parent {
	 XXbackground-color: #9e8d7b;  color: #fff;
}         #043882    */

.nav li a:hover, .nav li a:focus, .nav li a:active, .nav li a.active, .nav a.menu-current, .nav a.menu-parent.navlev0 {background: url(img/nav_bg_l0_hi.png) center; color: #043882; text-align:left;}
/*.nav a.menu-parent {background: url(img/navbgl1hi.jpg) center; font-weight: bold; color: #043882; }*/
.nav a.menu-current {background: url(img/nav_bg_l0_hi.png) center; font-weight: bold; color: #043882; text-align:left;}  
.nav a.menu-parent.navlev0 {background: url(img/nav_bg_l0_hi.png) center; font-weight: bold; color: #043882; text-align:left;}

 
/* 2nd Child menu */
.nav li ul {position: absolute; text-align:left; width: 11em; margin: 0; display: none; text-transform: none; border-bottom: 0px solid #145167; border-left: 0px solid #145167; border-right: 0px solid #145167; font-size: 100%; background: url(img/menue-bg.png) repeat;}
.nav li ul li {width: 11em; text-align: left; font-weight: normal; margin: 0; padding: 0; line-height: 1.2em;}
.nav li ul li a {width: 10.5em; text-align:left; padding: .3em .1em .3em .4em; color: #FFFFFF; border-top: 1px solid #145167; font-weight: normal;  background: none;}


/* 2nd Child link hover */
.nav li ul a:hover,  .nav li ul a.menu-current { background: #C9D4E4 url(img/nav_bg_l1_hi.jpg); color:#043882;}*/
.nav a.menu-parent.navlev1 {background: url(img/nav_bg_l1_hi.jpg); color: #043882;}


/* Show and hide */
.nav li:hover ul, .nav li a:focus ul {display: block;}
.nav li ul ul { display: none;}
.nav li:hover ul ul {display: none;}
.nav li:hover>ul, .nav li li:hover>ul {display: block;  z-index: 1000;}



/* 3 Ebene  */

.nav li ul li ul	{ 
	margin: -20px 0 0 70%; 
	padding:0;
	z-index: 9999;  
	display: none;
	width: 11em; 
}
.nav a.menu-parent, a.menu-parent.navlev2 {background: url(img/nav_bg_l1_hi.jpg); color: #043882;}
.nav li ul li ul li	{width: 11em;}

/* Positioning hover */

.nav li {position: relative;}
.nav li:hover {
	z-index: 10000;	
	white-space: normal;
}


/*Flexslider */

div.flex-viewport ol.flex-control-nav {

	bottom: 10px ! important; 

}





/*==================================================================================================*/





/*Topic Sidebar:*/

.mod_topic_prevnext div {clear:left; font-size:11px; margin-top:20px;}
.mod_topic_prevnext a.videoblock {
	display: block;
	float:left;
	width: 100px;
	max-width:50%;
	height: 60px;
	overflow: hidden;
	margin: 0 5px 0 0;
	background:#000;
}

.mod_topic_prevnext a.videoblock img {
	width: 100%;
	height:auto;
	opacity:0.8;
}


.mod_topic_prevnext a:hover.videoblock img {
	width: 130% ! important;
	height:auto;
	margin-left: -15% ! important;
	margin-top: -5px ! important;
	opacity:1;
}

/*frontteaserblock*/


.frontteaserblock {margin:30px 0; width:100%; overflow:hidden;}
.frontteaserblock div {width:102%;}
.frontteaserblock div a {float:left; display:block; width:23.8%; margin: 0 1% 10px 0; padding-bottom:10px; opacity:0.9; background:#fff; border-bottom: 2px solid #eee; }
.frontteaserblock div a span {display:block;}
.frontteaserblock div a span.picturebackground {width:100%; background-size: 100% auto, auto; background-position: center center;  transition:0.6s all;}
.frontteaserblock div a img {width:100%; float:left; opacity:1; transition:0.9s all;}
.frontteaserblock div a .mt_title {margin:10px 5px 0 10px; height:40px; font-size:16px; line-height:120%; font-weight:bold; }
.frontteaserblock div a .mt_desc {margin:0 5px 0 10px; XXheight:130px; line-height:120%; font-size:0.9em; }
.frontteaserblock div a:hover  {opacity:1;}
.frontteaserblock div a:hover span.picturebackground {width:100%; background-size: 180% auto, auto; }
.frontteaserblock div a:hover img {opacity:0;}

.flexslider {}
.flexslider li {XXmargin: 0 ! important; padding: 0;}

.mobiles_only {display: none;}
.desktops_only {}

.mod_topic_commentbox {	background: transparent;}

.img {
max-width:100%;
height:auto;
width: auto; /* ie 8 */
z-index:-10;
}
 

#mobmenutop {display:none;}

.dismobmenu {display:none;}

#menu {display:none;} 
.slicknav_menu {display:none;}
.innerheadermob {display:none;}

.responsive-video { margin-top: 80px; max-width: 100%; height: auto;}     /* im Droplet mp4video erste Zeile ersetzen durch $rv= "<video class=\"responsive-video\" controls=\"\" "; */

/* ================================================================================================= */

/* Smaller Screens  

@media screen and (max-width: 1024px) {
	.wrapper { width: 100%; margin: 0 auto; 	box-shadow:  none; border-radius: 0 0 0 0; }
	#topmenubar2  {width: 100%;}
}
*/


@media screen and (max-width: 768px) {
.js #menu {
		display:none;
}
.js .slicknav_menu {
		display:block;
}
.dismobmenu {
	display: block;
}
#mobmenutop { 
 		display:  block;
}
#menu {
	display:none;
} 

#dialog-cookies
{
/*display:none;*/
}

.slicknav_menu {
	display:block;
}
.innerheadermob {
	display:block;
}
.innerheader {
	display:none;
} 
	.mobiles_only {display: block;}
	.desktops_only {display: none;}
	/*.search_box {margin-top:-30px;}*/

	/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.innerheadermob {
height:auto;
width: 100%; /* ie 8 */
}

   
	.container { width: 100%; border-left: none;	border-right: none;}
	.contentbox {width: 100%; margin: 20px 0 20px 0;}
	.contentbox .inner {margin: 10px;  } 
 	.flexslider {display:none;}
 	#topmenubar1 {display: none;}
 	#topmenubar2container {display:none;}
  .rightbox {display: none;}
 	ul.nav a.menu-current {  background-color: #4dc4ef;}	
 	.tp_picture  {max-width:40%;}
 	.tp_picture .tp_pic {max-width:100%;}
 	.frontteaserblock div a {width:49%; }
 }

 .footer {
	display:block;
} 



/* ================================================================================================= */

/* Smaller Screens  

@media screen and (max-width: 440px) {
	.wrapper { width: 100%;}
	.frontteaserblock div {width:100%;}
	.frontteaserblock div a {float:none; width:100%; clear:left; height:auto ! important; clear:both; border:none;}
	.frontteaserblock div .row1 {}	
	.frontteaserblock div a .mt_title {height:auto; margin-bottom:20px;}
}     */