/* BROWSER RESET*/
* {box-sizing: border-box;}

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, sub, sup, tt, var, b, u, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

.clear  {clear:both;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}


/*CUSTOM CSS*/
h1, h2, h3, h4, h5, h6, p {
}


/*SCHRIFTFORMATIERUNGEN*/
h1 {font-style:normal; font-weight:600; font-size:2em; line-height:1.3em; padding-bottom: 0.5em;}
h2 {font-style:normal; font-weight:600; font-size:2em; line-height:1.3em; padding-bottom: 0.5em;}
/*{font-style:normal; font-weight:600; font-size:1.4em; line-height:1.3em; text-align: justify;}	*/
h3 {font-style:normal; font-weight:600; font-size:1.3em; line-height:1.1em;}
h4 {font-style:normal; font-weight:300; font-size:1.2em; line-height:1.3em; margin-top:5%; text-align:center;}
h6 {font-style:normal; font-weight:300; font-size:0.8em; line-height:1.1em; color:#646464;padding-top: 0.5em;}
p {font-style:normal; font-weight:300; font-size:1.3em; line-height:1.3em; text-align: justify;}
/*{font-style:normal; font-weight:300; font-size:1.0em; line-height:1.5em; color:#646464;padding-top: 0.5em; text-align: justify;}*/
.green-text {color:#007223;}
.green-text-shadow {color:#007223; text-shadow: 1px 1px 1px #afafaf;}
.white-text {color:#FFF;}
.white-text-shadow {color:#FFF; text-shadow: 1px 1px 1px #370621;}
strong {font-weight:600;}
.black-text-shadow {color:#000; text-shadow: 1px 1px 1px #c3c3c3;}
strong {font-weight:600;}
a {color:#005d1d; font-weight:600; font-style:normal; text-decoration:none; text-decoration:underline;}
.underline {text-decoration:underline;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}


/* ALLGEMEIN */
body {font-family: 'Bitter', serif, "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:300; background-color:#ffffff; color:#007223;}
header {width:100%; height:100px; color:#fff; padding: 20px 0 0 0;}
.wrapper {width:1180px;	margin:0 auto; padding:0 20px;}
.wrapper.small {width:700px;}


/* BILDER IM HEADERBEREICH */
#image-box-home {width:auto; text-align:center; margin:0 auto; padding-top: 7%;}
.home {background-image:url(images/murnau-werdenfelser-landschaft.jpg); background-repeat:no-repeat; background-position: center; margin-top:-100px; /*	background-position:bottom right 16%; background-size:620px; */}
.gq {background-image:url(../images/gepruefte-qualitaet.png); background-repeat:no-repeat; background-position:bottom right; background-size:auto; margin-bottom:10px;}


/* NAVIGATION */
#main-nav {position:fixed; z-index:9999;}
#main-nav ul li {float:none; margin-left:40px;}
#main-nav ul li a {color:#fff; text-decoration:none; font-size:1.1em; font-style:italic; font-weight:bold; text-shadow: 2px 2px #00290d;}
#main-nav ul li a:hover {color:#afd882;}
ol, ul {list-style: none;}
;

/* BEREICHE */
.content {width:100%; float:left;}
.normal {height:auto; text-align:center; padding:60px 0 60px 0;}
.normal-products-pic {height:auto; text-align:center; padding:0px 0px 0px 0px;}
.normal-products {height:auto; text-align:center; padding:15px 0px 30px 0px;}
.normal-link {height:auto; text-align:right; padding:15px 0px 30px 0px;}
.normal-additional {height:auto; text-align:center; padding:0 0 80px 0;}
.button-news {color: #FFF; background-color: #007223; padding: 13px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;} 
.button-link {color: #FFF !important; text-align: center; background-color: #71a84f; padding: 13px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}
.normal-news {height:auto; text-align:left; padding:80px 0 0 0;}
.normal-kontakt {height:auto; text-align:left; padding:80px 0 80px 0;}
.produkte {width:170px;	margin:0 auto; padding:0 20px;}
.area {height:auto; background-color:#007223; text-align:center; padding:70px 0 70px 0;}
.area-produkte {height:auto; background-color:#007223; text-align:center; padding:80px 0 20px 0;}
.area-bolognese {height:auto; background-color:#007223; text-align:center; padding:20px 0 40px 0;}
.area-impress {height:auto; background-color:#007223; text-align:left; padding:80px 0 60px 0;}
.area-marke {height:auto; background-color:#007223; text-align:left; padding:80px 0 60px 0;}
.area-data {height:auto; background-color:#007223; text-align:left; padding:80px 0 60px 0;}
.area-img {background:#fff; background-position:center; background-repeat:no-repeat; 
/*    background-size:100%; */
    text-align:center; 
    padding:0px 0 0px 0; 
    /*    height:600px;*/
}

/*TABELLE*/
table {border-collapse: collapse; border-spacing: 0; width:100%; margin-left: auto; margin-right: auto; margin-top:25px;}
  td {margin-top:0px;}


/* BILDER */
.artikelbild {max-width: 100%; height: auto;}
/*.images-vom-wirtshaus-suppen {background-image:url(images/vom-wirtshaus-suppen.png)}*/
.images-vom-wirtshaus-suppen {background-image:url(images/Fertige-Rindersuppe-und-Fertige-Bolognese-vom-wirtshaus.jpg)}
.images-der-pschorr {height: auto; background-image:url(images/vom-wirtshaus-der-pschorr.jpg)}
.images-rinder-aus-bayern {background-image:url(images/rinder-aus-bayern.jpg)}
.images-rinder-aus-bayern-auf-acker {background-image:url(images/rinder-aus-bayern-auf-acker.jpg)}
.images-rinder-aus-bayern-im-stall {background-image:url(images/rinder-aus-bayern-im-stall.jpg)}
#image-box {width:auto; text-align:center; margin:0 auto;}



/* RESPONSIVE DARSTELLUNG */
@media (max-width: 500px) {
    h1 {font-size:1.7em;}
	h2 {font-size:1.3em;}
	h2:after {width:100%; margin-left:0; left:0;}
    p {font-size:1.0em;}
	strong {font-size:1.0em;}
	#image-box  {width:100%;}    
    #image-box-home {width:auto; text-align:center;	margin:0 auto; padding-top: 15%;}
	#image-box-logo  {width:100%;}
	.area-img {height:192px;}
    .break-img {height:220px;}
    .imagehiddenunder500px  { display : none; } 
    .imageshownunder500px  { display : block; }
    .normal {padding:15px 0 15px 0;} 
    .area {padding:30px 0 20px 0;}
    .area-impress {padding:30px 0 20px 0;}
    .area-data {padding:30px 0 20px 0;} 
}

 @media (min-width:501px)  { 

 .imagehiddenunder500px  { display : block; } 
 .imageshownunder500px  { display : none; } 
} 


@media (max-width: 600px) {
    #nav-toggle {right:20px;}
    #nav-toggle-wrapper {right:14px;}
}

@media (max-width: 700px) {
    .ontop {z-index: 999; width: 100%; height: 100%; top: 0; left: 0; display: none; position: fixed; background-color:#f9eec5; color: #000; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-content: center; align-items: center;}
    #popup {width: 100%; height: 100%; color: #000000; background-color: #ffffff; padding:0px 20px 20px 20px;}
    #text-popup {position:fixed; left:0; top:8%; width:auto; height:auto; margin:0px 20px 0 130px; text-align:left;}
    #close-popup {position:fixed; right:20px; bottom:15px; width:auto; height:auto; text-align:left;}
    .img-popup {position:fixed; left:10px; top:4%; height:335px;}
}

@media (max-width: 700px) {
    table, thead, tbody, th, td, tr {display: block;}
    .wrapper.small {width:100%;}
}

@media (min-width: 701px) {
    .ontop {z-index: 99999; width: 100%; height: 100%; top: 0; left: 0; display: none; position: fixed; background-color:rgba(0,0,0,0.4); color: #000; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-content: center; align-items: center;}
    #popup {width: 480px; height: 490px; color: #000000; background-color: #fff; padding:0px 20px 20px 20px;}
    #text-popup {position:fixed; left:50%; top:50%; width:300px; height:auto; margin:-208px 0 0 -76px; text-align:left;}
    #close-popup {position:fixed; left:50%; top:50%; width:auto; height:auto; margin:-250px 0 0 210px; text-align:left;}
    .img-popup {position:fixed; left:50%; top:50%; width:auto; margin:-225px 0 0 -234px;}
}	

@media (max-width: 800px) {
	.home {/*	background-position:bottom right;*/ background-size:1000px; margin-top: -100px;}
/*    #image-box-home {padding-top: 0%;}*/
	.area-img {height:300px;}
    .normal {padding:50px 0 50px 0;}
    .normal-kontakt {padding:50px 0 50px 0;}
    .area-impress {padding:50px 0 35px 0;}
    .area-data {padding:0px 0 35px 0;}    
    #image-box-home {width:auto; text-align:center;	margin:0 auto; padding-top: 10%;}
}

@media (max-width: 1010px) {
    #nav-toggle {display: inline-block; position: fixed; padding: 12px 0; transition: 0.5s; cursor: pointer; user-select: none; opacity:0.8;}
    #nav-toggle #toggle:before, #nav-toggle #toggle:after {transition: 0.5s;}
    #toggle:before, #toggle:after {transition: 0.5s;}
    #toggle:before {top: .825rem;}
    #toggle:after {top: -.825rem;}
    #toggle {position: relative; width: 40px; background:#000; height: .3125rem; transition: 0.2s; border-radius: 2.5rem;}
    #toggle:before, #toggle:after {display: block; content: ""; height: .3125rem; width: 2.5rem; background: #000; position: absolute; z-index: -1; transition: 1s 0.5s; border-radius: 1rem;}
    #toggle:before {top: .625rem;}
    #toggle:after {top: -.625rem;}
    .open:not(.steps) #toggle:before,
    .open:not(.steps) #toggle:after {top: 0 !important;}
    .open #toggle:before,
    .open #toggle:after {transition: 1s;}
    
    /* × and + */
    .open #toggle {background: transparent;}
    .open #toggle:before {transform: rotate(-45deg);}
    .open #toggle:after {transform: rotate(45deg);}
    
    /*responsive Menu*/
	#main-nav {background-color:rgba(0, 44, 10, 0.8); right:-100%; top:0px; height:100%; padding-top:60px; transition: 0.5s; color:#370621;}
	#main-nav ul li { float:none; margin-left:0px; display:block;}
	#main-nav ul li a {padding:20px 40px; float:left;}
    #main-nav.active {display:inline-block; right:0;}
}

@media (max-width: 1010px) {
    #main-nav {position:fixed; z-index:9999;}
    #nav-toggle-wrapper {position:fixed; background-color:rgba(255,255,255,0.6); width:53px; height:41px; right:34px; z-index:899999;}
    #nav-toggle-wrapper.active {background-color:transparent;}
    #nav-toggle-wrapper.active #toggle:before, #nav-toggle-wrapper.active #toggle:after {background-color:#fff;}
    #nav-toggle {display:block !important; right:40px; top:26px; position:fixed;}
}

@media (min-width: 1011px) {
    #main-nav {background-color:rgba(0, 44, 10, 0.8); left:0px; top:0px; height:70px; width:100%; padding:16px 0px 0px 0px; text-align: center;}
    #main-nav ul li {display:inline; /* background-color: #FFF; */}
}

@media (max-width: 1200px) {
	.area-img {height:400px;}
	.home {background-size:1200px; margin-top:-100px;}    
    #image-box-home {padding-top: 10%;}
    .normal {padding:25px 0 25px 0;}        
    .normal-kontakt {padding:75px 0 75px 0;}
    .area-impress {padding:75px 0 60px 0;}
    .area-data {padding:0px 0 60px 0;} 
    .wrapper {width:100%;}
}

@media (max-width: 1600px) {
	.area-img {height:500px;}	
}

@media (min-width: 1601px) {
	.area-img {height:650px;}	
}