/* Reset
-------------------------------------------------- */
*, *:before, *:after {
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, summary {
	display: block;
}

/* Pix
-------------------------------------------------- */

/* Clearfix
-------------------------------------------------- */
.cf:after {
  content: "";
  display: table;
  clear: both;
}

/* Links
-------------------------------------------------- */
a {
	color: #000;
	text-decoration: underline;
	text-underline-offset: .1em;
	transition: color .3s, background .3s;
}
a:hover {
	color: #f8cba8;
}

/* Site
-------------------------------------------------- */
html {
	font-family: ArtifexHandCF-Regular;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	overflow-y: scroll;
}

body {
	margin: 0 auto;
	font-size: 1.5em;
	line-height: 1.3em;
	padding: 3em 6em 3em 6em;
	max-width: 60em;
	color: #000;
	/*-webkit-font-smoothing: subpixel-antialiased;*/
	-webkit-font-smoothing:antialiased;
	-webkit-text-size-adjust: 100%;
	-moz-osx-font-smoothing: auto;
	text-align: center;
	/*background: #0d2980 url("../images/portrait.gif") no-repeat top center scroll;*/
	background-color: #f4f3f2;
	background-size: 100%;
}

nav {
	margin: 0;
	font-size: .75em;
}

nav ul {
	list-style: none;
}

nav ul li {
	display: inline;
	padding: 0 .5em;
}

nav ul li.active a {
	color: #f8cba8;
}

/* Headings
-------------------------------------------------- */
h1 {
	font-family: ArtifexHandCF-ExtraLight;
	font-size: 6em;
	line-height: 1em;
	font-weight: normal;
	margin: .75em 0 .15em 0;
	color: #000;
	max-width: 35em;
}

h1 em {
	font-family: ArtifexHandCF-ExtraLightItalic;
	font-style: normal;
	text-decoration-color: #f8cba8;
	text-decoration: underline;
	text-underline-offset: .1em;
}

h2 {
	font-family: ArtifexHandCF-Book;
	font-size: 1.3em;
	line-height: 1.5em;
	font-weight: normal;
	margin: 0;
	text-align: center;
	color: #ccc;
}
h3 {
	font-size: 2.5em;
	line-height: 1em;
	font-weight: normal;
	margin: 1.5em 0 .25em 0;
	width: 100%;
	padding: 0;
	font-family: WayfinderCF-Thin;
}

h1 a, h2 a, h3 a, h4 a {
	color: inherit;
}

p {
	max-width: 25em;
	margin: 0 auto 1em auto;
	padding: 0;
}

p em {
	font-family: ArtifexHandCF-RegularItalic;
	font-style: normal;
}

img {
	display: block;
	max-width: 26em;
	margin: 1em auto 2em auto;
}

blockquote {
	font-family: ArtifexHandCF-Book;
	color: #f8cba8;
	font-size: 1.3em;
	line-height: 1.5em;
	padding: 1em;
	border: 1px solid #ccc;
	margin: 1em auto;
	max-width: 20em;
}

blockquote ul {
	list-style-position: inside;
	list-style-type: circle;
}


/* Footer
-------------------------------------------------- */
.footer {
	padding: 0;
	font-size: .75em;
	clear: both;
	margin-top: 3em;
	text-align: center;
}

.copyright {
	text-align: center;
}

/* Responsive things
-------------------------------------------------- */

@media screen and (max-width: 20em) {
	body {
		padding: 1em;
		font-size: 1.25em;
	}
	
	nav ul li {
		display: inline;
		padding: 0 .15em;
	}

	h1 {
		font-size: 1.75em;
		margin: 2em 0 .15em 0;
	}
	
	h2 {
		font-size: 1em;
	}
	
	h3 {
		font-size: 1.5em;
		margin-top: 2em;
	}
	
	img {
		max-width: 100%;
	}
	
	blockquote {
		font-size: 1em;
	}

}


@media screen and (min-width: 21em) and (max-width: 25em) {
	body {
		padding: 1em;
		font-size: 1.25em;
	}

	h1 {
		font-size: 2em;
		margin: 2em 0 .15em 0;
	}
	
	h2 {
		font-size: 1em;
	}
	
	h3 {
		font-size: 1.5em;
		margin-top: 2em;
	}
	
	img {
		max-width: 100%;
	}
	
	blockquote {
		font-size: 1.1em;
	}
}

@media screen and (min-width: 25em) and (max-width: 35em) {
	body {
		padding: 2em;
		font-size: 1.25em;
	}

	h1 {
		font-size: 2em;
		margin: 2em 0 .15em 0;
	}
	
	h2 {
		font-size: 1em;
	}
	
	h3 {
		font-size: 1.5em;
		margin-top: 2em;
	}
	
	img {
		max-width: 100%;
	}
	
	blockquote {
		font-size: 1.2em;
	}
}

@media screen and (min-width: 35em) and (max-width: 46em) {
	body {
		padding: 2em;
		font-size: 1.25em;
	}

	h1 {
		font-size: 3em;
	}
	
	h2 {
		font-size: 1em;
	}
	
	img {
		max-width: 26em;
	}
}


@media screen and (min-width: 46em) and (max-width: 62.5em) {
	body {
		padding: 2em;
		font-size: 1.25em;
	}

	h1 {
		font-size: 4em;
	}
	
	img {
		max-width: 26em;
	}
}