/* === CSS RESET === */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/*** Font ***/

@font-face {f
    font-family: 'FF DIN Web';
    src: url('http://www.dunkel-haustechnik.de/wp-content/themes/josh.dunkel/res/fonts/dinweb/DINWeb.eot');
    src: url('http://www.dunkel-haustechnik.de/wp-content/themes/josh.dunkel/res/fonts/dinweb/DINWeb.eot?#iefix') format('embedded-opentype'),
         url('http://www.dunkel-haustechnik.de/wp-content/themes/josh.dunkel/res/fonts/dinweb/DINWeb.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FF DIN Web';
    src: url('http://www.dunkel-haustechnik.de/wp-content/themes/josh.dunkel/res/fonts/dinweb/DINWeb-Light.eot');
    src: url('http://www.dunkel-haustechnik.de/wp-content/themes/josh.dunkel/res/fonts/dinweb/DINWeb-Light.eot?#iefix') format('embedded-opentype'),
         url('http://www.dunkel-haustechnik.de/wp-content/themes/josh.dunkel/res/fonts/dinweb/DINWeb-Light.woff') format('woff');
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family: 'FF DIN Web Condensed Bold';
    src: url('http://www.dunkel-haustechnik.de/wp-content/themes/josh.dunkel/res/fonts/dinweb/DINWeb-CondBold.eot');
    src: url('http://www.dunkel-haustechnik.de/wp-content/themes/josh.dunkel/res/fonts/dinweb/DINWeb-CondBold.eot?#iefix') format('embedded-opentype'),
         url('http://www.dunkel-haustechnik.de/wp-content/themes/josh.dunkel/res/fonts/dinweb/DINWeb-CondBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FF DIN Web';
    src: url('http://www.dunkel-haustechnik.de/wp-content/themes/josh.dunkel/res/fonts/dinweb/DINWeb-Bold.eot');
    src: url('http://www.dunkel-haustechnik.de/wp-content/themes/josh.dunkel/res/fonts/dinweb/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
         url('http://www.dunkel-haustechnik.de/wp-content/themes/josh.dunkel/res/fonts/dinweb/DINWeb-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* === End of CSS RESET === */


.text p {font-weight:normal;}
#iphone {
	display:none;
}

#inhalt {
	position: fixed;
}

#zustand {
	min-height:100%;
	position: fixed;
	top:0;
	min-width:100%;
	background:#F7F6F5 url('../img/zustand1.png') no-repeat center 80px;
	z-index:1000;
	display: block ;
}

#zustand .wrapper {
	width:960px;
	margin: 0 auto;	
}

#zustand h1 {
	font-size:26px;
	color:#7b5134;
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-ms-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
font-weight: normal;

}

.zsolar {
	margin-top:140px;
	margin-left:120px;
	position:relative;
}

.zsolar a {
	display:block;
	width:300px;
	height:140px;
}

.zsolar a:hover h1, .zluft a:hover h1, .zbad a:hover h1, .zleitungen a:hover h1, .zheizen a:hover h1, .zdach a:hover h1 {
	color:#0090bc !important;
	font-size:34px !important;
}

.zluft {
	margin-top:140px;
	margin-left:520px;
	position:relative;
}

.zluft a {
	display:block;
	width:300px;
	height:160px;
	text-align: right;
}

.zbad {
	margin-top:300px;
	margin-left:620px;
	position:relative;
}

.zbad a {
	display:block;
	width:300px;
	padding-top:50px;
	height:160px;
	text-align: right;
}

.zleitungen {
	margin-top:500px;
	margin-left:620px;
	position:relative;
}

.zleitungen a {
	display:block;
	width:340px;
	padding-top:80px;
	text-align: right;
}

.zheizen {
	margin-top:460px;
	margin-left:140px;
	position:relative;
}

.zheizen a {
	display:block;
	width:400px;
	padding-top:120px;
	padding-bottom:100px;
}

.zdach {
	margin-top:300px;
	margin-left:20px;
	position:relative;
}

.zdach a {
	display:block;
	width:300px;
	padding-top:50px;
	padding-bottom:100px;
}




body {
	background: #F7F6F5;
	color: #7b5134;
	font-size: 20px;
	font-family: "FF DIN Web", sans-serif;
	font-weight: normal;
	overflow: hidden;
}

h1 {
	font-size:90px;
	font-family:"FF DIN Web", sans-serif;
	font-weight:bold;
	color:#0090bc;
}

a, a:visited {
	color: #7b5134;
	text-decoration: none;
	transition: color 0.2s;
}

a:hover, a:active {
	color: #0090bc;
}

#zustand .wrapper div {
	position: absolute;
}

#zustand .wrapper div.active{
    display:block;
}

.settings, nav {
	background:#fff;
	font-weight: normal;
	font-size: 20px;
	width:100%; 
	border: 1px solid #dcd7cd;
	height:44px; 
}

.navcontainer {
	position: relative;
	top: 0;
	z-index: 100;
	padding:20px;
	display:block;
}

p {line-height: 1.4em}

a.button {
	color: #7b5134;
	display: inline-block;
	margin-right:6px;
	margin-top:20px;
	line-height: 40px;
	text-align: center;
	margin-bottom:-10px;
	text-decoration: none;
	border:1px solid #dcd7cd;
	background:#fff;
	z-index:200;
}

a.zuruck {
	float:right;
	margin-right:20px;
	margin-top:20px;
	height:44px;
	padding-left:20px;
	padding-right:20px;
	line-height:48px;
	color: #7b5134;
	display: inline-block;
	line-height: 46px;
	text-align: center;
	text-decoration: none;
	border:1px solid #dcd7cd;
	background:#fff;
	z-index:200;
	vertical-align: baseline;
}

a.button:hover {
	color:#0090bc;
}

nav li {
	float: left;
	margin-left:20px;
}



nav li.lastmenue {
	float:right;
	padding-left:20px;
	border-left:1px solid #dcd7cd;
	cursor: pointer;
}

nav a {
	display: block;
	line-height: 40px;
	margin-top:4px;
	border: none;
	text-align: center;
	margin-right:20px;
	transition: 0.25s;
}

nav li:last-child a {
	border-radius: 0 10px 0 0;
}


#scroller > div {
	position: absolute;
}

#scroller {
	position:absolute;
	z-index: 1;
	overflow:none;

}

.left, .right {
	cursor: pointer;
	display: inline-block;
	height: 86px;
	position: absolute;
	top: 0px;
	width: 52px;
	-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
		z-index:10;
}

.top, .down {
	cursor: pointer;
	display: inline-block;
	height: 52px;
	position: absolute;
	top: 0px;
	width: 86px;
	-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
		z-index:10;
}

a.right {background: transparent url('../img/right.png') 0px 50% no-repeat;}
a:hover.right {background: transparent url('../img/right1.png') 0px 50% no-repeat;}

a.left {background: transparent url('../img/left.png') 0px 50% no-repeat;}
a:hover.left {background: transparent url('../img/left1.png') 0px 50% no-repeat;}

a.top {background: transparent url('../img/top.png') 0px 50% no-repeat;}
a:hover.top {background: transparent url('../img/top1.png') 0px 50% no-repeat;}

a.down {background: transparent url('../img/down.png') 0px 50% no-repeat;}
a:hover.down {background: transparent url('../img/down1.png') 0px 50% no-repeat;}

@media only screen and (min-width: 1700px)  {

	#scroller {
		background: url('../img/background-1600.png') 600px 200px no-repeat; 
		width:4000px;
		height:4000px;
	}

	a.button {
		height: 38px;
		padding-left:8px;
		padding-right:8px;
	}

	.text {
		width:380px;
		position: relative;
	}

	#solar {
		width:1600px;
		height:1000px;
		top:0px;
		left:120px;
	}

	#solar .contimg {
		width:423px;
		height:184px;
		overflow:none;
		background: transparent  url('../img/solar-1600.png') no-repeat;
		left:980px;
		top:550px;
		position: absolute;
	}

	#solar .next {
		left:940px;
		top:220px;
	}

	#solar .prev {
		left:400px;
		top:640px;
	}


	#solar .text {
		left:400px;
		top:120px;
	}

	#luft {
		width:1600px;
		height:1200px;
		left:2200px;
		top:100px;
	}

	#luft .contimg {
		width:592px;
		height:387px;
		overflow:none;
		background: transparent  url('../img/luft-1600.png') no-repeat;
		left:53px;
		top:512px;
		position: absolute;
	}


	#luft .text {
		left:900px;
		top:140px;
	}

	#luft .next {
		left: 900px;
		top: 680px;
	}

	#luft .prev {
		left:700px;
		top:140px;
	}


	#bad {
		width:1600px;
		height:1200px;
		top:1100px;
		left:2200px;
	}

	#bad .contimg {
		width:599px;
		height:1702px;
		overflow:none;
		background: transparent  url('../img/bad-1600.png') no-repeat;
		left:394px;
		top:183px;
		position: absolute;
	}


	#bad .next {
		left: 1334px;
		top: 700px;
	}

	#bad .prev {
		left: 1334px;
		top:120px;
	}

	#bad .text {
		left:1200px;
		top:280px;
	}

	#leitung {
		width:1600px;
		height:1200px;
		left:2150px;
		top:1720px;
	}

	#leitung .contimg {
		width:396px;
		height:735px;
		overflow:none;
		background: transparent  url('../img/leitungen-1600.png') no-repeat;
		left:444px;
		top:520px;
		position: absolute;
	}

	#leitung .next {
		left: 1160px;
		top: 840px;
		z-index:10;
	}

	#leitung .prev {
		left:1320px;
		top:80px;
	}

	#leitung .text {
		top:220px;
		left:1160px;
	}

	#heizen {
		width:1600px;
		height:1200px;
		top:1820px;
		left:400px;
	}

	#heizen .contimg {
		width:482px;
		height:906px;
		overflow:none;
		background: transparent  url('../img/heizen-1600.png') no-repeat;
		left:998px;
		top:70px;
		position: absolute;
	}


	#heizen .next {
	left:150px;
	top:230px;	
	}

	#heizen .prev {
	left: 650px;
	top: 820px;
	}

	#heizen .text {
		top:400px;
		left:150px;
	}

	#dach {
		width:1600px;
		height:1200px;
		top:900px;
		left:0px;
	}

	#dach .contimg {
		width:322px;
		height:735px;
		overflow:none;
		background: transparent  url('../img/dach-1600.png') no-repeat;
		left: 627px;
		top: 209px;
		position: absolute;
	}

	#dach .text {
		top:360px;
		left:120px;
	}

	#dach .next {
	left:400px;
	top:170px;	
	-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
	}

	#dach .prev {
	left: 120px;
	top: 850px;
	}
}

@media only screen and (min-width: 1240px) and (max-width: 1699px) {



	#scroller {
		background: url('../img/background-1240.png') 480px 160px no-repeat; 
		width:3400px;
		height:3400px;
	}


	.text {
		width:320px;
		position: relative;
		font-size:16px;
	}

	h1 { 
		font-size: 50px;}

	a.button {
		height: 38px;
		padding-left:8px;
		padding-right:8px;
	}

	#solar {
		width:1240px;
		height:1000px;
		top:140px;
		left:120px;
	}

	#solar .contimg {
		width:423px;
		height:184px;
		overflow:none;
		background: transparent  url('../img/solar-1240.png') no-repeat;
		left:760px;
		top:300px;
		position: absolute;
	}

	#solar .next {
		left:620px;
		top:120px;
	}

	#solar .prev {
		left:300px;
		top:440px;
	}

	#solar .text {
		left:220px;
		top:96px;
	}

	#luft {
		width:1240px;
		height:1000px;
		left:1720px;
		top:120px;
	}


	#luft .contimg {
		width:592px;
		height:387px;
		overflow:none;
		background: transparent  url('../img/luft-1240.png') no-repeat;
		left:82px;
		top:368px;
		position: absolute;
	}

	#luft .next {
		left:900px;
		top:480px;
	}

	#luft .prev {
		left:630px;
		top:120px;
	}


	#luft .text {
		left:780px;
		top:112px;
	}


	#bad {
		width:1240px;
		height:1000px;
		top:980px;
		left:1800px;
	}

	#bad .contimg {
		width:599px;
		height:1702px;
		overflow:none;
		background: transparent  url('../img/bad-1240.png') no-repeat;
		left:274px;
		top:46px;
		position: absolute;
	}

	#bad .text {
		left:890px;
		top:240px;
		z-index: 100;
	}

	#bad .next {
		left:1000px;
		top:520px;
	}

	#bad .prev {
		left:1000px;
		top:140px;
	}

	#leitung {
		width:1240px;
		height:1000px;
		left:1840px;
		top:1430px;
	}

	#leitung .contimg {
		width:396px;
		height:735px;
		overflow:none;
		background: transparent  url('../img/leitungen-1240.png') no-repeat;
		left:234px;
		top:360px;
		position: absolute;
	}

	#leitung .text {
		top:100px;
		left:840px;
	}

	#leitung .next {
		left:840px;
		top:520px;
	}

	#leitung .prev {
		left:960px;
		top:10px;
	}

	#heizen {
		width:1240px;
		height:1000px;
		top:1500px;
		left:400px;
	}
	
	#heizen .contimg {
		width:482px;
		height:906px;
		overflow:none;
		background: transparent  url('../img/heizen-1240.png') no-repeat;
		left:718px;
		top:11px;
		position: absolute;
	}

	#heizen .next {
	left: 126px;
	top: 050px;
	}

	#heizen .prev {
	left: 370px;
	top: 480px;
	}

	#heizen .text {
		top:150px;
		left:120px;
	}

	#dach {
		width:1240px;
		height:1000px;
		top:804px;
		left:0px;
	}

	#dach .contimg {
		width:322px;
		height:735px;
		overflow:none;
		background: transparent  url('../img/dach-1240.png') no-repeat;
		left: 501px;
		top: 83px;
		position: absolute;
	}

	#dach .next {
	left: 226px;
	top: 120px;
	-moz-transform: rotate(45deg) scale(0.7);
-webkit-transform: rotate(45deg) scale(0.7);
-o-transform: rotate(45deg) scale(0.7);
-ms-transform: rotate(45deg) scale(0.7);
transform: rotate(45deg) scale(0.7);
	}

	#dach .prev {
	left: 206px;
	top: 550px;}


	#dach .text {
		top:215px;
		left:96px;
	}
		.next, .prev {
		-moz-transform: scale(0.7);
		-webkit-transform: scale(0.7);
		-o-transform: scale(0.7);
		-ms-transform: scale(0.7);
		transform: scale(0.7);
	}
	}

@media only screen and (min-width: 1025px) and (max-width: 1239px) {

	.next, .prev {
		-moz-transform: scale(0.7);
		-webkit-transform: scale(0.7);
		-o-transform: scale(0.7);
		-ms-transform: scale(0.7);
		transform: scale(0.7);
	}
	#scroller {
		background: url('../img/background-930.png') 360px 120px no-repeat; 
		width:2000px;
		height:2000px;
	}
	
	.text {
		width:320px;
		position: relative;
		font-size:16px;
	}

	h1 {
		font-size:60px;
	}

	a.button {
		height: 38px;
		padding-left:8px;
		padding-right:8px;
	}

	#solar {
		width:930px;
		height:750px;
		top:0px;
		left:72px;
	}

	#solar .contimg {
		width:423px;
		height:184px;
		overflow:none;
		background: transparent  url('../img/solar-930.png') no-repeat;
		left: 574px;
		top: 323px;
		position: absolute;
	}

	#solar .next {
		left:570px;
		top:120px;
	}

	#solar .prev {
		left: 120px;
		top: 560px;
	}

	#solar .text {
		left:100px;
		top:100px;
	}

	#luft {
		width:930px;
		height:750px;
		left: 1262px;
		top:0px;
	}

	#luft .contimg {
		width:592px;
		height:387px;
		overflow:none;
		background: transparent  url('../img/luft-930.png') no-repeat;
		left:91px;
		top:368px;
		position: absolute;
	}

	#luft .next {
		left: 680px;
		top: 540px;
	}

	#luft .prev {
	left: 420px;
	top: 100px;
	}
	#luft .text {
		left: 580px;
		top: 100px;
	}


	#bad {
		width:930px;
		height:750px;
		top:660px;
		left:1420px;
	}

	#bad .contimg {
		width:599px;
		height:1702px;
		overflow:none;
		background: transparent  url('../img/bad-930.png') no-repeat;
		left: 138px;
	top: 109px;
		position: absolute;
	}


	#bad .next {
		left: 710px;
		top: 570px;
	}

	#bad .prev {
		left: 710px;
		top: 90px;
	}

	#bad .text {
		left: 600px;
		top: 220px;
	}

	#leitung {
		width:930px;
		height:750px;
		left:1360px;
		top:960px;
	}


	#leitung .contimg {
		width:396px;
		height:735px;
		overflow:none;
		background: transparent  url('../img/leitungen-930.png') no-repeat;
		left: 198px;
top: 393px;
		position: absolute;
	}

	#leitung .next {
		left: 530px;
		top: 550px;
	}

	#leitung .prev {
		left: 720px;
		top: 70px;
	}

	#leitung .text {
		top: 154px;
		left: 625px;
	}

	#heizen {
		width:930px;
		height:750px;
		top:1058px;
		left:264px;
	}

	#heizen .contimg {
		width:482px; 
		height:906px;
		overflow:none;
		background: transparent  url('../img/heizen-930.png') no-repeat;
		left: 578px;
		top: 76px;
		position: absolute;
	}

	#heizen .next {
		left: 50px;
		top: 80px;
		-moz-transform: rotate(-45deg) scale(0.7);
		-webkit-transform: rotate(-45deg) scale(0.7);
		-o-transform: rotate(-45deg) scale(0.7);
		-ms-transform: rotate(-45deg) scale(0.7);
		transform: rotate(-45deg) scale(0.7);
	}


	#heizen .prev {
		left: 450px;
		top: 550px;
	}

	#heizen .text {
		top:220px;
		left:70px;
	}

	#dach {
		width:930px;
		height:750px;
		top:480px;
		left:0px;
	}

		#dach .contimg {
		width:322px;
		height:735px;
		overflow:none;
		background: transparent  url('../img/dach-930.png') no-repeat;
		left: 376px;
		top: 185px;
		position: absolute;
	}

	#dach .next {
	left: 226px;
	top: 160px;
	-moz-transform: rotate(45deg) scale(0.7);
-webkit-transform: rotate(45deg) scale(0.7);
-o-transform: rotate(45deg) scale(0.7);
-ms-transform: rotate(45deg) scale(0.7);
transform: rotate(45deg) scale(0.7);
	}

	#dach .prev {
	left: 145px;
	top: 720px;
}

	#dach .text {
		top:276px;
		left:40px;
	}
	}

@media only screen and (max-width: 1024px) {
	
	#scroller {
		background: url('../img/background-640.png') 252px 84px no-repeat; 
		width:2065px;
		height:2067px;
	}


	.text {
		width:240px;
		position: relative;
		font-size:15px;
	}
	nav {
		font-size:17px;
	}
	nav a {
		line-height:34px;
	}

	nav, a.zuruck {
		height:38px;
	}

	a.zuruck {
		margin-top:10px;
		margin-right:10px;
		font-size:17px;
		line-height:39px;
	}

	.navcontainer {
		padding:10px;
	}



	.next, .prev {
		-moz-transform: scale(0.5);
		-webkit-transform: scale(0.5);
		-o-transform: scale(0.5);
		-ms-transform: scale(0.5);
		transform: scale(0.5);
	}

	h1 {font-size:40px;}

	a.button {
		padding-left:8px;
		padding-right:8px;
		line-height:30px;
		padding-top:2px;
	}

	#solar {
		width:640px;
		height:480px;
		top:40px;
		left:40px;
	}

	#solar .contimg {
		width:322px;
		height:735px;
		overflow:none;
		background: transparent  url('../img/solar-640.png') no-repeat;
		left: 494px;
		top: 244px;
		position: absolute;
	}

	#solar .next {
		top:93px;
		left:400px;
	}

	#solar .prev {
		top:470px;
		left:100px;
	}

	#solar .text {
		left:120px;
		top:120px;
	}

	#luft {
		width:640px;
		height:480px;
		left:1200px;
		top:70px;
	}

	#luft .contimg {
		width:450px;
		height:735px;
		overflow:none;
		background: transparent  url('../img/luft-640.png') no-repeat;
		left: 47px;
		top: 260px;
		position: absolute;
	}


	#luft .text {
		left: 520px;
		top: 70px;
	}

	#luft .next {

		top: 435px;
		left: 645px;	}

	#luft .prev {
		top: 50px;
		left: 400px;
	}


	#bad {
		width:640px;
		height:480px;
		top:582px;
		left:1392px;
	}

	#bad .contimg {
		width:450px;
		height:735px;
		overflow:none;
		background: transparent  url('../img/bad-640.png') no-repeat;
		left: 59px;
		top: 151px;
		position: absolute;
	}

	#bad .text {
		left:480px;
		top:240px;
	}
	#bad .next {
		top: 504px;
		left: 544px;
	}

	#bad .prev {
		top: 150px;
		left: 544px;
	}
	#leitung {
		width:640px;
		height:480px;
		left:1392px;
		top:1020px;
	}

	#leitung .contimg {
		width:450px;
		height:735px;
		overflow:none;
		background: transparent  url('../img/leitungen-640.png') no-repeat;
		left: 60px;
		top: 292px;
		position: absolute;
	}


	#leitung .text {
		top:180px;
		left:480px;
	}

	#leitung .prev {
		top:100px;
		left:544px;
	}

		#leitung .next {
		top:500px;
		left:344px;
	}

	#heizen {
		width:640px;
		height:480px;
		top:1001px;
		left:274px;
	}

	#heizen .contimg {
		width:450px;
		height:735px;
		overflow:none;
		background: transparent  url('../img/heizen-640.png') no-repeat;
		left: 454px;
		top: 95px;
		position: absolute;
	}


	#heizen .text {
		top: 251px;
		left: 50px;
	}


	#heizen .prev {
		top: 550px;
		left: 304px;
	}

	#heizen .next {
		top: 140px;
		left: 20px;
		-moz-transform: rotate(-45deg) scale(0.5);
		-webkit-transform: rotate(-45deg) scale(0.5);
		-o-transform: rotate(-45deg) scale(0.5);
		-ms-transform: rotate(-45deg) scale(0.5);
		transform: rotate(-45deg) scale(0.5);
	}


	#dach {
		width:640px;
		height:480px;
		top:466px;
		left:0px;
	}


	#dach .contimg {
		width:450px;
		height:735px;
		overflow:none;
		background: transparent  url('../img/dach-640.png') no-repeat;
		left: 266px;
		top: 162px;
		position: absolute;
	}


	#dach .next {
		top: 180px;
		left: 93px;
	}

	#dach .prev {
		top: 620px;
		left: 93px;
	}


	#dach .text {
		top:293px;
		left:28px;
	}
	

	}

@media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px) and (orientation : landscape) {


		.prev {
			display:none;
		}

		#leitung .text {
			top:80px;
		}

		#bad .text {
			top:180px;
		}

		#bad .next {
			top:500px;
		}

		#scroller {
		background: url('../img/background-930.png') 360px 120px no-repeat; 
		width:2000px;
		height:2000px;
	}
	
	.text {
		width:320px;
		position: relative;
		font-size:18px;
	}

	h1 {
		font-size:70px;
	}

	a.button {
		padding-left:8px;
		padding-right:8px;
	}

	#solar {
		width:930px;
		height:750px;
		top:0px;
		left:72px;
	}

	#solar .contimg {
		width:423px;
		height:184px;
		overflow:none;
		background: transparent  url('../img/solar-930.png') no-repeat;
		left: 574px;
		top: 323px;
		position: absolute;
	}

	#solar .next {
		left:570px;
		top:120px;
	}

	#solar .prev {
		left: 120px;
		top: 560px;
	}

	#solar .text {
		left:100px;
		top:100px;
	}

	#luft {
		width:930px;
		height:750px;
		left: 1262px;
		top:0px;
	}

	#luft .contimg {
		width:592px;
		height:387px;
		overflow:none;
		background: transparent  url('../img/luft-930.png') no-repeat;
		left:91px;
		top:368px;
		position: absolute;
	}

	#luft .next {
		left: 680px;
		top: 540px;
	}

	#luft .prev {
	left: 420px;
	top: 100px;
	}
	#luft .text {
		left: 580px;
		top: 100px;
	}


	#bad {
		width:930px;
		height:750px;
		top:660px;
		left:1420px;
	}

	#bad .contimg {
		width:599px;
		height:1702px;
		overflow:none;
		background: transparent  url('../img/bad-930.png') no-repeat;
		left: 138px;
	top: 109px;
		position: absolute;
	}


	#bad .next {
		left: 710px;
		top: 570px;
	}

	#bad .prev {
		left: 710px;
		top: 90px;
	}

	#bad .text {
		left: 600px;
		top: 220px;
	}

	#leitung {
		width:930px;
		height:750px;
		left:1360px;
		top:960px;
	}


	#leitung .contimg {
		width:396px;
		height:735px;
		overflow:none;
		background: transparent  url('../img/leitungen-930.png') no-repeat;
		left: 198px;
top: 393px;
		position: absolute;
	}

	#leitung .next {
		left: 530px;
		top: 550px;
	}

	#leitung .prev {
		left: 720px;
		top: 70px;
	}

	#leitung .text {
		top: 154px;
		left: 625px;
	}

	#heizen {
		width:930px;
		height:750px;
		top:1058px;
		left:264px;
	}

	#heizen .contimg {
		width:482px; 
		height:906px;
		overflow:none;
		background: transparent  url('../img/heizen-930.png') no-repeat;
		left: 578px;
		top: 76px;
		position: absolute;
	}

	#heizen .next {
		left: 50px;
		top: 80px;
		-moz-transform: rotate(-45deg) scale(0.5);
		-webkit-transform: rotate(-45deg) scale(0.5);
		-o-transform: rotate(-45deg) scale(0.5);
		-ms-transform: rotate(-45deg) scale(0.5);
		transform: rotate(-45deg) scale(0.5);
	}


	#heizen .prev {
		left: 450px;
		top: 550px;
	}

	#heizen .text {
		top:220px;
		left:70px;
	}

	#dach {
		width:930px;
		height:750px;
		top:480px;
		left:0px;
	}

		#dach .contimg {
		width:322px;
		height:735px;
		overflow:none;
		background: transparent  url('../img/dach-930.png') no-repeat;
		left: 376px;
		top: 185px;
		position: absolute;
	}

	#dach .next {
	left: 226px;
	top: 160px;
	-moz-transform: rotate(45deg) scale(0.5);
-webkit-transform: rotate(45deg) scale(0.5);
-o-transform: rotate(45deg) scale(0.5);
-ms-transform: rotate(45deg) scale(0.5);
transform: rotate(45deg) scale(0.5);
	}

	#dach .prev {
	left: 145px;
	top: 720px;
}

	#dach .text {
		top:276px;
		left:40px;
	}
	#zustand {
		margin-top:-80px;
		padding-bottom:80px;
	}

	}


	@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)  {
	
	#zustand {
	background-size:80%;}

#zustand .wrapper {
	width:768px;
	margin: 0 auto;	
}

#zustand h1 {
	font-size:26px;
	color:#7b5134;
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-ms-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
font-weight: normal;

}

.zsolar {
	margin-top:140px;
	margin-left:120px;
	position:relative;
}

.zsolar a {
	display:block;
	width:200px;
	height:60px;
}

.zsolar a:hover h1, .zluft a:hover h1, .zbad a:hover h1, .zleitungen a:hover h1, .zheizen a:hover h1, .zdach a:hover h1 {
	color:#0090bc !important;
	font-size:34px !important;
}

.zluft {
	margin-top:140px;
	margin-left:420px;
	position:relative;
}

.zluft a {
	display:block;
	width:200px;
	height:80px;
	text-align: right;
}

.zbad {
	margin-top:250px;
	margin-left:480px;
	position:relative;
}

.zbad a {
	display:block;
	width:180px;
	padding-top:50px;
	height:60px;
	text-align: right;
}

.zleitungen {
	margin-top:380px;
	margin-left:540px;
	position:relative;
}

.zleitungen a {
	display:block;
	width:140px;
	padding-top:80px;
	text-align: right;
}

.zheizen {
	margin-top:340px;
	margin-left:140px;
	position:relative;
}

.zheizen a {
	display:block;
	width:240px;
	padding-top:130px;
	padding-bottom:100px;
}

.zdach {
	margin-top:200px;
	margin-left:80px;
	position:relative;
}

.zdach a {
	display:block;
	width:300px;
	padding-top:100px;
	padding-bottom:20px;
}



			#scroller {
		background: url('../img/background-640.png') 252px 84px no-repeat; 
		width:2065px;
		height:2067px;
	}


	.text {
		width:240px;
		position: relative;
		font-size:15px;
	}
	nav {
		font-size:17px;
	}
	nav a {
		line-height:34px;
	}



	.next, .prev {
		-moz-transform: scale(0.5);
		-webkit-transform: scale(0.5);
		-o-transform: scale(0.5);
		-ms-transform: scale(0.5);
		transform: scale(0.5);
	}

	h1 {font-size:40px;}

	a.button {
		line-height:30px;
		padding-top:2px;
	}

	#solar {
		width:640px;
		height:480px;
		top:40px;
		left:40px;
	}

	#solar .contimg {
		width:322px;
		height:735px;
		overflow:none;
		background: transparent  url('../img/solar-640.png') no-repeat;
		left: 494px;
		top: 244px;
		position: absolute;
	}

	#solar .next {
		top:93px;
		left:400px;
	}

	#solar .prev {
		top:470px;
		left:100px;
	}

	#solar .text {
		left:120px;
		top:120px;
	}

	#luft {
		width:640px;
		height:480px;
		left:1200px;
		top:70px;
	}

	#luft .contimg {
		width:450px;
		height:735px;
		overflow:none;
		background: transparent  url('../img/luft-640.png') no-repeat;
		left: 47px;
		top: 260px;
		position: absolute;
	}


	#luft .text {
		left: 500px;
		top: 70px;
	}

	#luft .next {

		top: 395px;
		left: 645px;	}

	#luft .prev {
		top: 50px;
		left: 400px;
	}


	#bad {
		width:640px;
		height:480px;
		top:582px;
		left:1392px;
	}

	#bad .contimg {
		width:450px;
		height:735px;
		overflow:none;
		background: transparent  url('../img/bad-640.png') no-repeat;
		left: 59px;
		top: 151px;
		position: absolute;
	}

	#bad .text {
		left:480px;
		top:240px;
	}
	#bad .next {
		top: 504px;
		left: 544px;
	}

	#bad .prev {
		top: 150px;
		left: 544px;
	}
	#leitung {
		width:640px;
		height:480px;
		left:1392px;
		top:1020px;
	}

	#leitung .contimg {
		width:450px;
		height:735px;
		overflow:none;
		background: transparent  url('../img/leitungen-640.png') no-repeat;
		left: 60px;
		top: 292px;
		position: absolute;
	}


	#leitung .text {
		top:180px;
		left:480px;
	}

	#leitung .prev {
		top:100px;
		left:544px;
	}

		#leitung .next {
		top:500px;
		left:344px;
	}

	#heizen {
		width:640px;
		height:480px;
		top:1001px;
		left:274px;
	}

	#heizen .contimg {
		width:450px;
		height:735px;
		overflow:none;
		background: transparent  url('../img/heizen-640.png') no-repeat;
		left: 454px;
		top: 95px;
		position: absolute;
	}


	#heizen .text {
		top: 251px;
		left: 50px;
	}


	#heizen .prev {
		top: 550px;
		left: 304px;
	}

	#heizen .next {
		top: 140px;
		left: 20px;
		-moz-transform: rotate(-45deg) scale(0.5);
		-webkit-transform: rotate(-45deg) scale(0.5);
		-o-transform: rotate(-45deg) scale(0.5);
		-ms-transform: rotate(-45deg) scale(0.5);
		transform: rotate(-45deg) scale(0.5);
	}


	#dach {
		width:640px;
		height:480px;
		top:466px;
		left:0px;
	}


	#dach .contimg {
		width:450px;
		height:735px;
		overflow:none;
		background: transparent  url('../img/dach-640.png') no-repeat;
		left: 266px;
		top: 162px;
		position: absolute;
	}


	#dach .next {
		top: 180px;
		left: 93px;
	}

	#dach .prev {
		top: 620px;
		left: 93px;
	}


	#dach .text {
		top:293px;
		left:28px;
	}

	}

	@media only screen  and (min-device-width : 320px) and (max-device-width : 568px) { 
		#zustand, .wrapper, #inhalt, nav {
			display:none;
			background:none;
		} 

		#iphone {
			display: block;
			padding:20px;
		}

		#iphone a.button {
			width:auto;
			padding-left:10px;
			padding-right: 10px;
		}


	}