/*@import url(https://fonts.googleapis.com/css?family=Share:400,400italic,700,700italic);*/
@charset 'UTF-8';

/* ==========================================================================
   TABLE OF CONTENTS
   
   01. Fonts loading
   02. Normalizing
   03. Header
   03. Navigation
   04. Main Navigation Styles
   05. Main Container General Layout Styles
   06. Typography
   07. Block Elements
   08. Lists
   09. Paging and Comments
   10. Graphs
   11. Buttons
   12. Tables
   13. Forms
   14. Mosaic Styles
   15. Columns
   16. Pricing Table
   17. Message Boxes
   18. Tabs
   19. Toggles
   20. Isotope styles
   21. Widget Footer Styles
   22. Footer Styles
   23. Author's custom styles
	   24. Media Queries 768
	   25. Media Queries 600
	   26. Media Queries 480
	   27. Media Queries 1140
   28. Fonts
   29. Helper classes
   30. Print styles
   31. Misc. MB
   
   ========================================================================== */

/* ==========================================================================
   01. Fonts
   ========================================================================== */

@font-face {
    font-family: 'LigatureSymbols';
    src: url('../fonts/LigatureSymbols-2.11.eot');
    src: url('../fonts/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
         url('../fonts/LigatureSymbols-2.11.woff') format('woff'),
         url('../fonts/LigatureSymbols-2.11.ttf') format('truetype'),
         url('../fonts/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Share';
    src: url('../fonts/share-bold.woff2') format('woff2'),
         url('../fonts/share-bold.woff') format('woff'),
         url('../fonts/share-bold.ttf') format('truetype'),
         url('../fonts/share-bold.svg#sharebold') format('svg');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Share';
    src: url('../fonts/share-bolditalic.woff2') format('woff2'),
         url('../fonts/share-bolditalic.woff') format('woff'),
         url('../fonts/share-bolditalic.ttf') format('truetype'),
         url('../fonts/share-bolditalic.svg#sharebold_italic') format('svg');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'Share';
    src: url('../fonts/share-italic.woff2') format('woff2'),
         url('../fonts/share-italic.woff') format('woff'),
         url('../fonts/share-italic.ttf') format('truetype'),
         url('../fonts/share-italic.svg#shareitalic') format('svg');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Share';
    src: url('../fonts/share-regular.woff2') format('woff2'),
         url('../fonts/share-regular.woff') format('woff'),
         url('../fonts/share-regular.ttf') format('truetype'),
         url('../fonts/share-regular.svg#shareregular') format('svg');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'webicon';
    src: url('../fonts/webicon.woff2') format('woff2'),
         url('../fonts/webicon.woff') format('woff'),
         url('../fonts/webicon.ttf') format('truetype'),
         url('../fonts/webicon.svg#shareregular') format('svg');
    font-weight: 400;
    font-style: normal;
}


.lsf {
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1;
  -o-font-feature-settings: "liga" 1, "dlig" 1;
  font-feature-settings: "liga" 1, "dlig" 1;
}
.lsf-icon:before {
  content:attr(title);
  margin-right:0.3em;
  font-size:130%;
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1;
  -o-font-feature-settings: "liga" 1, "dlig" 1;
  font-feature-settings: "liga" 1, "dlig" 1;
}
/* ==========================================================================
   01. Normalizing
   ========================================================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input, select, option, textarea {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    font-family: 'Share', sans-serif;
    font-size: 100%;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
html {height: 100%; min-height: 100%;}
body {line-height: 1; min-height: 100%;}
ol, ul {list-style: none;}
a {color: #8ec542; text-decoration: underline;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
.clear {clear:both; font-size:0; height:1px;}
fL {float: left;}
fR {float: right;}
#wrapper {height: 100%; min-height: 100%;}






h1, h2, h3, h4, h5 {font-weight:normal;}
.clearfix:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}




/* ==========================================================================
   03. header
   ========================================================================== */
header {
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
	background:rgb(255,255,255);
	position: fixed;
	width:100%;
	top:0;
	z-index:999;
	height:4em;
}
.wrapper {margin: 0 auto;  min-width: 42em; max-width: 80em; position: relative;} 
.wrapper:after {
     content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}
header .wrapper {padding: 0 0 0 1em;}

header #logo {float:left; margin:;} 
header #logo img {
	height: 2.5em;
    margin: 0.75em;
}

header #menu {
    padding: 0.3em 0.35em;
    z-index: 10;
    color:#8ec542;
    font-size: 2.5em;
    float: right;
    display: inline-block;
}
header #sidemenu {
    display: none;
}
@media (min-width: 720px) {
    header #menu {
        display: none;
    }
    header #sidemenu {
        display: block;
    }
}



header #menu:hover {cursor:pointer;}
#top.clear {height: 4em; background: #FFF; display: none;}
/* ==========================================================================
   04. Navigation
   ========================================================================== */
nav {
    color:#323232;
    font-family: 'Share', cursive;
    position: absolute;
    z-index: 999;
    top: 4em;
    left: 0; 
    line-height: 2em;
    background: #8ec542;
    width: 100%;
}
nav ul {list-style:none;}
nav li {
    text-transform:uppercase;
    border-bottom: solid 1px #FFF;
}
nav li a {
    color:#323232;
    text-decoration:none;
    display:block;
    padding: 0.5em 1em;
}
nav li a:hover {text-decoration: underline; color: #484848; color: #000;}
nav li.current a {color:#FFF;}
nav:after {content:" ";	clear:both;	height:1px;	font-size:0;}
a.language {
	/*position: absolute;
	top: 4.2rem;
	left: .25rem;
	background: #FFF;
    padding: .2rem;*/
}
a.language img {height: 1rem;}

@media (min-width: 20.1em) {
    nav {
        right:0;
        left: auto;
        width: 180px;
    }
	a.language {
		/*position: absolute;
		top: 1rem;
		left: auto;
		right: .5rem;
		background: #FFF;
		padding: .2rem;*/
	}
}
@media (min-width: 45em) {
    nav {
        width: 100%;
        -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
		/*margin-right: 2.5rem;*/
    }
    nav li {
        width: auto;
        float: left;
        border-bottom: 0;
    }
    nav li.current {
        border-bottom: solid 3px #FFF;
    }
    nav li:hover {
        background: #bbdc8e;
        border-bottom: solid 3px #FFF;
    }
	a.language {
		top: 1.5rem;
	}
}

@media (min-width: 58em) {
    nav {
        background:transparent;   
        top: 1em;
        width: auto;
        -webkit-box-shadow: none;
	   -moz-box-shadow: none;
	   box-shadow: none;
    }
    nav li:hover {
        background: transparent;
    }
    nav li.current {
        border-bottom: solid 3px #bbdc8e;
    }
    nav li.current a {
        color: #8ec542;
    }
}








/*
@media (max-width: 48em) {
    nav {
        margin: 0;
        background: rgb(142, 197, 66);
        position: absolute;
        right: 0;
        top: 4em;
    }  
    nav li {float:none; margin: 0; padding:0;}
    nav li.current {background: #FFF;}
    nav a {padding: 1em; display: block;}
    nav a:hover {background: rgb(255, 255, 255);  background: rgba(255, 255, 255, 0.8);  color:#8ec542;    }
    nav li.current a {color: #8ec542; text-decoration: underline;}
}
@media (max-width: 30em) {
    nav {width: 100%;}
    nav ul {width: 100%;}
    nav a {padding: 0.5em; font-size: 1.2em;}
}
*/





/* ==========================================================================
   04. Section
   ========================================================================== */

article {}
section {position: relative; margin: 0; padding: 0;}

section:after {clear:both; content:""; height:1px; font-size:0;	}
section .space {height: 6em;}
@media (min-width: 45em) and (max-width:58em) {
    section .space {height:140px;}
}
h2 {font-size: 2em; line-height: 1.2em;}
h3 {color: #323232; font-size: 2em; line-height: 1.2em; margin-bottom: 0.5em;}
@media (max-width: 20em) { 
    h2, h3 {font-size: 1.5em;}
}
h3 span {border-bottom: 1px solid #8ec542;}
h5 {
    font-weight: bold;
    padding-top: 1.2rem;
}
p {color: #727272; line-height: 155%; padding: 0.5em 0;}
/*section .wrapper {padding: 4em 0;}*/
.anker {}
/* ==========================================================================
   04. Allgemein
   ========================================================================== */
#allgemein {
	background:#000;
	background-image: url(../image/allgemein-bg.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}
#allgemein article {
	color:#FFF;	
	text-align:center;
	padding:2em 0;
    margin: 0 auto;
}
@media (min-width: 48em) {
    #allgemein article {max-width: 48em;}
}
#allgemein article  h2 {padding-bottom:1em; color:#FFF;}
#allgemein article  h2  span {color:#8ec542;}
#allgemein article p {
	font-size:1.3em;
	color:#FFF;
}




/* ==========================================================================
   04. Visionen
   ========================================================================== */
#visionen {background:#FFF;}
#visionen h3 {}

/* ==========================================================================
   04. Nachhaltigkeit
   ========================================================================== */
#nachhaltigkeit {background:transparent url(../image/nachhaltigkeit-bg.jpg) no-repeat left center; background-size: cover; height:320px;
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.1);
	box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.1);
}
/* ==========================================================================
   04. Kompetenzen
   ========================================================================== */
#kompetenzen {background:#f7f8fa;}
#kompetenzen aside {float:right; width:40%;}
#kompetenzen aside img {width:100%;}
#kompetenzen h3 {color:#323232; margin-top: 0;}

#kompetenzen_items {background:#FFF; padding:3em 0;}
#kompetenzen_items .item {border-right: solid 1px #DADADA; width:28%; padding:1% 2.5%; float:left;}
#kompetenzen_items .item.last {border-right:none;}
#kompetenzen_items .item h5 {color:#333; font-size:1.35em; padding-bottom:1em;}
#kompetenzen_items .item h5 .icons {width:38px; height:38px; display:block;}
/* ==========================================================================
   04. Projekte
   ========================================================================== */
#projekte {background:#000 url(../image/projekt-bg.jpg) no-repeat center center; color:#FFF; background-attachment: scroll; background-size: cover;}
#projekte article {margin: 0 auto; max-width: 48em;}
#projekte h4 {font-size: 2.5em; text-align: center; margin: 0 0 1em 0; text-transform: uppercase;}
#projekte h4 span {color:#8ec542;}
@media (max-width: 20em) { 
    #projekte h4 {font-size: 2em;}   
}
#projekte p {color:#FFF;}
/* ==========================================================================
   04. Referenzen
   ========================================================================== */
#referenzen {background:#FFF; text-align:center; padding-bottom: 4em;}
#referenzen .item {position:relative;}
#referenzen .item p {text-align:left;}
#referenzen cite {color:#727272; text-align:center; font-size:80%;}
#referenzen cite img {border:solid 1px #8ec542;}
#referenzen cite img.noBorder {border: none;}
#referenzen cite span {color:#8ec542; display:block; font-size:110%; /*margin-bottom:0.75em;*/}
#referenzen cite img.company {margin: 0.5em;}

#referenzen blockquote {position:relative; z-index:0; margin: 4em auto 0; max-width: 30em;}
#referenzen blockquote div {background:#f7f8fa; border-bottom:solid 2px #E5E5E5; color:#727272; padding:5% 5% 1.5%; margin:0 auto 1.5em;}
#referenzen blockquote div.quote {
	display:block;
	width:40px;
	height:40px;
	border: solid 1px #E5E5E5;
	border-radius:7px;
	background:#FFF;
	padding:0;
	position: absolute;
	left:50%;
	margin: -20px 0 0 -20px;
	z-index:10;
}
#referenzen blockquote div.quote div {
	width:30px; height:30px; 
	position:absolute; top:5px; left:5px; 
	background:#8ec542 url(../image/quote.png) no-repeat center center; 
	border:none;
	margin:0;
	padding:0;
}

/* ==========================================================================
   04. Kontakt
   ========================================================================== */
#contact-us {
	background:#003366;	
}
#kontakt {
	background:#000 url(../image/kontakt-bg.jpg) no-repeat center center;
	background-size: cover;
    color: #FFF;
    text-align: center;
}
#kontakt a.openKontakt {
    background: #8ec542; 
    color: #FFF;
    font-size: 120%;
    text-decoration: none;
    padding: 1em 2em; width:auto;
    margin: 2em auto;
}
#kontakt em, #kontakt strong {font-style: normal; font-weight: normal;display: block; text-align:center; padding: 0 0 0.5em 0;}
#kontakt em {font-size:150%;}
#kontakt strong {font-size: 200%;}


/* ==========================================================================
   04. Impressum
   ========================================================================== */
#impressum th {text-align: right; color: #333; padding-right: 1em;}
/* ==========================================================================
   04. Adresse
   ========================================================================== */
#adresse {padding: 0 2em;}
#adresse article {}
#adresse article span.mail:after {content: "@";}
#adresse article hr {border: none; height: 2px; background: #8ec542;}
#adresse article table {width: 100%; margin: 1em 0;}
#adresse article th {padding-right: 0.5em; text-align: left;}
#adresse aside {text-align: center}
#adresse aside iframe {margin: 0 auto;}
#adresse iframe.frame420 {display: none;}
#adresse iframe.frame600 {display: none;}
@media (min-width: 30em) {
    #adresse iframe.frame250 {display: none;}
    #adresse iframe.frame420 {display: block;}
}




/* ==========================================================================
   04. Formulare
   ========================================================================== */
#formular {background: #CCC; padding: 2em;}
#formular article h3 {margin-top: 0;}

#formular form {margin: 0 auto; max-width: 26.5em;}

form label {display: block; text-align: left; padding-left: 0.3em; margin-top: 1em;}
form label span {color: #8ec542; margin-left: 0.2em;}
form input, form, select {font-size: 1em;}
form span.input {
    -webkit-appearance:none;
    background-color:#FDFDFD;
    border-radius:5px;
    line-height:1.2em;
    margin:0.3em 0;
    padding:0 0.3em;
    border:1px solid #cdcdcd;
    border-color:#adadad #cdcdcd #cdcdcd;
    
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:inset 0 1px 1.75px .25px rgba(88,88,90,0.4);
    -webkit-box-shadow:inset 0 1px 1.75px .25px rgba(88,88,90,0.4);
    box-shadow:inset 0 1px 1.75px .25px rgba(88,88,90,0.4);
    font-family:"Tahoma",Helvetica,sans-serif;
    color:#58585a;
    padding: 0.2em;
    display: block;
}
form input, form select, form textarea {border: none; background: transparent; color: #999; width: 100%;}
form textarea {height: 12em;}

form .input.strasse {width: 70%; float: left;}
form .input.hausnummer {width: 20%; float: right;}
form .input.plz {width: 30%; float: left;}
form .input.ort {width: 60%; float: right;}
form input[type="submit"] {
    background: #8ec542; 
    color: #FFF;
    font-size: 120%;
    text-decoration: none;
    padding: 1em 2em;
    margin: 1em auto;  
    width: 100%:   
}
#formular p.confirm {color: #333;} #formular p.confirm strong {color: #8EC542;}
@media (min-width: 34em) {
    #formular article {width: 45%; margin-right: 5%; float: left;}
    #formular  aside {width: 50%; float: left; padding-left: 0;}
}
form input[type="checkbox"] {
    display: none;
}
form input[type="checkbox"] + label:before {
    content: '\EA70';
    font-family: 'webicon';
    background: #FFF;
    margin-right: .5rem;
}
form input[type="checkbox"]:checked + label:before {
    content: '\EA71';
    color: #8ec542;
}







/* ==========================================================================
   04. jQuery
   ========================================================================== */
.ui-dialog {padding: 0; border-radius: 10px 10px 0px 0px; -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 10px 10px 0px 0px;}
.ui-dialog .ui-dialog-titlebar {color:#FFF;}


/* ==========================================================================
   04. Footer
   ========================================================================== */
footer {background: #000; padding: 1em; text-align: center; color: #727272; font-size: 85%; line-height: 140%;}
footer a {text-decoration: underline; color: #727272;}




/* ==========================================================================
   04. Mobile
   ========================================================================== */
@media (max-width: 20em) { 
    
}
@media (max-width: 30em) {
    body {font-size: 0.8em;}
    .wrapper {width: min-width: 20em;}
    
}
@media (max-width: 40em) {
    #kompetenzen_items .item {width: auto; float: none; border-right: none; border-bottom: 1px solid #dadada; margin: 1em 0;}
    #kompetenzen_items .item:last-child {border-bottom: none;}
}
@media (max-width: 48em) {
    body {font-size: 0.9em;}
    .wrapper {min-width: 18em;} 
    article {float: none ; width: auto;}
    footer span {display: block; }
    /*nav li {margin: 0;}
    nav li.current a {border: none;}*/
    #allgemein article p {font-size: 1.1em;}
    #kompetenzen aside {width: auto; float: none;}
    #referenzen blockquote {min-width: auto; width: 90%;}
    #allgemein {width:auto; min-width: auto; max-width: auto;}
	
	
	.projekt #intro article,
	.projekt #video article,
	.projekt #galerie article{width: auto; float: none; margin-bottom: 2em;}
	.projekt #intro aside,
	.projekt #video aside,
	.projekt #galerie aside {width:auto; float: none;}
}

@media (min-width: 40em) {
    #visionen article, #kompetenzen article {width: 42%; float: left;}
    #kompetenzen aside {width: 42%; float: right;}
    #adresse article {width: 50%; float: left;}
    #adresse aside {width: 50%; float: left;}
    #adresse iframe.frame250 {display: block; margin: 0 auto;}
    #adresse iframe.frame420 {display: none;}
    
}

@media (max-width: 52em and min-width:48em) {
    nav li {margin:0 0.7em;}
}
@media (min-width:49em) {
    #allgemein, #projekte {background-attachment: fixed;}
    #adresse iframe.frame250 {display:none;}
    #adresse iframe.frame420 {display: block; margin: 0 auto;}
}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) {
    /*nav {width: 100%; text-align: center;}
    nav ul {margin: 0 auto; padding: 0; float: left;}
    nav li {float: left;}*/
    footer {font-size: 0.4em;}
}

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 768px) 
and (orientation : portrait) {
    /*nav {width: 100%; text-align: center;}
    nav ul {margin: 0 auto; padding: 0; float: left;}
    nav li {float: left;}*/
}





.icon.pdf {width: 16px; height: 16px; display: block; margin-right: 0.5em; float:left; margin-top: 6px; background: url('../image/icon_pdf.png') no-repeat center center;}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
	.icon.pdf {background-image: url('../image/icon_pdf@2x.png'); background-size: 16px 16px;}
}

#produkte {background: #f7f8fa;}
section.produkte {
    padding: 3rem 2rem;
}
@media (min-width: 40em) {
    .flexbox {
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
    }
    .produkte .nahrung {
        flex-grow: 1;
    }
    .produkte .futter {
        flex-grow: 2;
    }
    .flexbox > .item {
        padding: 1.5rem;
    }
}
@media (min-width: 980px) {
    produkte .kategorien {
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
    }
}
    

.kategorien .nahrung,
.kategorien .futter {
    margin-bottom: 3rem;
}
.kategorien .nahrung > h3,
.kategorien .futter > h3 {
    padding-bottom: 1.5rem;
}



.produkte .item {
    width: 100%; 
    max-width: 570px;
}
@media (min-width: 40em) {
    .produkte .item {
        width: 44%;
        padding: 0 3%;
    }
}
.produkte h4 {
    color: #8ec542;
    font-size: 1.5em;
    text-align: center;
}
.produkte .produktBild {
    text-align: center;
    margin: 1em 0 1em;;
}
.produkte .produktBild img {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    border: solid 3px #8ec542;
}
.produkte p, .produkte li {color: #727272;}
.produkte ul {
    margin: 2em 0 2em 4em;
}
.produkte li {
    line-height: 1.8;
    list-style: disc url('../image/li.svg');
}
.produkte .footer {
    text-align: center;
    color: #EAEAEA;
    font-size: 0.8em;
    padding: 0.5em;
    margin-top: 1em;
    border-top: solid 1px #EAEAEA;
}
.produkte .footer p {
    color: #BABABA;
}









#produkte .item {
    width: 100%; 
    max-width: 570px;
}
@media (min-width: 40em) {
    #produkte .item {
        width: 44%;
        padding: 0 3%;
        display: table-cell;
    }
}
#produkte article {
    max-width: 48em;
}
#produkte h3 {
    color: #323232;
}
#produkte h4 {
    color: #8ec542;
    font-size: 1.5em;
    text-align: center;
}
#produkte p, #produkte li {color: #727272;}
#produkte ul {
    margin: 2em 0 2em 4em;
}
#produkte li {
    line-height: 1.8;
    list-style: disc url('../image/li.svg');
}
#produkte .produktBild {
    text-align: center;
    margin: 2em 0 1em;;
}
#produkte .produktBild img {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    border: solid 3px #8ec542;
}
#produkte .footer {
    text-align: center;
    color: #EAEAEA;
    font-size: 0.8em;
    padding: 0.5em;
    margin-top: 1em;
    border-top: solid 1px #EAEAEA;
}
#produkte .footer p {
    color: #BABABA;
}
@media (min-width: 40em) {
    #allgemein, #visionen, #kompetenzen, projekte .wrapper, #produkte, #referenzen, #kontakt {
        min-height: 100%;
    }
}




#produktinfo {
    background: #FFF;
}
#produktinfo article {
    width: 100%:
}
@media (min-width: 40em) {
    #produktinfo article {
    width: 60%;
    margin: 1rem auto;
    }
}



section.content {
    padding: 6rem 2rem 4rem;
    box-sizing: border-box;
}
@media (min-width: 45em) and (max-width:58em) {
    section.content {
        padding-top:9rem;
    }
}

.banner {
    background-attachment: fixed;
    background-size: cover;
    height: 10rem;
    background-repeat: no-repeat;
    background-position: bottom;
}
 @media (min-width: 30em) {
     .banner {
        height: 14rem;
    }
}
 @media (min-width: 40em) {
     .banner {
        height: 18rem;
    }
}
@media (min-width: 48em) {
     .banner {
        height: 20rem;
    }
}

.banner.kuh {
    background-image: url('../image/kuehe-weide-berge.jpg');
    
}
.banner.proteine {
    background-image: url('../image/proteine-shake.jpg');

}

section.color1 {
    background: #FFF; 
}
section.color2 {
    background: #f7f8fa;
}
section.color1 h3, section.color2 h3 {
    color:#323232;
}
section.color1 h3 span, section.color2 h3 span {
    
}
section#nahrungsmittel {
    background: #f7f8fa;
}

a.more {
    background: #8ec542;
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
    padding: .5rem 1rem;
    border-radius: .3rem;
    margin-top: .75rem;
    display: inline-block;
    transform: translateY(0);
}
a.more:hover {
    text-decoration: underline;
}
a.more:focus {
    transform: translateY(2px);
}

.owl-carousel:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}




/* ==========================================================================
   Responsive Youtube Video
   ========================================================================== */
.responsive-video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.responsive-video {position: relative; padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/ padding-top: 0px; height: 0; overflow: hidden;}

/* ==========================================================================
   Anpassungen Datenschutz
   ========================================================================== */
.datenschutz h3 {
    padding-top: 1.5rem;
    margin: 0;
}
.datenschutz h4 {
    font-weight: bold;
}
.datenschutz article ul {
    padding: 1rem;
    width: 75%;
}
.datenschutz article ul ul {
    padding-left: 3rem;
    list-style: circle;
}
.datenschutz article li {
    color: #727272;
    line-height: 155%;
}
.datenschutz article ul ul li {
    border-bottom: solid 1px #8ec542;
    padding: .5rem 0;
}