@-webkit-keyframes quote1 {
 	0%   { opacity: 0; -webkit-transform: scale3d(.7, .7, .7); transform: scale3d(.7, .7, .7); left: 25%; top: 130px; }
  	30%  { opacity: 0.7; }
  	70%  { opacity: 0.7; }
	100% { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); left: 10px; top: 40px; }
}
@keyframes quote1 {
 	0%   { opacity: 0; -webkit-transform: scale3d(.7, .7, .7); transform: scale3d(.7, .7, .7); left: 25%; top: 130px; }
  	30%  { opacity: 0.7; }
  	70%  { opacity: 0.7; }
	100% { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); left: 10px; top: 40px; }
}

@-webkit-keyframes quote2 {
 	0%   { opacity: 0; -webkit-transform: scale3d(.7, .7, .7); transform: scale3d(.7, .7, .7); left: 20%; top: 200px; }
  	30%  { opacity: 0.7; }
  	70%  { opacity: 0.7; }
	100% { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); left: 5px; top: 150px; }
}
@keyframes quote2 {
 	0%   { opacity: 0; -webkit-transform: scale3d(.7, .7, .7); transform: scale3d(.7, .7, .7); left: 20%; top: 200px; }
  	30%  { opacity: 0.7; }
  	70%  { opacity: 0.7; }
	100% { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); left: 5px; top: 150px; }
}

@-webkit-keyframes quote3 {
 	0%   { opacity: 0; -webkit-transform: scale3d(.7, .7, .7); transform: scale3d(.7, .7, .7); left: 20%; top: 270px; }
  	30%  { opacity: 0.7; }
  	70%  { opacity: 0.7; }
	100% { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); left: 5px; top: 320px; }
}
@keyframes quote3 {
 	0%   { opacity: 0; -webkit-transform: scale3d(.7, .7, .7); transform: scale3d(.7, .7, .7); left: 20%; top: 270px; }
  	30%  { opacity: 0.7; }
  	70%  { opacity: 0.7; }
	100% { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); left: 5px; top: 320px; }
}

@-webkit-keyframes quote4 {
 	0%   { opacity: 0; -webkit-transform: scale3d(.7, .7, .7); transform: scale3d(.7, .7, .7); left: 25%; top: 340px; }
  	30%  { opacity: 0.7; }
  	70%  { opacity: 0.7; }
	100% { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); left: 10px; top: 430px; }
}
@keyframes quote4 {
 	0%   { opacity: 0; -webkit-transform: scale3d(.7, .7, .7); transform: scale3d(.7, .7, .7); left: 25%; top: 340px; }
  	30%  { opacity: 0.7; }
  	70%  { opacity: 0.7; }
	100% { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); left: 10px; top: 430px; }
}

@-webkit-keyframes quote5 {
 	0%   { opacity: 0; -webkit-transform: scale3d(.7, .7, .7); transform: scale3d(.7, .7, .7); right: 25%; top: 130px; }
  	30%  { opacity: 0.7; }
  	70%  { opacity: 0.7; }
	100% { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); right: 10px; top: 40px; }
}
@keyframes quote5 {
 	0%   { opacity: 0; -webkit-transform: scale3d(.7, .7, .7); transform: scale3d(.7, .7, .7); right: 25%; top: 130px; }
  	30%  { opacity: 0.7; }
  	70%  { opacity: 0.7; }
	100% { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); right: 10px; top: 40px; }
}

@-webkit-keyframes quote6 {
 	0%   { opacity: 0; -webkit-transform: scale3d(.7, .7, .7); transform: scale3d(.7, .7, .7); right: 20%; top: 200px; }
  	30%  { opacity: 0.7; }
  	70%  { opacity: 0.7; }
	100% { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); right: 5px; top: 150px; }
}
@keyframes quote6 {
 	0%   { opacity: 0; -webkit-transform: scale3d(.7, .7, .7); transform: scale3d(.7, .7, .7); right: 20%; top: 200px; }
  	30%  { opacity: 0.7; }
  	70%  { opacity: 0.7; }
	100% { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); right: 5px; top: 150px; }
}

@-webkit-keyframes quote7 {
 	0%   { opacity: 0; -webkit-transform: scale3d(.7, .7, .7); transform: scale3d(.7, .7, .7); right: 20%; top: 270px; }
  	30%  { opacity: 0.7; }
  	70%  { opacity: 0.7; }
	100% { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); right: 5px; top: 320px; }
}
@keyframes quote7 {
 	0%   { opacity: 0; -webkit-transform: scale3d(.7, .7, .7); transform: scale3d(.7, .7, .7); right: 20%; top: 270px; }
  	30%  { opacity: 0.7; }
  	70%  { opacity: 0.7; }
	100% { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); right: 5px; top: 320px; }
}

@-webkit-keyframes quote8 {
 	0%   { opacity: 0; -webkit-transform: scale3d(.7, .7, .7); transform: scale3d(.7, .7, .7); right: 25%; top: 340px; }
  	30%  { opacity: 0.7; }
  	70%  { opacity: 0.7; }
	100% { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); right: 5px; top: 430px; }
}
@keyframes quote8 {
 	0%   { opacity: 0; -webkit-transform: scale3d(.7, .7, .7); transform: scale3d(.7, .7, .7); right: 25%; top: 340px; }
  	30%  { opacity: 0.7; }
  	70%  { opacity: 0.7; }
	100% { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); right: 5px; top: 430px; }
}

@-webkit-keyframes singleQuote {
 	0%   { opacity: 0; }
  	30%  { opacity: 0.7; }
  	70%  { opacity: 0.7; }
	100% { opacity: 0; }
}
@keyframes singleQuote {
 	0%   { opacity: 0; }
  	30%  { opacity: 0.7; }
  	70%  { opacity: 0.7; }
	100% { opacity: 0; }
}

.quote {
	font-size: 140%;
	text-shadow: 0px 0px 20px #ffb780, 0px 0px 20px #ffb780;
	position: absolute;
	z-index:0; 
}
.quote1 {
	-webkit-animation: quote1 6.0s linear 2.0s infinite normal both; 
		animation: quote1 6.0s linear 2.0s infinite normal both;
}
.quote2 {
	-webkit-animation: quote2 5.5s linear 2.8s infinite normal both; 
		animation: quote2 5.5s linear 2.8s infinite normal both;
}
.quote3 {
	-webkit-animation: quote3 5.8s linear 1.2s infinite normal both; 
		animation: quote3 5.8s linear 1.2s infinite normal both;
}
.quote4 {
	-webkit-animation: quote4 6.1s linear 4.0s infinite normal both; 
		animation: quote4 6.1s linear 4.0s infinite normal both;
}
.quote5 {
	-webkit-animation: quote5 6.9s linear 5.0s infinite normal both; 
		animation: quote5 6.9s linear 5.0s infinite normal both;
}
.quote6 {
	-webkit-animation: quote6 5.2s linear 3.7s infinite normal both; 
		animation: quote6 5.2s linear 3.7s infinite normal both;
}
.quote7 {
	-webkit-animation: quote7 7.1s linear 1.8s infinite normal both; 
		animation: quote7 7.1s linear 1.8s infinite normal both;
}
.quote8 {
	-webkit-animation: quote8 4.9s linear 2.6s infinite normal both; 
		animation: quote8 4.9s linear 2.6s infinite normal both;
}

* { margin:0; padding:0;}
body, figure { margin: 0; }
img { display: block; width: 100%; }
#applink {
	margin-top: 35px;
	margin-left: auto;
	margin-right: auto;
	position:relative;
	z-index:99;
}
#appstore {
	width:170px;
	display:inline;
}
#closing { clear:both; }
body {
	margin:0;
	color:#fff;
	padding:0 !important;
	background:#000 no-repeat; 
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	font-weight: 300;
	text-align: center;
}
a {
	color:#ffb780;
}
#notice {
	padding:3px;
}
#banner {
	height: 544px;
	background-image: url("banner.jpg"); 
	background-position: center;
	background-size: cover;
	background-attachment: scroll;
	background-repeat: repeat;
	background-color: #000; 
	display: block;
}
#banner section {
	position:absolute;
	width:100%;
}

#logo {
	color:#000;
	font-size:600%;
	text-shadow: 0px 0px 40px #ffb780, 0px 0px 40px #ffb780;
	padding-top: 10px;
	position:relative;
	z-index:99;
}

#logo a {
	text-decoration:none;
	color:#000;
}

.emphasis {
	font-style:italic;
}

.summary {
	color:#ffb780;
}

#slogan {
	font-weight: normal;
	font-size: 200%;
	text-shadow: 0px 0px 20px #ffb780, 0px 0px 20px #ffb780;
	margin-top: 20px;
}

.headline {
	font-size: 170%;
	margin-top: 20px;
	margin-bottom: 30px;
	margin-left: auto;
	margin-right: auto;
	max-width: 400px;
	position:relative;
	z-index:99;
}

.subheadline {
	font-size: 150%;
}

.currVersion {
	color:#ffb780;
	font-size:130%;
	margin-top:100px;
}

.storyBanner {
	width:auto;
	margin-left:auto;
	margin-right:auto;
	opacity:.6;
	margin-bottom:30px;
}

.story {
	font-size:110%;
	margin:0px 20% 30px 20%;
	clear:both;
}

.storyTitle {
	clear:both;
}

h1 {
	color:#ffb780;
	font-weight: normal;
	margin-top: 28px;
	margin-bottom: 20px;
}


h2 {
	color:#ffb780;
	font-weight: normal;
}

figure {
	padding: 0px;
	margin-left: 2.5%;
	margin-bottom:60px;
}

figure img {

}

figcaption {
	font-size: 110%;
	text-align: center;
	padding-left: 30px;
	padding-right: 30px;
}

.newRow {
	clear:both;
	margin-left:0px;
 }
.links {
	margin:5px;
}

.trademark {
	margin:5px;
	font-size:80%;
}

	.movieHeader {
	display:block;
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
}

#blog {
	text-align:left;
	font-size:140%;
	font-weight:200;
}

#blog p {
	margin:40px;
	font-size:110%;
}

#blog pre {
		font-size:110%;
}

#blog a {
	text-decoration:none;
}

#blog h1 {
	margin-left:40px;
	font-size:130%;
	font-weight:400;
}

#blog h2 {
	margin-left:40px;
	margin-bottom:40px;
	font-size:120%;
	font-weight:400;
}

#blog img {
	display:inline;
	margin-left:20px;
	margin-right:20px;
}

#blog figure {
	width:auto;
}

#blog ul {
	margin:40px;
	padding:0px 50px 0px 50px;
	font-size:120%;
}

.borderedImg {
	width:auto;
	border: 1px solid;
	border-radius: 3px;
	border-color:#ffb780; 
}

.dssImg {
	width:auto;
}

.watchImg {
	width:156px;
}

.imageRow {
	display:block;
	float:none;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

.imageRow figcaption {
	color:#ffb780;
	font-size:80%;
}

.blogDate {
	font-style:italic;
	text-align:right;
	margin-right:40px;
	font-size:85%;
}

#blog p.closing {
	margin-bottom:5px;
}

#blog p.signature {
	margin-top:5px;
}

.appstorecorner {
	width:101px;
	height:30px;
	border:0px;
	position:absolute;
	top:2px;
	right:110px;
	background:url("appstorecorner.svg");
	text-indent:-9999px;
	z-index:100;
}

.facebook {
	width:30px;
	height:30px;
	border:0px;
	position:absolute;
	top:2px;
	right:74px;
	background:url("facebook_sm.png");
	text-indent:-9999px;
	z-index:100; 
}

.youtube {
	width:30px;
	height:30px;
	border:0px;
	position:absolute;
	top:2px;
	right:38px;
	background:url("youtube_sm.png");
	text-indent:-9999px;
	z-index:100;
}

.twitter {
	width:30px;
	height:30px;
	border:0px;
	position:absolute;
	top:2px;
	right:2px;
	background:url("twitter-blue_sm.png");
	text-indent:-9999px;
	z-index:100;
}

@media only screen and (min-width: 768px) {
	figure {
		display: block;
		float: left;
		width: 31.66%;
	}
	.currVersion {
		margin-top:100px;
	}
	
	.bottomRow {
		margin-bottom:30px;
	}
	
	#blog p {
		font-size:120%;
	}
	
	#blog pre {
		font-size:120%;
	}
	
	#blog figcaption {
		font-size:120%;
	}
	
	#blog h1 {
		font-size:150%;
	}
	
	#blog h2 {
		font-size:140%;
	}
}

@media only screen and (max-width: 767px) {
	figure {
		float:none;
	}
	#banner {
		margin-bottom:20px;
	}
/*	figure { display: table-row; }
	figure img { display: table-cell; width: 6em; height: 6em; margin: 1em; margin-top: 2em; vertical-align: top; }
	figcaption { display: table-cell; vertical-align: top; padding-top: 2em; }
*/

	#logo {
		font-size:400%;
		padding-top:20px;
	}
	
	.headline {
	font-size: 130%;
	margin-bottom: 20px;
	}
	
	.platform {
	font-size: 110%;
	}
	
	#applink {
		margin-top:25px;
	}
	
	.quote2, .quote3, .quote4, .quote5, .quote6, .quote7, .quote8 { display:none;}
	.quote1 {
		position: static;
		-webkit-animation: singleQuote 6.0s linear 2.0s infinite normal both; 
		animation: singleQuote 6.0s linear 2.0s infinite normal both;
		margin-top:25px;
		font-size:130%;
		min-height:2.8em;
	}
	.currVersion {
		margin-top:0px;
	}
	
	.story {
		margin:0px 5% 30px 5%;
	}
	
	.storyTitle {
		margin-top:0px;
	}
	
	.finalFigure {
		margin-bottom:30px;
	}
	
	.storyBanner {
		max-width:100%;
	}
	
	.borderedImg {
		max-width:85%;
		margin-left:0px;
		margin-right:0px;
	}	
		
	#blog h1 {
		margin-left:20px;
	}

	#blog h2 {
		margin-left:20px;
	}	
}