@charset "UTF-8";
@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=719dc5b7-14fb-4382-ac04-8bbdb94ceba4&fontids=709887");
@font-face{
font-family:"Helvetica W01 Light";
src:url("../fonts/717f8140-20c9-4892-9815-38b48f14ce2b.eot?#iefix");
src:url("../fonts/717f8140-20c9-4892-9815-38b48f14ce2b.eot?#iefix") format("eot"),url("../fonts/03805817-4611-4dbc-8c65-0f73031c3973.woff") format("woff"),url("../fonts/d5f9f72d-afb7-4c57-8348-b4bdac42edbb.ttf") format("truetype"),url("../fonts/05ad458f-263b-413f-b054-6001a987ff3e.svg#05ad458f-263b-413f-b054-6001a987ff3e") format("svg");
}

/* CSS Document */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,abbr,article,aside,command,details,figcaption,figure,footer,header,hgroup,mark,meter,nav,output,progress,section,summary,time { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th,figcaption { font-size: 1em; font-weight: normal; font-style: normal; }
fieldset,iframe,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }
article,aside,footer,header,hgroup,nav,section,figure,figcaption { display: block; }
ul { list-style-type: none; }
a { color: #a3a3a3; text-decoration: none; }
hr { clear: right; margin: 0px; visibility: hidden; }
a:hover { 
	color: #000; 
	cursor: pointer;
	-webkit-transition: color linear .2s;
	-webkit-transition-property: color;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: linear;
	-webkit-transition-delay: initial;
	-moz-transition: color linear .2s;
	-o-transition: color linear .2s;
	transition: color linear .2s;
}

.preload {
	background: url(../../gallery/images/arrow_left_hover.png) no-repeat, url(../../gallery/images/arrow_right_hover.png) no-repeat, url(../../gallery/images/close_active.png) no-repeat, url(../../gallery/images/back_active.png) no-repeat, url(../../gallery/images/forward_active.png) no-repeat;
}

html {
	background-color: #fff;
	min-width: 100px;
	min-height: 320px;
}
body {
	width: 1002px;
	min-width: 320px;
	margin: 0 auto;
	padding: 0 11px;
	font-family: Helvetica W01 Light, helvetica, sans-serif;
	font-size: 13px;
	line-height: 16px;
	color: #a3a3a3;
}
#header {
	width: 66.66%;
	margin-left: 16.66%;
	padding-top: 150px;
}
#logo {
	float: right;
	margin-bottom: 8px;
	width: 128px;
	height: 20px;
	background-image: url(../images/logo.png);
	background-size: 128px;
	background-repeat: no-repeat;
	background-position: right;
}
#main {
	clear: right;
	-webkit-overflow-scrolling: touch;
	padding-left: 167px; /* da Menu ausgeblendet */
}
#showcase {
	float: left;
	width: 668px;
	height: 413px;
}
#contact {
	position: relative;
	float: left;
	width: 668px; 
	height: 413px; 
}
#globalnav {
	display: none; /* Menu vorrübergehend ausgeblendet */
	width: 167px;
	height: 413px;
	float: left;
}
#globalNavSmall { display: none; }
#globalNavSmall a { margin-top: 5px; }
#navSmall {
	display: none; /* Menu vorrübergehend ausgeblendet */
	position: absolute;
	width: 334px;
	height: 413px;
	z-index: 1000;
	background-color: rgba(255,255,255,0.92);
}
#galleryoptions {
	display: none; /* Optionen vorrübergehend ausgeblendet */
	position: relative;
	width: 155px;
	height: 413px;
	margin-left: 12px;
	float: left;
}
#numberslider {
	line-height: 24px;
}
#projectdata { 
	display: block;
}
#bottomoptions {
	position: absolute;
	bottom: 0;
	right: 0;
}
#gapSmall {
	height: 288px;
}
#footer {
	padding-top: 12px;
	margin: 0px 167px;
	clear: left;
}
#main div::-webkit-scrollbar {
	width: 10px;
	height: 1px;
}
#main div::-webkit-scrollbar-thumb {
	background-color: #fff;
	border-right: 1px solid #a3a3a3;
}

.selected { color: #000; }
.floatRight { float: right; }
.floatLeft { float: left; }
.block { display: block; }
.hidden { display: none; }
.overflowHidden { overflow: hidden; }
.number { position: absolute; right: 0; }
.maintext { color: #000; }
.mainlink { color: #000; }
.mainlink:hover { text-decoration: underline; }
.cronicles { float: left; width: 25%; }
.cronicletext { float: left; width: 75%; padding-left: 25%; }
.blocksatz { text-align: justify; }
.textbox {
	float: left;
}
.box {
	position: relative;
	float: left;
	width: 318px;
	height: 413px;
	padding-right: 16px;
}
.box2 {
	display: none;
	position: absolute;
	float: left;
	width: 334px;
	height: 413px;
	background-color: #fff;
	z-index: 999;
}
.bottomtext {
	position: absolute;
	bottom: 0;
	overflow-y: scroll;
	max-height: 288px;
}
.box .bottomtext {
	width: 100%;
	padding-right: 24px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.bottomprofile {
	position: absolute;
	bottom: 0;
}
.imagebox {
	float: left;
	width: 334px;
	height: 413px;
	overflow: hidden;
}
.colored { background-color: pink; }
.arrow { display: none; }
.bottom { height: 10px; }
.impressum { height: 413px; overflow: auto; }
.navHome #navSmall { background-color: #fff; }
.clear { clear: both; }

/* webkit scrollbar */
.bottomtext::-webkit-scrollbar, #projectsSmall::-webkit-scrollbar {
	width: 8px;
	height: 1px;
}
.bottomtext::-webkit-scrollbar-thumb, #projectsSmall::-webkit-scrollbar-thumb {
	background-color: #fff;
	border-left: 1px solid #a3a3a3;
}

/* Im folgenden folgt die Auflösung bis 1024 Pixel */
@media only screen and (max-width: 1024px){
	body { 
		width: 668px;
		padding: 0px; 
	}
	#header { width: 100%; margin-left: 0px; }
	#main { width: 100%; padding-left: 0px; }
	#globalnav { display: none; }
	#globalNavSmall { display: none; } /* vorrübergehend ausgeblendet, sonst display: inline */
	#galleryoptions, #galleryoptions #nav { display: none; }
	#footer { margin: 0px; }
	.textbox { width: 50%; }
	.box { 	width: 318px; padding-right: 16px; }
	.box2 { display: none!important; }
}


/* Im folgenden folgt die Auflösung bis 668 Pixel */
@media only screen and (max-width: 668px){
	body { width: 100%; -webkit-text-size-adjust: none; }
	#main { padding-left: 0px; }
	#navSmall { 
		display: none; /* Menu vorrübergehend ausgeblendet */
		width: 100%; 
		height: auto!important;
		padding-bottom: 10px;
		background-color: rgba(255,255,255,0.9)!important;
	}
	.navHome #navSmall { padding-top: 10px; }	
	#categorysSmall { margin-left: 12px; }
	#header { width: 100%; }
	#globalNavSmall a { margin: 5px 0px 0px 12px; }
	#logo { margin-right: 12px; width: 163px; }
	#showcase {
		position: relative;
		width: 100%; 
		height: auto;
		overflow: hidden;
	}
	#contact { width: 100%; height: auto; position: static; }
	#contact p { padding: 0px 12px; }
	#footer { margin-bottom: 30px; }
	#footer li { margin: 0 12px; }
	.textbox { 
		width: 100%; 
	}
	.textbox p {
		padding-left: 12px;
	}
	.box { 
		clear: left;
		height: auto;
		width: calc(100% - 24px)!important; padding-left: 12px; padding-right: 12px; 
	}
	.box2 { 
		display: block!important; 
		position: relative;
		clear: left;
		height: auto;
		width: 100%;
		margin-bottom: 18px;
	}
	.projectdata { display: none; }
	.bottomtext { max-height: none; position: static; margin-top: 16px; }
	.bottomprofile { position: static; margin-top: 16px; }
	.cronicletext { padding-left: 0; }
	.imagebox { 
		clear: left; 
		width: 100%; 
		height: auto;
		padding: 0px 0px 0px 0px;
	}
	.imagebox .slider img { width: 100%; }
	.border {
		clear: both;
		height: 16px;
		border-bottom: 1px #C0C0C0 solid;
		margin: 12px;
	}
	.projectSlider { width: auto; }
	.blocksatz { padding: 0px 12px; }
	.impressum { height: auto!important; }
}

@media only screen and (min-width: 1500px){
	body { width: 1278px; padding: 0;	 font-size: 16px; line-height: 20px; -webkit-font-smoothing: antialiased; }
	#logo { margin-bottom: 12px; height: 22px; width: 163px; background-image: url(../images/logo_1x.png); background-size: 163px; }
	#main { height: 426px; padding-left: 213px; } /* padding nur da Menu ausgeblendet */
	#showcase { width: 852px; height: 527px; } 
	#contact { width: 852px; height: 527px; }
	#globalnav { width: 213px; height: 527px; }
	#galleryoptions { width: 198px; height: 527px; margin-left: 15px; }
	#footer { padding-top: 12px; margin: 0px 213px; }
	
	.textbox { width: 426px; height: 527px; }
	.box { width: 402px; height: 527px; padding-right: 24px; }
	.box2 { width: 426px; height: 527px; }
	.bottomtext { max-height: 366px; }
	.imagebox { width: 426px; height: 527px; }
	.impressum { height: 426px; overflow: auto; }
}



#js_warning { height: auto; min-height: 32px; width: 100%; position: fixed; background: url(../images/noscript.png) center; background-size: 135px 90px; left: 0; top: 0; text-align: center; padding: 12px 10px; box-sizing:border-box; font-family: Helvetica; border-bottom: 1px solid #000; font-weight: bold; color: black; font-size: 14px; }