@import url("fonts/fonts.css");

html, body {
	width:100%;
	height:100%;
	margin:0;
	font-family: GothamBook, sans-serif;
	color: #3d3d3d;
	/* font-size: 32px; /* pre-scale-down */
	/* font-size: 24px; */

	/* disable smartphone text-inflating algorithm */
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
}

	#wrapper, body > .header { font-size: 1.5em; }

	/*
	@import url("mediaQueries.css");
	*/

	/*
	@media screen and (max-width: 767px) {
		html ul.nav, html .filters { Xfont-size: 0.5em; }
		html ul.nav { margin-top: 3.75em; }
		html ul.nav li, html .filters li { margin-left: 3em; }
		html .filters { width: 60em; }
	}
	*/

	/* smaller map */
	@media screen and (max-width: 960px) and (min-height: 321px) { html #footer .map { width: 17.5em; } }
	@media screen and (max-width: 900px) and (min-height: 321px) { html #footer .map { width: 15em; } }
	@media screen and (max-width: 840px) and (min-height: 321px) { html #footer .map { width: 12.5em; } }

	/* vertical nav links */
	@media screen and (max-width: 720px) and (min-height: 321px) {
		html ul.nav { margin-top: 0.5em }
		html ul.nav li {
			display: block;
			margin-top: 1em;
			margin-bottom: 1em;
			text-align: right;
		}
		html .header .hBounds {
			/* overflow: hidden; */
			position: relative;
		}

			html .header .hBounds::after {
				content: '';
				display: table;
				clear: both;
			}

		html .header .logo {
			/* for vertical centering */
			line-height: 1.25em;
			margin-top: -0.66667em;
			top: 50%;
			position: absolute;
			padding: 0;
		}
		html ul.nav li { margin-left: 3em; }
		html .filters { padding: 0.75em 0; }
		html .filters li {
			margin-left: 3em;
			padding: 0.5em 0;
		}
	}

	/* more condensed footer */
	@media screen and (max-width: 690px) and (min-height: 321px) {
		/*
		html #footer .map {
			width: 12.41em;
			height: 10.78125em;
			margin-left: 2em;
		}
		*/
	}

	/* even more condensed footer */
	/* @media screen and (max-width: 540px) and (min-height: 321px), */
	@media screen and (max-width: 600px) and (min-height: 321px),
	screen and (max-width: 495px) and (max-height: 320px) {
		html #footer { padding-top: 0.75em; }
		/*
		html #footer > .hBounds {
			display: table;
			caption-side: bottom;
		}
		*/
		html #footer .map {
			float: none;
			margin-left: 0;
			/*
			max-width: 100%;
			height: auto !important;
			width: auto !important;
			*/

			/*width: 100% !important;
			margin-bottom: 0.75em;*/

			margin: 0.375em 0 0 !important;
			display: table-caption;
			width: auto !important;
			padding: 0 0.875em;
		}

		/* fewer (2) "others like this" thumbs per row */
		html .relatedProjects li {
			width: 49.115% !important;
			margin-right: 1.77% !important;
			margin-bottom: 1.77% !important;
		}
			html .relatedProjects li:nth-child(2n) { margin-right: 0 !important; }
			html .relatedProjects li:nth-child(3n) { margin-right: 1.77% !important; }

	}

	/* more condensed horizontal header */
	@media screen and (max-width: 550px) and (max-height: 320px) {
		html ul.nav li { margin-left: 3em; }
	}

	/* handheld, portrait */
	@media screen and (max-width: 480px) {

		/* more condensed header */
		body > .header { font-size: 1.0em; }
		html ul.nav {
			margin: 0.25em 0;
			font-size: 0.625em;
		}
		html .filters { font-size: 0.625em; }
		html .filters li { margin-left: 2.25em; }
		html #project h1.title:first-child,
		html #person h1.title:first-child  { 
			margin-top: 5.25em; 
		}
		/* html .header .logo { color: red; } /* TEMP */

		/* overall scale adjustment */
		#wrapper { font-size: 1.0em; }
		html p { font-size: 0.75em; }
		html #project .copyBlock,
		html #person .copyBlock { line-height: 1.05em; }
		html .expand { font-size: 0.75em; }
		html #footer p, html #footer address {
			font-size: 0.65625em;
			line-height: 1.785em;
		}
		html #footer .map {
			margin-bottom: 1em;
			height: 15em;
			display: none; /* decision to remove map in this context */
		}
		html #footer .footerFooter { margin-top: 0; } /* for when there's no map */

		/* embiggen the grid circles, so that more type fits in the smaller boxes */
		html #projectList { font-size: 0.75em; }
		html .projectLink .projectInfo,
		html .credit .projectInfo {
			font-size: 0.83333em;
			height: 75%;
			width: 75%;
			margin: 12.5%;
		}
		html .bigSquare .projectLink .projectInfo {
			height: 37.5%;
			width: 37.5%;
			margin: 31.25%;
		}

		/* de-columnize muli-column text */
		html .cols_2,
		html .cols_3,
		html .cols_4,
		html .cols_5 {
			-moz-column-count:1;
			-webkit-column-count:1;
			column-count:1;
		}

	}

	/* handheld, lanscape */
	@media screen and (max-height: 320px) {

		/* more condensed header */
		html .header .logo {
			/* color: magenta; /* TEMP */
			padding: 0;
			line-height: 1.25em;
		}
		body > .header { font-size: 0.75em; }
		html ul.nav {
			margin-top: -0.75em;
			font-size: 0.875em;
		}
		html ul.nav li a {
			display: inline-block;
			padding: 1em 0;
		}
		html .filters {
			padding: 0.75em 0;
			font-size: 0.75em;
		}
		html .filters li {
			margin-left: 3em;
			padding: 0.5em 0;
		}
		html .header .hBounds { padding: 1.25em 0; }
		html #project h1.title:first-child,
		html #person h1.title:first-child { margin-top: 2.66667em; }

		/* overall scale adjustment */
		#wrapper { font-size: 0.75em; }
		html p { font-size: 1em; }
		html .creditOverlay p { font-size: 0.5em; }
		html #project .copyBlock,
		html #person .copyBlock { line-height: 1.4em; }
		html h1 { font-size: 1.5em; }
		html h1.title {
			padding-left: 0.583333em !important;
			padding-right: 0.583333em !important;
		}
		html h2 {
			font-size: 1em;
			padding-left: 0.916667em !important;
			padding-right: 0.916667em !important;
		}
		html .expand { font-size: 1em; }
		html #footer p, html #footer address {
			font-size: 0.875em;
			line-height: 1.785em;
		}
		html #footer .map {
			/* last bitmap
			width: 24.8125em;
			height: 21.5625em;
			*/
			width: 20em;
			height: 13em;
		}
		.extrasGalleryContainer { font-size: 1.333em; }

		/* embiggen the grid circles, so that more type fits in the smaller boxes */
		html #projectList { font-size: 1em; }
		html .projectLink .projectInfo,
		html .credit .projectInfo {
			height: 75%;
			width: 75%;
			margin: 12.5%;
		}
		html .bigSquare .projectLink .projectInfo {
			height: 37.5%;
			width: 37.5%;
			margin: 31.25%;
		}

	}


	/* single-column portrait mode */
	/* lower-res displays at <640px, or high-res displays at <426px virtual */
	/*
	@media (max-resolution: 1dppx) and (max-width: 639px),
	(max-resolution: 96dpi) and (max-width: 639px),
	(-webkit-max-device-pixel-ratio: 1) and (max-width: 639px),
	(-o-max-device-pixel-ratio: 1/1) and (max-width: 639px),

	(min-resolution: 1.5dppx) and (max-width: 425px),
	(min-resolution: 144dpi) and (max-width: 425px),
	(-webkit-min-device-pixel-ratio: 1.5) and (max-width: 425px),
	(-o-min-device-pixel-ratio: 3/2) and (max-width: 425px) {
	*/
	@media screen and (max-width: 767px) {

		html h1.title,
		html #project .credits,
		html .relatedProjects {
			width: auto;
			padding-left: 0.875em;
			padding-right: 0.875em;
		}

		html h2 {
			width: auto;
			padding-left: 1.16667em;
			padding-right: 1.16667em;
		}

		html #project .bxslider { margin-bottom: 0.625em; }

		/*
		html #project .bx-wrapper + h1.title, html #project .bxslider + h1.title {
			top: auto;
			left: 0;
			right: 0;
			position: relative;
			line-height: 1em;
			font-size: 0.875em;
		}
		*/

		html #project .bx-wrapper + h1.title { margin-top: 1.25em; }
		html #project .bxslider + h1.title { margin-top: 0; }

		html #project .copyBlock,
		html #person .copyBlock {
			width: auto;
			padding-left: 0.875em;
			padding-right: 0.875em;
		}

		html #project .montage {
			width: auto;
			margin-left: 0.875em;
			margin-right: 0.875em;
			left: auto;

		}

		html #project .videoContainer {
			width: auto;
			height: auto;
			left: auto;
			margin-left: 0.875em;
			margin-right: 0.875em;
		}

			html #project .videoContainer:before { /* for fixed-aspect ratio scaling, per: http://www.mademyday.de/css-height-equals-width-with-pure-css.html */
				content: "";
				display: block;
				padding-top: 56.25%;
			}

			html #project .videoContainer .iframeWrapper {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
			}

				html #project .videoContainer .iframeWrapper iframe.video {
					width: 100%;
					height: 100%;
				}

		html .header .hBounds {
			width: auto;
			margin: 0;
			padding-right: 0.625em;
			padding-left: 0.875em;
		}

		html .header .filters {
			width: auto;
			margin: 0;
			padding-right: 1.75em;
			padding-left: 1.75em;
		}

		html ul.nav li { margin-right: 0.5em; }

		/*
		html .container {
			width: 13.4375em;
			width: auto;
			margin-left: 0.625em;
			margin-right: 0.625em;
		}
		*/

		/* html .montage { font-size: 9px; } */
		/* html #projectListMontage { font-size: 10px; } /* don't scale this one down */

		html .slides { width: auto; }

		html .map {
			width: auto;
			float: none;
			margin-right: 0;
		}

		/* html h1 { font-size: 0.875em; } */

		html iframe.video {
			width: 13.4375em;
			height: 7.56em;
			margin-left: auto;
			margin-right: auto;
			display: block;
		}

		/* fewer (3) "others like this" thumbs per row */
		html .relatedProjects li {
			/* width: 6.40625em;
			height: 3.6em; */

			/*width: 7.5em;
			height: 7.5em;*/
			width: 32.5%;
			margin-right: 1.25%;
			margin-bottom: 1.25%;
		}
			html .relatedProjects li:nth-child(3n) { margin-right: 0; }
			html .relatedProjects li:nth-child(4n) { margin-right: 1.25%; }

		html #footer .hBounds,
		html #footer .footerFooter .hBounds {
			width: auto;
			max-width: none;
			padding: 0 0.875em;
		}

	}

/* body { background-color: #7f7e83; } */
body { background-color: black; }

a { color: #484848; }
a:hover { color: black; }

a img { border: none; }

p {
	font-size: 0.5em;
	letter-spacing: 0.05em;
}

.light { font-family: GothamLight, sans-serif; }

input[type=text],
input[type=password] {
	border: none;
	font-family: GothamBook, sans-serif;
	font-weight: normal;
	font-size: 1em;
	padding: 0.125em;
	background-color: #ebebeb;
}

	#txtSearch { width: 10em; }

.scrollDown {
	position: fixed;
	bottom: 2em;
	left: 30%;
	right: 30%;
	z-index: 4;
	background-image: url('scrollDown.png');
	background-repeat: no-repeat;
	background-position: center center;
	/* background-size: 1em 1em; /* pre-scale-down */
	background-size: 2.5em 2.5em;
	cursor: pointer;
	height: 2.5em;
	text-align: center;
	color: transparent;
}

#foreground {
	background-image: url('homeScreenLogo.png');
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center;

	position:fixed;
	z-index: 3;
	cursor: pointer;
}

.header {
	background-color: white;
	background-color: rgba(255,255,255,0.75);
	z-index: 3;
	width: 100%;
	font-family: GothamMedium, sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	padding-bottom: 1px; /* for mobile Webkit rounding issues that reveal an empty 1px line below the header */
}

	.header .info { /* debug output */
		position: absolute;
		top: 0.5em;
		right: 1em;
		left: 1em;
		text-align: center;
		font-size: 0.5em;
		opacity: 0.5;
		color: red;
		text-transform: none;
	}

	.header .hBounds {
		width: 30em;
		margin: 0 auto;
	}

	.header a {
		text-decoration: none;
		color: #bfbfbf;
		color: #aaa;
	}

	.header a:hover { color: #3d3d3d; }

	.header .logo {
		font-family: GothamLight, sans-serif;
		font-weight: normal;
		font-size: 1.125em;
		letter-spacing: 0.05835em;
		display: inline-block;
		padding: 1.125em 0;
		color: #7a7a7a;
	}

		.header .logo strong {
			font-family: GothamBold, sans-serif;
			font-weight: bold;
		}

	/*
	.header .logo img {
		width: 6.09375em;
		height: 2.46875em;
		border: none;
		margin: 0.5em;
		margin-left: 0.5em;
	}
	*/

.fixed .header {
	background-color: white;
	background-color: rgba(255,255,255,0.75);
	position: fixed;
	top:0;
	z-index: 10;
	/* height: 3.78125em; */
}

#projectList,
#person {
    margin: 0 auto;

    opacity: 1;
	transition: opacity 1.5s ease-in-out;
	-moz-transition: opacity 1.5s ease-in-out;
	-webkit-transition: opacity 1.5s ease-in-out;
	overflow: visible;
	overflow-x: hidden;
	padding: 0.625em 0 2.5em;
    width: 100%;
}



.montage { position: relative; }

	.montage div { position: absolute; }

		.montage div img { width: 100%; }


#backgroundVideo,
.projectBackground {
	z-index: 0;
	position: fixed;
	overflow: hidden;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

#backgroundVideo.loading {
	background-image: url("images/loading_transparent.gif");
    background-position: center center;
    background-repeat: no-repeat;
}

	#backgroundVideo .item {
		top: 0;
		left: 0;
		display: block;
		position: absolute;
		opacity: 0;
		transition: opacity 1.5s ease-in-out;
		-moz-transition: opacity 1.5s ease-in-out;
		-webkit-transition: opacity 1.5s ease-in-out;
	}

	#backgroundVideo .image {
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		height: 100%;
		width: 100%;
	}

	#backgroundVideo .video {
		min-height:100%;
		min-width:100%;
		background-color: #fff;
		position:absolute;
		top:0;
		left:0;
	}

	#content {
		/*min-height: 100%; */
		top: 100%;
		width: 100%;
		/*position: absolute;
		z-index: 3;*/
	}

		#content.project,
		#content.montageVideo {
			top: 0 /* 3.6875em*/ !important;
			min-height: 0;
		}

			#content.montageVideo .container{
				margin-top: 3.78125em;
				margin-bottom:0;
				padding:0;
			}

			#content.project .header .filtersWrapper {
				display: none;
			}

ul.nav {
	list-style: none;
	padding: 0;
	display: inline-block;
	float: right;
	margin: 4.25em 0 0;
	font-size: 0.4375em;
	letter-spacing: 0.125em;
}

	ul.nav li {
		display: inline-block;
		margin-left: 5em;
		position: relative;
	}

		ul.nav li:first-child { margin-left: 0; }

		ul.nav li a { cursor: pointer; }

.filter.selected {
	color: #3d3d3d;
}

.filter.filterAll { cursor: pointer; }

.filtersWrapper {
	background-color: #f9f9f9;
	border-top: 1px solid #fdfdfd;
	border-bottom: 1px solid #e5e5e5;
}

	.filters {
		font-size: 0.4375em;
		list-style: none;
		margin: 0 auto;
		padding: 1em 0;
		text-align: right;
		color: #bfbfbf;
		color: #aaa;
		width: 68.57em;
	}

		.filters li {
			display: inline-block;
			margin: 0 0 0 4.75em;
			padding: 0.875em 0;
		}

			.filters li:first-child { margin-left: 0; }

			.filters a.filter { cursor: pointer; }

.container {
	position: relative;
	/* width: 30em; */
	margin: 0.75em auto;
	padding: 0.625em 0.625em 0;
	background-color: white;
	/*transition: opacity 0.5s linear;
	-moz-transition: opacity 0.5s linear;
	-webkit-transition: opacity 0.5s linear;*/
	overflow: auto; /* float clearing */
}

#project .bx-wrapper .bx-pager,
#project .bx-wrapper .bx-controls-auto {
	bottom: -2em;
}

	#project > .bx-wrapper, /* slide show */
	#project > .bxslider { /* single image */
		margin-bottom: 1.5em;
		padding-bottom: 0.5em;
		border-bottom: 1px solid #e5e5e5;
		background-color: #f9f9f9;
	}

		#project .bx-wrapper .bx-controls-direction a { z-index: 9; }

		#project .bxslider li.slide img {
			width: 100%;
			display: block;
		}

	#project .copyBlock,
	#person .copyBlock {
		font-family: GothamMedium, sans-serif;
		line-height: 0.7em;
		padding-bottom: 1em;
		width: 30em;
		margin: -0.25em auto; /* negative top/bottom to compensate for child <p>s */
		margin: 0 auto; /* negative top/bottom to compensate for child <p>s */
		color: #7a7a7a;
	}

		#project .copyBlock > p:first-child { margin-top: 0; }
		#project .copyBlock > p:last-child { margin-bottom: 0; }
		#person .copyBlock > p:first-child { margin-top: 0; }
		#person .copyBlock > p:last-child { margin-bottom: 0; }

		#project .copyBlock b,
		#project .copyBlock strong,
		#person .copyBlock b,
		#person .copyBlock strong,
		.wysiwygField b,
		.wysiwygField strong {
			font-family: GothamBlack,sans-serif;
			font-weight: normal;
			color: #484848;
		}

	#project .montage {
		/*height: 812px;*/
		left: 50%;
		margin-left: -15em;
		width: 30em;
		margin-bottom: 0.3333em;
	}

		#project .montage .montageImage { cursor: pointer; }

	#project .creditsHeader {
		cursor: pointer;
	}

		#project .creditsHeader .toggle {
			color: #909090;
			margin-left: 1em;
		}

	#project .credits {
		padding-bottom: 0.75em;
		width: 30em;
		margin: 0 auto;
	}

	#project .tags {
		padding: 0 0 1.5em;
		margin: 0;
		font-size: 0.5em;
		list-style-type: none;
	}

		#project .tags li {
			display: inline-block;
			margin-left: 1em;
			text-transform: uppercase;
		}

	#project .others {
		margin-top: 2em;
	}

	#aboutPage { padding-bottom: 0.625em; }

.expand {
	font-size: 0.5em;
	font-family: GothamBold, sans-serif;
	font-weight: bold;
	letter-spacing: 0.083em;
	text-transform: uppercase;
	margin: 1em auto;
	color: #484848;
	cursor: pointer;
}

.imageBox {
	display: inline-block;
}

	p .imageBox { font-size: 2em; }

	.imageBox .imageCaption {
		display: block;
		font-size: 0.4375em;
		color: #aaa;
		width: 100%;
	}

.extrasGalleryContainer {
	margin: 0;
}

	.galleryItem { cursor: pointer; }

#project div.nav {
	width: 30em;
	margin: 0.625em auto 0.25em;
	position: relative;
}

	#project div.nav:first-child { margin-top: 4em; }

	#project div.nav .close {
		font-size: 0.5em;
		cursor: pointer;
	}
	#project div.nav .close:hover { text-decoration: underline; }

	#project div.nav .prev,
	#project div.nav .next {
		position: absolute;
		cursor: pointer;
		border-radius: 50%;
		width: 32px;
		height: 32px;
		overflow: hidden;
		bottom: -64px;
		line-height: 32px;
		text-align: center;
		background-image: url('images/controls.png');
		background-repeat: no-repeat;
		color: transparent;
		opacity: 0.6;
	}
	#project div.nav .prev:hover,
	#project div.nav .next:hover { opacity: 1; }
	#project div.nav .prev { left: -48px; background-position: 0 -32px; }
	#project div.nav .next { right: -48px; background-position: -43px 0; }

	@media screen and (max-width: 840px) {

		#project div.nav { margin-bottom: 1em; line-height: 32px; }
		#project div.nav .prev,
		#project div.nav .next {
			bottom: auto;
			top: 0.125em;
		}
		#project div.nav .prev { left: auto; right: 48px; }
		#project div.nav .next { right: 0; }

	}

	@media screen and (max-width: 767px) {
	
		#project div.nav {
			width: auto;
			margin-left: 0.875em;
			margin-right: 0.875em;
		}

	}


h1 {
	font-size: 1em;
	margin: 0 0 0.625em;
	font-family: GothamBold, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	color: #484848;
}

h1.title {
	padding: 0.625em 0;
	width: 30em;
	margin: 0 auto 0.25em;
}

	#project h1.title:first-child,
	#person h1.title:first-child {
		margin-top: 3.5em;
	}

	#project .bx-wrapper + h1.title, /* slide show */
	#project .bxslider + h1.title { /* single image */
		/* position: absolute;
		left: 0.625em;
		right: 0.625em;
		top: 12.5em; */
	}

	h1.title .clientName {
		font-size: 1.25em;
		line-height: 1em;
		display: block;
	}

	h1.title .projectName {
		font-size: 0.75em;
		font-family: GothamBook, sans-serif;
		display: block;
		line-height: 1em;
		color: #7a7a7a;
	}

h2 {
	font-size: 0.75em;
	font-family: GothamBold, sans-serif;
	font-weight: bold;
	letter-spacing: 0.083em;
	text-transform: uppercase;
	margin: 1em auto;
	color: #484848;
	width: 40em;
}

h3 {
	font-size: 0.625em;
	font-family: GothamBold, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	margin: 0.5em auto;
	color: #484848;
	width: 48em;
}

.projectBackground {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity:1;
	background-color: #fff;
}

.extrasHeader {
	cursor: pointer;
	margin-top: 1.5555em;
}

.toggle {
	color: #7a7a7a;
	margin-left: 1em;
}

.others {
	background-color: #f9f9f9;
	border-top: 1px solid #e7e7e7;
}

	.others h2 {
		padding-top: 1em;
		padding-bottom: 1em;
	}

.slides {
	width: 100%; /*30em; */
	overflow: hidden;
	margin: 0;
	padding: 0;
}

	.slides .slide {
		width: 100%;
		margin: 0;
		padding: 0;
		display: block;
	}

.relatedProjects {
	list-style: none;
	padding: 0 0 2em;
	margin: 0 auto;
	width: 30em;
	overflow: auto;
}

	.relatedProjects li {
		display: block;
		float: left;
		cursor: pointer;
		/*
		width: 7.5em;
		height: 7.5em;
		*/
		/*height: 4.21875em;*/

		/*
		margin-right: 0.3125em;
		width: 7.208em;
		height: 7.208em;
		*/
		width: 24.16667%;
		margin-right: 1.1111%;
		margin-bottom: 1.1111%;
	}

		/* .relatedProjects li:last-child { margin-right: 0; } */
		.relatedProjects li:nth-child(4n) { margin-right: 0; }

		/* .relatedProjects li .projectLink .projectInfo .names { font-size: 0.75em; } */



.montageImage {
	position: relative;
	overflow: hidden;
	/* padding: 0.25em; */
}

	.montageImage.video:before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		background-image: url("images/largePlayButton.png");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 5em 5em;
	}

.projectLink {
	position: relative;
	overflow: hidden;
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.projectLink .projectInfo,
.credit .projectInfo {
	background-color: rgba(249,249,249,0.9);
	border-radius: 50%;
	color: #444;

	text-align: center;
	font-size: 0.625em;
	line-height: 1.125em;

	position: absolute;
	top: 0;
	left: 0;
	width: 64%;
	height: 64%;
	margin: 18%;

	-ms-transform: scale(0, 0) translateZ(0);
	-moz-transform: scale(0, 0) translateZ(0);
	-webkit-transform: scale(0, 0) translateZ(0);
	transform: scale(0, 0) translateZ(0);

	-moz-transition: -moz-transform 0.25s ease-out;
	-webkit-transition: -webkit-transform 0.25s ease-out;
	transition: transform 0.25s ease-out;

	/*
	width: 100%;
	height: 100%;
	top:100%;
	transition: top 0.5s ease-in-out;
	-moz-transition: top 0.5s ease-in-out;
	-webkit-transition: top 0.5s ease-in-out;
	*/
}

	.relatedProjects .projectLink .projectInfo { font-size: 0.5625em; }

	.bigSquare .projectLink .projectInfo {
		width: 32%;
		height: 32%;
		margin: 34%;
	}

	.projectLink .projectInfo .namesWrapper,
	.credit .projectInfo .namesWrapper {
		position: absolute;
		top: 12.5%;
		left: 12.5%;
		height: 75%;
		width: 75%;
		display: table;
		table-layout: fixed;
		/* word-wrap: break-word; /* old syntax */
		/* overflow-wrap: break-word; /* new syntax */
	}

		.projectLink .projectInfo .names,
		.credit .projectInfo .names {
			display: table-cell;
			vertical-align: middle;
		}

		.projectLink .projectInfo .names hr,
		.credit .projectInfo .names hr {
			width: 4.25em;
			margin: 0.3em auto;
			height: 2px;
			background-color: #444;
			border: none;
		}

.projectLink img {
	width: 100%;
	height: auto;
	display: block;
}

#project .clientName,
#projectList .clientName,
#person .projectName {
	font-family: GothamBlack, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.0625em;
	/* color: white; */
	/*
	word-break: break-word;
	word-wrap: break-word;
	overflow-wrap: break-word;
	*/
}

#project .projectName,
#projectList .projectName,
#person .clientName {
	font-family: GothamMedium, sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 0.917em;
	text-transform: uppercase;
	letter-spacing: 0.0625em;
	/* color: #aaa; */
	/*
	word-break: break-word;
	word-wrap: break-word;
	overflow-wrap: break-word;
	*/
}


#project .videoContainer {
	position: relative;
	height: 16.875em;
    left: 50%;
    margin-bottom: 0.625em;
    margin-left: -15em;
    width: 30em;
}

	#project iframe.video {
		width: 30em;
		height: 16.875em;
		border: none;
		position: relative;
	}

#montageVideo iframe.video {
	border: none;
	margin-bottom: 0.625em;
	display: block;
}

#montageVideo .videoContainer {
	margin: 0 auto;
}


.overlayContainer {
	padding: 0;
	/* background-color: #d1d6d7; */
	background-color: #fff;
	z-index: 1000;
	position: fixed;
	-webkit-box-shadow: 0 0 0.5em 1px rgba(0, 0, 0, 0.44); /* for Android <4 */
	box-shadow: 0 0 0.5em 1px rgba(0, 0, 0, 0.44);

}

	/*	.overlayContainer .wrapper {
			width: 100%;
			height: 100%;
			position: relative;
			overflow: hidden;
		}

			.overlayContainer .wrapper .image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				transition: all 0.5s ease-out;
				-moz-transition: all 0.5s ease-out;
				-webkit-transition: all 0.5s ease-out;

			}*/

		.overlayContainer .wrapper {
			height: 100%;
			position: relative;
			overflow: hidden;

		}
			.overlayContainer .wrapper ul {

				margin:0;
				padding:0;
				height: 100%;
				position:absolute;
				top:0;
				left:0;
			}
				.overlayContainer .wrapper li {
					float:left;
					height: 100%;
					list-style:none;
					margin:0;
					padding:0;
					display: block;
					position:relative;
				}

				.overlayContainer .wrapper li img {
					width: 100%;
					height: 100%;
					display: block;
				}

	.overlayContainer .prev,
	.overlayContainer .next {
		/* background-size: 1.5em 1.5em; /* pre-scale-down */
		background-size: 3em 3em;
		background-repeat: no-repeat;
		color: transparent;
		cursor: pointer;
		opacity: 0.5;
		position: absolute;
		text-align: center;
		top: 3em;
		bottom: 3em;
		width: 50%;
	}


		.overlayContainer .next {
			background-image: url("images/paginationArrowRight.png");
			background-position: 98% center;
			right: 0;
			
		}

		.overlayContainer .prev {
			background-image: url("images/paginationArrowLeft.png");
			background-position: 2% center;
			left: 0;
			
		}

		.overlayContainer .prev:hover,
		.overlayContainer .next:hover {
			opacity: 0.75;
		}

	.overlayContainer .playButton {
		position: absolute;
		width:50%;
		top: 3em;
		bottom: 3em;
		z-index:2;
		left:50%;
		margin-left: -25%;
		
	}

	.overlayContainer .close {
		position: absolute;
		/*
		right: -0.5em;
		top: -0.5em;
		cursor: pointer;
		height: 1.09375em;
		width: 1.09375em;
		background: url('images/overlay_close.png') transparent no-repeat top right;
		background-size: 1.125em 1.125em;
		*/
		height: 0;
		width: 0;
		visibility: hidden;
	}


	.overlayShade {
		z-index: 999;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		display: none;
		background-color: black;
		opacity: 0.4;
		filter: alpha(opacity=40);
	}

.transitionImage {
	position:fixed;
	height: 0;
	width:0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	z-index: 9;
	opacity: 1;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

.map {
	height: 12.5em;
	width: 16em;
	float: left;
	margin-right: 0.625em;
}

	.map #map {
		height: 100%;
		border: 1px solid #7f7e83;
	}

	#footer .map p { font-size: 1em; color: #333333 }

#footer {
	background-color: #444;
	color: #d9d9d9;
	padding: 1em 0 0;
	font-family: GothamMedium, sans-serif;
	line-height: 0.78125em;
}

	#footer strong { font-family: GothamBold, sans-serif; }

	#footer .hBounds {
		/* width: 30em; */
		margin: 0 auto;
		max-width: 38em;
		padding: 0 1em;
		overflow: auto; /* float clearing */
	}

		#footer .map {
			/* old bitmap */
			/* height: 8.875em; */
			/* width: 11.375em; */
			/* margin-left: 3.25em; */

			/* old bitmap 2
			width: 13.3125em;
			margin-left: 1.25em;
			*/

			/* old bitmap 3
			width: 17.16667em;
			margin-left: 1.6875em;
			*/
			float: right;

			/* old bitmap 4
			width: 16.54167em;
			height: 14.375em;
			*/

			/* width: 10em; */
			width: 20em;
			height: 10em;
			margin-left: 1.6875em;
			margin-bottom: 0.25em; /* for when text wraps around it on small displays */
		}

		#footer h3 {
			color: white;
			margin-top: 0;
			padding-top: 0.75em;
			font-size: 0.5em;
			width: auto;
			letter-spacing: 0.1em;
		}

		#footer a { color: #d9d9d9; }

			#footer a:hover { color: white; }

		#footer p,
		#footer address,
		#footer table {
			font-style: normal;
			font-size: 0.4375em;
		}

			#footer p,
			#footer table {
				line-height: 1.5em;
				margin: 2em 0;
			}

				#footer .hBounds > *:first-child { margin-top: 0; }

				#footer .contacts {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					align-items: flex-end;
				}

					#footer p.inline {
						display: inline-block;
						margin-top: 0;
						text-transform: uppercase;
						margin-right: 4em;
						flex-basis: 160px;
					}

						#footer p.inline a { text-transform: none; }

			#footer address span {
				display: inline-block;
				padding-left: 1.5em;
				background-repeat: no-repeat;
				background-position: 0 0.429em;
				background-size: 0.857em 0.9286em;
			}

				#footer address .streetAddr { background-image: url('icon-address.png'); }
				#footer address .telephone { background-image: url('icon-phone.png'); }
				#footer address .emailAddr { background-image: url('icon-email.png'); }

				#footer address .streetAddr a { text-decoration: none; }
				#footer address .streetAddr a:hover { text-decoration: underline; }

			#footer table {
				border-collapse: collapse;
				border-spacing: 0;
			}

				#footer table td {
					padding: 0;
					vertical-align: top;
				}
				#footer table td:first-child { padding-right: 4em; }


	#footer .footerFooter {
		background-color: #3d3d3d;
		font-family: GothamBook, sans-serif;
		text-align: left;
		padding: 1em 0;
		margin-top: 1em;
	}

		#footer .footerFooter .hBounds span {
			font-size: 0.375em;
		}

.cols { margin: 0.5em 0; }
	/* top/bottom margin on .cols and removed from <p>s, so that the margin spans   */
	/* all the way across, instead of being only at the top of the first and bottom */
	/* of the last column */
	.cols > p:first-child { margin-top: 0; }
	.cols > p:last-child { margin-bottom: 0; }

/* top margin moved from .afterFold's first child to .afterFold because jQuery's slideDown() */
/* is including the top margin of the first element in its positioning calculation, without  */
/* accounting for margin collapse (against the element before .afterFold) */
.afterFold { margin-top: 0.5em; }
.afterFold > p:first-child,
.afterFold > .cols:first-child { margin-top: 0; }

/* same as above issue, but with Extras */
.extras { margin-top: 0.5em; }
.extras > .textExtra:first-child > p:first-child { margin-top: 0; }

.cols_2 {
	-moz-column-count:2;
	-webkit-column-count:2;
	column-count:2;
}

.cols_3 {
	-moz-column-count:3;
	-webkit-column-count:3;
	column-count:3;
}

.cols_4 {
	-moz-column-count:4;
	-webkit-column-count:4;
	column-count:4;
}

.cols_5 {
	-moz-column-count:5;
	-webkit-column-count:5;
	column-count:5;
}


.creditOverlay .extraOverlay {
	display: none;
}

.header ul.nav .people { z-index: 2; }

.header ul.nav .peopleList {
	position: absolute;
	padding: 0;
	background-color: #f9f9f9;
	top: 2em;
	width: 16em;
	box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

.header ul.nav .peopleList li {
	display: block;
	margin: 0 !important;
}
.header ul.nav .peopleList li a {
	display: block;
	padding: 0.75em;
}
.header ul.nav .peopleList li a:hover {
	background-color: #b5b5b5;
}

@media screen and (max-width: 720px) and (min-height: 321px) {
	.header ul.nav .peopleList { right: 0; }
}

@media screen and (max-width: 720px) and (max-height: 320px) {
	.header ul.nav .peopleList { top: 3em; }
}

.montage + .creditHeader { margin-top: 3em; }

.creditOverlay {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.creditOverlay .content {
	position: relative;
	flex: none;
}

.creditOverlay .info {
	overflow: auto;
	flex: auto;
	background-color: #444;
}

	.creditOverlay .info .name {
		font-size: 1.25em;
		font-weight: 700;
		font-family: GothamBlack, sans-serif;
		letter-spacing: 0.0625em;
		line-height: 1em;
		text-transform: uppercase;
		margin: 0.5em;
		color: #d9d9d9;
		width: auto;
	}

		.creditOverlay .info .name .title:not(:empty)::before { content: ' ('; }
		.creditOverlay .info .name .title:not(:empty)::after { content: ')'; }

	.creditOverlay .info .description {
		margin: 0 0.5em;
		font-size: 1.5em;
		color: #d9d9d9;
		/* font-family: GothamMedium, sans-serif; */
	}

		/* .creditOverlay .info .description .projectLink:not(:empty)::before { content: '('; } */
		.creditOverlay .info .description .projectLink:not(:empty)::after { content: ' >'; }
		.creditOverlay .info .description .projectLink a {
			color: #d9d9d9;
			text-decoration: none;
		}
		.creditOverlay .info .description .projectLink a:hover { 
			color: white; 
			text-decoration: underline;
		}

		@media screen and (max-width: 480px) {
			.creditOverlay .info .description p {
				font-size: 0.5em;
			}
		}

.creditOverlayContainer .nav {
	bottom: 175px;
}

.montageImage.credit { cursor: pointer; }