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

html,body
{
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	width: 100%;
	height: 100%;
}

h1
{
	font-family: 'Play', sans-serif;
}

h2, h3, h4, h5, h6
{
	font-family: 'Questrial', sans-serif;
}

h3.inset-header {
	margin: 30px 0;
	background-color: #febf00;
	line-height: 1;
	height:8px;
}

p
{
	line-height: 1.618em;
	margin-bottom: 1.618em;
	word-spacing: 0.2em;
	font-weight: 300;
}

ul.list-unstyled
{
	margin-left: 5px;
}

ul.list-unstyled > li 
{
	text-indent: -10px;
	margin-bottom: 1em;
}

ul.list-unstyled > li > span 
{
	color: #febf00;
}

.row
{
	margin: 0;
}

.navigation
{
	position: fixed;
	height: 50px;
	background-color: rgba(0, 0, 0, 0.8);
	width: 100%;
	z-index: 9999;
}

#addthis
{
	float: right;
	position: relative;
	top: 15px;
	right: 15px;
	color: #fff;
}

.sharing-icons 
{
  padding: 0px;
  margin: 0;
}

.sharing-icons li 
{
  display: inline-block;
  list-style-type: none;
  margin-left: 5px;
}

.sharing-icons li 
{
  height: 16px;
  line-height: 16px;
}

#alternate-title
{
	font-family: 'Lato', sans-serif;
	/*font-weight: 300;*/
	font-size: 14px;
	line-height: 1.6;
	position: fixed;
	top: 50px;
	width: 100%;
	color: rgba(256, 256, 256, 0.7);
	text-align: left;
	padding-left: 1em;
	/*background-color: rgba(140, 30, 30, 0.7);*/
	/*background-color: rgba(254, 192, 0, 0.8);*/
	background-color: rgba(51, 51, 51, 0.7);
	z-index: 9999;
	display: none;
}

#alternate-title .font-play 
{
	font-family: 'Play', sans-serif;
	font-weight: bold;
	font-size: 15px;
}

#alternate-title > small
{
	display: inline-block;
	position: absolute;
	top: 1px;
	right: 1em;
	width: 200px;
	text-align: right;
}

#brand
{
	vertical-align: middle;
	padding: 7.5px 0 0 15px;
}

.chapter
{
	z-index: 100;
	padding-bottom: 120px;
	background-color: #FFF;
	position: relative; /* not sure if this will cause problems... */
}

.chapter:last-child
{
	padding: 0;
}

.bookmark
{
	width: 0;
	border-left: 13px solid rgba(0, 0, 0, 0);
	border-right: 0px solid rgba(0, 0, 0, 0);
	border-top: 8px solid #999;
	display: inline-block;
	position: absolute;
	top: 40%;
	left: 60px;
}

.bookmark:after
{
	content: " ";
	display: block;
	position: absolute;
	width: 20px;
	border-top: 1px solid #999;
	top: -8px;
}

.chapter-title
{
	font-size: 44px;
	margin-bottom: 1em;
	padding: 0 120px;
	margin-left: -13px;
}

.chapter-text
{
	padding: 0 120px;
}

.inset {
	color: #ddd;
	font-size: 14px;
}

.inset p 
{
	font-size: 18px;
	margin-top: 10px;
	font-weight: normal;
}

.header
{
	background: #fff;
	padding: 0 30px;
}

.end-chapter 
{
	position: relative;
	top: 60px;
	margin: 0 -60px;
}

.after-img
{
	margin-top: 30px;
}

.quote
{
	padding-left: 30px;
	border-left: 1px solid #999;
	margin: 2em 0 1em;
	font-size: 44px;
	line-height: 1.2em;
	word-spacing: 0.1em;
}

.init-quote
{
	margin: 2em 0 1em 0;
	font-size: 55px;
	line-height: 1.2em;
	word-spacing: 0.1em;
	text-indent: -0.3em;
}

img.align-bottom
{
	float: right;
	position: absolute;
	bottom: -120px;
	right: 0;
}

.slide
{
	background-attachment: fixed;
	width: 100%;
	height: 100%;
	position: relative;
	box-shadow: inset 0px 10px 10px rgba(0,0,0,0.3);
}

.wrapper
{
	width: 960px;
	height: 200px;
	margin: 0 auto;
	position: relative;
}

.bkg-gray
{
	background: #2c2c2c url(../images/diag-bkg-repeat.png);
	padding: 30px 0;
}

.text-white {
	color: #ededed;
	background: #2c2c2c url(../images/diag-bkg-repeat.png);
	display: inline-block;
	margin-top:-25px;
	padding-right: 15px;
	vertical-align: middle;
}

/*******************************************
	CHAPTER 0
*******************************************/

#chapter0
{
	position: relative;
	height: 200%;
	overflow: hidden;
	background-color: #333;
	padding: 0;
	z-index: 70;
}

#chapter0 > .title
{
	position: fixed;
	text-shadow: 0 1px 1px #000;
}

#chapter0 > #opening_stills > img
{
	position: relative;
	height: 100%;
	/*top: 0px;
	left: 0px;*/
	/*opacity: 1.0;*/
}

#chapter0 > #opening_video
{
	position: fixed;
	overflow: hidden;
	/*opacity: 0;*/
	/*display: none;*/
}

#chapter0 > #opening_stills
{
	display: none;
	overflow: hidden;
}

#chapter0 > #opening_video > video
{
	height: 100%;
	width: 100%;
	/*opacity: 1;*/
}

.title
{
	position: absolute;
	top: 30%;
	text-align: center;
	width: 100%;
	color: white;
}

.maintitle, .counter
{
	font-size: 114px;
	font-weight: bold;
	margin: 0;
}

.subtitle
{
	font-family: 'Lato', sans-serif;
	font-size: 34px;
	font-weight: 300;
	color: #febf00;
	/*margin-top: 155px; /* 125 + 30 */
	margin-top: 143px; /* 110 + 30 */
	opacity: 0;
	z-index: 50;
	clear: both;
}

.subtitle hr
{
	display: inline-block;
	width: 9%;
	vertical-align: middle;
}

.subtitle hr:last-child
{
	margin-right: -15px;
	margin-left: 15px;
}

.subtitle hr:first-child
{
	margin-left: -15px;
	margin-right: 15px;
}

p.author-credit
{
	font-size: 20px;
	margin-top: 75px; /* 45 + 30 */
	opacity: 0;
	z-index: 50;
}

/* entire container, keeps perspective */
.title 
{
	-webkit-perspective: 1000px;
	-webkit-perspective-origin: center 70%;
	perspective: 1000px;
	perspective-origin: center 70%;
}

/* flip the pane */
.title.hover .flipper
{
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

.title, .maintitle, .counter 
{
	width: 100%;
	height: 115px;
	text-align: center;
}

/* flip speed goes here */
.flipper 
{
	-webkit-transition: 2.0s;
	-webkit-transform-style: preserve-3d;
	transition: 2.0s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.counter, .maintitle 
{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	/*left: 0;*/
}

/* front pane, placed above back */
.counter 
{
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
	z-index: 15;
}

/* back, initially hidden pane */
.maintitle 
{
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

/*******************************************
	CHAPTER 1, 2, 3
*******************************************/

#chapter1
{
	/*box-shadow: 0px -2px 5px rgba(0,0,0,0.25);*/
}

#chapter2 div.pull-right /* 264 x 279 */
{
	-webkit-perspective: 2000px;
	perspective: 2000px;
	margin: 1em -4em 1em 2em;
	width: 264px;
	height: 323px; /* 279 + 44 */
}

#chapter2 div.pull-right > img
{
	-webkit-transform: rotateY(90deg);
	-webkit-transition: 0.8s;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	transform: rotateY(90deg);
	transition: 0.8s;
	transform-style: preserve-3d;
	backface-visibility: hidden;

	opacity: .1;
	padding: 20px 0;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	height: 279px;
	width: 264px;
	display: inline-block;
	vertical-align: middle;
	/*margin-top: 139px;*/
	/*display: none;*/
}

#chapter3 div.pull-left /* 264 x 616 */
{
	-webkit-perspective: 2000px;
	perspective: 2000px;
	margin: 1em 2em 1em -4em;
	width: 264px;
	height: 660px; /* 616 + 44 */
	vertical-align: middle;
}

#chapter3 div.pull-left > img
{
	-webkit-transform: rotateY(90deg);
	-webkit-transition: 0.8s;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	transform: rotateY(90deg);
	transition: 0.8s;
	transform-style: preserve-3d;
	backface-visibility: hidden;

	opacity: .1;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	padding: 20px 0;
	height: 616px;
	width: 264px;
	display: inline-block;
	vertical-align: middle;
	/*margin-top: 308px;*/
	/*display: none;*/
}

#chapter3 div.pull-left > img.flipped,
#chapter2 div.pull-right > img.flipped
{
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
	opacity: 1.0;
}


/*******************************************
	CHAPTER 4
*******************************************/

#chapter4-header
{
	background: url(../images/chapter4/chapter4.jpg) no-repeat center top fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	position: relative;
}

/*******************************************
	CHAPTER 5
*******************************************/

#chapter5
{
	position: relative;
}

.pull-quote
{
	position: relative;
	-webkit-perspective: 1800;
	-webkit-perspective-origin: center center;
	perspective: 1800;
	perspective-origin: center center;
	font-size: 1.5em;
	margin: 0.4em 1.5em .4em -6em;
	width: 355px;
	height: 370px;
	float: left;
}

.pull-quote > div
{
	-webkit-transform: rotateY(90deg);
	-webkit-transition: 0.8s;
	-webkit-transform-style: preserve-3d;
	transform: rotateY(90deg);
	transition: 0.8s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
	width: 355px;
	opacity: .1;

	padding: 1em;
	line-height: 1.3;
	word-spacing: 0.1em;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	text-indent: -0.3em;
}

.pull-quote > div small
{
	font-weight: 300;
	text-align: right;
	font-style: italic;
	margin-top: 1em;
	font-size: 15px;
}

.pull-quote > div.flipped
{
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
	opacity: 1.0;
}

#chapter5 #video2_container button
{
	display: none;
	position: absolute;
}


#chapter5 #video2_container
{
	position: relative;
	width: 100%;
}

/*******************************************
	CHAPTER 6
*******************************************/

#chapter6-header
{
	background: url(../images/chapter6/Musk_Halliwell.jpg) no-repeat center top fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	position: relative;
}


.credit /* for both cover images */
{
	color: #ffffff;
	background: rgba(0,0,0,0.7);
	padding: 15px;
	position: absolute;
	bottom: -30px;
	left: 0px;
	font-size: 0.8em;
	opacity: 0.0;
}


/*******************************************
	CHAPTER 7
*******************************************/

#chapter7
{
	box-shadow: 0px 2px 3px rgba(0,0,0,0.25);
}

/*******************************************
	CHAPTER 8
*******************************************/

#chapter8
{
	padding-bottom: 0;
	height: 100%;
	z-index: 20;
}

#chapter8 > #closing_video
{
	position: relative;
	top: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: none;
}

#chapter8 > #closing_video > video
{
	position: absolute;
	bottom: 0px;
	height: 100%;
	width: 100%;
}

#chapter8 #closing_video button
{
	display: none;
	position: absolute;
}

/*******************************************
	Misc
*******************************************/

#footer
{
	position: relative;
	bottom: 0;
	width: 100%;
	z-index: 20;
	padding: 1em 0 .7em 0; 
	background-color: #EEE; 
	text-align: center;
}

#footer p
{
	font-size: 15px;
	font-weight: 300;
	margin-bottom: .7em;
}

#footer p.copyright
{
	font-size: 12px;
}

.cover-shots
{
	width: 100%;
	height: 600px;
	box-shadow: inset 0 0 7px rgba(0,0,0,.5);
	overflow: hidden;
}


/*******************************************
	Responsive Styles
*******************************************/

@media all and (max-width: 1200px) {

	.chapter-text, .chapter-title
	{
		padding: 0 70px;
	}

	.bookmark
	{
		left: 10px;
	}

}

@media all and (max-width: 992px) {

	.chapter-text, .chapter-title
	{
		padding: 0 30px;
	}

	.bookmark
	{
		left: -30px;
	}

}

@media all and (device-width: 768px) and (device-height: 1024px) {

	#chapter0
	{
		height: 100%;
	}

	#chapter4-header
	{
		background: url(../images/chapter4/chapter4.jpg) no-repeat center top 0px;
	}

	/* #chapter5 #video2_container button
	{
		display: block;
		left: 15px;
		bottom: 15px;
	} */

	#chapter6-header
	{
		background: url(../images/chapter6/Musk_Halliwell.jpg) no-repeat center top 0px;
	}


	/* #chapter8 #closing_video button
	{
		display: block;
		left: 15px;
		bottom: 15px;
	} */


}