@charset "utf-8";
/* CSS Document */

body {margin: 0; padding: 0; font-family: 'Lato', sans-serif; font-size: 18px; font-weight: 300; color: #333333; padding-top: 150px;}
img {width: 100%; height: auto; border: 0; display: block;}
h1, h2, h3 {color: #AB8135; font-weight: 400;}
h1 {font-size: 32px; margin: 0 0 40px 0;}
h2 {font-size: 28px; margin: 0 0 30px 0;}
h3 {font-size: 26px; margin: 0 0 30px 0;}
p {margin: 0 0 30px 0; line-height: 26px;}
p:last-child {margin: 0;}
li {line-height: 26px;}
.bild600 {width: 90%; max-width: 600px; margin: 100px auto 0 auto; border: 10px #b99b64 solid;}
.bild600next {width: 90%; max-width: 600px; margin: 100px auto; border: 10px #b99b64 solid;}
.smalhr {height: 4px; border: 0 none; color: #b99b64; background-color: #b99b64; width: 120px; margin: 100px auto;}
.abstand-top {height: 85px; position: absolute; top: -85px; left: 0;}
.breaker {display: none;}
@media screen and (max-width: 450px){
.breaker {display: block;}
}


.header {width: 100%; padding: 20px 0; position: fixed; top: 0; left: 0; z-index: 111111; background-color: rgba(255,255,255,0.95); transition: all 0.8s ease 0s; -webkit-transition: all 0.8s ease 0s; border-bottom: 2px rgba(185,155,100,1.00) solid;}
.header-inner {width: 90%; max-width: 1100px; margin: 0 auto; position: relative;}
.brand {width: 40%; max-width: 250px; transition: all 0.8s ease 0s; -webkit-transition: all 0.8s ease 0s;}
.header-smal {padding: 15px 0; border-bottom: 1px rgba(185,155,100,1.00) solid; transition: all 0.8s ease 0s; -webkit-transition: all 0.8s ease 0s;}
.brand-smal {max-width: 200px; transition: all 0.8s ease 0s; -webkit-transition: all 0.8s ease 0s;}

/*Menu*/
.navi::after, .navi::before {content: ""; display: table;}
.navi::after {clear: both;}
.navi {display: table; position: absolute; bottom: 2px; right: 0; z-index: 888888; font-family: 'Lato', sans-serif;}
.navi ul {list-style-type: none; padding: 0; margin: 0;}
.navi ul li {float: left; padding: 8px 10px; background-color: transparent; position: relative; color: #333333; font-size: 17; margin-left: 4px;}
.navi ul li:hover {border-bottom: 2px #b99b64 solid; color: #AB8135;}
.navi ul li:hover a {color: #AB8135;}
.navi ul li:hover ul li a {color: #333333;}
.navi ul li:hover ul li:hover a {color: #AB8135;}
.navi ul li a {color: #333333; text-decoration: none; font-size: 17;}
.navi ul li a:hover {color: #AB8135;}
.navi ul li ul li {float: none; margin-left: 0; position: relative; font-size: 16px; background-color: #f8f8f8;}
.navi ul li ul li a {font-size: 16px;}
.navi ul li ul, .navi ul li ul li ul {display: none;}
.navi ul li:hover ul {display: block; position: absolute; top: 42px; left: 0px; border-top: 5px transparent solid; width: 230px;}
.navi ul li:hover ul li ul {display: none;}
.navi ul li ul li:hover ul {display: block; position: absolute; top: 0; left: 100%; border-left: 4px transparent solid; border-top: 0;}

.separator::after {font-family: 'FontAwesome'; content: "\f107"; margin-left: 5px;}
.navi ul li ul li:hover {background-color: #b99b64; color: #ffffff;}
.navi ul li.active {border-bottom: 2px #b99b64 solid;}
.navi ul li.active a {color: #AB8135;}
.navi .active a, .navi .active {color: #AB8135;}
.navi ul li.current a {color: #AB8135!important;}

.navi-pos {top: -3px;}

.blue-btn {}
.blue-btn {color: #AB8135!important; border-bottom: 2px #b99b64 solid!important;}
.blue-b-btn a {color: #AB8135!important;}
.navi li.blue-btn a {color: #AB8135;}

.mobil-nav-btn {display: none;}

@media screen and (max-width: 925px){
.navi {display: none;}
.mobil-nav-btn {width: 70%; max-width: 50px; position: absolute; bottom: 2px; right: 0; cursor: pointer; display: block;}
.header {padding: 20px 0;}
.abstand-top {height: 55px; position: absolute; top: -55px; left: 0;}
body {padding-top: 110px;}
}
@media screen and (max-width: 450px){
body {padding-top: 70px;}
}

.mobil-nav-master {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(92,194,190,0.95); display: none; z-index: 898989;}
.mobil-nav-inner {display: table; box-sizing: border-box; padding: 0; height: 70%; margin: 0 auto; overflow-x: hidden;}
.mobil-nav-on {display: block;}
.mobil-nav-inner ul {list-style-type: none;}
.mobil-nav-inner ul li {line-height: 40px; margin-left: -40px;}
.mobil-nav-inner ul li a {color: #ffffff; text-decoration: none; font-size: 26px;}
.mobil-nav-inner .blue-btn {background-color: transparent!important; color: #ffffff!important;}
.mobil-nav-inner .blue-b-btn a {color: #ffffff!important;}

/*Startbild*/
.startbild-master {width: 100%; background-color: #5cc2be;}
.startbild {width: 98%; max-width: 1100px; margin: 0 auto; position: relative;}
.startbild-cont {display: table; position: absolute; bottom: 5%; left: 5%; padding: 20px 25px; background-color: rgba(255,255,255,0.95);}
.startbild-cont h3 {margin: 0 0 10px 0; color: #AB8135; font-display: 26px;}
.startbild-cont h4 {margin: 0; color: #3DADA9; font-size: 22px; font-weight: 700;}
.seit25jahren {width: 70%; max-width: 220px; box-sizing: border-box; border: 10px #ffffff solid; position: absolute; right: 30px; bottom: -70px; background-image: url(../../../images/elemente/open-hg.jpg); background-position: center center; background-size: cover; padding: 15px; color: #ffffff; -webkit-box-shadow: 0px 7px 18px 8px rgba(0,0,0,0.14); -moz-box-shadow: 0px 7px 18px 8px rgba(0,0,0,0.14); box-shadow: 0px 7px 18px 8px rgba(0,0,0,0.14); text-align: center; font-weight: 400;}
.seit25jahren img {display: block; width: 100%; max-width: 170px; margin: 0 auto 15px auto;}
.seit25jahren-mobil {width: 70%; max-width: 220px; box-sizing: border-box; border: 10px #ffffff solid; position: static; right: auto; bottom: auto; margin: 50px auto; background-image: url(../../../images/elemente/open-hg.jpg); background-position: center center; background-size: cover; padding: 15px; color: #ffffff; -webkit-box-shadow: 0px 7px 18px 8px rgba(0,0,0,0.14); -moz-box-shadow: 0px 7px 18px 8px rgba(0,0,0,0.14); box-shadow: 0px 7px 18px 8px rgba(0,0,0,0.14); text-align: center; font-weight: 400;}
.hair {width: 35%; max-width: 350px; position: absolute; top: 34%; left: 0;}
@media screen and (max-width: 750px){
.startbild-cont {left: 5%;}
}
@media screen and (max-width: 670px){
.startbild-cont h3 {font-size: 20px;}
.startbild-cont h4 {font-size: 16px;}
.seit25jahren {display: none;}
.seit25jahren-mobil {display: block;}
.hair {top: 26%;}
}
@media screen and (max-width: 560px){
.startbild-cont h3 {font-size: 16px;}
}
@media screen and (max-width: 500px){
.mobil-nav-btn {width: 30%; max-width: 35px;}
.startbild-cont h3 {font-size: 16px; margin: 0;}
.startbild-cont h4 {font-size: 14px;}
.startbild-cont {padding: 10px 15px;}
}

/*Content*/
.content-master {width: 100%; padding: 100px 0; position: relative;}
.grey {background-color: #f2f2f2;}
.white {background-color: #ffffff;}
.abstand-inner {box-sizing: border-box; padding: 40px 0;}
.shadow {-webkit-box-shadow: 0px 4px 15px 0px rgba(187,187,187,1); -moz-box-shadow: 0px 4px 15px 0px rgba(187,187,187,1); box-shadow: 0px 4px 15px 0px rgba(187,187,187,1);}
.content {width: 90%; max-width: 1000px; margin: 0 auto;}

.icon-cont {content: ""; display: table; clear: left;}
.icon {width: 20%; max-width: 220px; float: left;}
.cont {width: 80%; max-width: 880px; float: left; box-sizing: border-box; padding-left: 100px; border-left: 1px #42769d solid;}
.icon img {width: 90%; max-width: 117px;}
@media screen and (max-width: 600px){
.icon {float: none; display: table; margin: 0 auto 20px auto; width: 35%;}
.cont {float: none; width: 100%; padding-left: 0; padding-top: 20px; border-left: 0 none; border-top: 1px #42769d solid;}
.icon img {margin: 0 auto;}
}

/*Parallax*/
.parallax-unit {background-attachment: fixed; background-position: center center; background-size: cover; width: 100%; height: auto; padding: 100px 0; overflow: hidden; position: relative; z-index: 0; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size:cover; background-repeat: no-repeat;}
.para-icon {padding: 15px; border: 10px #ffffff solid; color: #ffffff; font-size: 20px; font-weight: bold; text-align: center; display: table; margin: 0 auto; background-image: url(../../../images/elemente/open-hg.jpg); background-position: center center; background-size: cover; opacity: 0;}
.para-icon img {display: block; width: 100%; max-width: 90px; margin: 0 auto 15px auto;}
.p1 {background-image: url(../../../images/slider/parallax-2.jpg);}
.p2 {background-image: url(../../../images/slider/parallax-1.jpg);}
.p3 {background-image: url(../../../images/slider/parallax-3.jpg);}

/*teiler*/
.teiler-master::after {content: ""; display: table; clear: left;}
.teiler-left, .teiler-right {width: 50%; float: left; box-sizing: border-box;}
.teiler-left {padding: 40px 40px 40px 0; border-right: 1px #b99b64 solid;}
.teiler-right {padding: 40px 0 40px 40px;}
.teiler-left img, .teiler-right img {border: 10px #b99b64 solid; box-sizing: border-box;}
@media screen and (max-width: 810px){
.teiler-left, .teiler-right {width: 100%; float: none;}
.teiler-left {padding: 0 20px; border-right: 0 none;}
.teiler-right {padding: 0 20px; margin-top: 20px;}
}

/*Footer*/
.footer {width: 100%; padding: 50px 0; background-image: url(../../../images/elemente/footer-hg.jpg); background-position: center center; background-size: 100% 100%; position: relative;}
.footer-inner {width: 90%; max-width: 1100px; margin: 0 auto 30px auto; padding: 0 0 30px 0; border-bottom: 1px #f5f5f5 solid;}
.footer-inner::after {content: ""; display: table; clear: left;}
.footer-title {width: 100%;}
.footer-title h2 {color: #f5f5f5; font-size: 28px;}
.footer-left, .footer-right {float: left; box-sizing: border-box;}
.footer-left {color: #ffffff; padding: 40px; background-color: #5cc2be; margin-right: 4.5454545%; width: 40.9090905%;}
.footer-right {padding: 20px; background-color: #b99b64; width: 54.545454%; position: relative;}
.footer b {font-weight: 700;}
.footer-left hr {height: 1px; border: 0; color: #44ADA9; background-color: #44ada9; margin: 30px 0;}
.footer-right iframe {position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 20px #b99b64 solid; box-sizing: border-box;}

.footer-right .bfQuickMode section input.ff_elem, .footer-right .ff_elem {width: 100%; max-width: 100%!important; height: 40px; line-height: 40px; font-family: 'Lato', sans-serif; color: #333333; border: 0; box-sizing: border-box; padding: 0 0 0 2%;}
.footer-right .bfQuickMode .bfSubmitButton {float: none; border: 1px #f5f5f5 solid; padding: 10px 15px; color: #f5f5f5; background-color: transparent; margin: 10px 0 0 5px; cursor: pointer;}
.footer-right .bfQuickMode .bfSubmitButton:hover {background-color: rgba(255,255,255,0.25);}


.last-line {color: #f5f5f5; text-align: center;}
@media screen and (max-width: 800px){
.footer-left, .footer-right {float: none; width: 100%;}
.footer-left {padding-right: 0;}
.footer-right {padding-left: 0; border-left: 0 none; margin-top: 30px;}
}
@media screen and (max-width: 630px){
.last-line {font-size: 14px;}
}
@media screen and (max-width: 350px){
.last-line {font-size: 12px;}
}

/*Content Lightbox*/
.impressum-btn, .datenschutz-btn {cursor: pointer;}
.impressum-btn:hover, .datenschutz-btn:hover {text-decoration: underline;}
.impressum, .datenschutz {width: 100%; height: 100%; background-color: rgba(92,194,190,0.95); position: fixed; top: 0; left: 0; display: none; z-index: 898989;}
.impress-on, .datenschutz-on {display: block;}
.close-btn-impress, .close-btn-datenschutz, .close-btn-menu {width: 80%; max-width: 40px; display: table; margin: 5% auto; cursor: pointer;}
.imda-inner {width: 90%; max-width: 1100px; background-color: #ffffff; box-sizing: border-box; padding: 0 40px; height: 60%; margin: 0 auto; overflow-x: hidden;}
.box-content {padding: 40px 0;}
.box-content hr {height: 1px; border: 0; color: #5cc2be; background-color: #5cc2be; margin: 30px 0;} 
.box-content a {color: #5cc2be; text-decoration: none;}
.box-content a:hover {color: #b99b64;}
@media screen and (max-width: 450px){
.imda-inner p {font-size: 16px;}
.imda-inner h1 {font-size: 20px;}
.imda-inner h2 {font-size: 18px;}
.imda-inner h3 {font-size: 16px;}
}
@media screen and (max-width: 700px){
.imda-inner {height: 80%;}
}
@media screen and (max-height: 450px){
.imda-inner {height: 70%;}
}

.job {width: 100%; padding: 20px; box-sizing: border-box; background-color: #5cc2be; color: #ffffff;}







