html, body {
	font-family: "Aileron", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-size: 62.5%;
	line-height: 2.2rem;
	font-weight: 400;
}

/**
 * Typography
 */

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	margin: 0;
}

h1 {
	font-size: 5.6rem;
	line-height: 6rem;
	margin: 0 0 2.4rem 0;
	color: #FFFFFF;
}

h3 {
	font-size: 2rem;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	color: #D0D2D1;
	text-transform: uppercase;
	letter-spacing: .1rem;
	margin-bottom: 1.2rem;
}

p {
	font-size: 1.6rem;
	line-height: 1.5;
	letter-spacing: .05rem;
	margin: 0 0 1.2rem 0;
	color: rgb(184, 184, 184);
}

small {
	font-size: 1.2rem;
}

a {
	text-decoration: none;
}

strong { color: white; }

/**
 * Header
 */
header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 100vh;
	width: 100%;
	flex-direction: column;
	text-align: center;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0d1712+0,3f4743+100 */
	background: #0d1712; /* Old browsers */
	background: -moz-linear-gradient(45deg, #0d1712 0%, #3f4743 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, #0d1712 0%,#3f4743 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, #0d1712 0%,#3f4743 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d1712', endColorstr='#3f4743',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

header .logo {
	min-width: 320px;
	width: 50%;
}


/**
 * Navigation
 */

nav {
	display: flex;
	width: 100%;
	height: 64px;
	align-items: center;
	justify-content: center;
}

nav a {
	font-size: 1.6rem;
	letter-spacing: .05rem;
	text-transform: uppercase;
	text-decoration: none;
	color: #B5B5B5;
	margin: 0 2.4rem;
	transition: .3s color; 
}

nav a:hover { color: white; }


/**
 * Section styling
 */
section {
	position: relative;
	display: flex;
	flex-wrap:  wrap;
	min-height: 640px;
}

section > div {
	display: flex;
	flex-direction: column;
	position: relative;
	flex-basis: 320px; /* Minimal width (for mobile) */
	flex-grow: 1;
	flex-shrink: 1;
	padding: 2.4rem;

	align-items: flex-start;
	justify-content: center;
}

section > div:first-child {
	max-width: 600px;
}

section > div > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 320px;
	height: 100%;
	object-fit: cover;
}


a.button {
	border-radius: 2.1rem;
	height: 4.2rem;
	padding: 0 5.2rem;
	letter-spacing: .05rem;
	text-transform: uppercase;
	background-color: #64F0B6;
	color: black;
	font-weight: 700;
	text-decoration: none;
	font-size: 1.2rem;
	line-height: 4.2rem;
	margin-bottom: 4.8rem;
}

.fix-width {
	max-width: 640px;
	margin: 0 auto;
}

.content {
	padding: 2.4rem 1.2rem;
}

.content p {
	text-align: left;
}