/***
    The new CSS reset - version 1.8.4 (last updated 14.2.2023)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/

/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
 *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
    box-sizing: border-box; 
}

/* Reapply the pointer cursor for anchor tags */
a, button {
    cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu {
    list-style: none;
}

/* For images to not be able to exceed their container */
img {
    max-inline-size: 100%;
    max-block-size: 100%;
}

/* removes spacing between cells in tables */
table {
    border-collapse: collapse;
}

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
    -webkit-user-select: auto;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
    white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
    -webkit-appearance: revert;
    appearance: revert;
}

/* preformatted text - use only for this feature */
:where(pre) {
    all: revert;
}

/* reset default text opacity of input placeholder */
::placeholder {
    color: unset;
}

/* remove default dot (•) sign */
::marker {
    content: initial;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
    display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly.
   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
    -webkit-user-drag: element;
}

/* Revert Modal native behavior */
:where(dialog:modal) {
    all: revert;
}






/* some fixes */
  
html {
    /* prevents page jumping when there is no scroll-bar by default */ 
    overflow-y: scroll;
	overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    /* overflow: visible; */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
  
/* apply this class toclear floats */
.group:after {
    content: "";
    display: table;
    clear: both;
}

iframe {
	border: none;
}







html {
	/* prevents page jumping when there is no scroll-bar by default */
    overflow-y: scroll;
}

body {
    color: #222;
    font-family: 'Libre Baskerville', serif;
    font-size: 1em;
	/* font-weight: 400; */
    font-weight: normal;
    font-style: normal;
    line-height: 1.5em;
}

/* apply this class toclear floats */
.group:after {
  content: "";
  display: table;
  clear: both;
}

#debugging {
    display: none;
}

p, .p-size {
    font-size: 0.875em;
    line-height: 1.7142857142857142857142857142857;
}

strong {
	font-weight: bold;
}

a {
    color: #0099ff;
    text-decoration: none;
}

p a {
    color: #222;
    border-bottom: solid #0099ff 1px;
}

/*
loosely tritonal 729/512
sm  - 0.702331961591220850480109739369 -> 0.75 -> 12:16 (1.3333333333333333333333333333333)
p   - 1 -> 1em -> 16:24 (1.5)
h4  - - 1 -> 1em -> 16 (bold)
h3  - 1.423828125 -> 1.375em -> 22:24 (1.0909090909090909090909090909091)
h2  - 2.027286529541015625 -> 2em -> 32:48 (1.5)
h1  - 2.886507578194141387939453125 -> 2.875em -> 46:48 (1.0434782608695652173913043478261)
h1+ - 4.1098906728584552183747291564941 -> 4.125em -> 66:72 (1.0909090909090909090909090909091)
*/

h1 {
    font-family: 'Apercu', sans-serif;
    font-weight: normal;
    font-size: 3.25em;
    line-height: 1.1538461538461538461538461538462em;
}

/* mostly used for body text sub-headings */
h3 {
    font-family: 'Apercu', sans-serif;
    font-size: 1.4375em;
    padding-top: 0.52173913043478260869565217391305em;
    line-height: 1.0434782608695652173913043478261em;
    margin-bottom: 0.52173913043478260869565217391304em;
}

.page-intro +h3 {
	margin-top: -1.043478260869565em;
}

ul.nav h3 a {
	color: #222;
	border-bottom: 1px solid #0099ff;
}

/* mostly used for list item titles */
h4 {
    font-family: 'Apercu', sans-serif;
    font-weight: bold;
    font-size: 1.125em;
    line-height: 1.3333333333333333333333333333333em;
}

p {
    margin-bottom: 1.7142857142857142857142857142857em;
}

.page-intro + p {
	margin-top: -1.7142857142857142857142857142857em;
}

pre {
    margin-bottom: 1.5em;
}

em, i {
    font-style: italic;
}

pre {
    margin-left: 4px; /* so it matches blockquotes, which have a 4px left double border */
    padding-left: 1.5em;
    font-family: 'Apercu Mono', "Courier New", Courier, monospace;
	white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;
}

blockquote {
    color: #666;
    margin-left: 0;
    border-left: 4px double #e1e1e1;
    padding-left: 1.5em;
}

#content ol {
	counter-reset: list;
}

#content ol li {
	list-style: none;
	/* list-style-type: lower-roman; */
	/* list-style-position: inside; */
	position: relative;
	font-size: 0.75em;
    /* line-height: 1.7142857142857142857142857142857em; */
	padding-left: 1em;
	margin-left: 1.333333333333333em;
	margin-right: 1.333333333333333em;
	margin-bottom: 2em;
	line-height: 2em;
}

#content ol li::before {
	/* list-style-type: lower-roman; */
	font-family: 'Apercu Mono';
	counter-increment: list;
	content: counter(list) '.';
	position: absolute;
	top: 0px;
	font-size: 1em;
	left: -1.333333333333333em;
	color: #999;
	line-height: 2em;
}

img {
    display: block;
    width: 100%;
    margin-bottom: 1.5em;
}

.remove-btn-styling,
.remove-btn-styling.active {
	background:none;
	border:none;
}

:focus {
    /* background-color: #ffe600; */
	outline-offset: 12px;
	outline-color: #ffe600;
}

.remove-btn-styling:focus {
	background: none;
	outline: none;
}

.remove-btn-styling:focus #photo-set-icon svg,
#view-full-width.remove-btn-styling:focus svg,
#more-photos.remove-btn-styling:focus svg {
	fill: #ffe600;
}



.icon24 {
	height: 1.5em; /* 24px */
}

.icon24 svg {
	width: 24px;
	height: 24px;
	fill: #333;
}

a.icon24 svg, #photo-set-icon svg {
	fill: #0099ff;
}

.icon24-tag {
	height: 3em;
	text-align: center;
	padding: .75em 0;
}

.icon24-tag svg {
	fill: #999;
}

.icon24-menu {
	float: right;
	margin-left: 0.5em;
}

.icon24-menu svg {
	fill: #0099ff;
}

.home .home-pinboard .icon24-clipboard svg {
	fill: #999;
}


.icon20 {
	width: 32px;
	height: 32px;
	padding: 6px;
	background-image: url('/site/templates/img/icons/list.svg');
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: 6px 6px;
	opacity: 0.75;
}

.icon20-expand {
	background-image: url('/site/templates/img/icons/expand.svg');
}

.icon20-expand.active {
	background-image: url('/site/templates/img/icons/2x2grid.svg');
}

.icon20-tag {
	background-image: url('/site/templates/img/icons/tag.svg');
}



figure {
    position: relative;
}

figcaption, figure .copyright {
    font-size: 0.6875em;
    line-height: 1.6363636363636363636363636363636em;
    margin-top: -1.636363636363636em;
    margin-bottom: 2.1818181818181818181818181818182em;
}

figcaption {
    width: 70%;
}

figcaption p {
	font-size: 1em;
}

figure .copyright {
    float: right;
    width: 30%;
    text-align: right;
    color: #999;
    padding-left: 3%;
	position: relative;

/*     color: #ccc;
    display: inline-block;
    position: absolute;
    right: -0.5em;
    padding-right: 2.1818181818181818181818181818182em;
    transform: rotate(90deg);
    transform-origin: 100% 100%;
    -webkit- transform: rotate(90deg);
    -moz- transform: rotate(90deg);
    -ms- transform: rotate(90deg); */
}

figure.no-caption .copyright {
	width: 60%;
}

figure .copyright .image-credit {
	opacity: 1;
	transition: opacity ease-in-out .3s;
}

figure .copyright.active .image-credit {
	opacity: 0;
}



figure.no-caption .copyright .ai-credit {
	display: inline-block;
	font-family: 'Apercu Mono';
    color: #555;
    border-radius: 4px;
	padding: 0 0 0 2px;
	margin-right: -2px;
	letter-spacing: 1px;
	margin-left: 0.0909090909090909em;
	opacity: 1;
	transition: opacity ease-in-out .3s;
}

figure.no-caption .copyright.active .ai-credit.active {
	opacity: 0;
}

figure.no-caption .copyright .ai-credit a {
	color:#0099ff;
	opacity: 1;
	transition: opacity ease-in-out .3s, color ease-in-out .1s;
}

figure.no-caption .copyright .ai-credit a.gloss {
	color:#ffd900;
	opacity: 0;
}

figure .copyright .ai-credit-reveal {
	margin-left: -233.3333333333333%;
}

figure .copyright .ai-credit.active + .ai-credit-reveal {
	width: 333.333333333333333%;
}

figure.no-caption .copyright .ai-credit-reveal {
	position: absolute;
    left: 0;
    top: 0;
	opacity: 0;
	width: 0;
	transition: opacity ease-in-out .3s;
	overflow: hidden;
	margin-left: -66.66666666666667%;
}

figure.no-caption .copyright .ai-credit.active + .ai-credit-reveal {
	opacity: 1;
	width: 166.6666666666666667%;
}

#that-a-wrap {
	position: relative;
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 0 6em; /* give internal max-width of 1152 */
}

.center-children {
	position: absolute;
	width: 100%;
	text-align: center;
}

#mainnav {
	position: relative;
    font-family: 'Apercu', sans-serif;
    text-align: right;
    width: 90%;
	max-width: 960px;
    margin: 3em auto 7.5em;
    padding: 1.5em 0;
	/* border-bottom: 1px #999 solid; */
		background-image: linear-gradient(to right, rgba(156,156,156,1) 33%, rgba(255,255,255,0) 0%);
	background-position: bottom;
	background-size: 3px 1px;
	background-repeat: repeat-x;
	z-index: 666;
	opacity: 0;
}

#mainnav .mainnav {
	float: left;
	text-align: right;
}

/* #mainnav .mainnav .more-items {
	display: none;
	height: 0;
	top: -3em;
} */
#mainnav .mainnav .split {
	padding-bottom:0;
}
#mainnav #initials{
	margin-top:0;
}


#mainnav ul {
	width: auto;
	display:inline-block;
	text-align: right;
	/* padding-right: 4.5em; */
	/* margin-top: -4.25em; */
}

#mainnav ul + ul {
	width: auto;
	text-align: right;
	/* float: left; */
	/* padding-left: 4.5em; */
	/* padding-right: 0; */
}

#mainnav ul.more {
	padding-left: 0;
	/* float: left; */
}

#mainnav ul.split li:first-child {
	margin-left: 0;
}

#mainnav ul.more li {
	/* display: inline-block; */
	display: block;
	text-align: right;
}

#mainnav ul.more li a {
	display: inline-block;
	height: 1.714285714285714em;
	line-height: 1.714285714285714;
}

#mainnav ul.more li.current a {
	border-bottom: 1px solid #0099ff;
}

#mainnav ul.more li.current {
	border-bottom: none;
}

#mainnav ul.more li.more {
	color: #0099ff;
}

#menu-more-link {
	display: block;
}

#mainnav ul.more-items {
	position: absolute;
	right: 0;
	bottom: 0;
	width: auto;
	/* max-width: 960px; */
	margin: 0 auto;
	text-align: right;
	display: none;
	padding: 0;
	padding-bottom: 1.5em;
}

#mainnav ul.more-items li:first-child {
	margin-left: 0;
}

#initials {
    display: block;
	position: absolute;
    /* vertical-align: top; */
    text-align: left;
	float: left;
    height: 3em;
    width: auto;
	max-width: 960px;
    padding: 0.25em 0;
	margin: 0 auto 1.5em;
	/* z-index: -1; */
}

#initials a {
	display: inline-block;
	width: auto;
	height: 100%;
}

#initials img {
    display: inline-block;
    /* margin: 0 0 0 auto; */
    height: 100%;
    width: auto;
    margin: 0;
}

#mainnav .mainnav {
    width: 100%;
    /* padding: 0 4.8675% 0 0; */
    padding: 0;
    /* float: right; */
	text-align: right;
	margin: 0 auto;
	/* display: none;  */
}

#mainnav .mainnav li {
	display: inline-block;
	font-size: 0.875em;
	line-height: 1.714285714285714;
	margin: 0.8571428571428571em 0 0.8571428571428571em 2em;
	/* margin-right: 0.5em; */
	/* text-transform: uppercase; */
	letter-spacing: 1px;
}

#mainnav .mainnav li.current {
    position: relative;
	border-bottom: 1px solid #0099ff;
}

#mainnav .search {
    width: 33%;
    display: inline-block;
    visibility: hidden;
	display: none;
    vertical-align: bottom;
}

.notice {
	text-align: center;
	font-family: 'Apercu';
	color: #111;
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
	margin-bottom:0;
}

.notice h5 {
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: -.25em;
	margin-bottom: .25em;
}

.notice p {
	font-family: 'Apercu Condensed';
	font-size: 0.875em;
}

.notice.construction-notice svg {
	color: red;
}

main, .MarkupPagerNav, div.page-intro, header {
    width: 100%;
	max-width: 540px;
}

div.page-intro {
	margin-bottom: 3em;
}

.home .page-intro {
	float: left;
	max-width: 540px;
}

.home .home-spotlight {
	padding-top: 4.5em;
}

.home .home-pinboard .icon24-clipboard {
	margin-bottom: 1em;
	height: 2em;
	text-align: center;
}

.home .home-pinboard {
	margin-top: -3em;
}

.home .home-pinboard.pin-date {
	margin-top: -6em;
}

.home .home-pinboard .pin-date {
	text-align: center;
	line-height: 1.5em;
	margin-bottom: 1.5em;
}

.home .home-pinboard p + .pin-date {
	margin-top: 3em;
}

.home .home-spotlight header {
	margin-bottom: 1.5em;
}

header {
    margin-bottom: 2.25em;
	padding-top: 16.5em;
}

.home #content header {
	padding-top: 0;
}

.blog header {
	padding-top: 4.5em;
}

.blog-entry header {
	padding-top: 15em;
}

.blog #content ul.nav li:first-child header {
	padding-top: 15em;
}

.blog main, .blog-entry main {
    width: 100%;
    max-width: 1152px;
    padding: 0;
}

.blog .blurb, .has-sidebar main {
	max-width: 540px;
	/* padding-right: 10.41666666666666%; */
	float: left;
	vertical-align: top;
	/* max-width: inherit; */
}

.blog .blurb ul {
	font-size: 0.75em;
    line-height: 2;
	margin-bottom: 2em;
}

.blog .blurb li {
	position: relative;
	padding-left: 2em;
}

.blog .blurb li:before {
	width: 0.5em;
	position: absolute;
	left: .5em;
	content: "\2022";
}

.blog .blurb-end-note {
	opacity: 0.7;
	padding: 1em 1.125em;
    border: 1px solid grey;
    color: #555;
    border-radius: .5em;
	margin-bottom: 1.5em;
	margin-top: 2.5em;
}

.blog .blurb-end-note p {
    color: #555;
    font-size: 0.65625em;
    line-height: 1.714285714285714em;
    text-align: justify;
}

.blog .blurb-end-note p a {
	color: #555;
    border-bottom: solid #0099ff 1px;
}

	

.blog .blurb-end-note p:last-child {
	margin-bottom: 0;
}

.blog .blurb ul.footnotes {
	font-size: 0.6875em;
    line-height: 1.6363636363636363636363636363636em;
	margin-bottom: 2.1818181818181818181818181818182em;
}

.blog .blurb ul.footnotes li {
	position: relative;
	padding-left: inherit;
}

.blog .blurb ul.footnotes li:before {
	width: inherit;
	position: inherit;
	left: inherit;
	content: inherit;
}

.photo-wall header {
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
}

.blog #mainnav {
	margin-bottom: 6em;
}

.blog h2,
.blog-entry h1 {
    font-family: 'Apercu', sans-serif;
    font-weight: normal;
    font-size: 2.875em;
    line-height: 1.0434782608695652173913043478261em;
}

.blog header,
.blog-entry header {
    margin-bottom: 2em;
}

.home h2.blog-spotlight {
	font-family: 'Apercu', sans-serif;
    font-weight: normal;
    font-size: 2em;
    line-height: 1.5em;
	margin-bottom: 0.75em;
}

.home h2.blog-spotlight a {
	color: #222;
	text-decoration: none;
	border-bottom: 1px solid #0099ff;
}

.home .home-spotlight a.continued {
	font-family: 'Apercu Mono';
	border-bottom: 0;
	color: #0099ff;
	font-size: 0.9285714285714286em;
	line-height: 1.846153846153846;
}



.blog .date-published,
.blog-entry .date-published,
.home .date-published {
    font-size: 0.875em;
    line-height: 1.7142857142857142857142857142857em;
    font-family: 'Apercu', sans-serif;
    margin-bottom: 1.1428571428571428571428571428571em;
}

.home .date-published {
	margin-bottom: 0.8571428571428571em;
	margin-top: 0.8571428571428571em;
	font-family: 'Libre baskerville', serif;
	font-style: italic;
}

.blog .date-published a {
    color: #222;
    border-bottom: solid #0099ff 1px;
}

.blog-updated-date {
	color: #999;
    margin-left: 0.25em;
	font-size: 0.8571428571428571em;
}

.blog .blurb {
	margin-bottom: 4.5em;
}

#sidebar, .aside {
    font-family: 'Apercu Mono', "courier new", monospace;
    color: #999;
    font-size: 0.75em;
    line-height: 2em;
	float: right;
    vertical-align: top;
    text-align: left;
    width: 33.333333333333333333333333333333%;
    /* max-width: 384px; */
    /* padding: 0 4.6875% 0 4.6875%; /* max 54px */
}

#sidebar figure .copyright {
	font-size: 0.8333333333em;
	margin-top: -1.2em;
	line-height: 1.8em;
	margin-bottom: 1.8em;
	font-family: 'Apercu', sans-serif;
	width: 90%;
}

ul.worksnav {
	/* margin-top: 0.25em; */
	/* border-left: 1px solid #ebebeb; */
	/* background-image: linear-gradient(to top, rgba(156,156,156,1) 0%, rgba(156,156,156,1) 33.33333%, transparent 33.333333%); */
/* 	background-position: left 0;
	background-size: 1px 3px;
	background-repeat: repeat-y;	 */
	/* padding-left: 1.5em; */
	/* margin-left: -1.5em; */
}

.works #content {
	position: relative;
}

.works #content .margin-dots {
	background-image: linear-gradient(to top, rgba(156,156,156,1) 0%, rgba(156,156,156,1) 33.33333%, transparent 33.333333%);
	background-position: left 0;
	background-size: 1px 3px;
	background-repeat: repeat-y;
	padding-left: 1.5em;
	margin-left: -1.5em;
	content: '';
	display: block;
	position: absolute;
	margin-left: -1.5em;
	left: 0;
	top: 0;
	height: 100%;
	width: 1px;
	opacity: 0;
	/* background-color: rgba(256,256,256,1); */
}

.worksnav a {
    font-weight: bold;
}

.worksnav .forces {
	display: block;
	position: relative;
}

.worksnav .date-written {
    display: inline-block;
}

.worksnav .work-duration {
    font-size: 0.75em;
    line-height: 2em;
}

/* .worksnav .duration:before {
    content: '\00a0\b7\00a0';
} */

.worksnav .marginalise {
    opacity: 0;
}

.worksnav .marginalise.reveal {
    /* display: inherit; */
}

/* .worksnav .marginalise {
    width: 10em;
    font-size: 0.875em;
    font-family: monospace;
    color: #999;
    position: absolute;
    top: 0;
    margin-left: -11.5em;
    text-align: right;
    margin-top: 2px;
    border-top: 1px solid;
    line-height: 1.5em;
} */

.worksnav .marginalise {
    font-size: 0.75em;
    line-height: 2em;
    width: 12em;
    /* text-decoration: overline; */
    font-family: 'Apercu Mono', "Courier New", monospace;
    color: #ccc;
    position: absolute;
    top: 0;
    margin-left: -11.8333333333333333333333333333333em;
    margin-left: -12em;
	padding-right: 1.75em;
	background-color: #fff;
    text-align: right;
    padding-top: 1.25em;
	padding-bottom: 1.25em;
/*     border-top: 1px solid #ddd; */
}

.worksnav .date-written.last-in-year {
    display: none;
}

.worksnav li {
    display: none;
    position: relative;
	/* padding-bottom: 1.375em; */
	padding: 0.625em 0 0.875em;
    /* margin-bottom: 0.25em; */
	/* margin: 0.6875em 0; */
	/* background-color: #f6f6f6; */
}

.works-meta, .blog-meta {
    margin-bottom: 2em;
}

.works-meta-title, .blog-meta-title {
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
}

.blog-meta.social-proof {
	margin-top: -66px;
	margin-bottom: 31px;
}

.blog-meta.social-proof div {
	float: left;
}

.social-likes,
.copy-link {
	display: inline-block;
	padding: 5px 8px 5px 5px;
	margin-left: -3px;
	border-radius: 5px;
	background-color: #eee;
	transition: background-color 0.3s ease-in-out;
}

.copy-link {
	padding: 6px 8px;
	margin-left: 10px;
}

.social-likes.liked svg {
	color: #999;
	fill: #999;
}

.social-likes div {
	float: left;
}

.blog-meta-social-heart,
.copy-link-icon {
	width: 24px;
	height: 24px;
	transition: color .2s ease-in-out;
}

.copy-link-icon {
	width: 22px;
	height: 22px;
}

.blog-meta-social-heart-likes {
	margin-left: 0.5em;
	font-family: 'DM Mono';
}

.copy-link:hover,
.social-likes:hover {
	background-color: #ddd;
	cursor: pointer;
}

.social-likes:hover .blog-meta-social-heart,
.copy-link:hover .copy-link-icon {
	color: white;
}

.works #content h4 {
	display: inline-block;
}

.works #content .score-extras {
	display: inline-block;
    position: relative;
    margin-left: 6px;
    width: 15px;
    height: 15px;
    top: 2px;
    color: #ccc;
}

.works #content .score-extras svg {
	width: 100%;
	height: auto;
}

button, input {
    font-size: 1em;
    font-family: 'Apercu Mono', "Courier New", monospace;
    margin: 0;
    padding: 0;
    border: 0;
    background: #eee;
    color: #333;
    text-decoration: none;
    vertical-align: middle;
}


button:active, button.active  {
    background: #aaa;
}

#break-it-down {
	margin-top: 0.5em;
}

#break-it-down button, #optional-details button {
    font-size: 1em;
    line-height: 2.6666666666666666666666666666667;
    margin: 0.33333333333333333333333333333333em 0.33333333333333333333333333333333em 0 0;
    padding: 0 1em;
}

/* .worksnav button.active {
    font-weight: bold;
} */

#break-it-down h3, #optional-details h3  {
    font-family: 'Apercu Mono', "Courier New", Courier, monospace;
    text-transform: uppercase;
    vertical-align: middle;
    display: inline-block;
    font-size: 1em;
    line-height: 2.6666666666666666666666666666667;
    margin: 0.33333333333333333333333333333333em 0.33333333333333333333333333333333em 0 0;
    padding: 0 1em;
    background: #555;
    color: #eee;
}

#filters, #sorts {
    margin-bottom: 2em;
}

#resets {
    margin-top: 2em;
}

#reset-btn {
    text-transform: uppercase;
}

.work-summary {
	font-family: 'Libre Baskerville';
	position: relative;
    display: none;
    font-style: italic;
}

.work-duration {
	display: none;
}

.footnotes {
    border-top: 1px solid #999;
    font-size: 0.6875em;
    padding-top: 1em;
    margin-top: 1.0909090909090909090909090909091em;
    line-height: 1.6363636363636363636363636363636em;
    margin-bottom: 2.1818181818181818181818181818182em;
	margin-top: 4.36363636363636363636363636363636em;
}

.footnote {
    position: relative;
}

.footnotes .footnote-count {
    position: absolute;
    display: inline-block;
    width: 2em;
}

.footnotes .footnote-note {
    margin-left: 2em;
    display: inline-block;
    position: relative;
}

.footnote-ref {
    font-family: 'Apercu', sans-serif;
    display: inline-block;
    padding: 0 0.4em 0.8em 0.3em;
    vertical-align: top;
    margin-left: -0.3em;
    margin-right: -0.5em;
    font-size: 0.71428571428571428571428571428571em;
    line-height: 1.6em;
}

a.footnote-ref {
    text-decoration: none;
    border: 0;
    color: #0099ff;
}

.footnote-ref-sep {
    font-family: 'Apercu', sans-serif;
    font-size: 0.71428571428571428571428571428571em;
    font-weight: 700;
    display: inline-block;
    vertical-align: top;
    line-height: 1.9em;
    padding-left: 2px;
    margin-right: -1px;
    color: #777;
}

.MarkupPagerNav {
    font-family: 'Apercu', sans-serif;
}

.MarkupPagerNav li {
    float: left;
}

.MarkupPagerNav a {
    padding: 0 0.25em;
    margin-left: 0.5em;
}

li.MarkupPagerNavFirst a {
    padding: 0 0.25em 0 0;
    margin-left: 0;
}

li.MarkupPagerNavNext {
    float: right;
}

.MarkupPagerNavOn {
    text-decoration: underline;
}

footer {
	position: relative;
    font-size: 0.75em;
	/* color: #555; */
	padding-top: 2em;
    width: 90%;
	margin: 8em auto 4em;
    max-width: 960px;
    /* padding: 0 6.25% 0 6.25%; /* max 72px */
	background-image: linear-gradient(to right, rgba(156,156,156,1) 0%, rgba(156,156,156,1) 33.3333%, transparent 33.3333%);
	background-position: 0 top;
	background-size: 3px 1px;
	background-repeat: repeat-x;
}

footer p {
    font-family: 'Apercu', sans-serif;
    font-size: 1em;
    margin-bottom: 0;
    line-height: 2em;
}

footer .footblock-a {
	width: 50%;
	float: left;
}

footer .footblock-b {
	float: right;
	width: 50%;
	text-align: right;
	font-family: 'Apercu', sans-serif;
    font-size: 1em;
    margin-bottom: 0;
    line-height: 2em;
}

.works #sidebar h3 {
	display: none;
	visibility: hidden;
}

#sidebar h5 {
    text-transform: uppercase;
    line-height: 2em;
    letter-spacing: 1px;
}

#sidebar p {
    font-size: 1em;
    line-height: 2em;
	margin-bottom: 2em;
}

.home #sidebar p {
    font-size: 1em;
    line-height: 1.5em;
	margin-bottom: 1.5em;
}


/* score download */

.scoreDownload_expander {
    margin-bottom: 1em;
}

.scoreDownload_expander a {
    color: #999;
}

.scoreDownload_expander a:after {
    color: #0099ff;
    content: attr(data-pseudo-after);
    padding-left: 0.5em;
}

#wrap_Inputfield_email p.notes {
    margin-top: 1.3333333333333333333333333333333em;
}



/* about */

body.about .biography-block {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  /* transition: max-height .5s; */
  transition: opacity 1s;
}

body.about .biography-block.active {
  max-height: 9999px;
  overflow: hidden;
  opacity: 1;
}

body.about .biography-block h3 {
  display: none;
  visibility: hidden;
}

body.about #biog-lengther {
  margin: 2.5em 0 2.5em;
  font-size: 0.75em;
  font-family: 'Apercu Mono';
  line-height: 2.66666667;
}

body.about #biog-lengther .biog-lengther,
body.about #biog-lengther .biog-lengther-title {
  float: left;
  padding: 0 1em;
  display: block;
  background: #eee;
  color: #333;
  height: 2.66666667em;
  margin: 0 .333333em 0.333333em 0;
  cursor: pointer;
}

body.about #biog-lengther .biog-lengther-title {
  text-transform: uppercase;
  background: #555;
  color: #eee;
  cursor: initial;
}

body.about #biog-lengther .biog-lengther.active {
	background: #aaa;
}

body.about #biog-lengther .biog-lengther.deactivated {
  background: #f3f3f3;
  color: #ddd;
}



/* recording */

body.recording .wee-info-group {
	position: relative;
	margin: 1.5em 0;
	/* color: #666; */
	padding: 0.9375em 1.5em 1.25em;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	text-align: center;
}

body.recording .wee-info-group .wee-info-icon {
	display: block;
	left: 0px;
	top: 0px;
	/* vertical-align: top; */
	height: 24px;
	color: #999;
	margin-bottom: 0.6875em;
}

body.recording .wee-info-group .wee-info-info {
	display: inline-block;
	font-size: 0.75em;
	font-family: 'Apercu';
	font-weight: bold;
	line-height: 2em;
	vertical-align: top;
	/* padding-left: 0.5em; */
	color: #777;
	letter-spacing: 0.0416667em;
	/* font-family: 'Libre Baskerville'; */
	/* font-style: italic; */
	/* text-transform: uppercase; */
}

body.recording #recording-disco .item {
	width: 164px;
	/* margin-bottom: 24px; */
}

body.recording #recording-disco .item .disco-notes {
	display: none;
	opacity: 0;
}

body.recording #recording-disco .item .disco-notes .recording-disco-credit {
	font-family: "Apercu Mono", "courier new", monospace;
    color: #999;
    font-size: 0.75em;
    line-height: 2em;
	text-transform: lowercase;
	padding-top: 12px;
}

body.recording #recording-disco .item .disco-notes .recording-disco-credit .recording-disco-credit-title {
	display: inline;
	text-transform: uppercase;
    letter-spacing: 1px;
}

body.recording #recording-disco .item .disco-notes > h4 {
	margin-top: 12px;
}

body.recording #recording-disco .item .disco-notes h5 {
	font-family: 'Apercu';
	font-weight: normal;
	font-size: 0.9375em;
	line-height: 1.6em;
}

body.recording #recording-disco .item {
	cursor: pointer;
}

body.recording #recording-disco .grid-sizer {
	width: 164px;
}

body.recording #recording-disco .gutter-sizer {
	width: 24px;
}

body.recording #recording-disco .item img {
    position: absolute;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ddd;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}

@media (max-width: 480px) {

	body.recording #recording-disco .item {
		width: 158px;
		/* margin-bottom: 24px; */
	}

body.recording #recording-disco .gutter-sizer {
		width: 20px;
	}

	body.recording #recording-disco .grid-sizer {
		width: 158px;
	}

}

body.recording #recording-disco .recording-disco-credit li {
	display: inline;
	line-height: 1.5em;
}

body.recording #recording-disco .p-rights-group {
	height: 24px;
	position: relative;
}

body.recording #recording-disco .p-rights-circle {
	height: 11px;
	display: inline-block;
	line-height: 11px;
	vertical-align: middle;
}

body.recording #recording-disco .p-rights-group .feather-circle {
	height: 11px;
	display: block;
	line-height: 11px;
}

body.recording #recording-disco .p-rights-p {
	font-family: 'Apercu';
	font-size: 7px;
	font-weight: bold;
	height: 7px;
	line-height: 7px;
	display: inline-block;
	vertical-align: middle;
	margin-left: -7.25px;
}

body.recording #recording-disco .p-rights-info {
	font-family: 'Apercu';
	font-size: 13px;
	height: 13px;
	line-height: 12px;
	display: inline-block;
	vertical-align: middle;
	margin-left: 5px;
}

body.recording #recording-disco + h3 {
	margin-top: 1.0434782608695652173913043478261em;
}


/* photo wall */

body.projects #that-a-wrap,
body.photo-wall #that-a-wrap {
    width: 90%;
    max-width: inherit;
}

body.projects.cloak {
	opacity: 0;
}

body.projects main,
body.photo-wall main {
	max-width: inherit;
}

body.projects {
	overflow-x: hidden;
	overflow-y: hidden;
}

body.projects #content,
body.photo-wall #content {
    margin: 0 auto;
}

body.projects.project #content {
	max-width: 1280px; 
}

body.projects.project #content .project-blurb {
	padding-bottom: 3em;
}

body.photo-wall #photo-wall-sub-wrap,
body.projects #projects-sub-wrap {
    /* margin: 0 auto; */
	margin: 1.875em auto 1.25em auto;
	/* padding: 1em 0; */
	background-image: linear-gradient(to right, rgba(156,156,156,1) 33%, rgba(255,255,255,0) 0%);
	background-position: bottom;
	background-size: 3px 1px;
	background-repeat: repeat-x;
}

body.full-width #photo-wall .item:last-child {
	margin-bottom: 0;
}

body.photo-wall.full-width #photo-wall-sub-wrap,
body.projects.full-width #projects-sub-wrap {
	padding-bottom: 1.875em;
}



#photo-wall {
}

.gutter-sizer {
    width: 32px;
}

.grid-sizer, .photo-sets {
    width: 300px;
}

#photo-wall .item {
    width: 300px;
    margin-bottom: 32px;
}

#photo-wall .item.spotlight {

}

.photo-wall header {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.photo-wall .page-intro {
	max-width: 480px;
	margin-right: auto;
	margin-left: auto;
	text-align: justify;

}

#photo-tags {
	text-align: center;
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
	font-family: 'Apercu Mono', "courier new", monospace;
	font-size: 0.75em;
	line-height: 2;
	color: #999;
}

#photo-tags li {
	display: inline;
	/* margin-left: 1em;	 */
}

#photo-tags li:before { content: ", "; }
#photo-tags li:first-child:before { content: ""; }

#photo-tags li a {
	color: #999;
}

#photo-tags li.active a {
	border-bottom: 1px solid #999;
}

#photo-wall-header,
#projects-grid-header {
	margin: 1.5em 0 1.875em;
	padding: 1em 0;
	background-image: linear-gradient(to right, rgba(156,156,156,1) 33%, rgba(255,255,255,0) 0%);
	background-position: bottom;
	background-size: 3px 1px;
	background-repeat: repeat-x;
}

#photo-wall img {
    position: absolute;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ddd;
}

#photo-filters {
	margin: 0 auto;
}

.page-intro + #photo-filters {
	margin-top: -8px;
}

#photo-sets {
	float: left;
	/* height: 2em; */
}

ul.photo-sets {
	/* position: absolute; */
	/* font-family: "courier new", monospace; */
    font-size: 1em;
    line-height: 1.5;
	margin-top: 1.25em;
	padding: 1em;
	/* display: none; */
	z-index: 999;
	background-color: #eee;
	margin-bottom: 32px;
}

ul.photo-sets li {
	font-size: 0.875em;
	line-height: 1.714285714285714;
}

ul.photo-sets .photoset-title {
	font-family: 'Apercu', sans-serif;
    font-weight: bold;
	font-size: 1.125em;
	line-height: 1.333333333333333;
	margin-top: 1.333333333333333em;
}


ul.photo-sets li.active a {
	border-bottom: 1px solid #333;
}

ul.photo-sets li .setcount {
	font-size: 0.8571428571428571em;
	line-height: 2;
	font-weight: normal;
	opacity: .5;
}

.photo .photo-single {
	/* padding-top: 4.5em; */
	width: 100%;
	max-width: 1536px;
	margin: 0 auto 3em;
}

.single-photo-meta-and-set {
	width: 100%;
	max-width: 480px;
	text-align: center;
	margin: 0 auto 4.5em;
}

.photo ul.exif-data {
    font-family: 'Apercu Mono';
    font-size: 0.75em;
    line-height: 1.5;
	margin: 0.25em auto;
	text-align: center;
}

.photo .from-set {
	font-family: 'Apercu';
	margin: 0 auto;
	text-align: center;
}

.photo .from-set a {
	color: #0099ff;
	border-bottom: none;

}

.photo .photo-single img {
	margin-bottom: 0;
}

#more-photos {
	height: 24px;
	margin: 0 auto;
}

.more-photos-btn-wrap {
	text-align: center;
	margin-top: 1.5em;
}

.icon-text {
	font-family: "Apercu Mono";
	font-size: 0.875em;
	line-height: 1;
	display: inline-block;
	height: 1.714285714285714;
	padding: 0.3571428571428571em;
	vertical-align: top;
	text-transform: uppercase;
}

#more-photos .icon24 {
	display: inline-block;
	height: 24px;
	vertical-align: top;
}

#more-photos svg {
	fill: #0099ff;
}






#view-full-width {
	float: right;
}

#view-full-width svg {
	fill: #0099ff;
}

.icon20 {
	width: 32px;
	height: 32px;
	padding: 6px;
	background-image: url('/site/templates/img/icons/list.svg');
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: 6px 6px;
	opacity: 0.75;
}

.icon20-expand {
	background-image: url('/site/templates/img/icons/expand.svg');
}

.icon20-expand.active {
	background-image: url('/site/templates/img/icons/2x2grid.svg');
}

.icon20-tag {
	background-image: url('/site/templates/img/icons/tag.svg');
}

/* #photo-set-icon {
	width: 32px;
	height: 32px;
	padding: 6px;
	background-image: url('/site/templates/img/icons/list.svg');
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: 6px 6px;
	opacity: 0.75;
} */


#popup-shroud {
	display: none;
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #eee;
	z-index: 777;
	cursor: pointer;
}

#popup {
	display: none;
	position: fixed;
	top: 0;
	z-index: 999;
	/* background-color: blue;  */
}

#popup img {
	margin-bottom: 0;
}

#popup-img-info {
	position: fixed;
	width: 20em;
	background-color: #fff;
	padding: 1.5em 2em 1.75em;
	opacity: 0;
	z-index: -1;
}

#popup-img-info li.date-taken {
	margin-top: 2em;
}

#popup-img-info #caption-expander {
	display: inline-block;
	height: 1.5em;
	position: absolute;
	bottom: 1.5em;
	right: 2em;
}

#popup-img-info h2 {
	display: inline-block;
	font-family: 'Apercu';
	font-size: 1.5em;
	line-height: 1.125; /* 27px */
	margin-right: 1.5em;
}

#popup-img-info .permalink {
	display: inline-block;
	padding: 0.09375em 0;
	height: 1.6875em;
	position: absolute;
	top: 1.5em;
	right: 2em;
}

#popup-img-info h3 {
	font-family: 'Apercu';
	font-size: 0.75em;
	line-height: 1.5; /* 18px */
	margin: 0;
	margin-top: 0.75em; /* 9px */
	padding: 0;
}

#popup-img-info ul.exif-data {
	font-family: 'Apercu Mono';
	font-size: 0.75em;
	line-height: 1.5;
	margin-top: 1.5em;
}

#popup-img-info .caption {
	margin: 0;
}

#popup-img-info .caption p {
	font-size: 0.75em;
	line-height: 1.5; /* 18px */
	margin-top: 1.5em;
	margin-bottom: 0;
}

a.img-go-popup-simple {
	display: block;
}

a.img-go-popup-simple.zoom {
	cursor:pointer;
	cursor:-webkit-zoom-in;
	cursor:-moz-zoom-in;
}

#mainnav ul.menu-header {
	display: none;
}

#mainnav ul.menu-header {
	display: none;
}

#mainnav ul.menu-header li.menu-header-title {
	color: #444;
	font-size: 0.75em;
	height: 4em;
	line-height: 2;
	padding: 1em 0;
}

#mainnav ul.menu-header li.menu-header-title .menu-text {
	opacity: 0;
}

#menu-unfurl {
	display: inherit;
}

#nav-shroud {
	display: none;
}


.projects header {
	margin: 0 auto;
	margin-bottom: 2.25em;
}

.projects #projects-grid-header {
	padding-bottom: 0.8125em;
	margin-top: 0;
	padding-top: 2.5em;
}

.projects #projects-grid-header-inner {
	margin-right: 120px;
	position: relative;
}

.projects #projects-grid-header #projects-sets {
	margin-top: 0.8125em;
}

.projects #projects-grid-header #projects-header-filter-status {
	text-align: right;
    position: absolute;
	top: 0;
	width: 100%;
	overflow-x: scroll;
	overflow-y: hidden;
	left: 120px;
    font-family: 'Apercu';
    letter-spacing: 0.5px;
    font-size: 0.75em;
    margin-top: 1em;
    /* line-height: 1.3125em; */
	opacity: 0.9;
	/* margin-right: -0.3333333em; */
	min-height: 2.666666667em;
	-webkit-transition: left .5s ease-in-out;
    -moz-transition: left .5s ease-in-out;
    -o-transition: left .5s ease-in-out;
    transition: left .5s ease-in-out;
	white-space: nowrap;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.projects #projects-grid-header #projects-header-filter-status::-webkit-scrollbar {
	display: none;
}
  
/* Hide scrollbar for IE, Edge and Firefox */
.projects #projects-grid-header #projects-header-filter-status {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

.projects #projects-grid-header #projects-header-filter-status.gotTask #projects-header-filter-status-task {
	margin-left: .333333333333333333em;
}

.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-role span {
	font-family: 'Apercu Condensed';
	font-weight: normal;
	line-height: 1.3125em
}

.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-role,
.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-task {
	margin-left: 0;
	overflow: hidden;
	display: inline-block;
	font-weight: bold;
	background-color: rgba(0, 0, 0, 0.6);
	color: #f2f2f2;
    padding: 0;
    line-height: 2em;
    border-radius: 4px;
	position: relative;
	min-width: 8px;
	opacity: 1;
	-webkit-transition: opacity .2s ease-in-out, padding .5s ease-in-out, margin .5s ease-in-out;
    -moz-transition: opacity .2s ease-in-out, padding .5s ease-in-out, margin .5s ease-in-out;
    -o-transition: opacity .2s ease-in-out, padding .5s ease-in-out, margin .5s ease-in-out;
    transition: opacity .2s ease-in-out, padding .5s ease-in-out, margin .5s ease-in-out;
}

.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-role .strikethrough-el,
.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-task .strikethrough-el {
	position: absolute;
    left: .5em;
    width: 100%;
    height: 2em;
    padding-right: 160px;
	opacity: 0;
	-webkit-transition: opacity .2s ease-in-out, padding 0.5s ease-in-out;
    -moz-transition: opacity .2s ease-in-out, padding 0.5s ease-in-out;
    -o-transition: opacity .2s ease-in-out, padding 0.5s ease-in-out;
    transition: opacity .2s ease-in-out, padding 0.5s ease-in-out;
}

.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-role.disable .strikethrough-el {
	display: none;
}

.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-role:hover .strikethrough-el,
.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-task:hover .strikethrough-el {
    padding-right: 27px;
	opacity: 0.6;
}

.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-role .strikethrough-el div,
.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-task .strikethrough-el div {
	background-color: red;
    position: relative;
    width: 100%;
    height: 2px;
	top: 0.9166666666666667em;
}

.projects #projects-grid-header #projects-header-filter-status .projects-header-filter-status-title {
	padding: 0 0 0 0.75em;
	text-align: left;
	white-space: nowrap;
	margin: 0;
	-webkit-transition: margin .2s ease-in-out;
    -moz-transition: margin .2s ease-in-out;
    -o-transition: margin .2s ease-in-out;
    transition: margin .2s ease-in-out;
}

.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-task {
	/* margin-right: 0; */
}

.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-role svg,
.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-task svg {
	position: absolute;
	top: 6px;
	right: 5px;
	opacity: 1;
	-webkit-transition: opacity .2s ease-in-out, color .5s ease-in-out;
    -moz-transition: opacity .2s ease-in-out, color .5s ease-in-out;
    -o-transition: opacity .2s ease-in-out, color .5s ease-in-out;
    transition: opacity .2s ease-in-out, color .5s ease-in-out;
}

.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-role svg.hide,
.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-task svg.hide {
	opacity: 0;
}

.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-role.disable .projects-header-filter-status-title,
.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-task.disable .projects-header-filter-status-title {
	margin-left: 1em;
}

.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-role.disable svg,
.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-task.disable svg {
	display: none;
}

.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-role span {
	font-family: 'Apercu Condensed';
	font-weight: normal;
}

.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-role.hide,
.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-task.hide {
	opacity: 0;
}

.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-role.unset,
.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-task.unset {
	width: 0;
	min-width: 0;
}

.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-role.unset svg,
.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-task.unset svg {
	opacity: 0;
}



#projects-sets #projects-set-icon {
	float: left;
}

#projects-sets .iso-button-label {
	float: left;
    text-transform: uppercase;
    font-size: .625em;
    line-height: 2.4em;
    padding-left: 0.5em;
    color: #555;
}

.projects-skills-tag-label {
	color: #999;
    font-size: 0.8333333333em;
    font-family: 'Apercu Mono';
    position: absolute;
    text-align: center;
    width: 120px;
    padding-top: 3px;
    left: -51px;
    word-spacing: 32px;
}

.projects #content .icon24 svg {
	fill: none;
	stroke:#0099ff; 
}

#projects-filters {
	margin-top: -0.3125em;
	margin-bottom: 2em;
	padding: 1.125em;
	padding-bottom: 1.3125em;
	background-color: #eee;
	overflow: hidden;
	border-radius: 1em;
}

.projects .page-intro {
	margin: 0 auto;
	margin-bottom: 3em;
	max-width: 480px;
    margin-right: auto;
    margin-left: auto;
    text-align: justify;
}

.projects h1 {
	text-align: center;
}


.projects .iso-grid { margin: 0 -0.75em; margin-top: -0.333333333em; } 
.projects .iso-item, .projects .iso-sizer { width: 33.33333333%; }
/* .projects .iso-item { padding: 0 2% 2% 0 ; } */
.projects .iso-item-w2 { width: 66.6%; }

.project-block-inner {
	margin: 0 0.75em 1.5em;
	background-color: #eee;
	border-radius: 1em;
	overflow: hidden;
	cursor: pointer;
	transition: transform .1s ease-in-out;
}

.project-block-inner:hover {
	transform: scale(1.01)
}

.project-block-inner .project-info {
	opacity: 1;
	transition: opacity ease-in-out .2s;
}

.project-block-inner:hover .project-info {
	opacity: .9;
}	

.projects .iso-item-w2 .project-block-inner {
	margin: 2.5%;
}

.projects .project-grid-image {
	position: relative;
}

.projects .project-block-inner img {
	margin-bottom: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}

.projects .iso-filter, .iso-button-title {
	font-size: 0.75em;
	font-family: 'Apercu Mono';
	background: #ddd;
    color: #555;
	background: #fefefe;
    border-radius: 0.33333em;
    line-height: 2.6666666666666666666666666666667;
    margin: 0.3333333333333333em 0.3333333333333333em 0 0;
    padding: 0 1em;
	-webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
	opacity: 100%;
}

.projects .iso-filter {
	font-family: 'Apercu';
    letter-spacing: .25px;
	color: #666;
}

.projects .iso-filter span.condensed {
	font-family: 'Apercu Condensed';
	letter-spacing: .5px;
}

.projects .iso-filter .iso-filter-count-bracket-left {
	margin-left: .4166666667em;
}

.projects .project-filters-skill {
	text-align: center;
	padding: 0 1em 0.75em;
}

.projects .project-filters-skill .iso-filter, .project-filters-skill .iso-button-title {
	font-family: 'Apercu Mono';
	letter-spacing: -0.25px;
	background-color: rgba(0,0,0,0);
	line-height: 1.5em;
}

.project-filters-skill .iso-button-title {
	padding: 0;
	width: 24px;
	margin: 0 auto;
	padding: 1.5em 0 0;
	fill: #888;
	position: relative;
	padding-bottom: 0.5em;
}

.projects .project-filters-skill .iso-filter {
	padding: 0 0.25em;
    margin: 0;
	color: #888;
}

.projects .project-filters-skill .iso-filter:last-child {
	padding-right: 0;
	margin-right: 0;
}

.projects .project-filters-skill .iso-filter-count-bracket,
.projects .project-filters-skill .iso-filter-count {
	display: none;
	visibility: hidden;
}


.project-filters-skill .iso-button-title {
	display: block;
	float: none;
}

.projects .project-filters-skill .iso-filter.hide {
	/* width: 0px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap; */
}

.projects .project-info {
	padding: 1.5em;
}

.projects .project-info h4,
.projects .project-info h4 + p {
	font-family: 'Apercu';
}

.projects .project-info h4 + p {

}

.projects .project-info ul, .projects .project-info h5 {
	font-size: 0.625em;
	line-height: 1.6em;
    font-family: 'Apercu';
	letter-spacing: 0.05em;
	display: inline;
	color: #777;
}

.projects .project-info h5 {
	font-family: 'Apercu Mono';
	letter-spacing: 0;
}

.projects .project-info ul li {
	border-radius: 3px;
	display: inline-block;
	margin-right: 3px;
	margin-bottom: 1px;
	padding: 3px 6px;
	background-color: #fff;
}

.projects .project-info ul li.hidden {
	height: 0;
	width: 0;
	padding: 0;
	overflow: hidden;
	display: none;
}

.projects .project-info .no-wrap-elements {
	display: inline-block;
}

.projects .project-info h5 {
	text-transform: uppercase;
	border-radius: 3px;
	display: inline-block;
	font-weight: bold;
	background-color: #fff;
	margin-right: 3px;
	margin-bottom: 1px;
	padding: 3px 6px;
}

.project-item-skills-title {
	text-transform: uppercase;
	font-weight: bold;
}

.projects .project-info ul li:first-child {
	/* margin-left: 0;
	padding: 0; */
}

.iso-button-title {
	/* display: inline-block; */
	float: left;
	background-color: #555;
	background-color: rgba(0,0,0,0.5);
	border-radius: 0.3333333em;
	color: #fefefe;
	text-transform: uppercase;
}

.projects .iso-filter .iso-filter-title,
.projects .projects-header-filter-status .projects-header-filter-status-title {
	display: inline-block;
}

.projects .iso-filter.active {
	background: #aaa;
	background-color: #ffe60087;
	/* background-color: rgba(0,0,0,0.3); */
	color: #444;
	padding: 0 .8333333333333333333em; 
    line-height: 2.33333333333em;
    border: solid .166666666666em white;
	-webkit-transition: background-color 0.5s ease-in-out;
    -moz-transition: background-color 0.5s ease-in-out;
    -o-transition: background-color 0.5s ease-in-out;
    transition: background-color 0.5s ease-in-out;
}

.projects .pskills .iso-filter.active {
	background-color: #ffe60087;
	padding: 0 .25em;
	line-height: 1.5em;
	border: initial;
	color: #666;
}

.projects .iso-filter.active .iso-filter-count-bracket,
.projects .iso-filter.active .iso-filter-count {
	color: #666;
}

.projects .iso-filter.hide {
	opacity: 20%;
}

.projects .iso-filter-count {
	display: inline-block;
	width: 1.818181818em;
	font-family: 'Apercu Mono';
	color: #999;
	text-align: center;
	opacity: 0.7;
}

.projects .iso-filter-count-bracket {
	opacity: 0.7;
	/* font-family: 'Apercu Mono'; */
	color: #999;
}

.projects .project-info-footer {
	position: relative;
}

.projects .project-info-col {
	float: left;
	width: 100%;
	/* padding-right: 108px; */
	padding-bottom: 1.5em;
}

.projects .project-info-col .project-item-skills {
	padding-right: 60px;
	display: inline;
}

.projects .project-info-col-2 {
	/* float: right; */
	/* width: 96px; */
	/* text-align: right; */
	/* position: absolute; */
	/* bottom: 0px; */
	/* right: 0px; */
	text-align: left;
}

.projects .project-more-btn-a a {
	/* background-color: #0099ff; */
	color: #333;
	border-bottom: 2px solid #0099ff;
	font-family: 'Apercu', sans-serif;
    font-weight: bold;
    /* font-size: 1.125em; */
    line-height: 1.5em;
	display: inline-block;
} 

.projects .project-more-btn a {
	color: #eee;
	background-color: #3399ffd7;
	/* background-color: #7e7e7e; */
	/* border: 1px solid #3399ff; */
	/* border-bottom: 2px solid #3399ff; */
	/* border-radius: 1px; */
	font-family: 'Apercu', sans-serif;
    font-weight: bold;
    font-size: 0.875em;
    line-height: 1.875em;
	padding: 0 1em;
	display: inline-block;
	border-radius: 0.4166666666666667em;
	letter-spacing: 0.0416666666666667em;
	text-transform: uppercase;
} 

.projects.project header {
	margin: 0 auto;
	margin-bottom: 1.125em;
}

.projects.project h1 {
	text-align: center;
	font-family: 'Apercu', sans-serif;
    font-weight: normal;
    font-size: 2.875em;
    line-height: 1.0434782608695652173913043478261em;
	/* font-family: "libre baskerville"; */
    /* font-style: italic; */
}

.projects.project .project-date {
	position: absolute;
    top: 19em;
    left: 50%;
    width: 80px;
    margin-left: -40px;
    font-family: 'Apercu';
    font-size: 0.75em;
    color: #999;
	text-align: center;
}

.projects.project .project-subheader {
	text-align: center;
	margin-bottom: 3em;
}

.projects.project h2 {
	font-family: 'Apercu';
	font-size: 1.125em; 
	line-height: 2em;
	font-weight: bold;
	color: #333;
	/* font-family: "libre baskerville"; */
    /* font-style: italic; */
}

.projects.project .project-subheader h3 {
	font-family: 'Apercu';
	font-size: 0.75em;
	color: #999;
	line-height: 1;
	padding-top: .5em;
	margin-bottom: .5em;
}

.projects.project .project-subheader h3 span {
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.projects.project .project-subheader h3 span.project-subheader-year {
	margin-left: 1.5em;
}

.projects.project .project-blurb {
	width: 100%;
	max-width: 540px;
	float: left;
}

.projects.project .more-blurb {
	width: 100%;
	max-width: 620px;
	float: left;
	padding: 1em 0;
	margin-bottom: 3%;
}

.projects.project .more-blurb p:last-child {
	margin-bottom: 0;
}

.projects.project .project-blurb h4 {
	display: block;
	padding-top: 3em; 
	font-family: 'Libre Baskerville';
	font-size: 1em;
	margin-right: 0.375em;
	line-height: 1.3333333em;
	width: 120px;
	text-align: right;


	font-family: 'Apercu', sans-serif;
    font-size: 1.125em;
    /* padding-top: 0.52173913043478260869565217391305em; */
    /* line-height: 1.0434782608695652173913043478261em; */
    /* margin-bottom: 0.52173913043478260869565217391304em; */
	font-weight: bold;




}

.projects.project .project-blurb h4 + p {
	margin-top: -1.714285714285714em;
	padding-left: 126px;
}

.projects.project .project-blurb-sidebar {
	float: right;
	margin-top: 3em;
	padding: 2em 0 2em 0;
	/* background-color: #eee; */
	color: #555;
	letter-spacing: 0.25px;

	/* float: right; */
	font-family: 'Apercu';
	font-size: 0.8125em;
	line-height: 1.5em;
	text-align: left;
	border-radius: .5em;
	width: 100%;
	max-width: 160px;
}

.projects.project .project-skill-task-list {

}

.projects.project .project-blurb-sidebar h5 {
	text-transform: uppercase;
	letter-spacing: 0.75px;
	font-weight: bold;
	color: #222;
	font-size: 0.9166666666666667em;
}

.projects.project .project-blurb-sidebar h5 svg {
	vertical-align: top;
	margin: -1px 0 1px 2px;
	color: #222;
}

.projects.project .project-related-urls li {
	/* font-size: .83333em; */
    /* font-weight: 700; */
	line-height: 1.8em;
}

.projects.project .project-related-urls li a {
	font-family: 'Apercu Condensed';
	color: #333;
	text-decoration: underline;
	text-decoration-color: #27a8ff;
	text-decoration-thickness: 1px;
}

.projects.project .project-blurb-sidebar h5 svg {
	width: 13px;
	height: 18px;
	padding-top: 0;
	margin-left: 4px;
}

.projects.project .project-related-urls li a,
.projects.project .project-related-urls li svg {
	display: inline-block;
	vertical-align: top;
}

.projects.project .project-related-urls li svg {
	color: #555;
}

.projects.project .project-related-urls li a {
	/* text-transform: uppercase; */
	/* margin-top: 1px;
	margin-bottom: -1px; */
}

.projects.project .project-tasks,
.projects.project .project-skills {
	margin-bottom: 2em;
}

.projects.project .project-tasks li,
.projects.project .project-skills li {
	font-family: 'Apercu Condensed';
}

.projects.project figure img,
.projects.project .video-embed {
	margin-bottom: 3%;
}

.projects.project .video-embed {
	overflow: hidden;
}

.projects.project .video-embed iframe.sproutvideo-player {
	/* width: calc(100% + 4px) !important;
	height: calc(100% + 4px) !important;
	top: -2px !important;
	left: -2px !important; */
}



.projects.project .medium-medium figure img,
.projects.project .wide-narrow figure img,
.projects.project .narrow-wide figure img,
.projects.project .narrow-narrow-narrow figure img,
.projects.project .narrow-narrower-narrow figure img {
	margin-bottom: 0;
}

.projects.project .medium-medium figure figcaption,
.projects.project .wide-narrow figure figcaption,
.projects.project .narrow-wide figure figcaption,
.projects.project .narrow-narrow-narrow figure figcaption,
.projects.project .narrow-narrower-narrow figure figcaption {
	margin-top: 0.727272727272em;
	margin-bottom: 0;
}

.projects.project .medium-medium figure,
.projects.project .wide-narrow figure,
.projects.project .narrow-wide figure,
.projects.project .narrow-narrow-narrow figure,
.projects.project .narrow-narrower-narrow figure {
	margin-bottom: 0;
}

.projects.project .medium-medium figure,
.projects.project .wide-narrow figure,
.projects.project .narrow-wide figure,
.projects.project .narrow-narrow-narrow figure,
.projects.project .narrow-narrower-narrow figure { 
	margin-bottom: 3%
}

.projects.project .medium-medium figure {
	width: 50%;
	float: left;
	padding-left: 1.5%;
	padding-right: 0;
}


.projects.project .medium-medium figure:first-child {
	padding-left: 0;
	padding-right: 1.5%;
}

.projects.project .wide-narrow figure {
	width: 33.3333333%;
	float: left;
	padding-left: 1%;
	padding-right: 0;
}

.projects.project .wide-narrow figure:first-child {
	width: 66.6666666%;
	padding-left: 0;
	padding-right: 2%;
}

.projects.project .narrow-wide figure {
	width: 66.6666666%;
	float: left;
	padding-right: 0;
	padding-left: 2%;
}

.projects.project .narrow-wide figure:first-child {
	padding-left: 0;
	width: 33.3333333%;
	padding-right: 1%;
}

.projects.project .narrow-narrow-narrow {
	margin-right: 0;
	margin-left: 0;
}

.projects.project .narrow-narrow-narrow figure {
	width: 33.3333333%;
	float: left;
	padding-right: 1%;
	padding-left: 1%;
}

.projects.project .narrow-narrow-narrow figure:first-child {
	padding-left: 0%;
	width: 33.3333333%;
	padding-right: 2%;
}

.projects.project .narrow-narrow-narrow figure:last-child {
	padding-left: 2%;
	width: 33.3333333%;
	padding-right: 0;
}

.projects.project .narrow-narrower-narrow {
	margin-right: 0;
	margin-left: 0;
}

.projects.project .narrow-narrower-narrow figure {
	width: 33.3333333%;
	float: left;
	padding-right: 2%;
	padding-left: 2%;
}

.projects.project .narrow-narrower-narrow figure:first-child {
	padding-left: 0%;
	width: 33.3333333%;
	padding-right: 1%;
}

.projects.project .narrow-narrower-narrow figure:last-child {
	padding-left: 1%;
	width: 33.3333333%;
	padding-right: 0;
}

.projects.project .elsplyr {
	margin: 0.25% 0 3.25%;
}

.projects.project .video-caption {
	width: 100%;
	max-width: 480px;
	font-size: 0.75em;
	margin-top: -3%;
	padding-top: 1.5em;
}

.projects.project .video-caption + .video-external-link {
	font-family: 'Apercu Mono';
	font-size: 0.6875em;
	color: #333;
	margin-top: -18px;
	padding-top: 10px;
	margin-bottom: calc(3% + 1em)
}

.projects.project .video-caption + .video-external-link svg {
	vertical-align: top;
	height: 14px;
	margin: 5px 2px -5px 0;
	color:#0099ffd0;
}

.projects.project .video-caption + .video-external-link a {
	color: #555;
	border-bottom: 1px solid #0099ff;
}

.projects.project #content .supporting-images.group + p {
	margin-top: -3%;
    padding-top: 1.5em;

}

/* DEV STUFF */

.dev-hide {
	display: none;
	visibility: hidden;
	opacity: 0;
}



@media (max-width: 480px) {

	.projects #projects-grid-header.gotTask #projects-header-filter-status #projects-header-filter-status-role,
	.projects #projects-grid-header.gotTask #projects-header-filter-status #projects-header-filter-status-task {
		/* display: inline-block; */
		float: right;
		margin-right: 0.333333333333333333em;
	}

	.projects #projects-grid-header.gotTask #projects-header-filter-status #projects-header-filter-status-task {
		margin-top: 0.333333333333333333em;
		clear: right;
	}

	.projects #projects-grid-header #projects-grid-header-inner {
		transition: padding ease-in-out .3s;
	}

	.projects #projects-grid-header.gotTask #projects-grid-header-inner {
		padding-top: 1.6875em;
	}

	.projects #projects-grid-header {
		transition: padding ease-in-out .3s;
	}

	.projects #projects-grid-header.gotTask {
		padding-top: 0.8125em;
	}


	/* project images on mobile */

	.projects.project .medium-medium figure {
		padding-left: 0;
	}

	.projects.project .medium-medium figure,
	.projects.project .wide-narrow figure,
	.projects.project .wide-narrow figure:first-child,
	.projects.project .narrow-wide figure,
	.projects.project .narrow-wide figure:first-child,
	.projects.project .narrow-narrow-narrow figure,
	.projects.project .narrow-narrow-narrow figure:first-child,
	.projects.project .narrow-narrow-narrow figure:last-child,
	.projects.project .narrow-narrower-narrow figure,
	.projects.project .narrow-narrower-narrow figure:first-child,
	.projects.project .narrow-narrower-narrow figure:last-child {
		width: 100%;
	}

	.projects.project .medium-medium figure:first-child,
	.projects.project .wide-narrow figure:first-child,
	.projects.project .narrow-wide figure:first-child,
	.projects.project .narrow-narrow-narrow figure,
	.projects.project .narrow-narrow-narrow figure:first-child,
	.projects.project .narrow-narrower-narrow figure,
	.projects.project .narrow-narrower-narrow figure:first-child {
		padding-right: 0;
	}


	.projects.project .wide-narrow figure,
	.projects.project .narrow-wide figure,
	.projects.project .narrow-narrow-narrow figure,
	.projects.project .narrow-narrow-narrow figure:last-child,
	.projects.project .narrow-narrower-narrow figure,
	.projects.project .narrow-narrower-narrow figure:last-child {
		padding-left: 0;
	}

}


@media (max-width: 580px) {

	.projects #projects-grid-header #projects-header-filter-status .projects-header-filter-status-title span.condensed {
		display: none;
	}

	/* this is a quick fix... if the user is on a larger screen size (e.g. desktop) and resizes the DOM to be below 580w, 
		then sizing of any button containing that span.condensed text may be screwed up, as we resize it using javascript.
		maybe later we can add in an additional javascript window resize check, but it really is edge case as the user would
		need to have dynamically selected a job role with the condensed text, and also would need to then resize the DOM from
		over 580 to below 580 (or visa-versa), which seems a very unlikely scenario.
		*/ 

}












@media (max-width: 799px) {

    #that-a-wrap {
        /* padding-left: 8%; */
        /* padding-right: 8%; */
    }

    body.projects #content,
    body.photo-wall #content {
        margin: 0;
    }

    #that-a-wrap {
        /* padding-left: 8%; */
        /* padding-right: 8%; */
    }

/*     .grid-sizer,
    #photo-wall .item {
        width: 100%;
    }

	.photo-sets {
		width: 100%;
	} */

    #photo-wall {
        /* margin: 0; */
    }

	#view-full-width {
		opacity: 0;
	}

	.projects.project .project-blurb h4 {
		margin-right: 0;
		line-height: 1.5em;
		width: initial;
		text-align: left;
		margin-bottom: .25em;
		padding-top: 1.5em;
	}
	
	.projects.project .project-blurb h4 + p {
		margin-top: 0;
		padding-left: 0;
	}

	body.projects.project #content .project-blurb {
		float: none;
		padding-bottom: 0;
	}

	.projects.project .project-blurb-sidebar {
		float: none;
		margin-top: 2em;
		padding: 2em 0 2em 0;
		/* background-color: #eee; */
		color: #555;
		letter-spacing: 0.25px;
	
		/* float: right; */
		font-family: 'Apercu';
		/* font-size: 0.75em; */
		line-height: 1.5em;
		text-align: right;
		border-radius: .5em;
		width: 100%;
		max-width: 100%;
		padding-bottom: 4em;
	}

	.projects.project .project-blurb-sidebar h5 svg {
		margin-left: 3px
	}

	.projects.project .project-blurb-sidebar .project-skill-task-list {
		float: left;
		width: 66%;
	}

	.projects.project .project-blurb-sidebar .project-skill-task-list.no-urls {
		width: 100%;
	}

	.projects.project .project-blurb-sidebar .project-skill-task-list .project-tasks,
	.projects.project .project-blurb-sidebar .project-skill-task-list .project-skills {
		float: left;
		width: 47%;
		text-align: center;
	}

	.projects.project .project-blurb-sidebar .project-skill-task-list .project-tasks,
	.projects.project .project-blurb-sidebar .project-skill-task-list .project-skills,
	.projects.project .project-blurb-sidebar .project-related-urls {
		/* background-color: #eee; */
		margin: 0 3%;
	}

	.projects.project .project-blurb-sidebar .project-skill-task-list .project-tasks {
		margin-left: 0;
	}

	.projects.project .project-blurb-sidebar .project-skill-task-list .project-skills {
		margin-right: 0;
	}

	.projects.project .project-blurb-sidebar .project-skill-task-list.no-urls .project-tasks,
	.projects.project .project-blurb-sidebar .project-skill-task-list.no-urls .project-skills {
		width: 44%;
		margin: 0 3%;
	}



	.projects.project .project-blurb-sidebar .project-related-urls {
		margin-right: 0;
		margin-left: 2.5%; 
	}

	.projects.project .project-blurb-sidebar .project-skill-task-list .project-tasks {
		/* text-align: center; */
	}

	.projects.project .project-blurb-sidebar .project-related-urls {
		text-align: center;
		width: 31.5%;
		float: right;
	}




}

.works #webfont-forceload {
	font-style: italic;
}


@media (max-width: 830px) {
	.works #content .worksnav .marginalise {
		position: relative;
		margin-left: inherit;
		text-align: left;
		padding: 1em 0;
		/* padding: 0; */
		line-height: 2em;
	}
	.works #content.sorted-by-ensemble-size .margin-dots.hide {
		/* visibility: hidden; */

	}
}


@media (max-width: 1152px) {

	.main {
		/* padding-left: 4.166666666666667%; */
		/* padding-right: 4.166666666666667%; */
	}

}

@media (max-width: 1172px) {
	#mainnav {
		display: block;
		width: 90%;
		max-width: 960px;
	}
}


/* @media (min-width: 1281px) {

    .grid-sizer,
    #photo-wall .item {
        width: 25%;
    }

    #photo-wall .item {
        padding: 0.75%;
    }

    #photo-wall {
        margin-left: -0.75%;
        margin-right: -0.75%;
    }

}

@media (min-width: 1707px) {

    .grid-sizer,
    #photo-wall .item {
        width: 20%;
    }

    #photo-wall .item {
        padding: 0.6%;
    }

    #photo-wall {
        margin-left: -0.6%;
        margin-right: -0.6%;
    }

} */

@media (max-width: 1280px) {

	#that-a-wrap {
		max-width: 540px;
	}
	.aside {
		float: none;
		width: 100%;
		/* text-align: right; */
	}
	.works #sidebar {
		float:none;
		width: 100%;
		max-width: inherit;
		margin-bottom: 4em;
	}
	.work #sidebar {
		float: left;
	}
	.work #sidebar h3 {
		color: #222;
		padding-top: 0.5217391304347826em;
		margin: 1.043478260869565em 0;
		display: block;
		visibility: initial;
		font-size: 1.916666666666667em;
	}
	.home #sidebar {
		float: none;
		width: 100%;
		margin-top: 6em;
	}
	.about #sidebar {
		float: none;
		width: 100%;
		margin-top: 6em;
	}
  .about.has-sidebar main {
    float: none;
  }
	.home #sidebar .home-pinboard {
		width: 66%;
		max-width: 320px;
		float: left;
	}
	.home.has-sidebar main {
		float: none;
	}
	.home .home-pinboard,
	.home .home-pinboard.pin-date	{
		margin-top: 0;
	}
	.blog .blurb {
		margin-bottom: 1.5em;
	}
	.blog-meta {
		display: block;
		width: 50%;
		float: left;
		padding-right: 4%;
	}
	.blog-meta:first-child {
		width: 100%;
	}

	.blog-meta:nth-child(2) {
		padding-right: 8%;
	}

	

	body.projects #that-a-wrap {
		width: 94%;
	}

	.projects .iso-item, .projects .iso-sizer {
		width: 50%;
	}

	.blog-meta.social-proof {
		margin-top: 0;
		margin-bottom: 31px;
	}



}

@media (max-width: 960px) {

	.projects .iso-item, .projects .iso-sizer {
		width: 100%;
	}

}

@media (max-width: 640px) {

	body.projects.project #that-a-wrap {
		width: 94%; 
	}

	#initials {
		width: auto;
		margin-bottom: 0;
		margin-top: 0 !important;
	}

	.blog #mainnav {
		margin-bottom: 0;
	}

	.navgroup {
		background-color: #fff;
		z-index: 999;
		padding-left: 5%;
		padding-right: 5%;
		padding: 0;
	}

	.nav-wrap {
		display: block;
		width: 100%;
	}

	#mainnav {
		height: auto;
		position: relative;
		width: 90%;
		margin: 0 5%;
		padding-top: 4.5em;
		padding-bottom: 1.5em;
		padding-left: 0;
		padding-right: 0;
	}

	#mainnav .mainnav .split {
		padding-bottom: 0 !important;
	}

	#menu-unfurl {
		display: none;
	}

	#mainnav ul.menu-header  {
		display: inline-block;
	}

	#mainnav ul {
		display:block;
	}

	#mainnav .mainnav li {
		height: 3.428571428571429em;
		margin: 0;
		padding: 0.8571428571428571em 0;
		display:block;
	}

	#mainnav .mainnav li.current {
		border-bottom: none;
	}

	#mainnav .mainnav li a {
		display: inline-block;
		line-height: 1.714285714285714em;
	}

	#mainnav .mainnav li.current a {
		border-bottom: 1px solid #0099ff;
	}

	#mainnav ul.more-items {
		position: relative;
		display: block;
		right: inherit;
		bottom: inherit;
	}

	#mainnav .more-items li {
		display:block;
	}

	#mainnav ul.more {
		display:none !important;
	}

	#nav-shroud {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 150%; /* means that when we scroll on mobile it stops the background peeking out */
		background-color: #eee;
		z-index: 666;
		opacity: 0;
	}

	.home #sidebar .home-pinboard {
		width: 100%;
		max-width: 320px;
		float: left;
	}

}



@media (hover: hover) {

	.pointer:hover {
		cursor: pointer;
	}
	
	.remove-btn-styling:hover {
		background:none;
		border:none;
	}
	
	button:hover {
		cursor: pointer;
		background: #bbb;
		color: #000111;
	}
	
	body.about #biog-lengther .biog-lengther:hover {
	  background: #bbb;
	}
	
	.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-role:hover,
	.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-task:hover {
		background-color: rgba(0, 0, 0, 0.55);
		color: #e2e2e2;
		cursor: pointer;
	}
	
	.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-role:hover svg,
	.projects #projects-grid-header #projects-header-filter-status #projects-header-filter-status-task:hover svg {
		color: rgb(228, 0, 0);
	}
	
	.projects #content .icon24 svg:hover {
		fill: none;
		stroke:#ffe600; 
	}
	
	.projects #content #projects-sets:hover .icon24 svg {
		fill: none;
		stroke:#ffe600; 
	}
	
	.projects #content #projects-sets:hover .iso-button-label {
		color: #111; 
	}
	
	.projects .pskills .iso-filter:hover {
		cursor: initial;
		background-color: rgba(0,0,0,0);
	}
	
	.projects .iso-filter:hover {
		background-color: #ffe600b0;
	}
	
	.projects .iso-filter.hide:hover {
		background-color: #fefefe;
		cursor: inherit;
	}
	
	.projects .pskills .iso-filter.hide:hover {
		background-color: rgba(0,0,0,0);
		cursor: inherit;
	}

}




@font-face { font-family: 'Apercu';
src: url('../fonts/apercu/apercu_regular_pro.eot'); /* IE9 Compat Modes */
src: url('../fonts/apercu/apercu_regular_pro.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/apercu/apercu_regular_pro.woff') format('woff'), /* Modern Browsers */
url('../fonts/apercu/apercu_regular_pro.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/apercu/apercu_regular_pro.svg#apercu_regular_pro') format('svg'); /* Legacy iOS */
	font-weight: normal;
	font-style: normal;
	}

@font-face { font-family: 'Apercu';
src: url('../fonts/apercu/apercu_bold_pro.eot'); /* IE9 Compat Modes */
src: url('../fonts/apercu/apercu_bold_pro.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/apercu/apercu_bold_pro.woff') format('woff'), /* Modern Browsers */
url('../fonts/apercu/apercu_bold_pro.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/apercu/apercu_bold_pro.svg#apercu_bold_pro') format('svg'); /* Legacy iOS */
	font-weight: bold;
	font-style: normal;
}

@font-face { font-family: 'Apercu Condensed';
	src: url('../fonts/apercu/apercu_condensed_pro-regular.eot'); /* IE9 Compat Modes */
	src: url('../fonts/apercu/apercu_condensed_pro-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('../fonts/apercu/apercu_condensed_pro-regular.woff') format('woff'), /* Modern Browsers */
	url('../fonts/apercu/apercu_condensed_pro-regular.ttf') format('truetype'), /* Safari, Android, iOS */
	url('../fonts/apercu/apercu_condensed_pro-regular.svg#apercu_condensed_pro-regular') format('svg'); /* Legacy iOS */
		font-weight: normal;
		font-style: normal;
		}
	
@font-face { font-family: 'Apercu Condensed';
src: url('../fonts/apercu/apercu_condensed_pro-italic.eot'); /* IE9 Compat Modes */
src: url('../fonts/apercu/apercu_condensed_pro-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/apercu/apercu_condensed_pro-italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/apercu/apercu_condensed_pro-italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/apercu/apercu_condensed_pro-italic.svg#apercu_condensed_pro-italic') format('svg'); /* Legacy iOS */
	font-weight: normal;
	font-style: italic;
}

@font-face { font-family: 'Apercu Condensed';
	src: url('../fonts/apercu/apercu_condensed_pro-bold.eot'); /* IE9 Compat Modes */
	src: url('../fonts/apercu/apercu_condensed_pro-bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('../fonts/apercu/apercu_condensed_pro-bold.woff') format('woff'), /* Modern Browsers */
	url('../fonts/apercu/apercu_condensed_pro-bold.ttf') format('truetype'), /* Safari, Android, iOS */
	url('../fonts/apercu/apercu_condensed_pro-bold.svg#apercu_condensed_pro-bold') format('svg'); /* Legacy iOS */
		font-weight: bold;
		font-style: normal;
		}
	
@font-face { font-family: 'Apercu Condensed';
src: url('../fonts/apercu/apercu_condensed_pro-bolditalic.eot'); /* IE9 Compat Modes */
src: url('../fonts/apercu/apercu_condensed_pro-bolditalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/apercu/apercu_condensed_pro-bolditalic.woff') format('woff'), /* Modern Browsers */
url('../fonts/apercu/apercu_condensed_pro-bolditalic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/apercu/apercu_condensed_pro-bolditalic.svg#apercu_condensed_pro-bolditalic') format('svg'); /* Legacy iOS */
	font-weight: bold;
	font-style: italic;
}

@font-face { font-family: 'Apercu Mono';
src: url('../fonts/apercu/apercu_mono_pro.eot'); /* IE9 Compat Modes */
src: url('../fonts/apercu/apercu_mono_pro.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/apercu/apercu_mono_pro.woff') format('woff'), /* Modern Browsers */
url('../fonts/apercu/apercu_mono_pro.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/apercu/apercu_mono_pro.svg#apercu_mono_pro') format('svg'); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
}

@font-face { font-family: 'Libre Baskerville';
src: url('../fonts/librebaskerville/librebaskerville-regular-webfont.eot'); /* IE9 Compat Modes */
src: url('../fonts/librebaskerville/librebaskerville-regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/librebaskerville/librebaskerville-regular-webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/librebaskerville/librebaskerville-regular-webfont.woff') format('woff'), /* Modern Browsers */
url('../fonts/librebaskerville/librebaskerville-regular-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/librebaskerville/librebaskerville-regular-pro.svg#librebaskerville-regular-webfont') format('svg'); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
  }

@font-face { font-family: 'Libre Baskerville';
src: url('../fonts/librebaskerville/librebaskerville-bold-webfont.eot'); /* IE9 Compat Modes */
src: url('../fonts/librebaskerville/librebaskerville-bold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/librebaskerville/librebaskerville-bold-webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/librebaskerville/librebaskerville-bold-webfont.woff') format('woff'), /* Modern Browsers */
url('../fonts/librebaskerville/librebaskerville-bold-pro.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/librebaskerville/librebaskerville-bold-pro.svg#librebaskerville-bold-webfont') format('svg'); /* Legacy iOS */
  font-weight: bold;
  font-style: normal;
  }

@font-face { font-family: 'Libre Baskerville';
src: url('../fonts/librebaskerville/librebaskerville-italic-webfont.eot'); /* IE9 Compat Modes */
src: url('../fonts/librebaskerville/librebaskerville-italic-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/librebaskerville/librebaskerville-italic-webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/librebaskerville/librebaskerville-italic-webfont.woff') format('woff'), /* Modern Browsers */
url('../fonts/librebaskerville/librebaskerville-italic-pro.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/librebaskerville/librebaskerville-italic-pro.svg#librebaskerville-italic-webfont') format('svg'); /* Legacy iOS */
  font-weight: normal;
  font-style: italic;
  }

p, p-size {
	-ms-font-feature-settings:     'liga' 1, 'onum' 1, 'frac' 1, 'ordn' 1;  /* IE10 */
	-moz-font-feature-settings:    'liga' 1, 'onum' 1, 'frac' 1, 'ordn' 1; /* Firefox */
	-webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'frac' 1, 'ordn' 1;  /* Chrome, Safari, Opera */
	font-feature-settings:         'liga' 1, 'onum' 1, 'frac' 1, 'ordn' 1;  /* Future-proof! */
}