@charset "UTF-8";
/* CSS Document */







#container  {
	width:1200px;
	margin:0 auto;
}


#container img {
	width:100%;
}
	
#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
  z-index:1;
}
	
logo {
	margin-left:30px;
	margin-top:50px;
	z-index:2;
	background-color:#FFF;
}

nav ul {
	font:normal, Arial, Helvetica, sans-serif, 20px/26px;
	margin:0;
	margin-left:100px;
	margin-top:10%;
	padding:0;
	white-space:nowrap;
	list-style-type: none;
	z-index:2;
	position:fixed;
	}
	
nav ul li{
	margin-right:60px;;
	display:float;
		
}

nav a{
	text-decoration:none;
	color:#FFF;
	padding:5px/10px;
}

nav a:hover{
	color:#CCC;
	text-shadow:inherit;
}

.active{
	color:#FFF;
	line-height:inherit;
	cursor:crosshair;
}

#content{
	z-index:70;
overflow:auto;
	
	}

#logo{
	z-index:70;
overflow:auto
	}

.active:before{
	content:"";
}

nav a:before{
	content:"";
}
	
nav a:focus{
	outline:none;
	border:0;
}

html {
	background: url(img/bg.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

@charset "UTF-8";
/* CSS Document */

#html {
min-height: 100%;
}

#body {
margin:0;
padding:0;
font-family:Verdana, Geneva, sans-serif;
font-size:13px;
line-height:18px;
text-align:center; 
min-width:940px; 
/* für Netscape 6 */
}

#container{
	width:1200px;
	margin:0 auto;
}



img {
border:none; outline:none;
}


#wrapper {

margin-left:270px;
padding-left:20px;
width:850px;/* wrapper im Browserfenster zentrieren */
text-align:left;
clear:both;
float:left;

}

#logo {
top:50px;
left:50px;
position:fixed;
width:200px;
height:120px;
}

#main_nav {
position:fixed;
top:170px;
left:0;
font-size: 14px;
text-align:left;
}


#main_nav li {
padding: 0 0px 0 110px;
margin: 1px 0;
font-size: 16px;
}

a {color: #000;text-decoration:underline;}
a:hover {color:#666;}
a:active { color:#666;}

ul {
list-style-type: none;
padding: 0;
margin: 0;	
}


li a {
font-family:Arial, Helvetica, serif;
text-transform:lowercase;
color:#333;
font-size: 13px;
line-height:18px;
font-weight:100;
text-decoration:none;
  -webkit-transition: all 0.3s ease-out; 
     -moz-transition: all 0.3s ease-out; 
       -o-transition: all 0.3s ease-out; 
          transition: all 0.3s ease-out;

}

li a:hover {
margin-left: 5px;
}

ul ul {
list-style-type: none;
padding: 0;
margin: 0;
}

ul ul li a {
font-family:Arial, Helvetica, serif;
text-transform:inherit;
color:#000;
font-size: 11px;
line-height:2px;
font-weight:normal;
text-decoration:none;
}

#navigationright {
	float:right;
	width:200px;
	
}

#navigationright li {
	color:#FFF;
	font-size:0;
	
}


	
#anleitung {
	width:200px;
	position:fixed;
	margin-left:50px;
	margin-right:30px;
	margin-top:43px;
	}

	
#icon {
	width:130px;
	hight:130px;
	position:fixed;
	margin-left:30px;
	margin-right:30px;
	margin-top:75%;
	
}
	
#content {
	width:50%;
	height:50%;
	background-color:#F9C;
}

#textbox { 
  	width:250px;
	height:150px;
	position:relative;

}
	

	
#contentleft {
	width:650px;
	/*height:100%;*/
	/*position:absolute;*/
	float:left;;
	margin-left:40px;
	margin-top:46px;
	font-family:Arial, Helvetica, sans-serif;
	color:#999;
	font-size:13px;
	
	

	
	clear:both;
	
	}

#contentleft img {
	margin-bottom:30px;
	margin-right:15px;
	margin-top:0;

}


#contentleft a {
	margin-bottom:30px;
	margin-right:15px;

}


#contentleft li {
	font-family:Tahoma, Geneva, sans-serif;
	text-align:left;
	font-size:13px;

}



#contentleft img big {
	margin-bottom:10px;
	margin-right:10px;
}


#footer {
	width:500px;
	height:30px;
	text-align:left;
	position:fixed;
	margin-left:30px;
	margin-top:92%;
	clear:both;
	
}


/*abschnitt projektboxen*/

.view {
    width: 300px;
    height: 200px;
    float: left;
    border: 5px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor:crosshair;
	background-color: rgba(102, 204, 153, 0.5);
	opacity: 1;
	margin-right: 15px;
	margin-bottom: 15px;
}
.view .mask {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.view img {
display: block;
position: relative;
}

.view h2 {
    text-transform:lowercase;
	font-family: Arial, Helvetica, serif;
    color: #fff;
    text-align: center;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0;
}
.view p {
    font-family: Georgia,serif;
    font-style: italic;
    font-size: 12px;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center;
}
.view a.info {
    display: inline-block;
	font-family: Arial, Helvetica, serif;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color:#FFF;
    text-transform: lowercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 0px #000
}
.view-fourth img {
    transition: all 0.4s ease-in-out 0.2s;
	display:block;
    opacity: 1;
}
.view-fourth .mask {
    opacity: 0;
	display:none;
    transform: scale(0) rotate(-180deg);
    transition: all 0.4s ease-in;
    border-radius: 0px;
	background-color: rgba(102, 204, 153, 0.7);
}
.view-fourth h2{
    opacity: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transition: all 0.5s ease-in-out;
}
.view-fourth p {
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.view-fourth a.info {
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.view-fourth:hover .mask {
	display:block;
    opacity: 1;
	transform: scale(1) rotate(0deg);
    transition-delay: 0.2s;
}
.view-fourth:hover img    {
    transform: scale(0);
    opacity: 1;
    transition-delay: 0s;
}
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info{
    opacity: 1;
    transition-delay: 0.5s;
}

#startscreen {
	
	margin-left:200px;
	margin-top: 200px;
	
	}
	
	::-moz-selection { background: #3C9; color: #fff; text-shadow: none; }
::selection { background: #3C9; color: #fff; text-shadow: none; }