body {
	background: url('images/bg.png');
	color: #005139;
	padding: 0;
	margin: 0;
}


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;
}

h2 {
	margin-top: 390px;
}

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

p {
	margin-top: 450px;
	color: #005139;
	font-weight: 400;
}



/* Initial State */

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

.screenshot  {
	position: absolute;
	left: -246px;
	top: 0;
	transform: scale(0.6,0.6) translate(-455px,-40px);
	transition: all 500ms ease;
	overflow: hidden;
	width: 1480px;
	height: 700px;
	opacity: 0;
	
	transition: all 1000ms cubic-bezier(.28,.01,.39,1.2);
}

.screenshot.fx {
	opacity: 0;
}

/* State 1 */

.state-1 .screenshot {
	transform: scale(0.72,0.72) translate(-455px,-25px);
	transition-delay: 200ms;
}

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


/* State 2 */

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

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


/* State 3 */

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

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


/* State 4 */

.state-4 .screenshot {
	transform: scale(1,1) translate(300px,-180px);
	transition: all 1000ms cubic-bezier(.28,.01,.39,1.2);
}

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

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

/* State 5 */

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

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


/* State 6 */

.state-6 .screenshot {
	transform: scale(0.47, 0.47) translate(0px,-420px);
}

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