/* COLORS: Dark type: #051237; Light type: #8D93A9; Light blue: #44C0FF;  */

/* Normalize - thanks to http://necolas.github.com/normalize.css/
--------------------------------------------------------------*/
html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust:     100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button,html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: none; margin: 0; padding: 0; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } 

/* Typography
--------------------------------------------------------------*/
body { font-family: 'Karla', Arial, sans-serif; color: #051237; font-size: 16px; font-size: 1rem; line-height: 1.5; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 1.5em; font-size: 1em; }
ol, ul { list-style-type: none; }
ul, ol { margin: 0; padding: 0; }
ul.disc { list-style: disc; }
ol.dec { list-style: decimal; }
li > ul, li > ol { margin-bottom: 0; }
p, li { margin: 0 0 1.5em; }
dfn, cite, em, i { font-style: italic; }
blockquote { margin: 0 1.5em; }
address { margin: 0 0 1.5em; }
pre { max-width: 100%; margin-bottom: 1.6em; padding: 1.6em; background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 0.9375rem; line-height: 1.6; overflow: auto; }
code, kbd, tt, var { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 15px; font-size: 0.9375rem; }
abbr, acronym { border-bottom: 1px dotted #666; cursor: help; }
mark, ins { background: #fff9c0; text-decoration: none; }
big { font-size: 125%; }
a { color: #051237; text-decoration: none; }
.nowrap { white-space: nowrap; }

/* Elements
--------------------------------------------------------------*/
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; } /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
body { background: #F6F6F6; }
img { height: auto; max-width: 100%; }

.clear:before,
.clear:after { content: ""; display: table; }
.clear:after { clear: both; }

/* Header
--------------------------------------------------------------*/
/* Header - Clearfix */
#site-header:before,
#site-header:after { content: ""; display: table; }
#site-header:after { clear: both; }

#page { width: 100vw; padding: 0 9%; overflow: hidden; } /* width + overflow keeps over-wide elements (especially background fades) from expanding page */
#site-header { position: relative; padding: 25% 0 2em; }
.page-project #site-header { padding-bottom: 0; }
.page-home #site-header:after,
.page-main #site-header:after { content: ""; position: absolute; height: 8em; width: 120.48%; bottom: 0; margin-left: -10.2%; background-image: linear-gradient(#F6F6F6, #FFFFFF); z-index: -1; }
	#site-header .cluster { }
	.page-home #site-header .cluster { margin-bottom: 35%; }
		#site-header .site-title { margin-bottom: 0; font-weight: bold; }
			#site-header .site-title a { text-decoration: none; }

.site-nav { position: relative; z-index: 11; }
	.menu-toggle { display: inline-block; margin-left: 0; cursor: pointer; transition: margin 0.4s ease; }
	.show .menu-toggle { margin-left: -25px; }
		.visual-menu { display: inline-block; top: 0.7em; left: 0; margin: 0 22px 6px 0; }
			.visual-menu span, .visual-menu span:before, .visual-menu span:after {
			display: block; position: absolute; width: 16px; height: 1px; background: #051237; content: ''; }
			.visual-menu span:before { top: -4px; }
			.visual-menu span:after { bottom: -4px; }
			/* Hamburger - Transition to X */
			.visual-menu span, .visual-menu span:before, .visual-menu span:after { transition: all 500ms ease-in-out; }
			.show .visual-menu span { background-color: transparent; }
			.show .visual-menu span:before,
			.show .visual-menu span:after { top: 0; }
			.show .visual-menu span:before { transform: rotate(45deg); }
			.show .visual-menu span:after { transform: rotate(-45deg); }

		.region-title,
		.page-title { display: inline-block; position: relative; margin: 0; font-size: 1em; font-weight: normal; z-index: 5; opacity: 1; }
		.region-title { color: #8D93A9; }
		.site-nav.show .region-title,
		.site-nav.show .page-title { opacity: 0; transition: opacity 0.4s ease; }
	.menu { display: none; position: absolute; top: 0; left: 0; padding-left: 1em; z-index: 12; white-space: nowrap; opacity: 0; transition: all 0.4s ease; } /* padding = transition */
	.show .menu { display: block; padding-left: 0; opacity: 1; }
		.menu h2 { display: none; }
		nav li { display: inline-block; }
		nav li + li { padding-left: 0.5em; }
			nav li a { color: #8D93A9; transition: color 0.25s ease; }
			.page-home li.nav-work a,
			.page-work li.nav-work a,
			#approach li.nav-approach a,
			#profile li.nav-profile a,
			#contact li.nav-contact a { padding-bottom: 0.25em; border-bottom: 1px solid #051237; color: #051237; transition: all .25s; }
			nav li a:hover { padding-bottom: 0.4em; color: #051237; }

.home-message { padding-bottom: 4em; color: #8D93A9; }
	.home-message p { }
		.home-message a { padding-bottom: .25em; border-bottom: 1px solid #8D93A9; color: #8D93A9; }

@media (min-width: 600px) {
	#site-header { padding: 6em 11% 0; } /* Bottom padding based on info pages */
	.page-home #site-header { padding: 4em 0 2em; }
	.home-message { margin-left: 44.5%; }	
}
@media (min-width: 800px) {
#page { padding: 0 8.5%; }
	#site-header { padding: 11em 0 1em; }
	.page-home #site-header { padding: 4em 0 1em; }
	.home-message { margin-left: 51.5%; }
	.page-home #site-header .cluster { margin-bottom: 23%; }
}
@media (min-width: 1000px) {
	#site-header { padding: 12em 0 1em; }
	.home-message { margin-left: 61.5%; }
}
/*@media (min-width: 1100px) {
#page { padding: 0 10.25%; }
#site-header:after { width: 126%; margin-left: -13%; }
	.home-message { margin-left: 63%; }	
}*/
@media (min-width: 1300px) {
	#site-header { max-width: 1079px; margin: 0 auto; }
	.page-home #site-header:after,
	.page-main #site-header:after { width: 4000px; margin-left: -1460px; }
}

/*@media (min-width: 1566px) {
	#site-header { max-width: 1300px; margin: 0 auto; }
	.page-home #site-header:after,
	.page-main #site-header:after { width: 3000px; margin-left: -850px; }
}*/

/* Content
--------------------------------------------------------------*/
/* Content - Clearfix */
#site-content:before, #site-content:after, #index:before, #index:after, .content section:before, .content section:after, .section-header:before, .section-header:after, .section-content:before, .section-content:after, .section-content .group:before, .section-content .group:after, #step-map:before, #step-map:after { content: ""; display: table; }
#site-content:after, #index:after, .content section:after, .section-header:after, .section-content:after, .section-content .group:after, #step-map:after { clear: both; }

/* Content - General Typography */
#site-content a { }
a.content-link { padding-bottom: 0.15em; border-bottom: 1px solid #aaa; transition: border .25s ease; white-space: nowrap; }
a.content-link:hover { border-bottom: 1px solid #44C0FF; }
a.offsite { position: relative; margin-right: 1.5rem; }
a.offsite:after { position: absolute; content: ""; width: 0.75rem; height: 0.75rem; top: 0; left: calc(100% + 0.3rem); margin-top: 0.4rem; background: url("/img/global/offsite.png") no-repeat; background-size: contain; }
.point { margin-top: 21%; font-size: 1.5em; }
p .intro { font-weight: bold; }

/* Content - Parts */
#site-content { padding-bottom: 30.5%; }
	.content-header { position: relative; padding: 3.5em 11%; }
		.content-header h1 { margin-left: -14%; }
		.content-header .intro { position: relative; padding-bottom: 2.5em; }
		.content-header .intro:before { content: ""; position: absolute; height: 8em; width: 160%; bottom: 0; margin-left: -30%; background-image: linear-gradient(#F6F6F6, #FFFFFF); z-index: -1; }
			.content-header h2 { display: inline; padding-right: 0.5em; }
			.content-header .intro p { }
			.content-header .intro h2 + p { display: inline; } 
			.content-header .intro h2 + p + p { padding-top: 1.5em; }
			.content-header .intro .project-type { font-style: italic; }
.content { padding-bottom: 3em; }
	.content section { }
	.page-work .content section { margin-bottom: 9em; }
	.page-work .content section:last-child { margin-bottom: 6em; }
		.section-header { margin-bottom: 21%; }
		@media (max-width:799px) {
		.section-header.title { margin-bottom: 0; }
		}
			.section-header h3 { /*font-weight: normal;*/ }
			.section-header p { margin-bottom: 0; }
			.section-header p + p { padding-top: 1.5em; }
		.section-content { }


/* Content - Index */
#index { }
.page-home #index { margin-top: -9%; }
#more-work #index { position: relative; }
#more-work #index:before { content: ""; position: absolute; height: 8em; width: 120.5%; top: -10.75em; margin-left: -10.25%; background-image: linear-gradient(#F6F6F6, #FFFFFF); z-index: -1; }
	#index .project { float: left; width: 44.5%; }
		#index .project .cluster { display: block; }
			#index .image { }
				#index .image img { transition: all .15s ease; }
				#index .image:hover img { transform: scale(1.05); }
			#index .meta { }
			#index .meta:hover { }
				#index .meta h3 { display: inline-block; margin: 0 0 1em; padding-top: 1.5em; border-bottom: 1px solid #F6F6F6; font-weight: normal; transition: border .25s ease; }
				#index .image:hover + .meta h3,
				#index .meta:hover h3 { border-bottom: 1px solid #051237; }
				#index .meta p { font-size: 0.9em; }

	@media (max-width:799px) { /* Note: MAX-width */
	#index .project { margin-top: 10%; }
	#index #project-wemake { margin-top: 0; }
	#index .project:nth-child(even) { margin-left: 11%; }
		#index .project:nth-child(even) .cluster { margin-top: 34%; }
	#index .project#project-gelpro .cluster { margin-top: 50%; }
	}

/* Content - Projects */
.page-work .content-header { }
	.project-thumb { position: absolute; top: -4em; right: 11.25%; width: 22%; opacity: 1; transition: opacity .5s; }
	#page.nav-on .project-thumb { opacity: .075; }
	.content-header .roles { padding-top: 3.5em; font-size: 0.9em; }
		.content-header .roles h3 { margin-bottom: 0; font-weight: normal; }
		.content-header .roles h3 + p { margin-top: 1rem; }
			.content-header .role { display: inline-block; margin: 0 0.15rem 0.35rem 0; padding: 0.05rem .25rem; background-color: #ebe8e6; border-radius: 4px; }
		.content-header .roles p { }
.page-work .content { } 
	.page-work .section-header { position: relative; }
		.section-counter { display: inline-block; margin: 0.1rem 0 1rem 0; padding: 0 0.25rem; background-color: #FFF; border-radius: 4px; font-size: 0.8rem; color: #bababa; }
			.opening-thumb { margin-top: 11.5%; line-height: 0; }
			@media (min-width: 400px) and (max-width:599px) {
			.opening-thumb { max-width: 79.5%; margin-left: auto; margin-right: auto; }
			}
		.page-work .section-content { }
			.group { }
			.group--text { }
			.group--text + .group--text { margin-top: 5rem; }
				.group-title { }
				.group-title-image { width: 4rem; padding-bottom: 1.5rem; }
				.group-subtitle { font-weight: normal; font-style: italic; }
			.section-content .image { margin-top: 21%; line-height: 0; }
			.section-content p + .image,
			.section-content p + .group .image { margin-top: 7%; }
			.section-content .image + p,
			.section-content .group + p { margin-top: 14%; }
			.section-content .lead-image,
			.section-content .lead-group { margin-top: 0; }
			.section-content .follow { margin-top: 10.5%; }
			.repeat { display: none; }
			@media (max-width:799px) {
			.narrow { width: 78%; margin: 0 auto; }
			.thin { width: 55%; margin-left: auto; margin-right: auto; }
			}
			@media (min-width: 600) and (max-width:799px) {
			.narrow { width: 71%; }
			.thin { width: 43%; }
			.opening-thumb.thin { width: 100%; }
			}
				.caption { padding-top: 2em; font-size: 1em; font-style: italic; line-height: 1.5; }
			.page-work .quote { margin-top: 21%; padding: 11% 11% calc(11% - 1.5rem) 11%; background-color: #FFF; border-radius: 6px; }
			.page-work .quote + .quote { margin-top: 10.5%; }

			.phone { position: relative; }
			@media (max-width:799px) {
			.phone { width: 78%; margin-left: auto; margin-right: auto; }
			}
			.phone:before { content:""; position: absolute; width: 100%; padding: 101% 0; background: url(img/work/devices/mobile.png) transparent no-repeat; background-size: contain; z-index: 1; box-shadow: 2px 6px 8px #CCC; border-radius: 9%/4.5%; }
			.phone:after { content:""; position: absolute; top: 0; left: 0; width: 100%; margin-top: 190%; padding: 6% 0; background-color: #F6F6F6; z-index: 0; }
				.phone img { margin-bottom: 28%; padding: 24.7% 4.8% 0 4.6%; } /* margin-bottom gives container solid bottom with phone overlay */

#more-work { }
	#more-work > h3 { position: relative; padding-bottom: 3em; font-weight: normal; }
	#work-wemake #project-wemake,
	#work-tesser #project-tesser,
	#work-gelpro #project-gelpro,
	#work-liftedled #project-liftedled,
	#work-logos #project-logos,
	#work-shopify #project-shopify,
	#work-klaza #project-klaza,
	#work-phillipspictures #project-phillipspictures,
	#work-artaustin #project-artaustin { opacity: .4; }


/* Content - Pages */

/* Pages - Approach */
		#approach .group + .group { margin-top: 3em; }
		ul#step-map { width: 137%; margin: 12% 0 12% -13%; text-align: center; }
/*			#step-map li { position: relative; float: left; width: 27%; height: 0; margin: 0 0 0 -7%; padding: 13% 0; background-color: rgba(255,255,255,.25); border: 2px solid #FFFFFF; border-radius: 50%; line-height: 0; z-index: 1; transition: all .25s ease-out; }
			#step-map li:hover { z-index: 10; background-color: rgba(255,255,255,1); border-color: #F0A23D; box-shadow: 0 0 5px 1px #CCC; color: #FFF; }*/
			#step-map li { float: left; width: 27%; margin: 0 0 0 -7%; }
			#step-map li:first-child { margin-left: 2.5%; }
			#step-map li:nth-child(2) { margin-top: 11%; }
			#step-map li:nth-child(3) { margin-top: 22%; }
			#step-map li:nth-child(4) { margin-top: 33%; }
				#step-map li a { position: relative; display: block; width: 100%; height: 0;  padding: 49.05% 0; background-color: rgba(255,255,255,.25); border: 2px solid #FFFFFF; border-radius: 50%; line-height: 0; z-index: 1; transition: all .25s ease-out, color .1s ease; }
				.pointer #step-map li a:hover { z-index: 10; background-color: rgba(255,255,255,1); border-color: #F0A23D; box-shadow: 0 0 5px 1px #CCC; color: #FFF; }
/*				.touch #step-map li a { background-color: orange; }*/
					#step-map .msg { opacity: 0; position: absolute; left: 0; width: 100%; margin-top: -1.5em; color: #051237; line-height: 0; text-align: center; } 
					.pointer #step-map li a:hover .msg { opacity: 1; transition: opacity .5s ease-in; }
						#step-map .msg span { display: block; padding: 1.5em 0; }
			
		ul.step-list { font-size: 0.9em; }

/* Pages - Profile */

#profile { }
	.with-note { white-space: nowrap; }
		.note { display: inline-block; position: relative; top: -0.1em; width: 20px; height: 20px; background: url(img/note-asterisk.png) center top no-repeat transparent; background-size: contain; text-indent: -9999px; }
		@media ( hover: none ) {
		.note { display: none; }
		}
		@media ( hover: hover ) {
		.note:hover { background-image: url(img/note-asterisk-hover.png); }
			.note-content { display: none; position: absolute; top: -8.35em; left: -8.5em; width: 18em; padding: 3em 0; background-color: #FFFFFF; box-shadow: 0 0 5px 1px rgba(100,100,100,.3); font-size: 1em; font-weight: normal; line-height: 1em; text-align: center; text-indent: 0; }
			.note:hover .note-content { display: block; }
				.note .false { display: block; padding-top: 1em; text-decoration: line-through; }
		}

/* Start Media Queries
--------------------------------------------------------------*/

@media (min-width:400px) and (max-width:499.999px) {
	.opening-thumb { max-width: 79.5%; }
	.fig-2, 
	.fig-3 { width: 79.5%; }
	.fig-3 + .fig-3 { margin-left: 17.5%; }
}

@media (min-width:500px) {
	.project-thumb { top: -3em; right: 22.25%; width: 11%; }
	#page.nav-on .project-thumb { opacity: 1; }
}
@media (min-width:500px) and (max-width:599.999px) {
	.fig-2 { width: 69.5%; }
	.fig-3 { width: 79.5%; }
	.fig-3 + .fig-3 { margin-left: 20.5%; }
}
@media (min-width:600px) {
.content-header { padding: 5em 11% 3em; }
	.content-header h1 { margin-left: 0; padding-bottom: 1.5em; }
	.content-header .intro:before { width: 156.65%; margin-left: -28.25%; }
	.project-thumb { top: -1.25em; right: 11.25%; }
.content { padding: 0 11% 3em; }
	.section-header { }
		.section-counter { position: absolute; left: calc(-1.75rem - 17%);  }
		.page-work .section-header h3 { margin-left: -14%; }
		.page-work .section-header > p { clear: left; float: left; width: 57%; margin-left: -14%; }
		.page-work .section-header.no-image p { float: none; width: 100%; }
		.opening-thumb { float: right; width: 57%; margin-top: 0; margin-right: -14%; }
			.no-image .opening-thumb.plus { float: none; width: 100%; margin-top: 21%; }
			.page-work .section-header p.caption { float: none; width: 100%; margin-left: 0; }

	.section-content { }
	

/* Pages - Approach */
		#approach .group + .group { }
		ul#step-map { width: 145%; margin-left: -17%; }
			#step-map li { }
			#step-map li:first-child { }
			#step-map li:nth-child(2) { margin-top: 7%; }
			#step-map li:nth-child(3) { margin-top: 14%; }
			#step-map li:nth-child(4) { margin-top: 21%; }
				#step-map li .msg { } /* */

		ul.step-list { overflow: hidden; }
			.step-list li { float: left; width: 48%; }
}

@media (min-width:600px) and (max-width:799.999px) {
	.fig-2 { max-width: 69.5%; }
	.fig-3 { max-width: 79.5%; }
	.fig-3 + .fig-3 { margin-left: 20.5%; }
}

@media (min-width:800px) {
	#site-content { padding-bottom: 17%; }
	.page-home #site-content { padding-top: 2em; }
.content-header { width: 51%; left: 41%; padding: 2em 0 3em; }
	.content-header h1 { position: absolute; right: 104.5%; text-align: right; white-space: nowrap; }
	.content-header .intro { padding-bottom: 3em; }
	.content-header .intro:before { width: 240.96%; margin-left: -103.45%; }
		.content-header h2 { }
		.content-header .intro p { }
/*		.content-header .intro p:first-of-type { padding-left: 0.5em; }
		.content-header .intro p:nth-of-type(2) { }*/
.content { padding: 0 0 3em; }
.page-work .content { padding-top: 4rem; }
	.content section {  }
		.section-header { float: left; width: 30.75%; margin-bottom: 0; }
			.section-counter { right: calc(100% + 1rem); left: unset; }
			.page-work .section-header h3,
			.page-work .section-header p { margin-left: 0; }
		.page-work .section-header p { float: none; width: 100%; }
		.content .section-content { float: right; width: 59%; padding-top: 3em; }
			.section-content .group { position: relative; }
			.group-title { }
			.group-title-image { position: absolute; width: 15%; left: -19%; margin-top: 3.5rem; }
			.section-content .group--text { margin-left: -17%; }
			.section-content .group-5 { width: 100%; margin-left: 17%; }
				.section-content .group-title { position: absolute; right: 104.5%; white-space: nowrap; }

/* Index - 800px */
#index { }
.page-home #index { margin-top: 0 }
#more-work #index:before { top: -15em; margin-top: 6.5em; }
	#index .project { width: 33.33%; }
		#index .project .cluster { position: relative; width: 85%; }
		#index .project:nth-child(3n+3) .cluster { margin-bottom: 8em; }
		#index #project-wemake .cluster { top: -8em; }
		#index #project-tesser .cluster { top: 3em; left: 23.25%; }
		#index #project-liftedled .cluster { left: 45.75%; width: 61.75%; margin-bottom: 100%; }
		#index #project-shopify .cluster { top: 3rem; }
		#index #project-klaza .cluster { top: 8em; left: 23.25%; }
		#index #project-gelpro .cluster { top: 13rem; left: 47.75%; margin-bottom: 130%; }
		#index #project-logos .cluster { width: 54%; }
/*		#index #project-phillipspictures .cluster { top: 9em; left: 31%; }*/
			#index .project .image { }
				#index .project .image img { }
			#index .project .meta { }
				#index .project .meta h3 { }
				#index .project .meta p { }

/* Projects - 800px */
	.project-thumb { top: -9em; right: 24.5%; width: 20.5%; }
	.content-header .roles { /*padding-top: 3em;*/ }
	.page-project .roles:before { }
		.content-header .roles h3 { position: absolute; right: 104.5%; margin-top: 1rem; } /* "Role" */
		.content-header .roles p { }

	.content #section-one { }
		.opening-thumb { float: none; margin: 6em 0 0; width: 92.5%; }
		.opening-thumb.plus { width: 100%; }
		.opening-thumb.fig-2 { width: 59%; margin-left: 33.5%; }
		.opening-thumb.fig-4 {  }
			
		.page-work .section-content { }
			.lead-image,
			.lead-group { }
				.lead-group .image { float: left; margin-top: 0; }
			.repeat { display: block; }
			.section-content .fig-2,
			.section-content .fig-2-1 { width: 30.75%; }
				.section-content .fig-2-1 img { width: 45.5%; }
			.section-content .fig-2plus { width: 34.5%; }
			.section-content .fig-3 { width: 48%; }
			.section-content .fig-3plus { width: 51.75%; }
			.section-content .fig-4 { width: 65.25%; }
			.section-content .fig-4plus { width: 69.25%; }
			.section-content .fig-5 { width: 82.75%; }
			.section-content .fig-6 { width: 100%; }
			.group .image { float: left; }
			.group .fig-2 + .fig-4,
			.group .fig-3 + .fig-3,
			.group .fig-4 + .fig-2,
			.group .fig-5 + .fig-2,
			.group .fig-6 + .fig-2 { margin-left: 3.9%; }
			.group .fig-4plus + .fig-4plus { clear: left; float: right; } 
			.section-content__description { margin-top: 21%; }

#work-wemake #section-one .fig-6 + .fig-6 { margin-left: 17.5%; }
#work-wemake #section-one .section-content > .fig-5 { margin-left: 17.5%; }
#work-wemake #section-one .group--wemake-maker .fig-6 { margin-left: -35%; }
#work-wemake #section-one .group--wemake-maker .fig-2 { margin-top: 42%; }
#work-wemake #section-one .group--wemake-modal .fig-2 { margin-left: -35%; }
#work-wemake #section-one .group--wemake-modal .fig-5 { margin-top: 42%; }
#work-wemake #section-two .group--collection .fig-5 { margin-left: -17.5%; }
#work-wemake #section-two .group--collection .fig-2 { margin-top: 42%; }
#work-wemake #section-three .fig-4 + .fig-2 { margin-top: 21%; }
#work-wemake #section-four .fig-6 { margin-left: -17.5%; }
#work-wemake #section-five .fig-3 + .fig-3 { margin-top: 42%; }
#work-wemake #section-five .group--onboardingsurvey .fig-3:first-child { margin-left: -17.5%; }
#work-wemake #section-five .group--maker-feedback .quote:first-child { width: 100%; margin-left: -17.5%; }
#work-wemake #section-six .fig-5 + .fig-5 { margin-left: 17.5%; }

#work-phillipspictures #section-four .group .fig-3plus { margin-left: -35.5%; }
#work-phillipspictures #section-four .group .fig-3plus:nth-of-type(2) { margin-left: 17.75%; }
#work-shopify #section-one .group .fig-3:nth-of-child(2) { margin-top: 10%; }
#work-gelpro #section-two .fig-2plus { position: absolute; float: none; right: 121.25%; margin-top: -11%; }
#work-klaza #section-one .lead-group .fig-2 { margin-top: 21%; margin-left: 4%; }
#work-klaza #section-one .fig-6 { margin-left: -17.5%; }
#work-klaza #section-two .lead-group .fig-2 { margin-left: 4%; }
#work-liftedled .group .fig-3 + .fig-3 { margin-top: 42%; }
#work-liftedled .lead-group .fig-3 + .fig-3 { margin-top: 21%; }
/*#work-liftedled .group .fig-2plus:first-child { position: absolute; left: -52%; }
#work-liftedled .group .fig-2plus:first-child + .fig-3 { margin-left: 0; }*/
#work-liftedled .opening-thumb { margin: 45% 0 0 33.25%; width: 66.5%; }
#work-artaustin #section-one .fig-2plus { margin: 42% 0 0 13.75%; }
#work-artaustin #section-two .fig-2plus { position: relative; left: -56%; margin-top: -4em; }
#work-artaustin #section-four .fig-3plus { position: absolute; top: -35%; left: -69.5%; }
#work-logos #section-tesser .section-content > .fig-3 { margin-left: 17.25%; }
#work-logos #section-tesser .opening-thumb img { width: 64%; }
#work-logos #section-tesser .group .fig-3 { margin: 37% 0 0 -17.5%; }
#work-logos #section-tesser .group .fig-2 { margin-left: 21%; }
#work-logos #section-wildleaven .group .fig-4 { margin: 42% 0 0 -17.25%; }
#work-logos #section-wildleaven .group .fig-3 { margin-left: 3.9%; }
#work-logos #section-bwh .group .fig-2 { float:right; clear:both; }
#work-logos #section-bwh .fig-2 + .fig-4 { clear: both; margin-top: 0; }
#work-logos #section-phillipsadr .group .fig-2 + .fig-2 { margin: 38% 0 0 3.9%; }
#work-logos #section-phillipsadr .group .fig-2 + .fig-2 + .fig-2 { margin: 56% 0 0 3.8%; }
#work-logos #section-phillipsadr .fig-4 { margin-top: -10.5%; }
#work-logos #section-phillipspictures .section-content .fig-2 { margin-left: 17.25%; }
#work-logos #section-phillipspictures .fig-2 + .fig-3 { margin: 37% 0 0 4%; }
#work-logos #section-phillipspictures .fig-4 { margin-left: -17.25%; }

#more-work { }
	#more-work > h3 { text-indent: 40.75%; }
	#more-work > h3:after { }
	#more-work #index { padding-top: 12.5em; }

/* Content - Pages - 800px */
#approach { }
		ul#step-map { width: 142%; margin-left: -15%; }
/*#approach .group + .group { }*/

#profile { }
	.with-note { }
		.note { }
		.note:hover { }
			.note-content { }
			.note:hover .note-content { }
/*	#profile #profile-mexico .image:nth-child(2) { position: absolute; left: -34%; top: 15%; }
	#profile #profile-desert .image:nth-child(2) { clear: left; margin-left: -34%; }*/
	#profile #profile-arch.image { width: 100%; margin: 0 0 0 -17.5%; }
	#profile #profile-desert.image { margin-left: -17.5%; }
}

@media (min-width:940px) { /* 940 width can flex if needed; currently based on artaustin need */
.project-thumb { width: 15%; }

#work-wemake #section-two .section-content__description { width: 82.75%; margin-left: -17.5%; }
#work-artaustin #section-two .fig-2plus { margin-top: -33%; }
}
		
/*@media (min-width:1100px) {
.content-header { }
	.content-header h1 { }
	.content-header .intro { }
		.content-header h2 { }
		.content-header .intro p { }
.content { }
	.content section { }
		.section-content { }

#index { }
#more-work #index:before { top: -15.25em; width: 125.8%; margin-left: -12.9%; }
	#index .project {  }
		#index .project .cluster { width: 80%; }
		#index .project:nth-child(3n+3) .cluster { margin-bottom: 60%; }
		#index #project-phillipspictures .cluster { top: -10em; }
		#index #project-gelpro .cluster { top: -1em; left: 25.5%; }
		#index #project-liftedled .cluster { top: -4em; left: 51.5%; width: 48.5%; }
		#index #project-logos .cluster { width: 48.5%; }
		#index #project-shopify .cluster { top: 2em; left: -6%; width: 81%; }
		#index #project-klaza .cluster { left: 19.5%; width: 81%; }
		#index #project-phillipsadr .cluster {  }
		#index #project-artaustin .cluster { left: 57%; }
			#index .project .image { }
				#index .project .image img { }
			#index .project .meta { }
				#index .project .meta h3 { }
				#index .project .meta p { }

	.project-thumb { }
	.content-header .roles { }
	.page-project .roles:before { }
		.content-header .roles h3 { }
		.content-header roles p { }
	.content #section-one { }
		.content .section-header { }
			.content .section-header h3 { }
			.content .section-header p { }
			.opening-thumb { }
		.page-work .section-content { }
			.lead-image,
			.lead-group { }
}*//* 1100px */

@media (min-width:1100px) {
#index #project-liftedled .cluster { padding-bottom: 7%; }

#approach { }
		ul#step-map { width: 100%; margin: 3em 0; }
			ul#step-map li { width: 30%; }
			ul#step-map li:first-child { margin-left: 0; }
#profile #profile-arch .image { /*width: 65.5%;*/ }
}

@media (min-width: 1300px) {
	#site-content { max-width: 1079px; margin: 0 auto; }
	.content-header .intro:before { width: 4000px; margin-left: -1460px; }
	#more-work #index:before { width: 4000px; margin-left: -1460px; }
}

/*
@media (min-width:1400px) {
#index #project-liftedled .cluster { padding-bottom: 14%; }
}

@media (min-width: 1566px) {
	#site-content { max-width: 1300px; margin: 0 auto; }
	.content-header .intro:before { width: 3000px; margin-left: -1380px; }

#index #project-liftedled .cluster { padding-bottom: 16%; }
}*/


/* Infinite scroll */

/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer/* Theme Footer (when set to scrolling) */ { display: none; }

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer { display: block; }


/* Footer
--------------------------------------------------------------*/
#site-footer:before,
#site-footer:after { content: ""; display: table; }
#site-footer:after { clear: both; }

#site-footer { padding-bottom: 1em; }
#site-footer .cluster { }
	#site-footer .site-title { margin-bottom: 0; font-weight: bold; }
		#site-header .site-title a { text-decoration: none; }
	#site-footer .jump { display: none; }

#site-footer #about-intro { margin-top: 3em; }
	#site-footer #about-intro h4 { font-weight: normal; }
	#copyright { margin-top: 6em; font-size: 0.9em; }
		#copyright .shopify { display: block; width: 159px; height: 28px; margin-top: 1.5em; background: url(img/footer/shopify-experts.jpg) center center transparent no-repeat; background-size: contain; text-indent: -9999px; }

@media (min-width:600px) {
#site-footer .cluster { float: left; width: 33.5%; margin-left: 11%; }
.page-work #site-footer .cluster { margin-left: 0; }

#site-footer #about-intro { float: right; width: 55.5%; margin-top: 0; }
}

@media (min-width:800px) {
#site-footer { }
#site-footer .cluster { width: 28%; margin-left: 0; }
	#site-footer .site-title { }
		#site-header .site-title a { }

#site-footer #about-intro { float: right; width: 48.5%; }
.page-info #site-footer #about-intro { width: 58.75%; }
	#site-footer #about-intro h4 { }
	#site-footer #about-intro p { }
	#site-footer #about-intro p:first-of-type { }
	#site-footer #about-intro p:nth-of-type(2) { }
	#copyright { }
}
@media (min-width: 1300px) {
#site-footer { max-width: 1079px; margin: 0 auto; }
}
/*@media (min-width: 1566px) {
#site-footer { max-width: 1300px; margin: 0 auto; }
}*/