/*SCHRIFT*/
@import url("https://p.typekit.net/p.css?s=1&k=ffe2sld&ht=tk&f=26053.26054.26055.26056.26057.26058.26059.26060.26061.26062.26063.26064.26065.26067.25998.25999.26000.26001.26016.26017.26018.26019.26036.26037.26046.26047.26072.26073.26086.26087&a=56924505&app=typekit&e=css");
/*BODY*/
  body {
   	background-color:#020122;
	top: 0;
	margin: 0;
	padding:0;
	width: 1400px;
	height: 900px;
  }
/*FARBEN*/

.MAXIMUM_RED{
	background-color: #DE1A1A !important;/*!important damit elemente rot überschrieben werden, wenn klasse zugeordnet wrid (s. BACKGROUND in ergebnis03.html*/
	border-color: #DE1A1A;
}
.MEDIUM_SLATE_BLUE{
	background-color: #7F7EFF !important;
	border-color: #7F7EFF;
}
.SPRING_GREEN{
	background-color: #27FB6B !important;
	border-color: #27FB6B;
}
.XITETIC{
	background-color: #020122 !important;
	border-color: #020122;
	color: #E8EBF7;
}
.GHOST_WHITE{
	background-color: #E8EBF7 !important;
	border-color: #E8EBF7;
}
		
/*NAVIGATION*/
.NAV {
	display:flex;										/* Ausrichtung der Navpunkte in Ebene 1 */
	height: 70px;											/* Höhe der Navbar */
	width: 1400px;											/* Breite der Navbar */
	background-color: #020122;
	padding-top: 20px;

}
  .NAVBAR {
	position:relative;
	display: flex;											/* Ausrichtung der Navpunkte in Ebene 1 */
	top: 0;
	left:200px;
	height: 50px;
	justify-content: flex-end;
	width: 700px;	
}
.EBENE1 a {													/* Formatierung der überschriften in der Navbarr */
	display: block;
	line-height: 50px;
	text-decoration: none;
	color: #E8EBF7;
	text-align:left;
	transition-property: color;
	transition-duration: 0.5s;
	transition-timing-function: linear;
	transition-delay: 0s;
	font-family: acumin-pro, sans-serif;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 1px;
}
.ACTIVE a {													/* Aktive Seite Text */

	color: #7F7EFF ;

}

.EBENE1 .ACTIVE {
	
	color: #7F7EFF !important;
}
.EBENE1, .EBENE2 a {										/* Formatierung aller Texte in der Navbar */
	display: block;
	line-height: 50px;
	text-decoration: none;
	color: #E8EBF7 !important;
	font-family: acumin-pro, sans-serif;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 1px;

}
.EBENE1 {
	margin-left: 40px;
	/* Navpunkte in Ebene 1 */
	height: 50px;
	width: auto;
	background-color: transparent;
	text-align:center;
}


.QUIZ {
	display:block;
	position: relative;
	left: 200px;
	background-color: #27FB6B;
	width: 220px;
	height: 50px;
	border-radius: 34px;
	text-align: center;
	transition-property: background-color;
	transition-duration: 0.5s;
	transition-timing-function: linear;
	transition-delay: 0s;
	color: black;
	line-height: 50px;
	text-decoration: none;
	font-family: acumin-pro, sans-serif;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 1px;
	cursor: pointer;
}
.QUIZ:hover {
	background-color:#27CA6B;

}

#ERGEBNIS1_DOWNLOAD{
	position: absolute !important;
	left: 723px!important;
	top: 650px!important;
}
.QUIZ_STARTEN00{
	position: absolute;
	left: 160px;
	top: 380px;
}
#WINDOWS {
	margin-left: 50px;
}
.DOWNLOAD {
	position: relative;
	background-color: #7F7EFF;
	left:0;
}

.POS_DOWNLOAD2 { /*Wenn ein Download button neben einem anderen Download button positioniert werden soll (s. Challengeseite & Lehrmaterialien)*/
	position: relative;
	top: -50px;/* Downloadbutton ist 50 pixel hoch, der zweite ist jetzt auf der gleichen Höhe wie der erste*/
	left: 300px;
}
.EBENE1:hover a {
	color: #7F7EFF;

}
.EBENE2 {													/* Navpunkt in Ebene 2 */
	display: none;											/* Navpunkte anfangs nicht sichtbar */
	position: absolute;										/* Navpunkte überlappen nachfolgende Elemente */
	height: auto;
	min-width: 275px;										/*Breite mind 275px, es ginge mehr falls der text zu groß ist*/
	background-color: #020122;	
	text-indent: 1rem;										/* Text nach rechts verschieben */
	z-index: 1;												/*Z ebene erhöhen, damit dropdown Navigation im Vordergrund ist*/
}
.EBENE2 a:hover {
	background-color: #353455;
}
.EBENE1:hover > .EBENE2 {									/* macht Ebene 2 sichtbar */
	display: block;											/* durch Pseudoklasse Hover */
}


.WHITEBOX {
	position: absolute;
	background-color: rgba(232, 235, 247, 1);
	border-radius: 63px;
}
.POS_STARTBOX {
	position: absolute;
	left: 130px;
	top: 170px;
	width: 1140px;
	height: 550px;
}
.POS_QUIZBOX {
	position: absolute;
	left: 237px;
	top: 193px;
	height: 464px;
	width: 926px;
}
.BLUR-TOP {
	position: fixed;
	top:141px;
	left:98px;
	height: 40px;
	width: 1100px;	
	background-image: linear-gradient(rgba(232, 235, 247, 1), transparent);
	border-top-left-radius: 10px;
	
} 
.BLUR-BOTTOM {
	position: fixed;
	top:651px;
	left:98px;
	height: 40px;
	width: 1100px;	
	background-image: linear-gradient(transparent, rgba(232, 235, 247, 1));
	border-bottom-left-radius: 10px;
	
} 
.TEXTBOX {
	position: relative;
	left: 50px;
	top: 30px;
	width: 780px;
	height: 220px;
	overflow: hidden;
	display: table-cell;
    vertical-align: middle;	
}
.TEXTBOX p {
	line-height: 140%;
}
.JUMPTO {
	font-size: 20px;
	font-family: acumin-pro, sans-serif;
	font-weight: 400;
	font-style: normal;
}
.QUESTIONBOX {
	position: relative;
	left: 50px;
	top: 30px;
	width: 480px;
	height: 220px;
	overflow: hidden;
	display: table-cell;
    vertical-align: middle;
}
.INFOBOX {	/*Box, die erscheint, wenn man das Info-I clickt*/
	position: absolute;
	top: 157px;
	left: 153px;
	width: 1060px;
	height: 622px;
	border-radius: 34px;
	background-color: #7F7EFF;
	display: none; /*im normalzustand nicht sichtbar*/
}
.SICHTBAR {
	display: block !important; /* klasse wird per javascript zugeordnet um Infobox anzuzeigen*/
}
.UNSICHTBAR {
	display: none;
}
.JA {
	position: absolute;
	left: 200px;
	top: 310px;
}

.NEIN {
	position: absolute;
	left: 350px;
	top: 308px;
}

.INFO_AN {
	position: absolute;
	left: 1048px;
	top: 216px;
	cursor: pointer;
}.VIDEO_AN {
	position: absolute;
	left: 1048px;
	top: 216px;
	cursor: pointer;
}
.TIPPS_AN {
	left: 1131px!important;
	top: 160px!important;
}
.TIPP {
	position: absolute;
	left: 70px;
	top: 57px;
	
}
.INFO_AUS {
	position: absolute;
	left: 1011px;
	top: -17px;
	cursor: pointer;
}

.SEITE_WEITER {
	position: absolute;
	left: 950px;
	top: 530px;
	z-index: 1;
	cursor: pointer;
}
.SEITE_ZURUECK {
	position: absolute;
	left: 40px;
	top: 530px;
	z-index: 1;
	cursor: pointer;
}
.INFO_LEHRMAT {									/*Info box auf der Lehrmaterial seite*/
	position: absolute;
	left: 50px;
	top: 140px;
	height: 700px;
	width: 1300px;
	overflow-x: auto;					/*macht scrollbar*/
	border: 1px;
	border-color: #020122;
	border-style: solid;
}

.ERGEBNIS_BOX {									/*Whitebox auf den Ergebnisseiten*/
	position: absolute;
	left: 164px;
	top: 178px;
	height: 568px;
	width: 1030px;
	overflow-x: auto;					/*macht scrollbar*/
	border: 1px;
	border-color: #020122;
	border-style: solid;
}

.ERGEBNIS_MINIBOX{
	padding-top: 10px;
	position: absolute;
	left: 611px;
	top: 244px;
	height: 363px;
	width: 450px;					/*macht scrollbar*/
	border: 1px;
	border-color: #020122;
	border-style: solid;
	border-radius: 63px;
	background-color: #fff;
}
.ERGEBNIS_MINIBOX p {
	width: 350px;
	}
.MEDAILLE {
	display: flex;
  	align-items: center;
  	justify-content: center;
	position: absolute;
	top:260px;
	left:200px;
	width: 396px;
	height: 396px;
	border-radius: 100%;
}

.MEDAILLE p {
	font-size: 300px;
	font-weight: 600!important;
	color: white;	
}
.INFO_QUIZ {									/*Info box auf der Infos zum Quiz seite*/
	position: absolute;
	left: 50px;
	top: 140px;
	height: 550px;
	width: 1300px;
	overflow-x: auto;					/*macht scrollbar*/
	border: 1px;
	border-color: #020122;
	border-style: solid;
}
.CHALLENGE {									/*Info box auf der Infos zum Quiz seite*/
	position: absolute;
	left: 50px;
	top: 140px;
	height: 650px;
	width: 1300px;
	overflow-x: auto;					/*macht scrollbar*/
	border: 1px;
	border-color: #020122;
	border-style: solid;
}
.IMPRESSUM {									/*Info box auf der Infos zum Quiz seite*/
	position: absolute;
	left: 50px;
	top: 140px;
	height: 650px;
	width: 700px;
	overflow-x: auto;					/*macht scrollbar*/
	border: 1px;
	border-color: #020122;
	border-style: solid;
}
.INFO_TEXT {
	position: absolute;
	top: 45px;
	left: 50px;
	width: 957px; 
	height: 536px;
	background-color: #E8EBF7;
	overflow: auto;
}
.INFO_TEXT p{
	font-size: 30px;
	padding: 50px;
	
}
.IMPRESSUM_TEXT{
	position: absolute;
	top: 45px;
	left: 50px;
	width: 550px; 
	height: 536px;
	background-color: #E8EBF7;
}

.VIDEO_QUIZ {
	position: absolute;
	top: 45px;
	left: 50px;
}
/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
   background-color: #555;
    border-radius: 10px;
    border: 3px solid #7F7EFF;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #7F7EFF;
}

.SPEECHBUBBLE {
	position: absolute;
	left: 100px;
	top: 50px;
	width: 310px;
height: auto;
	padding: 20px 20px 20px 20px;
	margin:0 auto;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 30px;
	background: #7F7EFF;
	color: white;
}
.SPEECHBUBBLE:before {
content: ' ';
position: absolute;

left: 100%;
top: 50%;
border: 20px solid;
border-color: transparent;	
}
.SPEECHBUBBLE:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 100%;
top: 50%;
border: 15px solid;
border-color: transparent transparent #7F7EFF #7F7EFF;	
}

.BUBBLE_RED {
	background-color: #DE1A1A;
	border-radius: 100%;
	opacity: 0.9;
	border-color: #DE1A1A;
}
.BUBBLE_GREEN{
	background-color: #27FB6B;
	border-radius: 100%;
	opacity: 0.9;
	border-color: #27FB6B;
}
.BUBBLE_BLUE {
	background-color: #7F7EFF;
	border-radius: 100%;
	opacity: 0.9;
	border-color: #7F7EFF;
}
.BUBBLE_WHITE {
	background-color: #E8EBF7;
	border-radius: 100%;
	opacity: 0.9;
	border-color: #E8EBF7;
}
.RING {
	
	background-color: transparent!important; /*important, weil bei der Klasse für die Farbzuordnungen die hintergrundfarbe überschrieben werden muss*/
	border-radius: 100%;
	border-style: solid;
	border-width: 150px;
	opacity: 0.9;
}

.OBENLINKS{
	position: absolute;
	top: 0;
	left: 0;
}
.OBENRECHTS{
	position: absolute;
	top: 0;
	left: 1400px;
}
.UNTENLINKS{
	position: absolute;
	top: 900px;
	left: 0;
}
.UNTENRECHTS{
	position: absolute;
	top: 900px;
	left: 1400px;
}
.MITTE{
	position: absolute;
	top: 450px;
	left: 700px;
}

.SMALL {
	width: 100px;
	height: 100px;
}
.MEDIUM {
	width: 300px;
	height: 300px;
}
.BIG {
	width: 400px;
	height: 400px;
}
.XXL{
	width: 500px;
	height: 500px;
}
h1 {
	font-size: 60px;
	font-family: acumin-pro, sans-serif;
	font-weight: 900;
	font-style: normal;
}

h2 {
	font-size: 30px;
	font-family: acumin-pro, sans-serif;
	font-weight: 600;
	font-style: normal;
}

p {
	font-size: 20px;
	font-family: acumin-pro, sans-serif;
	font-weight: 400;
	font-style: normal;
}

li {
	font-size: 20px;
	font-family: acumin-pro, sans-serif;
	font-weight: 400;
	font-style: normal;
}

header{
	position: absolute; 
	top: 50px;
	padding:150px;
	color: #161a15;
}







.POS_BUBBLEMAN_QUIZ {										/*Positionierung des Bubble Mans auf den Quiz Seitn*/
	position: absolute;
	top:230px;
	left:800px;
}
.POS_BUBBLEMAN_ERGEBNIS {										/*Positionierung des Bubble Mans auf den Ergebnis Seiten*/
	position: absolute;
	top:230px;
	left:1000px;
}
.POS_BUBBLEMAN_START {										/*Positionierung des Bubble Mans auf der Start Seite*/
	position: absolute;
	top:100px;
	left:840px;
}
.POS_BUBBLEMAN_INFO {
	position: absolute;
	top:230px;
	left:1000px;
}
.BUBBLE_MAN:hover{
	cursor:help;
}
.BUBBLE_MAN{													/*positionierung vom Bubble Männchen */											
	position:absolute;
	animation-name: SCHWEBEN;							/* Name (keyframe) */
	animation-duration: 3s;							/* Dauer (n) */
	animation-timing-function: ease-in-out;				/* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
	animation-delay: 0s;							/* Verzögerung (n) */
	animation-iteration-count: infinite;					/* Wiederholungen (n, infinite) */
	animation-direction: alternate-reverse;					/* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
	animation-fill-mode: forwards;					/* Endzustand (none, forwards, backwards, both) */
	animation-play-state: running;					/* für JavaScript (running, paused) */
		}
		@keyframes SCHWEBEN {									/* Prozentwerte beziehen sich auf die Dauer der Animation */
		
	from {transform:translate(0, 0px);} 				
    50% {transform:translate(0, -25px);}
    to {transform: translate(0, -0px);}
			
}

.BACKGROUND {
	position: absolute;
	top:0;
	left: 0;
	margin: 0;
	padding:0;
	width: 1400px;
	height: 857px;
	overflow: hidden;
	z-index: -1;
}

.bgbubblez1{					/*animation für Background Bubble Gruppe 1 */				
	
	animation-name: FLIEGEN1;						/* Name (keyframe) */
	animation-duration: 50s;							/* Dauer (n) */
	animation-timing-function: linear;				/* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
	animation-delay: 0s;							/* Verzögerung (n) */
	animation-iteration-count: infinite;			/* Wiederholungen (n, infinite) */
	animation-direction: alternate;					/* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
	animation-fill-mode: forwards;					/* Endzustand (none, forwards, backwards, both) */
	animation-play-state: running;					/* für JavaScript (running, paused) */
	} 
	@keyframes FLIEGEN1 {
		100% {
			top: 900px;
			left: 1300px;
			
		}												
	}
.bgbubblez2{					/*animation für Background Bubble Gruppe 1 */				
	
	animation-name: FLIEGEN2;						/* Name (keyframe) */
	animation-duration: 30s;							/* Dauer (n) */
	animation-timing-function: linear;				/* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
	animation-delay: 0s;							/* Verzögerung (n) */
	animation-iteration-count: infinite;			/* Wiederholungen (n, infinite) */
	animation-direction: alternate;					/* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
	animation-fill-mode: forwards;					/* Endzustand (none, forwards, backwards, both) */
	animation-play-state: running;					/* für JavaScript (running, paused) */
	}
	@keyframes FLIEGEN2 {
		
		100% {
			top: -400px;
			left: -500px;
			
		}												
	}
.bgbubblez3{					/*animation für Background Bubble Gruppe 1 */				
	
	animation-name: FLIEGEN3;						/* Name (keyframe) */
	animation-duration: 60s;							/* Dauer (n) */
	animation-timing-function: linear;				/* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
	animation-delay: 0s;							/* Verzögerung (n) */
	animation-iteration-count: infinite;			/* Wiederholungen (n, infinite) */
	animation-direction: alternate;					/* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
	animation-fill-mode: forwards;					/* Endzustand (none, forwards, backwards, both) */
	animation-play-state: running;					/* für JavaScript (running, paused) */
	}
	@keyframes FLIEGEN3 {
		49.99% {
			left: 1000px;
		}
		100% {
			top: 0px;
			left: -500px;
			
		}												
	}
.bgbubblez4{					/*animation für Background Bubble Gruppe 1 */				
	
	animation-name: FLIEGEN4;						/* Name (keyframe) */
	animation-duration: 70s;							/* Dauer (n) */
	animation-timing-function: linear;				/* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
	animation-delay: 0s;							/* Verzögerung (n) */
	animation-iteration-count: infinite;			/* Wiederholungen (n, infinite) */
	animation-direction: alternate;					/* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
	animation-fill-mode: forwards;					/* Endzustand (none, forwards, backwards, both) */
	animation-play-state: running;					/* für JavaScript (running, paused) */
	}
	@keyframes FLIEGEN4 {
		29.99% {
			left: -1000px;
			
		}
		50% {
			left: 1000px;
			
		}
		100% {
			top: 0px;
			left: -500px;
			
		}												
	}
.bgbubblez5{					/*animation für Background Bubble Gruppe 1 */				
	
	animation-name: FLIEGEN1;						/* Name (keyframe) */
	animation-duration: 40s;							/* Dauer (n) */
	animation-timing-function: linear;				/* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
	animation-delay: 0s;							/* Verzögerung (n) */
	animation-iteration-count: infinite;			/* Wiederholungen (n, infinite) */
	animation-direction: alternate;					/* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
	animation-fill-mode: forwards;					/* Endzustand (none, forwards, backwards, both) */
	animation-play-state: running;					/* für JavaScript (running, paused) */
	} 
	@keyframes FLIEGEN1 {
		100% {
			top: 100px;
			left: 1300px;
			
		}												
	}

.FOOTER {
	position: absolute;
	left: 0;
	top: 817px;
	width: 1400px;
	height: 40px;
	text-align: center;	
}
.FOOTER p {
	font-size: 12px;
	font-family: acumin-pro, sans-serif;
	font-weight: normal;
	
}
.SWITCH_AREA {
	position:absolute;
	height: 40px;
	top: 0;
	left: 1200px;
	font-size: 12px;
	font-family: acumin-pro, sans-serif;
	font-weight: normal;
	padding-top: 10px;
}
 

.STOP {
	animation-play-state: paused !important;
}

.SWITCH {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
	top: -2px; /*so ist der Switch Button verkital mittig zum Text "Hintergrund Animationen ausgerichtet"*/
	left: 5px; /* abstand links zu "bewegter Hintergrund"*/
}

.SWITCH input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #7F7EFF;
}

input:focus + .slider {
  box-shadow: 0 0 1px #7F7EFF;
}

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}