body {
	background-color: #ffffff;
}

#kaffeesatzrechner {
	position: relative;
	width: 90%;
	max-width: 900px;
	height: 500px;
	border: 1px solid #c5c5c5;
	margin: 2em auto;
	background-color: #ffffff;
	-moz-border-radius: 0px 0px 5px 5px;
	-webkit-border-radius: 0px 0px 5px 5px;
	border-radius: 0px 0px 5px 5px;
	overflow: hidden;
}

	#kaffeesatzrechner #kaffeebar {
		position: absolute;
		top: 55px;
		left: -160px;
		width: 160px;
		height: calc(100% - 55px);
		z-index: 50;
		/*
		background-image: url(../pics/sidebar.png);
		background-repeat: repeat;
		*/
	}
		
	#kaffeesatzrechner #kaffeebar {
		-webkit-transition: all 0.5s;
		-ms-transform: all 0.5s;
		transition: all 0.5s;
	}
	
	#kaffeesatzrechner #kaffeebar.is-active {
		-webkit-transform: translate(160px);
		-ms-transform: translate(160px);
		transform: translate(160px);
	}

	#kaffeesatzrechner #kaffeeOverlay {
		position: absolute;
		top: 55px;
		left: 0px;
		width: 100%;
		height: calc(100% - 55px);
		z-index: 45;
		background-color: #000000;
		opacity: 0.0;
	}

	 #kaffeesatzrechner #kaffeeOverlay {
		-webkit-transition: opacity 0.4s;
		-ms-transition: opacity 0.4s;
		transition: opacity 0.4s;
	 }

	#kaffeesatzrechner #kaffeeOverlay.is-active {
		opacity: 0.85;
	}
	
	#kaffeesatzrechner #kaffeeOverlay.hideit {
		z-index: -5;
	}
	
		#kaffeesatzrechner #kaffeebar ul.coffeeNAV {
			padding-top: 152px;
			background-image: url(../pics/McLiving_Logo_INVERT.svg);
			background-size: 120px 120px;
			background-position: 50% 15px;
			background-repeat: no-repeat;	
		}
		
			#kaffeesatzrechner #kaffeebar ul.coffeeNAV:first-child {
				border-top: 1px solid #3a3a3a;
			}
		
		#kaffeesatzrechner #kaffeebar .no-png .coffeeNAV {
			background-image: url(../pics/McLiving_Logo_INVERT.png);
		}

		#kaffeesatzrechner #kaffeebar ul li {
			position: relative;
			width: 100%;
			vertical-align: middle;
			line-height: 20px;
			font-size: 16px;
			font-weight: 500;
			color: #ffffff;
			padding: 4px 0px 5px 2px;
			background-image: url(../pics/coffeeNAV_li_bg.png);
			background-position: right bottom;
			background-repeat: no-repeat;
			overflow: hidden;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		#kaffeesatzrechner #kaffeebar ul li:active {
			background-color: transparent;
		}
		#kaffeesatzrechner #kaffeebar ul li.passiveTab:hover {
			background-color: #333333;
		}
		#kaffeesatzrechner #kaffeebar ul li .navICO {
			display: block;
			height: 13px;
			margin: 3px 2px 0px 0px;
			float: left;
		}
		#kaffeesatzrechner #kaffeebar ul li .navSVG {
			display: block;
			height: 12px;
			margin: 3px 5px 0px 4px;
			float: left;
		}

#kaffeesatzrechner #menubar {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 55px;
	padding-top: 8px;
	z-index: 50;
	background: #f0f0f0;
	background:	 -webkit-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(219,219,219,1) 50%,rgba(249,249,249,1) 100%); 
	background:	 -moz-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(219,219,219,1) 50%, rgba(249,249,249,1) 100%); 
	background:	 linear-gradient(to bottom, rgba(249,249,249,1) 0%,rgba(219,219,219,1) 50%,rgba(249,249,249,1) 100%);
	border-bottom: 1px solid #c5c5c5;
	text-align: center;
	vertical-align: middle;
}

	#kaffeesatzrechner #menubar span.cafeHead {
		vertical-align: middle;
		font-family: CafeBrasil;
		font-size: 2.2em;
		font-weight: 600;
		color: #482112;
	}
	
	#kaffeesatzrechner #menubar img.cafeHeadpic {
		vertical-align: middle;
		height: 26px;
		width: 30px;
		margin: 1px 3px 0px 0px;
	}
	
	#kaffeesatzrechner #menuBarContent {
		text-align: center;
		margin: 0em auto;
	}


#kaffeesatzrechner .activeTab {
	cursor: default;
}

#kaffeesatzrechner .passiveTab {
	cursor: pointer;
}

#kaffeesatzrechner #container_A {
	background-color: #ededed;
}

#kaffeesatzrechner #container_B {
	background-color: #f7f7f7;
}

#kaffeesatzrechner #container_C {
	background-color: #f7f7f7;
	display: none;
}

#kaffeesatzrechner #container_D {
	background-color: #f7f7f7;
	display: none;
}

#kaffeesatzrechner #container_E {
	background-color: #f7f7f7;
	display: none;
}

#kaffeesatzrechner #container_F {
	background-color: #f7f7f7;
	display: none;
}

#kaffeesatzrechner #container_G {
	background-color:	#f7f7f7;
	display: none;
}

#kaffeesatzrechner #container_H {
	background-color:	#f7f7f7;
	display: none;
}

#kaffeesatzrechner #container_I {
	background-color: #f7f7f7;
	display: none;
}

#kaffeesatzrechner #abschicken {
	width: 100%;
	height: 50px;
	float: left;
	text-align: center;
}

#kaffeesatzrechner .conti {
	position: absolute;
	top: 55px;
	left: 0px;
	width: 100%;
	height: calc(100% - 55px);
	padding-top: 20px;
	z-index: 10;
}
	#kaffeesatzrechner .conti input {
		color: #000000;
	}
	#kaffeesatzrechner .conti  input[type=text] {
		display: block;
		width: 70px;
		height: 18px;
		float: left;
		font-size: 12px;
		text-align: right;
		padding-right:	 3px;
		border: none;
		margin: 3px 4px 0px 0px;
	}
	#kaffeesatzrechner .conti input[type=text]:disabled {
		-webkit-text-fill-color:#000000;		/* Override iOS / Android font color change */
		-webkit-opacity:1;									/* Override iOS opacity change affecting text & background color */
	}
	#kaffeesatzrechner .conti input.REDfont[type=text]:disabled {
		-webkit-text-fill-color:#ff2400;			/* Override iOS / Android font color change */
		-webkit-opacity:1;									/* Override iOS opacity change affecting text & background color */
	}
	#kaffeesatzrechner .conti input.mcLivingOUT[type=text] {
		width: 75px;
	}
	#kaffeesatzrechner .mcLivingOUT {
		background-color: #c5eee7;
	}
	#kaffeesatzrechner .poolOUT {
		background-color: #eee7f7;
	}
	#kaffeesatzrechner .coffeOUT {
		background-color: #c7beb5;
	}
	#kaffeesatzrechner .stromOUT {
		background-color: #d1f6da;
	}
	#kaffeesatzrechner .unserOUT {
		background-color: #b6d9e4;
	}
	#kaffeesatzrechner .ultimaOUT {
		background-color: #ffebcc;
	}
	#kaffeesatzrechner .EPsOUT {
		background-color: #e0feff;
	}
	#kaffeesatzrechner .UMkostenOUT {
		background-color: #fdffd6;
	}
	#kaffeesatzrechner .partnerOUT {
		background-color: #ededed;
	}
	#kaffeesatzrechner .conti input.bewertOUT[type=text] {
		width: 85px;
	}
	#kaffeesatzrechner .bewertOUT {
		background-color: #ffc2c2;
	}
	
	#kaffeesatzrechner .conti input[type=submit] {
		cursor: pointer;
		width: 120px;
		height: 30px;
		margin-top: 15px;
		text-align: center;
	}
	#kaffeesatzrechner .conti .TOPmargin {
		vertical-align: bottom;
		margin-top: 30px;
	}
	#kaffeesatzrechner .conti .sxtyPerc {
		width: 60%;
		overflow: hidden;
	}
	#kaffeesatzrechner .conti .frtyPerc {
		width: 40%;
		overflow: hidden;
	}
	#kaffeesatzrechner .conti .fftyPerc {
		width: 50%;
		overflow: hidden;
	}
	#kaffeesatzrechner .conti .leftfloater {
		float:	left;
	}
	#kaffeesatzrechner .conti .rightshift, #kaffeesatzrechner .conti .leftshift {
		font-size: 12px;
		line-height: 25px;
		vertical-align: bottom;
	}
	#kaffeesatzrechner .conti .rightshift {
		text-align: right;
		padding-right:	3px;
	}
	#kaffeesatzrechner .conti .leftshift {
		text-align: left;
		padding-left: 3px;
	}
	#kaffeesatzrechner .conti .leftshift span{
		display: block;
	}
		#kaffeesatzrechner .conti .leftshift span.input-symbol-corr {
			display: block;
			margin-left: 74px;
		}
		#kaffeesatzrechner .conti .leftshift span.bewert-symbol-corr {
			display: block;
			margin-left: 89px;
		}
	#kaffeesatzrechner .conti .fatfont {
		font-weight: 600;
	}
	#kaffeesatzrechner .conti .REDspan {
		font-weight: 600;
		color: #ff2400;
	}
	#kaffeesatzrechner .conti .REDfont {
		color: #ff2400;
	}
	#kaffeesatzrechner .conti .fixHEIGHT {
		height: 25px;
	}
	#kaffeesatzrechner .conti span.Erklaerung {
		display: block;
		font-size: 11px;
		float: left;
	}
	#kaffeesatzrechner .conti .clear_l {
		clear: left;
	}
	#kaffeesatzrechner .conti div.trennLinie.rightwards {
		left: 20%;
		width: 80%;
	}
	#kaffeesatzrechner .conti div.trennLinie.leftwards {
		left: 0px;
		width: 75%;
	}
	#kaffeesatzrechner .conti div.trennLinie.rightwards, #kaffeesatzrechner .conti div.trennLinie.leftwards {
		position: relative;
		top: 12px;
		height: 1px;
		background-color: #000000;
	}
	#kaffeesatzrechner .conti div.woBinIch {
		position: absolute;
		bottom: 8px;
		right: 14px;
		font-size: 20px;
		font-weight: 800;
		opacity: 0.6;
	}
	#kaffeesatzrechner .input-symbol-euro {
		display: block;
		position: absolute;
	 }
	 #kaffeesatzrechner .input-symbol-euro input {
		padding-left: 1px;
	 }
	  #kaffeesatzrechner .input-symbol-euro:before {
		position: absolute;
		top: 0;
		content:"€";
		left: 2px;
	 }


/* =============================================================================
THE RIPPLE EFFECT
============================================================================= */
.ripple {
  position: absolute;
  background: rgba(255,255,255,.15);
  border-radius: 100%;
  transform: scale(0);
  pointer-events: none;
}
.ripple.show {
  animation: ripple .6s ease-out;
}
@keyframes ripple {
  to {
    transform: scale(2);
    opacity: 0;
  }
}


/* =============================================================================
NAVI-TOGGLE-BUTTON
============================================================================= */

.c-hamburger {
	display: block;
	position: absolute;
	top: 5px;
	left: 5px;
	overflow: hidden;
	z-index: 20;
	width: 45px;
	height: 45px;
	font-size: 0;
	text-indent: -9999px;
	cursor: pointer;
}

.c-hamburger:focus {
	outline: none;
}

.c-hamburger span {
	display: block;
	position: absolute;
	top: 20px;
	left: 8px;
	height: 5px;
	width: 30px;
	background: #212121;
	content: "";
}

.c-hamburger span::before, .c-hamburger span::after {
display: block;
position: absolute;
left: 0px;
width: 30px;
height: 5px;
background-color: #212121;
content: "";
}

.c-hamburger span::before {
	top: -12px;
}

.c-hamburger span::after {
	bottom: -12px;
}

.c-hamburger--htla {
	background-color: transparent;
}

.c-hamburger--htla span, .c-hamburger--htla span::before, .c-hamburger--htla span::after {
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

.c-hamburger--htla span::before {
	-webkit-transform-origin: bottom left;
	-ms-transform-origin: bottom left;
	transform-origin: bottom left;
}

.c-hamburger--htla span::after {
	-webkit-transform-origin: top left;
	-ms-transform-origin: top left;
	transform-origin: top left;
}

/* active state, i.e. menu open*/
.c-hamburger--htla.is-active {
background-color: transparent;
} 

.c-hamburger--htla.is-active span {
	-webkit-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}

.c-hamburger--htla.is-active span::before,
.c-hamburger--htla.is-active span::after {
	width: 65%;
	left: -37px;
}

.c-hamburger--htla.is-active span::before {
	top: -3px;
	-webkit-transform: translateX(38px) translateY(4px) rotate(-45deg);
	-ms-transform: translateX(38px) translateY(4px) rotate(-45deg);
	transform: translateX(38px) translateY(4px) rotate(-45deg);
}

.c-hamburger--htla.is-active span::after {
bottom: -3px;
-webkit-transform: translateX(38px) translateY(-4px) rotate(45deg);
-ms-transform: translateX(38px) translateY(-4px) rotate(45deg);
transform: translateX(38px) translateY(-4px) rotate(45deg);
}