@font-face {
	font-family: 'Lacurg';
	src: url('fonts/lacurg.eot');
	src: url('fonts/lacurg.eot?#iefix') format('embedded-opentype'),  url('fonts/lacurg.woff') format('woff'),  url('fonts/lacurg.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


html, body {
	margin:0;
	padding:0;
	text-align:center;
	background: rgb(72,70,67);
	font-family: Lacurg;
}



div, img, area, textarea, input {
	outline: none;
	font-family: 'Lacurg';
}

img { width: 100%; height: auto }
img.icon {width: auto;}
.reframe { max-width: 96%; margin: 0 auto }


#pagewidth {
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	padding-top: 250px;
	display: block;
}

A {	color: #FFFFFF; text-decoration: none;}
A:hover {color: #FFFFFF; text-decoration: underline;}

.orange { color: rgb(245,205,106);}



/* #########################################################################################  */

#header {padding: 10px 0 10px 0;  position: fixed; width: 100%; text-align: center; background: url(images/backgrounds/back-menue-90.png); z-index: 5}
#header H1 {margin: 0; padding: 0; color: rgb(245,205,106); font-weight: normal; font-size: 22px; text-transform:uppercase; }
#header H2 {margin: 0; padding: 0; color: rgb(217,217,218); font-weight: normal; font-size: 22px; text-transform:uppercase; }


/* #########################################################################################  */


#menuebutton IMG{width: 50px; margin-left: auto; margin-right: auto; padding: 10px; cursor: pointer;}
#menue, #mobmenue { padding-top: 5px; clear: both; display: none;}
#menue LI, #menue UL, #mobmenue UL, #mobmenue LI  {margin: 0; padding: 0; list-style-type: none;}
#menue LI , #mobmenue LI {padding: 5px; line-height: 140%;}
#menue LI A, #mobmenue LI A { display: block; font-size:16px; line-height: 140%; text-transform:uppercase; text-decoration: none;}
#menue LI A:hover, #mobmenue LI A:hover {color:  rgb(245,205,106) }
#menue LI A.aktiv, #mobmenue LI A.aktiv {color:  rgb(245,205,106) }



/* #########################################################################################  */

#intro {
	color: #FFFFFF;
	font-size: 20px;
}



/* #########################################################################################  */




#luftbilder, #architektur, #industrie, #reportage, #reise, #panorama, #publikationen, #kontakt, #impressum, #impressum {
	clear: both;
	padding-top: 150px;
	color: #FFFFFF;
	font-size: 20px;
	position: relative;
}

#datenschutz {
	padding-top: 00px;
}



#reportage_luther, #reportage_transitstrecke, #reportage_schlachthof, #reportage_mauer, #reportage_punkszene, #reportage_veb, #reportage_fahrrad {
	display: none;
}

#icon_luftbilder {width: 30%; margin: 25px auto;}
#icon_luftbilder IMG {width: auto;}
#icon_architektur {width: 30%; margin: 25px auto;}
#icon_architektur IMG {width: auto;}
#icon_industrie {width: 30%; margin: 25px auto;}
#icon_industrie IMG {width: auto;}
#icon_reise {width: 30%; margin: 25px auto;}
#icon_reise IMG {width: auto;}
#icon_panorama { margin: 25px auto; text-align: center;}
#icon_panorama IMG {width: auto;}
#icon_publikationen {margin: 25px auto;}
#icon_publikationen IMG {width: auto;}
#icon_kontakt {margin: 25px auto;}
#icon_kontakt IMG {width: auto;}


#icon_reportage_beesandfriends, #icon_reportage_luther, #icon_reportage_transitstrecke, #icon_reportage_schlachthof, #icon_reportage_mauer, #icon_reportage_punkszene, #icon_reportage_veb, #icon_reportage_fahrrad {width: 30%; margin: 25px auto;}
#icon_reportage_beesandfriends IMG, #icon_reportage_luther IMG, #icon_reportage_transitstrecke IMG, #icon_reportage_schlachthof IMG, #icon_reportage_mauer IMG, #icon_reportage_punkszene IMG, #icon_reportage_veb IMG, #icon_reportage_fahrrad IMG {width: auto;}


#reportagenauswahl IMG {cursor: pointer; width: 10%; }

.large {text-align: left;}
.detail {margin-bottom: 0px;}
.detailtext {margin-top: 10px; font-size: 13px;}

.thumbs {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.thumbsrow {
	white-space: nowrap;
	position: relative;
	left: -20px; top: 0;
}
.thumbs IMG {
	width: 20%; margin-right: 0.5%; margin-bottom: 0.5%;
	cursor: pointer;
}


.senkrecht {
width: 100%; text-align: center;
}

#panorama {
	position: relative; 
}

#panorama LI {
	vertical-align: bottom;
	height: 450px;
}

#panorama LI IMG{ 
	position: absolute !important; bottom: 50px;


}

#panorama  .bx-wrapper .bx-prev {
	left: 5px; top: 70%;
	background: url(images/controls.png) no-repeat 00px -32px;
}

#panorama  .bx-wrapper .bx-next {
	right: 5px;  top: 70%;
	background: url(images/controls.png) no-repeat -43px -32px;
}


#panorama LI .detailtext {
	position: absolute; bottom: 20px;
}




#publikationen LI  { text-align: center; width: 100%;}
#publikationen .z1{ height: 270px; vertical-align: bottom; position: relative; display: table-cell; text-align:center;}
#publikationen .z2{ vertical-align: top; font-size: 14px; white-space: nowrap; height: 200px;margin-top: 30px;}
#publikationen .z1, #publikationen .z2 { width: 100% !; text-align:center; }
#publikationen .z1 IMG { width: auto; max-width:190px; }
#publikationen .bx-viewport {height: 500px !important;}	

#bx2 {display: none}
#bx3 {display: block; }

/* #########################################################################################  */

#kontakt H1 { color: rgb(245,205,106); font-size: 28px; font-weight: normal;}
.h1_datenschutzerklaerung {font-size: 20px !important}

#kontaktformular { color: rgb(60,60,60); margin-top: 120px;}

#kontaktform1 { background: rgb(180,177,173); padding-left: 10%; padding-right: 10%; padding-bottom: 40px;}
#kontaktform1 H1 {padding: 50px 0 15px 0; margin: 0;font-size: 28px; font-weight: normal;}
#kontaktform1 INPUT {width: 98%; height: 45px; padding: 0 1%;  color: rgb(60,60,60); margin-bottom: 10px; border: none;}

#kontaktform2 { background: rgb(231,229,228);padding-top: 50px; padding-left: 10%; padding-right: 10%; padding-bottom: 40px; line-height: 150%;}
#kontaktform2 textarea {width: 98%; padding-left: 1%; padding-right: 1%; padding-top: 5px; padding-bottom: 10px; height: 83px;  margin-bottom: 10px; border: 1px solid #FFFFFF;}
#kontaktform2 INPUT  {width: 100%; height: 45px; color: rgb(60,60,60); margin: 0; margin-bottom: 10px;}
#kontaktform2 INPUT {background: none; border: 1px solid #FFFFFF; cursor: pointer;}

.kontakttext {height: 250px; text-align: left;}

#but_datenschutz {cursor: pointer;}
#but_senden {display: none;}
#sendeninfo {height: 55px;}

/* #########################################################################################  */


#impressum, #datenschutz {
	color: #FFFFFF; display: inline-block;
}
#impressum H1 { color: rgb(245,205,106); font-size: 28px; font-weight: normal; line-height: 150%}
#impressum H2{ font-size: 30px; font-weight: normal; line-height: 150%}

#datenschutz H1 { color: rgb(245,205,106); font-size: 24px; font-weight: normal; line-height: 150%}
#datenschutz H2 { font-size: 18px; font-weight: normal; line-height: 150%}

#datenschutz { 	font-size: 14px; line-height: 150%;}




/* #########################################################################################  */

#footer {
		clear: both; 
		 margin-top: 100px;
		 padding-top: 10px; height: 40px;
		width: 100%; 
		background: rgb(231,229,228);
		font-size: 14px;
}


/* #########################################################################################  */

/* Tabletts */
@media only screen and (min-width: 760px) {
        .reframe { max-width: 760px }

		#pagewidth, #luftbilder, #architektur, #industrie, #reportage, #reise {padding-top: 250px;}
		
		
		
		
		#header {padding: 10px 0 00px 0; text-align: center; margin-left: auto; margin-right:auto; }
		#header H1, #header H2 {font-size: 22px;}

		
		.bx-wrapper .bx-next {
			right: 25px;
		}
		.bx-wrapper .bx-prev {
			left: 25px;
		}
		

		
		#panorama  .bx-wrapper .bx-prev {
			left: 25px; top: 220px;
			background: url(images/controls.png) no-repeat 00px -32px;
		}
		
		#panorama  .bx-wrapper .bx-next {
			right: 25px; top: 220px;
			background: #url(images/controls.png) no-repeat -43px -32px;
		}
		
		
		.bx-wrapper .bx-pager,.bx-wrapper .bx-controls-auto {
			bottom: 30px;
		}
	
		#intro {font-size: 16px;}
		#luftbilder, #architektur, #industrie, #reportage, #reise, #panorama, #kontakt {font-size: 16px;}

		.thumbs IMG {
			width: 105px; margin-right: 4px; margin-bottom: 3px;
		}		
		
		#publikationen LI  { width: 253px !important;}
		#publikationen .z2{ vertical-align: top; font-size: 11px; white-space: nowrap; height: 200px;margin-top: 30px;}
		#publikationen .z1, #publikationen .z2 { width: 253px; text-align:center;}
		#publikationen .bx-viewport {height: 430px !important;}				
		
		
}



/* Mittlere Monitore */
@media only screen and (min-width: 1000px) {
        .reframe { max-width: 980px }
		
		#menuebutton {display: none;}
		

		#pagewidth, #luftbilder, #architektur, #industrie, #reportage, #reise, #panorama {padding-top: 210px;}
		#panorama {margin-top: 300px;}

		#header {padding: 70px 0 20px 0; text-align: center; margin-left: auto; margin-right:auto; }
		#header H1 {display: inline; padding-right: 10px; font-size: 26px;}
		#header H2 {display: inline; padding-left: 10px; font-size: 26px;}		

		#mobmenue {display: none;}
		#menue {display: block;}
		#menue UL { width: 985px; padding-left: 5px;display: inline-block; margin-left: auto; margin-right: auto;}
		#menue LI { padding: 0px; float: left; font-size: 14px; width: auto; text-align: center;}
		
		#menue LI A {font-size: 14px; padding: 10px 18px; text-align:center;}
		#menue LI:first-child A {padding: 10px 17px 10px 0;} 
		#menue LI:last-child A {padding: 10px 0px 10px 17px;} 
		
		
		
		.large {
			width: 660px; height: 500px;
			position: relative;
			float: left;
		}
		
		.small {
			width: 318px;
			
		}
		#luftbilder .small, #industrie .small, #reise .small  { float: right;}
		#architektur .small, #reportage_beesandfriends .small, #reportage_luther .small, #reportage_transitstrecke .small, #reportage_schlachthof .small, #reportage_mauer .small, #reportage_punkszene .small, #reportage_veb .small, #reportage_fahrrad .small { float: left; margin-left: -3px;}		
		#architektur .large, #architektur .large, #reportage_beesandfriends .large, #reportage_luther .large, #reportage_transitstrecke .large, #reportage_schlachthof .large, #reportage_mauer .large, #reportage_punkszene .large, #reportage_veb .large, #reportage_fahrrad .large {margin-left: 3px;}

#reportage {height: 600px;}
#reportage_beesandfriends, #reportage_luther, #reportage_transitstrecke, #reportage_schlachthof, #reportage_mauer, #reportage_punkszene, #reportage_veb, #reportage_fahrrad {
	position: absolute; left: 0; height: 0;
}

#publikationen LI  { width: 196px !important;}
#publikationen .z2{ vertical-align: top; font-size: 11px; white-space: nowrap; height: 200px;margin-top: 30px;}
#publikationen .z1, #publikationen .z2 { width: 200px; text-align:center;}
#publikationen .bx-viewport {height: 430px !important;}	

#bx2 {display: block}
#bx3 {display: none; }

		
		#icon_luftbilder {margin: 141px 93px;}
		#icon_architektur {margin: 132px 93px;}
		#icon_industrie {margin: 150px 93px;}	
		#icon_reise {margin: 127px 93px;}	
			

		#icon_reportage_beesandfriends, #icon_reportage_luther, #icon_reportage_transitstrecke, #icon_reportage_schlachthof, #icon_reportage_mauer, #icon_reportage_punkszene, #icon_reportage_veb, #icon_reportage_fahrrad {margin: 140px 93px;}				
		
		#reportagenauswahl {position: absolute; left: 320px; top: 750px;}
		#reportagenauswahl IMG {width: auto; height: auto;}
		
		.thumbs IMG {
			width: 105px; margin-right: 3px; margin-bottom: 0;
		}		
		
		img.detail {
			position: absolute; bottom: 0; 
			width: auto; height: auto;
		}
		.detailtext {
			position: absolute; bottom: -30px;
			font-size: 14px;
		}
		
		.senkrecht {
			width: 300px;
		}
		
		

		#panorama LI {
			vertical-align: bottom;
			height: 550px;
		}

		#panorama LI IMG{
		width: 990px; margin-left: 5px;
		}
		
		
	
		
		#kontakt h1 {
			font-size: 20px; font-weight: normal;
		}
		.h1_datenschutzerklaerung {font-size: 28px !important}
		
		#kontaktform1 {
			width: 460px; padding-left: 20px; padding-right: 10px; float: left;
			text-align: left;
		}
		#kontaktform2 {
			width: 460px; padding-left: 20px; padding-right: 10px; float: left;
		}		
		
		#impressum, #datenschutz {text-align: left; }
		
		#impressum h1, #datenschutz h1 {
			font-size: 20px; font-weight: normal;
		}
		
		#impressum1 {
			width: 50%; float: left;
			text-align: left;
			font-size: 14px;
		}
		#impressum2 {
			width: 50%; float: left;
			text-align: left;
			font-size: 11px;
		}		
}

/* Große Monitore */
@media only screen and (min-width: 1080px) {


			
.bx-wrapper .bx-prev {
	left: -50px;
	background: url(images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
	right: -50px;
	background: url(images/controls.png) no-repeat -43px -32px;
}

		#panorama  .bx-wrapper .bx-prev {
			left: -50px; top: 220px;
			background: url(images/controls.png) no-repeat 00px -32px;
		}
		
		#panorama  .bx-wrapper .bx-next {
			right: -50px; top: 220px;
			background: #url(images/controls.png) no-repeat -43px -32px;
		}
		

}



/* #########################################################################################  */

.clearfix:after {
	content: ".";
	display: inline-block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	clear: both;
	display: block;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */