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


@media all {	
	
#wrapper {
	width: 1024px;
	background-image: url(../img/back_start.png);
	background-repeat: no-repeat;
	background-size: 1024px;
	margin: 0 auto;
}
#navia {
	width: 1000px;
	margin-top: 30px;
	margin-left: 170px;
}
#w1 {
	margin-left: 170px;
	position:relative;
}
.ww2, .titel {
	float:left;
	display: inline-block;
	width: 260px;
	height: 135px;
	padding-left: 20px;
}


.titel2, .titel3, .titel4 {
	display:inline-block;
	width:260px;
	height:135px;
	padding-left:21px;
	position:absolute;
	}

.titel2 {
	top:1487px;
	}

.titel3 {
	top:1487px;
	left:284px;
	}
	
.titel4 {
	top:1573px;
	left:560px;
	}
	
	
.titel h1, .titel2 h1, .titel3 h1, .titel4 h1 {
	font-size:18px;}
	
.titel h2, .titel2 h2, .titel3 h2, .titel4 h2 {
	font-weight:normal;
	font-size:18px;
	line-height:7px;}
	
	
	
#modernoffice, #ties, #heinokraft, #dogmatisch, #akt, #typotrends, #brueken, #kink, #sbg, #skizze, #kalli, #frucht, #kuco, #abdruck, #bcc, #beginn, #nebel, #zds{
	-webkit-transition: all 0.5s ease-in-out;
}

#kuco {
	background-image:url(../projekte/kuco.gif)
	}
	
#kuco:hover {
	background-image:url(../projekte/kucoHover.gif)
	}

#abdruck {
	background-image:url(../projekte/Abdruck.gif)
	}
	
#abdruck:hover, #abdruck:active{
	background-image:url(../projekte/AbdruckHover.gif)
	}
	
#bcc {
	background-image:url(../projekte/bcc.gif)}
#bcc:hover {
	background-image:url(../projekte/bccHover.gif)}
	
#beginn {
	background-image:url(../projekte/beginn.gif)}
#beginn:hover {
	background-image:url(../projekte/beginnHover.gif)}


#nebel {
	background-image:url(../projekte/nebel.gif)}
#nebel:hover {
	background-image:url(../projekte/nebelHover.gif)}
	
#zds {
	background-image:url(../projekte/zds.gif)}
#zds:hover {
	background-image:url(../projekte/zdsHover.gif)}

#modernoffice {
	background-image:url(../projekte/Modernoffice.gif);
	}

#modernoffice:hover {
	background-image:url(../projekte/ModernofficeHover.gif);
	}

#ties {
	background-image:url(../projekte/Ties.gif);
	}

#ties:hover {
	background-image:url(../projekte/TiesHover.gif);
	}

#heinokraft {
	background-image:url(../projekte/Heino.gif);
	}

#heinokraft:hover {
	background-image:url(../projekte/HeinoHover.gif);
	}

#dogmatisch {
	background-image: url(../projekte/dogmatisch.gif);
}
#dogmatisch:hover {
	background-image: url(../projekte/dogmatischhover.gif);
}
#akt {
	background-image: url(../projekte/Akt.gif);
}
#akt:hover {
	background-image: url(../projekte/AktHover.gif);
}
#typotrends {
	background-image: url(../projekte/TypoTrends.gif);
}
#typotrends:hover {
	background-image: url(../projekte/TypoTrendsHover.gif);
}
#brueken {
	background-image: url(../projekte/brueken.gif);
}
#brueken:hover {
	background-image: url(../projekte/brueckenHover.gif);
}
#kink {
	background-image: url(../projekte/kink.gif);
}
#kink:hover {
	background-image: url(../projekte/kinkHover.gif);
}
#sbg {
	background-image: url(../projekte/CD.gif);
}
#sbg:hover {
	background-image: url(../projekte/CDHover.gif);
}
#skizze {
	background-image: url(../projekte/dynamischeskizze.gif);
}
#skizze:hover {
	background-image: url(../projekte/dynamischeskizzehover.gif);
}
#kalli {
	background-image: url(../projekte/kalligrafie.gif);
}
#kalli:hover {
	background-image: url(../projekte/kalligrafiehover.gif);
}
#frucht {
	background-image: url(../projekte/Frucht.gif);
	background-repeat: no-repeat;
	height: 220px;
	width: 260px;
	margin-left:20px;
	}
	
#frucht:hover {
	background-image: url(../projekte/FruchtHover.gif);
}
#navik {
	margin-left: 170px;
	padding-top: 1550px;
}
#mail {
	margin-left: 200px;
	margin-top: 280px;
}

#kontakt {
	height: 2100px;
}
 //*@media screen and (max-width: 1000px) {
#start {
	background-size:70%;
	background-repeat:no-repeat;}	
	
	



}