@charset "UTF-8";
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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	height: 100%;
}
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;
}

p {font-size: 14px; font-family: 'Roboto'; color: #3c3c3b; margin-bottom: 6px; line-height: 17px;}
h1 {font-size: 18px; font-family: 'Shadows Into Light Two'; position: absolute; left: 0px; background-color: #8ec250; color: #fff; padding-left: 7%; padding-top: 10px; padding-bottom: 10px; padding-right: 25px; letter-spacing: 0.05em; text-transform: uppercase;}
h2 {font-size: 15px; font-family: 'Roboto'; color: #3c3c3b; text-transform:uppercase; font-weight: bold;margin-bottom: 10px;}
h3 {font-size: 15px; font-family: 'Roboto'; color: #3c3c3b; text-transform:uppercase; font-weight: bold;margin-bottom: 10px;}



#wrapper {width: 100%;height:auto !important;height: 100%; min-height: 100%;position: absolute;}

header {width: 100%;min-height: 450px;background-image:url('../images/background-image.jpg');background-repeat: no-repeat;
	background-size: 100%;background-position: 0px 75px;}


.logo {	margin-left: 5%; width: 162px; float: left; margin-top: 10px;}
.logo img {width: 100%;}

nav {width: 50%; float: right;  height: 75px; display: block;}
nav ul {float: right; list-style: none; margin-right:7%;}
nav ul li {float: left; font-size: 17px; font-family: 'Roboto Condensed'; color: #3c3c3b;; text-transform: uppercase; margin-top: 30px;}
nav ul li a {color: #3c3c3b; text-decoration: none; padding: 40px 20px 25px 20px; margin-right: 20px;}
nav ul li a:hover {background-color:#3c3c3b; color: #fff;}

.content {width: 86%; height: auto !important; margin:auto; margin-top: 40px; float: left;padding-left: 7%;}

.content .startseite {width: 100%; float: left;}
.content .startseite .text {width: 60%; margin-right: 5%; float: left;}
.content .startseite .text .absatz {margin-top: 75px;}
.content .startseite .bild {width: 25%; float: left; margin-left: 3%;}
.content .startseite .bild img {width: 100%;}

.content .trenner {width: 118%; height: 1px; background-color: #d4d4d4;float: left; margin-top: 30px; margin-left: -10%;}

.content .leistungen {width: 100%; margin-top: 40px; float: left;}
.content .leistungen .text {width: 60%; margin-right: 5%; float: left; margin-top: 70px;}
.content .leistungen .text .content {width: 100%; float: left;margin-right: 5%; padding-left: 0;}
.content .leistungen .text ul {font-family: 'Roboto'; font-size: 14px; color: #3c3c3b; margin-top: 5px;}
.content .leistungen .text ul li {background-image: url(../images/bulletpoint.png); background-repeat: no-repeat; padding-left: 20px; margin-top: 8px;}
.content .leistungen .text ul li.first {margin-top: 10px;}
.content .leistungen .text .weitere-punkte {margin-top: 20px; float: left;}
.content .leistungen .text .weitere-punkte p {margin-bottom: 15px;}
.content .leistungen .bild {width: 25%; float: left; margin-left: 3%; margin-top: 7%;}
.content .leistungen .bild img {width: 100%;}

.content .kontakt {width: 100%; margin-top: 40px;float: left;}
.content .kontakt .anschrift {width: 35%; padding-top: 75px; float: left;}
.content .kontakt .anschrift .telefon {background-image: url(../images/telefon.png); background-repeat:no-repeat; padding-left: 15px; background-position-y: 3px; margin-bottom: 0px;}
.content .kontakt .anschrift .fax {background-image: url(../images/fax.png); background-repeat: no-repeat; padding-left: 15px;background-position-y: 3px;}
.content .kontakt .anschrift .mail {background-image: url(../images/mail.png); background-repeat:no-repeat; padding-left: 15px;background-position-y: 5px;}
.content .kontakt .anschrift .mail a {text-decoration: none; color: #3c3c3b;}
.content .kontakt .google-maps {position: absolute; left: 37%;}
.content .kontakt .google-maps .desktop {display: block;}

.content .datenschutz {width: 100%; margin-top: 40px; float: left;}
.content .datenschutz .text {width: 90%; margin-right: 5%; float: left; padding-top: 70px;}
.content .datenschutz ul {font-family: 'Roboto'; font-size: 14px; color: #3c3c3b; margin-top: 5px;}
.content .datenschutz ul li {background-image: url(../images/bulletpoint.png); background-repeat: no-repeat; padding-left: 20px; margin-top: 8px;}



footer {float: left; text-align:center; font-family:'Roboto'; font-size:12px; width: 100%;padding-top: 15px; padding-bottom:15px;}






/** RESPONSIVE **/


@media only screen and (min-width:769px) and (max-width:1024px){

header {min-height: 400px;}

nav {display:block; width: 70%;}

.content {margin-top: 20px;}
.content .startseite .bild {width: 26%; margin-top: 8%;}

.content .kontakt .anschrift {width:100%; float: none;}
.content .kontakt .google-maps .desktop {display: none;}


}


@media only screen and (min-width:420px) and (max-width:768px) {

header {min-height: 230px;}
	
.logo {margin: auto; margin-top: 10px; width: 100%; text-align: center;}
nav {display: none;}

.content .startseite .text {width:100%;}
.content .startseite .bild {width: 80%; margin-left: 8%; margin-top: 6%;}

.content .leistungen .text {width: 100%;}
.content .leistungen .bild {width: 80%; margin-left: 8%; margin-top: 6%;}

.content .kontakt .anschrift {width:100%; float: none;}
.content .kontakt .google-maps .desktop {display: none;}

}



@media only screen and (max-width:420px) {

h1{line-height: 25px;}
p{font-size: 16px; line-height: 19px;}

header {min-height: 180px;}

.logo {margin: auto; margin-top: 10px; width: 100%; text-align: center;}
nav {display: none;}

.content .startseite .text {width:100%; margin-top: 10%;}
.content .startseite .bild {width: 80%; margin-left: 8%; margin-top: 6%;}

.content .leistungen .text {width: 100%;}
.content .leistungen .bild {width: 80%; margin-left: 8%; margin-top: 6%;}

.content .leistungen .text ul {font-size: 16px; line-height: 19px;}
.content .leistungen .text ul li {background-position: 1px 5px;}


.content .leistungen .text .weitere-punkte p {line-height:19px;}

.content .kontakt .anschrift {width:100%; float: none;}
.content .kontakt .google-maps .desktop {display: none;}


}