body {
	background-image: linear-gradient(45deg, #34270E, #0E262E);
	padding: 0;
	margin: 0;
}

p, h1, h2, h3, h4, h5, h6 {
	color: #FFAC00;
	color: color(display-p3 1 0.675 0);
}

h1 {
	margin-top: 0px;
	font-weight: 700;
	text-transform: none;
	font-size: 34px;
	line-height: 34px;
}

h2 {
	margin-top: 390px;
}

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

p {
	margin-top: 450px;
	color: #fff;
	font-weight: 400;
	font-size: 18px ;
}

#flash {
	background-image: linear-gradient(45deg, #34270E, #0E262E);
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	opacity: 0;
	
	animation-duration: 1s;
	animation-delay: 1.5s;
	animation-name: animate-fade;
	animation-timing-function: ease;
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
}

@keyframes animate-fade {
	0% { opacity: 1; }
	100% { opacity: 0; }
}


/* Initial State */

.screenshot-frame {
	transition: all 1000ms ease;
	transition-delay: opacity 500ms;
	transform: scale(0.6) translate(-130px,-40px);
	opacity: 1;
}

.screenshot  {
	transition: all 1000ms ease;
	box-shadow: 0 5px 20px black;
	display: none;
	opacity: 1;
	transition: all 1000ms ease;
	transition-delay: display 500ms;
}

.screenshot-01, .screenshot-02, .screenshot-03, .screenshot-04, .screenshot-05, .screenshot-06 {
	transition: all 1000ms ease;
} 

.state-0 .screenshot-01 {
	transform: scale(0.9);
	opacity: 0 ;
	display: block;
	transition-delay: opacity 500ms !important;
}

.state-0 .screenshot-frame {
	opacity: 0;
	transition: all 1000ms ease;
	transition-delay: opacity 500ms !important;
}

/* State 1 */

.state-1 .screenshot-01 {
	transform: scale(1);
	opacity: 1;
	display: block;
}

.state-1 .screenshot-frame {
	opacity: 1;
	transition: all 1000ms ease;
	transition-delay: all 500ms !important;
	transform: scale(0.6) translate(-130px,-60px);
}


/* State 2 */

.state-2 .screenshot-frame {
	opacity: 0.5 ;
	transition: all 1000ms ease;
	transition-delay: all 500ms;
}

.state-2 .screenshot-01 {
	transform: scale(1);
	opacity: 0.5;
	display: block;
}

.state-2 .screenshot-frame {
	transform: scale(0.6) translate(-130px,-50px);
}

.screenshot-02 {
	margin-left: 150px;
	opacity: 0 ;
	display: block;
	position: absolute;
	transition: all 1000ms ease;
	transform: scale(0.5) translate(-120px,-50px);
}

.state-2 .screenshot-02 {
	display: block;
	opacity: 1 ;
	transition: all 1000ms ease;
	transform: scale(0.6) translate(-120px,-50px);
}

/* State 3 */

.state-3 .screenshot-03 {
	display: block;
	opacity: 1;
}

.state-3 .screenshot-frame {
	transform: scale(0.8) translate(30px,-80px);
}

/* State 4 */

.state-4 .screenshot-04 {
	display: block;
	opacity: 1;
}

.state-4 .screenshot-frame {
	transform: scale(0.8) translate(100px,-50px);
}

/* State 5 */

.state-5 .screenshot-05 {
	display: block;
	opacity: 1;
}

.state-5 .screenshot-frame {
	transform: scale(1) translate(-500px,80px);
}

/* State 6 */

.state-6 .screenshot-01 {
	display: block;
	opacity: 1;
}

.state-6 .screenshot-frame {
	transform: scale(0.6) translate(-130px,-50px);
}

