@font-face {
  font-family: 'National';
  src: url('NationalWeb-Book.woff') format('woff');
}
@font-face {
  font-family: 'National';
  font-weight: bold;
  src: url('NationalWeb-Semibold.woff') format('woff');
}

::-moz-selection { background: rgba(240,220,0,0.25); }
::selection { background: rgba(240,220,0,0.25); }

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body {
    font-family: National, Helvetica, Arial, sans-serif;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.3;
    max-width: 60em;
    color: rgba(0,0,0,0.75);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

@media only screen and (min-width: 700px) { body { font-size: 20px;} }
@media only screen and (min-width: 1000px) { body { font-size: 22px;} }

strong { font-weight: bold; }

a {
	color: rgba(0,0,0,0.75);
	text-decoration: none;
	background-image: linear-gradient(to bottom, rgba(0,0,0,0) 96%, rgba(0,0,0,0.2) 96%);
}
a:hover { color: cornflowerblue; }

a.action {
	background-image: none;
	color: cornflowerblue;
}

a.action:before {
	content: '\2192\2002';
}

a.action:hover { color: rgba(0,0,0,0.75);}

p { margin-bottom: 1.3em; }
h2 { font-weight: bold; }
h3 { color: rgba(0,0,0,0.33); margin-bottom: 1.3em; }
small { color: rgba(0,0,0,0.33);}
small a { color: rgba(0,0,0,0.33); }

img.fullimg { width: 100%; }

figure.infoheader img { width: 100%; margin-bottom: 1.3em; }


header[role='banner'] {
	border-bottom: 1px solid rgba(0,0,0,0.1);
	padding: 0.65em 0 1.3em;
	margin: 0 1.3em;
}

header[role='banner'] a.logo { display: block; width: 2.5em; background-image: none; }
header[role='banner'] a.logo img { width: 100%; }
nav ul { list-style: none; margin: 1em 0;}
nav ul li { display: inline-block; margin-right: 1.5em; }
nav ul li a { background-image: none; color: cornflowerblue; }
nav ul li a:hover { color: rgba(0,0,0,0.75); }

@media only screen and (min-width: 700px) {
	body > footer { margin: 0 1.3em; padding: 1.3em 0; }
	nav ul li { display: block; padding: 0; }
	header[role='banner'] a.logo img { max-width: 5em; margin-bottom: -2em;}
	header[role='banner'] {
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: baseline;
		align-items: baseline;
	}
	header[role='banner'] a.logo, nav { width: 20%; }
	header[role='banner'] h1 { width: 90%; }
}


body#home article header p {
	text-align: center;
	margin: 0.25em auto 1.75em;
	max-width: 15em;
}

article { padding: 1.3em; }
body > footer {
	padding: 0.65em 0 1.3em;
	margin: 0 1.3em;
	border-top: 1px solid rgba(0,0,0,0.1);
	color: rgba(0,0,0,0.33);
}

section.imagery figcaption {
	margin: 1.3em 0 2.6em 0;
	color: rgba(0,0,0,0.33);
}

section.projlist a {
	line-height: 0.8;
	display: block;
	margin-bottom: 1.3em;
	position: relative;
	max-width: 28em;
	margin-left: auto;
	margin-right: auto;
	background-image: none;
}

section.projlist a:last-child { margin-bottom: 0; }

section.projlist a figure img {
	width: 100%;
	-webkit-transition: -webkit-filter 0.13s ease-in;
    -moz-transition: -moz-filter 0.13s ease-in;
    -o-transition: -o-filter 0.13s ease-in;
    -ms-transition: -ms-filter 0.13s ease-in;
    transition: -webkit-filter 0.13s ease-in;
}

section.projlist a figcaption {
	position: absolute;
	top: 0.75em;
	left: 0.8em;
	z-index: 5;
	color: white;
	/*text-shadow: 0 0 10px rgba(0,0,0,0.2);*/
}

section.projlist a:hover figure img {
	-webkit-filter: grayscale(1) brightness(0.5);
    -moz-filter: grayscale(1) brightness(0.5);
    -o-filter: grayscale(1) brightness(0.5);
    -ms-filter: grayscale(1) brightness(0.5);
    filter: grayscale(1) brightness(0.5);
}

@media only screen and (min-width: 700px) {
	section.projlist {
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
	}
	section.projlist a { width: calc(50% - 0.65em); max-width: none; }
	section.projlist a:nth-child(odd) { margin-right: 0.65em; margin-left: 0; }
	section.projlist a:nth-child(even) { margin-left: 0.65em; margin-right: 0; }
	section.projlist a:nth-last-child(2) {margin-bottom: 0; }
}

section.imagery figure img { display: block; width: 100%; margin-bottom: 1.3em; }
section.imagery figure.video { margin-bottom: 1.3em; }
body#project section.projlist { border-top: 1px solid rgba(0,0,0,0.1); padding-top: 1.3em;}

article header { margin-bottom: 2.6em; }

@media only screen and (min-width: 700px) {
	article header {
		margin-bottom: 0em;
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-align-items: baseline;
		align-items: baseline;
	}
	article header div:first-child { width: 30%; padding-right: 1.3em; }
	article header div:last-child { width: 70%; 
 }

	div.twoup {
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	div.twoup figure { width: calc(50% - 0.65em); }
	section.imagery figcaption { margin-left: 33%; }
}

@media only screen and (min-width: 900px) {
	article header div.title {
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-align-items: baseline;
		align-items: baseline;
	}
	article header div.title h2, article header div.title h3 { width: 50%; }
	article header div.title h3 { padding-left: 0.5em; }
}

@media only screen and (min-width: 1000px) {
	body#project section.projlist a { width: calc(33.33333% - 0.866666667em); margin-left: 0; margin-right: 0; }
	/*section.projlist a figcaption { font-size: 90%; }*/
	body#project section.projlist a:nth-child(3n-1) { margin-left: 1.3em; margin-right: 1.3em; }
	body#project section.projlist a:nth-last-child(-n+3) { margin-bottom: 0; }
	section.imagery figcaption { margin-left: 50%; }
}