body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video,
article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
img {
 max-width: 150%;
}
html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  font-family: 'Roboto Condensed', "Helvetica Neue", Arial Narrow, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: #000;
  background-color: #fff;
}

* {
	margin: 0; padding: 0;
}


h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 400;
}


h5,
.h5 {
  font-weight: 600;
}


.logo img { 
	-ms-interpolation-mode: bicubic; 
	position: absolute;
	max-width: 100%;
	float: none; 
	right: 10px;
	margin-top: -60px;
	width:300px;
}
	
/* For modern browsers */
	.cf:before,
	.cf:after {
		content:"";
		display:table;
	}

	.cf:after {
		clear:both;
	}
	
/* For IE 6/7 (trigger hasLayout) */
	.cf {
	    zoom:1;
	}
	
	.ht { /* hide text */
	overflow: hidden;
	}
	
	h2 {
	  font-size: 20px;
	  line-height: 0.9em;
	  text-transform: uppercase;
	  margin-bottom: 1em;
	}	
	
	h3 {
		font-size: 2.6em;
		margin: 20px 0px 15px 0px;
		}
		
	h4 {
		font-size: 1em;
		margin: 0;
		}
	
	h5 {
		font-size: 1em;
		margin: -5px 0px 0px;
	}
	
	p {
		margin: 0 0 25px 0;
	}
	
	a {
 		 color: #000;
		 text-decoration: none;
	}
	
	a:hover, a:active {
		  color: #808080;
	}
	

	.active {
		  color: #A1A1A1;
	}
	
	ul {
		margin-left: 0px;
	}
	
	.wrapper {
		border: none;
		margin: 0 5px 0 0;
		width: 100%;
		position:relative;
	}
	
	h1 {
		display:none;
	}
	
	
	h2.su { 
	white-space: nowrap;
	margin-top:0;
	}
	
	article { 
		margin: 0;
		text-align:left;
		font-size: 1.5em;
		width: 91%;
	}
	
	.main-content {
	  margin-right: auto;
	  margin-left: auto;
	}

	.texte p, .texte h5, .accordion {
		margin-left: 10%;
	}

	.texte ul {
		margin: -15px 0 10px 11%;
	}

	.texte h4 {
		margin-left: 16px;
	}
	
	.detail {
		padding: .5em 1em .5em 1.2em;
		margin-top: 30px;
		z-index:600;
		font-size: 1.5em;
		}	
		
	.liste {
		margin: 130px 0 -123px 16px;
		font-size:1.1em;
	}
	
	.accordion {
		font-family: 'Roboto Condensed', "Helvetica Neue", Arial Narrow, sans-serif;
		background-color: #FFF;
		cursor: pointer;
		width: 100%;
		border: none;
		text-align: left;
		outline: none;
		font-size: 1em;
		transition: 0.4s;
	}

	.accordion.active, .accordion:hover {
		 color: #808080;
	}
	
	.fotokl {
		margin-top: -22px;
	}
	.panel {
		padding: 0;
		background-color: white;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.2s ease-out;
		font-size: 10px;
	}	

	a.popup {
		text-decoration:none;
		position:relative;
		margin-bottom: -1.3em;
		display:block;
	}

	a.popup:hover {
		border:none;
	}

	a.popup img {
		border:none;
		position: fixed;
		z-index: 700;
	}

	a.popup span {
		visibility:hidden;
		position:absolute;
		top:0;
		right: 0;
	}

	a.popup:hover span {
		visibility:visible;
	}


	
	.fotodetail {
		position: absolute;
		text-align: right;
		right: -13.75em;
		top: 11.2em;
		transform: rotate(270deg);
		width: 150px;
		height: 150px;
		font-size: 0.9em;
	}


	.foto {
		position: absolute;
		text-align: right;
		right: -13.75em;
		top: 0.1em;
		transform: rotate(270deg);
		width: 150px;
		height: 150px;
		font-size: 0.9em;
	}
	
	
	footer {
		position: absolute;
		margin-bottom: 10px;
		margin-left:-8px;
	}
	
	embed,
	object,
	video {
		max-width: 100%;
	}
	

/* Header ----------------------------------------------------------------------------------------------------------------------------------------------------- */
	.menuskip {
		background: #000;
		text-align: center;
	}
	
	.menuskip a.skip {
		color: #fff;
		font-size: .75em;
		line-height: 2;
		text-decoration: none;
	}
	
	.menu-btn {
		display: none;
	}
	
	
	.masthead-inner {
		padding: 1em;
		text-align: center;
	}

/* Content ----------------------------------------------------------------------------------------------------------------------------------------------------- */

	.flexi {
		text-align: left;
		width: 100%;
		margin-top:-80px;
		margin-bottom:-80px;
		padding-bottom:-100px;
	}

	.content {
		#max-width: 1550px;
	}

/* Navigation ----------------------------------------------------------------------------------------------------------------------------------------------------- */

	nav ul a {
	  padding: .5em 1em;
	  text-decoration: none;
	  -moz-transition: color .3s ease;
	  -webkit-transition: color .3s ease;
	  transition: color .3s ease;
	}

	nav.main {
		position: absolute;
		top: 20px;
		z-index:600;
	}

	nav.main h2 {
		padding: 0 16px;
		display:none;
	}

	
	nav.main ul li, nav.sub ul li, nav.foot ul li {
  padding: 0px 8px 0px 0px;
  margin: 0px 10px 0px 0px;
  /**/
  height: auto;
  display: inline-block;
}

nav.foot ul li {
  text-transform: uppercase;
}



nav.main ul li a, nav.sub ul li a, nav.foot ul li a {
  display: inline;
  padding: 0;
  text-decoration:none;
  text-transform:none;

}	

nav.main ul li a {
  font-size: 1.2em;
}

nav.sub ul li a {
  font-size: .5em;
}

	nav.main .active a, nav.sub .active a {
	  color: #FF0000;
	}

	nav.sub {
		position: absolute;
		top: 70px;
		z-index:600;
		line-height: .6em;
	}

	nav.foot {
		position: relative;
		bottom: 20px;
		margin-top: 25%;
		z-index:600;
		padding-left: 5%;
		width: 100%;
	}
	
	nav.foot ul li a {
		display: inline;
		padding: 0;
		text-transform:uppercase;
		text-decoration:none;
		word-spacing: 2em;

}


/* ganz kleiner BS */
@media only screen and (max-width: 53em) {

	.content {
		margin-top: 210px;
	}
	
	h3 {
		margin: 90px 0 -180px 15px;
		font-size:1.8em;
	}

	.logo img { 
		
		text-align: right;
		width: 45%;
		padding: 0 0 50px 0;
		margin: -20px 0 0 0;
	}
	
	.projectdata-content p.no {
		display: none;
	}
		
}

	.fotodetail {
		margin-top: 0px;
		margin-bottom: 10px;
	}

  
 @media only screen and (min-width: 20em) {
	h2 {
		font-size: 2.25rem;
	}
	
	header[role="banner"] {
		text-align: center;
	}
	
	.masthead-inner {
		margin-left: auto;
		margin-right: auto;
		padding: 1.5rem 0 0;
		position: relative;
	}

	header[role="banner"] h1 {
		background: transparent url('../img/logo.png') left top no-repeat;
		background-size: 100% auto;
		height: 3rem;
		margin: 0 auto;
		max-width: 9rem;
		text-indent: -9999px;
		width: 46.66666667%;
	}
	
	.menuskip {
		display: none;
	}
	
	.menu-btn {
		display: block;
		position: absolute;
		left: 1rem;
		top: 2rem;
	}
	
	.menu-btn a {
		background: transparent url('../img/pf-a.png') center no-repeat;
		border: 2px solid #000;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
		color: #666;
		display: block;
		font-size: 19px;
		height: 2rem;
		margin: 0 auto;
		text-decoration: none;
		width: 2rem;
	}
	
  
	a.open {
		display: block;
	}
  
	a.close,
	#menu-open:target a.open {
		display: none;
	}
	
	#menu-open:target a.close {
		display: block;
		background: transparent url('../img/pf-z.png') center no-repeat;
	}

}

	

/* kleiner BS */
@media only screen and (min-width: 20em) and (max-width: 53em) {

	.wrapper {
		padding-top: 1px /*collapsing margins verhindern*/;
		position: relative;
	}
	
	nav.main {
		top: 50px;
		margin-left: 15px;
		height: 0em;
		overflow: hidden;
		position: absolute;
		font-size: 1.5rem;
		background: #FFF;

	} 

	nav.main h2 {
		padding: 0 16px;
		display:none;
	}


	
	nav.main li {
		float: left;
		
	}
	
		nav.sub {
		background: #FFF;
		height: 0em;
		margin-left: 15px;
		overflow: hidden;
		position: absolute;
		top: 100px;
		text-align:left;
		font-size: 2.7rem;
	}
	
		nav.sub li {
		float: left;
		width: 100%;
		line-height: 0.6em;

	}
  
	nav.main ul li a {
		border: none;

	}
  
	nav ul li a:hover {
		background: #FFF;
	}
  
	nav.main .active a {
		color: #666666;
	}


  
	nav, 
	header[role="banner"] {
		-webkit-transition: .5s;
		transition: .5s;
	}
	

	nav ul a {
		display: block;
		font-weight: lighter;
	}


	#menu-open:target nav {
		height: 6.575em;
	}
	
	#menu-open:target header[role="banner"] {
		#border-top: 1px solid #000;
		#margin-top: 18.575em;
	}

	

	nav.sub ul li a:hover {
		background: #FFF;
		color: #808080;
	}


	a.popup:hover span {
		visibility:hidden;
	}

	
	.homepage .main-content .teaser .projectdata h2 {
		line-height:1.2;
		font-size:1.5em;
	}
	.homepage .main-content .teaser .projectdata p {
		margin-top: -5px;
		margin-bottom: 15px;
		font-size:1.2em;
	}
	.liste {
		margin: 130px 0 -140px 16px;
	}	

}

@media only screen {

	
	.home .container {
  margin-bottom: 30px;
}
.homepage .main-content {
  width: 100%;
  margin-top: 150px;
}


.homepage .main-content .teaser {
  position: relative;
  display: inline-block;
  margin: 0 13px 13px 0;
  max-width: 25%;
  vertical-align: bottom;
  white-space: nowrap;
  /* The ghost, nudged to maintain perfect centering */
}
.homepage .main-content .teaser img {
  max-width: 100%;
  height: auto;
}
.homepage .main-content .teaser .projectdata {
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
}
.homepage .main-content .teaser .projectdata h2 {
  margin-top: 0;
}
.homepage .main-content .teaser .projectdata a {
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.homepage .main-content .teaser .projectdata .projectdata-content {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}
.homepage .main-content .teaser .projectdata:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
  /* Adjusts for spacing */
}
.homepage .main-content .teaser:hover .projectdata,
.homepage .main-content .teaser:focus .projectdata {
  opacity: 1;
}
.homepage .main-content .teaser.abs-img-size {
  max-width: 100%;
  text-align: center;
}

}
@media only screen and (min-width: 53em) {
	h3 {
		position: absolute;
		padding: .5em 1em .5em 15px;
		margin-top: 40px;
		z-index:500;
	}
	
	.homepage .main-content {
		text-align: center;
}

	.button a {
		width: 100%;
	}
	.menu-btn {
		display: none;
	}
	header[role="banner"] {
		border-top: .175em solid transparent;
		padding-left: 5%;
		padding-right: 5%;
		padding-bottom: 3.5em;
		z-index: -1;
	}
	header[role="banner"] h1 {
		height: 0;
		line-height: 0;
		margin: 0 auto;
		padding-bottom: 12%;
		max-width: 30.8641975309%;
		text-indent: -9999px;
	}

	nav.main, nav.sub {
		display: table-header-group;
	}
	
	nav.main h2 {
    /* visibility hidden; */
  
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		width: 1px;
	}
	
	.fotodetail {
		margin-top: -120px;
		margin-bottom: 120px;
	}
	
/* Grosser BS */

	nav.main, nav.sub {
		border: none;
		margin: -10px 0 0 15px;
		#max-width: 1260px;
		font-size: 25px;
	}
		
	nav.main ul, nav.sub ul {
		display: table;
		float:left;
		border:0;
		#width: 320px;
		#margin-left: -45px;
	}
  
	nav.main li, nav.sub li {
		border: none;
		display: table-cell;
	}
  
	nav.main ul li a, nav.sub ul li a {
		border: none;
		font-weight:normal;
		margin:0;
		text-align:right;
		padding:0;
	}
	
    nav.main li:last-child a {
		border: none;
	}
	
	nav.main a:hover {
		color: #808080;
	}
	
	nav.main .active a {
		position: relative;
		color: #808080;
	}
	
	nav.main .active a:after {
		background: #666666 50% bottom no-repeat;
		background-size: 100% 100%;
		content: " ";
		left: 2%;
		position: absolute;
	}

	nav.sub h2 {
    /* visibility hidden; */
  
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		width: 1px;
	}
	
		
	
	nav.sub li:last-child a {
		border: none;
	}
	
	nav.sub a:hover {
		color: #808080;
	}
	
	nav.sub .active a {
		position: relative;
		color: #808080;
	}
	
	nav.sub .active a:after {
		background: #FFF 50% bottom no-repeat;
		background-size: 100% 100%;
		left: 2%;
		position: absolute;
	}
  

	nav.foot {
		border: none;
		margin-left: 1%;
	}
		
	nav.foot ul {
		display: table;
		float:left;
		border:0;
	}
  
	nav.foot li {
		border: none;
		display: table-cell;
		letter-spacing: .05em;
		margin:0;		padding:0;

	}
  
	nav.foot ul li a {
		border: none;
		font-weight:normal;
	}
	
    nav.foot li:last-child a {
		border: none;
	}
	
	nav.foot a:hover {
		color: #808080;
	}
	
	nav.foot .active a {
		position: relative;
		color: #808080;
	}
	
	nav.foot .active a:after {
		background: #666666 50% bottom no-repeat;
		background-size: 100% 100%;
		content: " ";
		left: 2%;
		position: absolute;
	} 
	a.popup img {
		top: 200px;	
		border: none;
	}
	
	.text {
		 width: 75%;
	}
	
	img.dts {
		margin-bottom: 10em;
		margin-left: 17px;
	}
}


/* Mittlerer BS */
@media screen and (min-width: 53em) and (max-width: 79em) {
	
	.wrapper {
		border: none;
		margin: 0 5px 0 0;
		width: 845px;
		position:relative;
	}
		
	.text {
		width: 85%;
	}
	.logo img { 
		margin: -65px 0 0 560px;
	}
	
	nav.main {
		font-size: 1.9em;
	}

				  
	nav.sub {
		max-width: 500px;
		padding-bottom: -50px;
	}
		

	a.popup img {
		margin-top: 200px;
		margin-left: 560px;
	}
	

}
	
@media screen and (max-width:660px) {

	.content {
		width: 95%;
	}
	
	h1 {
		margin: 24px 0 24px 4.54545454545%;
		max-width: 43.18181818%;
	}
	
	.content_main {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		float:right;
		padding:0 20px 0 0;
		margin: 0;
		width: 100%;
		height:100%;
	}	
		
	.content_txt {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding:0;
		width: 100%;
		height:100%;
	}		
	
	h1 {
		float: none;
		margin-top: 7%;
		margin-bottom: 0;
		margin-left: 0;
		max-width: 90.90909091%;
	}

		
	.logo img{ 
		margin-top: -30px;
	}
	
	nav.main {
		margin: 40px 0 0 15px;
		font-size:1.3em;
	}
	
		nav.sub {
		margin: 20px 0 40px 15px;
		font-size:2em;
		line-height: 0.5em;
	}
	
	
	h3 {
		margin-top: 95px;
	}	

	.liste {
		margin: 140px 0 -140px 16px;
	}	
}
	
@media only screen and (min-width: 53em) and (min-width: 65em) {
	section {
		padding: 0;
	}
	
}

    /* Print ----------------------------------------------------------------------------------------------------------------------------------------------------- */
	
@media print {

	body {
		color: #000;
	}
	
	h1 {
		display: block;
		text-align: left;
		margin-left: -12px;
	}
	
	h5 {
		display: block;
		margin-top: 30px;
		font-weight: normal;
		font-size: 1.3em;
	}
	
	p.logo {
		display: none;	
	}
	

	.prj {
		float: left;
	}
	
	.content_txt {
		margin-top:0px;
	}
	
	nav.main {
		display: none;	
	}
	
	nav.sub {
		display: none;	
	}
	

	nav.foot {
		display: none;	
	}
		
	
	footer {
		display:block;
		margin-top: 10%;
	}
}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {
  display: block;
}

/* Helferklassen (immer am Ende einbinden) */
/* prevent callout */
.nocallout {
  -webkit-touch-callout: none;
}
/* A hack for HTML5 contenteditable attribute on mobile */
textarea[contenteditable] {
  -webkit-appearance: none;
}
/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if they have been set as display: none */
.gifhidden {
  position: absolute;
  left: -100%;
}
/* For image replacement */
.ir {
  display: block;
  border: 0;
  text-indent: -999em;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr;
}
.ir br {
  display: none;
}
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden {
  display: none !important;
  visibility: hidden;
}
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}
/* Hide visually and from screenreaders, but maintain layout */
.invisible {
  visibility: hidden;
}
/* Contain floats: h5bp.com/q */
.cf:before,
.cf:after {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}
.cf {
  *zoom: 1;
}