@import url(base.css);
@import url('//i.s-microsoft.com/fonts/segoe-ui/west-european/light/latest.css');
@import url('//i.s-microsoft.com/fonts/segoe-ui/west-european/light-italic/latest.css');
@import url('//i.s-microsoft.com/fonts/segoe-ui/west-european/semilight/latest.css');
@import url('//i.s-microsoft.com/fonts/segoe-ui/west-european/semilight-italic/latest.css');
@import url('//i.s-microsoft.com/fonts/segoe-ui/west-european/normal/latest.css');
@import url('//i.s-microsoft.com/fonts/segoe-ui/west-european/semibold/latest.css');
@import url('//i.s-microsoft.com/fonts/segoe-ui/west-european/bold/latest.css');

/** Forms */
input[type=text],
input[type=email],
input[type=submit],
input[type=password],
input[type=number],
button,
textarea,
select {
	background: #fff;
	border: 1px solid #999;
	border-radius: 0;
	color: #666;
	font-size: 16px;
	max-width: 441px;
	outline: none;
	padding: 0 12px;
	height: 32px;
	-webkit-font-smoothing: antialiased;
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
textarea{
	padding: 12px;
}
input[type=submit] {
	cursor: pointer;
}
audio {
	visibility: hidden;
}
.select-wrapper {
	background: #fff;
	border: 1px solid #999;
	overflow: hidden;
	position: relative;
	width: 150px;
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.after:after {
	display: inline-block;
	content: '';
}
.before:before {
	display: inline-block;
	content: '';
}
.sprite-before:before,
.sprite-after:after {
	background: url(../images/sprites/independence-day-sprite.png) no-repeat;
}
	.backgroundsize .sprite-before:before,
	.backgroundsize .sprite-after:after {
		background-image: url(../images/sprites/independence-day-sprite-retina.png);
		background-size: auto 100px;
	}

/** Framework */
body, html {
	background: #fafafa;
	display: block;
	font-family: "ff-meta-serif-web-pro";
	min-width: 750px;
	position: relative;
	width:100%;
}
	* {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale
	}
	h1,
	h2,
	h3 {
		font-family: 'wf_segoe-ui_light', sans-serif;
	}
	.preload {
		display: none;
	}
	.behind {
		position: relative;
		z-index: 1;
	}
	.in-front {
		position: relative;
		z-index: 2;
	}
	.mobile-visible {
		display: none;
	}

/** Framework */
.chapter {
	background: #fafafa;
	display: block;
	margin: -32px 0 0;
	overflow: hidden;
}
.central-column {
	margin: 0 auto;
	position: relative;
	width: 1140px;
}
.header-placeholder {
	position: relative;
	height: 1000px;
	z-index: 1;
	transition: 		height .5s;
	-webkit-transition: height .5s;
}
.page-wrapper {
	background-color: #fafafa;
	position: relative;
	z-index: 3;
}

/** Styled Text */
.styled-text h2 {
	color: #454242;
	font-size: 38px;
	line-height: 46px;
	margin-bottom: 35px;
	text-transform: uppercase;
}
.styled-text p {
	color: #454242;
	font-size: 19px;
	line-height: 30px;
	margin-bottom: 30px;
}
.styled-text .pull-quote {
	font-size: 39px;
	font-family: "wf_segoe-ui_semilight-italic", sans-serif;
	line-height: 52px;
	text-align: center;
}
.styled-text .pull-quote-major {
	padding: 0 100px;
}

/** Site Header */
.sticky-navigation-wrapper {
	position: relative;
}
.sticky-navigation {
	background: #d9d9d9;
	font-size: 0;
	padding: 10px 19px;
	width: 100%;
	position: absolute;
	top: 0;
	z-index: 10;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.sticky-navigation.fixed {
	position: fixed;
}
	.sticky-navigation .breadcrumb {
		float: left;
		font-family: 'wf_segoe-ui_light', sans-serif;
		color: #fff;
		font-size: 0;
		padding: 4px 0;
		position: relative;
		transition: opacity 1s;
		-webkit-transition: opacity 1s;
	}
		.sticky-navigation .breadcrumb .break,
		.sticky-navigation .breadcrumb a {
			display: block;
			color: #fff;
			float: left;
			line-height: 24px;
			font-size: 24px;
		}
			.sticky-navigation .breadcrumb .break {
				margin: 0 7px 0 0;
			}
			.sticky-navigation .breadcrumb a {
				margin: 0 12px 0 0;
			}
				.sticky-navigation .breadcrumb a .branding {
					display: inline-block;
					vertical-align: top;
				}
	.sticky-navigation .social {
		float: right;
		text-align: right;
		position: relative;
		transition: opacity 1s;
		-webkit-transition: opacity 1s;
	}
			.sticky-navigation .social .social-icon {
				cursor: pointer;
				display: inline-block;
				vertical-align: middle;
				margin-left: 17px;
			}
			.sticky-navigation .social .social-icon:before {
				background-position: -150px 0;
				height: 34px;
				width: 26px;
			}
		.sticky-navigation .social .social-link {
			cursor: default;
			display: inline-block;
			margin-left: 8px;
			opacity: 0;
			vertical-align: middle;
			transition: opacity 1s; 
			-webkit-transition: opacity 1s; 
		}
			.sticky-navigation .social .social-link:before {
				display: inline-block; 
				height: 35px;
				width: 35px;
			}
			.sticky-navigation .social.open .social-link,
			.sticky-navigation .social.clicked .social-link {
				opacity: 1;
				cursor: pointer;
			}
		.sticky-navigation .social .share-email:before { background-position: -100px 0px; }
		.sticky-navigation .social .share-twitter:before { background-position: -50px 0px; }
		.sticky-navigation .social .share-facebook:before { background-position: 0 0; }
		.sticky-navigation .social .share-email:hover:before { background-position: -100px -50px; }
		.sticky-navigation .social .share-twitter:hover:before { background-position: -50px -50px; }
		.sticky-navigation .social .share-facebook:hover:before { background-position: 0 -50px; }
		.sticky-navigation .social .social-link:nth-child(3) { transition-delay-delay: 0s; -webkit-transition-delay: 0s; }
		.sticky-navigation .social .social-link:nth-child(2) { transition-delay-delay: .15s; -webkit-transition-delay: .15s; }
		.sticky-navigation .social .social-link:nth-child(1) { transition-delay-delay: .25s; -webkit-transition-delay: .25s; }
	
	.sticky-navigation .audio-version-controls {
		display: none;
		float: right;
		margin-left: 15px;
	}
		.sticky-navigation .audio-version-controls:before {
			height: 35px;
			width: 35px;
			background-position: -300px 0;
		}
		.sticky-navigation .audio-version-controls:hover:before {
			background-position: -300px -50px;
		}
		.sticky-navigation .audio-version-controls.playing:before {
			background-position: -350px 0;
		}
		.sticky-navigation .audio-version-controls.playing:hover:before {
			opacity: .5;
		}
	.sticky-navigation .audio-control {
		display: block;
		float: right;
		padding: 2px 0;
		position: relative;
		text-align: right;
		margin-left: 15px;
	}
		.sticky-navigation .audio-control:before {
			background-position: -200px 0;
			width: 31px;
			height: 29px;
		}
		.sticky-navigation .audio-control:hover:before {
			background-position: -200px -50px;
		}
		.sticky-navigation .audio-control.audio-disabled:before {
			background-position: -250px 0;
		}
	.sticky-navigation .progress-bar {
		height: 2px;
		display: none;
		background: #fff;
		width: 500px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin: -1px 0 0 -250px;
	}
		.sticky-navigation .progress-bar .progress-chapter {
			float: left;
			width: 20%;
			height: 2px;
			position: relative;
		}
			.sticky-navigation .progress-bar .progress-chapter .indicator {
				background: #7bc2c9;
				height: 2px;
				width: 0;
				max-width: 100%;
			}
		.sticky-navigation .progress-bar a {
			display: block;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			position: absolute; 
			left: -4px;
			top: 50%;
			margin-top: -4px;
			background: #fff;
			transition: background .4s;
			-webkit-transition: background .4s;
		}
		.sticky-navigation .progress-bar a.complete,
		.sticky-navigation .progress-bar a:hover {
			background: #7bc2c9;
		}
		.sticky-navigation .progress-bar .story-end {
			left: auto;
			right: -4px;
		}

/** Site Header */
.site-header {
	background: #fafafa url(../images/chrome/paddington-station-crowd.jpg) center center no-repeat;
	background-size: cover;
	height: 100%;
	min-height: 500px;
	position: fixed;
	width: 100%;
	z-index: 2;
	transition: 		height .3s;
	-webkit-transition: height .3s;
}
	.site-header .dot-matrix {
		height: 100%;
		padding: 4px;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
		.site-header .dot-matrix .inner {
			background: url(../images/chrome/dot-matrix.png) left top repeat;
			height: 100%;
			position: relative;
			width: 100%;
		}
		.arc-spark {
			position: absolute;
			background: #fff;
			opacity: .5
		}

/** Site Header - audio version */
.site-header .audio-version-cta {
	position: absolute;
	top: 29px;
	right: 29px;
	color: #fff;
	font-size: 14px;
	line-height: 10px;
	font-family: 'wf_segoe-ui_normal', sans-serif;
	text-transform: uppercase;
}
	.site-header .audio-version-cta span {
		vertical-align: middle;
	}
	.site-header .audio-version-cta:after {
		background-position: -300px 0;
		height: 35px;
		vertical-align: middle;
		width: 35px;
		margin-left: 9px;
	}
	.site-header .audio-version-cta:hover:after {
		background-position: -300px -50px;
	}
	.site-header .audio-version-cta.pause-cta:after {
		background-position: -350px 0;
	}

/** Site Header - book plate */
.site-header .book-plate {
	position: absolute;
	text-align: center;
	top: 50%;
	left: 50%;
	width: 600px;
	margin: -100px 0 0 -300px;
}
	.site-header .book-plate .title-animation {
		opacity: 0;
		transition: 		opacity 1.7s 1s;
		-webkit-transition: opacity 1.7s 1s;
	}
		.site-header .book-plate.triggered .title-animation {
			opacity: 1;
		}
		.site-header .book-plate h1 {
			color: #fff;
			font-size: 49px;
			font-family: 'wf_segoe-ui_semibold', sans-serif;
			font-weight: 700;
			line-height: 60px;
			margin-bottom: 9px;
			text-transform: uppercase;
		}
		.site-header .book-plate .subtitle {
			color: #fff;
			font-size: 21px;
			font-family: 'wf_segoe-ui_semilight', sans-serif;
			line-height: 29px;
			margin-bottom: 24px;
		}
	.site-header .book-plate .rule {
		background: #fff;
		height: 2px;
		width: 0;
		margin: 0 auto 18px;
		transition: width 1s ease-out;
		-webkit-transition: width 1s ease-out;
	}
	.site-header .book-plate.triggered .rule {
		width: 62px;
	}
	.site-header .book-plate cite {
		color: #fff;
		display: block;
		font-size: 19px;
		line-height: 30px;
		opacity: 0;
		transition: 		opacity 1s 2.5s;
		-webkit-transition: opacity 1s 2.5s;
	}
	.site-header .book-plate.triggered cite {
		opacity: 1;
	}

/** Related Stories */
.related-stories {
	background: #fafafa;
	padding: 100px 0;
	z-index: 3;
	position: relative;
}
	.related-stories h2 {
		color: #454242;
		font-family: 'wf_segoe-ui_light', sans-serif;
		font-size: 39px;
		line-height: 60px;
		margin: 0 0 22px;
		text-transform: none;
		padding-left: 14px;
	}
	.related-stories .links {
		position: relative;
	}
		.related-stories .links a {
			display: block;
			width: 33.3%;
			padding: 0 14px;
			float: left;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
		}
			.related-stories .links a .inner {
				position: relative;
				width: 100%;
				height: 100%;
			}
			.related-stories .links a .inner .image {
				height: 340px;
				overflow: hidden;
				margin-bottom: 14px;
			}
			.related-stories .links a .inner .image img {
				display: block;
				width: 100%;
				height: auto;
				margin-bottom: 14px;
				transition: all 300ms ease-out;
				-webkit-transition: all 300ms ease-out;
				transform: translateZ(0);
				-webkit-transform: translateZ(0);
			}
			.related-stories .links a:hover .inner .image img {
				-webkit-transition: -webkit-transform 800ms ease-out, box-shadow 150ms ease-out;
				transition: 		transform 800ms ease-out, box-shadow 150ms ease-out;
				-webkit-transform: 	scale(1.08);
				transform: 			scale(1.08);
			}
			.related-stories .links a .inner h3 {
				color: #454242;
				font-family: 'wf_segoe-ui_semibold', sans-serif;
				font-size: 19px;
				line-height: 24px;
			}
			.related-stories .links a .inner cite {
				color: #454242;
				font-family: 'wf_segoe-ui_light', sans-serif;
				font-size: 17px;
				line-height: 24px;
			}

/** Chapter Header */
.chapter-header {
	display: block;
	margin-bottom: 100px;
	position: relative;
}
	.chapter-header .horizontal-reveal-beacon-wrapper {
		margin-bottom: -32px;
		z-index: 2;
	}
	.chapter-header .horizontal-reveal-stroke-wrapper {
		z-index: 2;
	}
.chapter-header .inner {
	padding: 64px 0 118px;
	position: relative;
	text-align: center;
	z-index: 1;
	background: rgb(143,206,161);
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjOGZjZWExIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU0YmFjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(45deg,  rgba(143,206,161,1) 0%, rgba(84,186,200,1) 100%);
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(143,206,161,1)), color-stop(100%,rgba(84,186,200,1)));
	background: -webkit-linear-gradient(45deg,  rgba(143,206,161,1) 0%,rgba(84,186,200,1) 100%);
	background: -o-linear-gradient(45deg,  rgba(143,206,161,1) 0%,rgba(84,186,200,1) 100%);
	background: -ms-linear-gradient(45deg,  rgba(143,206,161,1) 0%,rgba(84,186,200,1) 100%);
	background: linear-gradient(45deg,  rgba(143,206,161,1) 0%,rgba(84,186,200,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fcea1', endColorstr='#54bac8',GradientType=1 );
}
	.chapter-header .dot-matrix {
		background: url(../images/bg/dot-matrix-header.png) 0 0 repeat;
		height: 100%;
		position: absolute;
		top: 0;
		width: 100%;
	}			
	.chapter-header h2 {
		margin: 0;
	}
	.chapter-header h2 .chapter-title{
		color: #fff;
		font-size: 90px;
		font-family: 'wf_segoe-ui_light', sans-serif;
		line-height: 100px;
	}			
	.chapter-header h2 .chapter-number {
		border-bottom: 2px solid #fff;
		color: #fff;
		display: inline-block;
		font-family: 'ff-meta-serif-web-pro', serif;
		font-size: 29px;
		margin: 0 auto 41px;
		padding: 0 32px 9px;
		text-transform: none;
	}

/** Division Beacon */
.division-beacon {
	clear: both;
	height: 18px;
	margin: 84px auto;
	position: relative;
	width: 18px;
}
	.division-beacon .beacon-wrapper {
		border-radius: 50%;
		background: #daecee;
		height: 18px;
		left: 50%;
		margin: -9px 0 0 -9px;
		opacity: 0;
		position: absolute;
		top: 50%;
		width: 18px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		transform: 			scale(.3);
		-webkit-transform: 	scale(.3);
	}
		.division-beacon.beacon-triggered .beacon-wrapper {
			animation: 			division-beacon .8s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
			-webkit-animation: 	division-beacon .8s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
		}

/** Content Beacon */
.content-beacon {
	height: 64px;
	margin: 0 auto;
	position: relative;
	width: 64px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
	.content-beacon .beacon-wrapper {
		border-radius: 50%;
		border: 5px solid rgba( 123, 194, 201, .25);
		height: 64px;
		left: 50%;
		margin: -32px 0 0 -32px;
		opacity: 0;
		position: absolute;
		top: 50%;
		width: 64px;
		transform: 			scale(.8);
		-webkit-transform: 	scale(.8);
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
		.beacon-triggered .content-beacon .beacon-wrapper {
			animation: 			beacon-grow-fade .79s .13s forwards;
			-webkit-animation: 	beacon-grow-fade .79s .13s forwards;
		}
	.content-beacon:before {
		border-radius: 50%;
		border: 5px solid rgba( 123, 194, 201, .50);
		content: '';
		display: block;
		height: 42px;
		left: 50%;
		margin: -21px 0 0 -21px;
		position: absolute;
		top: 50%;
		opacity: 0;
		width: 42px;
		transform: 			scale(.8);
		-webkit-transform: 	scale(.8);
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
		.beacon-triggered .content-beacon:before {
			animation: 			beacon-grow-fade .54s 0s forwards;
			-webkit-animation: 	beacon-grow-fade .54s 0s forwards;
		}
	.content-beacon .beacon-core {
		position: absolute;
		top: 50%;
		left: 50%;
		height: 18px;
		width: 18px;
		border-radius: 50%;
		background: #7bc2c9;
		margin: -9px 0 0 -9px;
		opacity: 0;
  	}
	.beacon-triggered .content-beacon .beacon-core {
			animation: 			division-beacon .8s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
			-webkit-animation: 	division-beacon .8s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
		}
	@keyframes division-beacon {
		to { 
			opacity: 1;
			transform: 	scale(1);
		}
	}
	@-webkit-keyframes division-beacon {
		to { 
			opacity: 1;
			-webkit-transform: 	scale(1);
		}
	}
	@keyframes beacon-grow-fade {
		to { 
			opacity: 1;
			transform: 	scale(1);
		}
	}
	@-webkit-keyframes beacon-grow-fade {
		to { 
			opacity: 1;
			-webkit-transform: 	scale(1);
		}
	}

/** Modified Content Beacons */
.chapter-header .content-beacon .beacon-core,
.underwater .content-beacon .beacon-core {
	background: #97d8e2;
}
.chapter-header .content-beacon .beacon-wrapper,
.underwater .content-beacon .beacon-wrapper {
	border-color: rgba( 151, 216, 226, .45);
}
.chapter-header .content-beacon:before,
.underwater .content-beacon:before {
	border-color: rgba( 151, 216, 226, .7);
}
.underwater .division-beacon .beacon-wrapper {
	background: #97d8e2;
}

/** Beacon Stroke Transition */
.reveal-beacon-wrapper {
	position: relative;
}
	.reveal-stroke {
		background: #9f9e9e;
		position: absolute;
	}

	/** Horizontal */
		.horizontal-reveal-beacon-wrapper .reveal-stroke {
			height: 2px;
			width: 0;
			top: 50%;
			margin-top: -1px;
			transition: 		width .88s 0s;
			-webkit-transition: width .88s 0s;
		}
			.horizontal-reveal-beacon-wrapper .reveal-stroke-left {
				right: 50%;
				margin-right: 42px;
			}
			.horizontal-reveal-beacon-wrapper .reveal-stroke-right {
				left: 50%;
				margin-left: 42px;
			}
			.beacon-triggered .horizontal-reveal-beacon-wrapper .reveal-stroke {
				width: 514px;
			}
			.beacon-triggered .half-horizontal-beacon .reveal-stroke {
				width: 230px;
			}

	/** Vertical */
		.vertical-reveal-beacon-wrapper {
			position: absolute;
			height: 440px;
			top: 50%;
			transform: translateY(-50%);
			-webkit-transform: translateY(-50%);
		}
			.segment-right .vertical-reveal-beacon-wrapper {
				left: 0;
			}
			.segment-two-column .vertical-reveal-beacon-wrapper {
				right: 50%;
			}
		.vertical-reveal-beacon-wrapper .content-beacon {
			top: 50%;
			margin: -32px -32px 0 0 ;
			position: absolute;
			right: 50%;
		}
			.segment-left .vertical-reveal-beacon-wrapper {
				right: 0;
			}
		.vertical-reveal-beacon-wrapper .reveal-stroke {
			height: 0;
			width: 2px;
			left: 50%;
			margin-left: -1px;
			transition: 		height .88s 0s;
			-webkit-transition: height .88s 0s;
		}
			.vertical-reveal-beacon-wrapper .reveal-stroke-top {
				bottom: 50%;
				margin-bottom: 42px;
			}
			.vertical-reveal-beacon-wrapper .reveal-stroke-bottom {
				top: 50%;
				margin-top: 42px;
			}
		.beacon-triggered .vertical-reveal-beacon-wrapper .reveal-stroke {
			height: 178px;
		}

/** Amelie Reveal Beacon */
.amelie-beacon-wrapper {
	height: 244px;
}
.beacon-triggered .amelie-beacon-wrapper .reveal-stroke {
	height: 80px;
}

/**Reveal Stroke */
.reveal-stroke-wrapper {
	position: relative;
}
.horizontal-reveal-stroke-wrapper .reveal-stroke {
	height: 2px;
	width: 0;
	top: 50%;
	margin-top: -1px;
	transition: 		width .88s 0s;
	-webkit-transition: width .88s 0s;
}
.horizontal-reveal-stroke-wrapper .reveal-stroke-left {
	right: 50%;
}
.horizontal-reveal-stroke-wrapper .reveal-stroke-right {
	left: 50%;
}
.beacon-triggered .horizontal-reveal-stroke-wrapper .reveal-stroke {
	width: 556px;
}

/**Trigger Segment */
.photo-trigger-segment .opacity-target,
.trigger-segment .opacity-target {
	opacity: 0;
	transition: 		opacity .83s .25s cubic-bezier(0.250, 0.460, 0.450, 0.940);
	-webkit-transition: opacity .83s .25s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
	.chapter-1-intro .opacity-target {
		transition: 		opacity .83s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);
		-webkit-transition: opacity .83s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);
	}
	.photo-trigger-segment.triggered .opacity-target,
	.trigger-segment.triggered .opacity-target {
		opacity: 1
	}

/** Image break */
.image-break {
	clear: both;
	margin-bottom: 84px;
	position: relative;
}
	.image-break .horizontal-reveal-beacon-wrapper {
		margin-bottom: -32px;
		z-index: 2;
	}
	.image-break .horizontal-reveal-stroke-wrapper {
		z-index: 2;
	}
	.image-break .figure {
		display: block;
	}
	.image-break .figure .image {
		position: relative;
		z-index: 1;
	}
	.image-break .figure .image img {
		display: block;
		width: 100%;
		height: auto;
		position: relative;
	}
		.image-break .figure .image .overlay {
			background-size: 100% auto;
			background-position: center top;
			background-repeat: no-repeat;
			background-color: ;
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
		}
		.image-break .figure .image .overlay .dot-matrix {
			background: url(../images/bg/dot-matrix-photo.png) 0 0 repeat;
			position: relative;
			height: 100%;
			width: 100%;
		}
	.image-break .figure .caption {
		display: block;
		padding-top: 26px;
	}
		.image-break .figure .caption p {
			color: #817f7f;
			display: block;
			font-family: 'wf_segoe-ui_normal', sans-serif;
			font-size: 13px;
			line-height: 20px;
			max-width: 33%;
			padding-left: 14px;
		}

/** Segments */
.segment {
	clear: both;
	margin-bottom: 84px;
	padding: 0 14px;
	position: relative;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.segment-center {
	margin: 0 auto 84px;
}
.segment-left {
	padding-right: 65px;
}
	.segment-left .vertical-align-cell,
	.left-column .vertical-align-cell {
		margin-right: 65px;
	}
.segment-right {
	float: right;
	padding-left: 65px;
}
	.segment-right .vertical-align-cell {
		margin-right: 14px;
	}
.segment-half {
	width: 50%;
}
.segment-third {
	width: 410px;
}
	.segment-third.segment-right {
		padding-left: 44px;
	}	
.standard-transition-segment,
.standard-transition-segment .left-column,
.standard-transition-segment .right-column {
	height: 440px;
}
.vertical-align-cell {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.segment p:last-of-type {
	margin-bottom: 0;
}
.segment-two-column .left-column {
	float: left;
	padding-right: 52px;
	position: relative;
	width: 50%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.segment-two-column .right-column {
	float: right;
	padding-left: 52px;
	position: relative;
	width: 50%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
/** Illustration Break */
.illustration-break {
	background-repeat: no-repeat;
	background-position: center top;
	margin-bottom: 84px;
	width: 100%;
}

/** Chapter 1 - Subjective Prologue */
.chapter.chapter-most-subjective-prologue {
	margin-top: 0;
	padding: 185px 0 0;
}
.chapter-most-subjective-prologue .chapter-1-intro {
	margin-bottom: 140px;
}
	.chapter-most-subjective-prologue .chapter-1-intro .reveal-beacon-wrapper {
		margin-bottom: 98px;
	}
	.chapter-most-subjective-prologue .chapter-1-intro h2 {
		margin-bottom: 20px;
	}
.chapter-most-subjective-prologue .headphone-segment .left-column {
	height: 100%;
}
.chapter-most-subjective-prologue .headphone-segment .right-column {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.pilot-image-break .figure .image .overlay {
	background-image: url(../images/chapters/most-subjective-prologue/microsofts-3d-soundscape-technology-pilot-program-overlay.jpg);
}
.chapter-most-subjective-prologue .street-segment .left-column {
	height: 600px;
}
.chapter-most-subjective-prologue .street-illustration-break {
	background-image: url(../images/chapters/most-subjective-prologue/street-dot-shading-2.png);
	background-repeat: no-repeat;
	background-position: 0 34px;
	height: 458px;
	width: 900px;
	position: absolute;
	right: 0;
}
	.chapter-most-subjective-prologue .street-illustration-break .restaurant-illustration {
		position: absolute;
		left: -21px;
		top: 98px;
	}
	.chapter-most-subjective-prologue .street-illustration-break .shop-illustration {
		position: absolute;
		top: 0;
		left: 364px;
	}
	.chapter-most-subjective-prologue .street-illustration-break .bus-stop-illustration {
		position: absolute;
		left: 700px;
		top: 65px;
	}

.chapter-most-subjective-prologue .bus-illustration-break {
	background-image: url(../images/chapters/most-subjective-prologue/bus-dot-shading.png);
	background-position: center 48px;
}
	.chapter-most-subjective-prologue .bus-illustration-break #bus {
		display: block;
		margin: 0 auto;
		height: 712px;
		width: 534px;
	}
.most-subjective-prologue-conclusion {
	font-size: 0;
	z-index: 2;
	margin-bottom: 0;
}
.most-subjective-prologue-conclusion .left-column,
.most-subjective-prologue-conclusion .right-column {
	float: none;
	display: inline-block;
	vertical-align: top;
}
.chapter-most-subjective-prologue .independence-day-video {
	padding-top: 1px;
	position: relative;
	z-index: 1;
}
	.chapter-most-subjective-prologue .independence-day-video .inner {
		position: relative;
	}
	.chapter-most-subjective-prologue .independence-day-video #video-frame {
		display: block;
		margin: 0 auto;
		width: 100%;
		height: auto;
	}
		.chapter-most-subjective-prologue .independence-day-video .video-wrapper {
			position: absolute;
			top: 40.8%;
			left: 50%;
			overflow: hidden;
		}
			.chapter-most-subjective-prologue .independence-day-video .video-wrapper .play-video {
				position: absolute;
				top: 0;
				height: 100%;
				width: 100%;
			}
				.chapter-most-subjective-prologue .independence-day-video .video-wrapper .play-video img {
					height: auto;
					width: 100%;
					display: block;
				}
				.chapter-most-subjective-prologue .independence-day-video .video-wrapper .play-video span {
					font-family: 'wf_segoe-ui_light', sans-serif;
					font-size: 70px;
					line-height: 60px;
					text-transform: uppercase;
					color: #fff;
					text-align: center;
					display: block;
					position: absolute;
					top: 50%;
					width: 100%;
					margin-top: -39px;
				}
				.chapter-most-subjective-prologue .independence-day-video .video-wrapper .play-video span:before {
					background-position: -500px 0;
					display: inline-block;
					height: 78px;
					margin-right: 28px;
					vertical-align: top;
					width: 78px;
				}
					.chapter-most-subjective-prologue .independence-day-video .video-wrapper .play-video:hover span:before {
						background-position: -400px 0;
					}
			.chapter-most-subjective-prologue .independence-day-video iframe {
				display: block;
				position: relative;
				height: 100%;
				width: 100%;
				display: none;
				margin: -1px 0 0 -1px;
				z-index: 1;
			}

/** Chapter 2 - Here we go */
.chapter-here-we-go .amelie-illustration {
	margin: 0 auto;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.chapter-here-we-go .lollypop-segment,
.chapter-here-we-go .lollypop-segment .left-column,
.chapter-here-we-go .lollypop-segment .right-column {
	height: 373px;
}	
	.chapter-here-we-go .lollypop-segment .amelie-illustration {
		background: url(../images/chapters/here-we-go/lollypop-dot-shading.png) 90px 36px no-repeat;
		width: 498px;
		height: 373px;
	}
.chapter-here-we-go .butcher-segment,
.chapter-here-we-go .butcher-segment .left-column,
.chapter-here-we-go .butcher-segment .right-column {
	height: 357px;
}	
	.chapter-here-we-go .butcher-segment .left-column {
		width: 33%;
	}
	.chapter-here-we-go .butcher-segment .right-column {
		width: 67%;
	}
		.chapter-here-we-go .butcher-segment .amelie-illustration {
			background: url(../images/chapters/here-we-go/butcher-dot-shading.png) 76px 0 no-repeat;
			width: 566px;
			height: 357px;
			padding-top: 14px;
		}
	.chapter-here-we-go .butcher-segment .vertical-reveal-beacon-wrapper {
		left: 33%;
		right: auto;
	}
.chapter-here-we-go .ticket-segment,
.chapter-here-we-go .ticket-segment .left-column,
.chapter-here-we-go .ticket-segment .right-column {
	height: 244px;
}	
	.chapter-here-we-go .ticket-segment .amelie-illustration {
		background: url(../images/chapters/here-we-go/ticket-dot-shading.png) 28px 0 no-repeat;
		width: 381px;
		height: 211px;
		padding-top: 10px;
		left: 50%;
		margin-left: -190px;
	}
.chapter-here-we-go .jennifer-image-break .figure .image .overlay {
	background-image: url(../images/chapters/here-we-go/jennifer-bottom-3d-soundscap-technology-overlay.jpg);
}
.chapter-here-we-go .jennifer-bottom-segment .vertical-align-cell {
	min-height: 270px;
}
.chapter-here-we-go .terry-image-break .figure .image .overlay {
	background-image: url(../images/chapters/here-we-go/terry-brewell-mobility-aid-overlay.jpg);
}
.chapter-here-we-go .terry-brewell-segment .vertical-align-cell {
	min-height: 330px;
}
.chapter-here-we-go .here-we-go-conclusion .right-column {
	height: 780px;
}

/** Chapter 3 - Mother of invention */
.chapter.chapter-mother-of-invention {
	padding-bottom: 0;
}
.stakeholder-rotator {
	background: #fafafa;
	border: none;
	border-radius: 0;
	box-shadow: none;
	clear: both;
	margin: 0 0 84px;
	position: relative;
}
	.stakeholder-rotator .slides > li .figure {
		display: block;
	}
	.stakeholder-rotator .slides > li .figure img {
		display: block;
	}
		.stakeholder-rotator .slides > li .figure .caption {
			display: block;
			position: absolute;
			top: 0;
			color: #fff;
			width: 33%;
			height: 100%;
			background: rgb(84,186,200);
			background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNTRiYWM4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzcyYzNiOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
			background: -moz-linear-gradient(45deg,  rgba(84,186,200,1) 0%, rgba(114,195,184,1) 100%);
			background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(84,186,200,1)), color-stop(100%,rgba(114,195,184,1)));
			background: -webkit-linear-gradient(45deg,  rgba(84,186,200,1) 0%,rgba(114,195,184,1) 100%);
			background: -o-linear-gradient(45deg,  rgba(84,186,200,1) 0%,rgba(114,195,184,1) 100%);
			background: -ms-linear-gradient(45deg,  rgba(84,186,200,1) 0%,rgba(114,195,184,1) 100%);
			background: linear-gradient(45deg,  rgba(84,186,200,1) 0%,rgba(114,195,184,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54bac8', endColorstr='#72c3b8',GradientType=1 );
		}
			.stakeholder-rotator .slides > li .figure .caption .dot-matrix {
				background: url(../images/bg/dot-matrix-header.png) center center repeat;
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
			}
			.stakeholder-rotator .slides > li .figure .caption .inner {
				width: 394px;
				right: 0;
				position: absolute;
				top: 50%;
				padding: 0 56px;
				box-sizing: border-box;
				-moz-box-sizing: border-box;
				transform: translateY(-50%);
				-webkit-transform: translateY(-50%);
			}
				.stakeholder-rotator .slides > li .figure .caption q {
					display: block;
					font-family: 'wf_segoe-ui_semilight', sans-serif;
					font-size: 24px;
					line-height: 38px;
					margin-bottom: 28px;
				}
				.stakeholder-rotator .slides > li .figure .caption cite {
					display: block;
					font-size: 16px;
					line-height: 24px;
					max-width: 220px;
				}
.stakeholder-rotator .flex-direction-nav a {
	width: 55px;
	height: 95px;
	margin: -47px 0 0;
	background: url(../images/sprites/independence-day-sprite.png) -600px 0 no-repeat;
	opacity: 1 !important;
}
	.backgroundsize .stakeholder-rotator .flex-direction-nav a {
		background-image: url(../images/sprites/independence-day-sprite-retina.png);
		background-size: auto 100px;
	}
	.stakeholder-rotator .flex-direction-nav .flex-prev {
		left: 50px;
	}
	.stakeholder-rotator .flex-direction-nav .flex-next {
		background-position: -700px 0;
		right: 50px;
	}

/** Ocean */
.ocean-break .waves {
	height: 48px;
	width: 100%;
	background: url(../images/chapters/mother-of-invention/wave-crest.png) repeat-x;
}
.ocean-break .reveal-stroke {
	background: #97d8e2;
	background: rgba( 151, 216, 226, .45);
}
.ocean-break .underwater {
	overflow: hidden;
	position: relative;
	padding: 160px 0 225px;
	width: 100%;
	background: rgb(122,195,203);
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhYzNjYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDFiMmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(122,195,203,1) 0%, rgba(0,27,43,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,195,203,1)), color-stop(100%,rgba(0,27,43,1)));
	background: -webkit-linear-gradient(top,  rgba(122,195,203,1) 0%,rgba(0,27,43,1) 100%);
	background: -o-linear-gradient(top,  rgba(122,195,203,1) 0%,rgba(0,27,43,1) 100%);
	background: -ms-linear-gradient(top,  rgba(122,195,203,1) 0%,rgba(0,27,43,1) 100%);
	background: linear-gradient(to bottom,  rgba(122,195,203,1) 0%,rgba(0,27,43,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ac3cb', endColorstr='#001b2b',GradientType=0 );
}
	.ocean-break .underwater .central-column {
		position: relative;
		z-index: 2;
	}
	.ocean-break .underwater .pull-quote {
		margin-bottom: 84px;
	}
	.ocean-break .underwater p {
		color: #fff;
	}
	.ocean-break .underwater .bubbles {
		background: url(../images/chapters/mother-of-invention/bubble-repeat.png) repeat-y;
		width: 3px;
		height: 100px;
		position: absolute;
		top: 110%;
		z-index: 1;
		transition: top 20s;
		-webkit-transition: top 20s;
	}
	.ocean-break .underwater .bubbles.triggered {
		top: -10%;
	}

/** Chapter 4 - It takes a village */
.chudge-image-break .figure .image .overlay {
	background-image: url(../images/chapters/it-takes-a-village/jarnail-chudge-3d-soundscape-technology-field-testing-overlay.jpg);
}

/** Chapter 5 - Opportunities */
.miller-image-break .figure .image .overlay {
	background-image: url(../images/chapters//opportunities/amos-miller-visual-impairment-technology-overlay.jpg);
}
.chapter-opportunities .market-illustration-break {
	background-image: url(../images/chapters/opportunities/market-dot-shading.png);
	padding-top: 8px;
	margin-bottom: 84px;
}
	.chapter-opportunities .market-illustration-break .animated-illustration-large {
		display: block;
		margin: 0 auto;
	}
.chapter-opportunities .photo-credits {
	float: right;
	padding-right: 14px;
	text-align: right;
}
	.chapter-opportunities .photo-credits cite {
		color: #454242;
		display: block;
		font-family: 'wf_segoe-ui_normal', sans-serif;
		font-size: 13px;
		line-height: 21px;
	}