@font-face {
    font-family: 'Intro-Black';
    src: url('assets/fonts/intro-black-webfont.eot');
    src: url('assets/fonts/intro-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/intro-black-webfont.woff') format('woff'),
         url('assets/fonts/intro-black-webfont.ttf') format('truetype'),
         url('assets/fonts/intro-black-webfont.svg#intro_blackregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Intro-Book';
    src: url('assets/fonts/intro-book-webfont.eot');
    src: url('assets/fonts/intro-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/intro-book-webfont.woff') format('woff'),
         url('assets/fonts/intro-book-webfont.ttf') format('truetype'),
         url('assets/fonts/intro-book-webfont.svg#intro_bookregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Font Awesome 5 Brands';
    src: url('assets/fonts/fa-brands-400.eot');
    src: url('assets/fonts/fa-brands-400.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/fa-brands-400.woff') format('woff'),
         url('assets/fonts/fa-brands-400.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* STRUCTURE ****************************************************/
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	overflow-x: hidden;
}
body {
	background-image: url(assets/images/bg_gruen_kachel.png);
  	background-repeat: repeat;
  	background-attachment: fixed;
  	font-family: "Intro-Book", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
}
.contentWrapper {
	position: absolute;
	width: 100%;
	max-width: 1340px;
    left: 50%;
    transform: translate(-50%, 0);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.contentWrapper.subPage {
	background: #860063;
}

header {
	z-index: 999;
	width: 100%;
	min-height: 50px;
	max-width: 1340px;
	position: fixed;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
}

#headerWrapper {
	position: relative;
    width: 100%;
    height: 370px;
    margin-top: -250px;
    transform: skewY(-8deg);
    background-color: #860063;
}
#introWrapper {
	position: relative;
	width: 100%;
	min-height: 30vh;
}
.purpleArea {
	position: relative;
	z-index: 2;
	height: auto;
	width: 100%;
	margin-top: -8%;
	margin-bottom: -8%;
	padding-top: 8%;
	padding-bottom: 8%;
	transform: skewY(-8deg);
	background-image: linear-gradient(0deg, #b5087a, #911265, #84155e);
	-webkit-box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.55);
	-moz-box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.55);
	box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.55);
}

.purpleContent {
	position: relative;
	display: flex;
	justify-content: space-between;
	padding: 0vh 4vw;
	transform: skewY(8deg);
}
.purpleColumn {
	position: relative;
	min-height: 20vh;
	//background-color: #00ff00;
}

.rightColumn {
	top: -7vh;
}

.parallaxArea {
	position: relative;
	z-index: 0;
	width: 100%;
	background-color: #fff;
	overflow: hidden;
}
.background {
  position: absolute;
  left: 0;
  right: 0;
  top: -100px;
  bottom: -100px;
  z-index: -1;
  background-position: center center;
  background-repeat: repeat-y;
  background-size: 100% auto; 
}
.bg-cranberrygoji .background {
  background-image: url("assets/images/deko_cg.jpg");
}
.bg-cocoaalmond .background {
  background-image: url("assets/images/deko_ca.jpg"); 
}
.bg-cashewcoconut .background {
  top: -200px;
  background-image: url("assets/images/deko_cc.jpg"); 
}

footer {
    z-index: 200;
    background: #860063;
    width: 100%;
    height: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
    position: relative;
    text-align: center;
    bottom: 0;
}

#footernav {
	display: inline;
	padding: 0 !important;
}

#footerNav li {
	list-style: none;
	display: inline-block;
	margin-left: 10px;
	margin-right 10px;
}

#footerNav li, #footerNav li a {
	font-family: "Intro-Black", sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
}


#footerNav li.first {
	margin-left: 0px;
}
@media (max-width: 599px) { 
	.contentWrapper {overflow: hidden;}
	.video {display: none;}
	
	#headerWrapper {
		margin-top: -280px;
	}

	.purpleContent {
		display: block;
		padding-top: 2vh;
    	padding-bottom: 2vh;
	}
	.cocoa .purpleContent { 
		display: flex;
    	flex-direction: column-reverse;
    } 
    .cocoa .titleColumn { top: 0; }
    .cocoa .descriptionColumn {top: 1vh;}
    .rightColumn { top: 1vh; }
    .cocoa .titleColumn h2 {
    	text-align: left;
    }

	.purpleColumn { width: 100%; }
	.parallaxArea { height: 550px; }

	#footernav { font-size: 0.8rem; }
}
@media (min-width: 600px) {
	.contentWrapper {overflow: hidden;}
	.video {display: none;}
	.purpleContent {
		display: block;
	    padding-top: 2vh;
    	padding-bottom: 2vh;
	}
	.cocoa .purpleContent { 
		display: flex;
    	flex-direction: column-reverse;
    } 
    .cocoa .titleColumn { top: 0; }
    .cocoa .descriptionColumn {top: 3vh;}
    .rightColumn { top: 1vh; }
    .cocoa .titleColumn h2 {
    	text-align: left;
    }
	.purpleColumn { width: 100%; }
	.parallaxArea { height: 500px; }
}
@media (min-width: 900px) {
	.contentWrapper {overflow: visible;}
	.video {display: block;}
	.purpleContent {display: flex;}
	.cocoa .purpleContent { 
		display: flex;
    	flex-direction: row;
    } 
	.titleColumn {width: 58%;}
	.descriptionColumn {width: 38%;}
    .cocoa .descriptionColumn {top: 0;}
    .rightColumn { top: -4.5vh; }
    .cocoa .titleColumn { top: -7vh; }
	.cocoa .titleColumn h2 {
    	text-align: right;
    }
	.parallaxArea { height: 600px; }
}
@media (min-width: 1200px) {
	.contentWrapper {overflow: visible; max-width: 1340px;}
	.video {display: block;}
	.leftColumn.titleColumn {width: 58%; padding-top: 5vh;}
	.descriptionColumn {width: 38%;}
	.parallaxArea { height: 750px; }
	#parallax3 { height: 550px; }
}

/* HEADER & MAIN NAVIGATION ************************************************************/
#logoWrapper {
	width: 25%;
    transform: skewY(8deg);
    position: absolute;
    bottom: 50px;
    left: 40px;
}
#mainNav {
	position: absolute;
	bottom: -10px;
}
#mainNav li {
	list-style: none;
	float: left;
	height: 2vh;
	margin-right: 0.75vw;
}
#mainNav li a {
	color: #ffffff;
	font-family: 'Intro-Black', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
}
#mainNav:after {
	clear: both;
}
#mainNav a {
    font-size: 1.3rem;
    padding: 4px 10px 3px 10px
}
#mainNav #cranberryBTN a {
	background: #ef275e; 
}
#mainNav #cranberryBTN a:hover, #mainNav #cranberryBTN a:focus, #mainNav #cranberryBTN a:active {
	background: #f35681; 
}
#mainNav #cocoaBTN a {
background: #a15138; 
}
#mainNav #cocoaBTN a:hover, #mainNav #cocoaBTN a:focus, #mainNav #cocoaBTN a:active {
  background: #c1674b; 
}
#mainNav #cashewBTN a {
color: #991c76;
background: #f1d899; 
}
#mainNav #cashewBTN a:hover, #mainNav #cashewBTN a:focus, #mainNav #cashewBTN a:active {
  background: #f7e9c6; 
}
#cranberryBTN, #cocoaBTN, #cashewBTN {
    box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
}
.socialIcon {
    position: relative;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.3);
	transform: skewX(13.5deg);
}
#mainNav .socialIcon a {
	font-size: 2.4rem;
	padding: 0;
	position: relative;
    top: -13px;
}

.fab {
    font-family: 'Font Awesome 5 Brands';
}

.fa-facebook-square:before {
    content: "\f082";
}
.fa-instagram:before {
    content: "\f16d";
}

.slicknav_btn,
.slicknav_icon {
	height: 20px;
	width: 20px;
	float: right;
}

.slicknav_icon-bar {
	background: #fff;
}

@media (max-width: 900px) { 
	#logoWrapper { 
		width: 45%;
		bottom: 5px;
		left: 20px;
	}
	 #mainNav { display: none; }
	.slicknav_menu { display: block; }
}

@media (max-width: 420px) { 
	#logoWrapper { 
		width: 55%;
		bottom: 10px;
		left: 15px;
	}
}


@media (min-width: 901px) { 
	 #mainNav { display: block; }
	.slicknav_menu { display: none; }
}


/* INTRO ***********************************************************/

#introWrapper {
	  background: url(assets/images/bg_header_mobile.jpg) no-repeat center center/cover;
}
#claimHeader {
	position: absolute;;
	width: 60%;
	height: auto;
	left: 50%;
	top: 35%;
	transform: translate(-50%, 0%);
	z-index: 2;
}

#splashHeader {
	position: absolute;;
	width: auto;
	height: auto;
	left: 50%;
	top: 74%;
	transform: translate(-50%, 0%);
	z-index: 999;
}

.video {
	overflow: hidden;
}
video {
	width: 100%;
	max-width: 1340px;
	height: auto;
	position: relative;
	margin-top: 15px;
}

@media (max-width: 900px) {
	#introWrapper {
		height: 50vh;
	}

	#splashHeader {
		width: 90%;
		top: 75%;
	}
}

@media (max-width: 599px) {
	#claimHeader {
		width: 90%;
		top: 45%;
	}

	#splashHeader {
		width: 90%;
		top: 88.5%;
	}

	#introWrapper {
		height: 80vh !important;
	}
}


@media (min-width: 901px) {
	#claimHeader {
		width: 50%;
	}
}

/* RIEGEL **********************************************************/

.riegel {
	position: absolute;
	z-index: 800;
	pointer-events: none;
}
.riegel .upper {
	z-index: 1;
	position: relative; 
}
.riegel .upper .package {z-index: 2; }
.riegel .upper .ripoff {z-index: 3; }
	.riegel .dropshadow, .riegel .package, .riegel .ripoff {
    z-index: 0;
    left: 0;
    top: 0;
    position: absolute; 
}


.riegel {opacity: 0;}




@media (max-width: 599px) {
	.riegel img {width: 145%;}
	#riegel1 {opacity: 1;}
	#riegel1 {transform: translate(-300px, 100%);}
	#riegel2 {transform: translate(1100px, 100%);}
	#riegel3 {transform: translate(-300px, 100%);}
}
@media (min-width: 600px) and (max-width: 899px){ 
	.riegel {width: 100%;}
	#riegel1 {opacity: 0;}
	#riegel1 {transform: translate(-600px, 65%);}
	#riegel2 {transform: translate(1100px, 65%);}
	#riegel3 {transform: translate(-600px, 65%);}
}
@media (min-width: 900px) and (max-width: 1199px) { 
	.riegel {width: 70%;}
	#riegel1 {opacity: 1;}  
	#riegel1 {transform: translate(-200px, 7%);}
	#riegel2 {transform: translate(1100px, 15%);}
	#riegel3 {transform: translate(-600px, 10%);}
	}
@media (min-width: 1200px) {
	#riegel1 {opacity: 1;} 
	#riegel1 {transform: translate(-200px, 30%);}
	#riegel2 {transform: translate(1100px, 20%);}
	#riegel3 {transform: translate(-600px, 30%);}
}


/* CONTENT **********************************************************/

.productTitle {
	color: #fff;
	font-family: 'Intro-Black', sans-serif;
	text-transform: uppercase;
	text-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	line-height: 1;
	margin: 0;
}

.rightColumn .productTitle {text-align: right;}

.productHeadline {
	color: #fff;
	font-family: 'Intro-Black', sans-serif;
	text-transform: uppercase;
	line-height: 1;
}

.ampersand {
	height: auto;
	position: relative; 
}

.btnWrapper {
	display: flex;
	justify-content: space-between;
}


.btn {
	display: block;
    width: 50%;
	color: #fff;
	font-family: 'Intro-Black', sans-serif;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    user-select: none;
	padding: 0.5rem 0.5rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-decoration: none;
}

.btnNutrition {
	border: 2px solid #fff;
	margin-right: 5%
}
.btnNutrition:hover {
	color: #991c76;
	background: #fff;
}

.btnBuy {
	background-color: #bac300;
	border: 2px solid #bac300;
}
.btnBuy:hover {
    background-color: #969d00;
    border: 2px solid #969d00;
}



@media (max-width: 599px) { 
	.productTitle { font-size: 3.3em;}
	.productHeadline { font-size: 1.5em; }
	.ampersand {
		width: 1.3rem;
    	margin-left: 0.5rem;
	}
	.btnWrapper {width: 100%;}
}
@media (min-width: 600px) { 
	.productTitle { font-size: 7em; }
	.productHeadline { font-size: 2em; }
	.ampersand {
		width: 1.5rem;
    	margin-left: 0.7rem;
	}
	.btnWrapper {width: 70%;}
}
@media (min-width: 900px) { 
	.productTitle { font-size: 5em; }
	.productHeadline { font-size: 2.5em; }
	.ampersand {
		width: 1.8rem;
    	margin-left: 0.7rem;
	}
	.btnWrapper {width: 100%;}
}
@media (min-width: 1200px) {
	.productTitle { font-size: 6.3em; }
	.productHeadline { 
		font-size: 3em; 
	}
	.ampersand {
		width: 2.2rem;
    	margin-left: 1rem;
	}
	.btnWrapper {width: 80%;}

}

/* LIGHTBOXES **************************************************************************/

body > .overlay { display: none; }
body.overlay { overflow: hidden; }

body.overlay > .overlay {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 
}
    
body.overlay > .overlay .outer {
	display: block;
	overflow-y: scroll;
	background: rgba(124, 8, 84, 0.9);
	-webkit-overflow-scrolling: touch;
	height: 100%;
	width: 100%;
	text-align: center;
	vertical-align: middle; 
}

.lightboxContent {
	padding: 25px;
	padding-top: 60px;
	text-align: center;
}

.lightboxContent .productHeadline {
	font-family: "Intro-Black";
	text-transform: uppercase;
	font-size: 2rem;
	line-height: 1;
}
.lightboxContent .ampersand {
	height: 2rem;
	margin-left: 0.5rem;
}

@media (min-width: 577px) {
  
	body.overlay > .overlay .outer {
		overflow: hidden;
		overflow-y: hidden;
		display: table-cell; 
 	} 
}
body.overlay > .overlay .inner {
	color: #fff;
	margin: 0 auto 50px auto;
	text-align: left; 
}

body.overlay > .overlay .quit {
	outline: none;
	display: block;
	position: absolute;
	right: 10px;
	top: 10px;
	width: 30px;
	height: 30px;
	z-index: 1010; 
}

@media (min-width: 769px) {
	body.overlay > .overlay .quit {
		right: 20px;
		top: 20px;
		width: 60px;
		height: 60px;
	} 
}


.d-block {
  display: block !important; }
.d-sm-table {
display: table !important; }





.textpage {
	background: #860063 !important;
	height: 100%;
	padding-top: 250px;
	padding-left: 40px;
	padding-right: 40px;
}

.textpage a {
	color: #fff;
}

.textpage h1 {
	font-size: 2rem;
	text-transform: uppercase;
	font-family: "Intro-Black", sans-serif;
}

@media (max-width: 599px) {
	.textpage {
		padding-top: 100px;
		padding-left: 15px;
		padding-right: 15px;
	}
}