body {
	background: #00B881;
	
	background: linear-gradient(90deg, #00B881 0%, #168DF9 100%);
	background: linear-gradient(90deg, color(display-p3 0 0.722 0.506) 0%, color(display-p3 0.086 0.553 0.976) 100%);
	padding: 0;
	margin: 0;
	font-family: ui-rounded, "SF Pro Rounded", system-ui, san-serif;
}

#slideshow {
	overflow: hidden;
	width: 800px;
	height: 550px;
}


p, h1, h2, h3, h4, h5, h6 {
	color: #fff;
}

h1 {
	margin-top: 0px;
	font-weight: 700;
	text-transform: none;
	color: #fff;
	font-size: 38px;
	line-height: 44px;
	font-family: ui-rounded, "SF Pro Rounded", system-ui, san-serif;
	background: -webkit-linear-gradient(#eee, #C6E9F0);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
	  filter: drop-shadow(0 3px 0 #0C8FA1) drop-shadow(0 3px 2px rgba(34, 34, 34, 0.25));
}

span.new {
	color: #fff !important;
	background: linear-gradient(90deg, #00B881 0%, #168DF9 100%);
	background: linear-gradient(90deg, color(display-p3 0 0.722 0.506) 0%, color(display-p3 0.086 0.553 0.976) 100%);
	font-size: 22px;
	padding: 5px 15px;
	border-radius: 8px;
	-webkit-background-clip: none;
	  -webkit-text-fill-color: #fff;
	  position: relative;
	  top: -5px;
}

h2 {
	margin-top: 390px;
}

h3 {
	margin-top: 480px;
	font-weight: 300;
	color: #fff;
}

p {
	margin-top: 450px;
	color: #fff;
	font-weight: 600;
	font-size: 22px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

#slide-2 p, 
#slide-3 p, 
#slide-4 p, 
#slide-5 p, 
#slide-6 p {
	font-weight: 600;
	background: -webkit-linear-gradient(#eee, #C6E9F0);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
	  text-shadow: 0 2px 10px rgba(34, 34, 34, 0.5);
	  filter: drop-shadow(0 2px 2px rgba(34, 34, 34, 0.5));
} 

.magic {
	width: 800px;
	height: 800px;
	position: absolute;
	top: -110px;
	left: 0;
	animation-name: toho;
	animation-duration: 450s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	opacity: 0.75;
	transition: all 1000ms ease;
}

.magic.reverse {
	animation-direction: reverse;
	mix-blend-mode: screen;
}

@keyframes toho {
  0% {
	transform: rotate(0deg);
  }
  100% {
	transform: rotate(360deg);
  }
}

/* Initial State */

.screenshot-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 1210px;
	height: 800px;
	overflow: hidden;
}

.screenshot  {
	position: absolute;
	left: -265px;
	top: 0;
	transform: scale(0.9,0.9) translate(-185px,-120px);
	transition-delay: 200ms;
	transition: all 500ms ease;
	overflow: hidden;
	width: 1210px;
	height: 800px;
	opacity: 0;
	
	transition: all 1000ms cubic-bezier(.28,.01,.39,1.2);
	transition: all 1000ms ease;
}

.screenshot.menubar {
	position: absolute;
	left: 605px;
	top: 0;
	overflow: hidden;
	width: 605px;
	height: 400px;
	opacity: 0;
}

.screenshot.fx {
	opacity: 0;
}

.overlay {
	width: 800px;
	height: 550px;
	position: absolute;
	top: 0px;
	left: 0px;
	background: #222;
	background: linear-gradient(180deg, rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, 0.9) 100%), linear-gradient(90deg, #00c68a 0%, #005cb4 100%);
	mix-blend-mode: multiply;
	opacity: 1;
}

.overlay .inner {
	background: #fff;
	position: absolute;
	width: 950px;
	height: 700px;
	border-radius: 0px;
	top: 0px;
	left: 0px;
	transition: all 1000ms cubic-bezier(.28,.01,.39,1.2);
	transition: all 1000ms ease;
	box-shadow: 0 0 20px 20px #fff;
}

/* State 1 */

.state-1 .screenshot {
	transform: scale(0.9,0.9) translate(-185px,-120px);
	transition-delay: 200ms;
}

.state-1 .screenshot.main {
	opacity: 1;
}

.state-1 .overlay .inner {
	background: #fff;
	position: absolute;
	width: 950px;
	height: 700px;
	border-radius: 0px;
	top: 0px;
	left: 0px;
	transition: all 1000ms cubic-bezier(.28,.01,.39,1.2);
	transition: all 1000ms ease;
}


/* State 2 - System Devices*/

.state-2 .screenshot {
	transform: scale(1,1) translate(-190px,-30px);
}

.state-2 .screenshot.main {
	opacity: 1;
}

.state-2 .overlay .inner {
	width: 700px;
	height: 135px;
	border-radius: 25px;
	top: 190px;
	left: 50px;
	transition: all 1000ms cubic-bezier(.28,.01,.39,1.2);
	transition: all 1000ms ease;
}

/* State 3 - Apps */

.state-3 .screenshot {
	transform: scale(1,1) translate(-190px,-270px);
}

.state-3 .screenshot.main {
	opacity: 1;
}

.state-3 .overlay .inner {
	width: 700px;
	height: 190px;
	border-radius: 25px;
	top: 115px;
	left: 50px;
	transition: all 1000ms cubic-bezier(.28,.01,.39,1.2);
	transition: all 1000ms ease;
}



/* State 4 - Airplay */

.state-4 .screenshot {
	transform: scale(1,1) translate(-380px,-320px);
}

.state-4 .screenshot.main {
	opacity: 0;
}

.state-4 .screenshot.wifi {
	opacity: 1;
}

.state-4 .overlay .inner {
	width: 260px;
	height: 70px;
	border-radius: 25px;
	top: 215px;
	left: 270px;
	transition: all 1000ms cubic-bezier(.28,.01,.39,1.2);
	transition: all 1000ms ease;
}



/* State 5 - FX */

.state-5 .screenshot {
	transform: scale(1,1) translate(400px,-235px);
	transition: all 1000ms cubic-bezier(.28,.01,.39,1.2);
	transition: all 1000ms ease;
}

.state-5 .screenshot.main, .state-5 .screenshot.wifi {
	opacity: 0;
}

.state-5 .screenshot.fx {
	opacity: 1;
}

.state-5 .screenshot.sets {
	opacity: 1;
}

.state-5 .overlay .inner {
	width: 510px;
	height: 280px;
	border-radius: 20px;
	top: 105px;
	left: 140px;
	transition: all 1000ms cubic-bezier(.28,.01,.39,1.2);
	transition: all 1000ms ease;
}



/* State 6 */

.state-6 .screenshot {
	transform: scale(2, 2) translate(-350px,190px);
}

.state-6 .screenshot.main, .state-6 .screenshot.fx, .state-6 .screenshot.wifi {
	opacity: 0;
}

.state-6 .screenshot.menubar {
	opacity: 1;
}

.state-6 .overlay .inner {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	top: 165px;
	left: 315px;
	transition: all 1000ms cubic-bezier(.28,.01,.39,1.2);
	transition: all 1000ms ease;
}