section.story
{
	background: #09172d;

	color: #b3b3b3;

	display: flex;
	 align-items: flex-end;
	 flex-flow: column nowrap;
	 justify-content: flex-start;
	margin: 0 auto;
	padding: 100px 0;
	position: relative;
	 z-index: 2;
	
	width: 100%;
}

section.story * 
{
	position: relative;
}

section.story .chapter
{
	display: flex;
	 align-items: flex-end;
	 flex-flow: column nowrap;
	 justify-content: flex-start;
	margin: 0 auto;
	overflow: hidden;
	padding: 25px calc(50vw - (976px / 2));
	position: relative;

	width: 100%;
}

/* Backgrounds */
	section.story .chapter .backgrounds
	{
		position: fixed;
		 top: 0;
		 left: 0;
		 z-index: 1;
		
		height: 100%;
		width: 100%;
	}

	section.story .chapter .backgrounds .background-set
	{
		position: absolute;
		 top: 0;
		 left: 0;
		
		height: 100%;
		width: 100%;
	}

	section.story .chapter .backgrounds .background-set .background
	{
		background: content-box transparent url() 50% 50% / cover no-repeat;
		opacity: 0;
		transition: opacity .75s ease;

		box-sizing: border-box;
		overflow: hidden;
		padding: 0 calc(50vw - (2560px / 2));
		position: absolute;
		 top: 0;
		 left: 0;
		 z-index: 1;

		height: 100%;
		width: 100%;
	}

	section.story .chapter .backgrounds .background-set .background:before
	{
		background: #09172d;
		opacity: .8;

		position: absolute;
		 top: 0;
		 left: 0;
		 z-index: 2;
		
		height: 100%;
		width: 100%;

		content: "";
	}

	section.story .chapter .backgrounds .background-set.active .background
	{
		opacity: 1;
	}

/* Scenes */
	section.story .chapter .scene
	{
		color: #b3b3b3;

		display: flex;
		 align-items: flex-start;
		 flex-flow: row nowrap;
		 justify-content: flex-start;
		margin: 75px auto;
		z-index: 2;
		
		width: 100%;
	}

	/* Content */
		section.story .chapter .scene .content
		{
			box-sizing: border-box;
			padding-right: 100px;

			width: 50%;
		}

		section.story .chapter .scene .content .title
		{
			font: normal 700 16px/30px "Helvetica Neue", Helvetica, sans-serif;
			text-transform: none;
			color: #e5e5e5;
		}

		section.story .chapter .scene .content p
		{
			font: normal 400 16px/30px "Helvetica Neue", Helvetica, sans-serif;

			margin: 0 0 30px;
		}

		section.story .chapter .scene .content p a
		{
			transition: color .25s ease;

			color: inherit;
			font-weight: 700;
			text-decoration: underline;
		}

		section.story .chapter .scene .content p a:hover,
		section.story .chapter .scene .content p a:focus
		{
			color: #efefef;
		}
	
		/* Videos */
			section.story .chapter .scene.has-video .content:only-child
			{
				padding-right: 0;

				width: 100%;
			}

			section.story .chapter .scene .content .video
			{
				display: block;
				margin: 0;

				width: 100%;
			}

			section.story .chapter .scene .content .video .video-info
			{
				display: block;

				width: 100%;
			}

			section.story .chapter .scene .content .video .video-info .video-title
			{
				font: normal 700 28px/1 "Barlow Condensed", sans-serif;
				letter-spacing: .01em;

				display: block;
				margin-bottom: 20px;
			}

			section.story .chapter .scene .content .video .video-embed
			{
				display: block;
				margin: 15px 0;
				padding: 50% 0 0;
				position: relative;

				width: 100%;
			}

			section.story .chapter .scene .content .video .video-embed iframe
			{
				position:absolute;
				 top:0;
				 left:0;
				 z-index: 2;

				height:100%;
				width:100%;
			}

			section.story .chapter .scene .content .video .transcript-link
			{
				transition: color .25s ease;

				color: #b3b3b3;
				font: normal 700 14px/1.87 "Helvetica Neue", Helvetica, sans-serif;
				text-decoration: underline;

				clear: both;
				display: block;
			}

			section.story .chapter .scene .content .video .transcript-link:hover,
			section.story .chapter .scene .content .video .transcript-link:focus
			{
				color: #efefef;
			}

	/* Inset Images */
		section.story .chapter .scene .inset
		{
			width: 50%;
		}

		section.story .chapter .scene .inset:only-child
		{
			margin-left: auto;
		}

		section.story .chapter .scene .inset:before
		{
			background: transparent url(../../../images/slats-blue.png) 50% 50% repeat;

			position: absolute;
			 top: 20px;
			 left: 20px;
			 z-index: 1;

			height: 100%;
			width: 100%;

			content: "";
		}

		section.story .chapter .scene .inset img
		{
			margin: 0;
			z-index: 2;

			max-width: 100%;
			width: 100%;
		}

		section.story .chapter .scene .inset .video
		{
			width: 50%;
		}

/* First Scene  */
	/* Content */
		section.story .chapter .scene:first-of-type .content .title
		{
			color: #e5e5e5;
			font: normal 600 34px/1.25 "Barlow Condensed", sans-serif;
			letter-spacing: .015em;

			box-sizing: border-box;
			margin: 0 0 30px;
			padding: 0 0 30px;
			position: relative;

			width: 75%;
		}

		section.story .chapter .scene:first-of-type .content .title:before
		{
			content: none;
		}

		section.story .chapter .scene:first-of-type .content .title:after
		{
			transform: skew(-20deg);
			transform-origin: left bottom;

			border-bottom: #f8be21 solid 6px;
			padding: 0 3px;
			position: absolute;
			 bottom: 0;
			 left: -3px;
			 z-index: 0;

			height: 0;
			width: 40%;

			content: "";
		}

@media only screen and (max-width: 1176px)
{
	section.story
	{
		padding: 25px 0;
	}

	section.story .chapter
	{
		padding: 15px 30px;
	}
	
	section.story .chapter .scene
	{
		flex-direction: column;
		margin-bottom: 60px;
	}
	
	section.story .chapter .scene + .scene
	{
		margin-top: 0;
	}
	
	section.story .chapter .scene .content 
	{
		padding: 0;

		width: 100%;
	}

	section.story .chapter .scene .content .video
	{
		padding-top: 66%;
	}
	
	section.story .chapter .scene .inset
	{
		width: 100%;
	}
}