/* CSS Document */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure,figure img{padding: 0; margin: 0;}
@font-face {font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-Regular.woff2') format('woff2'),
        url('../fonts/RobotoCondensed-Regular.woff') format('woff');
    font-weight: normal;    font-style: normal;}

@font-face {font-family: 'Arimo';
    src: url('../fonts/Arimo-Regular.woff2') format('woff2'),
        url('../fonts/Arimo-Regular.woff') format('woff');
    font-weight: normal;    font-style: normal;}

@font-face {font-family: 'Arimo';
    src: url('../fonts/Arimo-SemiBold.woff2') format('woff2'),
        url('../fonts/Arimo-SemiBold.woff') format('woff');
    font-weight: 600;    font-style: normal;}

html{width: 100%;  overflow-x: hidden !important;height: auto;}
body{font-family: 'Arimo'; font-size:15px; font-weight: 400; color: #3e3e3e;  width: 100%; font-variant-ligatures: none;}
*{box-sizing: border-box;}
.text-center{text-align: center;}
.text-right{text-align: right;}
.text-left{text-align: left;}
.display{display: none;}
.mobil{display: inherit;}
.clear{clear: both;}
figure{width: 100%; height: auto; position: relative; display: inline-block; text-align: center;}
strong{font-weight: 700;}
p{margin-bottom: 15px; line-height: 1.4em;}
a{cursor: pointer; text-decoration: none;color: #009d82;}
h1{font-family: 'Arimo'; font-weight: 600; font-size: 1.3em; color: #009d82; margin-bottom: 20px; position: relative; text-transform: uppercase; padding-bottom: 20px;}
h1 span{color: #757575; font-family: 'Roboto Condensed'; font-weight: 400; width: 100%; clear: both; text-transform:none;}
h1::after{content: ""; position: absolute; height: 2px; width: 100px; display: block; background: #009d82; bottom: 0;}
h2{font-family: 'Arimo'; font-weight: 600; font-size: 1.3em; color: #757575; background:url(../images/h2_line.png) no-repeat center bottom; padding-bottom: 15px; margin-bottom: 30px;}
h3{color: #009d82; font-size: 1.3em; margin-bottom: 15px;}
h4{color: #fff; font-size: 1.5em; margin: 30px 0;}

.row{width: 100%; margin: 0 auto; padding: 0 0px; clear: both; position: relative;}
[class*='col-']{padding: 20px 10px; margin: 0; width: 100%; float: none; display: inline-block; position: relative;}
header, main, footer, section{width: 100%; height: auto; display: inline-block; position: relative; padding: 0 0px; clear: none;}

header nav.main-nav{display: none;}
header .menu{width: 30px; height: 30px; display: block; background: url(../images/menue.png) no-repeat center center;}
header .menu-close{width: 20px; height: 20px; display: block; background: url(../images/menue-close.png) no-repeat center center;}
header .mobile_menu_button{background:0px;	padding:24px 0 0 15px;	border:0; float:right;	display:block;}
header .navigation {float:right;}
header .navi {height: 100%; width: 0; position: fixed; top: 0; right: 0; background: #e9f0f4; overflow-x: hidden; transition: 0.5s;	z-index:1001;}
header .navi_bg {content:''; top: 0; width:0%; left: 0%; position: fixed; height: 100%; background:rgba(0,0,0,0.8); z-index:1000;}
header nav.mobil-nav ul {list-style:none; padding:0px 0px 20px 0; margin:0px;	}
header nav.mobil-nav ul li {padding:12px 23px; text-align: left; position: relative; border-bottom:1px solid #fff; display: inline-block; width: 100%;}
header nav.mobil-nav ul li:hover {background: #009d82;}
header nav.mobil-nav ul li:hover a{color:#fff;}
header nav.mobil-nav ul li a {color:#676767; text-decoration: none; display: block; font-weight: 500;}
header nav.mobil-nav ul li a.active{color:#fff;	text-decoration: none; background: #009d82;}
header .navi .closebtn {position: absolute;top: 15px;right: 15px;margin-left: 50px;cursor:pointer;	font-size:22px;}
header .logomobile {text-align:left; padding:10px 0 10px 10px; border-bottom:1px solid #fff; min-width:217px; position:relative; background: #fff;}
header .logomobile img{width: 100%; height: auto;}
header .logomobile a {width:120px;	display: inline-block;}

figure.logo img{max-width: 288px; width: 100%; height: auto; display: inline-block;}


header .main-image{position: relative; background:url(../images/header.jpeg) no-repeat; background-size: cover; width: 100%; height: 250px; display: inline-block;}
header .headline{position: relative; margin: 0 auto; width: auto; display: table; padding: 30px 20px; text-align: center; font-size: 1.3em; font-family: 'Arimo'; font-weight: 400; color: #757575; margin-top: -30px; background: #fff; z-index: 1;}

main section.content{background:#EBEBEB; width: 100%; padding: 100px 0 30px 0; position: relative; margin-top: -55px;}
main section.leistungen{padding: 50px 0;}
main section.leistungen .button{width: 100%; height: 250px; display: inline-block; margin-bottom: 30px;}
main section.leistungen .button figure{width: 100%; height: 250px; background: center center;}
main section.leistungen .button span{width: 100%; text-align: center; padding: 15px 0; background: #3e3e3e; font-family: 'Roboto Condensed'; color: #fff; display: inline-block; margin-top: -4px; position: relative;}
main section.leistungen .button span::before{content: ""; position: absolute; width: 50%; height: 7px; background: #009d82; display: inline-block; top: -4px; left: 25%; right: 25%;}
main section.leistungen .button a{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0;}

main section.leistungen.sub h2, main section.content.sub h2{text-align: left; background:url(../images/h2_line.png) no-repeat left bottom;}
main section.leistungen.sub ul, main section.content.sub ul{margin: 0 0 15px 15px;}
main section.leistungen.sub ul li, main section.content.sub ul li{margin: 0 0 10px 0;}

main section table.table-responsive{width: 100%; border-collapse: collapse; margin-bottom: 20px;}
main section table.table-responsive tr{width: 100%; border-bottom: 1px solid #fff; padding: 7px 0; display: inline-block;}
main section table.table-responsive tr td{width: 100%; display: table;}

main section.contactarea{background: url(../images/contact-area.jpg) no-repeat center right #009d82; background-size: contain; margin-bottom: 50px;}

main .contactarea .col-40{background: #009d82; display: inline-block;}
main .kontakt-form form {	padding:0 0px; color: #fff;}
main .kontakt-form form label {	width:30%;	margin-right:0;	display:block;	float:left;	text-align:left;	padding:5px 0;}
main .kontakt-form form input, main .kontakt-form form textarea {	width:69%;	display:block;	float:left;	border:none;	border:1px dotted #999;	padding:5px;}
main .kontakt-form form a{color: #fff;}
main .kontakt-form form .button {	width:auto !important;	color:#fff !important;	padding:10px 40px 10px 40px; cursor:pointer; font-size:14px; display:inline-block; background:#009d82;	margin-top:20px; border: 1px solid #fff;}
main .kontakt-form form .button {margin-left:30%;}
main .kontakt-form form .button:hover {	background:#347222;}


footer .col-70, footer .col-30{border-left: 1px solid #757575; padding: 5px 10px;}
footer .col-70::before, footer .col-30::before{content: ""; position: absolute; width: 5px; height: 30px; display: block; top: 0; left: -3px; background: #009d82;}
footer .col-70 .col-50, footer .col-70 .col-100{padding: 0 10px;}
footer .line{background: #009d82; height: 25px; display: block; margin-top: 30px;}
footer nav{font-family: 'Roboto Condensed'; font-size: 1.1em;}
footer nav ul{list-style: none;}
footer nav ul li{margin-bottom: 7px;}
footer nav ul li a{color: #3e3e3e;}
footer nav ul li:hover a{color: #009d82;}
footer span.location, footer span.tel, footer span.mail{width: 20px; height: 30px; display: block; float: left; margin-right: 10px;}
footer span.location{background: url(../images/icon_location.png) no-repeat; height: 50px;}
footer span.tel{background: url(../images/icon_telefon.png) no-repeat;}
footer span.mail{background: url(../images/icon_mail.png) no-repeat;}

@media screen and (min-width: 550px){
	main section table.table-responsive{width: 500px; border-collapse: collapse; margin-bottom: 20px;}
	main section table.table-responsive tr{width: 500px; border-bottom: none; padding: 7px 0; display: table-row;}
	main section table.table-responsive tr td{width: auto; display: table-cell;}
	
	footer .display{display: inherit;}
	footer .col-50{width: 50%; float: left;}
}

@media screen and (min-width: 700px){
.display{display: inherit;}
.mobil{display: none;}
[class*='col-']{width: inherit; float: left; display: inline-block;}
	.col-100{width: 100%;}
	.col-80{width: 80%;}
	.col-70{width: 70%;}
	.col-60{width: 60%;}
	.col-50{width: 50%;}
	.col-40{width: 40%;}
	.col-30{width: 30%;}
	.col-20{width: 20%;}
	
	h2{font-size: 1.6em;}
	
	header nav ul{list-style: none;}
	header nav ul li{display: inline-block; float: left;}
	header .mobile_menu_button{display: none;}
	header .logo{width: 100%; float: left; display: inline-block; padding: 10px 15px; text-align: center; clear: both;}
	header .navigation{display: none;}
	header nav.main-nav{width: 100%;padding: 20px 0px 20px 0px; display: inline-block; clear:both;}
	header nav{font-family: 'Roboto Condensed'; font-weight: 400; font-size: 1.2em;}
	header nav ul li{float: left; display: inline-block;}
	header nav ul li a{ text-align: center; color: #676767; font-size: 0.9em; padding: 10px 15px;}
	header nav ul li a:hover{color:#009d82;}
	
	header .main-image{height: 350px;}
	header .headline{font-size: 1.6em;}
	
	main section.content figure{width: 95%; height: 300px; display: inline-block;box-shadow: 0.5rem 0.5rem #009d82;}

}

@media screen and (min-width: 900px){
	header nav ul li a{font-size: 1em; padding: 15px 25px;}
	header .main-image{background-position: center center;}
	main section.leistungen .button, main section.leistungen .button figure{height: 450px;}
	main section.leistungen .button span{font-size: 1.2em;}
}

@media screen and (min-width: 1100px){
	header nav ul li a{font-size: 1.1em; padding: 15px 25px;}
}

@media screen and (min-width: 1210px){
	.row{width: 1200px; margin: 0 auto;}
	header nav{margin-top: 10px;}
	header nav ul li a{font-size: 1.1em; padding: 20px 35px;}		
	header .main-image{height: 550px;}
	}