/*	Fonts	from	Google	Fonts	-	more	at	https://fonts.google.com	*/
@import	url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import	url('https://fonts.googleapis.com/css?family=Merriweather:400,700');
* {
	box-sizing: border-box;
}
body {
	font-family: "Open Sans", sans-serif;
	font-size: 18px;
	margin: 0;
	color: #444;
	line-height: 1.5;
	background: repeating-linear-gradient(
	45deg,
	#000,
	#000 20px,
	#fff 20px,
	#fff 40px
);
}

h1,
h2,
h3 {
	font-family: Merriweather, serif;
}

h1 {
	color: #fff;
	text-transform:	uppercase;
	line-height: 1;
	display: inline-block;
}
h2 {
	color: #000;
}
h3 {
	color: #535353;
}

img	{
	max-width: 100%;
	display: block;
}
a,
a:link,
a:visited {
	color: #333;
	opacity: 0.5;
	text-decoration: none;
}
a:hover {
	opacity: 1;
}
article figure {
	margin: 0;
}

h1,
#wrapper {
	margin: 0 auto;
}
h2 {
	margin: 0;
}
#wrapper {
	width: 100%;
	max-width: 740px;
}
article {
	background-color: #fff;
}

@media only screen and (min-width: 641px) {
	body {
		padding: 48px 36px;
	}
	h1 {
		width: 7.5em;
		margin: 0 auto 48px;
		padding: 36px;
		font-size: 60px;
		background: #000;
	}
	h2 {
		margin: 24px 0;
		font-size: 36px;
	}
	h3 {
		font-size: 20px;
	}
	article {
		padding: 48px;
	}
	article:not(:last-child) {
		border-bottom: 1px solid #5f5f5f;
	}
}
@media only screen and (max-width: 640px) {
	img {
		width: 100%;
	}
	h1,
	h2 {
		text-align: center;
	}
	h1 {
		padding: 36px 24px;
		background: rgba(0, 0, 0, 0.8);
	}
	h2 {
		padding: 24px 0;
	}
	article {
		padding-bottom: 36px;
	}
	article:not(:first-of-type) {
		padding-top: 36px;
	}
	blockquote {
		margin: 0;
		padding: 0 24px;
	}
}