/* --- allgemein --------------------------------------------------------------- */

body {
	background-color: white;
	margin: 0;
	padding: 0;
	font-family: 'regular', sans-serif;
	color: black;
	/*cursor: none !important;*/
}

.deactivate {
	z-index: 99;
	width: 540px;
	height: 780px;
	position: absolute;
}

.deactivateOverlay {
	z-index: 40;
	width: 553px;
	height: 850px;
	position: absolute;
}

#container {
	width: 1640px;
	height: 880px;
	padding: 100px 180px 100px 100px;
	background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(188,188,188,0.65) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(188,188,188,0.65))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(188,188,188,0.65) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(188,188,188,0.65) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(188,188,188,0.65) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(188,188,188,0.65) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6bcbcbc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	overflow: hidden;
}

/* --- Schriften --------------------------------------------------------------- */

@font-face {
	font-family: light;
	src: url('font/OpenSans-Light.ttf');
}

@font-face {
	font-family: regular;
	src: url('font/OpenSans-Regular.ttf');
}

@font-face {
	font-family: semi;
	src: url('font/OpenSans-Semibold.ttf');
}

h1 {
	margin-top: -12px;
	padding: 0;
	text-align: center;
	font-size: 48px;
	font-family: 'semi', sans-serif;
}

h2 {
	padding: 0;
	font-size: 24px;
	font-weight: 600;
	font-family: 'semi', sans-serif;
}

h3 {
	font-weight: 400;
	font-style: italic;
	font-size: 14px;
}

h4 {
	font-size: 20px;
	font-weight: 800;
	margin-left: 10px;
	margin-top: 0px;
	font-family: 'regular', sans-serif;
}

h5 {
	font-size: 21px;
	font-weight: 800;
	margin: 0px 0px 20px 0px;
	font-family: 'semi', sans-serif;
}

h6 {
	font-size: 16px;
	font-weight: 600;
	margin: 15px 0px 0px 0px;
}

/* --- Header --------------------------------------------------------------- */

#header {
	width: 100%;
	height: 36px;
	position: relative;
	float: left;
	margin-bottom: 20px;
}

/* --- Content --------------------------------------------------------------- */

.contentAnimation {
	width: 1640px;
	height: 292px;
	position: relative;
	float: right;
	padding: 40px 0px;
}

/* --- Prozess Beschriftung --------------------------------------------------------------- */

.prozessName {
	width: 190px;
	height: 292px;
	position: relative;
	float: left;
	margin-right: 55px;
}

.prozessName h2 {
	margin-top: 244px;
}

.prozessName h3 {
	margin-top: -20px;
}

/* --- Animation --------------------------------------------------------------- */

.animation {
	height: 225px;
	position: relative;
	float: left;
	margin-right: 70px;
	width: 275px;
}

/* --- Prozessablauf --------------------------------------------------------------- */

.prozess {
	width: 1050px;
	height: 292px;
	float: left;
}

.prozessTransparent {
	width: 1050px;
	height: 292px;
	float: left;
	position: absolute;
	z-index: 2;
	left: 589px;
}

/* --- Prozessablauf - Timeline --------------------------------------------------------------- */

.timeline {
	width: 3px;
	height: 640px;
	background-color: #e61d72;
	position: absolute;
	z-index: 99;
	margin-left: 590px;
}

.timelineTextTop {
	margin-top: 270px;
	margin-left: 10px;
	width: 400px;
}

.timelineTextBottom {
	margin-top: 282px;
	margin-left: 10px;
	width: 400px;
	height: 20px;
}

.time {
	background-color: #e61d72;
	padding: 3px 8px 3px 8px;
	width: 60px;
	color: white;
}

.time2 {
	background-color: #e61d72;
	padding: 3px 8px 3px 8px;
	width: 60px;
	margin-top: 13px;
	color: white;
}

/* --- Prozessablauf - Zeitreihe --------------------------------------------------------------- */

.timeset {
	width: 100%;
	height: 67px;
	float: left;
	position: relative;
}

.timeFix0 {
	background-color: black;
	padding: 2px 6px;
	width: 40px;
	color: white;
}

.timeFix235 {
	background-color: black;
	padding: 3px 6px;
	width: 58px;
	color: white;
	left: 575px;
	top: 0px;
	position: absolute;
}

.timeFix02 {
	background-color: black;
	padding: 3px 6px;
	width: 40px;
	color: white;
	margin-top: 38px;
}

.timeFix2352 {
	background-color: black;
	padding: 3px 6px;
	width: 58px;
	color: white;
	left: 575px;
	top: 0px;
	position: absolute;
	margin-top: 38px;
}

.timeFix430 {
	background-color: black;
	padding: 3px 6px;
	width: 58px;
	color: white;
	left: 1050px;
	top: 0px;
	position: absolute;
}

.timeFix4302 {
	background-color: black;
	padding: 3px 6px;
	width: 58px;
	color: white;
	left: 1050px;
	top: 0px;
	position: absolute;
	margin-top: 38px;
}

.timeFixLine0 {
	border-style: dotted;
	border-width: 0px 0px 0px 1px;
	width: 3px;
	height: 610px;
	border-color: black;
	position: absolute;
}

.timeFixLine235 {
	border-style: dotted;
	border-width: 0px 0px 0px 1px;
	width: 3px;
	height: 610px;
	border-color: black;
	position: absolute;
	left: 575px;
}

.timeFixLine430 {
	border-style: dotted;
	border-width: 0px 0px 0px 1px;
	width: 3px;
	height: 610px;
	border-color: black;
	position: absolute;
	left: 1050px;
}

/* --- Prozessablauf - Diagram --------------------------------------------------------------- */

.diagram {
	width: 100%;
	height: 145px;
	float: left;
	position: relative;
	margin-bottom: 5px;
}

.diagram img {
	position: absolute;
}

.diagram div {
	opacity: 0.05;
}

.legende {
	position: absolute;
	z-index: 50;
	opacity: 1 !important;
	margin-left: 585px;
}

.colorLegendeV {
	width: 15px;
	height: 15px;
	background-color: #a6c4cc;
	opacity: 1 !important;
	position: relative;
	float: left;
}

.viscosity {
	opacity: 1 !important;
	position: relative;
	float: left;
	margin-left: 5px;
	margin-top: -2px;
	font-size: 14px;
}

.colorLegendeD {
	width: 15px;
	height: 15px;
	background-color: #6d6b6b;
	opacity: 1 !important;
	position: relative;
	float: left;
}

.degree {
	opacity: 1 !important;
	position: relative;
	float: left;
	margin-left: 5px;
	margin-top: -2px;
	font-size: 14px;
}

/* --- Prozessablauf - Balken --------------------------------------------------------------- */

.block {
	width: 100%;
	height: 75px;
	float: left;
	position: relative;
	font-weight: 100;
	font-size: 10px;
	color: white;
}

.block span {
	position: absolute;
	text-align: center;
	width: 100%;
	margin-top: 3px;
}

.block15 {
	width: 36px;
	height: 100%;
	background-color: black;
	margin-right: 5px;
	float: left;
	position: relative;
}

.block152 {
	width: 36px;
	height: 100%;
	background-color: black;
	margin-right: 5px;
	float: left;
	position: relative;
}

.block10 {
	width: 24px;
	height: 100%;
	background-color: black;
	margin-right: 5px;
	float: left;
	position: relative;
}

.block216 {
	width: 216px;
	height: 100%;
	background-color: black;
	margin-right: 5px;
	float: left;
	position: relative;
}

.block720 {
	width: 720px;
	height: 100%;
	background-color: black;
	margin-right: 5px;
	float: left;
	position: relative;
}

.block36 {
	width: 34px;
	height: 100%;
	background-color: black;
	float: left;
	position: relative;
}

.block362 {
	width: 34px;
	height: 100%;
	background-color: black;
	float: left;
	position: relative;
}

.block18 {
	width: 43px;
	height: 100%;
	background-color: black;
	margin-right: 5px;
	float: left;
	position: relative;
}

.block7 {
	width: 17px;
	height: 100%;
	background-color: black;
	margin-right: 5px;
	float: left;
	position: relative;
}

.block180 {

	/* --- Nicht korrekt -------------- */
	width: 425px;
	height: 100%;
	background-color: black;
	float: left;
	position: relative;
	margin-right: 5px;
}

/* --- Prozessablauf - Tooltip --------------------------------------------------------------- */

.tooltipRtmPre {
	position: absolute;
	margin-top: 65px;
	z-index: 999;
	display: none;
}

.tooltipCrtmPre {
	position: absolute;
	margin-top: 65px;
	z-index: 999;
	display: none;
}

.tooltipRtmClose {
	position: absolute;
	margin-top: 65px;
	z-index: 999;
	display: none;
	margin-left: 40px;
}

.tooltipCrtmClose {
	position: absolute;
	margin-top: 65px;
	z-index: 999;
	display: none;
	margin-left: 40px;
}

.tooltipRtmImp {
	position: absolute;
	margin-top: 65px;
	z-index: 999;
	display: none;
	margin-left: 70px;
}

.tooltipCrtmImp {
	position: absolute;
	margin-top: 65px;
	z-index: 999;
	display: none;
	margin-left: 88px;
}

.tooltipRtmCure {
	position: absolute;
	margin-top: 65px;
	z-index: 999;
	display: none;
	margin-left: 290px;
}

.tooltipCrtmCure {
	position: absolute;
	margin-top: 65px;
	z-index: 999;
	display: none;
	margin-left: 110px;
}

.tooltipRtmDem {
	position: absolute;
	margin-top: 65px;
	z-index: 999;
	display: none;
	margin-left: 960px;
}

.tooltipCrtmDem {
	position: absolute;
	margin-top: 65px;
	z-index: 999;
	display: none;
	margin-left: 540px;
}

.tooltip img {
	margin-left: 5px;
	margin-top: -2px;
}

.tooltipText {
	background-color: red;
	font-weight: 400;
	font-size: 16px;
	background-color: #a6c4cc;
	color: black;
	border-radius: 4px;
	padding: 5px 10px;
}

/* --- Interaktionsfläche - Buttons --------------------------------------------------------------- */

.interaktionsSpace {
	width: 100%;
	height: 100px;
	position: relative;
	float: left;
	margin-top: 0px;
}

.circleButtonBg {
	width: 60px;
	height: 60px;
	border-radius: 30px;
	background-color: #e61d72;
}

.circleButtonFront {
	width: 50px;
	height: 50px;
	border-radius: 25px;
	background-color: black;
	margin-left: 5px;
	margin-top: 5px;
	position: absolute;
}

.button {
	width: 60px;
	height: 100px;
	margin-right: 35px;
	float: left;
}

.button span {
	text-align: center;
	margin-top: 5px;
	margin-left: -10px;
	width: 80px;
	position: absolute;
	font-weight: 100;
	font-size: 12px;
}

.logo {
	position: absolute;
	margin-top: 0px;
	height: 45px;
	width: 320px;
	margin-left: -30px;
}

/* --- Overlay allgemein --------------------------------------------------------------- */

.overlay {
	width: 553px;
	height: 959px;
	background-color: white;
	position: absolute;
	margin-top: -1080px;
	margin-left: 1245px;
	display: none;
	padding: 60px;
	z-index: 99;
	border-left: 1px;
	border-style: solid;
	border-width: 0px 0px 0px 2px;
	border-color: gray;
	opacity: 0.5px;
	
}

.headlineOverlay {
	width: 553px;
	float: right;
	height: 15px;
	margin-top: 19px;
}

.contenOverlay {
	width: 553px;
	height: 790px;
	position: relative;
	float: left;
	line-height: 28px;
	opacity: 1 !important;
	overflow: hidden;
	margin-top: 58px;
	text-align: justify;
}

.contenOverlay img {
	margin: 10px 0px;
	opacity: 1 !important;
}

.interaktionOverlay {
	width: 553px;
	height: 40px;
	margin-top: -3px;
	position: relative;
	float: left;
}

.iconHeadline {
	width: 50px;
	height: 50px;
	border-radius: 25px;
	background-color: black;
	margin-left: 5px;
	margin-right: 10px;
	position: relative;
	float: left;
}

.close {
	width: 40px;
	height: 40px;
	position: relative;
	float: right;
	margin-left: 10px;
}

.overlayJump {
	width: 40px;
	height: 40px;
	position: relative;
	float: right;
	margin-left: 10px;
}

.close:last-child {
	margin-left: 0px;
}

.interaktionOverlay .circleButtonBg {
	width: 40px;
	height: 40px;
	border-radius: 30px;
	background-color: #e61d72;
}

.interaktionOverlay .circleButtonFront {
	width: 34px;
	height: 34px;
	border-radius: 25px;
	background-color: black;
	margin-left: 3px;
	margin-top: 3px;
	position: absolute;
}

.partTwo {
	display: none;
}

.partThree {
	display: none;
}

.partFour {
	display: none;
}

.partFive {
	display: none;
}

.video {
	margin-bottom: 20px;
	z-index: 90;
	position: absolute;
}

.videoGap {
	margin-top: 425px;
}

.headlineOverlay ul {
	font-size: 10px;
	list-style: none;
	margin-left: 26px;
	margin-top: -15px;
}

.textIndent {
	margin-left: 20px;
}

.imgScrollen {
	position: fixed;
	z-index: 99;
	margin-top: 350px;
	margin-left: 150px;
}

*:focus {
	outline: 0;
}

.crossLink {
	width: 150px;
	float: left;
	color: #E61D72;
	margin-top: -44px;
	margin-left: 139px;
}
/* --- Select deaktivieren --------------------------------------------------------------- */

.deselect ::selection {
	background: transparent;
	color: inherit;
}
.deselect ::-moz-selection {
	background: transparent;
	color: inherit;
}
.deselect {
	-ms-user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

/* --- Eye Catcher --------------------------------------------------------------- */

#containerEye {
	width: 880px;
	height: 1550px;
	padding: 100px;
	background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(188,188,188,0.65) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(188,188,188,0.65))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(188,188,188,0.65) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(188,188,188,0.65) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(188,188,188,0.65) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(188,188,188,0.65) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6bcbcbc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	overflow: hidden;
}

.animationTimer {
	width: 100%;
	height: auto;
	margin-top: 230px;
	overflow: hidden;
}

.prozessAni {
	width: 400px;
	height: 340px;
	position: relative;
}

.prozessAniName {
	position: relative;
	width: 400px;
}

.prozessAniName h2 {
	margin-top: 0px;
	font-size: 30px;
	
}

.prozessAniName h3 {
	margin-top: -20px;
}

.benefits {
	width: 100%;
	height: 200px;
	margin-top: 80px;
}

.benefits h2 {
	font-size: 30px;
}

.balkendia {
	width: 1080px;
	height: 447px;
	margin-left: -100px;
	background-image: url(img/lineBg.png);
	margin-top: 80px;
	position: relative;
}

.clock {
	width: 1080px;
	height: 80px;
	margin-top: 30px;
	position: absolute;
	margin-left: -100px;
}

.bar {
	background-color: black;
	width: 1080px;
	height: 10px;
	position: absolute;
	
}

.barBg {
	background-color: #E61D72;
	width: 1080px;
	height: 10px;
	position: absolute;
	overflow: hidden;
	margin-top: 70px;
}

.barline {
	width: 2px;
	height: 30px;
	margin-top: 60px;
	background-color: black;
	position: absolute;
	
}

.timer {
	width: 164px;
	height: 60px;
	position: absolute;
}

.yellowLeft {

	position: absolute;
	bottom: -423px;
	z-index: 10;
}

.yellowRight {
	position: absolute;
	bottom: 0px;
	z-index: 10;
}

.boxYellow {
	width: 195px;
	height: 448px;
	position: absolute;
	margin-left: 100px;
	margin-top: -450px;
	overflow: hidden;
}

.boxYellowRight {
	width: 195px;
	height: 260px;
	position: absolute;
	margin-left: 785px;
	margin-top: -262px;
	overflow: hidden;
}

#counter {
	float: right;
	position: relative;
	font-family: 'semi', sans-serif;
	font-size: 22px;
	margin-top: -10px;
	text-align: right;
	margin-right: 28px;
}

#counter2 {
	float: left;
	position: relative;
	font-family: 'semi', sans-serif;
	font-size: 22px;
	margin-top: -10px;
	text-align: right;
	margin-left: 28px;
}

.count {
	color: white;
	width: 70px;
	margin-top: 14px;
	height: 40px;
	float: left;
	position: relative;
	text-align: right;
	
}

.count span {
	font-size: 10px;
	float: right;
	position: relative;
	text-align: right;
	margin-top: -18px;
}

.count2 {
	color: white;
	width: 70px;
	margin-top: 14px;
	height: 40px;
	float: right;
	position: relative;
	text-align: left;
	
	
}

.count2 span {
	font-size: 10px;
	float: right;
	position: relative;
	text-align: left;
	margin-top: -18px;
}

.pinkL {
	position: absolute;
	background-image: url(img/pinlLeft.png);
	background-repeat: no-repeat;
	z-index: 50;
	width: 279px;
	height: 47px;

}

.pinkRight {
	position: absolute;
	background-image: url(img/pinkRight.png);
	background-repeat: no-repeat;
	z-index: 50;
	width: 279px;
	height: 47px;

}

.benefits img {
	position: absolute;
}

.benefits ul {
	
	
}

.benefits li {
	list-style-type: none;
	background: url(img/check.png) no-repeat;
	height: 35px;
	vertical-align: middle;
	padding-left: 45px;
	padding-top: 5px;
	margin-top: 12px;
	
}

.benefits h5 {
}

.animatePeople {
	width: 1080px;
	height: 445px;
	position: absolute;
	top: 1110px;
	left: 0px;	
	overflow: hidden;
}


.people {
	width: 1080px;
	height: 445px;
	position: absolute;
	z-index: 999;
	display: none;
}

.footer {
	height: 70px;
	width: 880px;
	background-color: black;
	color: white;
	padding: 50px 100px;
}

.footer span {
}

.test {
	background-image: url(img/btPlay.png);
}