html, body{
	min-height:100%;
	height:auto;
	width:100%;
	margin:0;
	padding:0;}
body{
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:90%;
	color:#000;
	/*background-color:#D1E0F9;*/
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7abcff+0,60abf8+44,4096ee+100;Blue+3D+%2314 
	background: #7abcff; 
	background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); 
	background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); 
	background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4096ee+0,60abf8+22,aad4ff+100 */
background: #4096ee; /* Old browsers */
background: -moz-linear-gradient(top, #4096ee 0%, #60abf8 22%, #aad4ff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #4096ee 0%,#60abf8 22%,#aad4ff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4096ee 0%,#60abf8 22%,#aad4ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#aad4ff',GradientType=0 ); /* IE6-9 */
	
}

h1{
	font-size:1.6em;
	line-height:1.5em;
	font-weight:bold;
	margin:0.5em 0 1.5em;
	padding-bottom:30px;
	border-bottom: 1px solid #3C5B81;
	text-align:center;
}
h2{
	font-size:1.3em;
	text-transform:uppercase;
	font-weight:normal;
	color:#3C5B81;
	margin:1.5em 0;
}
h3{
	font-size:1.3em;
	font-weight:bold;
	margin:1.5em 0;
}
h4{
	font-size:1.2em;
	font-weight:bold;
	margin:1.5em 0;
}
h5{
	font-size:1.2em;
	text-transform:uppercase;
	font-weight:bold;
	margin:1.5em 0;
}

img{
	max-width:100%;
	height:auto;
	zoom:0;
}
p{
	margin:1.5em 0;}
ul{
	list-style-type:disc;
	margin: 1.5em 10px;
	padding:0 0 0 10px;
	list-style-position:outside;
}
a,
a:link,
a:visited{
	text-decoration:none;
	color:#3157C7;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	transition: all .3s ease;
}
a:hover,
a:active{
	color:#5A74B2;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	transition: all .3s ease;
}
	
.button{
	width:80%;
	max-width:500px;
	border:2px solid #3157C7;
	padding: 10px 20px;
	margin:70px auto 30px;
	text-align:center;
	display:block;
	text-transform:uppercase;
	font-weight:bold;
	background:rgba(255,255,255,0.5);
	-webkit-border-radius:6px;
	border-radius:6px;
}
a.button:hover{
	border:2px solid #5A74B2;
	background:rgba(255,255,255,0.8);
}


.bg-spacer{
	min-height:1300px;
}
.text-right{
	text-align:right;
}
.text-left{
	text-align:left;
}


.header{
	padding: 20px 0;
	border-bottom: 0px solid white;
	text-transform: uppercase;
	color: white;
	/*background-color:#D1E0F9;*/
	z-index:200;
	position:fixed;
	top:0;
	width:100%;
	font-size:0.9em;}
.header-inner{
	padding: 0 20px;
	margin:0 auto;
}
.header a.page-link{
	font-size: 1;
	font-weight:bold;
	color:#000;
}
.header .page-link img{
	width:30px;
	height:auto;
	opacity:0.7;
	-webkit-transition: width .3s ease;
	transition: width .3s ease;
	vertical-align:middle;
}
.header .page-link:hover img{
	opacity:1;
	width:35px;
}

.footer{
	padding: 20px 0;
	border-top: 0px solid white;
	text-transform:uppercase;
	color:white;
	/*background-color:#D1E0F9;*/
	z-index:200;
	position:fixed;
	bottom:0;
	width:100%;
	font-size:0.7em;}
.footer-inner{
	padding: 0 20px;
	margin:0 auto;
	text-align:right;
}
.footer a:link,
.footer a:visited{
	color:#fff;
}

.wrapper{
	text-align:center;
	border:0px solid red;
	width:95%;
	z-index:100;}
.centered {
  position: fixed; /* or absolute */
  top: 40%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);}
#text{
	font-size:3em;
	text-align:center;
	width:100%;
	text-transform:uppercase;
}
#text2{
	font-size:1.7em;
	color:#0F6290;
}
#icon{
	width:110px;
	height:170px;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:bottom center;
	margin:10px auto;
	text-align:center;
	position:relative;}
 
 /* D1E0F9 pale blue */
/*.slide0{
	color:#313AD6;}
.slide1{
	color:#8D663C;}
.slide2{
	color:#448321;}
.slide3{
	color:#EB2124;}
.slide4{
	color:#C75C07;}
.slide5{
	color:#8753B5;}
.slide6{
	color:#BE3B03;}
.slide7{
	color:#7F38D2;}
*/
.slide0 #icon{
	background-image:url("images/up.svg");
	background-position: center center;
	top:-10%;}
.slide1 #icon{
	background-image:url("images/down.svg");}
.slide2 #icon{
	background-image:url("images/forwards.svg");
	background-position: center center;}
.slide3 #icon{
	background-image:url("images/backwards.svg");}
.slide4 #icon{
	background-image:url("images/turn-left.svg");
	background-position:bottom left;
	left:-10%;}
.slide5 #icon{
	background-image:url("images/turn-right.svg");
	background-position:bottom right;
	right:-10%;}
.slide6 #icon{
	background-image:url("images/slide-left.svg");
	background-position:bottom left;
	left:-10%;}
.slide7 #icon{
	background-image:url("images/slide-right.svg");
	background-position:bottom right;
	right:-10%;}
.slide8 #icon{
	background-image:url("images/smiley.svg");
	background-size:80% 80%;}

/*load images so they are ready to show after delay at beginning*/
.load-images{
	width:10px;
	height:10px;
	position:absolute;
	left:-9999px;
	top:-9999px;}


/*info page*/
.content-wrapper{
	width:90%;
	max-width:600px;
	background:rgba(255,255,255,0.5);
	margin:60px auto;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	border-radius: 15px;
	line-height:1.5em;
}
.content-inner{
	padding:30px 30px 20px;
}
/* cloud animation */
@keyframes animatedBackground1 {
	from { background-position: -12% 150%; }
	to { background-position: -13% -155%; }
}
@keyframes animatedBackground2 {
	from { background-position: 87% 130%; }
	to { background-position: 87% -135%; }
}

/* different for desktop */
	@keyframes animatedBackground11 {
		from { background-position: 15% 150%; }
		to { background-position: 15% -155%; }
	}
	@keyframes animatedBackground22 {
		from { background-position: 78% 130%; }
		to { background-position: 78% -135%; }
	}

#animate-area	{ 
	position:absolute;
	z-index:1;
	width: 100%; 
	height: 100%;
	min-height:300px; 
	background-image: url(images/cloud1.png);
	background-position: -9999px -9999px; /* fall back if animation not supported */
	background-repeat: no-repeat;
	background-size:170px auto;
	opacity:0.13;
	-webkit-animation: animatedBackground1 20s linear 12s infinite;
	-moz-animation: animatedBackground1 20s linear 12s infinite;
	-ms-animation: animatedBackground1 20s linear 12s infinite;
	animation: animatedBackground1 20s linear 12s infinite;
}
#animate-area2{ 
	position:absolute;
	z-index:1;
	width: 100%; 
	height: 100%;
	min-height:300px; 
	background-image: url(images/cloud2.png);
	background-position: -9999px -9999px; /* fall back if animation not supported */
	background-repeat: no-repeat;
	background-size:90px auto;
	opacity:0.25;
	-webkit-animation: animatedBackground2 28s linear 17s infinite;
	-moz-animation: animatedBackground2 28s linear 17s infinite;
	-ms-animation: animatedBackground2 28s linear 17s infinite;
	animation: animatedBackground2 28s linear 17s infinite;
}

@media only screen and (min-width:750px){
	
	h1{
		font-size:2em;
	}
	h2{
		font-size:1.4em;
	}
	h3{
		font-size:1.4em;
	}
	
	#text{
		font-size:5em;}
	#text2{
		font-size:4em;
	}
	/* make the things bigger on desktop */
	.header a.page-link{
		font-size: 1.5em;
	}
	.header .page-link img{
		width:60px;
	}
	.header .page-link:hover img{
		width:70px;
	}
	.footer{
		font-size:0.9em;}
		
	.content-wrapper{
		width:70%;
		max-width:900px;
	}
	.content-inner{
		padding:50px 50px 20px;
	}
	#animate-area	{
		background-size:auto;
		-webkit-animation: animatedBackground11 20s linear 12s infinite;
		-moz-animation: animatedBackground11 20s linear 12s infinite;
		-ms-animation: animatedBackground11 20s linear 12s infinite;
		animation: animatedBackground11 20s linear 12s infinite;
	}
	#animate-area2{ 
		background-size:150px auto;
		-webkit-animation: animatedBackground22 28s linear 17s infinite;
		-moz-animation: animatedBackground22 28s linear 17s infinite;
		-ms-animation: animatedBackground22 28s linear 17s infinite;
		animation: animatedBackground22 28s linear 17s infinite;
	}
}

@media only screen and (min-width:1100px){
	body{
		font-size:100%}
	.wrapper{
		width:80%;}
	#text{
		font-size:8.5em;}
	#icon{
		width:170px;
		height:250px;}
}