body {
	background-color: #fff;
	color: #fff;
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	margin: 0;
}

h1,
h2 {
	font-family: 'Roboto Slab', serif;
	font-weight: 700;
}

h1,
h2,
h3,
header,
footer {
	text-align: center;
}

h1 {
	font-size: 25px;
	margin-bottom: 8px;
}

h2,
h3 {
	text-transform: uppercase;
}

h2 {
	font-size: 20px;
	margin-bottom: 0;
}

h3 {
	color: #ff3f59;
	font-size: 16px;
	margin-top: 0;
}

header img,
img {
	display: block;
}

header img {
	margin: 32px auto 64px auto;
	width: 85%;
}

img {
	margin: 0 auto;
	width: 65%;
}

header {
	background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
		url('../images/beer-hero.jpg') center no-repeat;
	background-size: cover;
	padding-bottom: 48px;
}

section {
	padding: 48px 32px;
}

footer {
	background-color: #ff3f59;
	padding: 16px;
}

/* unvisited link */
a:link {
	color: #fff;
	text-decoration: none;
}

a:visited {
	color: #f3f3f3;
}

a:hover {
	color: #f3f3f3;
	text-decoration: underline;
}

a:active {
	color: #ff3f59;
}

/** Navigation anchors **/

/* unvisited link */
nav a:link {
	color: #fff;
	text-decoration: none;
}

nav a:visited {
	color: #fff;
}

nav a:hover {
	color: #ff3f59;
}

/*******
Classes
*******/
.red-section {
	background-color: #ff3f59;
}

.grey-section {
	background-color: #f3f3f3;
	color: #000;
}

.grey-section h1 {
	color: #ff3f59;
}

.black-text,
.light-brown-block {
	color: #000;
}

.light-brown-block {
	background-color: #f4eee2;
}

.red-block {
	background-color: #ff3f59;
	text-align: center;
}

.dark-brown-block {
	background-color: #26231c;
}

.btn {
	background-color: #ff3f59;
	display: inline-block;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	width: 100%;
}

.btn:hover {
	background-color: #000;
	text-decoration: none;
}

/**********
Columns
**********/
.fwidth-column,
.small-column {
	display: grid;
	margin: auto;
	max-width: 1440px;
	width: 95%;
}

.fwidth-column {
	grid-template-columns: 1fr;
}

.small-column {
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-gap: 70px;
}

.xsmall-column {
	display: grid;
	grid-gap: 100px;
	margin: auto;
	max-width: 1440px;
	width: 95%;
}

/************
Grid Template Areas
************/
.beer-one-text {
	grid-area: beeronetxt;
}

.beer-one-image {
	grid-area: beeroneimg;
}

.beer-two-text {
	grid-area: beertwotxt;
}

.beer-two-image {
	grid-area: beertwoimg;
}

.beer-three-text {
	grid-area: beerthrtxt;
}

.beer-three-image {
	grid-area: beerthrimg;
}

.beer-one-text,
.beer-one-image,
.beer-two-text,
.beer-two-image,
.beer-three-text,
.beer-three-image {
	padding: 48px 24px;
}

.oast-house-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		'beeronetxt'
		'beeroneimg'
		'beertwotxt'
		'beertwoimg'
		'beerthrtxt'
		'beerthrimg';
	max-width: 2560px;
	margin: 0 auto;
}

.oast-house-wrapper h3 {
	font-style: italic;
	margin-top: 25px;
	text-align: left;
	text-transform: none;
}

/***********
Navigation
************/
nav {
	float: right;
	padding: 16px;
}

nav li {
	margin: 0;
	padding: 10px 0;
	text-align: center;
	width: 100%;
}

nav ul {
	background: rgba(255, 51, 102, 0.5);
	display: none;
	list-style-type: none;
	position: absolute;
	right: 0;
	top: 50px;
	width: 100%;
}

nav:hover ul {
	display: block;
}

nav a {
	color: #fff;
	text-decoration: none;

}

#menu-icon {
	background: #ff3f59 url('../images/menu-icon.png') center;
	display: inline-block;
	width: 40px;
	height: 40px;
}

/***********
Media Queries
************/

@media screen and (min-width: 425px) {
	h1 {
		font-size: 30px;
	}

	video {
		width: 365px;
	}

	iframe {
		height: 194px;
		width: 345px;
	}

	.small-column {
		padding-top: 35px;
	}
}

@media screen and (min-width:768px) {
	h1 {
		font-size: 60px;
	}

	header h1 {
		font-size: 88px;
	}

	h2 {
		font-size: 36px;
	}

	h3 {
		font-size: 21px;
	}

	header {
		padding: 80px 32px;
	}

	section {
		padding: 80px 32px;
	}

	nav ul {
		background: transparent;
		display: inline-block;
		float: right;
		text-align: right;
		top: 18px;
		width: 75%;
	}

	nav li {
		display: inline-block;
		padding: 10px;
		width: 15%;
	}

	#menu-icon {
		display: none;
	}

	.oast-house-wrapper {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			'beeronetxt beeroneimg'
			'beertwoimg beertwotxt'
			'beerthrtxt beerthrimg';
	}

	.oast-house-wrapper img {
		width: 85%;
	}

	video {
		width: 708px;
	}

	iframe {
		height: 169px;
		width: 300px;
	}

}

@media screen and (min-width: 1024px) {
	h1 {
		font-size: 84px;
	}

	header h1 {
		font-size: 75px;
	}

	header img {
		width: 65%;
	}

	section {
		padding: 80px 48px;
	}

	.oast-house-wrapper img {
		width: 45%;
	}

	video {
		width: 928px;
	}

	iframe {
		height: 227px;
		width: 404px;
	}
}

@media screen and (min-width: 1440px) {
	header img {
		width: 30%;
	}

	h1 {
		font-size: 72px;
	}

	.oast-house-wrapper img {
		width: 30%;
	}

	video {
		width: 1344px;
	}

	iframe {
		height: 150px;
		width: 266px;
	}
}