/* CSS Document */
@font-face {
	font-family: 'TheSans';
	src: url('/fonts/TheSansOffice5_.eot');
	src: local('☺'), url('/fonts/TheSansOffice5_.woff') format('woff'), url('/fonts/TheSansOffice5_.ttf') format('truetype'), url('/fonts/TheSansOffice5_.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
* {
	margin: 0;
	padding: 0;
}
a img {
	border: none
}
html {	height: 100.1%;
}
body  {
	color: #555;
	padding: 0px;
	font: 1em/140% 'TheSans', Verdana, 'Geneva, sans-serif';
}

 table {
	color: #555;
	padding: 0px;
	font: 1em/140% 'TheSans', Verdana, 'Geneva, sans-serif';
}

/********************** HEADER ********************************/
.headerAround {
	width: 100%;
	height: 91px;
	border-bottom: 1px solid #ccc;

	top: 0;
	z-index: 1000;
	background-color: #fff
}
        @media only screen and (max-width: 520px) {.headerAround {height: 79px; position:relative}}
.header {
	max-width: 1120px;
	margin: 0 auto;
	height: auto;
	position: relative;
	background-image: url(img/header_BG.png);
	background-position: top right;
	background-repeat: no-repeat;
    background-size: auto 91px
}
        @media only screen and (max-width: 520px) {.header {background-size: auto 79px}}
        @media only screen and (max-width: 320px) {.header {background-size: auto 0}}

.header img {width: 180px; margin: 15px 0 15px 40px}
        @media only screen and (max-width: 520px) {.header img {width: 160px; margin: 12px 0 12px 22px}}



@media only screen and (max-width: 660px) {
	.headImage { width:100%;}

	.Textbig {font-size:1.5em;} }


.headimageAround {max-width:1920px; height:auto; position:relative; background-color: #9dd5e8; z-index: 1; margin:0 auto}
.headimageAround img {width:100%;}


.contentWhiteHeader {max-width:800px; margin:-660px auto 0 auto; height:auto; position:relative; z-index: 100; padding:50px 80px; background-color: rgba(255,255, 255, 1); }
@media only screen and (max-width:1650px) {.contentWhiteHeader {margin:-540px auto 0 auto;}}
@media only screen and (max-width:1200px) {.contentWhiteHeader {margin:-400px auto 0 auto;}}
@media only screen and (max-width:1024px) {.contentWhiteHeader {max-width:760px; margin:-250px auto 0 auto; padding:40px; }}
@media only screen and (max-width:920px) {.contentWhiteHeader {max-width:920px; margin:0px auto 0 auto; padding:40px; }}
@media only screen and (max-width:600px) {.contentWhiteHeader { padding:25px; }}



.img-right {float:right;  width:350Px}

@media only screen and (max-width:920px) { .img-right {float:none; width: 100%}}



/********************** Robust Bullets mit icons ********************************/

.BBoxAround {width: 100%; clear: both; margin:1em 0 0.5em 0px;  display: flex;  align-items: stretch; line-height: 120%;}
.BBox {width: 34%; margin:0 20px 0 0; border:2px solid #d0f3ff; padding: 10px 15px; text-align: center}

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

@media only screen and (max-width: 980px) {
    .BBoxAround {align-items: flex-start stretch; flex-wrap: wrap; margin:1em 0 0em 0px;  }
    .BBox {width: 27%!important; float:left; margin:0 8px 10px 0; }}

@media only screen and (max-width:800px) {
    .BBox {width: 41%!important; float:left; margin-bottom: 1em}}

@media only screen and (max-width:620px) {
    .BBox {width: 99%!important; float:left; margin-bottom: 1em}}

@media only screen and (max-width: 480px) {
    .BBox {width: 99%!important; float:left; margin-bottom: 1em}}


.BBox p {font-size:90%; margin-bottom: 3px}
.BBox .Yline {height:2px; background-color: #ffcb00; margin:1em 35%}
.BBox h3 {
	font: normal 100%/120%  'TheSans', Verdana, 'Geneva, sans-serif'; margin: 1.3em 0 0 0; color:#00a9e0
}

.icon {width:100px; height: 100px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background-color: #aae9ff; margin:1em auto;  text-align:center}
.icon img {width:50px; margin-top:25px}

/********************** BUTTON BLUE ********************************/

.buttonBlueFooter {
	width: 60px;
	margin: -50px auto 10px auto;
	height: auto;
	position: relative;
	z-index: 10
}
.buttonBlueFooter img {
	width: 100%;
}

@media only screen and (max-width: 640px) {
.buttonBlueFooter {
	width: 60px;
	margin: -36px auto 0 auto;
}
}


/**********************  Bucket Horizontal ********************************/
.bucket-hori {
	width: 100%;
	height: 146px;
	margin: 0px 0px 10px 0px;
	border: 1px solid #e6e6e6;
	font: normal 90%/160% Verdana, 'Geneva, sans-serif';
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.bucket-hori .bild {
	height: 146px;
	float: left;
	margin-right: 20px;
	-webkit-border-radius: 10px 0px 0px 10px;
	-moz-border-radius: 10px 0px 0px 10px;
	border-radius: 10px 0px 0px 10px;
}
.bucket-hori p, .bucket-hori h4 {
	padding: 15px 10px 0px 10px;
	font-weight: lighter
}
.bucket-hori h4 {
	color: #00a9e0
}
/********************** CONTENT ********************************/


.content {
	max-width:800px;
	margin: 0 auto;
	height: auto;
	position: relative;
	z-index: 0;
	padding: 40px 40px 30px 40px;

}

.content02 {
	width: 65%;
	float: left;
	margin-top: -10px;
	min-height: 250px!important;
	height: auto !important;
	overflow: auto;
	overflow-x: hidden;
}
.content02 ul, .content02 ol {
	margin: 0 0 5px 35px;
}
.content02 ul li, .content02 ol li {
	font: 11px/140% Verdana, 'Geneva, sans-serif';
	margin-bottom: 8px;
	
}
.content02 ul li ul, .content02 ol li ol {
	margin: 8px 0 8px 35px
}





.contentGreenAround {
	width: 100%;
	height: auto;
	position: relative;
	background-color: #009a49;
	margin-top: 0px
}


.kontakt {
	max-width: 1040px;
	margin: 0 auto;
	min-height: 80px;
	position: relative;
	z-index: 0;
	padding: 70px 40px 40px 40px;
	color: #fff
}
.weiss {color:#fff}
a.weiss:hover {color:#fff}


.contact-button {color:#fff; display: block; border:1px solid #fff; 
	moz-border-radius: 15px;
-webkit-border-radius: 15px; border-radius: 15px; width:160px; text-align:center; float:right; padding:3px 0px; margin-right:220px; }
a.contact-button:link {background: none}
a.contact-button:hover {color:#009a49; display: block; background: #fff; text-decoration:none;}

@media only screen and (max-width: 980px) {
.contact-button { margin-right:0px;
}
	.kontakt {text-align: left}
}
@media only screen and (max-width: 480px) {
.contact-button { width:100% ; margin-top:10px
}
}

.homeTAB td {
	border-top: 1px dotted #d7d7d7;
	padding: 15px 0 10px 0
}


.rightarea {
	width: 220px;
	padding-left: 0px;
	float: right
}

.bucket {
	width: 220px;
	color: #555;
	margin-bottom:10px;
}

.bucket img {border:1px solid #ccc}



@media only screen and (max-width: 768px) {
	
	.content02 {width:100%}
		
	.rightarea {
	width: 100%;
	padding-left: 0px;
	float:none;
}

	.bucket {
	width: 44%;
    float:left;
	margin-bottom: 30px;
	margin-right: 30px;
}
	.bucket img {width:100%}

} 




/**************************************** Buckets*************************/

.BUCKETbox {width: 31%;	float: left}

.BUCKETbox a:hover, .BUCKETbox a:active {text-decoration: none}


.BUCKETbox.space {
	margin-right: 3%;
}
.BUCKETicon {
	width: 100%;
	margin: 0 0 0.7em 0;
	border: 1px solid #ccc;
}
.BUCKETicon img {
	width: 100%
}
.lineCONT {
	height: 1px;
	border-bottom: 1px dotted #ccc;
	margin: 1em 0 ;
	clear: both
}

@media only screen and (max-width:768px) {.bucket-hori .bild {  display: none}	
.BUCKETbox.space {margin-bottom: 4%}
.BUCKETbox {width: 100%;float: left}
.BUCKETicon {width: 98%;}
.BUCKETicon img {width: 100%}}

@media only screen and (max-width: 520px) {.BUCKETicon {width: 100%;margin: 0 1em 1em 0;}}

/******************************************************/

a, a:visited {
	color: #00a9e0;
	text-decoration: none;
}
a:hover {
	color: #00a9e0;
	text-decoration: underline
}

h1 {
	color: #009a49 ;
	font: normal 240%/140% 'TheSans', Verdana, 'Geneva, sans-serif';
	margin: 0 0 0.5em 0
}

h2 {
	color:#00a9e0 ;
	font: normal 140%/120% 'TheSans', Verdana, 'Geneva, sans-serif';
	margin: 0 0 1em 0
}

h3 {
	color: #009a49;
	font: normal 110%/120% 'TheSans', Verdana, 'Geneva, sans-serif';
	margin: 0 0 0.5em 0
}
h4 {
	color: #009a49;
	font: normal 150%/120% 'TheSans', Verdana, 'Geneva, sans-serif';
	margin: 0 0 1em 0
}
p {
	margin-bottom: 1.2em
}


sub {
	vertical-align:0px;
	font-size: 0.7em; line-height:0
}

p sup { line-height:12px}

ul.halia {padding:0px; list-style: none}
ul.halia li  {padding:5px 3px 0.5em 10px;  }
ul.halia li::before {content: "•"; color:#009a49; display: inline-block; width: 0.8em;
  margin-left: -1em;}

ul.neutralisation {margin:0; ppadding:0px; adding:0 0 0 20px; list-style: none;}
ul.neutralisation li  {padding:10px 0 0.5em 20px; background: #d9f4fd;  color:#333}
ul.neutralisation li.bg {background:#e9f9ff !important}
ul.neutralisation li::before {content: "\2713"; color:#666; display: inline-block; width: 1em;
  margin-left: -1em; font-weight: bold}

ul.CO2 {margin:0 ;list-style: none;  }
ul.CO2 li  {padding:10px 0 0.5em 20px; border-bottom:1px solid #d0f3ff; }
ul.CO2 li::before {content: "✔"; color:#d0f3ff; display: inline-block; width: 1.3em;
  margin-left: -1em;}



@media only screen and (max-width: 980px) {
ul.neutralisation li::before {content: "\2713" !important; color:#00a9e0; display: inline-block; width: 1em;
  margin-left: -1em;}
}

@media only screen and (max-width: 640px) {
ul {
	margin: 0 0 1.5em 0;
	width: auto
}
}

@media only screen and (max-width: 520px) {
	.content {padding: 40px 22px}
	.bucket {width: 99%;}
	
}

/******************************************************/
.green {
	color: #009a49
}
.grey {
	color: #4d4f53
}
.blue {
	color: #00a9e0
}
.small {
	font-size: 90%
}
.big {
	font-size: 120%
}
.greylight {
	background: #f1f1f1
}
sup {vertical-align: 5%}
/********************** footer **************************/



.bottomimage {width:100%; margin: 0 0 2em 0 }

.footerAround {
	
	width: 100%;
	height: auto;
	position: relative;
background-color: #f1f1f1;
	margin-top: -46px;
}
.footer {
	max-width: 1040px;
	margin: 0 auto;
	position: relative;
	padding: 66px 40px 40px 40px;
	font-size: 80%;
		background-color: #f1f1f1;
	text-align: center

}
.line {
	height: 1px;
	width: 100%;
	border-bottom: 1px solid #ccc;
	margin: 1em 0
}
#socialmedia a, #socialmedia a:visited {
	color: #838383;
	text-decoration: none;
}
#socialmedia a:hover {
	color: #838383;
	text-decoration: underline
}
#socialmedia img {
	margin-right: 3px;
	vertical-align: -2px
}



/****************** slider startseite  ***********/

.sml_mrgn {
	margin-top:-5px;
}

.bsci {
	margin: 37px 0px 10px 0px;
	clear:both;
	color: #000;
}

 .slider {
	position:relative;
}
.slidebanner {
	height:245px;
	width:100%;
	margin:auto;
	display:none;
}
.slideshow {
	height:245px;
	width:100%;
	margin:0px 0;
	display:none;
}
.slideshow img {
	border:0;	
	width:100% !important;
	height:272px !important;

}


@media only screen and (max-width: 900px) {
.slideshow img {
	border:0;	
	width:100% !important;
	height:250px !important;

}
}

@media only screen and (max-width: 680px) {
.slideshow img {
	border:0;	
	width:100% !important;
	height:320px !important;

}
}

@media only screen and (max-width: 520px) {
.slideshow img {
	border:0;	
	width:100% !important;
	height:270px !important;

}
}

.sliderNav {
	position: absolute;
	top: 210px;
	right: 20px;
	z-index: 25;
}
.sliderNav a {
	color:#fff;
	font-size:.8em;
	/*border:1px solid #5c5c5c;*/
	background:#5c5c5c;
	text-decoration:none;
	margin:0 3px;
	padding:3px 6px;
}
.sliderNav a.activeSlide {
	
	background:#009a49;
}
.sliderNav a:focus {
	outline:none;
}


.validator {
	display: none;
}

/********************** Cookie Info ********************************/

#cookiebar {
	position: fixed;
	right:0px;
	background: #fff;
	border:10px solid #e1e1e1;
	height:255px; 
    width:350px;
	bottom: 0;
	text-align: left;
	color: #666666;
	padding: 15px;
	z-index: 19999;
	box-sizing: border-box;
}

#cookiebar p {
	font-size: 14px;
	margin-bottom: 0;
	line-height: 1.6em;
}

#cookiebar a { color: #009dde; text-decoration: none }
#cookiebar a:hover { color: #009dde; text-decoration: underline  }

#cookiebar #cookieOK { 
	padding: 3px 10px;
	background-color: transparent;
	border: 1px solid #fff;
	color: #009dde;
	font-size: 14px;
	margin-left: 0px;
	margin-top: 10px;
	padding-bottom:10px;
	cursor: pointer;
}

#cookiebar .closeBuck {width:30px; float: right; cursor: pointer; position: fixed;
	right:0px;	bottom: 0;padding-right:10px; padding-bottom:225px}