html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
body {
	margin: 0;
	padding: 67px 0 0 0;
	color: #333;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}
main {
	margin: 0;
	padding: 0;
}
.content {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	max-width: 1200px;
}

#hero .image img,
#facts .photos img {
	vertical-align: bottom;
}

#hero {
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url("../img/hero_bg.png");
}
#hero h1 {
	margin: 0;
	color: #333;
	font-size: 5.6em;
	font-weight: 300;
	line-height: 1.0;
	text-transform: uppercase;
}
#hero h1 span:nth-child(2) {
	display: block;
	color: #19377c;
	font-weight: 700;
}
#hero h3 {
	margin: 1em 0;
	padding: 1em 0.5em 1em 0.1em;
	border-top: 1px solid rgba(20, 20, 20, 0.2);
	border-bottom: 1px solid rgba(20, 20, 20, 0.2);
	font-size: 1.8em;
	font-weight: 400;
	line-height: 1.8;
}
#hero .bio {
	padding: 0 1em;
}
#hero .image {
	flex-grow: 1;
	padding-top: 2em;
	text-align: right;
}
#hero .social {
	margin: 4em 0;
}
#hero .social a {
	display: inline-block;
	transform: perspective(1px) translateZ(0);
}
#hero .social a:hover,
#hero .social a:focus
#hero .social a:active {
	animation-name: boing;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
}
@keyframes boing {
	50% {
		transform: scale(1.2);
	}
}
#hero .social a img {
	margin-right: 2.3em;
}

#facts {
	background-color: #182431;
}
#facts .copy {
	padding: 1em 4em;
	color: #fff;
}
#facts .copy h2 {
	margin: 0 0 0.8em 0;
	padding: 0 0 0.6em 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.7);
	font-size: 2.7em;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 6px;
}
#facts .copy h2 span {
	padding: 0 7px 0 14px;
	color: #192531;
	font-style: italic;
	font-size: 130%;
	background-color: #fff;
	border-radius: 4px;
}
#facts .copy li {
	margin: 0 0 1em 0;
	font-size: 1.4em;
	line-height: 1.6;
}

#pullquote {
	padding: 8em 0;
	text-align: center;
}
#pullquote h2 {
	max-width: 70%;
	margin: 1em auto 2em auto;
	color: #535353;
	font-family: 'Merriweather', serif;
	font-size: 2.6em;
	font-style: italic;
	line-height: 1.7;
}
#pullquote h3 {
	max-width: 80%;
	margin: 1.4em auto 0 auto;
	font-size: 1.4em;
	font-weight: 300;
	font-style: italic;
	line-height: 1.3;
}
#pullquote img {
	transform: scale(0.7);
}
#pullquote hr {
	width: 140px;
	height: 6px;
	background-color: #19377c;
}

#highlight {
	margin: 10vh 0;
	width: 100%;
	height: 80vh;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
}

#anecdote {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url("../img/detail_bg.png");
	border-top: 4px solid #768592;
	border-bottom: 4px solid #768592;
	color: rgba(255, 255, 255, 0.9);
}
#anecdote .photo {
	align-self: stretch;
	min-height: 400px;
	width: 400px;
	background-size: cover;
	background-position: center top;
}
#anecdote .copy {
	max-width: 500px;
	margin: 3em 1em;
	padding: 0 1.4em;
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	text-align: center;
}
#anecdote p {
	margin: 1em 0;
	font-size: 1.6em;
	line-height: 1.4;
}

#vignette {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 70vh;
	padding: 7vh 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
#vignette p {
	margin: 0.9em auto;
	padding: 0 0.4em;
	max-width: 800px;
	color: #fff;
	font-family: 'Merriweather', serif;
	font-size: 2em;
	font-style: italic;
	line-height: 1.6;
	text-align: center;
	text-shadow: 1px 1px 0px rgba(10, 10, 10, 1);
}

#showcase {
	width: 100%;
	height: 437px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

#filmstrip {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	background: #20406a;
	border-top: 4px solid #20406a;
	border-bottom: 4px solid #20406a;
}
#filmstrip div {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
#filmstrip div:not(:first-child) {
	border-left: 4px solid #20406a;
}
#filmstrip div:not(:last-child) {
	border-right: 4px solid #20406a;
}

#recently {
	background-color: #fbfbfb;
}
#recently .content {
	flex-direction: column;
}
#recently h2 {
	max-width: 1200px;
	margin: 0 auto 1em auto;
	padding: 1.6em 0 0.6em 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.5);
	font-size: 2.7em;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 6px;
}
#recently article {
	width: 100%;
	margin-bottom: 3em;
	padding-bottom: 3em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
#recently article:last-of-type {
	border-bottom: none;
}
#recently article a {
	display: flex;
	position: relative;
	text-decoration: none;
	transform: perspective(1px) translateZ(0);
	transition-property: color;
	transition-duration: 0.3s;
}
#recently article a:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #e7e7e7;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition-property: transform;
	transition-duration: 0.5s;
	transition-timing-function: ease-out;
}
#recently article a:hover,
#recently article a:focus,
#recently article a:active {
	color: #fff;
}
#recently article a:hover:before,
#recently article a:focus:before,
#recently article a:active:before {
	transform: scaleX(1);
}
#recently article a img {
	flex-shrink: 0;
	align-self: center;
	display: inline-block;
	width: 440px;
	height: auto;
	border: 1px solid rgba(0, 0, 0, 0.5);
}
#recently article a .copy {
	padding: 1em 2em;
}
#recently article a .copy h3 {
	margin: 0.8em 0 0.8em 0;
	color: #192531;
	font-size: 2em;
	line-height: 1.3;
}
#recently article a .copy h6 {
	display: inline-block;
	margin: 1em 0 0.1em 0;
	color: #909192;
	font-size: 1em;
	font-weight: 400;
	text-transform: uppercase;
}
#recently article a .copy p {
	color: #535353;
	font-size: 1.2em;
}

@media (max-width: 1024px) {
	body {
		font-size: 15px;
	}
	.content {
		flex-direction: column;
	}
	.content div {
		width: 100% !important;
	}

	#hero .bio,
	#anecdote .copy {
		background: #fff;
		text-align: center;
	}

	#hero .image img,
	#facts img,
	#anecdote img,
	#recently article a img {
		width: 100%;
		height: auto;
		margin-left: 0;
		margin-right: 0;
	}

	#hero h1 span:nth-child(2) {
		display: inline;
	}
	#hero h3 {
		max-width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
	#hero .content {
		flex-direction: column-reverse;
	}
	#hero .bio {
		padding: 3em 1.2em 0.8em 1.2em;
	}
	#hero .image {
		max-height: 60vh;
		border-bottom: 2px solid #182431;
		overflow: hidden;
	}
	#hero .social {
		display: flex;
		justify-content: space-around;
		max-width: 490px;
		margin-left: auto;
		margin-right: auto;
	}
	#hero .social a img {
		margin-right: 0;
	}

	#facts {
		border-top: 3px solid #182431;
		border-bottom: 3px solid #182431;
	}
	#facts .photos {
		background-color: #1d3b78;
	}
	#facts .copy {
		padding: 3em 1.2em;
	}

	#highlight {
		height: 50vh;
		background-size: contain;
	}

	#anecdote .photo {
		background-size: inherit;
		background-repeat: no-repeat;
	}
	#anecdote .copy {
		max-width: none;
		margin: 0;
		padding: 1.2em 1.8em;
		color: #333;
	}

	#vignette {
		min-height: unset;
	}
	#vignette p {
		padding: 0 1.2em;
	}

	#recently h2 {
		margin: 1em 0 0 0;
		padding: 0.6em 0.8em 0.5em 0.8em;
		border-top: 1px solid rgba(20, 20, 20, 0.3);
		border-bottom: none;
	}
	#recently .content {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-evenly;
 	}
	#recently article {
		flex-basis: 44%;
		border-bottom: none;
	}
	#recently article a {
		flex-direction: column;
	}
	#recently article a h3 {
	}
	#recently article a h6 {
		display: none;
	}
	#recently article a div {
		padding: 0 1.6em;
	}
}

@media (max-width: 768px) {
	body {
		font-size: 12px;
	}

	#hero h1 {
		font-size: 3.4em;
	}
	#hero h3 {
		font-size: 1.5em;
		line-height: 1.5;
	}
	#hero .social img {
		width: 90%;
		height: auto;
	}

	#pullquote h2 {
		max-width: 88%;
		font-size: 2em;
	}

	#showcase {
		height: 350px;
	}

	#vignette p {
		max-width: 74%;
		font-size: 1.6em;
	}

	#highlight {
		display: none;
	}

	#filmstrip {
		flex-direction: column;
	}
	#filmstrip div {
		width: 100% !important;
		height: 270px;
	}
	#filmstrip div:not(:first-child):not(:last-child) {
		margin: 1.6em 0;
	}

	#recently article {
		flex-basis: 100%;
		margin-bottom: 0;
		padding-bottom: 0;
	}
	#recently article a img {
		border-left: none;
		border-right: none;
	}
}