html {height:100%;}

:root {
  scroll-behavior: smooth;
}

body {
	margin: 0; padding: 0; 
	height:100%;
	color:#333;	
	/*background: #fff XXurl(img/p3.jpg) repeat fixed;*/
}

.wrapper {
	max-width: 1400px;
    width: 90%;
    margin: 30px auto;
	/*background: #d9a6007d;*/
	background: #a9cbd9;
	position:relative;
	box-shadow:  0px 5px 10px 0px rgba(50, 50, 50, 0.2);
	border-radius: 20px 0 20px 0; 
}

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

.header, .footer { width: 100%;  position:relative; border-radius: 20px 0 0 0;}
.header  { position:relative; float:left; width: 100%;  margin: 0 0 0 0;  }
.footer { height:140px; border-radius: 0 0 20px 0; clear:both; background: #0b3e77 url(../../media/slides/slide1.jpg) no-repeat center center;}

.logopic {max-width:15%;  position:absolute; top:1%; left: 1%;}
.innerheader {height:200px; width:100%; background: #fff url(../../media/slides/slide1.jpg) no-repeat center center;}

.topmenubar { clear: both; margin-bottom:30px;}

.contentbox {width: 48%; float:left; }
.contentbox .inner {min-height:200px; margin: 15px 1% 20px 4%;}
.contentbox .inner p img {max-width:100%; height: auto ! important;}

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

.rightbox {width: 48%; float:right;  }
.rightbox .inner {margin: 15px 4% 20px 1%;}
.rightbox .inner p img {max-width:100%; height: auto ! important;}

.footer .inner { position:absolute; top:8px; left: 1%; width:98%; font-size:0.8em; text-align:center; line-height:140%;  color: #fff ! important; 	border-radius: 0 0 20px 0;  /* background: rgba(11, 62, 119, 0.5);*/ 
background: rgb(1,31,58);
background: -moz-linear-gradient(120deg, rgba(1,31,58,0.8) 0%, rgba(9,69,121,0.8) 35%, rgba(0,125,255,0.4) 100%);
background: -webkit-linear-gradient(120deg, rgba(1,31,58,0.8) 0%, rgba(9,69,121,0.8) 35%, rgba(0,125,255,0.4) 100%);
background: linear-gradient(120deg, rgba(1,31,58,0.8) 0%, rgba(9,69,121,0.8) 35%, rgba(0,125,255,0.4) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#011f3a",endColorstr="#007dff",GradientType=1);}
.footer .inner span { font-size:0.7em;}
.footer .inner a, .footer .inner h3 {color: #fff ! important;}
.footer .inner a:hover {color: #ffffffc9 ! important;}

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

/* Flexbox für Footer */
.flexContainer {
    display: flex;
	margin-top: -10px;
	flex-flow: row wrap;
	justify-content: center;
}
.flexSpaceAround {
    justify-content: space-around;
}
.subContainer {
    width: 100%;
    margin: 0 auto;
}
.col,
a.col {
    width: 25%;
    border: 0px;
    border-radius: 8px;
    background: transparent;
    padding: 10px;
	margin-top: -10px;
	text-align:left;
}
.col_2,
a.col_2 {
    width: 15%;
    border: 0px;
    border-radius: 0px;
    background: transparent;
    padding: 10px;
	text-align:right;
}

img.col_2 {
	width: 51px;
	height:51px;
}
/* end Flexbox für Footer */

/* Start end of Page */
.cop_fu {
	clear: both;
}
.cop_fun {
	margin-top: -5px;
}
.text-center {
	text-align: center !important;
}
.pb-2 {
	padding-bottom: 0.5rem !important;
}
.py-2 {
	font-size: 14px;
}
.py-3 {
	font-size: 12px;
}
.
.mx-auto {
	margin-right: auto !important;
	margin-left: auto !important;
}
.mod_copyright {
	margin-top: -25px;
}
.cont-cop, .cont-cop a {
	color: rgba(199, 153, 0) !important;
}
.cont-cope, .cont-cope a {
	color: rgba(182, 140, 0) !important;
}
.cont-cope, .cont-cope a:hover {
	color: rgba(199, 153, 0) !important;
}
.mod_copyright div {
	word-wrap: break-word;
}

/* end of Page */

.icons_rot	{float: left;margin-left: 8px;margin-right: 5px;margin-top:2px;width:30px;height:30px;}
.icons_rot img {opacity:0.8;-webkit-transition:all 0.8s ease;-moz-transition:all 0.8s ease;-o-transition:all 0.8s ease;transition:all 0.8s ease;-webkit-transition:-webkit-transform .8s ease-in-out;transition:transform .8s ease-in-out;}
.icons_rot img:hover {opacity:1.0;-webkit-transform:rotate(360deg);transform:rotate(360deg);}

.topcontrol_1 {
	margin-right: 10px;
	margin-bottom: 10px;
}

/***********************************
	menu
************************************/

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


.flag {margin-top: 4px;}
.search_box {float:right;  width:250px; text-align:right; margin-top:4px; padding-right: 10px;}
.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; margin-top: 4px;
}

#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;}



/* Link Formatting */
.topmenubar, 
a#mobilemenu,
.nav a.menu-current {
	background:#000 url(img/nav_b.png) repeat-x;
}

.topmenubar a,
a#mobilemenu {
	font-size: 20px ! important;
	font-family: "Oswald",
	sans-serif; color:#fff;
}

ul.nav, ul.extramenu { 
	list-style-type: none;
	margin: 0; padding: 0;
	position: relative; 
	
}

ul.nav li {
	float: left; 
	list-style-type: none;
	list-style-image: none;
	position: relative;  	
	margin: 0; padding: 0;
}

.nav li a {
	display: block; 	
	text-decoration: none;
	line-height:120%;
	text-shadow: 1px 1px 1px #000;
	padding: 10px 10px;
    color:#fff;
}


/* Hover Formatting */
.nav li a:hover, 
.nav li a:focus, 
.nav li a:active, 
.nav li a.active,
.nav li ul a:hover,
.nav li ul a:focus,
.nav li ul a:active,
.nav li ul a.active,
.nav li ul li a:hover,
.nav li ul li a:focus,
.nav li ul li a:active,
.nav li ul li a.active,
.nav li ul a.menu-current,
.nav a.menu-current, 
.nav a.menu-parent {
	 background:#000 url(img/nav_c.png) repeat-x; 
	 color: #930616;
}

/* 2 level */
.nav li ul {
    display: none;
    width: 15em; 
    margin: 0; padding:0;
    position: absolute;
	box-shadow: 0 10px 40px #666;
}

.nav li ul li {
	width: 15em; 
	text-align: left; 
	margin: 0; 
	padding: 0;
	border-right: none;
	background-color:#0b3e77;
}
.nav li ul li a {	
    color: #fff;
	padding: 6px 10px; 
}

/* 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 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%; height: 150px; 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;
}

/* ================================================================================================= */
/* 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) {
	.mobiles_only {display: block;}
	.desktops_only {display: none;}
	
	.search_box {margin-top:-30px;}

	
	
	
	
	/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	.container { width: 100%; border-left: none;	border-right: none;}
	
	.mainbox {margin: 20px 0 20px 0;}
	.contentbox {width: 100%; margin: 20px 0 20px 0;}
	.rightbox {width: 100%;  margin: 20px 0 20px 0;}
	
	
	.footer { width: 100%; }
	.contentbox .inner {margin: 10px;  }
	.rightbox .inner {margin: 10px;  }
	
	
	 .header {height:160px; background: #fff url(../../media/slides/slide1.jpg) no-repeat center center; overflow: hidden; }	 
	.flexslider {display:none;}
	
	
	#topmenubar1 { height:30px; display: none;}
	#topmenubar2container {display:none;}
	
	
	a#mobilemenu { 
		display:  block;    
		color: #fff;
		width:100%;
		clear: both;
		font-size:16px;
	}
	
	
	
	ul.nav {max-width:260px; position:absolute; left:0; z-index:2000;}
	 ul.nav ul, u.nav ul ul {width:100% ! important; position: static; margin: 0 0 0 0 ! important; }
	
	ul.nav ul {}
	ul.nav li ul {display: block ! important;}
	ul.nav li, ul.nav li li, ul.nav li li li {
		width:100% ! important;
		float: left;
		border-right: none; 	
		display: block;
		border-bottom: 1px solid #fff;
		background-color: #333;	
	}
	
	
	ul.nav li.menu-parent > ul, ul.nav li.menu-current > ul {display: block}	
	
	ul.nav a {padding: 10px 5px; color:#fff;}
	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%; }
	
	
}


/* ================================================================================================= */
/* Smaller Screens */
@media screen and (max-width: 440px) {

	.wrapper {width: 100%;}
	.logopic {max-width: 35%; position: absolute; top: 15px; left: 15px;}
	
	.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;}
	
	.footer .inner {position: absolute; top: 4px; /*position: sticky; */font-size: 0.6em; height: 322px;}
	.flex-container { display: flex; flex-wrap: wrap ! important; justify-content: center; align-items: center; align-items: stretch;}
	.flex-container > div { width: auto; margin: 10px; text-align: left; font-size: 15px;}
	.icons_rot {margin-bottom: 100px;}
	h3 {line-height: 20%;}
	.footer {height: 330px; margin-bottom: 50px ! important; background: #0b3e77 url() no-repeat center center;}
	
	.topcontrol_1 {margin-bottom: 80px;}
	.cc-color-override--723204310.cc-revoke {font-size: small;}
	.mod_copyright {margin-top: -45px; margin-bottom: 25px;}
	.py-2 {font-size: 10px;}
	.py-3 {font-size: 8px;}
}


}
@media screen and (max-width: 897px) {
.footer {
  margin-bottom: 25px;}
.cont-cop {
  color: rgb(255, 196, 0) !important;}
}
@media screen and (max-width: 852px) {
.flex-container > div {
  font-size: 14px ! important;}
.frontteaserblock div a .mt_title {
  margin: 5px 5px 0 10px;
  height: 20px;
  font-size: 14px;
  line-height: 110%;
  font-weight: bold;}
.frontteaserblock div a .mt_desc {
  margin: 0 5px 0 10px;
  XXheight: 130px;
  line-height: 110%;
  font-size: 0.8em;}
.footer {
  margin-bottom: 25px;}
.cont-cop {
  color: rgb(255, 196, 0) !important;}
}
@media screen and (max-width: 761px) {
.flex-container > div {
  font-size: 12px ! important;}
}
@media screen and (min-width: 1200px) {

/* Flexbox für Footer */
	.flexContainer {
    display: flex;
	margin-top: -10px; 
	width: 60%;
	margin: auto; }
	
	.flexSpaceAround {
    justify-content: space-around; }
	
	.subContainer {
    width: 100%;
    margin: 0 auto; }
	
	.col,
	a.col {
    width: 26%;
    border: 0px;
    border-radius: 8px;
    background: transparent;
    padding: 10px;
	margin-top: -10px;
	text-align:left; }

	.col_1,
	a.col_1 {
    width: 18%;
    border: 0px;
    border-radius: 0px;
    background: transparent;
    padding: 10px;
	text-align:left;
	margin-top: -10px; }
	
	.col_2,
	a.col_2 {
    width: 12%;
    border: 0px;
    border-radius: 0px;
    background: transparent;
    padding: 10px;
	text-align:right; }

	div.col_2 img {
	width: 51px;
	height:51px; }
	
	.footerbox .left {
    width: 15%;
    margin: 0 0 0 0;
    float: left; }
	
	.footerbox .center {
    width: 80%;
    margin: 10px 0 0 0;
    float: left;
    text-align: center; }
/* end Flexbox für Footer */
	
}

@media screen and (min-width: 1001px) {
	/* Flexbox für Footer */
	.flexContainer {
    display: flex;
	margin-top: -10px;
	width: 60%;
	margin: auto; }
	
	.flexSpaceAround {
    justify-content: space-around; }
	
	.subContainer {
    width: 100%;
    margin: 0 auto; }
	
	.col,
	a.col {
    width: 26%;
    border: 0px;
    border-radius: 8px;
    background: transparent;
    padding: 10px;
	margin-top: -10px;
	text-align:left; }
	
	.col_1,
	a.col_1 {
    width: 18%;
    border: 0px;
    border-radius: 0px;
    background: transparent;
    padding: 10px;
	text-align:left;
	margin-top: -10px; }
	
	.col_2,
	a.col_2 {
    width: 15%;
    border: 0px;
    border-radius: 0px;
    background: transparent;
    padding: 10px;
	text-align:right; }

	div.col_2 img {
    width: 25px;
    height: 25px; }
	
	.footerbox .left {
    width: 15%;
    margin: 0 0 0 0;
    float: left; }
	
	.footerbox .center {
    width: 80%;
    margin: 10px 0 0 0;
    float: left;
    text-align: center; }
/* end Flexbox für Footer */

}