html, body { 	
	margin: 0; padding: 0;
	height:101%;
	color: #eee;
}

body {
	background: #1f1f1f url(../img/bodybg2.jpg) no-repeat fixed;
	-o-background-size: 100% 100%, auto;
	-moz-background-size: 100% 100%, auto;
	-webkit-background-size: 100% 100%, auto;
	background-size: 100% 100%, auto;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Layout Blocks
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.wrapper { 
	width: 100%; 
	margin: 0 auto 0 auto;	
}

.wrap_inner { 
	width: 100%; 
	max-width: 1200px; 
	margin: 0 auto 0 auto;
}

#topmenubox {
	background: #001567;
}

.topspacer {
	margin-top: 120px; 
	height:400px; 
	width:100%; 
	background: #800000 url(../img/header.png) no-repeat; 
	background-position: center;
	background-size: 100% auto, auto;
}


/*===========================================================
Contentbereich
*/
.container {
	margin: 0 auto 0 auto; 
	width: 100%; 
	max-width:1200px; 
	padding-top: 3px;
}


/*====================================================
Alles rechts neben left
ab hier: 1/3 grid
*/
.mainbox {
	width:100%; 
	float:right; 
	display:inline;
}

.content { /* main content */
	width: 66%;
	float: left;
	display:inline;
	margin-left: 0;
}

.mainbox .content img { 
	max-width:100%; 
	height:auto ! important;
}

.mainbox .contentwide {
	width:100%; 
	margin:0 0 0 0;
}


/* right innerhalb von .contentwide, geht auf mobiles nach oben*/
.mainbox .contentwide .contentwidenarrow {
	width:66%;
}

#rightbox { 
	width: 32%; 
	float: right; 
	display:inline; 
	border-left:1px #ddd solid; 
}

#rightbox .inner { 
	margin: 0 3% 3px 3%; 
	font-size:0.9em; 
	line-height:135%;
}

#rightbox .inner img { 
	max-width:100%; 
	height:auto ! important;
}

.clearcontent {
	height:60px; 
	clear:both; 
}

.footerbox {
	height:80px; 
	font-size:11px; 
	color: #999; 
	width: 100%; 
	background: #222;
}

.footerbox .left {
	width: 25%; 
	margin:0 0 0 0; 
	float:left;
}

.footerbox .center {
	width: 50%; 
	margin: 10px 0 0 0; 
	float:left; 
	text-align:center;
}

#gototopswitch {
	float:right; 
	margin: 10px 10px 0 0;
}


/* Top and Menu Box */
#topmenubox {
	width: 100%; 
	height:120px; 
	margin:0 0 0 0; 
	position:fixed; 
	z-index:1000; 
	top:0; 
	left:0%; 
	transition: 0.5s all; 
	border-bottom:5px solid #de8818;
}

#topmenubox .wrap_inner {
	position:relative; 
	height:100%; 
	background: #001567;	 
}

#topmenubox a.logo img {
	height: 120px; 
	max-height:100%; 
	max-width:100%; 
	position: absolute; 
	bottom:0px;
}

#topmenubox.reduced {
	height:42px; 
	transition: 0.5s all;
}


/* Search Box in header */
li.search_box_li a {
	border: none ! important;
}

.menuebox {
	width: 75%; 
	height:100%; 
	float:left; 
	position:relative;
} 

.toggleMenu {
	display:none;
}

#openrightboxswitch, 
#closerightboxswitch {
	display:none;
}

/* nav: see below */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.breadcrumbs {
	height:30px;
	line-height:100%;
	margin: 0 0 0 0;
	padding: 3px 0 3px 0;
	clear:both;	
}

.innerbc {
	font-size:14px;
	margin:10px 0 0 0;
}

.breadcrumbs .innerbc span {
	background: transparent url(../img/bclink.gif) no-repeat; 
	padding: 6px 2px 0px 12px; 
	font-weight: normal; 
}
	
.breadcrumbs .innerbc a {
	padding:1px;
	border-bottom: 1px dotted #666;
	text-decoration: none;
}

.breadcrumbs .innerbc a:hover {
	border-bottom: 1px solid #505567;
}
	
.breadcrumbs .innerbc .menu-current a{
	color: #fff;
}

.frontpage .breadcrumbs {
	display:none;
}

#aprevnext {
	display:block; 
	width:90px; 
	height:27px; 
	float:right;
}

#aprevnext a {
	display:block; 
	width:40px; 
	height:27px; 
	float:right; 
	opacity:0.5; 
	border:none;
}

#aprevnext a.aprev {
	background: url(../img/prev.png) no-repeat center top; 
}

#aprevnext a.anext {
	background: url(../img/next.png) no-repeat center top; 
}

#aprevnext a:hover {
	opacity:0.8
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
	####	Header Menu #####
	#########################

	Horizontal Drop-Down Menu based off :
	http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp
	
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


/* Remove List Formattings
~~~~~~~~~~~~~~~~~~~~ */
#nav {
	position: absolute;
	right: 0;
	bottom:0;	
	border: 0;	
	padding:0;
}

#nav ul, #nav2 ul {
	list-style-type: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
	width: auto;
	position: relative;
	z-index: 800;
}

#nav ul li, #nav2 ul li {
	list-style-type: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
}


/* Root Level Link Formatting */
#nav ul li {
	float: left; 
	display:inline; 
	color: #999; 
	text-align: left; 
	font-weight: normal; 
	list-style-type: none; 
	list-style-image: none ;
}

#nav ul li a {
	display: block; 
	font-size: 16px; 
	border-right:1px #333 solid; 
	color: #eee; 
	text-decoration: none;
}

#nav ul li a span {
	display:block; 
	padding: 11px 12px 10px 12px; 
}


/* Root Level link hover */
#nav ul li a:hover, 
#nav li a:focus, 
#nav li a:active, 
#nav ul li a.active, 
#nav a.menu-current, 
#nav a.menu-parent {
	color: #000; 
	font-weight: bold; 
	background: #ffcc00 ; 
}


/*Current page Customisations*/
#nav a.menu-current	{
	font-weight: bold; 
	color: #000;
}


/* 2nd Child menu */
#nav li ul {
	position: absolute; 
	width: 200px; 
	margin: -3px 0 0 -10000px; 
	opacity:0.0; 
	text-transform: none; 
	border-bottom: 1px solid #333; 
	font-size: 13px; 	
	background: #555; 
	box-shadow: 0px 10px 10px -4px rgba(0, 0, 0, 0.9);
}

#nav li ul li {
	text-align: left; 
	font-weight: normal; 
	margin: 0; 
	padding: 0; 
	line-height: 1.2em; 
}

#nav li ul li a {
	width: 200px; 
	height:auto; 
	text-shadow: none; 
	margin:0; 
	padding: 0; 
	color: #ddd; 
	border-top: 1px solid #333; 
	font-weight: normal; 
	font-size: 13px; 
	background: none;
}

#nav li ul li a span {
	display:block; 
	padding:8px; 
}


/* 2nd Child link hover */
#nav li ul a:hover, 
#nav li ul a.menu-current { 
	background-color: #ffcc00 ! important;
}

#nav li ul a.menu-expand {
	background: transparent url(../img/arr-right.png) no-repeat right 5px ; 
}

#nav li ul a.menu-parent {
	background: #ffcc00 url(../img/arr-right.png) no-repeat right 5px; 
}

#nav li ul a { 
	transition:2s all;
}

#nav li ul a:hover {
	transition:0.2s all;
}


/* Show and hide */
#nav li:hover ul, 
#nav li a:focus ul, 
#nav li.tabselected ul {
	margin: -3px 0 0 0; 
	opacity:1; 
	transition:0.5s opacity;
}

#nav li ul ul {
	margin-left: -10000px; 
	opacity:0.0; 
	transition:0.5s opacity;
}

#nav li:hover ul ul, 
#nav li.subMenu ul ul {
	margin-left: -10000px; 
	opacity:0.0; 
	transition:0.5s opacity;
}

#nav li:hover>ul, #nav li li:hover>ul {
	opacity:1; 
	margin-left: 0; 
	transition:0.5s opacity; 
	z-index: 1000;
}

#nav ul li ul li:hover>ul {
	margin-left: -30%; 
	opacity:0.9;
}


/* 3rd Child Menu Appreances */
#nav li ul li ul {
	width: 180px; 
	margin: 10px 0 0 -40%; 
	z-index: 2000; 
}

#nav li ul li ul li	{
	width: 100%;
}

#nav li ul li ul li a {
	width: 100%;
}


/* Positioning the Pop-out Drops */
#nav li {
	position: relative;
}

#nav ul ul ul {
	position: absolute;
	top: 1px;
	left: 100%;
}


/* Better: */
#nav li:hover {
	z-index: 1000;		/* ...and here. this makes sure active item is always above anything else in the menu */
	white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
							see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}

/* end menu */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


/* Login Box */

#showlogin {
	display: block; 
	margin: 20px 0 0 10px;
}

#login-box {
	margin-top:0; 
	padding:0; 
	font-size: 10px;
}

#login-box .inputfield {		
	font-size: 10px;
	padding:2px;
	border: 1px solid #505567;
	background-color: #f2f3f8;
	width:100%;	
}

#login-box .loginsubmit {
	float:right;
}

.showonmobiles {
	display:none;
}


/*CSS for example Accordion #hc1*/
#haccordion1 {
	background:#222;
	overflow:hidden;
	/*border-left:5px solid #000; */
	height:200px;
	padding: 0;
}

#haccordion1 ul{
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden; /*leave as is*/
	width:102%;
}

#haccordion1 li{
	margin:0 5px 0 0; 	/*Spacing between each LI container*/
	padding: 0;
	display: block; 	/*leave as is*/
	width: 100%; 		/*For users with JS disabled: Width of each content*/
	height: 200px; 		/*For users with JS disabled: Height of each content*/
	overflow: hidden; 	/*leave as is*/
	float: left; 		/*leave as is*/
}

#haccordion1 li .hpanel{
	padding: 0; /*Padding inside each content*/
	background: #000;
	float:left;
}

#haccordion1 li .hpanel{
	width: 100%; 		/*For users with JS disabled: Width of each content*/
	height: 200px; 		/*For users with JS disabled: Height of each content*/
} 

#haccordion1 .panelpic {
	float: left; 
	height:100%; 
	padding-right:10px;
}

#mobile_accordion {
	display:none;
}


/* ====================================================================================================================
Responsive:
*/
@media screen and (min-width: 1200px) {
	
}

@media screen and (min-width: 1025px) {
	
	}


/*Smaller Screens */
@media screen and (max-width: 1240px) {
	.wrapper, 
	#topmenubox .m_inner { 
		width: 98%;
	}
}

/*Smaller Screens */
@media screen and (max-width: 1000px) {
	.wrapper, 
	.mainbox, 
	#topmenubox .m_inner {
		width:100%; 
		margin: 0 0 0 0;
	}
	
	body {
		font-size: 14px;
	}
	.container {
		padding-top: 2px;
	}
	
	.leftbox, 
	.footerbox 
	.left {
		display:none;
	}
	
	.content {
		width: 63%;
		margin-left:2%; 
	}
	
	.mainbox .contentwide {
		width:96%; 
		margin:0 2% 0 2%;
	}
	
	#rightbox {
		width: 33%;
	}
	
	#rightbox .inner {
		margin: 0 5% 0 5%;
	}
	
	#topmenubox {
		height: 60px ! important;
	}
	
	#topmenubox #nav {
		display:none;
	}
	
	.logobox a.logo {
		width: 210px; 
		height:160px; 
		margin-bottom:20px;
	}	
	.toggleMenu {
		display:block; 
		float:right; 
		width:20px; 
		height:50px; 
		background: url(../img/menuswitch.png) no-repeat top right; 
		margin:10px 4% 0 0;
	}	
	.togglePics {
		display:block; 
		float:right; 
		width:30px; 
		height:50px; 
		background: url(../img/picmenuswitch.png) no-repeat top right; 
		margin:10px 8% 0 0;
	}
	
	.topspacer {
		background-image:none; 
		background-color:transparent; 
		height:auto; 
		position: relative; 
		margin-top: 65px; 
		padding-top:0; 
		background-position: center top; 
	}	
	
	
	/*Nav*/	
	#nav2 {
		width:250px; 
		height: auto; 
		position:absolute; 
		left:0; 
		top:100px; 
		z-index:2000; 
	}
	
	#nav2 {
		background: #333; 
		box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.8);
	}
	
	#nav2 li {
		width:250px; 
		padding: 0 0 0 0; 
	}
	
	#nav2 li a {
		display:block; 
		padding: 12px 0 12px 20px; 
		font-size:18px; 
		color:#fff; 
		text-decoration: none; 
		border-bottom: 1px solid #555;
	}
	
	#nav2 li li a {
		padding: 10px 0 10px 30px; 
		font-size:16px; 
	}
	
	#nav2 li li li a {
		padding: 8px 0 8px 40px; 
		font-size:14px; 
	}
	
	#nav2 li li li li a {
		padding: 6px 0 6px 50px; 
		font-size:13px; ;
	}
	
	#nav2 li ul {
		display:none;
	}
	
	#nav2 li.menu-parent > ul, #nav2 li.menu-current > ul {
		display:block;
	}
	
	#nav2 li.is_opened > ul, #nav2 li.is_opened > ul {
		display:block;
	}
	
	#nav2 li a.menu-expand {
		background: transparent url(../img/arr-down.png) no-repeat left center ;
	}
	
	#nav2 li a.menu-current {
		color:#fff; 
		background-color: #ffcc00; 
		text-shadow: 1px 2px 4px #000;
	}
	
	#nav2 ul li a.menu-expand.is_opened, 
	#nav2 ul li a.menu-parent {
		font-weight:bold; 
		background: #444 url(../img/arr-right.png) no-repeat 2px center ; 
	}
	
	#nav2close {
		display:none; 
		position:absolute; 
		top:0; width:100%; 
		height: 900px; 
		background-image:none;
	}
	
	.breadcrumbs {
		width: 100%; 
		height: auto; 
	}
	
	.innerbc {
		margin: 2px 0 5px 2%; 
		width: 96%; 
	}
	
	.innerbc span {
		display: block; 
		float:left; 
		padding: 2px 2px 2px 12px; 
		margin: 0 0 5px 0;
	}
	
	.innerbc b {
		display: none;
	}
	
	#haccordion1 {
		display:none;
	}
	
	.topspacer {
		
	}
	
	#mobile_accordion, 
	#mobile_accordion a, 
	#mobile_accordion b, 
	a#mobile_accordion_open {
		display:block;
	}	
	
	#mobile_accordion a {
		height: 0; 
		margin:0 2% 0 0; 
		float:left; 
		width: 48%; 
		text-decoration:none; 
		font-size:0.85em; 
		overflow:hidden; 
		transition: height 1s, margin 1s; 
		background: rgba(0,0,0,0.3)
	}
	
	#mobile_accordion a img {
		float:left; 
		width: 24% !important; 
		margin:0 2% 0 0; 
	}
	
	#mobile_accordion.is_open {
		padding-top: 10px;
	}
	
	#mobile_accordion.is_open a {
		height: 90px; 
		margin:5px 2% 5px 0; 
	}
}


/* ======================================================================
Smaller Screens */
@media screen and (max-width: 540px) {
	body {
		background: #222 url(../img/bodybg-mobile2.jpg) no-repeat fixed;
		-o-background-size: 100% auto, auto;
		-moz-background-size: 100% auto, auto;
		-webkit-background-size: 100% auto, auto;
		background-size: 100% auto, auto;
	}

	.content, 
	#rightbox {
		width:96%; 
		margin:0 2% 0 2%;
	}
	
	.mainbox .contentwide .contentwidenarrow {
		float: none; 
		width:100%; 
		border-left:none; 
	}
	
	#rightbox {
		display:block; 
		border-left:none;
	}
	
	#rightbox .inner {
		margin: 0 0 0 0;
	}
	
	.frontpage .wrapper {
		background-position: center top;
	}	
	
	#mobile_accordion a {
		float:none; 
		width: 100%; 
	}	
}

.tdeventheading,
.mteventheading,
.alleventheading {
	background-color: #de8818;
	color: #000;
}	
	
.tdevent .span {
	color: #fff !important;
	font-weight: bold !important;
}	

.tdevent {
	vertical-align: top;
	padding: 2px 4px;
	color: #fff !important;
	font-weight: bold;
}

.mtevent-date {
	color: #fff !important;
	font-weight: bold;
}

.mtevent 
.mtevent-desc{
	color: #fff !important;
	font-weight: bold;
}


.eventheading, 
.eventheading a {
    text-align: center; 
    color: #fff !important;
}

.event-1 .mtevent p,
.event-1 .mtevent-date p {
	color: #fff !important;
}

.allevent a{
	color: #fff !important;
}

.bold .fa-plus .ev7 {
	color: #fff !important;
}

.hero-text h1 {
	font-size: 4.6rem;
    margin-top: 0;
	color: rgb(73, 163, 219) !important;
	font-weight: bold;
}

.hero-text p {
    font-size: 2.0rem;
    margin-top: 0;
}

.hero-text {
	text-align: center;
	position: absolute;
	top: 33%;
	left: 50%;
	transform: translate(-50%, -50%);

}

.fa-plus::before {
	color: #be4040 !important;
}

.art-footer:before {
	width: 100%;
	content: " ";
	display: table;
	border-collapse: collapse;
	border-spacing: 0;
}

.art-footer:after {
	clear: both;
	font: 0/0 serif;
	display: block;
	content: " ";
}

.art-footer img {
	border: 1px solid #BFBFBF;
	margin: 5px 5px 5px 5px;
}

.art-footer blockquote a, 
.art-footer blockquote a:link, 
.art-footer blockquote a:visited, 
.art-footer blockquote a:hover {
	color: #210208;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
	font-weight: normal;
	font-style: italic;
	text-align: left;
}

.art-footer blockquote p {
	margin: 0;
	margin: 5px 0;
}

.art-footer {
	border-top:1px solid #BFBFBF;
	background-color:#001567;
	margin:0 auto;
	position: relative;
	color: #fff;
	font-size: 13px;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
	line-height: 125%;
	text-align: center;
	padding: 0;
}

.art-footer a,
.art-footer a:link,
.art-footer a:visited,
.art-footer a:hover,
.art-footer td, 
.art-footer th,
.art-footer caption {
	color: #141414;
	font-size: 16px;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
	line-height: 125%;
}

.art-footer p {
	padding:0;
	text-align: center;
	font-size: 15px;
	color: #f0f8ff;
}

.art-footer a,
.art-footer a:link {
	color: #f0f8ff;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
	text-decoration: none;
}

.art-footer a:visited {
	color: #ffff00;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
	text-decoration: none;
}

.art-footer a:hover {
	color: #ff0000;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
	text-decoration: underline;
}

.art-footer h1 {
	color: #f0f8ff;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-footer h2 {
	color: #f0f8ff;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-footer h3 {
	color: #f0f8ff;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-footer h4 {
	color: #f0f8ff;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-footer h5 {
	color: #f0f8ff;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-footer h6 {
	color: #f0f8ff;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-footer img {
	border: 1px dotted #BFBFBF;
	margin: 0;
}

.art-footer-inner {
	margin: 0 auto;
	max-width: 1728px;
	width:90%;
	padding:8px;
	padding-right: 18px;
	padding-left: 18px;
}

.art-content-layout {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.art-content-layout-row {
	display: table-row;
}
.layout-item-1 {
	width: 33%;
}
.layout-item-2 {
	width: 34%;
}
.layout-item-3 {
	width: 100%;
	font-size: 11px !important;
	text-align: center;
}
.layout-item-3 a{
	font-size: 11px !important;
	text-align: center;
}
.art-layout-cell {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: table-cell;
	vertical-align: top;
}

.Stil1 {
	font-size: 16px
}

/* tablet (t) */
 @media only screen and (max-width : 768px) {
.layout-item-1 {
	width: 100%;
	border-bottom: 0.5px dotted;
	border-color: #fff;
	text-align: center;
}

.layout-item-2 {
	width: 100%;
	border-bottom: 0.5px dotted;
	border-color: #fff;
	text-align: center;
}

.layout-item-3 {
	width: 100%;
	font-size: 11px !important;
}

.layout-item-3 a{
	font-size: 11px !important;
}

 .art-content-layout-row 
{
	display: inline-grid !important;
	width: 100%;
	text-align: start;
}

.art-layout-cell {
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: inline-table !important;
	vertical-align: top;
}
}


/* tablet (t) */
 @media only screen and (max-width : 1000px) {

.hero-text h1 {
    display: none;
	font-size: 4.6rem;
    margin-top: 0;
	color: rgb(73, 163, 219) !important;
	font-weight: bold;
}

.hero-text p {
    display: none;
    font-size: 2.0rem;
    margin-top: 0;
}

.hero-text {
	displa: none;
	text-align: center;
	position: absolute;
	top: 33%;
	left: 50%;
	transform: translate(-50%, -50%);
}

 }