/**
 * @license
 * MyFonts Webfont Build ID 2805468, 2014-05-03T09:26:03-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Helvetica Neue 55 Roman by Linotype
 * URL: http://www.myfonts.com/fonts/linotype/neue-helvetica/helvetica-55-roman/
 * Copyright: Copyright © 1988, 1990, 1993, 2002 Adobe Systems Incorporated.  All Rights Reserved. © 1981, 2002 Heidelberger Druckmaschinen AG. All rights reserved.
 * 
 * Webfont: Helvetica Neue 35 Thin by Linotype
 * URL: http://www.myfonts.com/fonts/linotype/neue-helvetica/helvetica-35-thin/
 * Copyright: Copyright © 1988, 1990, 1993, 2002 Adobe Systems Incorporated.  All Rights Reserved. © 1981, 2002 Heidelberger Druckmaschinen AG. All rights reserved.
 * 
 * Webfont: Helvetica Neue 77 Cond Bold by Linotype
 * URL: http://www.myfonts.com/fonts/linotype/neue-helvetica/helvetica-77-bold-condensed/
 * Copyright: Copyright © 1990, 2002 Adobe Systems Incorporated.  All Rights Reserved. © 1981, 2002 Heidelberger Druckmaschinen AG. All rights reserved.
 * 
 * Webfont: Helvetica Neue 85 Heavy by Linotype
 * URL: http://www.myfonts.com/fonts/linotype/neue-helvetica/helvetica-85-heavy/
 * Copyright: Copyright © 1988, 1990, 1993, 2002 Adobe Systems Incorporated.  All Rights Reserved. © 1981, 2002 Heidelberger Druckmaschinen AG. All rights reserved.
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=2805468
 * Licensed pageviews: 250,000
 * 
 * © 2014 MyFonts Inc
*/
/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/2acedc");

@font-face {
	font-family: 'HelveticaNeueLTStd-Roman';
		src: 	url('../media/fonts/2ACEDC_0_0.eot');
		src: 	url('../media/fonts/2ACEDC_0_0.eot?#iefix') format('embedded-opentype'),
					url('../media/fonts/2ACEDC_0_0.woff') format('woff'),
					url('../media/fonts/2ACEDC_0_0.ttf') format('truetype');
}
@font-face {
	font-family: 'HelveticaNeueLTStd-Th';
		src: 	url('../media/fonts/2ACEDC_1_0.eot');
		src: 	url('../media/fonts/2ACEDC_1_0.eot?#iefix') format('embedded-opentype'),
					url('../media/fonts/2ACEDC_1_0.woff') format('woff'),
					url('../media/fonts/2ACEDC_1_0.ttf') format('truetype');
}
@font-face {
	font-family: 'HelveticaNeueLTStd-BdCn';
		src: 	url('../media/fonts/2ACEDC_2_0.eot');
		src:	url('../media/fonts/2ACEDC_2_0.eot?#iefix') format('embedded-opentype'),
					url('../media/fonts/2ACEDC_2_0.woff') format('woff'),
					url('../media/fonts/2ACEDC_2_0.ttf') format('truetype');
}
@font-face {
	font-family: 'HelveticaNeueLTStd-Hv';
		src: 	url('../media/fonts/2ACEDC_3_0.eot');
		src: 	url('../media/fonts/2ACEDC_3_0.eot?#iefix') format('embedded-opentype'),
					url('../media/fonts/2ACEDC_3_0.woff') format('woff'),
					url('../media/fonts/2ACEDC_3_0.ttf') format('truetype');
}

/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

/*
* font-family: 'Helvetica Neue 35 Thin'
* font-family: 'Helvetica Neue 85 Heavy'
* font-family: 'Helvetica Neue 77 Cond Bold' 

* neue
*/


html,
button,
input,
select,
textarea {
	color: #222;
}

html {
	background: #c8c9ca;
	font-family: 'HelveticaNeueLTStd-Th', Arial, sans-serif;
	font-weight: normal;
	font-style: normal;
  overflow-x: hidden;
}
/* html.js {
	background: #fff;
} */

body {
	color: #fff;
	font: normal 100 16px/1.4 'HelveticaNeueLTStd-Th', Arial, sans-serif;
	letter-spacing: .05em;
	margin: 0;
}

::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}

::selection {
	background: #b3d4fc;
	text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */
audio,
canvas,
img,
video {
	vertical-align: middle;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */	 
/* buttons */
.sprite,
.button {
	background: url(../media/images/spritesheet.png) no-repeat; */
}

.sprite,
.button,
.thumbnail a {
	display: block;
	position: relative;
	color: transparent;
	font: 0/0 a;
	text-shadow: none;
}

.button {
	cursor: pointer;
}

a, 
a:link, 
a:visited, 
a:hover, 
a:active {
	background-color: none;
	color: #fff;
	text-decoration: none;
}
a:hover {
	/* color: #de0029; */
}

h1,
h2,
.h1,
.h2 {
	font-family: 'HelveticaNeueLTStd-BdCn', Arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	letter-spacing: -0.01em;
	line-height: 1.18em;
	margin: 0;
	text-transform: uppercase;
	width: 100%
}

h1,
.h1 {
	color: #fff;
	font-size: 500%;
}
h1 span,
.h1 span {
	background: #000;
	padding: 0 .21em;
}

h2,
.h2 {
	color: #000;
	font-size: 1.25em;
	position: relative;
}
h2 span,
.h2 span {
	background: #fff;
	float: left;
  margin: 0;
  padding: 0 .9em;
}

.title-container {
	float: left;
	margin: 0 0 1.4em;
	overflow: hidden;
	width: 100%;
}  
	
p {
	font-size: 100%;
	margin: 0 ;
	padding: 1.2em 1.2em 0;
	text-align: center;
}

.roman55 {
	font-family: 'HelveticaNeueLTStd-Roman', Arial, sans-serif;
	font-weight: 100;
}
.bold {
	font-family: 'HelveticaNeueLTStd-Hv', Arial, sans-serif;
	font-weight: 100;
	text-transform: uppercase;
}
.bold-condensed {
	font-family: 'HelveticaNeueLTStd-BdCn', Arial, sans-serif;
	font-weight: 100;
	text-transform: uppercase;
}
.title {
	font-family: 'HelveticaNeueLTStd-Th', Arial, sans-serif;
}

#mfPreviewBar {
	display: hidden;
}


html.js.preloader,
.js .block,
.js .bullseye,
.preloader .tab {
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
			filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

html.no-js,
html.no-js.preloader,
.no-js .block,
.no-js .bullseye {
	visibility: visible;
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

/* html {
	background: url(../media/images/spritesheet.png) no-repeat; *
} */

/* ================================================================ header */
header,
footer {
	background: #C8C9CA;
	font-size: 14px;
	height: 24px;
	/* padding: 10px 0 0; */
	position: relative;
	top: 0;
	width: 100%;
	z-index: 10;
}
header {
	border-bottom: 1px solid #C8C9CA;
	height: 61px;
	margin-left: 1px;
	position: fixed;
	z-index: 11;
}

.nav-up {
	top: -74px;
}

header .inner,
.tab,
footer {
	background-color: #2A2A28;
}

header .inner,
footer .inner {
	height: 100%;
	margin: 0 auto;
	/* padding: 20px 0 17px; */
	position: relative;
	width: 100%;
}

.tab {
	background-position: -46px 0px;
	border: 1px solid #C8C9CA;
	border-top: 0;
	display: block;
	height: 32px;
	left: calc(100% / 2 - 55px);
	position: absolute;
  text-align: center;
	top: -74px;
	width: 110px;
	z-index: 0;
	
	display: none;
	
	-webkit-transition: background-position .2s ease-in-out, height .2s ease-in-out, top .5s ease-in-out;
		 -moz-transition: background-position .2s ease-in-out, height .2s ease-in-out, top .5s ease-in-out;
			-ms-transition: background-position .2s ease-in-out, height .2s ease-in-out, top .5s ease-in-out;
			 -o-transition: background-position .2s ease-in-out, height .2s ease-in-out, top .5s ease-in-out;
					transition: background-position .2s ease-in-out, height .2s ease-in-out, top .5s ease-in-out;
}

.nav-up .tab {
	top: 74px;
}
.nav-up .tab:hover {
	background-position: -46px 10px;
	height: 42px;
}

.tag-line {
	left: 30px;
	text-transform: uppercase;
}
header .tag-line {
	height: 25px;
	overflow: hidden;
	width: 400px;
}

.tag-line span {
	white-space: nowrap;
}

.pipe {
	margin: 0 16px;
}
.menu .pipe {
	float: left;
	margin: 0;
	width: 1px;
	display: none;
}

.logo {
	/* background-color: #C8C9CA; */
	height: 27px;
	margin: 0 auto;
	position: relative;
	top: 17px;
	width: 46px;
	z-index: 2;
}
.logo:hover {
	background-position: 0 -37px;
	height: 28px;
}

.tag-line,
.menu {
	padding: 0;
	position: absolute;
	top: 20px;
	z-index: 2;
}

.menu {
	left: auto;
	text-align: right;
	right: 20px;
	width: 285px;
}

nav a {
	color: #C8C9CA;
	text-decoration: none;
}
nav a:hover,
nav a.active {
	/* color: #C8C9CA; */
}

nav#menu a {
	background: -webkit-linear-gradient(right, transparent 50%, #fff 50%);
	background: 	 -moz-linear-gradient(right, transparent 50%, #fff 50%);
	background: 		 -o-linear-gradient(right, transparent 50%, #fff 50%);
	background: 				linear-gradient(to right, transparent 50%, #fff 50%);
	background-size: 200% 100%;
	float: left;
	margin: 0 0 0 1px;
	padding: 0 6%;
	text-decoration: none;
  -webkit-transition: all 200ms ease-in-out;
		 -moz-transition: all 200ms ease-in-out;
			-ms-transition: all 200ms ease-in-out;
			 -o-transition: all 200ms ease-in-out;
}

.ipad nav#menu a {
	background: none;
}
/* 	
nav#menu a.about {
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
}
 */
nav#menu a:hover,
nav#menu a.active {
	color: #2D292A;
	text-decoration: none;
}
nav#menu a:hover {
	background-position: 100% 100%;
}
nav#menu a.active {
	background: #fff;
}

footer {
	clear: both;
	height: 64px;
	z-index: 0;
}
footer .inner {
	height: auto;
}

/* ================================================================ mobile */
.show-on-mobile {
	z-index: -99;
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
			filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}
.not-mobile {
	z-index: 1;
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

#mobile-menu {
	border-top: 1px solid #C8C9CA;
	position: absolute;
	top: -122px;
	width: 100%;
	z-index: -1;
	
	display:none;
}

#mobile-menu.show {
	top: -62px;
}

#mobile-menu a {
	background: #595957;
	border-bottom: 1px solid #C8C9CA;
	display: block;
	left: 0;
	margin: 0;
	padding: 0;
	position: relative;
	text-align: center;
	width: 100%;
	
	-webkit-transition: padding 300ms ease-in-out;
		 -moz-transition: padding 300ms ease-in-out;
			 -o-transition: padding 300ms ease-in-out;
					transition: padding 300ms ease-in-out;
}
#mobile-menu.show a {
	padding: 1.43em 0;
}

.mobile-menu .pipe {
	display: none;
}

/* ================================================================ page */
section {
	float: left;
	position: relative;
}

#background {
	height: 3px;
	position: absolute;
	width: 100%;
	z-index: 0;
}

/* #container {
	margin: 3px 0 0 3px;
	position: absolute;
	width: 100%;
	z-index: 1;
} */
#container {
	margin: 1px 0 0 1px;
	padding-top: 61px;
	position: absolute;
	width: 100%;
	z-index: 1;
}

.row,
.block,
.vimeo {
	/* overflow: hidden; */
	position: relative;
	height: auto;
	width: 100%;
}

.row {
	
}


/* .block {
	float: left;
	margin: 0 3px 3px 0;
	position: relative;
} */
.block {
	float: left;
	margin: 0 1px 1px 0;
	position: relative;
}

.vimeo {
	height: 100%;
}

.one {
	background: #5cc7ff;
}

.square {

}

.two {
	background: #6eaac9;
}
.two-square {
	background: #85BEDB;
}

.three {
	width: 100%;
}

.darker {
	background: #306987;
}

.rectangle {

}

img.grid {
	height: auto!important;
	width: 100%!important;
}

/* ================================================================ blocks */
/* .introduction {
	padding: 1px 0 0;
}
 */
.introduction,
.grey-background {
	background-color: #2a2a28;
}
.white-background {
	background-color: #fff;
	color: #55c1e7;
}

.no-background {
	background-color: transparent;
}

.casestudy .introduction h2 span {
	margin: 2% 0;
}

.introduction h2 {
	top: -.4em;
}
.introduction p {
	text-align: left;
}
.info p {
	margin: 0 0 .2em;
	padding: 0 5%;
}

p.margin-bottom {
	margin: 0 0 5%;
}

p.title {
	font-size: 190%;
	line-height: 1em;
	padding-top: 1em;
	text-transform: uppercase;
}

.info p.bold {
	text-transform: uppercase;
}

p.image-title {
	background: #fff;
	color: #000;
	display: inline-block;
	font-family: 'HelveticaNeueLTStd-BdCn',Arial,sans-serif;
	font-size: 1.25em;
	left: 0;
	letter-spacing: .01em;
	padding: 0.1% 1%;
	position: absolute;
	text-transform: uppercase;
	top: 0;
}
p.image-title,
.rollover {
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
			filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}
.block:hover p.image-title,
.mobile .block p.image-title,
.thumbnail:hover .rollover {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

p.bold a,
footer span a {
	text-decoration: underline;
	background: transparent;
	-webkit-transition: background-color 300ms;
		 -moz-transition: background-color 300ms;
			-ms-transition: background-color 300ms;
			 -o-transition: background-color 300ms;
					transition: background-color 300ms;
}
p.bold a:hover,
footer span a:hover {
	background: #fff;
	color: #2a2a28;
	padding: .2em .5em .1em;
	text-decoration: none;
}

/* ================================================================ work */
.video {
	cursor: pointer;
	position: relative;
}

.video iframe {
	left: 0;
	position: absolute;
	top: 0;
	z-index: 11;
}

.video img {
	position: absolute;
}

.play-button,
.play-button .button,
.play-button-background {
	bottom: 0;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
}

.play-button {
	height: 94px;
	width: 94px;
	z-index: 10;
}

.play-button .button {
	background-position: -24px -205px;
	height: 28px;
	width: 28px;
	z-index: 1;
}

.video,
.play-button .button {
	-webkit-transition: background-color 300ms ease-in-out;
		 -moz-transition: background-color 300ms ease-in-out;
			-ms-transition: background-color 300ms ease-in-out;
			 -o-transition: background-color 300ms ease-in-out;
					transition: background-color 300ms ease-in-out;
}

.play-button-background {
	background: #22211f;
	height: 74px;
	width: 74px;
	
	-webkit-transform: rotate(0deg);
		 -moz-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			 -o-transform: rotate(0deg);
					transform: rotate(0deg);
}

.video:hover {
	background-color: #000;
}
.play-button {
	opacity: .9;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
			filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}
.video:hover img {
	opacity: .6;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
			filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}
.video:hover .play-button,
.video img {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

.video:hover .play-button .button {
	background-color: #fff;
}

.video:hover .play-button-background {
	-webkit-transform: rotate(90deg);
		 -moz-transform: rotate(90deg);
			-ms-transform: rotate(90deg);
			 -o-transform: rotate(90deg);
					transform: rotate(90deg);
}

/* ================================================================ about */
.what h1 span,
.who h1 span {
	display: inline-block;
  padding: 0 0.2em;
}
.what h2,
.who h2 {
	top: 0;
}

.who p {
	width: 46%;
}

.about .inner {
	height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
}

.about .inner p {
	margin: 0 auto;
	padding: 0 1.2em 1.2em;
	width: 80%;
}
.about .inner p.title {
	margin-top: 40%;
}
.about .inner p.title,
.about .inner p.bold {
	padding-bottom: .2em;
}

/* .agencies .one,
.clients .one {
	background: #34a4cc;
}
 */
.about .agencies .inner p.title,
.about .clients .inner p.title {
	margin-top: 5%;
}

.center-vertical {
	position: relative;
}
.about .agencies .center-vertical p.title,
.about .clients .center-vertical p.title {
	padding-top: 0;
	margin-top: 0;
}
.about .clients .inner p.title {
	margin-top: 25%;
}

.awards {
	float: left;
	position: relative;
	top: 11%;
	width: 100%;
}

.awards .col {
	float: left;
	width: 50%;
}
.award {
	margin: 0 0 1em;
	width: 100%;
}
.award > img {
	margin: 0 0 .5em;
}
.award p {
	color: #2A2A28;
	padding: 1% 0 0;
}

.social {
	background: red;
	bottom: 10%;
	height: 22%;
	position: absolute;
	right: 5%;
	width: 40%;
}

.social a {
	background: no-repeat;
	background-size: cover;
	display: inline-block;
	height: 100%;
	margin: 0 2%;
	width: 30%;
}
a.facebook {
	background-image: url(../media/images/icons/facebook-icon.png);
	background-position: 0 0;
}
a.facebook:hover {
	background-position: 0 100%;
}

/*
.social a {
	/* background-size: 100% 100%; *
	display: inline-block;
	height: 30px;
	margin: 0 2%;
	width: 30px;
}
a.facebook {
	background-position: 0 -53px;
}
a.facebook:hover {
	background-position: 0 -93px;
}
a.linkedin {
	background-position: -43px -53px;
}
a.linkedin:hover {
	background-position: -43px -93px;
}
a.twitter {
	background-position: -87px -53px;
}
a.twitter:hover {
	background-position: -87px -93px;
}
*/
/* ================================================================ contact */
.contact .introduction p,
.four-oh-four .introduction p {
    width: 46%;
}

/* ================================================================ overview */
/* #overview > h1 {
	background: none;
	display: block;
	font-family: 'Helvetica 77 Cond Bold' ;
	font-size: 313%;
	padding: 1%;
	position: relative;
} */
#overview {
}

#overview .full-width {
	height: 88px;
	left: 0;
	margin-bottom: 1px;
	position: relative;
	top: 0;
	z-index: -1;
	width: calc(100% - 1px);
}

.place-at-base {
	bottom: 0;
	position: absolute;
}

.js .place-at-base {
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
			filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

.place-at-base .h2 {
	display: inline-block;
	float: none;
}
.place-at-base .h2 span {
	float: none;
}

#overview > h1 {
	margin: 0 0 1px;
}
#overview > h2 {	
	margin: 3% 0 0;
}

.thumbnail p,
.thumbnail a,
.thumbnail img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

.thumbnail p,
.thumbnail a {
	z-index: 1;
}
.thumbnail p {
	display: none;
}

.thumbnail a {
	height: 100%;
	width: 100%;
	z-index: 2;
}

.rollover {
	overflow: hidden;
	position: absolute;
	z-index: 1;
}

/* .thumbnail .rollover {
	left: -100%;
	position: relative;
}
.thumbnail:hover .rollover {
	left: 0%;
} */
.thumbnail .rollover {
	position: relative;
	background: rgba(0, 0, 0, 0); 
	height: 100%;
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
			filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
			
	
	-webkit-transform: scale(1.4);
		 -moz-transform: scale(1.4);
			-ms-transform: scale(1.4);
			 -o-transform: scale(1.4);
					transform: scale(1.4);
}
.thumbnail:hover .rollover {
	background: rgba(0, 0, 0, .7); 
}

.thumbnail:hover .rollover,
.thumbnail img,
.video img,
.mobile .thumbnail .rollover {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	-webkit-transform: scale(1);
		 -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
					transform: scale(1);
}
.thumbnail:hover img,
.video:hover img {
	-webkit-transform: scale(1.1);
		 -moz-transform: scale(1.1);
			-ms-transform: scale(1.1);
			 -o-transform: scale(1.1);
					transform: scale(1.1);
}

.thumbnail h1 {
	top: -0.8em;
}

.thumbnail h1 span.line2 {
    position: relative;
    top: -0.2em;
}
.thumbnail h2 {
	top: -0.8em;
}

.single-line h2 {
	top: 0;
}

/* ================================================================ preloader */
.loader,
.box {
	bottom: 0;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
}

.loader {
	/* background: #fff; */
	height: 64px;
	width: 64px;
}
.loader .box {
	height: 21px;
	width: 38px;
}

.bar {
	background: #c8c9ca;
	float: left;
	height: 3px;
	margin: 2px;
	width: 15px;
	
	-webkit-transition: background-color 300ms ease-in-out;
		 -moz-transition: background-color 300ms ease-in-out;
			-ms-transition: background-color 300ms ease-in-out;
			 -o-transition: background-color 300ms ease-in-out;
					transition: background-color 300ms ease-in-out;
}
.on {
	background: #2a2a28;
}

footer {
	opacity: 0;
	visibility: hidden;
}

/* ================================================================ crosshairs */
.wrapper {
	height: 100%;
	position: absolute;
	width: 100%;
}

.crosshair {
	height: 11px;
	position: absolute;
	width: 11px;
	z-index: 9;
}

.top-left,
.center-left {
	background-position: -5px -295px;
	left: -1px;
	top: -1px;
}
.top-right {
	background-position: 5px -295px;
	right: -1px;
	top: -1px;
}
.bottom-left {
	background-position: -5px -285px;
	bottom: -1px;
	left: -1px;
}
.bottom-right {
	background-position: 5px -285px;
	bottom: -1px;
	right: -1px;
}

.center {
	background-position: 0 -290px;
	left: calc(50% - 5px);
	top: calc(50% - 5px);
}
.center-left,
.square-center-left,
.square-three-quarter-left,
.two-thirds-left {
	background-position: -5px -290px;
	left: -1px;
	top: calc(50% - 5px);
}
.center-right,
.square-center-right,
.square-three-quarter-right,
.two-thirds-right,
.three-thirds-right {
	background-position: 5px -290px;
	right: -1px;
	top: calc(50% - 5px);
}
.center-top {
	background-position: 0 -295px;
	top: -1px;
}
.center-bottom {
	background-position: 0 -285px;
	bottom: -1px;
	top: auto;
}

.square-center-left {

}
.square-center-center {

}
.square-center-right {

}

.thumbnail .center-left,
.thumbnail .center-right {
	display: none;
}

/* ================================================================ mobile landscape */
.show-when-two {
	display: none;
}

.landscape header,
.landscape footer {
	font-size: 12px;
}
.landscape header,
.landscape footer {
	height: 34px;
}
.landscape .logo {
	top: 0;
}
.landscape header .inner {
	padding: 0;
}
.landscape footer .inner {
	padding: 10px 0;
}
.landscape .nav-up .tab {
	top: 74px;
}
.landscape .tab {
	background-position: -60px 0;
	height: 25px;
	left: calc(100% / 2 - 40px);
	width: 80px;
}
.landscape .tab:hover {
	background-position: -60px 10px;
}
.landscape .logo {
	height: 21px;
	top: 8px;
} 
.landscape .tag-line {
	top: 11px;
} 
.landscape .menu {
	top: 12px;
}
.landscape header .tag-line {
	height: 1em;
	line-height: 1em;
}

.landscape #mobile-menu.show {
	top: 34px;
}
.landscape #mobile-menu a {
	padding: 8px 0;
}
.landscape #container {
	padding-top: 34px;
}

.landscape .who p {
	width: 46%;
}

.landscape .awards {
	top: 0;
}
		
.no-overflow,
.mobile .full-width,
.mobile footer,
.mobile #overview,
.mobile .row,
.mobile .block,
.mobile .vimeo {
	overflow: hidden;
}

/* ================================================================ browser fixes */
.safari .thumbnail h2 {
	top: -0.7em;
}
.safari .single-line h2 {
	top: .1em;
}

.safari .place-at-base .h2 {
	top: 0;
}
.safari .place-at-base .h1 {
	bottom: 1px;
	position: relative;
}

.windows.safari nav#menu a,
.windows.safari nav#menu a {
	background-position: 100% 100%;
}
.windows.safari nav#menu a:hover,
.windows.safari nav#menu a.active {
	background-position: 200% 100%;
}

/* ================================================================ fallback */
.no-js .one {
	height: 443px;
	width: 426px;
}
.no-js .two,
.no-js .two-square {
	height: 443px;
	width: 855px;
}
.no-js .two-square {
	height: 886px;
}

.no-js .thumbnail {
	height: 212px;
}

/* ================================================================ animations */
/* rollover blend */
a, 
a:link, 
a:visited, 
a:hover, 
a:active {
	-webkit-transition: color 0.2s ease-in-out; 
		 -moz-transition: color 0.2s ease-in-out; 
			-ms-transition: color 0.2s ease-in-out; 
			 -o-transition: color 0.2s ease-in-out;
					transition: color 0.2s ease-in-out; 
}

/* fade */
.anim-all {
	-webkit-transition: all 300ms ease-in-out;
		 -moz-transition: all 300ms ease-in-out;
			-ms-transition: all 300ms ease-in-out;
			 -o-transition: all 300ms ease-in-out;
					transition: all 300ms ease-in-out;
}

/* fade */
.fade {
	-webkit-transition: opacity .3s;
		 -moz-transition: opacity .3s;
			-ms-transition: opacity .3s;
			 -o-transition: opacity .3s;
					transition: opacity .3s;
}

/* slide */
.slide {
	-webkit-transition: left .5s ease-in-out, right .5s ease-in-out;
		 -moz-transition: left .5s ease-in-out, right .5s ease-in-out;
			-ms-transition: left .5s ease-in-out, right .5s ease-in-out;
			 -o-transition: left .5s ease-in-out, right .5s ease-in-out;
					transition: left .5s ease-in-out, right .5s ease-in-out;
}
/* slide left */
.left-move {
	-webkit-transition: left .5s ease-in-out;
		 -moz-transition: left .5s ease-in-out;
			-ms-transition: left .5s ease-in-out;
			 -o-transition: left .5s ease-in-out;
					transition: left .5s ease-in-out;
}
.slide-height {
	-webkit-transition: height .2s ease-in-out;
		 -moz-transition: height .2s ease-in-out;
			-ms-transition: height .2s ease-in-out;
			 -o-transition: height .2s ease-in-out;
					transition: height .2s ease-in-out;
}
.top {
	-webkit-transition: top .5s ease-in-out;
		 -moz-transition: top .5s ease-in-out;
			-ms-transition: top .5s ease-in-out;
			 -o-transition: top .5s ease-in-out;
					transition: top .5s ease-in-out;
}
.slide-height-fast {
	-webkit-transition: height .3s ease-in-out;
		 -moz-transition: height .3s ease-in-out;
			-ms-transition: height .3s ease-in-out;
			 -o-transition: height .3s ease-in-out;
					transition: height .3s ease-in-out;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

	 
/* #Base 1280 Grid
================================================== */

/* #Desktop (low resolution)
================================================== */
	/* Note: Design for a width of 960px */
	@media only screen and (max-width: 1279px) {
		.full-width {
			width: 100%;
		}
	}

/* #Desktop (low resolution)
================================================== */
	/* Note: Design for a width of 960px */
	@media only screen and (max-width: 960px) {
		
	}


/*  #Mobile (Portrait)
================================================== */

	/* Note: Design for a width of 320px */
	
	
	@media only screen and (max-width: 960px) {
		.not-tablet {
			display: none;
		}
	}
	
	@media only screen and (max-width: 786px) {
		h1 {
			font-size: 3.9em;
		}
		
		.not-tablet {
			display: none;
		}
	}

	@media only screen and (max-width: 768px) {
		
		.show-on-mobile {
			z-index: 1;
			opacity: 1;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
					filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		}
		.not-mobile {
			display: none;
			z-index: -99;
			opacity: 0;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
					filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
		}
		
		.blank {
			display: none;
		}
		
		header .tag-line {
			width: 60px;
		}
		
		#mobile-menu {
			display:block;
		}
		#mobile-menu.show {
			top: 61px;
		}
		.pipe {
			display: none;
		}

		.one,
		.two {
			width: 100%;
		}
		.two,
		.two-square,
		#overview {
			overflow: hidden;
		}
		
		.rollover .no-overflow {
			height: 64%;
		}
		
		footer {
			height: 61px;
		}
		footer span {
			margin: 0 8px 0 0;
		}
	}
	
/* #Tablet (Portrait)
================================================== */

	/* Note: Design for a width of 768px *

	@media only screen and (min-width: 768px) and (max-width: 959px) {

	}
	
	
/* #Mobile (Landscape)
================================================== */

	/* Note: Design for a width of 480px */

	@media only screen and (max-width: 529px) {
		body {
			line-height: 1.3em;
		}
		
		h1, h2, .h1, .h2 {
			line-height: 1.19em;
		}
		
		.tag-line,
		.menu {
			top: 24px;
		}
		
		p.title {
			padding-top: 7%;
		}
		
		.two {
			overflow: hidden;
		}
		.two img {
			width: auto !important;
		}
		
		.play-button {
			height: 84px;
			width: 84px;
		}
		.play-button-background {
			height: 64px;
			width: 64px;
		}
				
		.who p {
			width: 92%;
		}
		
		
		.windows.contact .introduction p,
		.windows.four-oh-four .introduction p {
				width: 46%;
		}
		
		.about .inner p.no-top-margin {
			margin-top: 10%;
		}
	}
	
	
/* #Mobile (Landscape)
================================================== */

	/* Note: Design for a width of 480px */

	@media only screen and (max-width: 480px) {
		.tag-line,
		.menu {
			top: 16px;
		}
		
		.awards {
			top: 0;
		}
		
		.play-button {
			height: 74px;
			width: 74px;
		}
		.play-button-background {
			height: 54px;
			width: 54px;
		}
		
		.place-at-base {
			top: 50%;
		}
				
		.contact .introduction p,
		.four-oh-four .introduction p {
				width: auto;
		}
		
		.safari .place-at-base .h2 {
			top: -7px;
		}
		.safari .place-at-base .h1 {
			bottom: 7px;
		}

		.about .clients .inner p.title {
			margin-top: 15%;
		}
		
		footer #tag-line {
			display: none;
		}
		
		footer a.tag-line {
			margin: 0 auto;
			right: auto;
			text-align: center;
			width: 100%;
		}
	}
	
/* #Mobile (Landscape)
================================================== */

	/* Note: Design for a width of 480px *

	@media only screen and (max-width: 480px) {
	}
	
/* #Mobile (portrait)
================================================== */

	/* Note: Design for a width of 320px */
	@media only screen and (max-width: 320px) {
		.tag-line {
			top: 21px;
		}
		.menu {
			top: 22px;
		}
		
		.rollover .no-overflow {
			height: 67%;
		}
		
		.awards {
			top: 8%;
		}
		.award {
			margin: 0 0 4em;
		}
	}

/* #Retina displays
================================================== */
	@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
		.sprite,
		.button {
			background-image: url(../media/images/spritesheetx2.png);
			/* background-size: 50%; */
		}
	}
	

/* #Print
================================================== */
@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Image replacement
 */
.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
	/* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */
.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.clearfix:after {
	clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
	*zoom: 1;
	display: block;
	height: 0;
	position: relative;
	width: calc(100% - 1px);
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
	* {
		background: transparent !important;
		color: #000 !important; /* Black prints faster: h5bp.com/s */
		box-shadow: none !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	/*
	 * Don't show links for images, or javascript/internal links
	 */

	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content: "";
	}

	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	thead {
		display: table-header-group; /* h5bp.com/t */
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	@page {
		margin: 0.5cm;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}
}


p.no-padding {
	padding: 0;
}




.debug {
	visibility: visible;
	width: auto;
	background: rgba(0, 0, 0, .85);
	z-index: 1000;
	position: fixed;
	top: 0;
	right: 0;
	padding: 1vw;
}
.debug p {
	text-align: left;
	padding-left: 0;
}

.debug .log-title {
	padding: 0;
	margin: 0;
	font-weight: bold;
}
.debug .log {
	color: yellow;
}