@charset "UTF-8";
/* CSS Document */
@font-face {
font-family: 'regular';
src: url('fonts/predigelight.eot'); /* IE9 Compat Modes */
src: url('fonts/predigelight.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/predigelight.svg#svgFontName') format('svg'),
url('fonts/predigelight.woff') format('woff'), /* Modern Browsers */
url('fonts/predigelight.ttf') format('truetype');}

@font-face {
font-family: 'bold';
src: url('fonts/predigeregular.eot'); /* IE9 Compat Modes */
src: url('fonts/predigeregular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/predigeregular.svg#svgFontName') format('svg'),
url('fonts/predigeregular.woff') format('woff'), /* Modern Browsers */
url('fonts/predigeregular.ttf') format('truetype');}


html,
body {
	width:100%;
	height:100%;
	margin:0;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 12px;
	line-height: 22px;
}

a:link,
a:visited {
	color:#000;
}


a:hover,
a:active {
	color:#000;
	text-decoration: none;
}

#impressum,#datenschutz {
	width:80%;
	position: fixed;
	top:10%;
	height:80%;
	z-index: 10000;
	left:10%;border:1px solid #000; background-color:#fff;
}

.close {
	background-color:#000;
	padding:5px;
	text-align: right;
	
}

#impressum iframe,
#datenschutz iframe {
	width:100%;
	height:95%;
	border:0px;
	outline: none;
}

.close a {color:#fff;text-decoration: none}
#overlay {
	width:100%;
	height:100%;
	z-index: 9999;
	position: fixed;
	background-color: rgba(0,0,0,0.70)
}

.lb-caption {
	color:#fff !important;
	font-weight: normal !important; 
}

.lb-caption a:link,
.lb-caption a:visited {
	color:#fff !important;
}


.lb-caption a:hover,
.lb-caption a:active {
	color:#fff !important;
	text-decoration: none !important
}

#startanimation {
	width:620px;
	height:400px;
	position: absolute;
	top:50%;
	margin-top:-200px;
	left:40%;
	margin-left:-310px;
}

.aboutcontainer {
	width:620px;
	height:170px;
	position: absolute;
	top:50%;
	margin-top:-85px;
	left:40%;
	margin-left:-310px;
}

.contactcontainer {
	width:620px;
	height:420px;
	position: absolute;
	top:50%;
	margin-top:-210px;
	left:40%;
	margin-left:-310px;
}


.whatwedidcontainer {
	width:620px;
	height:250px;
	position: absolute;
	top:50%;
	margin-top:-125px;
	left:40%;
	margin-left:-310px;
}

.whatwedocontainer {
	width:750px;
	height:300px;
	position: absolute;
	top:50%;
	margin-top:-150px;
	left:40%;
	margin-left:-375px;
}

section#start {
	width:100%;
	height:100%;
	background-color:#fff !important;
	position: absolute;
	top:0;
}

#aboutleft,
#aboutright,
#abouthead,
#whatwedoleft,
#whatwedomiddle,
#whatwedoright,
#whatwedohead,
#whatwedidleft,
#whatwedidright,
#whatwedidhead,
#contacthead,
.adresse,
.map {
	visibility:hidden;
}

#whatwedohead {
	margin-bottom:25px;
}

section#about {
	width:100%;
	height:100%;
position: absolute;
top: 100%;
border-top:1px solid #000}


section#whatwedo {
	width:100%;
	height:100%;
position: absolute;
top: 200%;
border-top:1px solid #000}


section#whatwedid {
	width:100%;
	height:100%;
position: absolute;
top: 300%;
border-top:1px solid #000}


section#contact {
	width:100%;
	height:100%;
position: absolute;
top: 400%;
border-top:1px solid #000}


#about .left,
#whatwedid .left {
	width:48%;
	float:left;
	text-align:left;
	
}

#about .right,
#whatwedid .right {
	width:48%;
	float:left;
	margin-left:4%;
	text-align:left;

	
}

#whatwedo .left {
	width:30%;
	float:left;
	text-align:left;
	
}

#whatwedo .middle {
	width:30%;
	float:left;
	margin-left:3%;
	text-align:left;

	
}


#whatwedo .right {
	width:30%;
	float:left;
	margin-left:3%;
	text-align:left;

	
}

#whatwedo p {
	margin-top:5px !important
}

nav {
	position:fixed;
	width:20%;
	background-color:#000;
	height:100%;
	right:0;
	z-index: 9999 !important;
}

#navi {display:none}

nav a:link,
nav a:visited {
	color:#fff !important;
	text-decoration: none !important;
}

nav a:hover,
nav a:active {
	color:#fff !important;
	text-decoration:underline!important;
}

nav ul {
	position: absolute;
	right:20px;
	bottom:20px;
	list-style:none;
	text-align: left;
	margin:0;
	font-family: 'regular', sans-serif !important;
	font-size: 23px;
	color:#fff;
	line-height: 35px;
}

nav .contact1 {
	position: absolute;
	right:20px;
	bottom:20px;
	list-style:none;
	text-align: right;
	margin:0;
	font-family: 'regular', sans-serif !important;
	font-size: 15px;
	color:#fff;
	line-height: 22px;
}
#navi {
	width:100%;
	background-color:#000 !important
}
#navi .contact1 {
	position: inherit;
	background-color:#000 !important;
	padding:10px 0;
	width:100%;
	list-style:none;
	text-align: center;
	margin:0;
	font-family: 'regular', sans-serif !important;
	font-size: 15px;
	color:#fff;
	line-height: 22px;
}

nav li {
	text-align:right;
}

h1 {
	font-family: 'regular', sans-serif !important;
	font-size: 23px;
	font-weight: normal;
margin:0}

h2, h3 {
	font-family: 'regular', sans-serif !important;
	font-size: 18px;
	font-weight: normal;
margin:15px 0 0 0}

#based {
	font-family: 'regular', sans-serif !important;
	font-size: 23px;
	color:#fff;
	line-height: 35px;
	text-align: left;
	padding:20px;
	
}

address {
	font-style:normal !important;
	padding:15px 0
}


.logo {
	margin:20px;
	height:90px;
	width:auto;
	visibility:hidden;
}
.content #startanimation {
		display:none;
	}

.contactlinks {
	position: absolute;
	bottom:0;
	left:0;
	visibility:hidden;
	padding:10px;
}

.clear {clear:both;
width:100%;}

#navi2 {
	display:none 
}

@media (pointer:none), (pointer:coarse) {
	nav {display:none !important}
	
	#navi {
		display:none !important;
		position: fixed;
		top:0;
		right:0; 
		width:100%;
		height:100%;
		z-index: 10000 !important;
		text-align: center !important;
	}
	
		#navi2 {
		display:block !important;
		position: inherit !important;
		padding-top:50px;
		right:0; 
		width:100%;
		z-index: 10000 !important;
		text-align: center !important;
	}
	
	#navi2 h1 {
		font-size:40px !important;
		padding:30px 0;
	}
	
	.contact1 {
		font-size:30px;
	line-height:45px !important;
	font-family: 'regular', sans-serif !important;}
	
	
		#startanimation {
		display:none}
	
	#start {
		display:none !important
	}
	
}

@media (pointer:none), (pointer:coarse), (orientation:landscape) {
	#navi2 {
		display:block !important;
		position: inherit !important;
		padding-top:50px;
		right:0; 
		width:60%;
		padding-left:20%;
		z-index: 10000 !important;
		text-align: center !important;
	}
}

@media (max-width:800px) {
	nav {display:none !important}
	
	#navi {
		display:block !important;
		position: absolute;
		top:0;
		right:0; 
		z-index: 10000 !important;
		text-align: center !important;
	}
		#based {
			text-align: center !important;
			
	}
			#startanimation {
		width:90% !important;margin-left:5% !important;
				left:0 !important;
	}
	
}