/*
	/styles/layout.css
	mobile first css
	
	*** mobile ***
*/

/* global layouts */
*			{ font-family: Arial; outline: 0; color: black; }
a			{ color: #0065c1; }
a:hover		{ color: black; outline: 0; text-decoration: none; }
a:active	{ color: black; outline: 0; }
.clear 		{ clear: both; }

iframe, object, embed {
        max-width: 100%;
}

.bx-controls	{ display: none; }

.mobmenu { margin-right: 20px; }
.mobmenu span { font-size: 50px; color: #0364C2; }
body > header * { position: static !important; }
body > header .glyphicon { position: static; }
header #topBar { position: static; }

/* body */
body		{ margin: 0; padding: 0; background: white; }

/* header */
header 						{ width: 100%; }
header #topBar				{ width: 100%; background: #ededed; padding-top: 10px; }
header #topBar .mobBtn		{ font-size: 50px; color: #0065c1; }
header #topBar .mobBtn	span{ font-size: 50px; color: #0065c1; }

header #topBar .mobNavBtn		{ float: right; margin-left: 20px; }
header #topBar .mobSearchBtn	{ float: left; margin-left: 20px; }
header #topBar .mobContactBtn	{ float: left; margin-left: 20px; }

header #mobContact		{ display: none; border-top: 20px solid white; padding: 20px; }
header #mobSearch		{ display: none; width: 100%; border-top: 20px solid white; padding: 20px; }
header #mobSearch label				{ display: block; width: 80%; float: left; }
header #mobSearch label:last-child	{ display: block; width: 20%; }
header #mobSearch input[type=text] 	{ background: #fff; border: 0 !important; outline: none; height: 40px; margin: 0; padding: 0; width: 100%; color: #646464; padding-left: 10px; -webkit-appearance: none; -webkit-border-radius:0; border-radius:0; }
header #mobSearch input[type=submit] { background: url('../images/search.jpg') no-repeat center right #fff; margin: 0; padding: 0; border: 0; top: 0; width: 100%; height: 40px; color: transparent; cursor: pointer; }

header .logo			{ display: block; margin: 20px 0 0 20px; }

/* wrapper */
#wrapper	{ max-width: 767px; border-left: 20px solid white; border-right: 20px solid white; margin: auto; padding-bottom: 25px; margin-top: 30px; }

#wrapper h1	{ font-size: 20px; color: black; margin: 0 0 10px 0; padding: 0; }
#wrapper h2	{ font-size: 17px; color: black; margin: 0 0 20px 0; padding: 0; font-weight: normal; }

/* slider */
.bx-wrapper 			{ margin-bottom: 25px; }
.bx-pager				{ display: none; }
.bx-wrapper .bx-caption { padding: 10px 0 0 0; background: none; width: 100%; height: 125px; color: black; z-index: 999; }
.bx-caption h1 			{ font-size: 25px; margin: 0 0 10px 0; padding: 0; }
.bx-caption p			{ font-size: 15px; color: black; max-width: 500px; }
.bx-wrapper ul li img { width: 100%; }

/* home boxes */
.homeBox		{ width: 100%; border-top: 3px solid #0065c1; float: none; min-height: 220px; background: #ededed; margin-bottom: 25px; }
.homeBox img	{ width: 100%; }
.homeBox h3		{ padding: 5px 10px; margin: 0; font-size: 15px; color: black; }
.homeBox a		{ display: block; margin: 0px 10px; padding-left: 15px; background: url("../images/arrow.png") no-repeat left center; }

/* mitarbeiter GL */
.mitarbeiterGL	{  }
.mitarbeiterImg	{ display: block; max-width: 300px; }

.mitarbeiterGL blockquote			{ width: 100%; background: url("../images/zitat-l.png") no-repeat left top #ededed; margin: 0 0 20px 0; padding: 0; }
.mitarbeiterGL blockquote span 		{ display: block; background: url("../images/zitat-r.png") no-repeat right bottom; }
.mitarbeiterGL blockquote p 		{ padding: 30px 40px; font-size: 13px; }

/* mitarbeiter */
.mitarbeiter h2			{ margin-bottom: 5px !important; margin-top: 20px !important; }
.mitarbeiter img	{ display: block; max-width: 100%; }
.mitarbeiter .mitarbeiterItem { width: 70%; display: table-cell; vertical-align: bottom; }

/* gruppe uebersicht */
.gruppe .gruppeBox		{ width: 100%; display: block; }
.gruppe .gruppeBox img	{ max-width: 100%; display: block; }
.gruppe .gruppeBox strong	{ max-width: 100%; display: block; margin-top: 10px; }
.gruppe .gruppeBox p	{ max-width: 100%; display: block; height: 30px; }

/* leistungen */
.leistungen .leistungsBox { width: 100%; display: block;  background: #ededed; padding-bottom: 20px; margin-bottom: 20px; }
.leistungen .leistungsBox .leistungImg { width: 100%; }
.leistungen .leistungsBox h2 { margin: 10px 0 20px 20px !important; height: 40px; }
.leistungen .leistungsBox p { margin: 0 20px 0 20px !important;min-height: 150px; }
.leistungen .leistungsBox strong, .leistungen .leistungsBox a { margin: 0 20px 0 20px !important;}

/* realisierte Bauten */
.auflistung 		{ display: block; margin-right: 20px; border-bottom: 1px solid black; padding: 4px 0; }
.auflistung strong	{ display: block; width: 100%; line-height: 22px; }
.auflistung a		{ display: block; line-height: 22px; }

/* aktulle Bauten */
#map_canvas			{ height: 400px; width: 100%; }
.mapsInfo			{ width: 200px; height: 100px; }

/* baustellen */
.baustelleleft 		{ width: 100%; }
.baustelleright		{ width: 100%; }
#slider				{ margin-bottom: 30px; }
#slider	img			{ width: 100%; margin-bottom: 10px; }
.thumb				{ display:block; float: left; width: 19%; margin-right: 1%; height: 50px; background-position: center center;  }
.lageplan			{ display: block; background: url("../images/lageplan.png") no-repeat left center; height: 26px; padding-left: 40px; margin-bottom: 15px; }
.zufahrt			{ display: block; background: url("../images/zufahrt.png") no-repeat left center; height: 26px; padding-left: 40px; margin-bottom: 15px; }
.webcam				{ display: block; background: url("../images/webcam.png") no-repeat left center; height: 26px; padding-left: 40px; margin-bottom: 15px; }
.project			{ display: block; background: url("../images/project.png") no-repeat left center; height: 26px; padding-left: 40px; margin-bottom: 15px; }

/* IMAGE SWAP GALLERY NEU */
#swap li { display: inline-block; list-style: none; margin: 0 10px 10px 0; padding: 0; height: 50px; width: 19%; overflow: hidden; float: left; }
#swap li:hover { cursor: pointer;}
#swap ul { padding: 0 !important; float: left; display: block; width: 100%;  }
#swap li img { width: 140% !important; height: auto;  }
#swap #main-img { padding: 0; }


/* footer */
footer.address			{ width: 100%; height: auto; background: #0065c1; padding: 20px; color: white; }
footer.address h2		{ margin: 0 0 10px 0; padding: 0; font-size: 20px; color: white; }
footer.address span		{ display: block; color: white; }
footer.address a		{ color: white; }
footer.address strong	{ color: white; }

footer.media		{ width: 100%; height: auto; background: #ededed; padding: 20px; margin: 0; }
footer.media span	{ display: block; }
footer.media h2		{ margin: 0 0 10px 0; padding: 0; font-size: 15px; color: black; font-weight: bold; }

footer.media .socialmedia img	{ width: 50px; }
footer.media .socialmedia span	{ display: none; }

footer.media .copy		{ color: #969696; font-size: 12px; margin-top: 20px; }
footer.media .copy span	{ color: #969696; font-size: 12px; }
footer.media .copy a	{ color: #969696; font-size: 12px; }


/* redesign 2017 */

.rede #wrapper			{ margin-top: 0; }
.rede header			{ background: #0065c1; border-right: 20px solid white; border-left: 20px solid white; min-height: 225px; }

.rede header .logo		{ bottom: 0; top: auto; max-width: 100%; width: auto; margin: 0; }

.rede header #topBar	{ background: white; }
.rede header #topBar .mobContactBtn	{ margin-left: 0; }
.rede .mobmenu			{ margin-right: 0; }

.rede #meta				{ padding-top: 7px; }
.rede #meta a			{ color: white; font-size: 14px !important; line-height: 42px; }

.rede #search			{ padding-top: 7px; padding-right: 30px; }
.rede #search img		{ cursor: pointer; }
.rede #search img,
.rede #search .search-box	{ float: right; display: none; }
.rede #search .search-box input	{  background: #0065c1; border: 0; border-bottom: 1px solid white; color: white; height: 38px; }
.rede #search .search-box input[type="submit"]	{ background: url("../images/suche-redesign.png") 0 0 no-repeat; border: 0px solid white; text-indent: -999px; height: 38px; width: 42px; }

.rede header nav		{ background: transparent; border-left: 335px solid transparent; padding-top: 69px; }
.rede header nav ul 		{ border-bottom: 13px solid #0065c1; }
.rede header nav ul li		{ border-bottom: 13px solid #0065c1; }
.rede header nav ul li a	{ color: white; font-size: 18px; font-weight: normal; border-bottom: 1px solid white; padding: 0 5px; line-height: 32px; }
.rede header nav ul li:hover a,
.rede header nav ul li.active a	{ background: white; color: #0065c1; font-weight: normal; }

.rede #wrapper.content	{ margin-top: 40px; }

.rede .slider-caption	{ text-align: center; }
.rede .slider-caption h2	{ font-size: 30px !important; }
.rede .slider-caption p 	{ font-size: 15px; }

.rede footer.address	{ max-width: 1260px; margin: auto; height: auto; background: #0065c1; padding: 20px; color: white; border-left: 20px solid white; border-right: 20px solid white; }
.rede footer.media		{ max-width: 1260px; margin: auto; height: auto; background: #ededed; padding: 20px; padding-bottom: 0; border-left: 20px solid white; border-right: 20px solid white;  }

.rede .homeBox		{ width: 100%; float: none; min-height: 220px; margin-bottom: 25px; border-top: 0; background: white; }
.rede .homeBox img	{ width: 100%; margin-bottom: 10px; }
.rede .homeBox h3		{ padding: 10px 10px; margin: 0; font-size: 15px; color: black; font-weight: bold; background: #ededed; }
.rede .homeBox a		{ display: block; margin: 3px 0px; padding-left: 0; background: none; }

.rede #wrapper.content aside.left ul	{ border-top: 0; }
.rede #wrapper.content aside.left ul li	{ background: #0065c1; border: none; border-top: 5px solid white; padding: 0; }
.rede #wrapper.content aside.left ul li.current,
.rede #wrapper.content aside.left ul li:hover	{ background: black; }

.rede #wrapper.content aside.left ul li a { color: white; padding-left: 10px; line-height: 30px; }
.rede #wrapper.content aside.left ul li.current a,
.rede #wrapper.content aside.left ul li:hover a { color: white;  }

.rede #wrapper.content aside.left ul li.current ul { margin-left: 0; border: 0; border-top: 5px solid white;  }
.rede #wrapper.content aside.left ul ul li,
.rede #wrapper.content aside.left ul ul li.current { background: white; position: relative; }
.rede #wrapper.content aside.left ul li.current ul li a	{ background:white; line-height: 23px; color: #0065c1; padding-left: 15px; margin-left: 5px; border-left: 1px solid black;}

.rede #wrapper.content aside.left ul li.current ul li:hover,
.rede #wrapper.content aside.left ul li.current ul li a:hover,
.rede #wrapper.content aside.left ul li.current ul li.current,
.rede #wrapper.content aside.left ul li:hover ul li	{ background: white !important; }



.rede #wrapper.content aside.left ul li.current ul li:hover a:before,
.rede #wrapper.content aside.left ul li.current ul li.current a:before {	
	content: ">";
	color: transparent;
	top: 0;
	width: 11px;
	left: 0;
	position: absolute;
	background-image: url("../images/nav-icon-redesign.png") !important; 
	background-repeat: no-repeat;
	background-position: 0px 4px;
	z-index: 999;
	}
	
	
.rede #wrapper.content aside.left ul li.current ul li ul	{ display: none; }
.rede #wrapper.content aside.left ul li.current ul li.current ul	{ display: block; margin-bottom: 0; border: none; }
.rede #wrapper.content aside.left ul li.current ul li.current ul li a	{ padding-left: 40px; }

.rede #wrapper.content aside.left ul li.current ul li:hover ul li a:before,
.rede #wrapper.content aside.left ul li.current ul li.current ul li a:before {
	content: '';	
}

.rede #wrapper.content aside.left ul li.current ul li.current ul li.current a,
.rede #wrapper.content aside.left ul li.current ul li.current ul li a.hover,
.rede #wrapper.content aside.left ul li.current ul li.current ul li:hover a {
	color: black;
}

.rede header #mobSearch input[type="text"]	{ border: 2px solid #0065c1 !important; color: #0065c1; }


/* scroll top */
.toTop { float: right; font-size: 40px; padding-bottom: 15px; cursor: pointer; margin-right: 20px; color: #0065c1; }


/**** tablet ****/
	
@media only screen and (min-width: 768px) {

	header	{ max-width: 949px; min-height: 170px; margin: auto; position: relative; border-left: 20px solid white; border-right: 20px solid white; }
	
	#meta		{ text-align: right; float: right; display: block; height: 50px; padding-top: 15px; }
	#meta a,
	#meta img	{ float: right; }
	#meta a		{ padding-right: 30px; color: black; }
	
	#search		{ float: right; display: block; padding-top: 15px; }
	header #search label				{ display: block; width: 80%; float: left; }
	header #search label:last-child		{ display: block; width: 20%; }
	header #search input[type=text] 	{ background: #fff; outline: none; height: 20px; margin: 0; padding: 0; width: 100%; color: #646464; padding-left: 10px; border: 1px solid #a0a0a0; border-right: 0; }
	header #search input[type=submit] 	{ background: url('../images/search.jpg') no-repeat center right #fff; margin: 0; padding: 0; top: 0; width: 100%; height: 20px; color: transparent; cursor: pointer; border: 1px solid #a0a0a0; border-left: 0; }

	header .logo		{ display: block; position: absolute; top: 50px; left: 0; padding: 0; float: left; width: 206px; z-index: 999; margin: 0; }
	header nav			{ float: left; background: url("../images/nav.jpg"); width: 100%; border-left: 246px solid white; }
	header nav ul		{ list-style-type: none; padding: 0; height: 53px; margin: 0; max-width: 1260px;  border-bottom: 13px solid white; }
	header nav ul li	{ float: left; padding: 0 10px; font-size: 15px; height: 53px; display: block;  border-bottom: 13px solid white; }
	header nav ul li a	{ line-height: 40px; display: block; font-weight: normal; }
	header nav ul li.active a	{ font-weight: bold; background: url("../images/nav_arrow.png") center bottom no-repeat; }
	header nav ul li:hover a	{ background: url("../images/nav_arrow.png") center bottom no-repeat; }
	
	#wrapper			{ max-width: 949px; margin: auto; border-left: 20px solid white; border-right: 20px solid white; position: relative; }
	#wrapper.content	{ padding: 0 0 0 246px; min-height: 750px; }
	
	/* aside left (nav) */
	#wrapper.content aside.left			{ position: absolute; left: 0; top: 0; width: 206px; }
	#wrapper.content aside.left ul		{ margin: 0; padding: 0; list-style-type: none; border-top: 1px solid #969696; }
	#wrapper.content aside.left ul li	{ padding: 5px 0; line-height: 20px; border-bottom: 1px solid #969696; }
	#wrapper.content aside.left ul li a	{ font-weight: bold; display: block; font-size: 13px; }
	#wrapper.content aside.left ul li.current a	{ font-weight: bold; color: black; }
	
	/* aside right */
	#wrapper.content aside.right		{ position: absolute; left: 0; top: 0; width: 206px; border-right: 2px solid #dcdcdc; min-height: 250px; }
	#wrapper.content aside.right h2		{ font-size: 20px; margin: 0 0 10px 0; padding: 0; color: black; }
	#wrapper.content aside.right p		{ padding-left: 0; }
	#wrapper.content aside.right div	{ padding-left: 0; }
	
	/* 2nd */
	#wrapper.content aside.left ul li ul				{ display: none; }
	#wrapper.content aside.left ul li.current ul		{ display: block; border: none; margin-bottom: 5px; margin-left: 4px; border-left: 1px solid #969696; }
	#wrapper.content aside.left ul li.current ul li		{ border: none; line-height: 20px; padding: 0; }
	#wrapper.content aside.left ul li.current ul li a	{ padding-left: 15px; font-weight: normal; color: #0065c1; }
/*	#wrapper.content aside.left ul li.current ul li a:hover,
	#wrapper.content aside.left ul li.current ul li.current a	{ color: black; background: url("../images/subnavarrow.png") no-repeat 0 4px; }*/

	/* slider */
	.bx-wrapper { margin-bottom: 25px; /* margin-top: -60px; */ }
	.bx-pager	{ display: block; }
	.bx-wrapper .bx-caption {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 30px 0 0 50px;
		background: url("../images/sliderMask.png");
		width: 100%;
		height: 125px;
		color: black;
		}
		.bx-caption h1 	{ font-size: 25px; margin: 0 0 10px 0; padding: 0; }
		.bx-caption p	{ font-size: 15px; color: black; max-width: 500px; }

	/* home boxes */
	.homeBox		{ width: 31.333%; margin-right: 3%; border-top: 3px solid #0065c1; float: left; }
	.homeBox.last	{ margin-right: 0; }
	
	
	
	.rede .homeBox	{ width: 31.333%; border-top: 0; float: left; }
	.rede .slider-caption		{ width: 60%; margin: auto; }
	.rede .slider-caption h2	{ font-size: 50px !important; padding-top: 30px; margin-top: 30px !important; }
	.rede .slider-caption p 	{ font-size: 17px; }
	

	/* mitarbeiter */
	.mitarbeiterGL .mitarbeiterImg	{ float: right; max-width: 300px; }
	.mitarbeiterGL blockquote			{ width: 50%; background: url("../images/zitat-l.png") no-repeat left top #ededed; margin: 0; padding: 0; }

	/* mitarbeiter */
	.mitarbeiter h2			{ margin-bottom: 5px !important; margin-top: 20px !important; }
	.mitarbeiter img	{ float: left; max-width: 28%; margin-right: 2%; }
	.mitarbeiter .mitarbeiterItem { float: left; width: 70%; display: table-cell; vertical-align: bottom; }

	/* gruppe uebersicht */
	.gruppe .gruppeBox		{ width: 45%; display: block; float: left; }
	.gruppe .gruppeBox img	{ max-width: 100%; display: block; }
	.gruppe .gruppeBox strong	{ max-width: 100%; display: block; }

	/* leistungen */
	.leistungen .leistungsBox { width: 49%; margin-right: 1%; float: left; display: block; min-height: 440px; background: #ededed; }
	.leistungen .leistungsBox h2 { margin: 10px 0 20px 20px !important; height: 40px; }
	.leistungen .leistungsBox p { margin: 0 20px 0 20px !important;min-height: 280px; }
	.leistungen .leistungsBox strong { margin: 0 20px 0 20px !important;}

	/* realisierte Bauten */
	.auflistung 		{ display: block; margin-right: 20px; border-bottom: 1px solid black; padding: 4px 0; }
	.auflistung strong	{ display: block; float: left; width: 80%; line-height: 22px; }
	.auflistung a		{ display: block; float: left; width: 20%; text-align: right; line-height: 22px; }

	/* baustellen */
	.baustelleleft 		{ width: 55%; float: left; margin-right: 5%;}
	.baustelleright		{ width: 40%; float: left; }

	/* footer */
	footer.address span 	{ display: inline; float: left; font-size: 12px; }
	footer.address .right	{ float: right; }
	.break					{ display: block; clear: left; }

	footer.address #address { max-width: 1220px; margin: auto; }
	
	footer.media			{ padding-bottom: 0; }
	footer.media #media 	{ max-width: 1220px; height: 150px; margin: auto; background: url("../images/kran.png") no-repeat right bottom; }
	footer.media .footerBox { float: left; width: 19%; padding-right: 1%; }
	footer.media .socialmedia span	{ display: inline; }
	footer.media .socialmedia a		{ display: block; width: 50%; margin-bottom: 5px; font-size: 12px; }
	footer.media .socialmedia img	{ width: 25px;}
	
	
	footer.media .leistungen a,
	footer.media .baustellen a,
	footer.media .stellen a { display: block; font-size: 12px; }

	footer.media .copy span { display: inline; float: left;}


}

/**** desktop ****/

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

	header	{ max-width: 1260px; }

	header nav ul li	{ float: left; padding: 0 20px; font-size: 1.8rem; height: 53px; display: block;  border-bottom: 13px solid white; }
	.break					{ clear: none; }

	#wrapper	{ max-width: 1260px; }
	#wrapper.content	{ padding: 0 320px 20px 246px; min-height: 620px; }
	#wrapper.content.full	{ padding: 0 0 20px 246px; min-height: 620px; }

	/* gruppe uebersicht */
	#wrapper.gruppe		{ padding: 0 0 0 246px; min-height: 550px; }
	.gruppe .gruppeBox		{ width: 25%; display: block; float: left; }

	/* leistungen */
	.leistungen .leistungsBox { width: 19%; margin-right: 1%; float: left; display: block; min-height: 440px; background: #ededed; }
	#wrapper.leistungen		{ padding: 0 0 0 0; min-height: 650px; }
	.gruppe .gruppeBox		{ width: 25%; display: block; float: left; }

	/* aktulle Bauten */
	#map_canvas			{ height: 400px; width: 98%; }

	#wrapper.content aside.right		{ position: absolute; left: auto; right: 0 !important; top: 0; width: 300px; border-left: 2px solid #dcdcdc; min-height: 530px; border-right: 0; }
	#wrapper.content aside.right h2		{ font-size: 20px; margin: 0 0 10px 0; padding: 0 0 0 20px; color: black; }
	#wrapper.content aside.right p		{ padding-left: 20px; }
	#wrapper.content aside.right div	{ padding-left: 20px; }

	
	footer.address #address { max-width: 1220px; }
	footer.media #media 	{ max-width: 1220px; }
	
	

}