/*  
	CSS Reset by Eric Meyer - Released under Public Domain
    http://meyerweb.com/eric/tools/css/reset/
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, 
caption, tbody, tfoot, thead, tr, th, td 
                  {margin: 0;padding: 0;border: 0;outline: 0;
                  font-size: 100%;vertical-align: baseline;
                  background: transparent;}
body              {line-height: 1;}
ol, ul            {list-style: none;}
blockquote, q     {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';	content: none;}
:focus            {outline: 0;}
ins               {text-decoration: none;}
del               {text-decoration: line-through;}
table             {border-collapse: collapse;border-spacing: 0;}

address	{font-style: normal;}

a:active {
  outline:none;
  border: 0;
}

a {
  outline: none;
  border: 0;
  text-decoration: none;
  color: inherit;
}

:focus {
  -moz-outline-style:none;
}

body {
	margin: 0 auto;
	background: #111111;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #cccccc;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

hr {
	height: 1px;
	background: #cccccc;
	border: 0;
}


@media only screen and (max-width: 1024px) {
	body {
		-webkit-overflow-scrolling: touch;
	}
}


.light {
	background: #eeeeee;
	color: #555555;
}


/* Headings*/

h2, h3 {
	margin-bottom: 20px;
	font-weight: 500;
	font-size: 100%;
	color: #fff;
}

sup {
	font-size: 40%;
	position: relative;
	top: -1.25em;
}

.main-content-container {
	margin: 0 auto;
	margin-top: 80px;
	box-sizing: border-box;
	padding: 20px;
}

.section {
	margin-bottom: 40px;
}

.indent {
	text-indent: 40px;
}


@media only screen and (min-width: 768px) {
	.main-content-container {
		padding: 60px;
	}
	.indent {
		text-indent: 64px;
	}
	.section {margin-bottom: 80px;}

}


@media only screen and (min-width: 1200px) {
	.main-content-container {
		padding: 120px;
	}
	.section {
		margin-bottom: 140px;
	}

	.column {
		display: inline-block;
		vertical-align: top;
		width: 50%;
		box-sizing: border-box;
		padding-right: 40px;
	}
	.indent {
		text-indent: 80px;
	}
	.section h1 {
		font-size: 80px;
		color: #fff;
		font-weight: 400;
		text-indent: 80px;
		margin-bottom: 80px;
		line-height: 1.1;
	}
}




.large {
	font-size: 18px;
	font-weight: 400;
}


.semilarge {
	font-size: 16px;
	font-weight: 400;
}

.dark {
	color: #444444;
}


.reset {
	font-size: 0;
}

.section-heading, .section-content {
	display: inline-block;
	vertical-align: top;
	width: 100%;

	box-sizing: border-box;
	font-size: 0;
}

.section-content {
	margin-bottom: 40px;
}

.section-heading {
	padding: 0 20px 0 0;
}

.section-content {
	padding: 0 0 0 0px;
}

h2 {
	font-size: 18px;
}

ol {
	list-style-type: decimal-leading-zero;
}

ul {margin-bottom: 48px;}
li {
	margin-bottom: 12px;
}


.body-copy {
	font-size: 14px;
}

.in-page-image {
	text-align: right;
	margin-top: 0px;
	margin-bottom: 60px;
}


.in-page-image img {
	width: 100%;
	height: auto;
	opacity: 0.5;
}




@media only screen and (min-width: 768px) {
	.in-page-image {
		text-align: right;
		margin-top: -40px;
		margin-bottom: 140px;
	}
	.in-page-image img {
		width: 60%;
		height: auto;
		opacity: 0.5;
	}

	h2 {font-size: 17px;}

	.large {
		font-size: 32px;
		font-weight: 400;
	}
	.semilarge {
		font-size: 28px;
		font-weight: 400;
	}
	.section-heading, .section-content {
		display: inline-block;
		vertical-align: top;
		width: 50%;
		box-sizing: border-box;
		font-size: 0;
	}
	.section-content {
		padding: 0 0 0 20px;
	}
	.body-copy {
		font-size: 17px;
	}
}




@media only screen and (min-width: 1400px) {
	.main-content-container {
		padding: 140px;
	}
	.body-copy {font-size: 18px;}

}





.contact-label {
	display: inline-block;
	vertical-align: top;
	width: 100px;
	font-family: 'Amiri', serif;
	font-style: italic;
	letter-spacing: -0.025em;
	color: #555555;
}

.contact-address {
	border-top: 1px solid #444444;
	padding-top: 20px;
	margin-top: 50px;

}

.contact-address .contact-label {
	display: block;
	margin-top: 30px;
}

@media only screen and (min-width: 768px) {
	.contact-label {
	display: inline-block;
	vertical-align: top;
	width: 160px;
	font-family: 'Amiri', serif;
	font-style: italic;
	letter-spacing: -0.025em;
	color: #555555;
	}

	.contact-address {
	border-top: 1px solid #444444;
	padding-top: 80px;
	margin-top: 80px;
	}
	.contact-address .contact-label {
	display: inline-block;
	vertical-align: top;
	margin-top: 0px;
	}
}




.project-creative-container {
	margin: 0 auto;
	font-size: 0;
}

.project-preview {
	margin: 0 auto;
	display: block;
	vertical-align: top;
	width: 100%;
	box-sizing: border-box;
	padding: 0px;
	margin-bottom: 40px;
}


.project-preview img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

@media only screen and (min-width: 768px) {
	.project-creative-container {
		margin: 0 auto;
		margin-left: -20px;
		margin-right: -20px;
}

	.project-preview {
		margin: 0 auto;
		display: inline-block;
		vertical-align: top;
		width: 50%;
		box-sizing: border-box;
		padding: 20px;
		margin-bottom: 60px;
	}
}

.profile-section img {
	width: 64px;
	height: 64px;
	border-radius: 100%;
	-webkit-border-radius: 100%;
	float: left;
	margin-right: 20px;
	opacity: 0.9;
}



/* Showcase Pages */


.project-description {
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.6;
	text-align: center;
	margin-top: 80px;
	margin-bottom: 20px;
	max-width: 820px;
	box-sizing: border-box;
	padding: 0 20px 0 20px;
}

.project-description h1 {
	font-size: 100%;
	margin-bottom: 20px;
}

.italics {
	margin-top: 40px;
	font-family: 'Amiri', serif;
	letter-spacing: -0.02em;
	font-style: italic;
	opacity: 0.5;
}


@media only screen and (min-width: 768px) {
	.project-description {
		font-size: 18px;
		margin-bottom: 20px;
	}
	.project-description h1 {
		font-size: 100%;
		margin-bottom: 20px;
	}
}

@media only screen and (min-width: 1600px) {
	.project-description {
		font-size: 20px;
		margin-bottom: 20px;
	}
}

.showcase-stream {
	margin: 0 auto;
	text-align: center;
	font-size: 0;
	line-height: 1.0;
}

.showcase-stream h1 {
	font-size: 48px;
	font-weight: 400;
}

.showcase-stream img {
	margin: 0 auto;
	width: 100%;
	display: block;
	height: auto;
}

.visual-outer {
	margin: 0 auto;
	padding: 20px 40px 20px 40px;
	margin-bottom: 20px;
	max-width: 1000px;
}

.visual-outer img {
	margin-bottom: 0 !important;
}

.visual-shaded {
	-webkit-box-shadow: 0px 0px 48px -5px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 48px -5px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 48px -5px rgba(0,0,0,0.2);
}


.desktop-browser {
	display: block;
	text-align: left;
	font-size: 16px;
	line-height: 0.0;
	letter-spacing: 0em;
	box-sizing: border-box;
	padding-top: 4px;
	padding-left: 2px;
	background: #cccccc;
	color: #888888;
	height: 8px;
	overflow: hidden;
    border-radius: 2px 2px 0px 0px;
    -webkit-border-radius: 2px 2px 0px 0px;
}

.project-pagination {
	margin: 0 auto;
	margin-top: 80px;
	margin-bottom: 60px;
	text-align: center;
	color: #555555;
}

.project-pagination a {
	transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	-moz-transition: 0.3s linear;
	-o-transition: 0.3s linear;
}

.project-pagination h1, .project-pagination h2, .project-pagination h3, .project-pagination h4  {
	color: inherit;
}

.project-pagination h2 {
	margin: 0 auto;
	font-size: 12px;
	color: #999999;
		transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	-moz-transition: 0.3s linear;
	-o-transition: 0.3s linear;
}

.project-pagination h3 {
	font-size: 22px;
		transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	-moz-transition: 0.3s linear;
	-o-transition: 0.3s linear;
}

.project-pagination h3::after {
	margin: 0 auto;
	margin-top: 6px;
	content: '';
	position: relative;
	display: block;
	width: 32px;
	height: 32px;
	background: url('../img/iconography/arrow-next-555555.svg') center center no-repeat;
	background-size: 14px auto;
	border: 1px solid #555555;
	border-radius: 100%;
	-webkit-border-radius: 100%;
}


@media only screen and (min-width: 768px) {
	.showcase-stream img {
		margin: 0 auto;
		width: 100%;
		height: auto;
	}

	.visual-outer {
		margin: 0 auto;
		padding: 80px 100px 80px 100px;
		margin-bottom: 40px;
	}

	.desktop-visual {
		border-radius: 0px 0px 4px 4px;
  	    -webkit-border-radius: 0px 0px 4px 4px;
	}

	.desktop-browser {
		height: 18px;
		font-size: 24px;
		padding-top: 9px;
		padding-left: 4px;
		border-radius: 4px 4px 0px 0px;
  	    -webkit-border-radius: 4px 4px 0px 0px;
	}
	.project-pagination {
		margin: 0 auto;
		margin-top: 240px;
		margin-bottom: 120px;
	}
	.project-pagination h2 {
		margin: 0 auto;
		margin-bottom: 10px;
		font-size: 14px;
	}

	.project-pagination h3 {
		font-size: 36px;
	}
	.project-pagination h3::after {
		margin: 0 auto;
		margin-top: 10px;
		content: '';
		position: relative;
		display: block;
		width: 38px;
		height: 38px;
		background: url('../img/iconography/arrow-next-555555.svg') center center no-repeat;
		background-size: 16px auto;
		border: 1px solid #666666;
	}
	.project-pagination h3:hover {
		color: #eb6b66;
	}
}



@media only screen and (min-width: 1200px) {
	.large, .semilarge {
		width: 72%;
	}
	.visual-outer {
		margin: 0 auto;
		padding: 60px 180px 60px 180px;
		margin-bottom: 80px;
	}
}


.fullwidth {
	padding-left: 20px;
	padding-right: 20px;
	margin-left: 0;
	margin-right: 0;
}


.logos-section {
	display: block;
	margin-top: 60px;
	margin-bottom: 200px;
}

.logos-section img {
	width: 80px;
	height: auto;
	margin-right: 120px;
}

a.inline-link:hover {
	color: #fff !important;
}

.icon-pin {
	float: left;
	width: 26px;
	height: 16px;
	background: url('../img/iconography/icon-pin.svg') left top no-repeat;
	background-size: 14px 14px;
	margin-top: 6px;
}

.negative-margin {
	margin-bottom: 0px !important;
}

@media only screen and (min-width: 768px) {
	.icon-pin {
	float: left;
	width: 40px;
	height: 20px;
	background: url('../img/iconography/icon-pin.svg') left top no-repeat;
	background-size: 18px 18px;
	margin-top: 3px;
	}
}

/* Animations */

.fadeinup {
  -webkit-animation: fadeup 2s ease-in-out; /* Safari 4+ */
  -moz-animation:    fadeup 2s ease-in-out; /* Fx 5+ */
  -o-animation:      fadeup 2s ease-in-out; /* Opera 12+ */
  animation:         fadeup 2s ease-in-out; /* IE 10+, Fx 29+ */
  animation-iteration-count: 1;
}

@-webkit-keyframes fadeup {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadeup {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fadeup {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeup {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}



.work-preview-item {
	display: inline-block;
	width: 100%;
	line-height: 1.4;
	font-size: 13px;
	margin-bottom: 40px;
}

.work-preview-item img {
	width: 100%;
	height: auto;
	margin-bottom: 15px;
}

.work-preview-item h2, .work-preview-item h3 {
	line-height: 1.4;
	margin: 0;
	padding: 0;
	font-weight: 400;
	font-size: inherit;
}

.work-preview-item h3 {
	color: #888888;
}



@media only screen and (min-width: 768px) {
	.work-preview-item {
		width: 50%;
		vertical-align: top;
		font-size: 17px;
		box-sizing: border-box;
		margin-bottom: 80px;
	}
	.work-preview-item:nth-child(odd) {
		padding: 0 20px 0 0;
	}
	.work-preview-item:nth-child(even) {
		padding: 0 0 0 20px;
	}

	.work-preview-item a img {
	-webkit-transition: all 0.5s;	
	}

	.work-preview-item a:hover img {
		-webkit-transition: all 0.5s;
	    -webkit-filter: brightness(0.6);
	}
}