#logo {
  height: 40%;
   width: 30%;

}
.logo-position {
 position: fixed;
top: 0;
right: 450px;
z-index: 5;
}

#image {
  height: 30%;
   width: 25%;

}
.image-position {
 position: fixed;
bottom: 0;
right: 485px;
z-index: 5;
}


/* PHOTOS ABOVE ^ */
.slide-a,body {background: #5A98CC}

/* text color for slide b and slide d*/
.slide-b,body {color: #0C2359; z-index: 4;}
.slide-d,body {color: #0C2359; z-index: 4;}

.slide-a,body {color: #FFFFFF; z-index: 4;}
/* .slide-d,body {color: #FFFFFF; z-index: 4;} */
 /* DONE */

.slide-c p::after,.slide-d a::after {content: ""}
 
*,::after,::before {box-sizing: border-box;outline:0}
 
.slide-b h2,.slide-b p,.slide-c h2,.slide-c p,.slide-d h2,.slide-d p {transition: all 1s cubic-bezier(1,-.565,.075,1.495)}
 
.slide-b,.slide-c,.slide-d {transition: all .5s ease-in-out}
 
button,h1,h2,p {
	margin: 10px 0;
	opacity: 0;
	top: -100px;
	position: relative
 }
 
h2 {font-size: 65px}
 
p {
	font-size: 24px;
	font-family: Ubuntu,sans-serif;
	font-weight: 300
 }
 
body {
	text-align: center;
	font-family: Nunito,sans-serif
 }
 
.instruction {
	animation: blink;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out
 }
 
@keyframes blink {
    0% {opacity: 0}
    49% {opacity: 0}
    50% {opacity: 1}
}

	.intro {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		position: relative
	 }
 
		.intro>div {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			left: 0;
			transform-origin: top left;
			padding: 20px
		 }
 
			.intro>div .slide-content,.slide-c p,.slide-c p::after {display: inline-block}
 
	.slide-a h1 {font-size: 70px}
 
	.slide-b {background: #FFFFFF}
 
		.slide-b h2 {transform: translateY(-200px)}
 
		.slide-b p {transform: translateY(200px)}
 
	.slide-c {background: #5A98CC}
 
		.slide-c h2,.slide-c p {transform: scale(.4)}
 
		.slide-c p::after {
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: #fff;
			margin: 0 10px
		 }
 
		.slide-c p:last-of-type::after {display: none}
 
	.slide-d a,.slide-d p {display: inline-block}
 
	.slide-d {background: #FFFFFF}
 
		.slide-d a {color: #30e849;text-decoration:none}
 
			.hoverontouch--aktiv .slide-d a:after {width: 100%}
 
			.slide-d a::after {
				display: block;
				width: 0;
				height: 1px;
				background: #30e849;
				transition: all .3s
			 }
 
		.slide-d button {
			width: 100px;
			height: 100px;
			line-height: 100px;
			color: #fff;
			border-radius: 50%;
			text-align: center;
			background: #30e849;
			margin-top: 20px;
			border: 2px solid transparent;
			transition: all .3s ease-in-out;
			transform: scale(.7)
		 }
 
			.hoverontouch--aktiv .slide-d button {
				background: 0 0;
				border: 2px solid #30e849;
				color: #30e849
			 }
 
@media screen and (max-width:768px) {.slide-a h1,h2}
 
p {font-size: 17px;display:block!important}
 
	p::after {display: none!important}
 
.slide-d button {
	width: 70px;
	height: 70px;
	line-height: 70px;
	margin-top: 0;
	font-size: 14px
 }
 
 /* mobile */
transform:translateZ(0);
transform-style: preserve-3d;#logo {
  height: 40%;
   width: 30%;

}
.logo-position {
 position: fixed;
top: 0;
right: 450px;
z-index: 5;
}

#image {
  height: 30%;
   width: 25%;

}
.image-position {
 position: fixed;
bottom: 0;
right: 480px;
z-index: 5;
}


/* PHOTOS ABOVE ^ */
.slide-a,body {background: #5A98CC}

/* text color for slide b and slide d*/
.slide-b,body {color: #0C2359; z-index: 4;}
.slide-d,body {color: #0C2359; z-index: 4;}

.slide-a,body {color: #FFFFFF; z-index: 4;}
.slide-d,body {color: #FFFFFF; z-index: 4;}
 /* DONE */

.slide-c p::after,.slide-d a::after {content: ""}
 
*,::after,::before {box-sizing: border-box;outline:0}
 
.slide-b h2,.slide-b p,.slide-c h2,.slide-c p,.slide-d h2,.slide-d p {transition: all 1s cubic-bezier(1,-.565,.075,1.495)}
 
.slide-b,.slide-c,.slide-d {transition: all .5s ease-in-out}
 
button,h1,h2,p {
	margin: 10px 0;
	opacity: 0;
	top: -100px;
	position: relative
 }
 
h2 {font-size: 65px}
 
p {
	font-size: 24px;
	font-family: Ubuntu,sans-serif;
	font-weight: 300
 }
 
body {
	text-align: center;
	font-family: Nunito,sans-serif
 }
 
.instruction {
	animation: blink;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out
 }
 
@keyframes blink {
    0% {opacity: 0}
    49% {opacity: 0}
    50% {opacity: 1}
}
	.intro {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		position: relative
	 }
 
		.intro>div {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			left: 0;
			transform-origin: top left;
			padding: 20px
		 }
 
			.intro>div .slide-content,.slide-c p,.slide-c p::after {display: inline-block}
 
	.slide-a h1 {font-size: 70px}
 
	.slide-b {background: #FFFFFF}
 
		.slide-b h2 {transform: translateY(-200px)}
 
		.slide-b p {transform: translateY(200px)}
 
	.slide-c {background: #5A98CC}
 
		.slide-c h2,.slide-c p {transform: scale(.4)}
 
		.slide-c p::after {
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: #fff;
			margin: 0 10px
		 }
 
		.slide-c p:last-of-type::after {display: none}
 
	.slide-d a,.slide-d p {display: inline-block}
 
	.slide-d {background: #FFFFFF}
 
		.slide-d a {color: #30e849;text-decoration:none}
 
			.hoverontouch--aktiv .slide-d a:after {width: 100%}
			.slide-d a::after {
				display: block;
				width: 0;
				height: 1px;
				background: #30e849;
				transition: all .3s
			 }
 
		.slide-d button {
			width: 100px;
			height: 100px;
			line-height: 100px;
			color: #fff;
			border-radius: 50%;
			text-align: center;
			background: #30e849;
			margin-top: 20px;
			border: 2px solid transparent;
			transition: all .3s ease-in-out;
			transform: scale(.7)
		 }
 
			.hoverontouch--aktiv .slide-d button {
				background: 0 0;
				border: 2px solid #30e849;
				color: #30e849
			 }
 
@media screen and (max-width:768px) {.slide-a h1,h2}
 
p {font-size: 17px;display:block!important}
 
	p::after {display: none!important}
 
.slide-d button {
	width: 70px;
	height: 70px;
	line-height: 70px;
	margin-top: 0;
	font-size: 14px
 }
 
 /* mobile */
transform:translateZ(0);
transform-style: preserve-3d;