@font-face {
    font-family: 'helvetica_neue57_condensed';
    src: url('../fonts/helveticaneue-condensed-webfont.eot');
    src: url('../fonts/helveticaneue-condensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/helveticaneue-condensed-webfont.woff') format('woff'),
         url('../fonts/helveticaneue-condensed-webfont.ttf') format('truetype'),
         url('../fonts/helveticaneue-condensed-webfont.svg#helvetica_neue57_condensed') format('svg');
}

@font-face {
    font-family: 'myriad_prosemibold';
    src: url('../fonts/myriadpro-semibold-webfont.eot');
    src: url('../fonts/myriadpro-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/myriadpro-semibold-webfont.woff') format('woff'),
         url('../fonts/myriadpro-semibold-webfont.ttf') format('truetype'),
         url('../fonts/myriadpro-semibold-webfont.svg#myriad_prosemibold') format('svg');
}


/* ----------SCROLLSPY-------- */

 html {	 
 		height:100%;
	}
 
 body {
		font-family: 'helvetica_neue57_condensed';
		text-align:center;
		-ms-hyphens: auto;
		-moz-hyphens: auto;
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
		position: relative;
		margin:0;
		border:0;
		height:100%;
	}
 
.affix {
		  top:0;
		  width: 100%;
		  z-index: 9999 !important;
	}
  
.navbar {
		 margin-bottom: 20px;
	}

.affix ~ .container-fluid {
		 position: relative;
		 top: 50px;
	}  
  
.Startseite{
	padding-left:220px;
	}

.Intro {
	 max-width:1024px; 
	 margin:0px auto 0px auto; 
	 padding:180px 0 50px 0; 
	 height:580px; 
	 overflow:hidden;
	 }
 
#section1 {
		padding-top:0px; padding-left:230px;
	 }
 
#section2 {
		padding-top:0px; padding-left:230px;
	 }
 
#section3 {
		padding-top:0px; padding-left:230px;
	 }
 
#section4 {
		padding-top:0px; padding-left:230px;
	 }
 
#section5 {
		padding-top:0px; padding-left:230px;
	 } 
  
.Reihe {
	  max-width:1024px; 
	  margin:0px auto 0px auto;
	 }

/* ----------SCROLLSPY-------- */

.hg_blatt {
    background-image: url(../images/blatt.jpg);
    background-repeat:no-repeat; background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
	 }
	 
.hg_raum {
    background-image: url(../images/raum.jpg);
    background-repeat:no-repeat; background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
	 }	 


h1 {
    font-family: 'helvetica_neue57_condensed';    
    text-align:left;
    font-size: 28px;
    line-height:24px;
    font-weight:300;
    padding-top:0px;
    color:#C00;
	 }

h2 {
    font-family: 'helvetica_neue57_condensed';    
    text-align:left;
    font-size: 26px;
    line-height:24px;
    font-weight:300;
    color:#ccc;
	 }

h3 {
    text-align:left;
    font-size:20px;
    line-height:22px;
    font-weight:normal;
    color: #666;
	 }

p {
    font-family: 'helvetica_neue57_condensed';
    text-align:left;
    font-size: 18px;
    line-height:22px;
    font-weight:300;
    color: #000;
    padding:5px 0 8px 0;
    margin:0;    
    border:0;
	 }

a:link{
      color: #333;
      text-decoration:none;
      boder:0px;
      padding:0px;
      margin:0px;
	 }
 
a:hover{
    color: #C00;
    text-decoration:none;
	 }
 

.clearfloat {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
	 }

/* ----------STARTSEITE-------- */

#header {	
     position:relative;
     width:100%;
	 height:100%;
     margin: 0 auto 0 auto;
     padding-top:170px;
	 overflow:visible;
}

.wrapper_1 {	
     width:100%;
	 padding-top:150px;
	 height:900px;
	 display:block;
}

#content {
	min-height:550px;
	overflow:hidden;
	margin-left:220px;
	height:100%;
}

#web {
    float: left;
    width: 241px;
    padding: 75px 0px 0px 0px;
    text-align:center;
    position:relative;
	display:none;
}

#print {
    float: left;
    width: 241px;
    padding: 75px 0px 0px 0px;
    text-align:center;
    position:relative;
	display:none;
}

#foto {
    float: left;
    width: 241px;
    padding: 75px 0px 0px 0px;
    text-align:center;
    position:relative;
	display:none;
}

.ic-start{
    padding-bottom:0px;
    position:absolute;
    top:75px;
    left:32px;
    opacity:0;
    z-index:1;    
    }

.ic-stop{    
    position:absolute;
    top:11px;
    left:921px;
    opacity:0;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;        
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
    z-index:100;
    }
    
.ic-tops{
    position:absolute;
    display:none;
    top:11px;
    left:21px;
    opacity:0;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;        
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
    z-index:101;
    }
    
ul.List_Start{
	font-family: 'helvetica_neue57_condensed';
    color: #333;
    padding-top:150px;
    list-style-type:circle;
    font-size: 18px;    
    }
    
ul.List_Start li{
     padding-top:0px;    
    }

#web:hover  .ic-tops{
    opacity:0.6;
    }
#print:hover  .ic-tops{
	opacity:0.6;
    }
#foto:hover  .ic-tops{
	opacity:0.6;
    }
    
#explorer {
	display:none;
}
   
/* ----------ENDE STARTSEITE-------- */   

/* ----------NAVIGATION-------- */

#mobileMenu    {
 	position: fixed;
 	top: 0;
 	left: 0;
 	width: 100%;
 	display: none;

}

#menue {
    float: left;
    width: 180px;
    padding: 15px 10px 15px 30px;	
}

#menue_dk {
    float: left;
    width: 180px;
    padding: 15px 10px 15px 30px;	
	position:fixed; 
	z-index:300;
}



#navigation {
	position:absolute;
    padding-top:30px;
	padding-left:25px;
	width:130px;
	z-index:100;
}
    
.nav{
    font-family: 'helvetica_neue57_condensed', sans-serif;
    text-align:left;
    list-style-type:none;
    margin:0;
    border:0;
    font-size:18px;
    padding-left:0px;	
    }

.nav li a{
    border-bottom:1px solid #666;
    padding:5px 0;
    color:#333;
    }

.nav li a:hover{
    color:#C00;
    }
    
.nav .active a{
    color:#C00;
    }
	
ul.dark{
    color:#ccc;	
	font-family: 'helvetica_neue57_condensed', sans-serif;
    text-align:left;
    list-style-type:none;
    margin:0;
    border:0;
    font-size:18px;
    padding-left:0px;
    }

ul.dark li a{
    text-decoration:none;
    color:#ccc;
    }

ul.dark li a:hover{
    color:#C00;
    }
    
	
/* ----------ENDE NAVIGATION-------- */


/* ----------BUERO I REFERENZEN I KONTAKT I IMPRESSUM-------- */

 .Titel_Buero {padding-top:95px;}


#container {
    position:relative;
    max-width: 1024px;
    margin: 0 auto 150px auto;     
    }

#sidebar0 {
    float: left;
    width: 480px;
    padding: 10px 0px 0px 0px;
    text-align:left;
    }



#sidebar2 {
    float: left;
    width: 230px;
    padding: 75px 0px 0px 0px;
    text-align:left;
    }

#sidebar3 {
    float: left;
    width: 200px;
    padding: 0px 0px 0px 0px;
    text-align:center;
    }
    
.ic-content    {
    padding-bottom:50px;
    text-align:left;
    }
	
.Titel_Kontakt {
	 padding-top:95px;
	 }
        
.kontakt {
    
    padding-top:120px;
    }
    
#disclaimer {
    clear:both;
    max-width:700px;
    }    
    
/* ----------ENDE BUERO I REFERENZEN I KONTAKT I IMPRESSUM-------- */

@media (max-width:1010px)    {
	.affix {
		  top:0;
		  left:0;
		  width: 100%;
		  z-index: 9999 !important;
	}
  

.affix ~ .container-fluid {
		 position: relative;
		 top: 0px;
		 left:0;
	} 
	
.Intro {
	 max-width:1024px; 
	 margin:0px auto 0px auto; 
	 padding:0px 0 50px 0; 
	 height:580px; 
	 overflow:hidden;
	 }
	
	.Startseite{
		padding-top:220px;
		padding-left:0px;
		}
	
	#section1 {
	padding-top:80px;		
	padding-left:20px;
	}
	#section2 {
	padding-top:140px;		
		padding-left:0px;
	}
	#section3 {	
	padding-top:140px;		
		padding-left:0px;
	}
	#section4 {
	padding-top:140px;		
	padding-left:20px;
	}
	#section5 {
	padding-top:140px;		
	padding-left:20px;
	}
	
  .Reihe {
	  max-width:768px; 
	  margin:0px auto 0px auto;
	  }	
 .Titel_Buero {padding-top:0px;}
 .Titel_Arbeiten {padding-top:0px;} 
#disclaimer {
    width:auto;
	margin:0px;
	padding:0px;
	border:0px;
    }  
}



/* ----------ARBEITEN-------- */

 .Titel_Arbeiten {
	 padding-top:125px;
	 }

#sidebar1 {
    float: left;
    width:auto;
    padding: 10px 0px 0px 0px;
    text-align:center;
    margin-left:1px;
    }


.ic-top{
    padding-bottom:50px;
    text-align:left;
    }
    
.imagebox{
    position: relative;
    border-bottom:1px solid #fff;
    width:240px;
    height:150px;
    }
        
.imagebox a{
    width:240px;
    height:150px;
    display:block;
    color:#333;
    }    
        
 .imagebox:hover  .figure {
        opacity:0.8;
        }
        
.figure {
    position: absolute;
    left: 0px;
    background:#fff;
    font-size:18px;
    color:#666;
    width:242px;
    height:90px;
    padding-top:60px;
    opacity:0;
    top:0px;
    transition: opacity 0.5s;
    -webkit-transition: opacity  0.5s;        
    -moz-transition:  opacity  0.5s;
    -o-transition:  opacity  0.5s;                
        }
		
.figure-2 {
    position: right;
    left: 0px;
    background:#fff;
    font-size:18px;
    color:#666;
    width:242px;
    height:90px;
    padding-top:60px;
    opacity:0;
    top:0px;
    transition: opacity 0.5s;
    -webkit-transition: opacity  0.5s;        
    -moz-transition:  opacity  0.5s;
    -o-transition:  opacity  0.5s;                
        }
        
        
/* ----------ENDE ARBEITEN-------- */

/* ----------PROJEKTE-------- */          
   
 .container_dk
{width:100%; 
position:fixed; 
z-index:2; 
top:0; 
left:0; 
height:200px; 
background-color:#fff;
opacity:0.3;
}  

 .sidebar-proj { 
 	padding-left:350px; 
    position:fixed;
	z-index:3;
    float:left;
    padding-top:120px;
    width:480px; 
    }
        
.mainContent {
	padding-left:220px;  
    position:absolute;
	z-index:4; 
    margin-top:200px;
    padding-bottom:25px;    
    float:left;
    width:750px;
    }    
    
 .mainContent a{
        opacity:0.5;
        }
            
 .mainContent a:hover{
        opacity:1;
        }


.mainContent_Image img{    
    padding-bottom:30px;    
    }
        
.mainContent_Text {
    position:absolute;
    background-color:#222830;
    top:0px;
    margin-left:-650px;
    padding:50px;
    float:left;
    width:550px;
    height:550px;
    display:none;
        opacity:0;
    z-index:100;
        transition: opacity 0.5s;
        -webkit-transition: opacity  0.5s;        
        -moz-transition:  opacity  0.5s;
        -o-transition:  opacity  0.5s;                    
    }
    
.mainContent_Text:hover #close  {
    display:block;    
    }
    
.navBack {
    position:fixed;
    top:400px;
    z-index:2;
    }
    
.navNext {
    position:fixed;
    top:400px;
    padding-left:700px;
    }

.ansehen {
    position:absolute;
    float:right;
	margin-top:10px;
    margin-left:700px;
        }

.ansehen:hover  .mainContent_Text{
        opacity:0.9;
    display:block;
        }
 #close {
display:none;
        }   

#fade{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    opacity:0.7;
    z-index:200;
    }

.white {
    background-color:#FFF;     
    }
    
.black {
    background-color:#000;     
    }
    
/* ----------ENDE PROJEKTE-------- */  



.Referenzen {
     font-size:16px;
     padding-left:5px;
     text-align:left;
     line-height:28px;
     }
.Referenzen span{
     color:#999;
     }
    
.Liste {
    padding:0 15px;
    margin-top:0;
    border-top:0;
    list-style-type:circle;
    font-size:16px;
    text-align:left;
     } 
	 
@media (max-width:1010px)	{

	.kontakt {	
		padding-top:0px;
		}

	#sidebar2 {
		padding:50px 0 0 50px;
		}

	#container { 
		position:relative;
		max-width: 740px; 
		margin: 0 auto 50px auto;
	  }

	
	#menue{
			width:100%;
			top:0;
			left:0px;
			postion:absolute;
			background-color:#FFF;
			padding-left:50px;
			}
			
	#menue_dk{
			width:100%;
			top:0;left:0;
			postion:absolute;
			padding-left:10;
			text-align:left;
			}		
	#menue_dk #navigation{
		position:absolute;
		top:5px;
		left:0px;
		}
	
	#navigation {
		width:100%;
		z-index:3;
	}		
	

	.nav li a {
		border-bottom: none;
		clear:both;
		float: left;	

		}
		
	#menue img{
		float:left;
		padding-left:20px;
		}


	.mainContent { 
		position:relative;
		padding-top:0px;
		padding-bottom:25px;	
		float:left;
		width:740px;
		z-index:1;
		margin-left:0;
		padding-left:0;
		boder-left:0;
		margin-top:0;
	}

	header {
		position:relative; 
		width:auto; 
		max-width: 740px;  
		margin: 0 auto 0 auto;
		padding-top:50px;
	}

	#content { 
		position:relative;
		padding-top:0px;
		padding-bottom:25px;	
		float:left;
		width:740px;
		z-index:1;
		margin-left:0;
		padding-left:0;
		boder-left:0;
		margin-top:0;
	}

	 .sidebar-proj {	
		float:left;
		position: relative;
		padding-top:200px;
		padding-left:20px;
		width:auto;	
		z-index:1;
		}

	.navBack {
		position:fixed; 
		top:400px; 
		z-index:2;
	}	

	.ansehen {
		position:absolute;
		top:0px;
		float:right;
		margin-left:690px;
	    }	

	.navNext {
		position:fixed; 
		top:400px;
		padding-left:690px;
	}

	ul.List_Start{
		 color:#666;
		 padding-top:120px;
		}

	ul.nav{
		font-family: 'helvetica_neue57_condensed', sans-serif;
		color:#666; 
		list-style-type:none; 
		margin:0; 
		border:0; 
		padding:85px 0 0 170px;
		font-size:18px;
		width:auto;
		}

	ul.nav li{

		padding:0px 15px ;
		float:left;
		border-bottom:0; 
		border-right: 1px #ccc solid;
		}

	ul.nav li a{
		text-decoration:none;
		color:#666;
		}

	ul.nav li a:hover{
		color:#c8c8b5;
		}

	#sidebar0 {
		float: left;
		width:50%; 
		padding: 50px 20px 0px 20px;
		text-align:left;
	}

	

	#sidebar1 {
		float: left;
		width:auto;
		text-align:center;
	}

	.ic-top{
		padding-bottom:30px;
		}

	.ic-content	{
		padding-bottom:10px;
		}

	ul.dark{
		font-family: 'helvetica_neue57_condensed', sans-serif;
		color:#ccc; 
		list-style-type:none; 
		padding:85px 0 0 170px;
		margin:0; 
		border:0; 
		font-size:18px;
		width:auto;
		}

	ul.dark li{

		padding:0px 15px ;
		float:left;
		border-bottom:0; 
		border-right: 1px #ccc solid;
		}

	ul.dark li a{
		text-decoration:none;
		color:#ccc; 
		}

	ul.dark li a:hover{
		color:#fff;
		}



	ul li.subnav{
		font-size:16px;	
		padding:2px;
		display:none;
		margin-left:45px;
		}
		
	 .container_dk
		{
		opacity:1;
		background-color: #666;
		} 
}



@media (max-width:650px)	{ 
	
	.Startseite {display:none;}

	header {
		padding-top:10px; 
		 margin: 20 auto 20 auto;	
		}

	#content { 
		position:relative;
		padding-top:0px;
		padding-bottom:25px;	
		width:auto; 
		z-index:1;
		}




	#web {
		float:none;
		width: auto; 
		padding: 75px 0px 0px 0px;
		text-align:center;
		position:relative;
		}

	#print {
		float:none;
		width: auto; 
		padding: 75px 0px 0px 0px;
		text-align:center;
		position:relative;
		}

	#foto {
			float:none;
		width: auto; 
		padding: 75px 0px 0px 0px;
		text-align:center;
		position:relative;
		}

	.nav{
		display:none;	
		}	

	.dark{
		display:none;	
		}

	.navBack {
		display:none;
		}
	.navNext {
		display:none;
		}
	.ansehen {
		display:none;
		}
	#close	{
		display:none;
		}	
	#begin	{
		display:none;
		}	
	.mainContent_Image img{	
		padding-bottom:0px;	
		}

	.sidebar-proj{
		position:absolute;	
		top:180px;
		left:-30px;
		}
		.sidebar-proj h2{
		font-size:20px;
		font-weight:bold;
		}

	#sidebar1{
		 padding:10px;
		 width:100%;
		}

	#sidebar2{
		 padding:10px;
		 width:100%;
		}

	#disclaimer{
		 padding:10px 50px 0 10px;
		 width:90%;
		}	

	#container {
		padding-top:10px; 
		width:auto;
		margin: 20 auto 20 auto;
		text-align:center;
		}

	#menue img {
		padding: 10px;
		}	

	#sidebar0{
		clear:both;
		width:auto; 
		margin: 0 auto 0 auto;
		padding:15px;
		}

	.mainContent {
		position:absolute;
		top:255px;
		width:auto;
		padding:0;
		margin:0;
		border:0;
		left:0;
		}

	.mainContent img{
		width:100%;
		height:auto;
		}


	#mobileMenu ul{
		margin:0px;
		border:0px;
		padding:0px;
	}
	#mobileMenu ul li {
		display:block;
		background-color:#ccc;
		padding: 10px;
		letter-spacing: 0.1em;
		text-align: left;
		text-transform: uppercase;
		font-size:16px;
		font-weight:300;
		border-bottom:1px #fff solid;
	}
	#mobileMenu ul ul{	
		display:none;
	}		
	ul#mobileMenu  li ul{
		display: block;
		background: #eee;
	}		
	#mobileMenu{
		display: block;
		z-index: 10000;
	}
	.toggleMobile{
		position: fixed;
		top: 10px;
		right: 10px;
		display: block;
		width: 40px;
		height: 36px;
		cursor: pointer;
		z-index: 10001;
	}
	.toggleMobile span.menu1, .toggleMobile span.menu2, .toggleMobile span.menu3{
		display: block;
		position: absolute;
		width: 40px;
		height: 8px;
		left: 0;
		background:#999;
		-webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
		transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
	}
	.toggleMobile span.menu1{
		top: 0;	
	} 

	.toggleMobile span.menu2{
		top: 14px;
	}

	.toggleMobile span.menu3{
		top: 28px;
	}
	.toggleMobile.active span.menu1{
		top: 14px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
		-webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
		transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
	}
	.toggleMobile.active span.menu2	{
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
		-webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
		transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);}
		.toggleMobile.active span.menu3
		{opacity: 0;
		-webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
		transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
	}
	
	 .Intro {
	 width:auto; 
	 margin:25% 25%; 
	 padding:0; 
	 height:100%; 
	 overflow:hidden;
	 background-image:url(../images/ergebe.png);
	 background-repeat:no-repeat;
	 background-position:center;
	 }
	 
	.affix {
	  position: absolute;
	}
	
	#menue_dk {
		position:relative;
	}
	
	#b-nav img {
		display:none;
	}
	
	.container_dk {
		position:absolute; 
	}
	
		#section1 {
	padding-top:10px;		
	padding-left:20px;
	}
	#section2 {
	padding-top:10px;		
		padding-left:0px;
	}
	#section3 {	
	padding-top:10px;		
		padding-left:0px;
	}
	#section4 {
	padding-top:10px;		
	padding-left:20px;
	}
	#section5 {
	padding-top:10px;		
	padding-left:20px;
	}

}

/* ----------ENDE MEDIA MOBILE-------- */ 	 

.hr-line {
border: none;
border-top: 1px dashed #999;
height: 1px;
}