/* =================================================================== */
/* Javascript Warnung und setzen der Klasse							   */
/* =================================================================== */
.js_off	{ }
.js_on	{ }

.js_Warning			{ display:none; }
.js_on .js_Warning	{ display:none; }
.js_off .js_Warning	{
	display:block;
	position:fixed;
	left:0px; right:0px; bottom:0px;
	padding:10px;
	background-color:#606060; color:#FFFFFF;
	font-size:14px;
	line-height:18px;
}
.js_off .js_Warning .cmmp_Wrapper 		{ font-size:18px; line-height:22px; }
.js_off .js_Warning .cmmp_Wrapper div	{ font-weight:bold; }
span.js_warning_text1::before			{ content:"Bitte aktivieren Sie JavaScript und laden Sie die Seite neu!"; }
span.js_warning_text2::before			{ content:"Für die korrekte Darstellung und Nutzbarkeit der Webseite wird JavaScript vorausgesetzt."; }

/* =================================================================== */
/* Service Klassen													   */
/* =================================================================== */

.left	{ float:left !important; }
.right	{ float:right !important; }
.clear	{ clear:both !important; }

.posrel			{ position:relative !important; }
.poslefttop		{ position:absolute; left:0px; top:0px; }
.posrighttop	{ position:absolute; right:0px; top:0px; }

.posfixed		{ position:fixed !important; }

.w25	{ width:25% !important; }
.w33	{ width:33.333333% !important; }
.w40	{ width:40% !important; }
.w50	{ width:50% !important; }
.w66	{ width:66.666666% !important; }
.w75	{ width:75% !important; }
.w80 	{ width:80% !important; }
.w90	{ width:90% !important; }
.w100	{ width:100% !important; }

/* Ab Extra Large -xl- Darstellen */
@media (min-width: 992px) {
	.w-lg-50 {
		width:50% !important;
	}

	.w-lg-33 {
		width:33% !important;
	}
}

/* Ab Extra Large -xl- Darstellen */
@media (min-width: 1200px) {
	.w-xl-50 {
		width:50% !important;
	}
}

.img100 img	{ width:100%; height:auto; }

.ttu	{ text-transform:uppercase !important; }
.tdu 	{ text-decoration:underline !important; }	
.tdn 	{ text-decoration:none !important; }

.cursor-pointer {
	cursor:pointer;
}

/* Bootstrap d-none ist !important und funzt nicht mit JS .show !!! */
.disnone	{ display:none; }

/* Entsättigen - Graustufen und :hover normal Darstellung */
.desaturate {
	filter: grayscale(100%); /* Standard */
	-webkit-filter: grayscale(100%); /* Webkit */
/*	filter: url(/elements/grayscale.svg#desaturate); /* Firefox 4-34 */
	filter: gray;  /* IE6-9 */
	-webkit-filter: grayscale(1); /* Old WebKit */
}
.desaturate:hover {
	filter: grayscale(0%);
	filter: none;
	-webkit-filter: grayscale(0); /* Old WebKit */
}

/* Auswahl nicht ermöglichen */
.deselect ::selection,
.deselect ::-moz-selection {
    background:transparent;
    color:inherit;
}
.deselect {
    -ms-user-select:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
}

/* transparent darstellen */
.transparent {
	-khtml-opacity: 0.6;		/* sehr alte Versionen von Mozilla Firefox */
	-moz-opacity: 0.6;			/* alte Versionen von Mozilla Fireox */
	-webkit-opacity: 0.6;		/* alte Versionen von Webkit-Browsern */
	filter: alpha(opacity=60);	/* ältere Versionen des Internet Explorers inklusive Version 7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* Internet Explorer Version 8 */
	opacity: 0.6;				/* Der Befehl mit Gültigkeit in aller gängigen Browsern der Neuzeit */
}

/* runde Ecken */
.boxrounded, /* alt- kompatibilität !!! */
.rounded { 
	 -webkit-border-radius: 4px;
		-moz-border-radius: 4px;
			 border-radius: 4px;
}

/* mit Schatten darstellen */
.boxshadow, /* alt- kompatibilität !!! */
.shadow	{
	-webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);
	   -moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);
			box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);
}

/* Bild zoomen bei Hover */
.zoom-pic		{ overflow:hidden; }
.zoom-pic img {
    -webkit-transform: scale(0.9,0.9);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(0.9,0.9);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    transform: scale(0.9,0.9);
    transition-timing-function: ease-out;
    transition-duration: 250ms;
}
.zoom-pic:hover img {
    -webkit-transform: scale(1,1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1,1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    transform: scale(1,1);
    transition-timing-function: ease-out;
    transition-duration: 250ms;
}

/* Text oben Mittig im Bild */
.PicInlineHeadline {
	position:absolute; left:0px; top:0px; right:0px;
}
.PicInlineHeadline > span {
	display:inline-block; 
	padding:10px 20px 10px 20px;
	color:#FFFFFF; 
	font-size:36px; line-height:36px; font-weight:bold;
	background:url(/media/service/transparent-black-80.png) center top repeat;
}

/* Zeilen & Spalten in Tabellen einfärben */
table.dye-col-even > tr:nth-child(even),
table.dye-col-even > tbody > tr:nth-child(even),
table.dye-col-odd > tr:nth-child(odd),
table.dye-col-odd > tbody > tr:nth-child(odd),
table.dye-row-even > tr > td:nth-child(even),
table.dye-row-even > tbody > tr > td:nth-child(even),
table.dye-row-odd > tr > td:nth-child(odd),
table.dye-row-odd > tbody > tr > td:nth-child(odd)		{ background:url(/media/service/transparent-black-90.png) left top repeat; }


/* =================================================================== */
/* Allgemeine Klassen												   */
/* =================================================================== */

/* Header */
.cmmp_Header {
	height:71px; 
	background-color:#FFFFFF;
	border-bottom:2px solid #B4CC1E;
}
.cmmp_Main { 
	min-height:160px;
	margin-top:71px;
}

/* Footer - Design siehe "Footer Menu" */
.cmmp_Footer				{ color:#323232; background-color:#FFFFFF; }
.cmmp_Footer h5				{ font-size:18px; line-height:20px; text-transform:uppercase; }
.cmmp_Footer ul				{ list-style:none; margin:0px; padding:0px; }
.cmmp_Footer li				{ margin:0px 0px 8px 0px; font-size:14px; line-height:22px; }
.cmmp_Footer li a,
.cmmp_Footer li a:link,
.cmmp_Footer li a:visited,
.cmmp_Footer li a:active	{ color:#323232; text-decoration:none; }
.cmmp_Footer li a:focus,
.cmmp_Footer li a:hover		{ color:#000000; text-decoration:underline; }
.copyright					{ font-size:14px; line-height:16px; color:#AAAAAA; }
/* Ab Medium -md- Darstellen */
@media (min-width: 768px) {
	.cmmp_Footer li				{ margin:0px 0px 5px 0px; font-size:14px; line-height:22px; }
}
.footer-social {
	display:inline-block;
}


/* Pfad Darstellung */
.cmmp_Breadcrumb							{ font-size:10px; line-height:16px; text-transform:uppercase; color:#A0A0A0; padding:20px 10px 10px 10px; }
.cmmp_Breadcrumb ol							{ margin:0px; padding:0px; list-style:none; }
.cmmp_Breadcrumb li							{ float:left; margin:0px; padding:0px; }
.cmmp_Breadcrumb li::after					{ content:"»"; color:#808080; font-weight:normal; font-size:18px; padding:0px 4px 0px 4px; }
.cmmp_Breadcrumb li:last-child::after		{ content:""; padding:0px; }

.cmmp_Breadcrumb a,
.cmmp_Breadcrumb a:link,
.cmmp_Breadcrumb a:visited,
.cmmp_Breadcrumb a:active				{ color:#A0A0A0; text-decoration:none; }
.cmmp_Breadcrumb a:focus,
.cmmp_Breadcrumb a:hover				{ color:#2D2189; text-decoration:underline; }

/* iframes responsive darstellen */
.iframe-container {
	position: relative; 
	padding-bottom: 56.25%; /* ratio 16x9 */
	height: 0; 
	overflow: hidden; 
	width: 100%;
	height: auto;
 }

.iframe-container iframe {
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}

.iframe-container.ratio4x3 {
	padding-bottom: 75%; /* ratio 4x3 */
}

.iframe-container.ratio-responsive-small {
	padding-bottom: 90%;
}
@media (min-width: 576px) {
	.iframe-container.ratio-responsive-small {
		padding-bottom: 35%;
	}
}
/* Ab Medium -md- Darstellen */
@media (min-width: 768px) {
	.iframe-container.ratio-responsive-small {
		padding-bottom: 25%;
	}
}
/* Ab Large -lg- Darstellen */
@media (min-width: 992px) {
	.iframe-container.ratio-responsive-small {
		padding-bottom: 15%;
	}
}

/* Boxen / Listen etc. mit gleicher höhe darstellen */
.flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

.error-color {
	color:#E00000;
}
.error-msg {
	color:#E00000;
	margin-bottom:1rem;
}
.ok-color {
	color:#869A16;
}
.ok-msg {
	color:#869A16;
	margin-bottom:1rem;
}


/* =================================================================== */
/* Warenkorb 														   */
/* =================================================================== */

.caddy {
}
.caddy .designation {
	font-weight:bold;
	font-size:18px;
}
.caddy .designation2 {
}
.caddy .order-number {
}
.caddy .min-order {
}
.caddy .extra-context-data {
}

.caddy .font-small {
	font-size:12px; line-height:16px;
}

/* Anzahl ändern */
.caddy .count-number-entry {
}
.caddy .count-number-entry .input-field {
	width:70px; margin-right:5px;
}
.caddy .count-number-buttons {
}
.caddy .count-number-buttons .input-field {
	width:50px;
}
.caddy .article-remove {
}
.caddy .article-remove .submit-button {
	background:none; border:none; font-size:12px; margin:0px 0px 0px 25px;
}

.caddy .total-sum {
	font-size:26px;
	line-height:30px;
}

.caddy-count-nav {
	width:26px;
	height:26px;

	position:absolute;
	right:-8px; top:-9px;

	 -webkit-border-radius: 13px;
		-moz-border-radius: 13px;
			 border-radius: 13px;
	background-color:#B4CC1E;
	color:#FFFFFF;
	font-weight:bold;
	font-size:15px;
	line-height:26px;
	text-align:center;
}

/* Subsys: gfomixer (100) */
.caddy .cup-data {
}
.caddy .ingredients {
	font-size:14px; line-height:20px;
}

/* Subsys: Coupon (90) */

.caddy .coupon-not-active {
	opacity: 0.6;
}

.caddy .coupon-font-small {
	font-size:12px; line-height:16px;
}

/* =================================================================== */
/* Checkout 														   */
/* =================================================================== */

.checkout {
}

.checkout .delivery-adress {
	display:none;
}

.checkout .font-small {
	font-size:12px; line-height:16px;
}


/* checkout order-list */
.checkout .designation {
	font-weight:bold;
}
.checkout .designation2 {
}
.checkout .order-number {
}
.checkout .min-order {
}
.checkout .extra-context-data {
}

.checkout .total-sum {
	font-size:26px;
	line-height:30px;
}

/* Subsys: gfomixer (100) */
.checkout .cup-data {
}
.checkout .ingredients {
	font-size:14px; line-height:20px;
}

.checkout .order-summary {
	padding:10px;
	border:2px solid #B4CC1E; 
	background-color:#E8F2AA;
}

/* Subsys: Coupon (90) */
.checkout .coupon-font-small {
	font-size:12px; line-height:16px;
}

/* =================================================================== */
/* News / Blog */
/* =================================================================== */

.blog {
}
.blog img {
	width:100% !important;
}

.blog .list-content-count {
	margin-bottom:15px;
}

.blog .list-entry {
}

.blog .list-link {
}

.blog .list-subject {
}

.blog .list-image {
	margin-bottom:20px;
}

.blog .list-description {
}

.blog .list-infos {
	font-size:12px;
}

.blog .detail-back {
	margin:0px 0px 10px 0px;
}

.blog .detail-no-entry {
}

.blog .detail-info {
	font-size:12px;
}

.blog .detail-subject {
}

.blog .detail-content {
}

.blog .detail-content img {
	width:100%;
	height:auto;
}

/* =================================================================== */
/* Produkt															   */
/* =================================================================== */
.product {
}

.product .pimage {
	display:flex;
	flex-direction:column; 
	justify-content:center;
	align-items: center;
}
.product .pimage img {
	max-height:300px;
	width:auto;
}

.product .vimage {
	display:flex;
	flex-direction:column; 
	justify-content:center;
	align-items: center;
	text-align:center;
}
.product .vimage img {
	max-height:80px !important;
	width:auto !important;
}

/* =================================================================== */
/* Suche															   */
/* =================================================================== */

/* Suchergebnis */
.SearchResult		{ }
.SearchResultStep	{ margin-bottom:20px; }
.SearchResultTitle	{ font-weight:bold; }
.SearchResultUrl	{ color:#808080; }
.SearchResultBody	{ }

/* =================================================================== */
/* Pager															   */
/* =================================================================== */
.Pager						{ display:inline-block; }
.Pager ul					{ list-style:none; padding:0px; margin:0px; }
.Pager li					{ padding:0px; margin:0px; float:left; font-size:16px !important; line-height:16px !important; }
.Pager li.seite				{ padding:10px 10px 10px 0px; }

.Pager li a,
.Pager li a:link,
.Pager li a:visited,
.Pager li a:active			{ display:block; padding:10px; }
.Pager li a:focus,
.Pager li a:hover			{ display:block; text-decoration:underline; background-color:#B4CC1E; color:#FFFFFF; }

.Pager li.active			{ padding:10px; font-weight:bold; color:#B4CC1E; }
.Pager li.active:focus,
.Pager li.active:hover		{ background-color:#B4CC1E; color:#FFFFFF; text-decoration:underline; }

.Pager li.active a,
.Pager li.active a:link,
.Pager li.active a:visited,
.Pager li.active a:active	{ display:block; color:#B4CC1E; }
.Pager li.active a:focus,
.Pager li.active a:hover	{ display:block; background-color:#B4CC1E; color:#FFFFFF; text-decoration:underline; }

/* =================================================================== */
/* Projektbezogen: 													   */
/* =================================================================== */

/* Farben */
.color-white 		{ color:#FFFFFF; }
.color-green-light 	{ color:#E8F2AA; }
.color-green 		{ color:#B4CC1E; }
.color-green-dark 	{ color:#869A16; }
.color-black 		{ color:#000000; }
.color-gray 		{ color:#707070; }

.bgcolor-green-light 	{ background-color:#E8F2AA; }
.bgcolor-green 			{ background-color:#B4CC1E; }
.bgcolor-green-dark 	{ background-color:#869A16; }

.border-2 				{ border-top:2px solid #B4CC1E; }
.borderbox-2 			{ border:2px solid #B4CC1E; }

/* Ab Large -lg- Darstellen */
@media (min-width: 992px) {
	/* Header Anzahl im Warenkorb */
	.caddy-count-nav {
		right:-10px; top:-10px;
	}
}

/* Mixer: Produkte zum hinzufügen */
.MixerBoxHeadline {
	background-color:#FFFFFF;
	padding:5px 0px 5px 0px;
	margin:10px 0px 15px 0px;
	border-top:1px solid #B4CC1E;
	border-bottom:1px solid #CCCCCC;
	-webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);
	   -moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);
			box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);

	/* Sticky */
    position: relative; /* Fallback */
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top:71px;
	z-index:600;
}
.MixerBoxHeadline span.title {
	display:inline-block;
	padding:0px 10px 0px 10px;
	margin:0px;
	background-color:#FFFFFF;
	text-transform:uppercase;
	font-weight:bold;
}
.MixerBoxHeadline h2 {
	margin:0px 12px 0px 12px;
	padding:0px;
	font-size:16px;
	line-height:20px;
	text-align:center;
}
.MixerBoxHeadline h2.YourMix {
	/*background-color:#E8F2AA;*/
}
.MixerBoxHeadline h2.Base {
	background-color:#E8F2AA;
}
.MixerBoxHeadline h2.Flakes {
	background-color:#FFE9C4;
}
.MixerBoxHeadline h2.Fruids {
	background-color:#FFC4CA;
}
.MixerBoxHeadline h2.Nuts {
	background-color:#B3E2E4;
}
.MixerBoxHeadline h2.Specials {
	background-color:#B3E4B7;
}

.MixerIngredientsArea {
}

.MixerIngredientsArea .ClickArea {
	/*cursor:not-allowed;*/
}
.MixerIngredientsArea .basis_set,
.MixerIngredientsArea .ingredient_add {
	cursor:pointer;
}

.MixerIngredientsArea .basis-choose-layer {
}
.MixerIngredientsArea .mixer-part-layer {
	/* display:none; */
}

.MixerBoxIngredients {
	position:relative;
	padding:0px;
	height:214px;
	border:1px solid #B4CC1E;
	 -webkit-border-radius: 18px;
		-moz-border-radius: 18px;
			 border-radius: 18px;
	border-bottom:0px;
}
.MixerBoxIngredients .InActive {
	position:absolute;
	left:0px; top:0px;
	right:0px; bottom:0px;
	z-index:500;
	background:url("/media/service/transparent-white-50.png") left top repeat;
}
.MixerBoxIngredients .MainPic {
	padding:4px;
	text-align:center;
	height:100px;
}
.MixerBoxIngredients .MainPic img {
	width:auto;
	height:auto;
	max-width:100%;
	max-height:120px;
}
.MixerBoxIngredients .MainPic.ingredient_add {
	cursor:pointer;
}

.MixerBoxIngredients .MainPic .AnimatePic {
	position:absolute;
	top:4px; left:calc(50% - 60px); 
	z-index:1000;
	display:none;

	transform: scale(1);
	transition: transform .5s;
	transition-timing-function: ease;
	transition-delay: 150ms;
}
.MixerBoxIngredients .MainPic .AnimatePic.animate {
	transform: scale(.5);
}

.MixerBoxIngredients .Designation {
	margin-top:10px;
	font-weight:bold;
	text-align:center;
}

.MixerBoxIngredients .PlusCountMinus {
	position:absolute;
	left:0px; right:0px; bottom:0px;
	z-index:100;
	height:38px;
	text-align:center;
	border:1px solid #B4CC1E;
	 -webkit-border-radius: 18px;
		-moz-border-radius: 18px;
			 border-radius: 18px;
}
.MixerBoxIngredients .PlusCountMinus .PlusMinus {
	width:36px;
	height:36px;
	 -webkit-border-radius: 18px;
		-moz-border-radius: 18px;
			 border-radius: 18px;
	background-color:#B4CC1E;
	color:#FFFFFF;
	font-weight:bold;
	font-size:24px;
	line-height:36px;
	text-align:center;
	cursor:pointer;
}
.MixerBoxIngredients .PlusCountMinus .Wrapper {
	width:36px; height:36px;
}
.MixerBoxIngredients .PlusCountMinus .Wrapper.Plus {
	margin:0px -1px -1px 0px; /* Damit der Button mit der Außenlinie übereinstimmt */
}
.MixerBoxIngredients .PlusCountMinus .Wrapper.Minus {
	margin:0px 0px -1px -1px; /* Damit der Button mit der Außenlinie übereinstimmt */
}

.MixerBoxIngredients .PlusCountMinus .Count {
	line-height:36px;
}

.MixerBoxIngredients .PlusCountMinus .NotAvailable {
	line-height:36px;
	font-style:italic;
}
.MixerBoxIngredients .PlusCountMinus .Available {
	line-height:36px;
}

.MixerBoxIngredients .InfoButton {
	position:absolute;
	right:-1px; top:-1px; /* Damit der Button mit der Außenlinie übereinstimmt */
	width:36px;
	height:36px;

	border:1px solid #B4CC1E;
	 -webkit-border-radius: 18px;
		-moz-border-radius: 18px;
			 border-radius: 18px;

	background-color:#FFFFFF;
	color:#B4CC1E;

	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	text-align:center;
	font-weight:bold;
	font-size:24px;
	line-height:36px;
	cursor:pointer;
}

.MixerBoxIngredients .WeightPerDose {
	text-align:center;
	font-size:12px;
	line-height:16px;
}
.MixerBoxIngredients .PricePerDose {
	text-align:center;
	font-size:12px;
	line-height:16px;
}
.MixerBoxIngredients .PricePer100g {
	margin-top:8px;
	text-align:center;
	font-size:12px;
	line-height:16px;
}

.MixerBoxIngredients .ingredients-list {
	font-size:12px; line-height:16px;
}

.MixerBoxIngredients .popup-box-content img {
	width:auto;
	height:auto;
	max-width:160px;
	max-height:105px;
	margin-bottom:10px;
}


/* Readymix */
.ReadyMix .ReadyBox {
	position:relative;
	padding:20px 20px 60px 20px;

	border:1px solid #B4CC1E;
	 -webkit-border-radius: 18px;
		-moz-border-radius: 18px;
			 border-radius: 18px;
	border-bottom:0px;
}
.ReadyMix .PlusCountMinus {
	position:absolute;
	left:0px; right:0px; bottom:0px;
	z-index:100;
	height:38px;
	text-align:center;
	border:1px solid #B4CC1E;
	 -webkit-border-radius: 18px;
		-moz-border-radius: 18px;
			 border-radius: 18px;
}
.ReadyMix .PlusCountMinus .NotAvailable {
	line-height:36px;
	font-style:italic;
}
.ReadyMix .PlusCountMinus .Available {
	line-height:36px;
}

.ReadyMix .InfoButton {
	position:absolute;
	right:-1px; top:-1px; /* Damit der Button mit der Außenlinie übereinstimmt */
	width:36px;
	height:36px;

	border:1px solid #B4CC1E;
	 -webkit-border-radius: 18px;
		-moz-border-radius: 18px;
			 border-radius: 18px;

	background-color:#FFFFFF;
	color:#B4CC1E;

	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	text-align:center;
	font-weight:bold;
	font-size:24px;
	line-height:36px;
	cursor:pointer;
}

.ReadyMix .popup-box-content table td {
	padding:0px 0px 0px 6px;
}
.ReadyMix .popup-box-content table td.IngredientsImg {
	width:32px;
	padding:0px;
}
.ReadyMix .popup-box-content table .IngredientsImg img {
	height:32px;
}
.ReadyMix .popup-box-content table td.NutritionalHl {
	line-height:32px;
}

/* Ab Large -lg- Darstellen */
@media (min-width: 992px) {
	.ReadyMix .ReadyBox {
		height:340px;
	}
}
@media (min-width: 1500px) {
	.ReadyMix .ReadyBox {
		height:360px;
	}
}
@media (min-width: 1500px) {
	.ReadyMix .ReadyBox {
		height:400px;
	}
}
@media (min-width: 1600px) {
	.ReadyMix .ReadyBox {
		height:420px;
	}
}
@media (min-width: 1700px) {
	.ReadyMix .ReadyBox {
		height:440px;
	}
}
@media (min-width: 1800px) {
	.ReadyMix .ReadyBox {
		height:460px;
	}
}

/* MixerIngredientNavi */
.MixerIngredientNavi {
	position:absolute;
	z-index:100;

	height:24px; width:38px;
	line-height:26px;
	text-align:center !important;
	cursor:pointer;

	background-color:#FFFFFF;
}

.MixerIngredientNavi img {
	width:21px;
}

.MixerIngredientNavi.Prev {
	left:0px; top:1px;
}
.MixerIngredientNavi.Next {
	right:0px; top:1px;
}

.cup-choose-first {
	position:fixed;
	left:0px; right:0px;
	top:71px; bottom:0px;
	background-color:#FFFFFF;
	z-index:905;
	overflow-y:scroll;
}

.cup-choose-first .choose-area {
	height:calc(90vh - 71px - 15px - 80px);
	margin:15px 0px 0px 0px;
	text-align:center;
}
.cup-choose-first .choose-area img {
	height:calc(90vh - 71px - 15px - 80px);
	width:auto;
	max-width:100%;
}

.cup-choose-first .cup-big {
	width:50%;
	height:100px;
}

.cup-choose-first .cup-info {
	margin:10px 0px 10px 0px;
	font-size:12px; line-height:14px;
	text-align:center;
}

/* Mixer Cup Size */
.MixerCupSizeBig {
}
.MixerCupSizeSmall {
}
.MixerCupSizeBig.ChooseArea img {
	height:25px;
	margin-right:10px;
}
.MixerCupSizeSmall.ChooseArea img {
	height:25px;
	margin-right:10px;
}

.MixerCupSizeChange {
}
.MixerCupSizeChange img {
	height:25px;
	cursor:pointer;
}

/* Mixer: Aktueller Stand */
.MyMix.table-striped tbody tr:nth-of-type(odd) {
	background-color:#E8F2AA !important;
}
.MyMix.table td, .table th {
	padding:2px 5px 2px 5px !important;
	vertical-align:middle !important;
	border-top:none !important;
}

.MyMix .Base,
.MyMix .Ingredients {
}

.MyMix .MainPic {
	text-align:center;
	vertical-align:middle;
	width:45px;
	height:25px;
	background-color:#FFFFFF !important;
}
.MyMix .MainPic img {
	width:auto;
	height:auto;
	max-width:45px;
	max-height:25px;
}

.MyMix .Minus,
.MyMix .Count,
.MyMix .Plus {
	width:30px !important;
	text-align:center !important;
}

.MyMix .PlusMinus {
	width:26px;
	height:26px;
	 -webkit-border-radius: 13px;
		-moz-border-radius: 13px;
			 border-radius: 13px;
	background-color:#B4CC1E;
	color:#FFFFFF;
	font-weight:bold;
	font-size:24px;
	line-height:26px;
	text-align:center;
	cursor:pointer;
}

/* MobileMixerIngredientsArea */
.MobileMIA {
	position:fixed;
	z-index:900;
	left:0px; right:0px;
	bottom:51px;
	border:4px solid #B4CC1E;
	background:#FFFFFF;
}

/* Overview Seite */
.OverviewMix {
}
.OverviewMix .Ingredients img {
	height:50px;
	max-width:100% !important;
}
.OverviewMix .Name {
	font-size:11px;
	line-height:14px;
	font-weight:bold;
	text-align:center !important;
	margin:5px 0px 20px 0px;
}

.OverviewMix .PriceValue {
	font-weight:bold;
	font-size:22px;
}
.OverviewMix .Price100g {
	font-size:12px;
}

.OverviewMix [class^=OverviewCupSize] {
	font-weight:bold;
}
.OverviewMix .OverviewCupSizeBig img {
	height:200px !important;
}
.OverviewMix .OverviewCupSizeSmall img {
	height:120px !important;
}

.OverviewMix .cup-cover {
	position:absolute;
	right:6px; top:-10px;
	/* Orig: width:174px; height:291px; */ 
	height:100px;
	z-index:1;
}

.OverviewMix .popup-box.nutritionals {
	left:25px; right:25px;
	top:calc( 50vh - 180px ); 
	height:360px;
}

.OverviewMix .popup-box-content table td {
	padding:3px 6px 3px 6px;
}

/* Ab Small -sm- Darstellen */
@media (min-width: 576px) {
	.OverviewMix .cup-cover {
		right:0px; top:20px;
		height:130px;
	}

	.OverviewMix .popup-box.nutritionals {
		left:calc( 50vw - 200px ); right:auto;
		top:calc( 50vh - 240px ); bottom:auto;
		width:400px;
		height:480px;
	}
}
/* Ab Medium -md- Darstellen */
@media (min-width: 768px) {
	.OverviewMix .cup-cover {
		height:160px;
	}

	.OverviewMix .popup-box.nutritionals {
		left:calc( 50vw - 300px ); right:auto;
		top:calc( 50vh - 210px ); bottom:auto;
		width:600px;
		height:420px;
	}
}
/* Ab Large -lg- Darstellen */
@media (min-width: 992px) {
	.OverviewMix .cup-cover {
		height:200px;
	}

	.OverviewMix .popup-box.nutritionals {
		left:calc( 50vw - 300px ); right:auto;
		top:calc( 50vh - 210px ); bottom:auto;
		width:600px;
		height:420px;
	}
}
/* Ab Extra Large -xl- Darstellen */
@media (min-width: 1200px) {
	.OverviewMix .popup-box.nutritionals {
		left:calc( 50vw - 300px ); right:auto;
		top:calc( 50vh - 210px ); bottom:auto;
		width:600px;
		height:420px;
	}
}

/* Mixer: Unten Preis etc. */
.MixerFooter { 
	position:fixed;
	left:0px; right:0px;
	bottom:0px;
	z-index:900;
	background-color:#FFFFFF;
	border-top:4px solid #B4CC1E;
}
.MixerFooter,
.MixerFooterReservedArea {
	height:55px;
}

.MixerFooter #part_info {
	margin-top:-4px;
}

.MixerFooter img { 
	height:51px;
}

.MixerFooter .PriceInfo {
	font-weight:bold;
	font-size:14px;
	line-height:14px;
	text-transform:uppercase;
}

.MixerFooter .PriceValue {
	font-weight:bold;
	font-size:19px;
	line-height:19px;
}

.MixerFooter .Price100g {
	font-size:14px;
	line-height:14px;
	font-weight:normal;
}

/* favorite */
.favorite {
}

.favorite .step {
	border-top:1px solid #323232;
	padding-top:10px;
}

.favorite .mix-name {
	font-weight:bold;
}
.favorite .created-on {
	font-size:12px;
}
.favorite .edited-on {
	font-size:12px;
	display:none;
}

.favorite .favorite_set {
	padding:0px 10px 0px 0px;
	cursor:pointer;
}
.favorite .favorite_delete {
	padding:0px 10px 0px 0px;
	cursor:pointer;
}

.favorite .all-ingredients {
	display:inline-block;
}

.favorite .basis,
.favorite .ingredients {
	float:left;
	padding:5px;
	white-space:nowrap;
}

.favorite .pic {
}
.favorite .pic img {
	height:30px; width:auto;
}

.favorite .designation {
	font-size:12px;
	line-height:16px;
}

/* =================================================================== */
/* block-box und popup-box 											   */
/* =================================================================== */

/* Sperrt Klicks */
.block-box {
	position:fixed;
	left:0px; top:0px;
	right:0px; bottom:0px;
	z-index:9001;
	background:url("/media/service/transparent-white-50.png") left top repeat;
}
.block-box.absolute {
	position:absolute;
	z-index:9000;
}

.block-box.bg-transparent {
	background:url("/media/service/transparent.png") left top repeat;
}
.block-box.bg-white {
	background:url("/media/service/transparent.png") left top repeat;
}

.popup-block-box {
	/* bekommt über .block-box z-index:9000 */
}
.popup-button {
}

.popup-box {
	display:none;

	position:fixed;
	left:25px; right:25px; top:25px; bottom:25px;
	z-index:9002; /* .block-box hat z-index:9000, .block-box.absolute z-index:9001 */

	background-color:#FFFFFF;

	border:4px solid #B4CC1E;
	 -webkit-border-radius: 18px;
		-moz-border-radius: 18px;
			 border-radius: 18px;

	-webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);
	   -moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);
			box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);

}
.popup-box.bg-transparent {
	background:url("/media/service/transparent-white-35.png") left top repeat;
}

.popup-box.h350 {
	top:calc(50vh - 175px); 
	bottom:calc(50vh - 175px);
}

.popup-box-content {
	position:absolute;
	left:15px; top:15px; right:20px; bottom:10px;
	padding:10px;
	overflow: auto;
	text-align:left;
	line-height:20px;
}

/* Ab Small -sm- Darstellen */
@media (min-width: 576px) {
	.popup-box-content {
		line-height:26px;
	}

	.popup-box {
		left:calc( 50vw - 200px ); right:auto;
		top:calc( 50vh - 240px ); bottom:auto;
		width:400px;
		height:480px;
	}
}
/* Ab Medium -md- Darstellen */
@media (min-width: 768px) {
	.popup-box {
		left:calc( 50vw - 300px ); right:auto;
		top:calc( 50vh - 210px ); bottom:auto;
		width:600px;
		height:420px;
	}
}
/* Ab Large -lg- Darstellen */
@media (min-width: 992px) {
	.popup-box {
		left:calc( 50vw - 300px ); right:auto;
		top:calc( 50vh - 210px ); bottom:auto;
		width:600px;
		height:420px;
	}
}
/* Ab Extra Large -xl- Darstellen */
@media (min-width: 1200px) {
	.popup-box {
		left:calc( 50vw - 300px ); right:auto;
		top:calc( 50vh - 210px ); bottom:auto;
		width:600px;
		height:420px;
	}
}

.popup-box-close-button {
	position:absolute;
	right:-25px; top:-25px;
	width:50px; height:50px;

	line-height:50px;
	text-align:center;

	 -webkit-border-radius: 25px;
		-moz-border-radius: 25px;
			 border-radius: 25px;

	background-color:#B4CC1E;
	color:#FFFFFF;

	font-size:36px;
	font-weight:bold;

	cursor:pointer;
}
.popup-box-close-button::before {
	content: "X";
}


/* =================================================================== */
/* status message: 		 											   */
/* =================================================================== */

.display-status-toggle-box {
	position:fixed;
	right:0px; top:0px;
	z-index:90000;
	padding:20px;
	background-color:#B4CC1E;
	border:2px solid #FFFFFF;
	color:#FFFFFF;
	display:none;

	-khtml-opacity: 0.9;
	-moz-opacity: 0.9;
	-webkit-opacity: 0.9;
	filter: alpha(opacity=90);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	opacity: 0.9;
}
.display-status-msg {
	font-weight:bold;
}

/* =================================================================== */
/* Startseite: 			 											   */
/* =================================================================== */

.startseite-button {
	padding-top:20px;
	padding-bottom:20px;
	font-size:18px; line-height:26px;
}
@media (min-width: 992px) {
	.startseite-button {
		font-size:24px; line-height:28px;
	}
}

/* Grüne runde Buttons */
.button-round-green {
	display:inline-block;
	text-align:center;
	width:28px; height:28px;
	 -webkit-border-radius: 14px;
		-moz-border-radius: 14px;
			 border-radius: 14px;
	background-color:#B4CC1E;
	color:#FFFFFF;
}

/* Ab Large -lg- Darstellen */
@media (min-width: 992px) {
	.button-round-green {
		width:38px; height:38px;
		 -webkit-border-radius: 19px;
			-moz-border-radius: 19px;
				 border-radius: 19px;
	}
}

.startseite-top-box-placeholder {
}
.startseite-top-box {
}
.startseite-top-box-bild {
}
/* Ab Large -lg- Darstellen */
@media (min-width: 992px) {
	.startseite-top-box-placeholder {
		height:180px;
	}
	.startseite-top-box {
		padding-left:360px;
		margin-top:-520px;
	}
	.startseite-top-box-bild {
		margin-top:150px;
	}
}
@media (min-width: 1100px) {
	.startseite-top-box-placeholder {
		height:200px;
	}
	.startseite-top-box {
		padding-left:360px;
		margin-top:-540px;
	}
	.startseite-top-box-bild {
		margin-top:130px;
	}
}
/* Ab Extra Large -xl- Darstellen */
@media (min-width: 1200px) {
	.startseite-top-box-placeholder {
		height:190px;
	}
	.startseite-top-box {
		padding-left:420px;
		margin-top:-555px;
	}
	.startseite-top-box-bild {
		margin-top:110px;
	}
}
@media (min-width: 1300px) {
	.startseite-top-box-placeholder {
		height:200px;
	}
	.startseite-top-box {
		padding-left:410px;
		margin-top:-570px;
	}
	.startseite-top-box-bild {
		margin-top:90px;
	}
}
@media (min-width: 1400px) {
	.startseite-top-box-placeholder {
		height:210px;
	}
	.startseite-top-box {
		padding-left:400px;
		margin-top:-580px;
	}
	.startseite-top-box-bild {
		margin-top:60px;
	}
}
@media (min-width: 1500px) {
	.startseite-top-box-placeholder {
		height:235px;
	}
	.startseite-top-box {
		padding-left:380px;
		margin-top:-580px;
	}
	.startseite-top-box-bild {
		margin-top:30px;
	}
}
@media (min-width: 1600px) {
	.startseite-top-box-placeholder {
		height:230px;
	}
	.startseite-top-box {
		padding-left:370px;
		margin-top:-570px;
	}
	.startseite-top-box-bild {
		margin-top:0px;
	}
}
@media (min-width: 1700px) {
	.startseite-top-box-placeholder {
		height:290px;
	}
	.startseite-top-box {
		padding-left:350px;
		margin-top:-630px;
	}
}
@media (min-width: 1800px) {
	.startseite-top-box-placeholder {
		height:320px;
	}
	.startseite-top-box {
		padding-left:350px;
		margin-top:-660px;
	}
}
@media (min-width: 1900px) {
	.startseite-top-box-placeholder {
		height:335px;
	}
	.startseite-top-box {
		padding-left:350px;
		margin-top:-680px;
	}
}


/* =================================================================== */
/* Lightbox 2 Override												   */
/* =================================================================== */

.lightboxOverlay {
    background-color: #FFFFFF;
    filter: alpha(Opacity=50);
    opacity: .5;
}

.lb-nav {
	border:4px solid #B4CC1E;
	 -webkit-border-radius: 18px;
		-moz-border-radius: 18px;
			 border-radius: 18px;
}

.lb-caption {
	color:#B4CC1E;
	font-size:16px !important;
}


/* =================================================================== */
/* Bootstrap Override												   */
/* =================================================================== */

/* Erweitern um -xxl- */
.container-xxl {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 1400px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    max-width: 1340px;
  }
}
.navbar .container-xxl {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
@media (max-width: 575.98px) {
	.navbar-expand-sm > .container-xxl {
		padding-right: 0;
		padding-left: 0;
	}
}
@media (min-width: 576px) {
	.navbar-expand-sm > .container-xxl {
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}
}
@media (max-width: 767.98px) {
	.navbar-expand-md > .container-xxl {
		padding-right: 0;
		padding-left: 0;
	  }
}
@media (min-width: 768px) {
	.navbar-expand-md > .container-xxl {
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	  }
}
@media (max-width: 991.98px) {
	.navbar-expand-lg > .container-xxl {
		padding-right: 0;
		padding-left: 0;
	  }
}
@media (min-width: 992px) {
	.navbar-expand-lg > .container-xxl {
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	  }
}
@media (max-width: 1199.98px) {
	.navbar-expand-xl > .container-xxl {
		padding-right: 0;
		padding-left: 0;
	  }
}
@media (min-width: 1200px) {
	.navbar-expand-xl > .container-xxl {
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	  }
}
.navbar-expand > .container-xxl {
  padding-right: 0;
  padding-left: 0;
}
.navbar-expand > .container-xxl {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

@media (min-width: 1400px) {
	.col-xxl-1 {
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}
	.col-xxl-2 {
		-ms-flex: 0 0 16.666666%;
		flex: 0 0 16.666666%;
		max-width: 16.666666%;
	}
	.col-xxl-3 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}
	.col-xxl-4 {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
	.col-xxl-5 {
		-ms-flex: 0 0 41.666666%;
		flex: 0 0 41.666666%;
		max-width: 41.666666%;
	}
	.col-xxl-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	.col-xxl-7 {
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}
	.col-xxl-8 {
		-ms-flex: 0 0 66.666666%;
		flex: 0 0 66.666666%;
		max-width: 66.666666%;
	}
	.col-xxl-9 {
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}
	.col-xxl-10 {
		-ms-flex: 0 0 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}
	.col-xxl-11 {
		-ms-flex: 0 0 91.666666%;
		flex: 0 0 91.666666%;
		max-width: 91.666666%;
	}
	.col-xxl-12 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* ========================= */

.table-striped tbody tr:nth-of-type(odd) {
  background-color:#E8F2AA;
}

.checkbox-control	{ width:38px !important; height:38px !important; }

form	{ margin:0px; padding:0px; }

.border	{ border: 1px solid #000000 !important; }

.btn-link {
	font-weight:bold;
	color:#323232;
	text-decoration:none;
}
.btn-link:hover {
	color: #B4CC1E;
	text-decoration: underline;
}

.btn:hover {
	color: #B4CC1E;
	text-decoration: underline;
}

.btn:focus, .btn.focus {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(180, 204, 30, 0.25);
}

.btn-primary {
	color: #fff;
	background-color: #B4CC1E;
	border-color: #B4CC1E;
	font-weight:bold;
}
.btn-primary:hover {
	color: #fff;
	text-decoration:underline;
	background-color: #B4CC1E;
	border-color: #B4CC1E;
}
.btn-primary.focus,
.btn-primary:focus {
	color: #fff;
	text-decoration:underline;
	background-color: #B4CC1E;
	border-color: #B4CC1E;
	box-shadow: 0 0 0 0.2rem rgba(180, 204, 30, 0.25);
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
	color: #fff;
	background-color: #B4CC1E;
	border-color: #B4CC1E;
}
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.2rem rgba(180, 204, 30, 0.25);
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #B4CC1E;
    border-color: #B4CC1E;
}

.btn-primary.btn-white {
	color: #B4CC1E;
	background-color: #FFFFFF;
	border-color: #B4CC1E;
}
.btn-primary.btn-white:hover {
	color: #FFFFFF;
	background-color: #B4CC1E;
	border-color: #B4CC1E;
}
.btn-primary.btn-white:focus, .btn-primary.focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

/* Alternativer Button Effekt */
.btn-hoverani {
	overflow: hidden;
	position: relative;
	z-index:1;
}
.btn-hoverani:after {
	background-image: -moz-linear-gradient(to left, #FFFFFF, transparent);
	background-image: -webkit-linear-gradient(to left, #FFFFFF, transparent);
	background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFFFFF), to(transparent));
	background-image: -o-linear-gradient(to left, #FFFFFF, transparent);
	background-image: linear-gradient(to left, #FFFFFF, transparent);

	content: "";
	height: 180px;
	left: -140px;
	opacity: 0.6;
	position: absolute;
	top: -50px;
	transform: rotate(35deg);
	/*transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);*/
	width: 100px;
	z-index: 1;
}
.btn-hoverani:hover:after {
	left: 120%;
	transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
}

/* Form Änderungen */
.form-control:focus {
	color: #000000;
	background-color: #fff;
	border-color: #B4CC1E;
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(180, 204, 30, 0.25);
}

.form-check-input {
	width:18px; height:18px;
}

/* Valid / Invalid Darstellung */
.form-control:required:invalid {
	border:1px solid #E00000;
}
.form-control:required:valid {
	border:1px solid #B4CC1E;
}

input[type="checkbox"]:required:invalid + label { 
	color:#E00000; 
}
input[type="checkbox"]:required:valid + label { 
	color:#869A16; 
}

/* Alternative Darstellung mit Label halb im Formfeld */
.form-group {
	position:relative;
	padding-bottom:.25rem;
}

.form-label {
	font-size:14px;
	line-height:14px;
	position:absolute;
	left:10px; top:-8px;
	background-color:#FFFFFF;
	padding:0px 5px 0px 5px;
}

.form-control,
select.form-control,
select.form-control[multiple], 
select.form-control[size] {
	height: calc(1.6em + .75rem + 2px);
	padding: .475rem .75rem .375rem .75rem;
}
/* ------------------------------------------- */

/* Nav-Tabs */
.nav-tabs .nav-link {
	font-weight:bold;
	color:#707070;
	border:2px solid #FFFFFF;
	border-bottom:none;

}
.nav-tabs .nav-link:hover {
	font-weight:bold;
	color:#B4CC1E;
	border:2px solid #B4CC1E;
	border-bottom:none;
}

.nav-tabs .nav-item.show .nav-link, 
.nav-tabs .nav-link.active {
	color: #FFFFFF;
	background-color: #B4CC1E;
	border-color: #B4CC1E #B4CC1E #B4CC1E;
	font-weight:bold;
}

.nav-tabs {
	border-bottom:2px solid #B4CC1E;
}


/* =================================================================== */
/* Navigation Menu													   */
/* =================================================================== */

/* Kleinste Darstellung */

#main-navi-toggle				{ }

.navbar-brand,
.ViewScroll .navbar-brand			{ padding-top:0rem; padding-bottom:0rem; }
.navbar-brand img,
.ViewScroll .navbar-brand img		{ height:2.5rem; }

.logo {
	line-height:1px;
}

.navbar-brand {
	position:absolute;
	left:70px; top:8px;
}

@media (min-width: 992px) {
	.navbar-brand {
		position: inherit;
		left: inherit; top: inherit;
	}
}




.navbar-brand img.logo_small	{ display:block; }
.navbar-brand img.logo_big		{ display:none; }

.logo-2 {
	position:absolute; 
	left:60px; top:0px; right:0px; 
	z-index:1;
	text-align:left;
	padding:12px 0px 0px 0px;
	display:none;
}
.logo-2 img {
	height:20px;
}

.navbar,
.ViewScroll .navbar			{ 
	/*background-color:#FFFFFF; */
	border-bottom:2px solid #B4CC1E; 

	background:#FFFFFF url('/media/shared/design/demo-shop.png') center center no-repeat;
	background-size:contain;
}

.navbar a,
.ViewScroll .navbar a,
.navbar a:link,
.ViewScroll .navbar a:link,
.navbar a:visited,
.ViewScroll .navbar a:visited,
.navbar a:active,
.ViewScroll .navbar a:active	{ color:#323232; text-decoration:none; }
.navbar a:focus,
.ViewScroll .navbar a:focus,
.navbar a:hover,
.ViewScroll .navbar a:hover	{ color:#000000; text-decoration:underline; }

.navbar .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(112, 112, 112, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar .navbar-toggler {
	color: rgba(112, 112, 112, 1);
	outline:none;
}

.navbar .navbar-toggler-text {
	font-size:12px;
	line-height:12px;
	margin-top:2px;
}

.service-navi	{ 
	position:absolute; right:0px; top:5px; z-index:5000;
	font-size:12px;
}
.service-navi img { 
	width:auto; height:26px !important;
}
.service-navi a,
.service-navi a:link,
.service-navi a:visited		{ color:#323232; }
.service-navi a:active,
.service-navi a:focus,
.service-navi a:hover		{ color:#B4CC1E !important; text-decoration:underline !important; }


nav.navbar									{  }
nav.navbar .navbar-nav						{ margin-top:0.5rem; }
nav.navbar .navbar-nav > li 				{ font-size:1.4rem; }
nav.navbar .navbar-nav > li > a,
nav.navbar .navbar-nav > li > a:link,
nav.navbar .navbar-nav > li > a:visited		{ color:#323232; margin:10px 0px 10px 0px; display:block; }
nav.navbar .navbar-nav > li > a:active,
nav.navbar .navbar-nav > li > a:focus,
nav.navbar .navbar-nav > li > a:hover		{ color:#000000; text-decoration:underline; }

nav.navbar .navbar-nav > li.dropdown .dropdown-menu {
	width:100%; margin:0px; padding:0px 0px 0px 20px;
	border:none; 
	-webkit-border-radius:0px; 
	-moz-border-radius:0px; 
	border-radius:0px;
	font-weight:normal;
}
nav.navbar .navbar-nav > li.dropdown .dropdown-menu a,
nav.navbar .navbar-nav > li.dropdown .dropdown-menu a:link,
nav.navbar .navbar-nav > li.dropdown .dropdown-menu a:visited	{ color:#323232; margin:0px; padding:0px; }
nav.navbar .navbar-nav > li.dropdown .dropdown-menu a:active,
nav.navbar .navbar-nav > li.dropdown .dropdown-menu a:focus,
nav.navbar .navbar-nav > li.dropdown .dropdown-menu a:hover		{ text-decoration:underline; }

nav.navbar .navbar-nav > li.dropdown .dropdown-menu > li { 
	width:100%; padding:0px; float:left;
}

/* =========================================================== */
/*                Responsive Darstellung                       */
/* =========================================================== */

/* !!! Nur Apple 320 Pixel !!! */
@media (max-width: 320px) {
}

@media (min-width: 380px) {
	.logo-2 { display:block; }
}

/* Ab Small -sm- Darstellen */
@media (min-width: 576px) {
}
/* Ab Medium -md- Darstellen */
@media (min-width: 768px) {
}
/* Ab Large -lg- Darstellen */
@media (min-width: 992px) {
	/* Allgemeine Einstellungen */
	.cmmp_Header	{ height:120px; color:#707070; }
	.cmmp_Main 		{ margin-top:120px;	}

	/* Navigation */
	.navbar					{ background-color:transparent; }
	.navbar a,
	.navbar a:link,
	.navbar a:visited,
	.navbar a:active		{ color:#707070; text-decoration:none; }
	.navbar a:focus,
	.navbar a:hover			{ color:#B4CC1E; text-decoration:underline; }

	.service-navi	  				{ right:0px; top:10px; }
	body.ViewScroll .service-navi	{ right:0px; top:10px; }
	.service-navi img 				{ width:auto; height:38px !important; }


	.navbar-brand img.logo_small	{ display:none; }
	.navbar-brand img.logo_big		{ display:block; }

	body.ViewScroll .navbar-brand img.logo_small	{ display:block; }
	body.ViewScroll .navbar-brand img.logo_big		{ display:none; }

/*
	body.ViewScroll .logo {
		height:40px !important;
	}
*/
	body:not(.ViewScroll) .logo {
		width:100%;
		text-align:left;
		margin-top:10px;
	}
	.navbar-brand img				{ height:auto; }

	.logo-2 {
		/*text-align:center;*/
		margin-left:80px;

		padding:5px 0px 0px 0px;
	}
	.logo-2 img {
		height:48px;
	}



/*
@media (min-width: 992px) {
	.logo {
		background:url('/media/shared/design/demo-shop.png') center center no-repeat;
	}
}
*/






















	#main-navi-toggle				{ position:absolute; left:140px; top:36px; width:100%; z-index:1; }
	.ViewScroll #main-navi-toggle	{ position:static; }

	nav.navbar .navbar-nav											{ margin-top:0px; }
	nav.navbar .navbar-nav > li 									{ font-size:16px; }

	body:not(.ViewScroll) nav.navbar								{ border:none; }
	body:not(.ViewScroll) nav.navbar .navbar-nav > li 				{ margin:0px 38px 0px 0px; text-transform:uppercase; letter-spacing:1px; font-size:14px; color:#505050; font-weight:bold; background-color:transparent; }
	body:not(.ViewScroll) nav.navbar .navbar-nav > li > a,
	body:not(.ViewScroll) nav.navbar .navbar-nav > li > a:link,
	body:not(.ViewScroll) nav.navbar .navbar-nav > li > a:visited	{ color:#505050; display:block; }
	body:not(.ViewScroll) nav.navbar .navbar-nav > li > a:active,
	body:not(.ViewScroll) nav.navbar .navbar-nav > li > a:focus,
	body:not(.ViewScroll) nav.navbar .navbar-nav > li > a:hover		{ color:#B4CC1E; text-decoration:underline; }

	body.ViewScroll nav.navbar .navbar-nav > li 					{ margin:0px 20px 0px 0px; padding:0px; font-weight:bold; line-height:2rem; }
	body.ViewScroll nav.navbar .navbar-nav > li > a,
	body.ViewScroll nav.navbar .navbar-nav > li > a:link,
	body.ViewScroll nav.navbar .navbar-nav > li > a:visited			{ color:#707070; display:block; }
	body.ViewScroll nav.navbar .navbar-nav > li > a:active,
	body.ViewScroll nav.navbar .navbar-nav > li > a:focus,
	body.ViewScroll nav.navbar .navbar-nav > li > a:hover			{ color:#707070; text-decoration:underline; }


/*	nav.navbar .navbar-nav > li.dropdown	 						{ position:inherit !important; }*/
	nav.navbar .navbar-nav > li.dropdown .dropdown-menu {
		width:auto !important; margin:0px 0px 0px 0px; padding:0px 0px 10px 0px;
		border:none; 
		-webkit-border-radius:0px;
		-moz-border-radius:0px;
		border-radius:0px;
		background-color:#FFFFFF; color:#B4CC1E;
		font-weight:normal;
	}
	nav.navbar .navbar-nav > li.dropdown .dropdown-menu a,
	nav.navbar .navbar-nav > li.dropdown .dropdown-menu a:link,
	nav.navbar .navbar-nav > li.dropdown .dropdown-menu a:visited		{ color:#B4CC1E; display:block; }
	nav.navbar .navbar-nav > li.dropdown .dropdown-menu a:active,
	nav.navbar .navbar-nav > li.dropdown .dropdown-menu a:focus,
	nav.navbar .navbar-nav > li.dropdown .dropdown-menu a:hover			{ text-decoration:underline; }

	nav.navbar .navbar-nav > li.dropdown.open .dropdown-menu { 
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	nav.navbar .navbar-nav > li.dropdown .dropdown-menu > li { 
		/*width:25%;*/ width:100% !important; padding:10px 10px 0px 10px; /*float:left;*/
	}

	/* Mixer Seite */
	.MixerBoxHeadline {
		top:120px;
	}

	.cup-choose-first {
		top:120px;
		z-index:1;
	}

	.cup-choose-first .choose-area {
		height:calc(100vh - 120px - 30px - 100px);
		margin:30px 0px 0px 0px;
	}
	.cup-choose-first .choose-area img {
		height:calc(100vh - 120px - 30px - 100px);
	}

	.cup-choose-first .cup-info {
		font-size:16px; line-height:26px;
	}

	/* Overview Seite */
	.OverviewMix {
	}
	.OverviewMix .Ingredients img {
		height:80px;
	}
	.OverviewMix .Name {
		font-size:14px;
		font-weight:bold;
		text-align:center;
		margin:5px 0px 20px 0px;
	}

	.OverviewMix .OverviewCupSizeBig img {
		height:300px !important;
	}
	.OverviewMix .OverviewCupSizeSmall img {
		height:180px !important;
		padding-top:50px;
	}

}
/* Ab Extra Large -xl- Darstellen */
@media (min-width: 1200px) {
	/* Allgemeine Einstellungen */
	.w-xl-50 {
		width:50% !important;
	}

	/* Mixer Seite */
	.MixerIngredientsArea {
		position:relative;
		/* Gesamte Höhe - .cmmp_Header - .MixerFooter */
		height:calc(100vh - 120px - 55px);
		overflow:hidden;
		overflow-y:scroll;
		overflow-x:hidden;
	}
	.MixerBoxHeadline {
		top: 0px;
	}

	/* Mixer Cup Size */
	.MixerCupSizeBig.ChooseArea {
	}
	.MixerCupSizeSmall.ChooseArea {
		padding-top:30px;
	}
	.MixerCupSizeBig.ChooseArea img {
		height:60px;
		margin-right:10px;
	}
	.MixerCupSizeSmall.ChooseArea img {
		height:30px;
		margin-right:10px;
	}
	.MixerCupSizeChange img {
		height:60px;
	}

	/* Mixer: Aktueller Stand */
	h2.MyMix {
		text-transform:uppercase;
		font-size:20px;
		line-height:30px;
	}
	
	.MyMix.table-striped tbody tr:nth-of-type(odd) {
		background-color:#E8F2AA !important;
	}
	.MyMix.table td, .table th {
		padding:1px 5px 1px 5px !important;
		vertical-align:middle !important;
		border-top:none !important;
	}
	
	.MyMix .Base,
	.MyMix .Ingredients {
	}
	
	.MyMix .MainPic {
		text-align:center;
		vertical-align:middle;
		width:90px;
		height:50px;
		background-color:#FFFFFF !important;
	}
	.MyMix .MainPic img {
		width:auto;
		height:auto;
		max-width:90px;
		max-height:50px;
	}
	
	.MyMix .Minus,
	.MyMix .Count,
	.MyMix .Plus {
		width:40px !important;
		text-align:center !important;
	}
	
	.MyMix .PlusMinus {
		width:30px;
		height:30px;
		 -webkit-border-radius: 15px;
			-moz-border-radius: 15px;
				 border-radius: 15px;
		background-color:#B4CC1E;
		color:#FFFFFF;
		font-weight:bold;
		font-size:24px;
		line-height:30px;
		text-align:center;
		cursor:pointer;
	}


	body:not(.ViewScroll) nav.navbar .navbar-nav > li 				{ font-size:16px; }

}

/* =========================================================== */
/*                    Developement Hilfe                       */
/* =========================================================== */

/* Screensize Hilfe

body::after {
	position:fixed;
	right:0px; bottom:0px;
	background-color:#FFFFFF;
	content:"MIN";
}
@media (max-width: 320px) {
	body::after { content:"APPLE"; }
}
@media (min-width: 576px) {
	body::after { content:"-SM-"; }
}
@media (min-width: 768px) {
	body::after { content:"-MD-"; }
}
@media (min-width: 992px) {
	body::after { content:"-LG-"; }
}
@media (min-width: 1200px) {
	body::after { content:"-XL-"; }
}
*/


/* Container Farbhilfe */
/*
.container { background-color:#E0E0E0 !important; }
@media (max-width: 320px) {
}
@media (min-width: 576px) {
	.container { background-color:#FFC1FC !important; }
}
@media (min-width: 768px) {
	.container { background-color:#FCB1B3 !important; }
}
@media (min-width: 992px) {
	.container { background-color:#FFFE9B !important; }
}
@media (min-width: 1200px) {
	.container { background-color:#BCFBF8 !important; }
}
*/