.ifaward {
    opacity: 1 !important;
    position: absolute;
    z-index: 999999;
    bottom: 1em;
    right: 0;
    width: 10vW;
    max-height: 15vH;
}
#Scene01 {
	background-color: #ffff4a;
	height: 100vH;
}

#Scene01 img, #Scene02 img, #Scene03 img, #Scene06 img {
	opacity: 0;
}

#Scene01 .Claim {
	white-space: nowrap;
	margin-top: 7em;
}

img[alt="Wir"] {
	max-width: 16vW;
}
img[alt="machen"] {
	max-width: 29vW;
}
img[alt="Webseiten"] {
	max-width: 37vW;
}
img[alt="Punkt"] {
	max-width: 6vW;
	margin-left: -.5em;
}
img[alt="erfolgreich"] {
	max-width: 49vW;
}

.glass-break {
	position: absolute;
    top: 50%;
    right: 1.5%;
    transform: translate(0,-50%);
    width: 80vW;
    height: auto;
}

.Pencil {
	opacity: 0;
	position: fixed;
    z-index: 99997;
    top: calc(50% + 7.5em);
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 15em;
}
#Scene01 .bf-logo {
	position: absolute;
    z-index: 0;
    top: 20%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
    max-width: 30em;
}
#Scene01 .bf-circle {
	position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 10em;
    transform-origin: center center;
    animation: spin 4s linear infinite;
}
@keyframes spin {
	from { transform: translate(-50%,-50%) rotate(0deg); }
	to { transform: translate(-50%,-50%) rotate(359deg); }
}
.goStart {
	position: absolute;
    bottom: 2vH;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 99vW;
    opacity: 0;
    cursor: pointer;
}
.goStart * {
	color: #ff0086;
    font-size: 1.5em;
}
.goStart i {
	transform: rotate(180deg);
}


#Scene02 .headline {
	position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,0);
    font-size: 1.5em;
    color: #f2594c;
    width: 100%;
    text-align: center;
}

#Scene02 .WhatWeDo {
	max-height: 100vH;
    position: absolute;
    bottom: -2em;
/*     margin-top: 2em; */
    margin-left: 10vW;
    transform: rotate(-90deg);
    transform-origin: center bottom;
}

#Scene02 .Ball {
	position: relative;
    top: -20vH;
    right: 5vW;
    width: 24vW;
    transform: translate(75vW, 0);
}

#Scene02 .Cloud {
    position: relative;
    top: 5vH;
    right: 34vW;
    width: 20vW;
    transform: translate(75vW, 0);
}


#Scene03 {
	background-color: #19b9cb;
}

#Scene03 .Title {
    opacity: 1;
    position: absolute;
    width: 60vW;
}

#Scene03 .FirstPara {
	margin-top: 20vH;
}

#Scene03 .Brain {
	position: absolute;
    height: 40vH;
    margin-top: 4vH;
    right: 20vW;
}

#Scene03 .Krone {
	max-width: 80%;
    position: relative;
    float: right;
    transform-origin: center center;
}

#Scene04 {
	background-color: #ffff4a;
}

#Scene04 *, #Scene04 .headline, #Scene04 a, #Scene04 a:hover, #Scene04 a:focus, #Scene04 a:active {
	color: #ff0086;
}

#Scene04 .Title {
    opacity: 1;
    position: absolute;
    width: 60vW;
    right: 0;
}

#Scene04 .FirstPara {
	background-size: contain;
	background-position: right bottom;
	background-repeat: no-repeat;
	padding-bottom: 15em;
	margin-top: 7em;
}
#Scene04 .SecondPara {
	margin-bottom: 3em;
}

#Scene04 .OldMac {
	z-index: 99;
    position: relative;
}
#Scene04 .Wachmacher {
	position: absolute;
    z-index: 1;
    width: 37%;
    left: 51%;
    transform: translate(-50%,0);
}
#Scene04 .Wachmacher img {
	display: none;
	position: absolute;
}
#Scene04 .Wachmacher img:nth-child(1) {
	display: block;
}


#Scene05 {
	background-color:#cb0547;background-image:  
	radial-gradient(at 88% 16%, hsla(335,97%,41%,1) 0, hsla(335,97%,41%,0) 28%),  
	radial-gradient(at 93% 83%, hsla(337,84%,66%,1) 0, hsla(337,84%,66%,0) 57%);
}

#Scene05 *, #Scene05 .headline, #Scene05 a, #Scene05 a:hover, #Scene05 a:focus, #Scene05 a:active {
	color: #f3f749;
}

#Scene05 .Title {
	position: relative;
	transform: translate(0,-120%);
	margin-top: 5em;
    width: 30vW;
}

#Scene05 .FirstPara {
	margin-bottom: 12em;
}

#Scene05 .Pencils {
	position: absolute;
	width: 45vW;
    max-width: 43em;
    left: -7vW;
}

#Scene05 .Eyedropper {
	position: absolute;
	width: 0vW;
    right: 1vW;
    margin-top: -4em;
}

#Scene05 .Palette {
	position: relative;
	float: right;
	right: -80vW;
    width: 35vW;
    max-width: 40em;
    transform: rotate(90deg);
    transform-origin: center center;
}

#Scene05 .MacBook {
	position: fixed;
    bottom: 0;
    left: 50%;
    height: 50%;
    transform: translate(-50%,100%);
}

#Scene05 .Fill {
	position: absolute;
	top: 50%;
	left: 0;
	width: 30vW;
	transform: translate(-100%,0);
}


#Scene06 {
	background-color: transparent;
	z-index: 0;
	display: none;
	cursor: progress;
}

#Scene06 *, #Scene06 .headline, #Scene06 a, #Scene06 a:hover, #Scene06 a:focus, #Scene06 a:active {
	color: #ff0086;
}

#Scene06 .closeMacBook {
    opacity: 0;
    display: none;
    cursor: pointer;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    text-shadow: 0 0 .4em rgba(0,0,0,.65);
}
#Scene06 .closeMacBook * {
	color: #fff;
}
#Scene06 .LevelCompleted {
	opacity: 1;
    margin-bottom: -1.5em;
	width: 50vW;
}
#Scene06 .closeMacBook p:first-of-type {
	font-family: 'DIN Next Slab W01 Medium';
    line-height: 1.2;
    font-size: .85em;
    color: #444;
    text-shadow: 0 0 .9em rgba(255,255,255,.9);
    margin-bottom: 2em;
}
#Scene06 .closeMacBook p:first-of-type * {
	color: #444;
}
#Scene06 .closeMacBook p:last-of-type {
	border: 1px solid;
    border-radius: 6px;
    padding: 0.2em 1em;
    display: inline-block;
    box-shadow: 0.1em 0.1em 0.3em rgb(0 0 0 / 20%);
}


#Scene06 .Clock {
	position: fixed;
    top: 2vH;
    right: 5vW;
    max-width: 20em;
}

#Scene06 .Counter {
	position: fixed;
    top: 5vH;
    right: 9vW;
    width: auto;
    font-size: 4em;
    color: #c4c4c4;
    opacity: 0;
    font-family: 'DIN Next LT W04 Heavy';
}

#Scene06 .bf-circle {
	opacity: 0;
	filter: grayscale(1) brightness(1.8);
    position: fixed;
    z-index: 0;
    top: 9.5vH;
    right: 14vW;
    max-width: 3.5em;
    transform-origin: center center;
    animation: spin 4s linear infinite;
}

#Scene06 .iPadRight {
	position: fixed;
    top: 10vH;
    opacity: 1;
    height: 90vH;
    right: 10vW;
    transform: translate(0,-100vH);
}

#Scene06 .iPadLeft {
	position: fixed;
    top: 2vH;
    height: 105vH;
    left: 2vW;
    transform: translate(0,-100vH);
}

#Scene06 .ReportRight {
	position: fixed;
    top: 10vH;
    height: 81vh;
    right: 10vW;
    transform: rotate(300deg) scale(0);
}

#Scene06 .ReportLeft {
	position: fixed;
    top: 2vH;
    height: 105vH;
    left: 2vW;
    transform: rotate(300deg) scale(0);
}

#Scene06 .KartenRight {
	position: fixed;
    top: 10vH;
    height: 81vh;
    right: -6vW;
    transform: scale(0,1);
}

#Scene06 .KartenLeft {
	position: fixed;
    top: -6vH;
    height: 95vH;
    left: 2vW;
    transform: scale(0,1);
}





#Scene07, #SceneABoutUs {
	background-color: #ffff4a;
	box-shadow: 0 -.5em 3em rgba(0,0,0,.4);
	padding-bottom: 6em;
}

#Scene07 *, #Scene07 .headline, #Scene07 a, #Scene07 a:hover, #Scene07 a:focus, #Scene07 a:active, #SceneABoutUs *, #SceneABoutUs .headline, #SceneABoutUs a, #SceneABoutUs a:hover, #SceneABoutUs a:focus, #SceneABoutUs a:active {
	color: #ff0086;
}


#Scene07 .Title {
	opacity: 1;
    position: absolute;
    width: 0vW;
    right: 0;
    transform-origin: top right;
}

#Scene07 .FirstPara {
	margin-top: 4em;
}

#Scene07 .BaumFarbe {
	position: relative;
	height: 43vH;
    transform: translate(30vW, -3%);
    left: -5%;
}

#Scene07 [class*="Baum0"] {
	position: absolute;
    height: 40vH;
    top: 0;
}

#Scene07 .Baum01 {
	transform: translate(-50%,0) rotate(-4deg);
    left: 37%;
    top: 2%;
}
#Scene07 .Baum02 {
	transform: translate(-50%,0) rotate(1deg);
    left: 30%;
    top: 8%;
}
#Scene07 .Baum03 {
	    transform: translate(-50%,0) rotate(4deg);
    left: 23%;
    top: 2%;
}
#Scene07 .Baum04 {
	transform: translate(-50%,0) rotate(5deg);
    left: 43%;
    top: 11%;
}
#Scene07 .Baum05 {
	transform: translate(-50%,0) rotate(-1deg);
    left: 50%;
    top: 17%;
}
#Scene07 .Baum06 {
	transform: translate(-50%,0) rotate(-6deg);
    left: 56%;
    top: 2%;
}
#Scene07 .Baum07 {
	transform: translate(-50%,0) rotate(-5deg);
    left: 17%;
    top: 15%;
}

#Scene07 .Lampe {
	position: absolute;
    height: 40vH;
    top: 40%;
    left: 0;
    transform: translate(-130%,0);
}

#SceneABoutUs {
	min-height: auto;
	padding: 4em 0;
}
#SceneABoutUs .Logo {
    max-width: 30em;
}

.Cursor {
    display: none;
    position: fixed;
    max-width: 5em;
    top: 0.25em;
    left: -10vW;
    z-index: 99999;
    transform: rotate(25deg);
}


@media (max-width: 900px){
	
	#Scene07 .Lampe {
		height: auto;
	    max-width: 40vW;
	    left: -20vW;
	}
	
}


@media (max-width: 767px){
	
	.Pencil {
	    top: calc(100%);
    }
    
    .text-sm-right {
    	text-align: right;
    }
    
    .bf-circle {
	    top: 50%;
	    left: 50%;
    }
    .goStart {
	    left: 50%;
	}
	
	#Scene02 .WhatWeDo {
		max-width: 104vW;
	    margin-top: 70%;
	    margin-left: -5%;
	}
	#Scene02 .Cloud {
	    top: -3vH;
	    right: 34vW;
	    width: 50vW;
	    transform: translate(54vW, 0);
	}
	#Scene02 .Ball {
	    right: 35vW;
	    width: 54vW;
	}
	
	#Scene03 .text-right {
		text-align: left;
	}
	
	#Scene04 .FirstPara {
		padding-bottom: 5em;
		background-image: none !important;
	}
	
	#Scene05 .Title {
	    margin-top: 0;
	    width: 50vW;
	}
	#Scene05 .container.Main {
		margin-top: 0 !important;
	}
	
	#Scene05 .Fill {
	    bottom: 20%;
	    left: -6em;
	    top: auto;
	}
	#Scene05 .FirstPara {
	    margin-bottom: -4em;
	}
	
	#Scene06 .LevelCompleted {
		margin-bottom: 0;
	    width: 90vW;
	}
	#Scene06 .closeMacBook p:first-of-type {
		font-size: .75em;
	}
	#Scene06 .closeMacBook p:last-of-type {
	    font-size: 1em;
	}
	
}