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

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

.headerbox {position: fixed; z-index: -1; width:100%; margin: 0 auto 0 auto; margin-top: !important0px; padding-top: 0px; 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #c8c8c8;
} 
#header {
  position: relative;
  margin: 0px auto;
  max-width: 1280px;
  padding: 120px 0% 0px 0%;
  background: #c8c8c8;
}
	

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

.topspacerbox {width: 100%; max-width: 1280px; min-height: 150px; margin: 0 auto; padding: 0;}
.wrapper {width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 0 50px 0;}
.topspacer {display: none;}
.topspacer.page-id-1 {display: block; padding-top: 0px;  width:100%; }
.topspacer img {padding-top: 120px !important;}

.headerbox img, 
.topspacer img, 
img.bg_content, 
.header img, 
img.logo, 
.content img,
.bildbox img,
.footerbox img{
	margin: 0px; padding: 0; display: block; height: auto !important; max-width: 100%; width: auto !important; /*max-height: 880px;*/
}
.content img, img.bildbox {margin: 0 auto;}
img.bg_content {padding-top: 35px;}

.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}


.topmenu-wrapper {margin: 0 auto; width: 100%; max-width: 1200px; min-height:100%; min-height: 38px;}

/* --- Navigation Gallerie --- */
.topmenubar ul.gallery_menu {float: left; width: 100%; list-style: none; margin: 0; padding: 0;}
.topmenubar ul.gallery_menu li {float: left; width: 25%; padding-bottom: 0; list-style: none; text-align: center;}
.topmenubar ul.gallery_menu li a img {width: 32px; height: 32px; padding: 0 10px;}
.topmenubar ul.gallery_menu li a {display: block; font-size: 24px; line-height: 60px; color: #fff; }
.topmenubar ul.gallery_menu li a:hover {/* background: #a2b993;*/}


.content {position: relative;}

.contentbox {position: relative; width: 94%;  /*background: #fff;*/ padding: 30px 3% 30px 3%;}
.contentbox.page-id-1 {width: 92%; padding: 20px 4% 60px 4%;}
.contentbox.page-id-1.main {width: 72%; padding: 50px 14% 60px 14%;}
.contentbox.page-id-2 {width: 92%; padding: 150px 4% 60px 4%;}

.contentbox.slogan {width: 64%;  margin-top: 0px; padding: 20px 18% 20px 18%; background: #3f7eb4;}
.contentbox.slogan p {margin: 0; font-family:'latoregular', Arial, sans-serif; font-size: 36px; line-height: 150%; color: #fff; letter-spacing: 1px;  font-weight: 600;}

.contentbox.yellowbox {margin-top: 50px; padding: 20px 3% 20px 3%; background: #f4b859;}
.contentbox.yellowbox h3 {text-align: center; margin: 50px 0; color: #1a1919; }


/* Portrait */
.content.portrait {display: block; width: 100%; padding: 50px 0 0 0;}
.contentbox.portrait {width: 72%; padding: 20px 14% 0px 14%;}


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

table.bildbox {width: 100%; cellspacing: 0; cellpadding: 0;}
td.bildbox {width: 32%; margin-right: 2%; padding: 0px 0% 20px 0%; text-align: center; }
td.bildbox h4 {margin-top: 0; font-size: 24px; color: #fff;}
td.bildbox p {margin-top: 0; margin-bottom: 2px; font-size: 21px;}
td.bildbox a {color: #fff;}

td.bildbox.box1 {color: #fff; background: #727179;}
td.bildbox.box2 {color: #616266; background: #c2cacd;} 
td.bildbox.box2 h4, td.bildbox.box2 a {color: #616266;}
td.bildbox.box3 {color: #fff; background: #5a96cc; padding-bottom: 22px;}
td.bildbox.box3 h4 {margin-bottom: 0;}
td.bildbox .bildbox-text {padding: 40px 4% 20px 4%; text-align: center; font-size: 20px;}
td.bildbox .bildbox-text p {margin: 18px 0 2px 0;}
td.bildbox.box3 .bildbox-text p {margin: 2px 0 18px 0;}
td.spacer {width: 2%;}

.textbox {float: left; text-align: center; max-width: 31.0%; margin-right: 3%;}
.textbox h4 {color: #fff;}
.textbox.box3 {margin-right: 0;}

/*====================================================
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%;}

.contentbox.profil .content.contentnarrow {width: 43%; padding-left: 18%;}
.contentbox.profil .rightbox {text-align: center;}

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

/*.contentbox.page-id-1 .rightbox h2 {margin-top: 100px;}*/

.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; padding: 0;}

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


.rightbox {float: right; display:inline; width: 20%; margin-top: 50px;}
.rightbox.main {margin-top: 115px; }
.rightbox.wide {width: 65%; margin-top: 0;}
.rightbox.sidebox {margin-top: 80px;}
.usegrid3 .rightbox {width: 30%;}
.rightbox .inner { margin: 0 0% 3px 0%; font-size: 0.9em; line-height:135%}
.rightbox .inner img, .content.narrow img { max-width:100%; height:auto ! important;}


img.center-pic {margin: 0 auto;}


/* Info-Boxen */
.delivered {position: relative; display: inline-block; width: 92%; padding: 190px 3% 50px 5%; color: #616266; background: #cfd4d7 url(img/delivered.jpg) no-repeat center top; background-size: contain;}


.infobox-wrapper {float: left; width: 30%; margin: 0 4% 0 0;}
.infobox-wrapper.last-box {margin: 0 0 0 0;}
.infobox {position: relative; display: block; /*min-height: 350px;*/  padding: 10px 0 10px 0; font-size: 20px; }
.infobox-label {width: 100%; height: 25px; padding: 7px 0% 2px 0%; color: #3f7eb4; font-size: 18px; line-height: 20px; }
/* .infobox p {line-height: 18px;} */
.infobox-short h5 {font-size: 22px;}
.infobox-full {position: relative;  padding: 0 0 0 0; /*text-align: center;*/}
.infobox-full ul {margin: 0; padding: 0;}
.infobox-full ul li {padding-bottom: 5px;}
.infobox-full td {padding: 5px 5px 10px 5px;}
.infobox-full td.col1 {min-width: 190px; font-weight:bold;}
.infobox-long {padding: 30px 0 30px 0; text-align: left; color: #3f7eb4;}
.arr-down {position: absolute; top: 10px; left: -20px;}


/* Vita */
.vita {padding-top: 50px;}
.vita .infobox {display: block; width: 100%; margin: 0; padding: 10px 0 10px 0; }
.vita .arrow {width: 100%; padding: 5px 0 10px 0; text-align: center; background-color: #ced4d6;}
.vita .arrow a {font-size: 1.5em; color: #1a1919;}
.vita .infobox-short {min-height: 0;}
.vita .infobox-full {padding: 0 2%; background-color: #ced4d6;}
.vita .infobox-full li {list-style: none;}
.vita .arr-down {display: none;}


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 {}


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


.dummy-block {width: auto;}
.dummy-block.block1 {position: absolute; bottom: 150px; }
.dummy-block.block2 {position: absolute; top: -150px; }
.dummy-block.block3 {position: absolute; top: -100px; }
.dummy-block.block4 {position: absolute; top: -120px; }



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: #e5e9ec;}
.footerbox {margin: 0px auto; text-align: center; width: 76%; max-width: 1280px; padding: 50px 4% 0px 4%;}
.footerbox, .footerbox a { font-size: 20px; color: #000;}


.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:120px; margin:0 0 0 0; position:fixed; z-index:5000; width: 100%; top:0; left:0%;  transition: 0.5s all; background: #fff; /*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 #3f7eb4;*/ 
}
/*#topmenubox.page-id-1 {border-bottom: none; } */
#topmenubox .m_inner {width: 100%; max-width: 1280px; height:100%;  margin: 0 auto; padding: 0; position:relative;}

#topmenubox a.logo img {max-height:80%; max-width:35%; position: absolute; left: 4%; bottom: 15px;} 
#topmenubox a.logo img.reduced {display: none;}

#topmenubox.reduced {height:50px; transition: 0.5s all;}
#topmenubox.reduced #nav {position: absolute; right: 0%; bottom: 0px;}
#topmenubox.reduced a.logo img.reduced {display: block; position: absolute; left: 4%; bottom: 10px; max-height:30px;}
#topmenubox.reduced a.logo img.default {display: none;}
#header.reduced {padding-top:50px; transition: 0.5s all;}

#topmenubox a img.logo {max-height:80%; max-width:30%; position: absolute; left: 4%; bottom: 15px;} 

/* #topmenubox.reduced {height:42px; transition: 0.5s all;} damit Logo nicht verkleinert wird */

/* 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 {float: right; padding: 75px 0 0 0;}
/*#nav {position: absolute;	left: 4%; 	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;
	/* background: #eee; */

}
#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: #aaa; text-align: left; font-weight: normal; list-style-type: none; list-style-image: none ;}
#nav ul li a {display: block; padding: 0px 15px 0px 15px; font-size: 17px; XXfont-weight: bold; line-height: 31px; border-right:0px #ddd solid; color: #000; text-decoration: none;  text-transform: uppercase; letter-spacing: 2px; background-repeat: no-repeat; 
font-family:'latoregular', Arial, sans-serif;}
#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: #3f7eb4;*/ 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 #3f7eb4; padding-bottom: 4px;}
*/
#nav ul li.Impressum, 
#nav ul li.Home, 
#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 #3f7eb4; }

/* 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 #3f7eb4; }

#nav ul li.menu-first ul li a:hover span {border-bottom: none; padding-bottom: 0px; color: #3f7eb4;}
#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: #3f7eb4;}
#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;}

.desktop-only {display: block!important;}
.mobile-only {display: none!important;}


/* ======================================================================================================
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: 1280px) {
	div {border: 0px solid red;}

	.rightbox h2 {margin-top: 20px; font-size: 36px;line-height: 46px;}
	h4 {font-size: 1.1em; }
	.infobox-long h4 {text-align: center;}
		.infobox-short h5 {font-size: 18px;}
	
	.contentbox.slogan {padding: 10px 18% 10px 18%;}
	.contentbox.slogan p {font-size: 24px;}
	
	.delivered {padding: 160px 3% 50px 5%;}
	.infobox-wrapper {padding-top: 20px;}
}


/*Smaller Screens */
@media screen and (max-width: 1170px) {
	div {border: 0px solid blue;}

	.outer,  .mainbox, #topmenubox .m_inner  {width:100%; margin: 0 0 0 0;}
	.XXtopheader {background-size: 100% auto;}

	td.bildbox p {font-size: 19px;}
	
	.delivered {padding: 130px 3% 50px 5%;}
}


/*Smaller Screens */
@media screen and (max-width: 1024px) {
	div {border: 0px solid yellow;}
	
	.desktop-only, img.desktop-only {display: none!important;}
	.mobile-only, img.mobile-only {display: block!important;}
	
	.zitat-bar {position: relative; top: 0; left: 0;  width: 94%; height: auto; margin: 20px 0; padding: 0 3% 0 3%; text-align: center;  background-color: transparent;}
	
	#logo-wrap, .flex-direction-nav, .content.desktop, .gallery-box .mask {display: none;}
	
	.content.contentnarrow {float: none; width: 96%;}
	
	.contentbox.page-id-1 {width: 88%; padding: 60px 6% 60px 6%;}
	.contentbox.page-id-1 .rightbox {display: none;}
	.contentbox.page-id-5 .rightbox {width: 96%; margin-top: 50px;  border: 1px solid #ccc;}
	
	img.logo {display: block; position: absolute;right: 4%; bottom: 3px; max-height: 80%; max-width: 100%;}

	.contentbox {width: 92%; padding: 50px 4% 20px 4%;}
	.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: 10px 3% 10px 3%;}
	
	.mainbox, .contentwide, .contentwidenarrow, .main, .content.mobile {float: none;  border-left:none; display:block;}
	.contentbox.page-id-1.main {width: 100%; padding: 50px 0% 60px 0%;}
	.contentbox.page-id-1.main .content {width: 90%!important; padding: 0 5%;}
	
	.rightbox, .rightbox.main, .content.narrow {float: none; width:100%; margin-top: 0;}
	.rightbox .inner, .content.mobile {text-align: center; margin: 0;}
	.rightbox.wide .inner {text-align: left;}
	.contentbox.page-id-16 .rightbox {width: 96% !important; margin-top: 20px; padding: 20px 1% 20px 3%; background: #e6e6e6;}
	.contentbox.page-id-16 .rightbox td {text-align: left;}
		
	.footerbox {padding-top: 20px;}
	/*.footerbox .right {float: none; width: 100%; padding: 0; text-align: center;}*/
	
	.toggleMobileMenu {position: absolute; right:4%; bottom: 35px; display:block; width:4%; height:100px; background: url(img/menuswitch1.png) no-repeat bottom right; background-size: contain; }
	
	.topspacer {padding-top: 60px;  }	!important
	#XXtopparallax {padding-top: 50%; }
	
	/*.topmenubar {width: 70%; margin: 0 auto; padding-top: 15px;}*/
	.topmenubar ul#topmenu {float: right; padding-top: 35px;}
	.topmenubar ul.gallery_menu li a {font-size: 18px; line-height: 40px;}
	
	#topmenubox {height: 120px !important;}
	#topmenubox #nav {display:none;}	
	#topmenubox {width: 100%;}
	#topmenubox a img.logo {max-height:80%; max-width:40%;}

	#topmenubox a.logo img.default, 
	#topmenubox.reduced a.logo img.default {display: block; position: absolute; left: 4%; bottom: 15px;  max-width:45%;}
	#topmenubox.reduced a.logo img.reduced {display: none;}
	#topmenubox.reduced a.logo img {position: absolute; left: 4%; bottom: 15px;}
	
	
	/*Nav*/
	
	.breadcrumbs { height:560px; }
	
	#nav2 {width:190px; padding-left: 30px; height: auto; position:absolute; left:-300px; top:100px; z-index:2000; transition: left 1s; }
	#nav2  {background: #fff; box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.4);}
	
	#nav2 {padding-top: 40px;} /* mux */
	#nav2 li.lev1 {display: none;} /* mux */
	/* #nav2 li a.menu-first {border-top: 2px solid #3f7eb4;} */

	
	#nav2 li {width:150px;  padding: 0 0 0 0; }
	#nav2 li a {display:block; padding: 10px 0 10px 0; font-size:16px; text-transform: uppercase; color:#000; text-decoration: none; border-bottom: 2px solid #3f7eb4;}
	#nav2 li a:hover {color: #3f7eb4;}
	#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: #3f7eb4 !important;*/ /* color:#fff;  text-shadow: 1px 2px 4px #000;*/}
	
	#nav2 ul li a.menu-expand.is_opened, #nav2 ul li a.menu-parent {color: #3f7eb4; /*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: #3f7eb4 !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;} 
	
	h1 {font-size: 1.2em;}
	h2 {font-size: 1.1em;}
	h3 {font-size: 1.0em; } 
	h4 {font-size: .9em; }
	h5 {font-size: .8em; }
	.contentbox.profil h3 {margin-top: 0px; font-size: 24px;}
	.infobox-short h5 {font-size: 20px;}

	td.bildbox {display: block; width: 92%!important; margin: 0 4%; padding: 0px 0% 20px 0%;}
	.textbox, .textbox.box3 { width: 92%; max-width: 92%; min-height: 0; margin: 0 4%; padding: 0px 0% 20px 0%;}
	td.spacer {display: none;}
	
	.delivered {padding: 100px 3% 50px 5%; background: #cfd4d7 url(img/delivered-mobile.jpg) no-repeat center top; background-size: contain;}
	.infobox-wrapper {float: none; width: 100%; margin: 0 0 0 0; padding-top: 0px;}
	.infobox {min-height: 50px; width: 100%; margin: 0; padding: 0 0 25px 0; }
	.infobox-full td {display: block; width: 100%;}
	.infobox-full td.col1 {padding-bottom: 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: 94%; padding: 50px 3% 10px 3%;}
	.footerbox .left {min-width: 230px; padding-left: 0%;}
	.footerbox .right {max-width: 70px; margin: 0 0 0 0; padding-right: 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: 17px;}
	.footerbox, .footerbox a {font-size: 17px;}
	
	/*.headerbox { margin-top: 50px; } */

	.rightbox .inner { margin: 0 0 0 0;}
	
	.XXfrontpage .outer  {background-position: center top;}
	.topheader  {padding-bottom: 30%;  background-size:  100% auto, auto; background-image: url(img/header-mobile.jpg);}


	#topmenubox {height: 80px !important;}	
	#topmenubox a.logo img.default, 
	#topmenubox.reduced a.logo img.default {display: block; position: absolute; left: 4%; bottom: 7px;}
	#topmenubox.reduced a.logo img.reduced {display: none;}
	#topmenubox.reduced a.logo img {position: absolute; left: 4%; bottom: 2px;}
	
	.topspacer.page-id-1, #header {padding-top: 80px;}
	.topspacer img {padding-top: 0px !important;}
		
	.toggleMobileMenu {position: absolute; right:4%; bottom: 20px; width: 5%; height:100px; background: url(img/menuswitch1.png) no-repeat bottom right; background-size: contain; }
	
	#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%;}
	
	.contentbox {width: 92%; padding: 20px 4% 20px 4%;}
	
	.contentbox.slogan {width: 94%; padding: 10px 3% 10px 3%;}
	.contentbox.slogan p {font-size: 20px;}
	
	.contentwide.center {width: 90%; padding: 0 5%;}
	
	td.bildbox h4 {margin-top: 0; font-size: 20px;}
	
	.delivered {padding: 20px 3% 50px 7%;}

}

/* ======================================================================
Smaller Screens */
@media screen and (max-width: 480px) {
	div {border: 0px dotted blue;}

	.contentbox.page-id-1 {width: 88%; padding: 30px 6% 10px 6%;}
	
	#topmenubox a.logo img.default, 
	#topmenubox.reduced a.logo img.default {display: block; position: absolute; left: 4%; bottom: 15px; max-width: 60%;}
	.toggleMobileMenu {position: absolute; right:4%; bottom: 25px; width: 7%; background: url(img/menuswitch1.png) no-repeat bottom right; background-size: contain; }
	

	.topheader p { font-size:1.4em; }
	
	h1 {font-size: 1.0em;}
	h2 {font-size: 1.0em;}
	h3 {font-size: .9em;}
	h4 {font-size: .8em;}
	h5 {font-size: .7em;}
	.infobox-short h5 {font-size: 18px;}
		
	.contentbox.slogan p {font-size: 16px;}
}



/* ====================================================================== */
#return-to-top {
	z-index: 3;
    position: fixed;
    bottom: 20px;
    right: 20px;
		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 {
    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: 90px; right: 20px; }
}
	



/* ====================================================================== */
flipper img { width: 100%; height:auto}

.__flipbox {
  perspective: 2000px; 
  max-width: 600px; 
  margin-left:auto; margin-right:auto;
  margin-top: 2em; 
}
.flipbox:hover .flipper, .flipbox.hover .flipper { 
  transform: rotateY(180deg); 
}
/*
.flipbox, .front, .back {
  width: 270px;height: 202px; 
}
*/

.flipper {
  position: relative;
  transition: 1s;
  transform-style: preserve-3d;
}

.front, .back {
  position: absolute;top: 0;left: 0;
  -webkit-backface-visibility:hidden;
  backface-visibility: hidden;
}

.front {transform: rotateY(0deg);}
.back {transform: rotateY(180deg);}


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


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