@font-face {font-family: 'Campton-Bold'; src: url('../webfonts/campton/37395F_0_0.eot');src: url('../webfonts/campton/37395F_0_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/campton/37395F_0_0.woff2') format('woff2'),url('../webfonts/campton/37395F_0_0.woff') format('woff'),url('../webfonts/campton/37395F_0_0.ttf') format('truetype');}  
@font-face {font-family: 'Campton-Light'; src: url('../webfonts/campton/37395F_1_0.eot');src: url('../webfonts/campton/37395F_1_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/campton/37395F_1_0.woff2') format('woff2'),url('../webfonts/campton/37395F_1_0.woff') format('woff'),url('../webfonts/campton/37395F_1_0.ttf') format('truetype');}
@font-face {font-family: 'Bushcraft-Bold'; src: url('../webfonts/bushcraft/36DBBB_4_0.eot');src: url('../webfonts/bushcraft/36DBBB_4_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/bushcraft/36DBBB_4_0.woff2') format('woff2'),url('../webfonts/bushcraft/36DBBB_4_0.woff') format('woff'),url('../webfonts/bushcraft/36DBBB_4_0.ttf') format('truetype');}

/*
Grau #F4F3F3
Grün #9dac9e
Braun: #5A5552
*/

* { box-sizing: border-box; }
html { font-size: 20px; }
body { line-height: 1.45em; font-family: 'Campton-Light', sans-serif; }

@media(max-width: 992px) {
	html { font-size: 16px; }
}

@media(min-width: 2000px) {
	html { font-size: 24px; }
}

/*Colors*/
.bg-color-white { background-color: #FFFFFF; }
.bg-color-green { background-color: #9dac9e; }
.bg-color-grey { background-color: #F4F3F3; }
.bg-color-brown { background-color: #5A5552; }

.text-color-white { color: #FFFFFF; }
.text-color-green { color: #9dac9e; }
.text-color-grey { color: #F4F3F3; }
.text-color-brown { color: #5A5552; }
.text-color-black { color: #000000; }

/*Sections & Containers*/
.section { position: relative; margin: auto; padding-left: 7vw; padding-right: 7vw; }
	.section > .container-fluid { max-width: 1800px; margin: auto; position: relative; }
	.section.section-nopadding { padding-left: 0 !important; padding-right: 0 !important; }

	.section-mood {  } 
		.section-mood .container-fluid > img { width: 100%; height: auto; }
		.section-mood .section-mood-overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 100; }
		.section-mood .section-mood-overlay > .container-fluid { position: absolute; width: 100%; height: 100%; }

	.section-bgimage { background-repeat: no-repeat; background-size: cover; background-repeat: no-repeat; background-position: center; }
		.section-bgimage > .container-fluid { margin-top: 5rem; margin-bottom: 5rem; }


@media(max-width: 768px) {
	.section-mood { padding-left: 0; padding-right: 0; } 
}

@media(max-width: 992px) {
	.section { padding-left: 4vw; padding-right: 4vw; }
}

@media(max-width: 576px) {
	.section { padding-left: 0; padding-right: 0; }
}

/*Illustrations*/
.section-illustration-item { position: absolute; width: 8vw; height: auto; top: -80px; z-index: 1000; }
.section-illustration-item.left { left: 0; margin-top: 30vh; }
.section-illustration-item.right { right: 0; }
	.section-illustration-item img { width: 100%; height: auto; }


@media(max-width: 992px) {
	.section-illustration-item { width: 5vw; }
}

@media(max-width: 576px) {
	.section-illustration-item { width: 3rem; }
}
	
/*Mood*/
.mood-headline { font-size: 6vw; font-weight: normal; font-family: 'Bushcraft-Bold'; color: #FFF; line-height: 1em; margin:0;  }
.mood-subheadline { color: #FFF; font-family: 'Campton-Light'; text-transform: uppercase; font-size: 2.5vw; line-height: 1em; margin:0; } 

@media(min-width:1600px) {
	.mood-headline { font-size: 4.5rem; }
	.mood-subheadline { font-size: 2rem; }
}

@media(max-width:768px) {
	.mood-headline { font-size: 10vw; }
	.mood-subheadline { font-size: 6vw; }
}

/*Footer*/
#section-footer { background: url(/assets/illustrationen/pasta-gericht.png) bottom left no-repeat, #F4F3F3; background-size: 20% auto; } 
	.logo-footer { max-width: 300px; height: auto; }

@media(max-width:576px) {
	#section-footer { padding-bottom: 12rem !important; background-size: auto 10rem; }
}

/*Typo*/
.text-small, small { font-size: .9rem; line-height: 1.3em;}
.text-large { font-size: 1.15rem; } 
.text-uppercase { text-transform: uppercase; letter-spacing: 1px; }

h1, h2, h3, h4, h5, h6 { line-height: .9em; margin-bottom: .5em; font-weight: normal; font-family: 'Bushcraft-Bold'; margin-top: 0; }
h1 { font-size: 3.5rem; }
h2 { font-size: 2.8rem; }
h3 { font-size: 2.1rem; }
h4, h5, h6 { font-size: 1.4rem; }

@media(max-width: 768px) {
	h1 { font-size: 2.5rem; }
	h2 { font-size: 2rem; }
	h3 { font-size: 1.6rem; }
	h4, h5, h6 { font-size: 1.3rem; }
}

h1.headline-sans-serif, h2.headline-sans-serif, h3.headline-sans-serif, h4.headline-sans-serif, h5.headline-sans-serif, h6.headline-sans-serif { font-family: 'Campton-Bold'; line-height: 1.2em; }
.headline-sans-serif.headline-font-light { font-family: 'Campton-Light' !important; }

a { text-decoration: none; color: #9dac9e; }
a:hover { color: #9dac9e; }
a:not(.btn):hover { text-decoration: none; opacity: .8; }

strong { font-family: 'Campton-Bold', sans-serif; font-weight: normal; }

/*Buttons*/
.btn { border-radius: 0; text-transform: uppercase; letter-spacing: 1px; font-size: .8rem; margin: .5rem 0; padding: 1em 1.5rem .5rem 1.5rem; color: #FFF; font-family: 'Campton-Bold'; }
	.btn.bg-color-white { color: #9dac9e; }

	.btn:hover { color: #FFFFFF; opacity: .8; } 
	.btn.bg-color-white:hover { color: #9dac9e; } 

/*General styles*/
.img-fluid-full { width: 100%; height: auto; display: block; }

/*Navibar*/
#section-navibar { background-image: url(/assets/illustrationen/moehre.png); background-position: top right 25%; background-repeat: no-repeat; background-size: 30vw auto; }
	#section-navibar img.logo-main { width: 100%; height: auto; max-height: 5rem; }

	#section-navibar nav { display: inline-block; float: right; margin-bottom: .5rem; }
		ul.navi { list-style-type: none; margin: 0; padding: 0; }
			ul.navi li { margin: 0; padding: 0; margin: 0 0 0 1vw; display: inline-block; }
			ul.navi li a { text-decoration: none; text-transform: uppercase; color: #5A5552; font-family: 'Campton-Bold'; font-size: 1vw; letter-spacing: 1px;  }
			ul.navi li.active a { color: #9dac9e; }

@media(max-width: 1380px) {
	#section-navibar nav { margin-bottom: 0; }
}

@media(max-width: 1200px) {
	#section-navibar { background:none; } 
	ul.navi li a { font-size: 1.4vw; }
}

@media(min-width: 2000px) {
	ul.navi li a { font-size: .9rem; }
}

@media(max-width: 992px) {
	#section-navibar { background: none; } 
}

/*Navi overlay*/
#navi-overlay { position: fixed; display: none; top: 0; left: 0; width: 100%; height: 100%; border: 1rem solid #F4F3F3; background-color: #9dac9e; overflow: hidden; z-index: 10000; }
	#navi-overlay #btn-navi-close { font-size: 2.5rem; color: #FFF; position: fixed; top: 2rem; right: 2rem; cursor: pointer; z-index: 10000; }
	#navi-overlay .container-fluid { width: 100%; height: 100%; padding: 3rem 0; position: absolute; overflow: auto; }
	#navi-overlay ul.navi { display: block; }
	#navi-overlay ul.navi li { display: block; margin: 1rem 0; padding: 0; text-align: center; }
	#navi-overlay ul.navi li a { font-size: 1.1rem; line-height: 1.3em; color: #FFFFFF; }
	#navi-overlay ul.navi li a:hover { color: #FFFFFF; }

	#navi-overlay .contact-button i { font-size: 3rem; color: #5A5552; margin-bottom: .5rem; }
	#navi-overlay .contact-button .label { display: block; font-size: .9rem; }
	#navi-overlay a { color: #5A5552; } 
	#navi-overlay a:hover { color: #FFFFFF; } 
	#navi-overlay .contact-button:hover { color: #FFFFFF; }
	#navi-overlay .contact-button:hover i { color: #FFFFFF; }

/*Tool buttons*/
#toolbutton-bar { position: fixed; top: 0; right: 0; text-align: right; z-index: 1000; display: block; }
	#toolbutton-bar a { display: inline-block; margin-left: .4rem; padding: .4rem .6rem .3rem .6rem; background-color: #9dac9e; color: #FFF; cursor: pointer; }
	#toolbutton-bar a i { font-size: 1.3rem; line-height: 1.3rem; }

@media(min-width: 992px) {
	#toolbutton-bar { right: calc(4vw+1.6rem); } 
	#toolbutton-bar #btn-navi { display: none; }
}

@media(max-width: 992px) {
	#toolbutton-bar { width: 100%; text-align: center; right: 0; }
	#toolbutton-bar a { margin-left: 0 .2rem; float: none; padding: .8rem .6rem .5rem .6rem; } 
	#toolbutton-bar a i { font-size: 1.8rem; }
}

/*Boxes*/
.box { border: 5px solid #443E3A; }
.box.border-green { border: 5px solid #9dac9e; }
	.box .box-icon { position: absolute; width: 4rem; text-align: center; top: -1.5rem; left: 0; text-align: center; width: 100%; }
	.box .box-icon i { font-size: 2.5rem; padding: 0 1.5rem; }
	.box .box-headline { position: absolute; width: 4rem; text-align: center; top: -1.5rem; left: 0; text-align: center; width: 100%; } 
	.box .box-headline .headline { display: inline-block; padding: 0 1.5rem; margin-top: .4rem; } 

.col-image { background-size: cover; background-position: center; background-repeat: no-repeat; }

/*Fancybox*/
.fancybox-bg { background-color: #9dac9e; }

/*Gallery*/
.gallery-scrollable {}

	.gallery-scrollable .slick-next, .slick-prev { margin-top: 0; width: 2rem; height: 3rem !important; z-index: 100; }
	.gallery-scrollable .slick-next { margin-right: 1.2rem; background-color: #9dac9e; }
	.gallery-scrollable .slick-prev { margin-left: 1.2rem; background-color: #9dac9e; }
	.gallery-scrollable .slick-next:before { font-family: "Font Awesome 5 Pro" !important; content:'\f105' !important; color: #FFFFFF !important; font-size: 3rem !important; }
	.gallery-scrollable .slick-prev:before { font-family: "Font Awesome 5 Pro" !important; content:'\f104' !important; color: #FFFFFF !important; font-size: 3rem !important; }
	.gallery-scrollable .slick-slider { margin-bottom: 0 !important; }
	.gallery-scrollable a.thumb { display: block; cursor: pointer;  }
	.gallery-scrollable a.thumb img { height: 225px; width: auto; }
	.gallery-scrollable a.thumb:hover img { opacity: .7; }

	.slick-dots { display: none !important; }

/*Startseite*/
#section-start-speisekarte { background: url(/images/startseite/genuss-zuhause-rollende-genussmanufaktur-de-kollunder.jpg) right bottom no-repeat; background-size: cover; }
	#section-start-speisekarte:before { position: absolute; content: ' '; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(90,90,90,.5); }

#section-start-oma {}
	#section-start-oma .col-image { background-image: url(/images/startseite/oma-im-kochtopf-de-kollunder.jpg); min-height: 400px; }

#mood-slides-start {}
	#mood-slides-start .slide { font-size: 2.5vw; line-height: 1.3em; margin-bottom: .3rem; color: #FFFFFF; font-family: 'Bushcraft-Bold'; }

/*Partyservice*/
#section-partyservice-menu { background: url(/images/partyservice/speisekarte-partyservice-rollende-genussmanufaktur-de-kollunder.jpg) center center no-repeat; background-size: cover; }
	#section-partyservice-menu:before { position: absolute; content: ' '; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(68,62,58,.7); }

@media(max-width: 768px) {
	#section-partyservice-menu { background-position: bottom right; }
}

/*Genussmanufaktur*/
#section-genussmanufaktur-konzept {}
	#section-genussmanufaktur-konzept .col-image { min-height: 300px; }

/*Genuss zuhause*/
#section-zuhause-menu { background: url(/images/genuss-zuhause/speisekarte-genuss-zuhause-rollende-genussmanufaktur-de-kollunder.jpg) center center no-repeat; background-size: cover;} 
	#section-zuhause-menu:before { position: absolute; content: ' '; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(157,172,158,.8); }

/*Gemeinsam geniessen*/
#section-gemeinsam-menu { background: url(/images/gemeinsam-geniessen/wochenplan-gemeinsam-geniessen-rollende-genussmanufaktur-de-kollunder.jpg) center center no-repeat; background-size: cover;}
	#section-gemeinsam-menu:before { position: absolute; content: ' '; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(157,172,158,.8); }

#section-gemeinsam-lernen {}
	#section-gemeinsam-lernen .col-image { background: url(/images/gemeinsam-geniessen/richtige-ernaehrung-gemeinsam-geniessen-rollende-genussmanufaktur-de-kollunder.jpg) center center no-repeat; background-size: cover; min-height: 350px; }

/*Über uns*/
#section-ueberuns-warum {}
	#section-ueberuns-warum .usp-item { font-size: 1.1rem; display: inline-block; margin: .5rem; }
	#section-ueberuns-warum .usp-item i { font-size: 1.4rem; margin-left: .3rem; margin-top: .3rem; }

@media(max-width: 592px) {
	#section-ueberuns-warum .usp-item { clear: both; display: block; } 
	#section-ueberuns-warum .usp-item i { margin-left: .5rem; }
}

#section-ueberuns-warum { background: url(/images/ueber-uns/warum-wir-ueber-uns-rollende-genussmanufaktur-de-kollunder.jpg) center center no-repeat; background-size: cover; }
	#section-ueberuns-warum:before { position: absolute; content: ' '; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(68,62,58,.7); }

#section-ueberuns-jobs { background: url(/images/ueber-uns/jobs-rollende-genussmanufaktur-de-kollunder.jpg) center center no-repeat; background-size: cover; }

@media(max-width: 992px) {
	#section-ueberuns-jobs { background-position: right bottom; }
}

#section-ueberuns-usp {}
	#section-ueberuns-usp .col-image { min-height: 300px; }

#section-ueberuns-team {}
	#section-ueberuns-team .col-image { min-height: 300px; }

/*Speisekarten Download*/
#section-speisekarten {}
	#section-speisekarten .download-link { display: block; font-size: 1.5rem; line-height: 1.3em; padding: 1rem; text-align: left; padding-left: 2.5rem; position: relative; border-top: 1px solid #F4F3F3; }
	#section-speisekarten .download-link:before { font-family: "Font Awesome 5 Pro"; content: '\f1c1'; position: absolute; left: 0; top: 1rem; font-size: 1.5rem;  }
	#section-speisekarten .download-link:hover:before { font-family: "Font Awesome 5 Pro"; content: '\f019'; }

/*Anruf*/
#section-anruf {}
	#section-anruf .label { font-size: 1.3rem; display: block; margin-top: 1rem; }
	#section-anruf .contact-button:hover { background-color: #9dac9e; color: #FFFFFF; }