/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

	body {
		font-family:'Lato', 'Arial', sans-serif;
		font-size:16px;
	}
	a {
		color:white;
	}
	a:hover {
		text-decoration:none;
	}

	.container {
		position:relative;
		padding-top:60px;
		padding-bottom:60px;
		z-index:10;
	}



	#about, #team, #imprint {
		background:#173A59;
	}
	#services, #contact {
		background:#13304A;
	}

	h3 {
		color:#e2001a;
		text-transform:uppercase;
		font-style:italic;
		font-size:40px;
		padding:10px 0;
		border-top:3px solid #e2001a;
		line-height:110%;
	}
	h4 {
		color:white;
	}

	p {
		color:white;
	}
	p.big {
		margin:30px 0;
		font-size:27px;
		line-height:120%;
		font-weight:700;
		font-style:italic;
	}

	.push-arrow {
		display:block;
		height:200px;
		width:100%;
	}
	.arrow,
	.arrow-up {
		position:absolute;
		bottom:20px;
		left:0;
		display:block;
		margin:20px 0 0 0;
		width:100%;
		height:126px;
		background:url(../img/arrow.png) no-repeat center bottom;
		text-indent:-9999px;
		z-index:100;
	}
	.arrow-up {
		background-image:url(../img/arrow-up.png);
	}
	.img-logo-kiezklempner {
	max-width: 300px;
	}
	.box-logo-kiezklempner {
	text-align: center;
	display: block;
	}
	/* frontpage logo */
	#frontpage {
		position:relative;
		background:url(../img/front-bg.png) no-repeat center #ffe21f;
		height:800px;
		z-index:100;
		padding-bottom:140px;
	}
	#frontpage h1 {
		position:relative;
		display:block;
		left:0;
		top:0;
		margin:0;
		width:100%;
		height:301px;
	}
	#frontpage h1 .logo {
		display:block;
		width:100%;
		height:100px;
		background:url(../img/logo.png) no-repeat center;
		text-indent:-9999px;
		margin-bottom:45px;
	}
	#frontpage h1 .sub {
		display:block;
		width:100%;
		text-transform:uppercase;
		font-size:55px;
		line-height:110%;
		font-weight:900;
		color:#004494;
		text-align:center;
		letter-spacing:4px;
		text-shadow:0 1px 1px white;
	}
	#frontpage h1 .quali {
		display:block;
	}
	#frontpage h1 .border {
		display:block;
		background:#e2001a;
		width:271px;
		height:12px;
		margin:32px auto 0 auto;
	}
	#frontpage h2 {
		position:relative;
		width:100%;
		margin:30px 0 60px 0;
		line-height:150%;
		text-align:center;
		font-size:35px;
		color:#004494;
		font-weight:bold;
		font-style:italic;
		text-shadow:0 1px 1px white;
	}

	/* about */
	#about {
		position:relative;
		overflow-x:hidden;
	}
	#about .innerwrap {
		position:relative;
		z-index:50;
	}
	#about .innerwrap .row {
		position:relative;
		z-index:10;
	}
	#about .innerwrap .row p {
		text-shadow:1px 1px #002d45;
	}
	.berlin {
		position:absolute;
		right:-10px;
		bottom:150px;
		display:block;
		width:533px;
		height:417px;
		background-image:url(../img/berlin.png);
		background-repeat:no-repeat;
		background-position:0 0;
		text-indent:-9999px;
		z-index:5;
	}
	#about .row-arrow {
		height:210px;
	}

	/* leistungen */
	.box {
		background:#ffde00;
		margin:5px 5px 0 0;
		font-weight:700;
		padding:10px;
		height:100%;
		font-size:16px;
		width:25%;
		float:left;
		list-style-type:none;
	}
	.box p {
		color:#13304A;
	}
	
	/* contactform */
	#form {
		position:relative;
	}
	#form .wait {
		position:absolute;
		z-index:10;
		width:321px;
		height:0;
		background:rgba(0, 0, 0, 0.5);
		left:0;
		top:0;
	}
	#form div {
		position:relative;
		z-index:5;
	}
	#form label {
		position:absolute;
		left: 10px;
		top: 11px;
		color:#092337;
		z-index:20;
	}
	#form input.text,
	#form textarea {
		width:300px;
		display:block;
		font-family:'Lato', Arial, sans-serif;
		color:#004494;
		background:white;
		outline:none;
		border:1px solid #092337;
		padding:10px;
		font-size:16px;
		box-shadow:inset 2px 2px 6px #a1a1a1;
		z-index:10;
	}
	#form textarea {
		height:200px;
	}
	#form .submit {
		display:block;
		border:0px none;
		text-align:center;
		font-family:'Lato', Arial, sans-serif;
		font-style:italic;
		text-transform:uppercase;
		width:320px;
		padding:10px;
		font-size:16px;
		color:white;
		background:#da001a;
		cursor:pointer;
	}

	p.contact {
		font-size:30px;
		color:white;
		line-height:160%;
		font-weight:700;
	}
	p.contact strong {
		font-weight:900;
	}
	p.contact strong a {
		color:#fff;
	}

	#imprint h4 {
		margin:40px 0 0 0;
	}
	#imprint p {
		margin:10px 0;
	}

/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */


@media handheld, only screen and (max-width: 767px) {

	#frontpage {
		height:600px;
		padding-bottom:0;
	}
	#frontpage h1 {
		top:56%;
		height:265px;
	}
	#frontpage h1 .sub {
		font-size:30px;
	}
	#frontpage h1 .border {
		width:150px;
		height:6px;
	}
	#frontpage h2 {
		top:53%;
		font-size:25px;
		margin-top:10px;
	}

	#about .berlin {
		display:none;
	}

	#services .box {
		width:90%;
	}

	#form {
		margin-bottom:40px;
	}
	#form input.text,
	#form textarea {
		width:90%;
	}
	#form input.submit {
		width:94%;
	}

	#contact .contact {
		margin-top:20px;
		line-height:120%;
	}
	#contact .contact strong {
		display:block;
	}
	#contact p.last {
		padding-bottom:80px;
	}

}


@media (max-width: 480px) { 
	#frontpage h1 .sub {
		font-size:25px;
	}
}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/
	#frontpage h1 .logo {
		background-image:url(../img/logo@2x.png);
		background-size:auto 100px;
	}

}


div#hatContent {
    margin-top: 60px;
    border: 10px solid #004494;
}