@charset "utf-8";
.flexible-content-kachel{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.part{
	flex: 1 0 10%;
	margin:5px;
	width: 100px;
}
body, html{
	margin:0;
	padding: 0;
	font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, 'sans-serif';
	scroll-behavior: smooth;
}

ul .wpml-ls-menu-item a{
	display:inline !important;
}

.wrapper{
	width: 1170px;
	margin: 0 auto;
}

#schaubild{
	width:100%;
	float:left;
	position: relative;
}

#jobs h2{
	font-size:36px;
	color: #333333;
	font-weight: 200;
	text-align: center;
}

#jobs h2::after{
	content: "";
	display: block;
	margin:0 auto;
	width:50%;
	padding-top:20px;
	border-bottom: 2px solid #87D300;
}

#schaubild img{
    width:100%;
}

.marke-content img{
    width:23px!important;
}

.marke{
	position: absolute;
}

.marke-content{
	background-color:#b3acac;
	width:205px;
    padding: 10px 15px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s;
    left:40px;
    bottom:-50px;
    position: absolute;
    z-index: 1;
}

.desktop{
    display: block;
}

strong{
	color:#87D300;
}

.abteil strong{
	color:#575757;
}

.mobile{
    display: none;
    
}

.one{
    top:11%;
    left:13%;
}

.sixteen{
	top:17%;
	left:14%;
}

.two{
    left:20%;
    top:17%;
}

.three{
    left:19%;
    top:25%;
}

.four{
    left:30%;
    top:21%;
}

.five{
    left: 27%;
    top:30%;
}

.six{
    left:33%;
    top:35%;
}

.seven{
    left:33%;
    top:45%;
}

.eight{
    left:42%;
    top:50%;
}

.nine{
    left:46%;
    top:62%;
}

.ten{
    left:55%;
    top:37%;
}

.eleven{
    left:56%;
    top:50%;
}

.twelve{
    left:59%;
    top:60%;
}

.thirteen{
    left:57%;
    top:21%;
}

.fourteen{
    left:69%;
    top: 15%;
}

.fifteen{
    left:71%;
    top:25%;
}

.marke img:hover{
    filter: grayscale(100%);
}

.marke-content a{
    color:white!important;
    text-decoration: none;
    font-weight:600;
}

.toggle-marke{
    visibility: visible;
    opacity: 1;
}

.marke-content img{
    position: relative;
    left:68%;
    transition:all 0.2s;
}

.marke-content p{
    font-size:15px;
    font-weight: 700;
    color:white;
}

.pulseAnim {
    display: block;
    border-radius: 50%;
    background:#87D300;
    cursor: default;
    box-shadow: 0 0 0 rgba(135, 211, 0, 0.4);
    animation: pulseAnim 2s infinite;
    width:33px;
    height: 33px;
}

@keyframes pulseAnim {
    0% {
        box-shadow: 0 0 0 0 rgba(209, 209, 209, 0.8);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(209, 209, 209, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(209, 209, 209, 0);
    }
}

.headline{
	float:left;
	width: 100%;
	padding: 0;
	margin:0;
}
.produkt ul{
	color:#575757;
	font-size: 16px;
}
.headline h1{
	padding-bottom:0;
	margin-bottom: 0;
}
h1{
	font-size: 37px;
	color: #333333;
	font-weight: 200;
	text-align: center;
}
h1:after{
	content: "";
	display: block;
	margin: 0 auto;
	width:50%;
	padding-top:20px;
	border-bottom: 2px solid #87D300;	
}
h2{
	font-size:27px;
	font-weight: 100;
}
#produkte h2:after, #info h2:after{
	content: "";
	display: block;
	padding-top:20px;
	border-bottom: 2px solid #87D300;
	margin:0;
	width:25%;
}

p{
	font-size: 16px;
	color:#575757;
}
.wrap ul li{
	font-size: 16px;
	color:#575757;
}
.wrap{
	width:80%;
	margin: 0 auto;
}
.green-bar{
	background-color: #87D300;
	float: left;
	width: 100%;
	height: 50px;
	transition: all 0.4s;
}
.green-bar a{
	color:white;
	text-decoration: none;
}
header{
	width: 100%;
	float: left;
	position: fixed;
	height: 140px;
	background-color: white;
	opacity: 1;
	z-index: 999;
	top:0;
}
nav{
	float:left;
	width: 100%;
	height: 90px;
}
nav ul{
	width:80%;
	float:left;
	padding: 15px 0;
	text-align: right;
}
nav ul li{
	list-style-type: none;
	display: inline;
	position: relative;
}

nav ul li a{
	text-decoration: none;
	color:black;
	padding:10px;
	font-weight:600;
	transition: all 0.2s;
}
nav ul li ul{
	display: none;
	position: absolute;
	text-align: left;
	width:190px;
	float:left;
	padding: 15px 0;
	padding-top:38px;
	left:0;
}
.sub-menu li:first-of-type{
	border-bottom:1px solid darkgrey;
	border-top:4px solid #87D300;
}
nav ul li ul li{
	background-color:#E6E6E6; 
}
nav ul li ul a{
	font-weight:200;
	color:#575757;
}
nav ul li ul li{
	display: block;
	padding:5px 0;
	border-bottom:1px solid darkgray;
}
nav ul li:hover ul{
	display: block;
}
.logo{
	width:20%;
	float:left;
	padding:15px 0;
}
.contact{
	padding:14px 0;
}
.contact img{
	padding:0 10px;
}
.contact a{
	padding: 0;
}
nav a:hover{
	color:#87D300;
}
.slider{
	width:100%;
	float:left;
	margin-top:140px;
	overflow: hidden;
}
.slider img{
	width: 100%;
}
.content{
	width: 100%;
	float:left;
	margin: 25px 0;
}

.content:last-of-type{
	margin-bottom: 0;
}
.flex-container{
	display: flex;
	justify-content: space-around;
	flex-wrap: nowrap;
}
.abteil{
	text-align: center;
	position: relative;
	padding-bottom:35px;
}
.abteil img{
	filter: grayscale(0);
	transition: all 0.4s;
	width:100%;
}
.abteil img:hover{
	filter: grayscale(100%);
}
.abteil:hover strong{
	text-decoration: underline;
}
.button {
	background-color:#333;
	color:white!important;
	text-decoration: none;
	padding: 8px;
	border-radius: 3px;
	transition: all 0.4s;
	position: absolute;
	bottom: 0;
	display: block;
	left:12%;
	width:140px;
}

.button:hover{
	background-color:black;
}
.hide{
	height:0;
}
.hidden{
	display: none;
}
.scroll{
	height: 90px;
	opacity: 0.9;
}
.divider{
	background-color:#87D300;
	height: 2px;
	margin: 0 auto;
	width:50%;
}
.text p{
	margin:50px 0 75px 0;
}
#produkte{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.pr-showcase:first-of-type{
	width:100%;
}
.pr-showcase{
	background-color:#E6E6E6;
	display: flex;
	justify-content: space-between;
	margin:50px 0;
	flex-wrap: wrap;
	width:45%;
}
.pr-showcase:first-of-type .pr-showcase-content{
	width:50%;
	padding:50px 0;
}
.pr-showcase-content{
	width: 100%;
}
.pr-showcase-content img{
	width: 100%;
	padding-top: 15px;
}

#produkte a, #info a, .blog-verweis a, .blog-content a{
	color:white!important;
	background-color:#87D300;
	text-align: center;
	padding:10px;
	text-decoration: none;
	transition: all 0.7s;
	border-radius: 3px;
	display:block;
	margin:20px auto;
	width:130px;
}
#produkte a:hover, #info a:hover, .blog-verweis a:hover, .blog-content a:hover{
	background-color:#82b440;
}
.blogartikel a{
	color:#87D300;
	transition: all 0.4s;
	text-decoration: none;
}
.blogartikel a:hover{
	color:#82b440; 
}
.blog ol li, .blogartikel ol li{
	color:#575757;
	font-size: 16px;
}
.blogartikel{
	margin-top:240px;
	padding-bottom: 144px;
}

#info{
	display: flex;
	margin:100px 0;
}
.flex-content{
	width:50%;
}
.flex-content img{
	width: 100%;
}
#news{
	background-color:#E6E6E6;
	float: left;
	width:100%;
	padding-bottom: 75px;
}
#articles{
	display: flex;
	justify-content: space-between;
	margin:75px 0;
}
.article{
	width:25%;
	background-color:white;
	-webkit-box-shadow: 2px 2px 16px 4px rgba(0,0,0,0.1); 
	box-shadow: 2px 2px 16px 4px rgba(0,0,0,0.1);
}

.article p:hover{
	color:#87D300;
}
.article-pic{
	overflow: hidden;
	background-color: #87D300;
}
.article-pic img{
	width:100%;
	object-fit: cover;
	transition: all 0.4s;
}
.article:hover .article-pic img{
	transform: scale(1.1)
}
.article p, .article a{
	font-size:21px;
	text-decoration: none;
	color: #333333;
	font-weight: 100;
	transition: all 0.4s;
}
footer{
	float: left;
	width:100%;
	background-color: #282828;
	height: 145px;
}
.footer-content p{
	color:white;
}
.footer-content a, .content-side a, .content a{
	color:#87D300;
	text-decoration: none;
}
.footer-content a:hover, .content-side a:hover{
	text-decoration: underline;
}
input{
	width: 300px;
	margin:20px 0;
}
.optional input{
	width:100%;
	margin:10px 0;
	padding: 5px 0 5px 5px;
}
textarea{
	width: 100%;
	padding: 0;
	margin: 5px 0;
}
.field input, textarea, .optional input{
	border: gray 1px solid;
	border-radius: 3px;
	background-color: #f0f0f0;
	padding:5px;
	
}
.field input{
	width: 90%;
}
.field{
	width:50%;
	float: left;
}
.nachricht{
	width: 100%;
	float: left;
}
.wpcf7-submit{
	position: relative;
	margin: 0 auto;
	display: block;
	padding: 3px;
	width:75px;
}
#scroll-top{
	position: fixed;
	width:100%;
	top:90%;
	text-align: right;
}
#scroll-top img{
	position: relative;
	right: 150px;
	top:0;
	transition: all 0.4s;
}
.produkte{
	width:100%;
	float:left;
}
.produkt{
	float: left;
	width: 100%;
}
.content-side{
	float:left;
	width:50%;
}
.product-fw{
	width:100%;
	float:left;
	margin:75px 0;
	padding:20px 0;
}
.product-fw:nth-child(even){
	background-color:#f7f7f7;
}
/*
.product-fw:after{
	content:"";
	display: block;
	width:20px;
	height: 20px;
	background-color:#fff;
	left:50%;
	position: relative;
	transform: rotate(45deg);
	top:337px;
}
*/
#referenzen{
	width: 100%;
	float:left;
	padding-bottom:75px;

}
.tafel{
	width:100%;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.referenz{
	margin:25px;
	width:125px;
}

.referenz img{
	filter: grayscale(0);
	transition: all 0.4s;
	width: 100%;
}
.referenz img:hover{
	filter: grayscale(100%);
}
#scroll-top img:hover{
	top:-10px;
}
.service a{
	color:#575757;
	text-decoration: none;
	font-weight: bold;
}
#jobs{
	width: 100%;
	float: left;
	padding-bottom: 75px;
}
#jobs h3{
	text-align: center;
	color:white;
	background-color:#87D300;
	cursor: pointer;
	padding: 10px 0;
	margin: 10px 0;
	transition: all 0.4s;
}
#jobs h3:hover{
	background-color:#6DAB00;
}
.article-toggle{
	max-height: 0;
	overflow: hidden;
	transition: all 0.4s;
}
.toggle{
	max-height: 1500px;
}
#jobs a{
	color:#87D300;
	text-decoration: none;
	transition: all 0.4s;
}
#jobs a:hover{
	color: #82b440;
}
.service a{
	text-decoration: none;
}
.abteilungen{
	float:left;
	width: 100%;
}
.abteilungen a{
	text-decoration: none;
}
.blog{
	background-color: #E6E6E6;
}
.blog{
	width: 100%;
	float:left;
	margin:20px 0;
}
.blog-img{
	width:20%;
	float:left;
	padding:15px 0 15px 15px;
}
.blog-img img{
	width:100%;
	object-fit: cover;
}
.blog-content{
	width: 70%;
	float:left;
	margin-left: 30px;
}
.blogartikel h3{
	text-align: center;
	color:#575757;
	font-size:20px;
}
.blogartikel img{
	max-width:300;
	height: auto;
	padding: 0 20px 20px 0;
	float: left;
}

/*
h3:after{
	content: "";
	display: block;
	margin: 0 auto;
	width:50%;
	padding-top:20px;
	border-bottom: 2px solid #87D300;	
}
*/

#metaslider_40 ul{
	margin:0;
	padding:0;
}
/*
.current_page_item > a{
	color:#87D300;
}
*/

.current_page_ancestor > a{
	color:#87D300;
}

.current_page_item > a{
	color:#87D300;
}

.nav-btn{
	position: fixed;
	width: 45px;
	top:80px;
	height: 25px;
	left:90%;
	transition: all 0.4s;
	display: none;
	cursor: pointer;
}
.nav-btn img{
}

.hops{
	top:20px;
}
@media only screen and (max-width:1170px){
	.wrapper{
		width:970px;
	}
	.product-fw img{
		width:100%;
		height: auto;
	}
}
@media only screen and (max-width:970px){
	#scroll-top img{
		right:60px;
	}
	nav ul li ul{
		width:100%;
	}
	.layer{
		width: 550px!important;
	}
	.layer p{
		font-size: 2em!important;
	}
	.layer span{
		font-size: 2em!important;
	}
	.metaslider .msHtmlOverlay .layer *{
		line-height: 1em!important;
	}
	nav ul li ul li{
		padding: 5px 0 0 10px;
	}
	.wrapper{
		width:768px;
	}
	.scroll{
		opacity: 0.95;
	}
	header .wrapper{
		width:90%;
	}
	.nav-btn{
		display: block;
	}
	.logo{
		padding:10px 0;
	}
	.scroll{
		height:65px;
	}
	nav ul li{
		display: block;
		padding: 10px 0;
	}
	nav ul{
		background-color: #282828;
		text-align: left;
	}
	nav ul li a{
		color:white;
		font-weight: bold;
		font-size: 16px;
	}
	.metaslider .flexslider{
		margin:0!important;
	}
	nav ul li ul{
		display: block;
		margin-left:0;
	}
	nav ul li ul{
		display: block;
		margin-left:0;
		background-color: #282828;
		float:none;
		position: initial;
		padding: 5px 0;
	}
	.nav{
		position: relative;
		left:1000px;
		height: 100vh;
		top:74px;
		overflow:scroll;
		transition: all 0.4s;
	}
	.top-small{
		top:49px;
	}
	.slide-in{
		left:430px;
	}
	.article p, .article a{
		font-size: 15px;
	}
}

@media only screen and (max-width:875px){
    .mobile{
        display: block;
    }
    
    .desktop{
        display: none;
    }
    
    .marke{
        position: initial;
        width:45%;
        -webkit-box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.05);
        -moz-box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.05);
        box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.05);
        padding:5px;
        margin:10px 0;
    }
	
	.marke-content img{
		margin-top:10px;
	}
    
    .marke-content{
        position: initial;
        visibility: visible;
        opacity: 1;
        background-color: transparent;
        float:left;
        padding: 5px;
        width: 100%;
    }
    
    .pulseAnim{
        margin:0 auto;
    }
    
    .marke-content p{
        color: #575757;
        font-size: 15px;
        margin: 0;
    }
    
    .mobile{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    
    .marker-point{
        float:left;
        width:100%;
    }
}

@media only screen and (max-width:800px){
	.slide-in{
		left:350px;
	}
	.content{
		margin:25px 0;
	}
	.blogartikel{
		margin-top:125px;
	}
}
@media only screen and (max-width:768px){
	p, .bottom{
		font-size:14px;
	}
	h1{
		font-size: 30px;
	}
	#produkte a, #info a, .blog-verweis a, .blog-content a{
		padding: 5px;
		font-size:14px;
	}
	h2{
		font-size:22px;
	}
	
	.wrap{
		width:95%;
	}
	
	.product-fw{
		margin: 15px 0;
	}
	.wrapper{
		width:95%;
	}
	.content-side{
		width: 100%;
	}
	.abteil{
		width:100%;
		float:left;
		margin:15px 0;
	}
	.flex-container{
		display:block;
	}
	.abteil img{
		width:25%;
	}
	.content{
		margin:0;
	}
	.blogartikel{
		margin-top:125px;
	}
	.article p{
		font-size: 12px;
	}
	.button{
		font-size:12px;
		width:115px;
		position: relative;
		margin: 0 auto;
		left:0;
	}
	footer{
		margin-top: 75px;
		height:260px;
	}
	.footer-content{
		width:100%;
		float:left;
		text-align: center;
	}
}
@media only screen and (max-width:720px){
	.slide-in{
		left:200px;
	}
}
@media only screen and (max-width:600px){
	.blog-img {
		width:100%;
		padding:15px 0 0 0;
	}
	.blog-content{
		width:100%;
		margin-left: 0;
	}
	nav ul li ul a{
		font-weight: 400;
	}
	.layer{
		display: none!important;
	}
	.layer span{
		font-size:2.5em!important;
	}
	.pr-showcase:first-of-type .pr-showcase-content{
		width:100%;
		padding: 25px 0 0 0;
	}
	.pr-showcase{
		display:block;
		width:100%;
		margin:25px 0;
	}
	.flex-content{
		width:100%;
	}
	#info{
		display:block;
		margin:25px 0;
	}
	#articles{
		display: block;
	}
	.article{
		width:100%;
		margin: 25px 0;
	}
	.article p{
		font-size:16px;
		padding: 10px 0;
	}
	.green-bar a{
		font-size:12px;
	}
	h1{
		font-weight: 400;
		color: #575757;
	}
	
}
@media only screen and (max-width:500px){
	.slide-in{
		left:115px;
	}
	.nav-btn{
		left:85%;
	}
	#scroll-top img{
		right:13px;
	}
}
@media only screen and (max-width:400px){
	.slide-in{
		left:35px;
	}
	.blogartikel img{
		width:100%;
		padding:0 0 10px 0;
	}
	
}