/* Quick and Dirty 2.0 */
body	{
	font:	26px/1.7 "adobe-garamond-pro", serif;
	font-family: trade-gothic-next, sans-serif;
	background:	#222;
	margin:	0;
	color:#F1ECDC;
	padding: 1em;
	}
li, p {
	color: #9E9B93;
	}
#wrapper	{
	margin:	20px auto 0;
	}
div {
	max-width: 1400px;
	margin: auto;
	}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
.hide	{
	display: none;
	}
img	{
	width: 100%;
	max-width: 1400px;
	border:	0;
	}
.noborder img, img.noborder	{
	outline: 0 !important;
	}
.clear	{
	clear: both;
	}
.faded	{
	opacity: .8;
	}

#thumbs img:hover, .next img:hover {
	box-shadow: 5px 5px 15px rgba(0,0,0,.23);
	}
.selected img {
	/* box-shadow: 3px 3px 10px rgba(0,0,0,.15); */
	box-shadow: 5px 5px 15px rgba(0,0,0,.23);
	}
header	{
	font-weight: 100;
	}
h1	{
	margin:0;
	font-weight: 800;
	}
h2	{
	font-size:	1.8em;
	line-height: 1.1;
	font-weight: 800;
	margin-bottom:	.2em;
	margin-top: 1.2em;
	}

a	{
	color:	#3b9bb3; /* blue */
	color:	#3b5bb3; /* blue */
	color: #F7CD46;
	}
a:hover	{
	color:	#fff;
	opacity: 1;
	}

h3 span	{
	color: #bbb;
	}
h1, h2, h3 {
	font-family: adobe-garamond-pro, serif;
	font-style: italic;
	}
.intro	{
	line-height:1.2;
	margin: 0 0 10px;
	font-family: adobe-garamond-pro, serif;
	font-weight: 600;
	font-style: italic;
	font-size: 2em;
	}
h1.intro {
	font-size:36px;
	}
h1+p, h2+p, h3+p, h2+ul	{
	margin-top:	0;
	}
hr {
	border: 0;
	}
.hello, hr	{
	border-top:	2px solid rgba(255,255,255,.1);
	padding-top: .8em;
	margin-top: 3em;
	clear: both;
	margin-bottom: 0;
	}
ul	{
	padding: 0;
	}
li	{
	margin: 0 0 9px;
	padding: 0;
	line-height: 1.3;
	}

.cover a:hover {
	/* transform: translateY(-10px); */
	color: #fff;
	}
.cover a {
	color: inherit;
	text-decoration: none;
	display: block;
	transition: all .1s ease-in-out;
	}

#thumbs img, .next img	{
	width: 87px;
	border-radius: 5px;
	margin: 0;
	}
.round	{
	border-radius: 50%;
	}
.next {
	margin-top: 6em;
	text-align: center;
	color: #fff;
	}
.next, .hello {
	max-width: 1400px;
	}
.next img {
	margin: .5em auto !important;
	}

.folio {
	margin-bottom: 4em;
	}
.folio img	{
	display: block;
	margin: 2em auto;
	}
.caption {
	font-style: italic;
	font-size: 0.9em;
	line-height: 1.4;
	opacity: 0.75;
	margin-top: -1em;
	margin-bottom: 4em;
	margin-left: auto;
	margin-right: auto;
	}
.folio img + h2 {
	margin-top: 4em;
	}
blockquote	{
	margin:	1.5em 0;
	font-style: italic;
	font-weight: 100;
	font-size: 1.2em;
	line-height: 1.5em;
	}
blockquote em	{
	font-size:12px;
	color:#F7CD46;
	}

/* mobile first */
h1	{
	font-size: 36px;
	line-height: 1.4em;
	}
.me {
	display: block;
	margin: 0 0 .25em 0;
	width: 130px;
	}
.heading--list + ul {
	list-style: none;
	}
.folio h1 {
	margin-top: 2em;
	}
.folio h1:first-child {
	margin-top: 0;
	}
img.c {
	margin-left: auto;
	margin-right: auto;
	}

#hi {
	font-family: trade-gothic-next !important;
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	margin-bottom: 2em;
	}
#hi a {
	text-decoration: none;
	color: #F7CD46;
	}
#hi p {
	font-size: 14px;
	margin: 0 !important;
	max-width: 100%;
	}
#hi img {
	float: left;
	margin-right: 10px;
	}
#hi h1 {
	font-size: 18px;
	padding: 20px 0 0 0;
	margin: 0;
	max-width: 100%;
	font-family: trade-gothic-next, sans-serif;
	font-style: normal;
	}
#hi img {
	width: 65px;
	}
#hi strong {
	color: #F1ECDC;
	font-weight: 400;
	padding-left: 6px;
	}

.home {
	margin-top: 3em;
	}

/* kinda messy */
.grid-3 > div {
	margin-bottom: 1em;
	}
.grid-3 a {
	text-decoration: none;
	}
.grid-3 a:hover {
	color: #3b5bb3;
	}
.grid-3 a:hover img {
	opacity: .8 !important;
	}
.grid-3 .selected {
	opacity: .2;
	}
.grid-3 {
	font-size: 14px;
	line-height: 1.2;
	}
.grid-3 img {
	display: block;
	margin-bottom: 10px;
	}
a:hover em {
	opacity: 1;
	}
.grid-3 em {
	font-style: normal;
	opacity: .5;
	font-size: 12px;
	line-height: 1;
	}

/* wide */
@media only screen and (min-width: 880px) {
	body {
		padding: 1em;
		}
	h1, h2, h3, h4, ul, ol, p, blockquote, pre, cite, .block	{
		max-width: 720px;
		}
	.cover ul {
		columns: 2;
		}		
	h1.intro	{
		font-size: 72px;
		max-width: 1040px;
		}
	.wide h1, .wide ul, .wide p, .block, .wide p	{
		max-width: 720px;
		}
	.wide img {
		display: inline;
		margin: 0;
		}
	.block {
		position: relative;
		}
	.float	{
		float: left;
		width: 450px;
		margin-bottom: 2em;
		}
	#back {
		margin-bottom: 0;
		}
	#thumbs {
		float: left;
		clear: both;
		width: 180px;
		margin-right: 40px !important;
		margin-top: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}
	#projects {
		margin-top: 3em;
		}
	#cover h2:first-of-type {
		margin-top: 0;
		}
	
	.grid-2, .grid-3, .grid-4 {
		clear: both;
		}
	.grid-2 img {
		width: 45%;
		display: inline-block;
		margin: 2%;
		vertical-align: top;
		}
	.grid-3 > div, .grid-3 > img {
		width: 29%;
		display: inline-block;
		margin: 2%;
		vertical-align: top;
		}
	.grid-3 {
		max-width: 1100px;
		max-width: 920px;
	}
	.grid-4 img {
		width: 20%;
		display: inline-block;
		margin: 2%;
		vertical-align: top;
		}
}