@import 
	url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');

	* {
		box-sizing: border-box;
	}

	body {
		margin: 0;
		font-family: 'Raleway', sans-serif;
		text-align: center;
	}
		
	img {
	max-width: 100%;
	height: auto;
	}	
	
	.container {
		width: 95%;
		margin: 0 auto;
	}
	
	.clearfix::after,
	section::after,
	footer::after {
		content: '';
		display: block;
		clear: both;
	}
	
	.logo {
		padding-bottom: 15rem;	
	}
	
	/* Column system
	=================*/
	
	[class^=col-] {
		width: 100%;
		margin-top: 1em;
	}
	
	[class^=col-]: first-child {
		margin-top: left: 0;
	}
	
	.col-1 {
		width: 40%;
		float: left;
		padding-right: .5rem;
	}
		
	@media (min-width: 40rem) {
		
		[class^=col-] {
			float: left;
			padding: 0 .5em;
			margin-top: 0;
		}
			
		[class^=col-]: first-child {
			padding: left: 0;
		}
		
		[class^=col-]: last-child {
			padding: right: 0;
		}
		
		.col-3 {
			width: 30%;	
		}
		
		.col-1 {
			width: 50%;	
		}
	}
	
	/* typography
	=================*/
	
	h1 {
		font-weight: 300;
		font-size: 1.5rem;
		margin-top: 0;
	}
	
	
	.title {
		font-size: 2.5rem;
		margin-bottom: 1.75em;
		font-weight: 600;
		margin-top: 1em;
	}
	
	.title span {
		font-weight: 300;
		display: block;
		font-size: .9em;
	}
	
	.unstyled-list {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	
	@media (min-width:55rem) {
		
		p {
			font-size: 1.2rem;
			line-height: 1.6;
		}
		
		.title {
			font-size: 3.7rem;
		}
	}
	
	/* buttons
	=================*/
	
	.button {
		display: inline-block;
		font-size: 1.15rem
		text-decoration: none;
		text-transform: uppercase;
		border-width: 3px;
		border-style: solid;
		padding: .5em 1.75em;
	}
	
	.button-accent {
		color: #f70303;
		border-color: #f70303;
	}
	
	.button-accent:hover,
	.button-accent:focus {
		background: #f70303;
		column-rule: #232323;
	}
	
	@media (min-width: 60rem) {
		.button {
			font-size: 1.5rem;
		}
	}
	
	/* header
	=================*/
	
	header {
		position: absolute;
		margin: 1em;
		left: 0;
		right: 0;
	}
	
	nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	nav li {
		display: inline-block;
		margin: 1em;
	}
	
	nav a {
		font-weight: 900;
		text-decoration: none
		text-transform: uppercase;
		font-size: .8rem;
		padding: .75em;
		color: #fff
	}
	
	nav a:hover,
	nav a:focus {
		color: #595555;
	}
	
	@media (min-width:55rem) {
		.logo {
			float: center;
		}
		
		nav {
			float: right;
		}
	}
	
	/* home-hero
	=================*/
	
	.home-hero {
		background-color: #e0d729;
		background-size: cover;
		background-position: center;
		padding: 10em 0;
		color: #848080;
	}
	
	@media (min-width: 60rem) {
		.home-hero {
			height: 100vh;
			padding-top: 35vh;
		}
	}
	
	/* hero-home
	=================*/
	
	.home-about-textbox {
		background-color: #e0d729;
		padding: 3em;
		width: 100vw;
		margin-left: -3%;
		outline: 2px solid #0f0f0f;
		outline-offset: -1.5em;
		color: #0f0f0f;
		position: relative;
	}
	
	.home-about-textbox h1 {
		color: #0f0f0f;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: .25em;
		background: #e0d729;
		padding: 0 .325em;
	}
	
	
			/* info
	=================*/
	
	.info {
		background: #e0d729;
		color: #0f0f0f;
		padding: 10em 0;
	}
	
	/* footer
	=================*/
	
	footer {
		background: #e0d729;
		column-rule: #0f0f0f;
		text-align: left;
		padding: 5em 0;
	}