body
{
	counter-reset: split_content_iterator;
}

section.split_content
{
	background: #09172d;

	color: rgba(242, 242, 242, 0.9);

	display: flex;
	 align-items: flex-end;
	 flex-flow: column nowrap;
	 justify-content: flex-start;
	margin: 0 auto;
	overflow: hidden;
	padding: 62px calc(50vw - (1176px / 2));
	position: relative;
	 z-index: 2;
}

section.split_content:before
{
	transform: translateX(-50%);

	border-left: #1d2739 solid 1px;
	display: block;
	position: absolute;
	 top: 0;
	 left: 50%;
	 z-index: 0;

	height: 100%;
	width: 0;

	content: "";
}
	
/* Variations */
	/* Light BG */
		section.split_content.light_bg
		{
			background: #132035;
		}

/* Header */
	section.split_content .section_header
	{
		display: flex;
		 align-items: flex-start;
		 flex-flow: row nowrap;
		 justify-content: flex-end;
		margin: 0;
		overflow: visible;
		padding: 150px 0 45px;
		position: relative;
		
		width: 100%;
	}

	section.split_content .section_header:before
	{	
		transform: translateY(0);

		color: #162338;
		font: normal 700 344px/.6325 "Barlow Condensed", sans-serif;
		letter-spacing: -0.01em;
		speak: none;
		
		-webkit-touch-callout: none;
		-ms-user-select: none;
		user-select: none;

		overflow: visible;
		position: absolute;
		 top: 0;
		 right: 90px;
		 z-index: -1;

		counter-increment: split_content_iterator;
		content: counter(split_content_iterator, decimal-leading-zero);
	}

	section.split_content .section_header .eyebrow
	{
		color: #b3b3b3;
		font: normal 400 20px/1 "Barlow Condensed", sans-serif;
		letter-spacing: 0.3em;
		text-align: left;

		box-sizing: border-box;
		margin: 0;
		padding: 0;
		padding-left: 115px;

		width: 50%;
	}

	section.split_content .section_header .eyebrow:before
	{
		content: "/ ";
	}
	
	/* Variations */
		/* Flipped */
			section.split_content.flipped .section_header
			{
				flex-direction: row-reverse;
			}

			section.split_content.flipped .section_header:before
			{
				 right: auto;
				 left: 90px;
			}
	
		/* No Subheads */
			section.split_content.no_subheads .section_header
			{
				speak: none;

				display: none;
				z-index: -1;
			}

/* Content Wrapper */
	section.split_content .content
	{
		display: flex;
		align-items: flex-start;
		 flex-flow: row nowrap;
		 justify-content: flex-end;

		width: 100%;
	}
	
	/* Variations */
		/* Flipped */
			section.split_content.flipped .content
			{
				flex-direction: row-reverse;
			}

/* Content */
	section.split_content .section_content
	{
		color: #b3b3b3;

		box-sizing: border-box;
		padding: 50px 85px 0 100px;
		position: relative;

		width: 50%;
	}

	section.split_content .section_content p
	{
		font: normal 300 16px/1.87 "Helvetica Neue", Helvetica, sans-serif;
		letter-spacing: .01em;

		margin: 1.5em 0;
	}

	section.split_content .section_content p:last-of-type
	{
		margin-bottom: 2em;
	}

	section.split_content .section_content .headline
	{
		color: #e5e5e5;
		font: normal 600 34px/1.25 "Barlow Condensed", sans-serif;
		letter-spacing: .015em;
		
		box-sizing: border-box;
		margin: 0;
		padding: 0 0 30px;
		position: relative;

		width: 75%;
	}

	section.split_content .section_content .headline:after
	{
		transform: skew(-20deg);
		transform-origin: left bottom;

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

		height: 0;
		width: 40%;

		content: "";
	}

	/* History Nav */
		section.split_content nav
		{
			color: #b3b3b3;
			font: normal 300 15px/1 "Helvetica Neue", Helvetica, sans-serif;
			letter-spacing: 0em;

			align-items: center;
			display: flex;
			flex-flow: column nowrap;
			justify-content: flex-start;
			margin: 30px 0;
		}

		section.split_content nav a
		{
			text-decoration: none;

			display: flex;
			 align-items: center;
			 flex-flow: row wrap;
			 justify-content: flex-start;
			margin-bottom: 25px;

			min-height: 32px;
			width: 100%;
		}

		section.split_content nav a .date
		{
			font: normal 500 31px/1 "Barlow Condensed", sans-serif;
			letter-spacing: 0.01em;

			display: block;
			flex-basis: 80px;
		}

		section.split_content nav a .label
		{
			display: block;
			flex-grow: 1;

			width: 70%;
		}

		section.split_content nav a.active
		{
			color: #e5e5e5;
		}

		section.split_content nav a.active .date
		{
			transform: scale(1.25);
			transform-origin: bottom left;
		}

/* Images */
	section.split_content .inset
	{
		position: relative;

		width: 50%;
	}
	
	section.split_content .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.split_content .inset img
	{
		margin: 0;
		position: relative;
		 z-index: 2;

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

	/* Variations */
		/* History Content */
			section.split_content.history_content .inset img:not(.active)
			{
				display: none;
			}

/* Tablet and Mobile */
	@media only screen and (max-width: 1176px)
	{
		section.split_content
		{
			flex-direction: column;
			padding: 20vmin 0;
		}

		section.split_content:before
		{
			content: none;
		}
		
		/* Header */
			section.split_content .section_header
			{
				flex-direction: row;

				padding: 10vmin 30px 5vmin;

				width: 100%;
			}

			section.split_content .section_header:before
			{	
				font-size: 33vmin;

				right: 60px;
			}

			section.split_content .section_header .eyebrow
			{
				font-size: 15px;
				letter-spacing: 0.15em;

				padding: 0;

				width: 60%;
			}
			
			/* Variations */
				/* Flipped */
					section.split_content.flipped .section_header
					{
						flex-direction: row;
					}

					section.split_content.flipped .section_header:before
					{
						 left: auto;
						 right: 60px;
					}

		/* Content Wrapper */
			section.split_content .content
			{
				box-sizing: border-box;
				flex-direction: column-reverse;
				padding: 0 30px;

				width: 100%;
			}
			
			/* Variations */
				/* Flipped */
					section.split_content.flipped .content
					{
						flex-direction: column-reverse;

						width: 100%;
					}

		/* Content */
			section.split_content .section_content
			{
				margin-top: 40px;
				padding: 0;

				width: 100%;
			}

			section.split_content .section_content p
			{
				font-size: 15px;

				margin: 1.25em 0;
			}

			section.split_content .section_content p:last-of-type
			{
				margin-bottom: 2em;
			}

			section.split_content .section_content .headline
			{
				font-size: 26px;

				width: 75%;
			}

			section.split_content .section_content .headline:after
			{
				border-bottom-width: 5px;
			}
			
			/* History Nav */
				section.split_content nav
				{
					box-sizing: border-box;
					flex-flow: row nowrap;
					padding: 0 25px 15vmin;
					position: relative;
				}

				section.split_content nav a
				{
					align-items: flex-end;
					box-sizing: border-box;
					flex: 0 1 33%;
					justify-content: flex-start;
					padding: 0 2.5vmin;
					position: static;
				}

				section.split_content nav a .date
				{
					font-size: 24px;
					vertical-align: baseline;
					flex-basis: 33%;
				}

				section.split_content nav a .label
				{
					opacity: 0;
					transition: all .25s ease;
					font-size: 14px;
					letter-spacing: 0.02em;
					line-height: 17px;
					text-align: left;
					box-sizing: border-box;
					order: 99;
					padding: 0 2.5vmin;
					position: absolute;
					top: 52px;
					left: 25px;
					width: calc(100% - 50px);
				}

				section.split_content nav a.active .date
				{
					font-size: 32px;
				}

				section.split_content nav a.active .label
				{
					opacity: 1;
				}
		
		/* Images */
			section.split_content .inset
			{
				width: 100%;
			}
	}