/*
 *	Fonts
 */

.font-title {
	font-family:"Superclarendon","Georgia","Palatino",serif;
	font-size: 36;
	font-weight:bold;
}

.text-body {
	font-family:"Avenir","Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
	font-size: 18;
	
	/* Force it to display below title */
	display:inline-block;
	margin-top:20;
}

.font-footer {
	font-family:"Avenir","Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
	font-size: 18;
}


/* No link underlines */
a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}


/*
*	Main
*/

body {
	background: #000;
	margin: 0px 0px;
/*	min-width: 768px;*/
	min-width: 1024px;
	/* This can't be smaller than the fixed video window width (declared in html :P) */
}

#main-column { /*"body ul" also works*/
    
    /* border: 1px solid #CDC; */
/*    width:800px;*/
	width:100%;
	
/*    background: #E; */
    
/*    overflow:auto;*/
	
    margin: 0px 0px ;
	padding: 0px 0px;
}

#main-column li {
	
	position:relative;
	list-style-type: none;
	
	width:100%;
}



/*
*	Header
*/

/*.header-top {
	position:absolute ;
	left:0px;
	top:0px;
	width:100%;
}*/

.header-title {
	padding-top:130px;
	padding-bottom: 80px;

/*	width: 100%;*/
/*	height: auto;*/
}

/*.header-plate img {
	width: 100%;
}
*/

/*
*	Title
*/

.title-plate {
	position:absolute ; /* get us to overlap whatever is in here */
	left:0px;
	top:100px;
	width:100%;
}

.title-img {
	margin:0px auto 0px auto;
}

.center {
  display:block;
  margin-left:auto;
  margin-right:auto;
}


/*
 * Lead text + app store badges
 */

.lead-summary-row {
	width: 1024px;
	overflow: hidden;
	
	margin: 0px auto 40px auto;
	padding: 60px 0px 30px 0px;
	
	clear:both;
}

.lead-summary-row h1,h2 {
/*	color: #CCF;*/
/*	color:#FBDA61;*/
/*	color:#DD8B00;*/
/*	color: #F76B1C;*/
	color: white;
	text-shadow: 0px 0px 5px #FF;
}

.lead-summary-row h1 {
	font-weight:500;
}

.lead-summary-row h1 i {
/*	text-shadow: 0px 0px 5px #FBDA61;*/
/*	color:#FBDA61;*/
/*	color: #F76B1C;*/
/*	color: white;*/
}

.lead-summary-row h2 {
	font-family: "Avenir", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
	font-size: 24;
	font-weight: 100;
}

.lead-summary-text {
	width: 50%;
	float:left;
	margin: 0px 20px 0px 70px;
}

.lead-summary-buttons {
	width: auto;
	float:left;
}			

/*
*	App Store Badge / Coming Soon
*/

.appstore-plate-top {
	padding: 30px 0px 10px 30px;

	width:300px; /* Redundant to img; otherwise we get too big of a click hover area :P */
	margin-left:auto;
	margin-right:auto;
	
	/* TOGGLE APP STORE BADGE */
/*	display:none;*/
}

.appstore-buttons-bottom {
	padding-top:100px;
	padding-bottom:100px;
}

.appstore-plate-bottom {
	width:300px; /* Redundant to img; otherwise we get too big of a click hover area :P */
	margin-left:auto;
	margin-right:auto;
	
	/* TOGGLE APP STORE BADGE */
/*	display:none;*/

	margin-top:50px;
	margin-bottom:30px;
}

.appstore-plate-top img,
.appstore-plate-bottom img {
	width:300px; /* OK, this is weird; we need this in plate and here. Whatever, it works */
}

.mac-badge {
/*	display:none;*/
}

.coming-soon {
	color:#FFF;
	text-shadow: 0px 1px 5px #000;
	text-align: center;
	
	margin-top:120px;
	
	 /* TOGGLE COMING SOON BADGE */
	display:none;
}

/*
 * Awards
 */

.awards-block {
	overflow:hidden;
}

.award-col-3 {
	width:33.33%;
	overflow:hidden;
	float:left;
}

.award-col-2 {
	width:50%;
	overflow:hidden;
	float:left;
}

.award-row {
	width: 1024px;
	overflow: hidden;
	
	margin-left:auto;
	margin-right:auto;	
	margin-bottom: 40px;
	
	clear:both;
}

.award {
/* Contains [image][text][image] */
	margin-left:auto;
	margin-right:auto;	
	width: 288px; /* 150px text + 69*2 for laurels */
}

.award .text {
	color: white;
	text-align: center;
	
	width: 150px;
/*	max-width: 150px;*/
/*	margin: 0px 10px 0px 10px;	*/
	
	height: 167px;
	/* height of image */
	
	font-family:"Avenir","Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
	font-size: 18;

	float: left;
/*	position: relative;*/
}

.award .text p {
	font-family:"Avenir","Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
	font-size: 18;
	margin-top: 0px;
	font-weight: 500;
	text-shadow: 0px 1px 3px #000;
}

.award .text p:nth-of-type(1) {
	color: #FBDA61;
}

.award .text p:nth-of-type(2) {
	color: #DD8B00;
}

.award .text p:nth-of-type(3) {
	color: #F76B1C;

/*	bottom: 0px;*/
/*	position: absolute;*/
	
	text-align: center;

	margin-left:auto;
	margin-right:auto;	

}

.laurel {
	float:left;
}

/*
*	Quotes
*/

.inner-shadow {
	box-shadow: 0px 0px 100px 10px rgba(0, 0, 0, 0.9) inset;
}

.quote-row {
	padding-top: 20px;
	padding-bottom: 60px;
	
	/* TODO: This needs to be reactive. I think move the padding top to each quote column,
		and have each column become a full row on an iPhone portrait.
	*/
	overflow:auto;

/* Old gradients, quotes + video */
/*	background: linear-gradient(to top, #112E46, #153856 );*/
/*	background: linear-gradient(to top, #020507, #112E46);*/

	background: linear-gradient(to top, #020507, #112E46);

	border-top: 1px solid #323;
	border-bottom: 1px solid #223;	
}

.quote-line {
	overflow:auto;
	width: 1024px;
	margin-left: auto;
	margin-right: auto;
	margin-top:40px;
}

.quote-column {
	width: 27%;
	color: white;

	text-align: center;
	float: left;
	
	padding: 0px 30px;
	
/*	TODO: Drop shadow;*/
}

.quote-column-1 {
	width: 100%;
	color: white;

	text-align: center;
	float: left;
	
	padding: 0px 30px;
	margin-left:auto;
	margin-right:auto;
	
/*	TODO: Drop shadow;*/
}
.quote-column-2 {
	width: 50%;
	color: white;

	text-align: center;
	float: left;
	
	padding: 0px 30px;
	
/*	TODO: Drop shadow;*/
}

.quote-body {
	font-family:"Superclarendon","Georgia","Palatino",serif;
	font-weight:500;
	font-size: 18; /* was 14 */
	text-shadow: 0px 1px 3px #000;
/*	color: #F76B1C;*/
	color: #FBDA61;
}

.quote-body b {
	color: #DD8B00;
/*	color: #F76B1C;*/
}

.quote-attr {
/*    border: 1px solid #CDC;*/
	/*	Control space between quote and attribution*/
	padding-top:5px;	
/*	color: #F76B1C;*/
}
.quote-author {
	font-family:"Avenir","Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
	font-size: 18; /* was 14 */
}
.quote-venue {
	font-family:"Avenir","Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
	font-size: 18; /* was 14 */
	font-weight:900; /* was "-black"*/
} 



/*
*	Video
*/

.video-pad-bottom {
	height: 50px; /* Also gets .hidden-1024 in html, so hides if small */
}

.videoWrapper-16x9 {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
/*	width:1024px;*/
}
.videoWrapper-16x9 iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.lead-loop-plate {
	background-color:#553344;
	width:100%;
	position: relative;
}

/*
*	Rain Shadow
*/

.rain-shadow {
	padding-top: 60px;
	padding-bottom: 60px;
	overflow:auto; /* NECESSARY. WHY? */

	border-bottom: 1px solid #000;
}

.ipad-plate {
	position:relative ;
	left:-70px;
	width:65%;
/*	height:448; */ /* actual image height and then paren't top padding :P;*/
	float:left;
/*    border: 1px solid #FDD;*/
/*	overflow:hidden;*/
}

.ipad-plate-frame {
	float:right;
}

.ipad-plate-content {
	position:absolute;
	bottom:31px;
	right:60px;
	float:right;
}

.ipad-title {
	width:34%;
	max-width:350px;
	float:left;
	padding-top:80px;

	position:relative;
	left:-10px;

	color:white;

	text-shadow: 0px 2px 2px #000;
}




/*
*	Core
*/

.core-row-right-color {
	background-color:#DDF2EC; /* for desktop safari */
}

.core-row-wrong-color {
	background-color:#D6F0EA; /* WRONG color (but appears right on everything but desktop safari) */
}

.core-row {
	height:522px; /* HACK? ok, ill just fix it to my image height. */
}

.core-row img {
/*	position:relative;*/
/*	top:4px; */ /* HACK. This fixes some weird bug where image gets placed -4 inside of this item.*/
}

.core-text {
	position: absolute;
	width: 289px;
	top: 160px;
	right: 140px;
}

.core-text-title {
	color:#171818;	
}




/*
*	Geo
*/

.geo-row {
	border-top: 1px solid #DAE3E1;
	background-color:#EAF3F1;
	height:601;
	/*  602 is for gfycat
		600 is for png
	
		using bottom below so png is forced to bottom of 602 thing.
	 */
}

.geo-plate {
	position: absolute;
	bottom: 0px;
	right: 0px;
}

.geo-text {
	float:left;
	
	width:289px;
	margin-left:80px;
	margin-top:160px;
}

.geo-text-title {
	color:#171818;
}



/*
*	Chapters
*/

.chapters-row {
	background-color:#DDF2EC;

	border-top: 1px solid rgba(151,151,151,.33);
	border-bottom: 1px solid rgba(151,151,151,.33);
}

.chapters-title {
	text-align: center;
	width:100%;
	padding-top:40px;
	padding-bottom:5px;
}

.chapter-col {
	float:left;
	width:20%;
}
.chapter-col img {
	width:100%;
}
.chapter-bar {
	margin-top: 8px;
	width:100%;
	height:8px;
	background-color:#FF9090;
}
.chapters-nav {
	overflow: auto; /* Contain floating divs within */

}

.chapter-info {
/*	background-color:#CC6F90;*/
	width:700px;
	overflow: auto;  /* Contain floating divs within */
	margin-top:35px;
	margin-bottom:50px;
}

.chapter-text {
	width:50%;
	margin-top:0px; /* clear margin top of text style applied here */
	float:left;
	display:none;
/*	background-color:#FFF;*/
}

.chapter-image {
	width:auto;
	float:left;
	margin-left:30px;
	display:none;
/*	background-color:#000;*/

/*	box-shadow: 2px 2px 3px rgba(0,0,0,.35)*/
/*	margin-bottom: 5px; /* to catch shadow */
	/* Annoyingly doesn't work on iOS. :( */
}

/*
*	Conclusion
*/

#mc_embed_signup {
	margin-left:auto;
	margin-right:auto;
	width:300px;
	margin-top:50px;
	padding:10px 0 10px 0;
	
	/* Hide on release */
/*	display:none;*/
}

#mc-embedded-subscribe {
	width: 100%;
	background-color: #FFB53C;
	color: #FFF;
	text-shadow: 0px 1px 2px #000;
	height: 40px;
	font-family: 'Avenir','Lucida Grande',Helvetica,Arial,Verdana,sans-serif;
	font-size: 18;
	border-radius: 10px;
	border:none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
	cursor: pointer;
	cursor: hand;
}

#mc-embedded-subscribe:hover {
	box-shadow: 0px 0px 20px #FFB53C;
	background-color: #FFD56C;

  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

.email {
	width:100%;
	font-family:'Avenir','Lucida Grande',Helvetica,Arial,Verdana,sans-serif;
	font-size: 18;
	margin-bottom: 15px;
	height:40px;
	text-align: center;

  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  
  outline: none;
  border: 1px solid #DDDDDD;
}
 
.email:focus {
  box-shadow: 0 0 20px rgba(81, 203, 238, 1);
  border: 2px solid rgba(81, 203, 238, 1);
}

.email:hover {
  box-shadow: 0 0 20px rgba(81, 203, 238, 1);
/*  border: 1px solid rgba(81, 203, 238, 1);*/
}

div.album-link {
	width:300px;
	margin-left:auto;
	margin-right: auto;
}

p.album-link-text {
	text-align: center;
	color:white;
	font-family:"Avenir","Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
	font-size: 18;

	width:300px;
	margin-top:40px;
    padding-top: 8px;
	padding-bottom: 8px;
    /* width: 80px; */
    /* height: 80px; */
    /* background: white; */
    border-radius: 10px;
    -moz-border-radius: 10px;
    /* overflow: hidden; */
    /* display: inline-block; */
    border: solid 1px #ccc;
    /* vertical-align: bottom; */    
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

p.album-link-text:hover {
	background-color: rgba(255,255,255,.25);
	box-shadow: 0px 0px 20px #FFF;

  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

.conclusion {
}

.space-bkgnd-top {
    background-image: url("../image/stars@2x-med.jpg");
    background-repeat: no-repeat;
    background-position: center top;
	background-size:cover;
	background-position: 50% 25%;
}

.space-bkgnd {
    background-image: url("../image/stars@2x-med.jpg");
    background-repeat: no-repeat;
    background-position: center bottom;
	background-size:cover;
	background-position: 50% 50%;
}

.conclusion-title {
	padding-top:100;
}

.share-div {
	width:300px;
	margin-left:auto;
	margin-right: auto;
}

.share-buttons{
	list-style: none;
	width:300px;
	padding-left:5.5px;
	margin-top:30px;
}

.share-buttons ul{
	padding:0px;
}

.share-buttons li{
	display: inline;
}

.fa:hover {
/* This is definitely the wrong place to recolor the share buttons, but I can't quite figure out how to do it right. */
	color:white;
	transform: translate(0,-10px);
}

.fa {
/* This is definitely the wrong place to recolor the share buttons, but I can't quite figure out how to do it right. */
	color:rgba(255,255,255,.85);
}

.footer {
	border-top: 1px solid #BBB;
/*	border-bottom: 5px solid #BBB;*/ /* Doesn't show up anyway. :P */
	margin-top:50px;
	margin-left:75px;
	margin-right:75px;
	padding-bottom:48px;
	height:41px;
/*	background-color:#EAF3F1;*/
}

.footer-break {
	height:21px;
	width:100%;
}

.footer-link {
	float:right;
/*	margin: 21 21 0 42;*/
	margin-right:21px;
	margin-left:21px;
	
	color:#FFF;	/* Move to link CSS */
	text-shadow: 0px 2px 4px #000;
}

.footer-link:hover {
    text-decoration: underline;
}

.footer-text {
	float:left;
	margin-right:21px;
	margin-left:21px;
	
	color:#BBB;
	text-shadow: 0px 2px 4px #000;
}

/* Things that are the same:
	.[geo|core]-text-body
*/



@media (max-width: 1024px) {
    .hidden-1024 {
        display:none !important;
    }
}