/* ====================================================================
   WDS.media GmbH - Lippstadt
   http://wds.net
   Project: frohNatur
   Document: stylesheets.css
   Author: Gordon P. Ries
===================================================================== */

* { box-sizing: border-box; }
a { text-decoration: none; }

body {
	margin:0;
	padding:0;
	background-color:#fff;
	color:#2a230a;
	font-family: "jaf-bernino-sans-condensed",sans-serif;
	font-size:18px;
	text-rendering: optimizeLegibility;
}

body.bgfrohnatur {
	background: url(../images/bg-frohnatur.jpg) no-repeat top center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

a.brown {
	color: #88441d;
	text-decoration: underline;
}


/* TOOLS  */
/* ----------------------------------------- */
.m0auto { margin:0 auto; }
.clear { clear:both; height:0px; font-size:0px; }
.bgtranswhite { background: rgba(255,255,255,0.41); }
.border10white { border:10px solid white }
a.link { color:#000; text-decoration:underline; }
/* ----------------------------------------- */


/* HEADER */
/* ----------------------------------------- */
header {
	width:960px;
	height:175px;
	margin:0 auto;
	padding:0;
	background-color:#f7d59a;
	background-image:url(../images/bg-paperstyle.jpg);
	background-position:top center;
	background-repeat:repeat-y;
	margin-top:25px;
}

.logo {
	position:absolute;
	width:237px;
	height:55px;
	margin:32px 0 0 22px;
}

.badge {
	position:absolute;
	width:126px;
	height:174px;
	margin:0 0 0 815px;
}

.navigation { width: 790px; text-align:left; position:absolute; margin: 96px 0 0 38px; }
.navigation ul { display:inline-table; padding-top:11px; overflow: hidden; white-space:nowrap}
.navigation ul li { float:left; margin:0 0 0 18px; list-style-type:none; white-space:nowrap; }
.navigation ul li:first-child { margin:0; }
.navigation ul li a {
	line-height: 1.5;
	font-family: "jaf-bernino-sans-condensed",sans-serif;
	color: #2a230a; 
	font-size: 21px;
	text-decoration:none;
	-o-transition:color .2s ease-out;
	-ms-transition:color .2s ease-out;
	-moz-transition:color .2s ease-out;
	-webkit-transition:color .2s ease-out;
	transition:color .2s ease-out;
	font-weight:400;
}

.navigation ul li a:hover,
.navigation ul li a.active { color:#88441d;  border-bottom: 1px solid #2a230a; display: inline-block; line-height: 1.5; font-weight: 500; }
.navigation ul li ul { display:block; position: absolute; top:38px; }
.navigation ul li ul li { float:left; margin:0 0 0 20px; list-style-type:none; white-space:nowrap;}
.navigation ul li ul li.last::before {
	content: "|";
	position: absolute;
	margin-left: -12px;
}
.navigation ul li ul a {
	font-size: 20px;  
	text-decoration:none;
	text-transform: none;
	margin-left:0px;
}

/* ----------------------------------------- */


/* MAIN */
/* ----------------------------------------- */
main { width:960px; margin:0 auto; margin-top:10px; margin-bottom:10px; padding:0; }
/* ----------------------------------------- */


/* FOOTER */
/* ----------------------------------------- */
footer {
	width:960px; height:85px;
	margin:0 auto;
	padding:0;
	background-color:#f7d59a;
	background-image:url(../images/bg-paperstyle.jpg);
	background-position:top center;
	background-repeat:repeat-y;
}

.metanavigation { position:absolute; width:960px; text-align:center; padding-top:50px; z-index:10; }
.metanavigation ul { display:inline-table; overflow: hidden; white-space:nowrap}
.metanavigation ul li { float:left; margin:0 0 0 0; list-style-type:none; white-space:nowrap; }
.metanavigation ul li:first-child { margin:0; }
.metanavigation ul li a { font-family: "jaf-bernino-sans-condensed",sans-serif; font-size:16px; color:#000; text-transform:normal; text-decoration:none;
	-o-transition:color .2s ease-out;
	-ms-transition:color .2s ease-out;
	-moz-transition:color .2s ease-out;
	-webkit-transition:color .2s ease-out;
	transition:color .2s ease-out;
}

.metanavigation ul li a:hover,
.metanavigation ul li a.active { color:#88441d; }
.metanavigation ul li a:first-child { margin-right:15px; }
.metanavigation ul li a:last-child { margin-left:15px; }
.metanavigation ul ul { display:none }

.logoxs { position:absolute; width:960px; height:75px; text-align:center; z-index:5; margin-top:15px; }

.grow { transform: scale(0.95); transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1); }
/* ----------------------------------------- */


/* ALLGEMEIN */
/* ----------------------------------------- */
.bgpaper {
	background-color:#f7d59a;
	background-image:url(../images/bg-paperstyle.jpg);
	background-position:top center;
	background-repeat:repeat-y;
}

h1 { font-family: "utopia-std",serif; font-weight:400; font-style:italic; font-size:30px; margin:0; color: #88441d; }
h2 { font-family: "utopia-std",serif; font-weight:400; font-style:italic; font-size:26px; margin-bottom: 0.5em;  }
h3 { font-family: "jaf-bernino-sans-condensed",sans-serif; font-size:18px; font-weight:800; color:#2a220a; line-height:1.3em; margin-bottom: 0.6em; }
h4 { font-family: "jaf-bernino-sans-condensed",sans-serif; font-size:35px; font-weight:400; color:#fff; line-height:65px; }
p { font-family: "jaf-bernino-sans-condensed",sans-serif; font-size:18px; font-weight:400; color:#88441d; line-height:1.4em; margin-bottom: 1.3em; }
/* ----------------------------------------- */


/* SEITEN ALLGEMEIN*/
/* ----------------------------------------- */
.pagehome { width:960px;  }
.pageqth { width:960px; height:500px; }
.pageleft { width:505px; float:left; display: flex; align-items: center; justify-content: center; flex-wrap:wrap;}
.pageright { float:left; width:425px; padding:40px 25px 30px 25px; }
.pageright a { color:#88441d; text-decoration:underline; }
.pagepartner { width:960px; height:430px; }
.pageproducts { width:960px; height:570px; }
.pageproduct { width:960px; height:555px; margin-top:10px; }
.pageimprint { width:960px; }
.pagecontact { width:960px; }

.contenthome { margin-left:30px; width:900px; padding:35px 25px 35px 25px; }
.contenthome p { font-family: "jaf-bernino-sans-condensed",sans-serif; font-size:20px; font-weight:300; color:#2a220a; line-height:1.4em; }
.contenthome p strong { font-weight:600; color:#000; }


/* ----------------------------------------- */


/* SEITE "FROHNATUR" */
/* ----------------------------------------- */
.moodFrohnatur { margin-top:30px; margin-bottom:30px; }
.pagefrohnatur { width:960px; height:400px; }
.pagefrohnatur1 { width:960px; height:375px; }
.pagefrohnatur2 { width:960px; height:400px; }
.articleFirst { margin-bottom:30px; padding-top:45px; }
.articleNormal { padding-bottom:30px; }
.articleMood { width:470px; float:left; display: flex; align-items: center; justify-content: center; }
.articleHeadline { width:490px; float:left; padding-top: 5px; }
.articleText { width:320px; float:left; }
.articleBadge { width:170px; float:left; display: flex; justify-content: center; padding-top:5px; }

.pagefrohnaturAnimalwelfare { margin-left:0px; margin-top:40px; width:400px; }
.pagefrohnaturAnimalwelfare h1 { font-family: "jaf-bernino-sans-condensed",sans-serif; font-size: 18px; font-weight: 600; color:#01422c; line-height: 1.4em; font-style: normal; }

.productAnimalwelfareHolder { float:left; width:400px; margin-top:15px; }
.productAnimalwelfareTable { width:400px; height:220px; }
.animalwelfare { border: 1px solid #01422c; font-size:16px; line-height: 1em; }
.animalwelfare td, .nutrition th { border:none; padding: 6px 5px 6px 5px; }
.animalwelfare tr { background-color: rgba(255, 255, 255, 0.3); color:#000; border-bottom:1px solid #000; }

/* ----------------------------------------- */


/* SEITE "PRODUKTE" */
/* ----------------------------------------- */
h2.produkte { font-family: "jaf-bernino-sans-condensed",sans-serif; font-size:22px; font-weight:600; color:#2a220a; line-height:1.3em; margin-bottom: 1.5em; }
ol.productsFacts { margin-left: 15px; }
ol.productsFacts li { color:#2a220a; font-weight:600; margin-bottom: 0.3em; padding-left: 5px; }
ol.productsFacts li span { color:#88441d; font-weight:400; }

.productStripe { position: absolute; z-index:5; width:960px; height:65px; margin-top:100px; }
.BgPurple { background-color:#730039; }
.BgOrange { background-color:#c33608; }
.BgBlack { background-color:#000; }
.BgBrown { background-color:#a66501; }
.BgDarkgreen { background-color:#01422c; }
.BgLightgreen { background-color:#647f32; }

.productFacts { position:absolute; z-index:10; width:960px; margin:0; padding:0; }
.productMood { width:380px; float:left; margin-top:50px; padding-left:38px;  }
.productText { width:580px; float:left; margin-top:100px; }
.productHeadline { height:65px; }
.productNutrition { margin-top:50px; }
.productNutritionHolder { float:left; width:310px; }

.productNutritionTable { width:310px; height:220px; }
.nutrition { border: 1px solid #000; font-size:16px; line-height: 1em; }
.nutrition td, .nutrition th { border:none; padding: 6px 5px 6px 5px; }
.nutrition tr:nth-child(1) { color:#fff; }
.nutrition tr:nth-child(2n+2) { background: #000; color:#fff; }
.nutrition tr td:nth-child(2) { text-align: right; }

.productInfoHolder { float:left; width:225px; height:220px; margin-left:20px; padding:10px 8px 10px 8px; }
.productInfo { list-style-type:none; font-size:16px; color:#fff;  margin:10px 0 0 5px; }
.productInfo li:before { content: "✔ "; font-stretch: ultra-condensed; padding-right:0px; }
.productInfo li { margin-bottom:15px; padding-left: 1em; text-indent: -1em; }

.ingridients { width:560px; margin-top:15px;}
.ingridients p { font-size:15px; line-height: 1.2em; color:#88441d; }
/* ----------------------------------------- */


/* SEITE "IMPRESSUM" */
/* ----------------------------------------- */
.contentimprint { margin-left:30px; width:900px; padding:35px 25px 35px 25px; }
.contentimprint p { font-family: "jaf-bernino-sans-condensed",sans-serif; font-size:16px; font-weight:400; color:#2a220a; line-height:1.2em; }
.contentimprint p strong { font-weight:600; color:#000; }

/* ----------------------------------------- */

/* SEITE "KONTAKT" */
/* ----------------------------------------- */
#kontakt label.text { font-family: "jaf-bernino-sans-condensed",sans-serif; font-size:14px; font-weight:400; color:#2a220a; line-height:1em; }
#kontakt select { margin-bottom:10px; }
#kontakt input { width: 360px; margin-bottom:8px; }

#kontakt .buttonSend {
	width: 160px;
	border:0;
	font-family: "jaf-bernino-sans-condensed",sans-serif; font-size:14px; font-weight:400; color:#ffffff;
	background: #291d06;
	padding: 8px 15px 8px 15px;
	text-decoration: none;
}

#kontakt .buttonSend:hover {
  background: #85411c;
  text-decoration: none;
}

.button {
	width: 160px;
	border:0;
	font-family: "jaf-bernino-sans-condensed",sans-serif; font-size:14px; font-weight:400; color:#ffffff;
	background: #291d06;
	padding: 8px 15px 8px 15px;
	text-decoration: none;
}

.button:hover {
  background: #85411c;
  text-decoration: none;
}

#documents {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
#documents+label {
	cursor: pointer;
}

#documents:focus+label {
	outline: none;
	-webkit-box-shadow: 0 0 2px 2px #f9b122;
	box-shadow: 0 0 2px 2px #f9b122;
}

/* ----------------------------------------- */

.nachhaltigkeit h3 {
	font-family: "jaf-bernino-sans-condensed",sans-serif;
	font-size:24px;
	font-weight:800;
	color:#4eae30;
	line-height:1.4em;
	font-style:normal;
	padding-bottom:0px;
	margin-bottom:0.3em;
}

.nachhaltigkeit p {
	font-family: "jaf-bernino-sans-condensed",sans-serif;
	font-size:18px;
	font-weight:400;
	color:#88441d;
	line-height:1.4em;
	margin-bottom: 1.3em;
}

.nachhaltigkeit p strong {
	color:#88441d;
	font-weight:800;
}

.nachhaltigkeit p a {
	color:#88441d;
	text-decoration:underline;
}

.nachhaltigkeit ul {
	list-style-type: square;
    padding-left: 20px;
}

.nachhaltigkeit ul li {
	list-style-type: none;
    position: relative;
	font-family: "jaf-bernino-sans-condensed",sans-serif;
	font-size:18px;
	font-weight:400;
	color:#88441d;
	line-height:1.4em;
	margin-bottom: 0.5em;
}

.nachhaltigkeit ul li::before {
	content: '■';
	color:#88441d;
    position: absolute;
    left: -1.8em;          /* Adjust this value so that it appears where you want. */
    font-size: 0.4em;      /* Adjust this value so that it appears what size you want. */
}