div {border: 0px solid black;}
td, li {border: 0px dotted red;}
ul {border: 0px solid green;}

html {height: 100%;}
body { 	
	background: #fff;
	/*background: #fff url(img/bodybg.png) repeat-x 0 0;*/
	margin: 0; padding: 0;
	height:100%;
	width:100%;
}

.aktuell-wrapper {position: absolute; top: 0px; left: 0px; z-index: 9000; width: 100%; height: 5000px; background-color: rgba(0, 0, 0, .6);}
.aktuell-box {position: absolute; top: 1%; left: 15%; width: 70%; max-width: 800px; min-height: 500px; padding: 50px;  color: #555; background: #fff;}
.aktuell-content {padding-top: 0px; }
.aktuell-content a:hover {color: #555; }
.aktuell-content li {color: #ecc111; }
.aktuell-content.glossar h2 {margin: 0; padding: 50px 0 0 0;}
.aktuell-content.glossar p {margin: 0; padding: 10px 0 0 0;}
.aktuell-content img {margin: 0 auto !important;}
img.headerpic-aktuell {margin: 0; padding: 0;}
.button-close {z-index: 2; 	position: absolute; right: 20px; top: 15px; width: 20px; height: 20px;}

/*
.legende-wrapper {position: absolute; top: 0px; left: 0px; z-index: 9000; width: 100%; height: 4000px; background-color: rgba(0, 0, 0, .5);}
#legende {position: absolute; top: 0px; left: 15%; z-index: 9001; width: 100%; max-width: 800px; min-height: 500px; padding: 50px; color: #555; background: #fff;}
.legende-content {padding-top: 0px; }
.legende-content a:hover {color: #555; }
*/

.mini-menu {position: absolute; top: 40px; right: 10%; width:50%; text-align:center; display: none;}
.mini-menu img {width; 10%; max-width: 50px; padding: 0 2%;}
.mini-menu a:hover, .mini-menu a.active {opacity:0.6;}
	
.topspacerbox {width: 100%; margin: 0 auto; margin-top: 200px; padding: 0;}	
/*.topspacer {display: none;} */
.topspacer.page-id-1 {display: block; padding-top: 0px;  width:100%; }
/*.topspacer img {padding-top: 120px !important; display: block; height: auto !important; max-width: 100%; width: auto !important;}*/	

video {
  /* override other styles to make responsive */
  width: 100%    !important;
  height: auto   !important;
  padding: 20px 0;
}
video.mobile-only {display: none;}
video.desktop-only {display: block;}

.pic {display: none;}
.slider-wrapper.page-id-1 {display: block;}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Layout Blocks
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.outer {width: 100%; /* margin: 0 auto 0 auto;*/ background-color: #fff;}

.wrapper {width: 100%; max-width: 1280px; margin: 0 auto; padding: 0;}

table.tab-legende img, .button-box a img, #slider img, .headerbox img, .topspacer img, img.bg_content, .header img, img.logo, .gallery-box a img, #button-kontakt img, .content img, img.img-start, .aktuell-content img {
	margin: 0px; padding: 0; display: block; height: auto !important; max-width: 100%; width: auto !important; /*max-height: 880px;*/}
img.bg_content {padding-top: 35px;}
.topspacer img {margin-top: -10px;}


.topheader {position:relative;  padding-bottom: 12%; width:100%; background: #fff url(img/header.jpg) no-repeat fixed center top; background-size: 100% auto, auto;}
.topheader p {bottom:10%; width:90%; position:absolute; text-align: center; padding: 0 5%; font-size:1.6em; line-height:110%; color:#fff; text-shadow: 0px 2px 30px #000; }

#static_headerbox {width:100%; height: 550px; overflow: hidden; background-repeat: no-repeat; background-position: center center; background-size: cover;}

/*frontpage*/
#topparallax {width:100%; position:relative; padding-top:40%; background: #fff url(img/parallaxheader.jpg) no-repeat; background-position: center 0; background-size: 100% auto, auto;}
.ptext {bottom:20%; width:90%; position:absolute; text-align: center; padding: 3% 5%; background: rgba(0,0,0,0.1); border-top: 1px solid #fff; border-bottom: 1px solid #fff;  }
.ptext * {text-shadow: 0px 2px 30px #000;  color: #fff ! important;}
#topparallax a.topdown img {width:100px; margin-top: 20px}


/* Button-Boxen */
.button-box-outer { margin-left: 10%; width: 90%}
.button-box-wrapper {float: left; width: 50%; margin-bottom: 50px;}
.button-box {float: left; width: 30%; max-width: 150px; margin: 0 0 0 0; padding: 0 20% 0 0; }
.button-box.last-box {padding-right: 0;}
.button-box a img {border: none !important;}
.button-box a:hover {opacity:0.6;}


/* Aktions-Buttons */
#button-kontakt {z-index: 999; position: absolute; right: -1.5%; top: 100px; width:15%; min-width: 100px;}
#button-legende {z-index: 999; position: absolute; right: 3%; bottom: 0px; width:15%; min-width: 100px;}
.beratung {position: relative; width: 100%;}
#button-beratung {z-index: 999; position: absolute; right: -20%; top: -20px; width:20%; min-width: 100px;}

.button-kontakt {
	-o-transform:scale(1.0);
  -webkit-transform:scale(1.0); 
  -moz-transform:scale(1.0);
	transform:scale(1.0);
}
.button-kontakt {
	-o-transition:all .1s linear;
  -webkit-transition:all .1s linear;
  -moz-transition:all .1s linear;
	transition:all .1s linear;
}
.button-kontakt:hover {
	-o-transform:scale(1.025);
  -webkit-transform:scale(1.025); 
  -moz-transform:scale(1.025);
	transform:scale(1.025);
}



.contentbox {min-height: 500px; width: 60%;  /*background: #fff;*/ padding: 50px 20% 70px 10%;}
.contentbox.page-id-1 {min-height: auto;}
.contentbox.contentbox2 {padding: 10px 0% 100px 10%;}

.contentbox.page-id-1 h1 { 
	margin: 20px 0 40px 0;
	font-size: 2.5em;
	font-weight: 600;
	font-family:'robotoregular', Arial, sans-serif;
	color: #ecc111;
	letter-spacing: 1px;
}
.contentbox h1.h1Icon {margin-left: -40px;}
.contentbox.page-id-2 h1:before {background-image: url(img/button_photo_mini.jpg);}
.contentbox.page-id-3 h1:before {background-image: url(img/button_solar_mini.jpg);}
.contentbox.page-id-4 h1:before {background-image: url(img/button_heiz_mini.jpg);}
.contentbox.page-id-5 h1:before {background-image: url(img/button_lade_mini.jpg);}
.contentbox.page-id-2 h1:before, .contentbox.page-id-3 h1:before, .contentbox.page-id-4 h1:before, .contentbox.page-id-5 h1:before {
    background-size: 80px 80px;
    background-repeat: no-repeat;
    background-position: bottom;
    display: inline-block;
    width: 90px; height: 100px;
    content:"";
}
.contentbox.page-id-1 h2 {font-size: 1.6em; letter-spacing: 1px;}
.contentbox.page-id-1 h6 {font-size: 1.2em;}

/* Stellenangebote */
.contentbox.page-id-11 .content {display: block; width: 90% !important; padding: 20px 5%; background: #ecc111;}
.contentbox.page-id-11 .content h4 {font-size: 1.3em; color: #fff; font-weight: bold;}
.contentbox.page-id-11 .content h5 {margin-bottom: 20px; font-family:'roboto_condensedregular', Arial, sans-serif; color: #000; font-weight: bold;}
.contentbox.page-id-11 .content a {color: #000; font-weight: bold;}
.contentbox.page-id-11 .content p {line-height: 150%;}
.contentbox.page-id-11 .content ul {margin-left: 5px;}
.contentbox.page-id-11 .content ul li {margin: 0; padding: 0; line-height: 150%;}


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


/*====================================================
Alles rechts neben left
ab hier: 1/3 grid
*/
.contentbox.relative {position: relative;}

.content, .top_content {display:inline; width: 80%; padding-right: 0%; margin-left: 0; }
.content.narrow {width: 28%; margin-top: 90px; padding-right: 0%; }
.content.contentnarrow {float: left; width: 60%;}
.contentbox.page-id-1 .content.contentnarrow {width: 60%;}

.top_content {display:block; margin-top: 0; /*color: #fff;*/}
.top_content.ref h2 {margin-top: 0; padding-top: 20px; /*color: #fff;*/}
.top_content.kunden h2 {margin: 0 0 20px 0; padding-top: 50px; }
._top_content p {margin: 0;}

.content.desktop, .gallery-text-box.desktop, span.desktop {display: block;}
 
.bottom_content {}



.mainbox .contentwide  {width:100%; margin:0 0 0 0; }
.contentwide.center {text-align: center; }

.two-column { column-count: 2; column-gap: 50px;}

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


/* Info-Boxen */
.legende {position: relative; width: 92%; margin: 0 0 0 0; padding: 50px 4% 10px 4%; border: 1px solid #000;}
.legende h5 {margin-bottom: 20px; font-family:'roboto_condensedlight', Arial, sans-serif; color: #000;text-transform: uppercase;}
table.tab-legende h6 {font-family:'roboto_condensedlight', Arial, sans-serif;
	color: #000;text-transform: uppercase;}
table.tab-legende p {margin: 0 0 20px 0; font-size: 1em; line-height: 150%;}	
table.tab-legende td.td1 {width: 8%; padding: 10px 10px 0 0;}
table.tab-legende td img { max-width: 40px; max-height:40px;}
#button-close {z-index: 2; 	position: absolute; right: 20px; top: 15px;}	



img.news_post_image {float: right; padding-left: 20px;}

.post_short_img img{max-width: 300px;}
.post_short {padding: 20px;}
.news-more {padding: 0 0 12px 0; text-align: right; }
.news-more a {font-size: 15px; color: #2a6065;}	

a.section_anchor {}


/* Kontakt */
#kontakt h3 {padding-bottom: 20px;}


img.initiale {float: left;  margin-top: 0px;  padding: 0px 5px 0px 0px;}


.dummy-block {width: 100%; text-align: center;}
hr.hr-bottom {margin: 50px 0px 0px 0px;}

.clearcontent {clear:both; }


.bottomspacer {display: block; padding-bottom: 0px;  width:100%; }
.bottomspacerbox {width: 100%; max-width: 1280px; margin: 0 auto; padding: 0;}


/* ------ Footer ------ */
.footer-outer {width: 100%; background-color: #008187;}
.footerbox {margin: 0px auto; width: 98%; max-width: 1280px; padding: 20px 0% 20px 2%;}
.footerbox, .footerbox a, .footerbox p { font-size:14px; color: #fff;}
.footerbox p {margin: 0;}
.footerbox .left {width: 35%; margin: 0 0 0 0;  float:left;}
.footerbox .right {float: right; width: auto; margin: 0 3% 0 0; padding-right: 0px; }
.footerbox .right a {color: #fff;}
.bottom-title {font-weight: bold;}
td.t1 {padding-right: 5px;}

.back {text-align: right;}
.backLink {padding: 10px 0 0 0;}

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



/* Top and Menu Box */
#topmenubox {width: 100%; height:200px; margin:0 0 0 0; position:fixed; z-index:5000; width: 100%; top:0; left:0%;  transition: 0.5s all; background: #fff /*url(img/bg-head.gif) repeat-x 0 0*/; 
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); )
/* background-color: rgba(244, 244, 244, .7); border-bottom: 2px solid #ecc111;*/ 
}
/*#topmenubox.page-id-1 {border-bottom: none; } */
#topmenubox .m_inner {width: 100%; max-width: 1280px; height:100%;  margin: 0 auto; padding: 0; position:relative;}

#logo-wrap {float: left; width: 267px; height: 110px;	margin: 0px 0% 0px 0px; padding: 70px 0px 0px 0px; /* font: 11px/100% "Arial", Helvetica, sans-serif;*/ 
font-size: 12px; line-height: 1.7em; color: #474343; text-align: right; line-height: 17px; 
	background: url(img/bg_head2.gif) no-repeat;}
#logo-wrap a {font-size: 11px; color: #474343; text-align: right; line-height: 16px; letter-spacing:.3px;
}
#logo-wrap .logo-title {font-weight: 600; letter-spacing: -.05px;}
#logo-wrap .logo-content {letter-spacing: 0;}


/* Top and Menu Box */
#topmenubox {width: 100%; height:200px; margin:0 0 0 0; position:fixed; z-index:5000; width: 100%; top:0; left:0%;  transition: 0.5s all;}
#topmenubox .m_inner {position:relative; height:100%; background: #fff; }
#topmenubox a.logo img {max-height:80%; max-width:100%; position: absolute; left: 10%; bottom:20px;}
#topmenubox.reduced {height:60px; transition: 0.5s all;}
#topmenubox.reduced a.logo img {max-height:80%; max-width:100%; position: absolute; left: 10%; bottom:5px;}

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

.menuebox {width: 75%; height:100%; float:left; position:relative;} 
.toggleMobileMenu {display:none;}
#openrightboxswitch, #closerightboxswitch{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: 4%; bottom: 8px;	border: 0;	padding: 0;}
/* #nav {float: right; padding: 135px 3% 0 0;}*/

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

}
#nav ul li,  #nav2 ul li {
	list-style-type: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
}
#nav2 ul li.Glossar {padding-top: 20px;}

/* Root Level Link Formatting */
#nav ul li {float: left; display:inline; color: #aaa; text-align: left; font-weight: normal; list-style-type: none; list-style-image: none ;}
#nav ul li a {display: block; padding: 0px 0px 0px 40px; font-size: 16px; line-height: 31px; border-right:0px #ddd solid; color: #008187; text-decoration: none; XXfont-weight: bold; text-transform: uppercase; letter-spacing: 0px; background-repeat: no-repeat;}
#nav ul li a span {display:block; padding: 9px 0px 5px 0px; }
/* 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: #ecc111; background: #fff; border: none;}
/* #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: #fff; background: #2a6065 ; } */
/*
#nav ul li.menu-first a:hover span, #nav ul li.menu-first a.menu-current span {border-bottom: 2px solid #ecc111; padding-bottom: 4px;}
*/
#nav ul li.Kontakt,
#nav ul li.Energie,
#nav ul li.Glossar,
#nav ul li.Anfahrt,
#nav ul li.Impressum, 
#nav ul li.Datenschutz {display: none;}

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

/* 2nd Child menu */
#nav  li ul {position: absolute; right:10000px; width: 180px; margin-top: 0px; opacity:0.0; border-bottom: 0px solid #fff; border-left: 0px solid #fff; background: transparent; /* box-shadow: 0px 10px 10px -4px rgba(0, 0, 0, 0.4);*/}
#nav  li ul li {text-align: left; font-weight: normal; margin: 0; margin-left: 37px; padding: 0; line-height: 1.2em; background: #fff }
#nav  li ul li a {width: 180px; margin:0; padding: 0px 20px 0px 20px; text-align:left; background: none;}
#nav  li ul li a span {display:block; padding:0px; text-shadow: none;  color: #333;  font-weight: normal; font-size: 14px; line-height:45px; text-transform: uppercase; border-top: 2px solid #ecc111; }

/* 2nd Child menu: kurze Trennlinie oben */
#nav  li ul li.menu-first a span {border: none;}
#nav  li ul li.menu-first a span:after {content: ""; display: block; position:absolute; top: 0; left: 20px; width: 38%; border-top: 2px solid #ecc111; }

#nav ul li.menu-first ul li a:hover span {border-bottom: none; padding-bottom: 0px; color: #ecc111;}
#nav ul li ul li.menu-last { border-bottom: 5px solid #fff; }



/* 2nd Child link hover */
#nav  li ul a:hover,  #nav  li ul a.menu-current { /* text-shadow: 1px 2px 4px #000;*/}
#nav  li ul li a:hover span {color: #ecc111;}
#nav  li ul a.menu-expand {background: transparent url(img/arr-right.png) no-repeat right 5px ; }
#nav  li ul a.menu-parent {background: #2a6065 url(img/arr-right.png) no-repeat right 5px; }

/* Show and hide */
#nav  li:hover ul, #nav  li a:focus ul, #nav li.tabselected ul {right:-20px; XXmargin: -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 */													
}

.nav_kontakt {float: right; text-align: right; width: 10%; padding: 18px 6% 0 0;}	
.nav_kontakt a {font-size: 14px; color: #fff; text-transform: uppercase;}

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

#footer_menu {padding-bottom: 10px;}
#footer_menu a { display: inline-block; padding: 2px 10px; border-right: 1px solid #999;}
#footer_menu a:first-child {border-left: 1px solid #999;}
#footer_menu a.menu-current {font-weight:bold;}



/*COuld bee visible on Desktop*/
#nav2 {width:250px; height: auto; position:absolute; left:-300px; }	

.showonmobiles  {display:none;}




/* ======================================================================================================
Responsive:
*/
@media screen and (min-width: 1200px) {
	.XXwrapper  {background-position: center -120px;}
}

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


/*Smaller Screens */
@media screen and (max-width: 1170px) {
	.outer,  .mainbox, #topmenubox .m_inner  {width:100%; margin: 0 0 0 0;}
	
	.XXtopheader {background-size: 100% auto;}
}


@media screen and (max-width: 1280px) {
	div {border: 0px solid red;}
	
	#nav ul li a {padding: 0px 0px 0px 25px;}
	
	.contentbox.page-id-1 h1 {font-size: 2.0em; margin-bottom: 20px;}
	h4 {font-size: 1.1em; }
	
	#legende {position: absolute; left: 5% !important; width: 80%;}
}


/*Smaller Screens */
@media screen and (max-width: 1024px) {
	div {border: 0px solid yellow;}
	
	.topspacerbox {margin-top: 120px;}
	
	#logo-wrap, .flex-direction-nav, .content.desktop, .footerbox .right {display: none;}
	
	.content.contentnarrow {float: none; width: 96%;}
	
	.contentbox.page-id-1 {width: 88%; padding: 30px 6% 10px 6%;}
	
	#topmenubox.reduced a.logo img {max-height:80%; max-width:100%; position: absolute; left: 10%; bottom:20px;}
	img.logo {display: block; position: absolute; left: 4%; bottom: 15px; max-height: 80%; max-width: 100%;}
	
	
	#button-kontakt {position: absolute; right: 5.6%; top: -90px; width: 20%;}
	
	.contentbox {width: 88%; padding: 30px 6% 20px 6%;}	
	.contentbox.page-id-2,
	.contentbox.page-id-3,
	.contentbox.page-id-4,
	.contentbox.page-id-5 {width: 85%; padding: 30px 5% 20px 10%;}
	
	.container {padding-top: 2px;}		
	.mainbox .contentwide  {width:96%; margin:0 0 0 2%; padding-top: 50px;}
	.content, .top_content {width:100%; margin:0; padding:0; float: none; }
	
	/*.contentbox h1, .contentbox h2 {margin-top: 0px;}*/
	.contentbox.slogan {width: 94%; padding: 20px 3% 20px 3%;}
	
	.mainbox, .contentwide, .contentwidenarrow, .main, .content.mobile {float: none; width:100% ! important; border-left:none; display:block;}
	
	.content.narrow {float: none; width:100%; margin-top: 0;}
	.content.mobile {text-align: center; margin: 0;}
		
	#topmenubox {height: 120px !important;}
	#topmenubox #nav {display:none;}
	
	/*.topmenubar {width: 70%; margin: 0 auto; padding-top: 15px;}*/
	.topmenubar ul#topmenu {float: right; padding-top: 35px;}
	
	.infobox {min-height: 50px; width: 100%; margin: 0; padding: 0 0 25px 0; }
		
	.footerbox {padding-top: 20px;}
	/*.footerbox .right {float: none; width: 100%; padding: 0; text-align: center;}*/

	
	.toggleMobileMenu {display:block; float:right; width:15px; height:50px; margin: 60px 4% 0 0; padding-right: 20px; background: url(img/menuswitch.png) no-repeat top right; }
	.toggleMobileMenu2 {display:block; position: absolute; top: 20px; right: 20px;
	 width:50px; height:50px; margin: 0; padding: 0; background: url(img/button_close_nav.png) no-repeat top right; }
	
	/*.topspacer {padding-top: 60px;}*/
	#XXtopparallax {padding-top: 50%; }
	
	.topmenubar ul.gallery_menu li a {font-size: 18px; line-height: 40px;}
	
	#topmenubox {width: 100%;}

	
	/*Nav*/
	
	.breadcrumbs { height:560px; }
	
	#nav2 {width:200px; padding-left: 30px; height: auto; position:absolute; left:-300px; top:100px; z-index:9999; transition: left 1s; }
	#nav2  {background: #fff; box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.4);}
	
	#nav2 {height: 100%; padding-top: 20px; border-right: 2px solid #008187;} /* mux */
	#nav2 li.lev1 {display: none;} /* mux */
	/* #nav2 li a.menu-first {border-top: 2px solid #ecc111;} */

	
	#nav2 li {width:160px;  padding: 0 0 0 0; }
	#nav2 li a {display:block; padding: 10px 0 10px 0; font-size:16px; text-transform: uppercase; color:#008187; text-decoration: none; /* border-bottom: 2px solid #ecc111;*/}
	#nav2 li a:hover {color: #ecc111;}
	#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: #ecc111 !important;*/ /* color:#fff;  text-shadow: 1px 2px 4px #000;*/}
	
	#nav2 ul li a.menu-expand.is_opened, #nav2 ul li a.menu-parent {color: #ecc111; /*font-weight:bold; background: #ddd url(img/arr-right.png) no-repeat 2px center ;*/ }
	#nav2close {display:none; z-index:1990; position:absolute; top:0; width:100%;  height: 900px; background-image:none;}
	#nav2 li a:hover span {color: #ecc111 !important;}
	
	.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;}
	
	.mobilemenuopen #nav2 {left: 0%;}
	.mobilemenuopen #nav2close {display:block;} 
	
	.mini-menu {display:block;} 
	
	h1 {font-size: 1.4em; }
	h2 {font-size: 1.2em;}
	h3 {font-size: 1.0em;}	
	
	.aktuell-box {position: absolute; top: 20px; left: 5%; width: 75%; padding: 50px;}
	.aktuell-content.glossar h2 {margin: 0; padding: 30px 0 0 0;}
	
	#legende {position: absolute; left: 5% !important; width: 75%;}
	.legende h5 {font-size: 1.1em;} 
	.contentbox.page-id-2 .legende h5 { margin-top: 20px;} 
	
	.beratung {position: relative; width: 100%;}
	.contentbox.page-id-5 .beratung {width: 65%;}
	#button-beratung {position: absolute; right: -40%; top: 0px; width:20%; min-width: 100px;}

	.button-box-outer {display: block; margin: 20px 0 0 6%; width: 94%}
	.button-box-wrapper {width: 70%; margin-top: 0px; margin-bottom: 30px;}
	.button-box {width: 40%; padding: 0 10% 0 0;}
	
	.google-maps-box {float: none; width: 100%;	padding: 20px 0 0 0;}
	.adress-bottom-box {float: none; width: 100%; padding: 0 0 15px 0; text-align: center;}
	
	.footerbox {width: 88%; padding: 10px 6% 10px 6%;}
	.footerbox .left {width: 30%; min-width: 280px; padding-left: 0%;}
		
	/* Turn off parallax scrolling for tablets and phones */
  .bgimg {background-attachment: scroll; }
}


/* ======================================================================
Smaller Screens */
@media screen and (max-width: 768px) {
	div {border: 0px solid green;}		
	
	p, li, td {font-size: .8em;}
	
	#topmenubox a.logo img {width:35%; position: absolute; left: 5%; bottom:20px;}
	#topmenubox.reduced a.logo img {max-height:80%; max-width:100%; position: absolute; left: 5%; bottom:20px;}
	
	.mini-menu {position: absolute; top: 55px; right: 10%; width: 50%; }
	.mini-menu img {height: 30px; }
	
	.XXfrontpage .outer  {background-position: center top;}
	.topheader  {padding-bottom: 30%;  background-size:  100% auto, auto; background-image: url(img/header-mobile.jpg);}
	
	#topparallax {width:100%; position:relative; padding-top:40%; background-image: url(img/parallaxheader-mobile.jpg); }
	#topparallax .ptext {bottom:5%; }
	#topparallax a.topdown {display:none; }

	#topparallax p {line-height:120%;}
		
	h1 {font-size: 1.4em;}
	.contentbox.page-id-1 h1 {font-size: 1.5em;}
	.contentbox.page-id-1 h2 {font-size: 1.2em; }
	.contentbox.page-id-1 h6 {font-size: .9em;}
	h2 {font-size: 1.4em;}
	h3 {font-size: 1.2em;}
	h4 {font-size: 1.1em; }
	h5 {font-size: .9em; }
	
	.contentbox h1.h1Icon {margin-left: -25px;}
	.contentbox.page-id-2 h1::before, 
	.contentbox.page-id-3 h1::before, 
	.contentbox.page-id-4 h1::before, 
	.contentbox.page-id-5 h1::before {
    background-size: 50px 50px;
    width: 60px; height: 50px;
	}
	
	.aktuell-box {width: 80%; padding: 10px 5%;}
	
	#button-kontakt {position: absolute; right: 5.6%; top: -70px;}
	#button-legende {position: absolute; right: 1%; bottom: -10px;}

}

/* ======================================================================
Smaller Screens */
@media screen and (max-width: 480px) {
	div {border: 0px dotted blue;}
	
	.mini-menu img {padding: 0 1%; }
	
	#button-kontakt {position: absolute; right: 5.6%; top: -65px;}	
	.contentbox.page-id-1 {width: 88%; padding: 30px 6% 10px 6%;}
	.contentbox.page-id-1.contentbox2 {padding-top: 0;}
	
	#topparallax .ptext {bottom:0; }
	.topheader p { font-size:1.4em; }
	
	h1 { font-size: 1.4em;}
	.contentbox.page-id-1 h1 {font-size: 1.3em;}
	h2 {font-size: 1.1em;}
	h3 {font-size: .9em; }
	.contentbox.page-id-1 h6 {font-size: .8em;}
	
	p, li, td, address {font-size: .8em;}
	
	.beratung {width: 100%;}
	.contentbox.page-id-5 .beratung {width: 65%;}
	#button-beratung {position: absolute; right: -50%; top: 0px; width:20%; min-width: 100px;}
	.legende h5 {font-size: 1em;} 
	
	video.mobile-only	{display: block;}	
	video.desktop-only {display: none;}
	
	.pic {display: none;}
  .pic.page-id-1 {display: block;}

  .slider-wrapper {display: block;}
  .slider-wrapper.page-id-1 {display: none;}
}



/* ====================================================================== */
#return-to-top {
	z-index: 9000;
    position: fixed;
    bottom: 120px;
    right: 50px;
		/* background: rgb(0, 0, 0); */
    /* background: rgba(0, 0, 0, 0.7); */
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    /*
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    */
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
	opacity:0.6;
    /* background: rgba(0, 0, 0, 0.9);*/
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}
@media screen and (max-width: 1024px) {
	#return-to-top {position: fixed; bottom: 100px; right: 30px; }
	#return-to-top img {width: 50px;}
}
	


/* ====================================================================== */
/* Hover Effekt */


/* ---------- Kontakt-Bar ---------- */
.kontakt-bar {
	z-index: 999;
	position: fixed; top: 25%; left: -2px;
	display: block;
	width: 70px; 
	border: 0px solid red;
}
.kontakt-bar a {
	display: block;
	width: 70px; height: 175px;
/*
	-moz-box-shadow: 1px 1px 10px #ddd;
	-webkit-box-shadow: 1px 1px 10px #ddd;
	box-shadow: 1px 1px 10px #ddd;
*/
}
.kontakt-bar a {
	width: 70px;
	background: url(img/kontakt-bar.png) 0 0 no-repeat;	
	background-position: -10px 0px;	
	background-size: contain;	
	transition:0.5s all;
}

.kontakt-bar a:hover {width: 70px; background-position: 0px 0px; transition:0.5s all;	}
/*.markt-mobile {display: none;}*/

@media screen and (max-width: 1200px) {
	/*.kontakt-bar {display:none;}*/	
	.kontakt-bar a {width: 70px; height: 125px;}
}	

@media screen and (max-width: 768px) {
	.kontakt-bar {position: fixed; top: 200px; left: -2px;}
	.kontakt-bar a {width: 70px; height: 100px;}

}	
/* ---------- End Kontakt-Bar ---------- */


/*.mask a.info:before {padding-right: 5px; font-size: 32px; display: inline-block; content: '> ';  }*/
i.fas {font-size: 11px; color: #000;}