/* roboto-100 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: url('../fonts/roboto-v20-latin-100.eot'); /* IE9 Compat Modes */
    src: local('Roboto Thin'), local('Roboto-Thin'),
         url('../fonts/roboto-v20-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/roboto-v20-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/roboto-v20-latin-100.woff') format('woff'), /* Modern Browsers */
         url('../fonts/roboto-v20-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/roboto-v20-latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
  }
  
  /* roboto-300 - latin */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
    src: local('Roboto Light'), local('Roboto-Light'),
         url('../fonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
         url('../fonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
  }
  
  /* roboto-regular - latin */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Roboto'), local('Roboto-Regular'),
         url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
  }
  

html, body, div, p, h1, h2, h3, span, a, table, td, form, input, textarea
						{ margin: 0px; padding: 0px; font-family: "Roboto", sans-serif; color: #000; line-height:1.5;}


h1						{ font-size: 40px; font-weight: 200; color: #006700; margin: 5px 0px 25px 0px; text-transform: none; }
h3						{ font-size: 26px; font-weight: 300; color: #333; margin: 20px 0px 20px 0px; }
h2						{ font-size: 32px; font-weight: 300; color: #006700; margin: 10px 0px 20px 0px; text-transform: none; }
span					{ font-variant:small-caps;}
p                       { margin-bottom: 1rem;}
.centered				{ text-align: center; }						  
  
body 					{ width: 100%; height: 100%; background-color: #000; } 

im						{ vertical-align: middle; }
	img.img-right	{float: right; display: block; margin: 0 0 1rem 1rem;}
	
div						{ box-sizing: border-box; }

input, textarea, select	{ -webkit-appearance: none;	border-radius: 0; }


.clear					{ display: block; clear: both; }
.rounded				{ -moz-border-radius: 2px; border-radius: 2px; -webkit-border-radius: 2px; }
.rounded_oben			{ -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; 
						  -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; }
.rounded_unten			{ -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; 
						  -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; }
.rounded_big			{ -moz-border-radius: 10px; border-radius: 10px; -webkit-border-radius: 10px; }

.shadow					{ -moz-box-shadow: 0px 2px 10px #000; -webkit-box-shadow: 0px 2px 10px #000; box-shadow: 0px 2px 10px #000; } 
.shadow		    		{ /*IE6 hack*/  _border: 1px solid #a6a6a6; }
.shadow		    		{ /*IE8 hack*/  border: 1px solid #a6a6a6\9; }

.shadow_big				{ -moz-box-shadow: 0px 0px 30px #333; -webkit-box-shadow: 0px 0px 30px #333; box-shadow: 0px 0px 30px #333; } 
.shadow_big	    		{ /*IE6 hack*/  _border: 2px solid #333; }
.shadow_big		    	{ /*IE8 hack*/  border: 2px solid #333\9; }

.shadow_light			{ -moz-box-shadow: 0px 0px 10px #000; -webkit-box-shadow: 0px 0px 10px #000; box-shadow: 0px 0px 10px #000; } 


.opacity_25				{ opacity: 0.25; filter(opacity=0.25); }

.strtoupper				{ text-transform: uppercase; }


.small					{ font-size: 14px; }
.smaller				{ font-size: 10px; }
.grau					{ color: #999; }
.white                  { color: #fff;}
.white a, 
.white a:hover          { color: #fff;}

.align_left				{ display: inline; float: left; }
.align_right			{ display: inline; float: right; }

.subhead_border 		{ border: 1px solid #f96332; color: #f96332; padding: 3px 12px; font-size: 14px; font-weight: 400; text-transform: uppercase; }
.subhead_big 			{ margin-top: 15px; margin-bottom: 75px; font-size: 63px; font-weight: 100; text-transform: none; }
.subhead_medium			{ font-size: 21px; color: inherit; font-weight: 300; }

/* Icons */
i 					{ color: #333; }

/* ---- Links ---- */
a:link,	a:active, a:visited	{ text-decoration: none; font-size: inherit; }
a:hover						{ text-decoration: underline; color: #333; font-size: inherit;  }

a.bn						{ padding: 10px 18px; background-color: #bbb; color: #fff; cursor: pointer; }
a.bn_small					{ padding: 7px 12px; font-size: 14px; }
a.bn_bg_ci, .bn_bg_ci		{ background-color: #56a700; color: #fff; transition: all 0.35s ease-in-out 0s; display: inline-block; }
a.bn_bg_ci:hover, .bn_bg_ci:hover			{ background-color: #84B364; color: #fff; text-decoration: none; }
	a.bn_bg_ci i.fa				{ color: #fff; margin-right: 8px;}
a.bn_border_ci					{ background-color: transparent; border: 1px solid #f96332; color: #006700; transition: all 0.35s ease-in-out 0s;}
a.bn_border_ci:hover			{ background-color: transparent; border: 1px solid #f53c00; text-decoration: none; }
	a.bn_border_ci i.fa				{ color: #006700; margin-right: 8px; }

/* ---- Tabellen, Formulare ---- */
th							{ font-weight: 400; text-align: left; }
td							{ font-weight: 400; text-align: left; }

input.disabled				{ border: 1px solid #eee; background-color: #fefefe; color: #bbb; font-style: italic; }
.form-validation.alert-danger { margin-bottom: 20px; }
.form-validation.alert-success { margin: 20px 0px; padding: 10px 20px; background-color: rgba(217,249,217,1.00); }


/* ---- Clearfix --- */

.cf:before,
.cf:after { content: " "; display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}

/* --------------- Allgemeine Klassen für DIV-Aufbau ------------- */
.container				{ position: relative; width: 600px; height: auto; margin: 0px auto; padding: 0px; margin-left: auto; margin-right: auto; box-sizing: border-box; background-color: transparent; z-index: 590; }

.content-center		    { text-align: center; }
.content-right			{ text-align: right; }
.zentriert				{ margin: 0px auto; padding-top: 40px; width: 600px; height: auto; min-height: 400px; }

.section 				{ position: relative; color: inherit; overflow: hidden; padding: 30px 0; }

.section-std-padding	{ padding: 60px 0px; }

.first-section-folgeseite 	{ background-color: #fff; }
	.first-section-folgeseite .container { padding-top: 200px; }

.section-background 	{ position: absolute; height: 100%; left: 0; overflow: hidden; top: 0; width: 100%; z-index: 0; }
	.section-background-image	{ width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; }
	
/* Drittel-Box */
.content-col3-1			{ position: relative; float: left; margin: 0px; width: 25%; height: auto; box-sizing: border-box; padding: 20px 20px; background-color: transparent; z-index: 990; }
	.content-col3-1 img.img_col3-1		{ display: block; clear: both; text-align: center; width: 30%; height: auto; margin: 5px auto 25px auto; }
/* Halb-Box */
.content-col2-1			{ position: relative; float: left; margin: 0px; width: 46%; height: auto; box-sizing: border-box; padding: 20px 10px; background-color: transparent; z-index: 990; }
.content-col2-1:nth-child(even)	{ padding-right: 20px; }
.content-col2-1:nth-child(odd){ padding-left: 20px; }

	.content-col2-1 img.img_col2-1		{ display: block; clear: both; text-align: center; width: 50%; height: auto; margin: 5px auto 25px auto; }
/* Full-Row */
.content-full-row		{ position: relative; display: block; clear: both; width: 100%; height: auto; margin: 35px 0px; }
	.content-full-row img	{ position: relative; width: 100%; height: auto; }
	
/* Two Text Columns */




/* Box mit Bild links und Text rechts */
.box-img-text			{ position: relative; display: block; clear: both; width: 100%; height: auto; margin: 45px 0px; background-color: #fff; }
	.box-img-text .align_left	{ position: absolute; width: 40%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center; height: 100%; overflow: hidden; }	
	.box-img-text .align_right	{ width: 60%; height: auto; min-height: 280px; padding: 50px 60px; box-sizing: border-box; }
	@media only screen and (max-width: 1200px) { 
		.box-img-text .align_right	{ padding: 40px 50px; }
	}
	@media only screen and (max-width: 995px) { 
		.box-img-text .align_left	{ position: relative; display: block; clear: both; width: 100%; height: auto; min-height: 380px; }
		.box-img-text .align_right	{ display: block; clear: both; width: 100%; height: auto; min-height: auto; padding: 25px 40px; }
			.box-img-text .align_right h3	{ font-size: 21px; }
	}
	@media only screen and (max-width: 780px) { 
		.box-img-text .align_left	{ position: relative; display: block; clear: both; width: 100%; height: auto; min-height: 280px; }
		.box-img-text .align_right	{ display: block; clear: both; width: 100%; height: auto; min-height: auto; padding: 30px 25px; }
			.box-img-text .align_right h3	{ font-size: 20px; }
	}

.two-text-columns		{ -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; -moz-column-gap: 4rem; -webkit-column-gap: 4rem; column-gap: 4rem; }
	@media only screen and (max-width: 780px) { 
		.two-text-columns		{ -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; }
			.two-text-columns div { margin-bottom: 25px; }
	}


				  
/* --------- Boxmodell ------- */
#head						{ position: absolute; display: block; margin: 0px; width: 100%; height: 96px; padding: 0px 0px; background-color: rgba(255,255,255,0.7); border-bottom: 1px solid rgba(0, 0, 0, 0.05); z-index: 800; transition: all 0.5s ease-in-out 0s; }

	#nav_bar					{ position: relative; display: block; clear: both; width: 100%; height: 96px; padding: 0px 0px; background-color: transparent; transition: all 0.5s ease-in-out 0.5s; }
		#logo						{ font-size: 21px; font-weight: 300;display: inline-block; float: left; width: auto; height: 65px; margin-top: 15px; vertical-align: middle; transition: all 0.5s ease-in-out 0.5s; }
			#logo svg					{ height: 65px; }
			#logo img					{ display: inline; float: left; width: auto; height: 100%; vertical-align: middle; }
			#logo div					{ display: inline; float: left; width: 90px; padding-top: 10px; box-sizing: border-box; color: #fff; margin-left: 14px; text-transform: uppercase; letter-spacing: 0.1em; vertical-align: middle; }

	#navigation					{ /* wird in den MediaQuerys definiert */ }
	
	#toggle_mobile_navigation	{ display: block; float: right; padding: 5px 20px; margin: 0px; font-size: 21px; margin-top: 30px; cursor: pointer; transition: all 0.25s ease-in-out 0s;}
		#toggle_mobile_navigation  i	{ font-size: 28px; color: #56a700; }
		
	
	@media only screen and (max-width: 998px) { 
		#toggle_mobile_navigation.active i	{ color: #006700; }
		#navigation					{ position: absolute; display: none; clear: both; width: 100%; height: auto; top: 95px; left: 0; box-sizing: border-box; padding: 40px 20px 20px 20px; background-color: rgba(255,255,255,0.85); z-index: 900; }
		#head.sticky #navigation	{ top: 96px; }
			#navigation ul				{ display: block; clear: both; width: 100%; height: auto; margin: 0px; padding: 0px; }
				#navigation ul li			{ display: inline-block; clear: both; float: left; width: 100%; height: auto; margin: 5px 0px; padding: 3px 0px; }
					#navigation ul li a 		{ display: inline-block; float: left; width: 100%; height: auto; padding: 10px 0px; text-transform: uppercase; font-size: 18px; font-weight: 300; text-align: center; color: #000; }
					#navigation ul li a:hover	{ text-decoration: none; color: #006700; }
					#navigation ul li a.active	{  }
	}
	@media only screen and (min-width: 999px) { 
		#head						{  }
		#toggle_mobile_navigation	{ display: none; }
		#navigation					{ display: inline !important; float: right; width: auto; height: 96px; box-sizing: border-box; padding: 0px 0px 0px 0px; border: none; margin: 0px; z-index: 900; }
			#navigation ul				{ display: block; clear: both; float: right; width: auto; height: 96px; margin: 0px 0px 0px 0px; padding: 0px; }
				#navigation ul li				{ display: inline; float: left; width: auto; height: 96px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border-right: 1px solid rgba(0, 0, 0, 0.05); }
				#navigation ul li:first-child	{ border-left: 1px solid rgba(0, 0, 0, 0.05);  }
					#navigation ul li a			{ float: left; width: auto; height: 95px; padding: 33px 27px 33px 27px; box-sizing: border-box; margin: 0px; font-size: 21px; font-weight: 300; transition: all 0.5s ease-in-out 0s; }
					#navigation ul li a:hover	{ color: #fff; text-decoration: none; background-color: #84B364; }
					#navigation ul li a.active	{  }
		#head.sticky #navigation	{ height: 96px; padding: 0px 0px; }
			#head.sticky #navigation ul li a { }
					
	}
	
	/* ---- Sticky-Darstellungen ---- */
	#head.sticky				{ position: fixed; height: 96px; top: 0; background-color:rgba(255,255,255,0.9); border-bottom:1px solid rgba(0,0,0,0.05); opacity: 1; transition: all 0.5s ease-in-out 0s; }
			#head.sticky #toggle_mobile_navigation	{ }
	
		
/* --------- Flex-Container-Modell ------- */

.flex-container {
	display: flex;
	justify-content: space-between;
}
.flex-1-3 > div {
	flex: 0 0 30%;
	background: #f6f6f6;
	padding: 30px;
	
}

@media only screen and (max-width: 994px) {
	.flex-container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.flex-1-3 > div {
		flex: 0 0 100%;	
	}
}
		

/* ------ Section-Formatierungen ------ */
/*
.wrapper-gradient 			{ background: transparent radial-gradient(circle farthest-side at right bottom , #ff9e4f 5%, #ec5d2f 25%, #dd5124 80%, #a32800 98%) repeat scroll 0 0; }
 */

.wrapper-gradient 			{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+23,ccf5ab+54,a6dc81+94 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffffff 23%, #ccf5ab 54%, #a6dc81 94%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ffffff 23%,#ccf5ab 54%,#a6dc81 94%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ffffff 23%,#ccf5ab 54%,#a6dc81 94%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#a6dc81',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


#section-intro				{ display: block; clear: both; width: 100%; height: auto; color: #fff; background-size: cover;}
	#section-intro .align_left	{ margin-top: 100px; max-width: 50%; background-color:rgba(255,255,255,0.8); padding: 20px; }
		#section-intro h1			{ color: #000; font-size: 50px; line-height: 62px; margin-bottom: 12px; }
		#section-intro h2			{ color: #000; font-size: 22px; line-height: 30px; }
	#section-intro .align_right	{ width: 50%; height: auto; text-align: center; margin-top: 70px; }
		#section-intro .align_right	img { width: 100%; max-width: 515px; height: auto; text-align: center; }
	#section-intro .mouse_scroll { position: absolute; width: 100%; top: auto; bottom: 20px; bottom: 10vh; text-align: center;z-index: 600;  }
		#section-intro .mouse_scroll a i.fa-border-circle { text-align: center; color: #fff; border: 1px solid #fff; border-radius: 999px; line-height: 48px; min-height: 48px; min-width: 48px; }
		#section-intro .mouse_scroll a:hover i.fa-border-circle { color: #484848; background-color: #fff;}
	@media only screen and (max-width: 994px) {
		#section-intro .align_left, #section-intro .align_right	{ margin-top: 20px; }
		#section-intro .align_right	{ width: 50%; text-align: left;  }
		#section-intro h1			{ font-size: 36px; }
		#section-intro h2			{ font-size: 18px; }
	}

	
.section-quote {
	text-align: center;
	font-size: 21px;
	line-height: 29px;
	font-weight: 300;
	color: #484848;
}
	.section-quote blockquote {
		font-style: italic;
	}
		.section-quote blockquote footer {
			margin-top: 1rem;
			font-size: 13px;
			line-height: 1.5;
		}
		.section-quote blockquote:before,
		.section-quote blockquote:after {
			content:"";
			display: block;
			height: 1px;
			width: 85%;
			margin: 4rem auto;
			background-color: rgba(0,0,0,0.15);
			
		}
		.section-quote blockquote:after {
		}

.section-produkt			{ padding: 0; background-color: #fafafa; }
.bg_weiss,
.section-produkt.bg_weiss	{ background-color: #fff; }
.bg_grau,
.section-produkt.bg_grau	{ background-color: #f3f3f3; }

	.section-produkt .section-wrapper {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: stretch;
		align-items: stretch;
		-webkit-align-content: stretch;
		align-content: stretch;
	}
	
	.section-produkt div.imgblock {
		margin: 60px;
		width: 65%;
		min-height: 45vh;
		background-size: cover;
		background-position: 50% 100%;
		background-repeat: no-repeat;
	}
	.section-produkt div.align_left, 
	.section-produkt div.align_right	{ width: 35%; padding: 140px 0px; padding: 10vh 5vw; 	-webkit-align-self: center;	align-self: center;}
	
	.section-produkt div.align_left {
		-webkit-order: -1;
		order: -1;
	}

	.section-produkt.text-lg div.imgblock {
		width: 35%;
		min-height: 0;
	}
	.section-produkt.text-lg div.align_left, 
	.section-produkt.text-lg div.align_right	{ width: 65%;}

	
		.section-produkt  h2		{ font-size: 32px; font-weight: 300; color: #000; }
		.section-produkt 	h3		{	margin: 0 0 2rem; text-align: center;}
		.section-produkt  p			{ font-size: 21px; line-height: 29px; font-weight: 300; color: #484848; }
		
	
	.section-produkt .container {padding: 100px 15px;}
		.section-produkt .container p {font-size: 18px;}

		
		@media only screen and (max-width: 994px) {
			.section-produkt .section-wrapper { flex-direction: column;	}
				.section-produkt div.imgblock,
				.section-produkt div.textblock {
					width: 100%;
				}
				.section-produkt div.align_left { 		
					-webkit-order: 0;
									order: 0;
				}
			.section-produkt .align_right, .section-produkt .align_left	{ margin: 20px 0px; }
		}
		

#section-kontaktteaser		{ background-color: #212121; color: #c9c9c9; font-size: 21px; font-weight: 300; background-size: cover; background-image: url(../images/photo-1463863711260-be04156bf894.jpg); background-position-y: 20%; }
	#section-kontaktteaser .container 	{ padding-top: 85px; padding-bottom: 85px; }
		#section-kontaktteaser .container .align_left	{ width: 60%; color: #fff; line-height: 29px; }
		#section-kontaktteaser .container .align_right	{ width: 25%; }
			#section-kontaktteaser .container .align_right .bn	{ display: inline-block; width: 100% !important; height: auto; padding: 15px; box-sizing: border-box; font-size: 21px; font-weight: 300; text-align: center; }


#section-leistungen			{ background-color: #fafafa; padding-bottom: 60px; }



	 #section-leistungen .content-col2-1 { height: auto; min-height: 380px; background-color: #fff; padding: 0px 0px 25px 0px; margin: 10px 10px;}
	 	 #section-leistungen .content-col2-1 .image { display: block; clear: both; width: 100%; height: 240px; margin: 0px 0px 20px 0px; background-color: #eee; background-repeat: no-repeat; background-size: cover; background-position: center center; }
		 #section-leistungen .content-col2-1 h3 { display: block; clear: both; width: 100%; text-align: center; color: #000; font-weight: 300; font-size: 32px; height: auto; margin: 25px 0px 15px 0px; box-sizing: border-box; padding: 0px 20px; }
		 #section-leistungen .content-col2-1 .inhalt { display: block; clear: both; width: 100%; text-align: center; height: auto; margin: 10px 0px; color: #484848; font-size: 21px; font-weight: 300; line-height: 29px; box-sizing: border-box; padding: 0px 20px; }
	 #section-leistungen .content-col3-1 { height: auto; min-height: 180px; box-shadow: 200px 200px 200px rgba(0, 0, 0, 0.2); background-color: #fff; padding: 0px 0px 25px 0px; margin: 10px 10px;}
	 	 #section-leistungen .content-col3-1 .image { display: block; clear: both; width: 100%; height: 260px; margin: 0px 0px 20px 0px; background-color: #fff; background-repeat: no-repeat; background-size: cover; background-position: center center; }
		 #section-leistungen .content-col3-1 h3 { display: block; clear: both; width: 100%; text-align: center; color: #000; font-weight: 300; font-size: 32px; height: auto; margin: 25px 0px 15px 0px; box-sizing: border-box; padding: 0px 20px; }
		 

#section-kontakt			{ color: #fff; background-color: #000; background-image: url(../images/photo-1463863711260-be04156bf894.jpg); background-size: cover; background-position: center center; }
	 #section-kontakt h3 		{ color: #fff; }
	 #section-kontakt h4 		{ color: #fff; }
	 #section-kontakt .content-col2-1 { height: auto; min-height: 480px; padding: 0px 40px 25px 40px; color: #fff; }
	 	 #section-kontakt .content-col2-1 h3 { display: block; clear: both; width: 100%; text-align: center; text-transform: uppercase; color: #000; font-weight: 400; font-size: 21px; height: auto; margin: 25px 0px 15px 0px; box-sizing: border-box; padding: 0px 20px; }
		 #section-kontakt .content-col2-1 .inhalt { display: block; clear: both; width: 100%; text-align: center; height: auto; margin: 10px 0px; color: #303030; font-size: 13px; line-height: 22px; box-sizing: border-box; padding: 0px 20px; }
		
		#section-kontakt .form-group 			{ margin: 30px 0; }
		#section-kontakt .form-control 			{ font-weight: 300; border: none; color: #333; display: inline-block; font-size: 14px; height: auto; line-height: 1.9; padding: 12px 20px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; width: 100%; background-color: #fff; color: #444; font-size: inherit; line-height: inherit; box-sizing: border-box; }
		#section-kontakt .form-control:focus	{ color: #555; -moz-box-shadow: 0px 2px 10px #000; -webkit-box-shadow: 0px 2px 10px #000; box-shadow: 0px 2px 10px #000;   }
		#section-kontakt textarea.form-control  { height: auto; font-family: inherit; }
		#section-kontakt .btn-block 			{ display: block; width: 100%; }
		#section-kontakt .btn 					{ cursor: pointer; display: inline-block; font-family: inherit; font-weight: normal; border: none; line-height: 1.42857; margin-bottom: 0; text-align: center; vertical-align: middle; white-space: nowrap; line-height: 1.33333; padding: 10px 16px; height: auto; padding: 25px; font-size: 21px; font-weight: 300; text-align: center; }
		#section-kontakt .alert					{ display: block; clear: both; padding: 0px 5px; }
		#section-kontakt .alert-danger			{ padding: 4px 5px; background-color: #f7e2e0; border: 1px solid #cc5449; color: #cc5449; font-size: 14px; }

		address 			{ font-style: normal; font-size: 21px; font-weight: 300;}
			  .fa-ul 				{ list-style-type: none; margin-left: 40px; padding-left: 0; }
				  .fa-ul li 		{ padding: 5px 0; }
				  .fa-ul > li 		{ position: relative; line-height: 1.8; }
				  .fa-li 			{ font-size: 24px; left: -40px; line-height: 1; opacity: 0.9; text-align: center; top: 7px; width: 26px; color: #fff; }
				  .fa-ul li a			{ color: #fff; }

/* ---- ENDE Section-Formatierungen ---- */



#pre-foot				{ position: relative; width: 100%; min-height: 120px; height: auto; padding: 30px 0px; box-sizing: border-box; font-size: 13px; color: #fff; text-align: left; background-color: #333333; z-index: 890; }
	#pre-foot *				{ font-size: inherit; color: inherit; }
	
	
#foot					{ position: relative; width: 100%; min-height: 90px; height: auto; padding: 70px 0px; box-sizing: border-box; font-size: 16px; color: #fff; text-align: left; background-color: #171717; z-index: 890; }
	#foot .copy-attrs		{ display: block; clear: both; color: #979797; }
	#foot .copy-link		{ display: block; clear: both; margin: 0px 0px 16px; }
	#foot *					{ font-size: inherit; color: inherit; }
	#foot h3				{ text-transform: uppercase; font-size: 19px; }
	#foot a					{ color: #56a700; font-weight: 500;}
	#foot a:hover			{ color: #84B364; text-decoration: underline; }


#back-top				{ display: none; position: fixed; bottom: 28px; right: 25px; z-index: 900; }
	#back-top a 			{ background: #ccc url("../images/back_top.png") no-repeat scroll 50% 50%; border-radius: 2px; bottom: 60px; display: block; height: 40px; position: fixed; right: 30px; transition: all 0.35s ease-in-out 0s; width: 40px; z-index: 10; }
	#back-top a:hover 		{ background-color: #006700; }


/* -------------------- Animations-Effekte -------------------- */
.animated {
  -webkit-animation-duration: 1.55s;
  animation-duration: 1.55s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.come-in {
  transform: translateY(150px);
  animation: come-in 0.9s ease forwards;
}
.already-visible {
  transform: translateY(0);
  animation: none;
}
@keyframes come-in {
  to { transform: translateY(0); }
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}


@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}


@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}




/* --------------- Mobile-Darstellung bis zu 994px, aber einspaltige Inhaltsdarstellung bereits ab 780px nach unten --------------- */
@media only screen and (max-width: 994px) { 

	.container			{ width: 740px; padding-left: 0px; padding-right: 0px; }
	
	.content-col3-1				{ display: block; height: auto; max-width: 100%; width: 100%; margin-left: 0px; padding: 0px; margin-bottom: 30px; }		
	.content-col3-1.hover-image 			{ height: auto; }
	
	#section-intro		{ min-height: 500px; }
	
	.content-col3-1.grid	{ display: block; clear: both; height: auto; max-height: 550px; margin-bottom: 30px !important; }
		.content-col3-1.grid figure	{ height: auto;  }
			.content-col3-1.grid figure img	{ height: auto; }
	
	.section-produkt .container.produktbild 		{ background-position: 50% 10% !important; background-size: 60% auto; }
	.section-produkt .container.produktbild_rechts	{ background-position: 50% 10% !important; background-size: 60% auto; }
		#section-produkt1 .produktbild	{ background-size: 40% auto; }
		#section-produkt2 .produktbild_rechts	{ background-size: 40% auto; }
		
	.section-produkt div.align_left	{ display: block; width: auto;float: none;  margin-bottom: 10px; padding-top: 20px; }
	.section-produkt div.align_right{ display: block; width: auto; float: none; margin-bottom: 10px; padding-top: 20px; }
		#section-produkt1 .produktbild	{ background-size: 50% auto; }
		#section-produkt2 .produktbild_rechts	{ background-size: 50% auto; }
		#section-produkt3 .produktbild	{ background-size: 50% auto; }
		#section-produkt4 .produktbild_rechts	{ background-size: 50% auto; }
		#section-produkt5 .produktbild	{ background-size: 50% auto; }
	#section-kontaktteaser .container .align_left { display: block; clear: both; width: 100%;  padding: 0px 20px; }
	#section-kontaktteaser .container .align_right	{ display: block; clear: both; width: 100%; margin-top: 40px; padding: 0px 20px; box-sizing: border-box; }
		#section-kontaktteaser .container .align_right .bn	{ display: block; clear: both; width: auto !important;  }
	
	#section-leistungen .content-col3-1 { height: auto; min-height: auto; }
	 .subhead_big 			{ font-size: 43px; line-height: 48px; }
	
	#section-kontakt	 { padding: 0px; height: auto; min-height: auto; }
	.section-background-maps	{ position: relative; display: block; clear: both; margin: 0px; width: 100%; height: auto; min-height: 320px; padding: 0px; z-index: 700; }
		#gmap 						{ position: absolute; padding: 0px; padding: 0px; width: 100%; height: 320px; }
	#section-kontakt .section-wrapper	{ position: relative; display: block; clear: both; height: auto !important; min-height: auto !important; }
		#section-kontakt .section-wrapper .content-col2-1	{ display: block; clear: both; width: 100%; height: auto !important; min-height: 200px !important; padding: 0px 0px; margin-top: 0px; margin-bottom: 55px; }
	#section-kontakt .form-control 			{ width: 100%; }
	#section-kontakt .btn-block 			{ width: 100%; }
	
	#foot 						{ padding: 40px 20px;  }
	
	#back-top					{ visibility: hidden; }

	/* -------------------- Spezielle Formatierungen -------------------- */

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

	.container			{ width: 95%; box-sizing: border-box; padding-left: 15px; padding-right: 15px; }
	
	.content-col3-1				{ display: block; height: auto; max-width: 100%; width: 100%; margin-left: 0px; padding: 0px; margin-bottom: 30px; }		
	
	.content-col2-1			{ display: block; clear: both; width: 100%; height: auto; padding: 0px 0px; margin-bottom: 30px; }
	  .content-col2-1:nth-child(even)	{ padding-right: 0px; }
	  .content-col2-1:nth-child(odd)	{ padding-left: 0px; }
	
	#section-intro		{ min-height: 400px; }
	
	#foot 						{ padding: 40px 20px;  }
	
	/* -------------------- Spezielle Formatierungen -------------------- */
		
}



@media only screen and (min-width: 995px) { 

	.container			{ width: 980px; }
	
	#contact_bar .container	{ padding-left: 0px; padding-right: 0px; }
	#nav_bar .container	{ padding-left: 0px; padding-right: 0px; }
	
	#section-intro			{  }
	
	.content-col3-1				{ position: relative; float: left; margin: 0px; width: 30%; height: auto; padding: 20px 0px; }
	.content-col3-1:nth-child(2) 	{ margin-right: 3%; }
	.content-col3-1:nth-child(3)	{ margin-left: 2.0%; margin-right: 2.0%; }
	.content-col3-1:nth-child(4)	{ margin-left: 3%; }
	
	
	.content-col3-1.hover-image 		{ height: auto; min-height: 280px; }
		.content-col3-1.hover-image .background-image a 	{ position: absolute; width: 100%; height: auto; overflow: hidden; }
				.content-col3-1.hover-image .background-image a img 	{ width: 100%; }
	
	.content-col2-1			{ float: left; margin: 0px; width: 47%; height: auto; padding: 20px 0px;  }
	  .content-col2-1:nth-child(even)	{ padding-right: 20px; }
	  .content-col2-1:nth-child(odd)	{ padding-left: 20px; }
	
	 #section-leistungen .content-col3-1 {  }
		
	/* -------------------- Spezielle Formatierungen -------------------- */
	
	
}
@media only screen and (min-width: 1200px) { 

	.container			{ width: 1170px; }
	
	.content-col3-1				{ }	
	.content-col3-1.hover-image 	{ height: auto; min-height: 325px; }
		
	#section-intro		{ min-height: 1000px; min-height: 100vh; }
	
	#section-leistungen .content-col3-1 {  }
		
	/* -------------------- Spezielle Formatierungen -------------------- */			
		
}

/* laptop L */
@media (max-width: 1440px) {
	#section-intro .mouse_scroll {
    	bottom: 10vh;
    }
}
/* laptop */
@media (max-width: 1200px) {
	#section-intro {
	    min-height: 1000px;
	    min-height: 100vh;
	    background-position-x: 30%;
	}
	#section-intro .align_left {
		margin-top: 5vh;
	    max-width: 60%;
	}
	#section-intro h1 {
	    font-size: 40px;
	    line-height: 1.3;
	}
	.section-produkt h2 {
	    font-size: 28px;
	}
	.section-produkt p {
	    font-size: 16px;
	    line-height: 1.3;
	}
	.section-produkt div.imgblock {
	    margin: 40px;
	}
	.section-produkt div.align_left {
    	padding: 10vh 0 10vh 5vw;
	}
	.section-produkt div.align_right {
    	padding: 10vh 5vw 10vh 0;
	}
	.subhead_big {
	    font-size: 46px;
	}
	#section-leistungen .content-col2-1 {
	    min-height: 460px;
	}
	#section-leistungen .content-col2-1 h3 {
	    font-size: 28px;
	}
	#section-leistungen .content-col2-1 .inhalt {
	    font-size: 16px;
		line-height: 1.3;
	}

}
/* tablet */
@media (max-width: 998px) {
	.section-std-padding {
	    padding: 0;
	}
	#section-intro .align_left {
	    max-width: 90%;
	}
	#section-intro .section-wrapper {
		padding-top: 10vh;
		padding-left: 15px;
	}
	.section-produkt div.imgblock {
	    margin: 0;
	}
	.section-produkt div.align_left, .section-produkt div.align_right {
		padding: 5vh 5vw;
		margin: 0;
	}
	#section-leistungen {
	    padding-bottom: 0;
	}
	#section-leistungen .content-col2-1 {
	    min-height: 0;
	    margin: 0 0 20px 0;
	}
	#section-leistungen .subhead_big {
		margin-bottom: 55px;
	}
	.subhead_big {
	    margin-bottom: 15px;
	}
	#section-intro .mouse_scroll {
    	bottom: 25vh;
    }
}
/* mobile L */
@media (max-width: 425px) {
	#section-intro h1 {
	    font-size: 32px;
	}
	#section-intro h2 {
	    font-size: 16px;
	}
	.section-quote {
	    font-size: 16px;
	}
} 
/* mobile S */
@media (max-width: 425px) {
	#section-intro h2 {
	    line-height: 1.3;
	}
	#section-intro .mouse_scroll {
    	display: none;
    }
	.subhead_big {
	    font-size: 32px;
	}
} 

/* ==========================================================================
	Blog - 2020-11 - VIEREGG Design - JFC
   ========================================================================== */

.blog-hero-img {
	background-repeat: no-repeat;
	background-position: 50% bottom;
	background-size: cover;
}

.blog-hero-img .container {
	min-height: 33vh;
	display: flex;
	align-items: center;
}

.blog-hero-img .intro {
	max-width: 66.66%;
	background-color: rgba(255,255,255,0.8);
	padding: 40px;
	margin: 150px 0 50px;
}

.blog-item .container.expand {
	display: flex;
	flex-direction: row-reverse;
	max-width: 1600px;
	width: calc(100% - 30px);
	align-items: center;
	padding-bottom: 20px;
}

.blog-item .container.tiny {
	width: calc(100% - 30px);
	max-width: 960px;
	padding-bottom: 30px;
} 

.blog-item:nth-child(even) .container {
	flex-direction: row;
}

.blog-item header {
	padding: 15px 0;
}

.blog-item .container .imgbox {
	flex-shrink: 0;
	flex-grow: 3;
	margin: 0 0 0 50px;
}

.blog-item:nth-child(even) .container .imgbox {
	margin: 0 50px 0 0;
}

.blog-item .container .imgbox img {
	width: 55vw;
	height: 25vw;
	object-fit: cover;
	max-width: 1000px;
	max-height: 50vh;
}

.blog-item .align_left,
.blog-item .align_right {
	display: block;
	margin: 0 3rem 1rem 0;
	max-width: 40vw;
}
.blog-item .align_right {
	margin: 0 0 3rem 1rem;
}

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

	.blog-hero-img .intro {
		max-width: 95%;
		background-color: rgba(255,255,255,0.8);
		padding: 40px;
		margin: 150px auto 50px;
	}

	.blog-item .container.expand {
		flex-direction: column;
	}
	.blog-item .container .imgbox img {
		width: calc(100vw - 30px);
		margin-top: 15px;
		height: 33vh;
	}
	.blog-item .container .imgbox {
		margin: 0 !important;
	}
} 

.blog-item time {
	color: #aaa;
	font-size: 0.875rem;
	text-align: right;
	font-style: italic;
}

/* ==========================================================================
	Gallery - 2023-04 - VIEREGG Design - JFC
   ========================================================================== */
.blog-item .container.tiny.gallery {
	width: 100%;
	padding: 30px 0 !important
}
.gallery {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.gallery .gallery-item {
	width: calc(50% - 10px);
	aspect-ratio: 1;
	position: relative;
	padding: 5px;
}

.gallery .gallery-item  img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	
}

@media only screen and (min-width:960px) {
	.gallery .gallery-item {
		width: calc(50% - 30px);
		padding: 15px;
	}
}