@charset "UTF-8";
/* CSS Document */

body,html {
	margin: 0;
}

#main.page {
	display: flex;
	padding-top: 0;
}

	#main.page h2, #main.page p {
		margin-bottom: 0;
		margin-top: 0;
		letter-spacing: .25em;
	}

.page {
	position: fixed;
	width: 100%;
	height: 100vh;
	text-align: center;
	padding-top: 1em;
	background-color: #22313F;
	
	-webkit-box-shadow: 0px 0px 5px 1px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 0px 5px 1px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 0px 5px 1px rgba(50, 50, 50, 0.75);
	
	/* Centering */
	justify-content: center;
	align-items: center;
	
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

	.page h1, .page h2 {
		font-weight: 400;
	}
	
	.page .progress {
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		height: 2em;
		background-color: rgba(255,255,255,.75);
		width: 0em;
		line-height: 2em;
		text-align: right;
	}
	
		.page .progress p {
			margin: 0;
			padding-right: 1em;
			padding-left: 1em;
		}

#main.page {
	background-color: white;
	color: black;
}

#ao2.page {
	background-color: #52B3D9;
}

#ao3.page {
	background-color: #8e44ad;
}

#ao4.page {
	background-color: #14A085;
}

.banner {
	/* Positioning */
	position: absolute;
	top: 0;
	margin-left: -15em;
	width: 30em;
	
	/* Font */
	background-color: #336E7B;
	color: white;
	font-family: 'CN Bold';
	letter-spacing: .25em;
}

	.banner > h1 {
		text-transform: uppercase;
		word-wrap: break-word;
	}
	
.level {
	display: block;
	position: absolute;
	width: 100vw;
	height: 100vh;
}
	
.level.one, .level.two, .level.three, .level.four, .level.five, .level.six {
	top: 100vh;
	-webkit-transition: top 1s ease;
	-moz-transition: top 1s ease;
	-ms-transition: top 1s ease;
	-o-transition: top 1s ease;
	transition: top 1s ease;
	background-color: #DFDFDF;
	color: #22313F;
}

.level h2 {
	margin: 0;
	height: 2em;
	line-height: 2em;
	
	width: 100%;
	display: block;
	background-color: rgba(255,255,255, .75);
}

.level > div {
	height: 100%;
	width: 100%;
	background-color: #FEFEFE;
	
}

.level > div > p {
	padding-top: 2.5em;
	font-size: 64px;
	font-weight: 100;
	letter-spacing: .125em;
}

.page .level > div > * {
	margin-top: 0;
}

.page > div > h1 {
	letter-spacing: .125em;
}

.level.one {
	background-color: rgb(234, 116, 45);
}
.level.two {
	background-color: rgb(237, 156, 30);
}
.level.three {
	background-color: rgb(241, 196, 15);
}
.level.four {
	background-color: rgb(176, 198, 47);
}
.level.five {
	background-color: rgb(111, 201, 80);
}
.level.six {
	background-color: rgb(46, 204, 113);
}

.level.one.active {
	top: 6em;
}
.level.two.active {
	top: 9em;
}
.level.three.active {
	top: 12em;
}
.level.four.active {
	top: 15em;
}
.level.five.active {
	top: 18em;
}
.level.six.active {
	top: 21em;
}
	
@import url(http://fonts.googleapis.com/css?family=Roboto:100);

body::-webkit-scrollbar { 
	display:none;
}

body {
  background:#34aadc;
  font-family:'HelveticaNeue-Light', Roboto;
  color:#fff;
}

.content {
  position:fixed;
  left:50%;
  margin-left:-250px;
  top:50px;
  width:500px;
}

.intro {
  width:100%;
  text-align:center;
  font-size:40px;
  margin:0px 0 20px;
}

.text {
  font-size:22px;
  padding-left:2%;
  height:30px;
  	white-space: nowrap;
  	overflow: hidden;
}

#bitcoin {
  width:30px;
}

.credit {
  margin-top:14px;
  font-size:14px;
  font-style:italic;
}

.arrow {
  text-align:center;
  margin-top:80px;
  font-size:46px;
  backface-visiblilty:hidden;
}