/* Base Styles
-------------------------------------------------------------------------------*/
html {
	-webkit-font-smoothing: antialiased; /*reduced the stroke thickness on webkit browsers*/
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
body {
	width: auto;
	min-width: 0;
	
	font-family: 'ProximaNova-Light', helvetica, arial, sans-serif;
	
	/*turn off ligatures for FF*/
	-moz-font-feature-settings: "calt" off, "liga" off;
	
	/* Disable broken/dropped ligatures for webkit/OSX/iOS after Mavericks release */
	-webkit-font-variant-ligatures: no-common-ligatures;
	font-variant-ligatures: no-common-ligatures;
}
::-moz-selection 	{ background: #AEC239; color: #fff; text-shadow: none; }
::selection 		{ background: #AEC239; color: #fff; text-shadow: none; }
a {
	color: #006D88;
	text-decoration: none;
	outline: none;
}
a:hover {
	text-decoration: underline;
}
a.fancy-underline:hover,
a.fancy-underline-green:hover {
	text-decoration: none;
}
section {
	position: relative;
	
	width: 940px;
	margin: 0 auto;
	font-family: 'ProximaNova-Regular', helvetica, arial, sans-serif;
	font-size: 18px;
	color: #1F1F1F;
	
	-webkit-transition: width .1s linear;
	-moz-transition: width .1s linear;
	transition: width .1s linear;
	
	zoom: 1;
	
	/*background: #eee;*/
}
section:after {
  content: '.';
  display: block;
  height: 0px;
  visibility: hidden;
  clear: both;
}
section div:first-child {
	z-index: 1;
	overflow: visible !important;
}

section h2 {
	font-family: "Minion-Italic", "Palatino Linotype", Palatino, Garamond, "Apple Garamond", Georgia, serif;
	font-size: 26px;
	color: #212121;
	margin-bottom: 1em;
}
section h2 small {
	font-family: 'ProximaNova-Regular', helvetica, arial, sans-serif;
	font-size: 18px;
}


section p {
	margin-bottom: 1em;
	font-size: 16px;
	line-height: 120%;
	color: #1F1F1F;
}
section p:last-child {
	margin-bottom: 0;
}

section + hr,
section > hr {
	width: 940px;
	margin: 45px auto;
	clear: both;
	
	padding: 0 0 1px 0;
	height: 0;
	background: url(#) repeat 0 0 #ddd;
	border: none;
	color: #ddd;
	*display : list-item;
	*list-style : url(#) inside;
	*filter : alpha(opacity=0);
	clear: both;
	
	-webkit-transition: width .1s linear;
	-moz-transition: width .1s linear;
	transition: width .1s linear;
}
section ul,
section ul > li {
	font-size: 16px;
	list-style-type: disc;
	list-style-position: outside;
}
section ul > li {
	margin-left: 20px;
	margin-bottom: 0.6em;
}
#holder {
	background: #e9e9e9; 
	padding: 0 75px; 
	margin-bottom: 1em;
	text-align: center;
}
#holder-sm { display: none; }


/* Thin */
@media all and (max-width: 1000px) and (min-width: 768px) {
	section { width: 700px; }
	section + hr,
	section > hr { width: 700px; }
}
/* Mobile */
@media all and (max-width: 767px) {
	section { width: 300px; }
	section + hr,
	section > hr { width: 300px; }
	#holder { display: none; } 
	#holder-sm { 
		display: block;
		background: #e9e9e9;
		text-align: center;
		width: 300px; 
		height: 300px;
		padding: 0; 
		margin: 0 0 1em 0;
		overflow: hidden; 
	}
	#holder-sm svg {
		/*width: 320px;*/
		/*-webkit-transform: scale(0.65);*/
		margin: 0 auto;
		display: block;
	}
}



/* Footer Styles
-------------------------------------------------------------------------------*/
footer {
	width: 960px;
	margin: -25px auto 0 auto;
	padding-bottom: 60px;
	
	text-align: center;
	font-size: 15px;
	color: #999;
	
	-webkit-transition: width .1s linear;
	-moz-transition: width .1s linear;
	transition: width .1s linear;
}
footer a.scroll-to-top {
	margin-top: 62px;
	/*width: 102px;*/
}
footer a.scroll-to-top span.arrow {
	margin-left: 36px;
}

/* Thin */
@media all and (max-width: 1000px) and (min-width: 768px) {
	footer { width: 700px; }
	footer + hr { width: 700px; }
}
/* Mobile */
@media all and (max-width: 767px) {
	footer { width: 300px; }
	footer + hr { width: 300px; }
}











/* Design Work Pg Styles
-------------------------------------------------------------------------------*/

/* Intro
-------------------------------------------*/
#intro {
	text-align: center;
	margin: 45px auto -25px auto;
}
#intro h1 {
	display: inline-block;
	font-size: 61px;
	font-family: 'ProximaNova-Light', helvetica, arial, sans-serif;
	font-weight: normal;
	letter-spacing: 0;
	color: #fff;
	
	/* CSS Gradient Background Color - Stack for Webkit and Gecko, no MS or Opera */	
	background: #006E89;
	background: -moz-linear-gradient(-45deg,  #00B2EC 0%, #006E89 100%);
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#00B2EC), color-stop(100%,#006E89));
	background: -webkit-linear-gradient(-45deg,  #00B2EC 0%,#006E89 100%);
	background: linear-gradient(135deg,  #00B2EC 0%,#006E89 100%);
	
	/* Webkit supports background-clipping with text */
    -webkit-background-clip: text, border;
	background-clip: text, border;
    -webkit-text-fill-color: transparent;

	position: relative;
	z-index: 0;

	/*text-shadow: 0px -2px rgba(0, 0, 0, 1.0); can't use text-shadow along with this */
	text-shadow: 0px 0px rgba(0, 0, 0, 0);
}
body.gecko #intro h1 {
	background: none repeat scroll 0 0 transparent;
	color: #008FBC;
}


@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
	#intro h1 {
		-webkit-transform: scale(0.5);
		font-size: 122px;
		margin: -30px -300px;
	}
}


/* Mobile */
@media all and (max-width: 767px) {
	#intro h1 { font-size: 43px; }
	section h2 { font-size: 18px; }
}
@media 
all and (max-width: 767px) and (-webkit-min-device-pixel-ratio : 1.5),
all and (max-width: 767px) and (min-device-pixel-ratio : 1.5) {
	#intro h1 { font-size: 86px; margin: -21px -300px; }
}




/* Work Thumbnails
-------------------------------------------*/
#work .wd {
	
}
#work div .blurb {
	clear: both;
	margin: 0 0 3em 0;
	padding-top: 2em;
}
#work a.thumb {
	display: block;
	float: left;
	width: 300px;
	height: 200px;
	margin: 20px 20px 0 0;
	position: relative;
	overflow: hidden;
	
	background: #f5f5f5;
	
	color: #fff;
	
	-webkit-transition: width .1s linear;
	-moz-transition: width .1s linear;
	transition: width .1s linear;
}
/* Overlay */
#work a.thumb div.overlay {
	position: absolute;
	z-index: 10;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0,0,0,0.85);
	/*background: rgba(35,4,49,0.85);*/
	padding: 0;
	text-align: left;
	
	font-size: 16px;
	
	display: table;
	width: 100%;
	height: 100%; /* tables won't stretch to full height otherwise */
	
	opacity: 0;
	-webkit-transition: opacity .1s linear;
	-moz-transition: opacity .1s linear;
	transition: opacity .1s linear;
}
.ie8 #work a.thumb div.overlay {
	/*filter: alpha(opacity=0);*/
	display: none;
}
#work a.thumb div.overlay div {
	display: table-cell;
	vertical-align: middle;
	padding: 30px 20px;
}
#work a.thumb div.overlay.features div {
	vertical-align: bottom;	
}
#work a.thumb div.overlay img.overlay-logo {
	position: absolute;
	left:0;
	right:0;
	top: 80px;
	margin:auto;
	
	opacity: 0;
	-webkit-transition: opacity .5s linear;
	-moz-transition: opacity .5s linear;
	transition: opacity .5s linear;
}
#work .dtas a.thumb.br-app div.overlay img.overlay-logo,
#work .dtas a.thumb.bofa-app div.overlay img.overlay-logo,
#work .wd a.thumb.reveal div.overlay img.overlay-logo,
#work .wd a.thumb.clearsky div.overlay img.overlay-logo,
#work .wd a.thumb.wrigley div.overlay img.overlay-logo {
	/* special for Wrigley Logo */
	top: 120px;
}
#work a.thumb div.overlay:after {
	content: ' ';
	display: block;
	position: absolute;
	bottom: 20px;
	right: 20px;
	width: 35px;
	height: 35px;
	
	background-image: url(../images_layout/overlay-arrow-right-2x.png);
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAb/QAAG/0Bl9EHNgAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAVdEVYdENyZWF0aW9uIFRpbWUAMTAvNC8xMtdfXtkAAAPJSURBVHic7ZzLeaMwFIWP8mUfl0AH4w6G6cAlMB2kg3EJ7iAuYUqgBLsDSmAqOLOQ7I/YoHv1AONEZ+MF0n38FpKQBAYLieQGQA1g6343AH4I1c4AegAtgBOA1hjTzxYkAJJzmr862ZI8kDwxn07O5nammOeBQ3JD8p1klxHGlDrna5Mx/rxgHJA9yX4BILfqne9kQFnBPBDIrXqS+4eDIVlzmVsmVB3J+iFgaDvAtesQC8ZEVKwA/IU81Gp1GZKH0gzlIfZ3xphOU5iutQSBoR0iWwBvYbFddXb1WwCdMeak8FfBzntqxMP6B6CW/DmfYZZp5yQxHWxH2zlXcTl9iqFytmL6tZ6KuQ9D+phIKB3JJpGFL6YmApAIRw0mAko/J5CR+JqI+CbhqMDQNt0Qp0dmnIVqRTu5PAbCqSZsqcBon3EWbSWeeENaz2nsTxTBUD9PUXVqS4lht/7dPMcLhnZG+3RQLgqEU9/UHQdDe79qevtVQrkoAE7HwS3lA7N/digXBcDZD+rcg6FtLRpDzbIpxou2Q9b80RtXfhSMZsg7PiC/JIXkdQeGutZyJTtjEvsZbKpzGwPzrqDa5A56JInrv5fZruaWeh8DI41EXe5gJxK46DiDbTHHT2Boe29JTe5AJ4If6pjZtqbVbIdgpFlulzNAIfhbHTPbl1rNYQhGKrzPGZwQ+JiajPaleVpH8voELanKFZgi8Ck1mezr8iW5EwqJy4E5JcTSZPIhrRrsXmH3kn1qA50eFDZj9UESxphjop0W/vXjLUi2Er0Qjwp7OZQEnvJd0r7AblX41KUEMZPaRDidcH1jSP86njEmdIulBfAzpE6k1FsiY5LyfhHqn2OcLqQ3pLUcb24SmFkP6WTQBU7Mg603NwnMMygFzqS+AhgAyH4E6iuA6QH8yn02TwKz+OZZoFKgeHOTwOQ6ijGHLlBiH1m8ub1AGLZSZ5kzKQmKIqfzC+QhuYpxPrNSWgog59S/wj5Q+WaqNewJKq1OSBslauH670QoGh9tWXYY164sVPnyZVnaHMoubbrCa14M/8hsP2gxfK3bJ7mhhG2fuEpr23DLCsXZDttwc5XWtEU7B5ToLdq1bOr/mcFm/Ka+M1COgZSDQ5/kPzjkLpSjZuVwIknt4UR3sVYYXC2cACik9jjroEA5AD3hYMNyZH7SURXgiPwuL1m4guW1HE/h8iKXp8K3evWvvCx67xNA4Fu0rmKFb/B6cbT4xV9IT4VTs3zCwGtsz/LRi0mD5TMpguHyYR2Fk6f9FFPwcJ3g8Kk+3vUfmXLSoz38vOIAAAAASUVORK5CYII=);
	background-size: 100%;
	
	display: none; /* turn on with hover - IE9 has trouble */
}
.no-backgroundsize #work a.thumb div.overlay:after {
	background-image: url(../images_layout/overlay-arrow-right-1x.png);
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAcIAAAHCABzQ+bngAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAVdEVYdENyZWF0aW9uIFRpbWUAMTAvNC8xMtdfXtkAAAG2SURBVFiFzZhheYMwEIa/VEEdDAlzMCQgoXNQCZNQB6sEJFRCJVAHdfDuB+meNBwhAdbxPQ9/4C55cxdySZwKBFSSGkm1pHdJb4bZTdJV0kVS65zrJtosQZCAGmiZpxaoUzCPZwqiWgBhQVWzYIAGuK8E8tAdaIpggMNEgycPW0V+lX9/mhjIIQsmAdKFjeTIt9WlgEZh/KgsnYF9CUjQ5t77W2pMGPoQW6EtikYCyor43fc7gLH+mlVAJoDaJxj6dWSQmjVBAiArZXUIE0elo3COkFjYIrs9w0ndAr9zZXF6SqI5kq5KwDF6eS8FCWAAvjLt45/laKXotBAmK7L0C+NTqsQwf82I88UIbUpJIIZrWhePCIxiNhMmCYQxVwcwCec5MDASad/mk3apUK6k7Dn4CphjruEAhpE5M1OfzrnW+mD1s1O/Zw31viLIOfE97ue2U795DlVbns652iVUCGL1c93cCrxmbfrOtLVrk/+4RtX+yLQbr9reYDv7GW+0jZ2eN9zOHtg7bON0MDECePW5KQPoEdrXnCgDo22ctaOR/v8tRORQL4DKvp+JC9xkpPSHN1c/vK254D93zEkAAAAASUVORK5CYII=);
}
#work a.thumb div.overlay h3,
#work a.thumb div.overlay h4,
#work a.thumb div.overlay h5 {
	font-size: 14px;
	width: 80%;
	line-height: 120%;
	
	position: relative;
	top: -6px;
	-webkit-transition: top .3s linear;
	-moz-transition: top .3s linear;
	transition: top .3s linear;
}
#work a.thumb div.overlay h3 {
	font-family: 'ProximaNova-Bold', helvetica, arial, sans-serif;
	width: 100%;
	font-size: 18px;
	color: #fff;
}
#work a.thumb div.overlay h4 {
	margin-bottom: 1em;
}
/* Effects on Hover */
#work a.thumb:hover div.overlay,
#work a.thumb:hover div.overlay img.overlay-logo {
	opacity: 1;
}
.ie8 #work a.thumb:hover div.overlay {
	zoom: 1;
	/*filter: alpha(opacity=100);*/
	display: table;
	background: url(../images_layout/bg-tile-black-85opacity.png) repeat 0 0 transparent;
}
#work a.thumb:hover div.overlay:after {
	display: block;
}
#work a.thumb:hover div.overlay h3,
#work a.thumb:hover div.overlay h4,
#work a.thumb:hover div.overlay h5 {
	top: 0px;
}

/*Which Thumb to Display*/
#work a.thumb img.large,
#work a.thumb img.thin,
#work a.thumb img.mobile {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-transition: opacity .1s linear;
	-moz-transition: opacity .1s linear;
	transition: opacity .1s linear;
}
#work a.thumb img.large {
	opacity: 1;
}
#work a.thumb img.thin,
#work a.thumb img.mobile {
	opacity: 0;
}
.ie8 #work a.thumb img.thin,
.ie8 #work a.thumb img.mobile {
	display: none;
}

/* Grid Sizes Dtas */
/* 1st row */
#work .dtas a.thumb.br-app {
	margin-top: 0;
	width: 540px;
	height: 350px;
}
#work .dtas a.thumb.bofa-app {
	margin-top: 0;
	width: 380px;
	height: 350px;
}

/* Grid Sizes CM */
/* 1st row */
#work .cm {
	margin-bottom: 50px;
}
#work .cm a.thumb.cm-buyer-guides {
	margin-top: 0;
	width: 380px;
	height: 300px;
}
#work .cm a.thumb.cm-browse-engagement {
	margin-top: 0;
	width: 540px;
	height: 300px;
}
/* 2nd row */
#work .cm a.thumb.cm-email-redesign,
#work .cm a.thumb.cm-gifts-section,
#work .cm a.thumb.cm-rapid-testing {
	width: 300px;
	height: 250px;
}

/* Grid Sizes */
/* 1st row */
#work .wd a.thumb.youdecide {
	margin-top: 0;
	width: 380px;
	height: 350px;
}
#work .wd a.thumb.reveal {
	margin-top: 0;
	width: 540px;
	height: 350px;
}
/* 2nd row */
#work .wd a.thumb.wrigley {
	width: 540px;
	height: 350px;
}
#work .wd a.thumb.clearsky {
	width: 380px;
	height: 350px;
}

/* 3rd row */
#work .wd a.thumb.jordans {
	width: 380px;
	height: 300px;
}
#work .wd a.thumb.fa-guitar-builder {
	width: 540px;
	height: 300px;
}
/* 4th row */
#work .wd a.thumb.wrigley-mobile,
#work .wd a.thumb.bls-charts,
#work .wd a.thumb.wrigley-redesign {
	width: 300px;
	height: 250px;
}
/* 5th row */
#work .wd a.thumb.wrigley-pia {
	width: 540px;
	height: 200px;
}
#work .wd a.thumb.kanes-scanner {
	width: 380px;
	height: 200px;
}
/* 6th row */
#work .wd a.thumb.jordans-inner-circle,
#work .wd a.thumb.bls-tour,
#work .wd a.thumb.fa-site {
	width: 300px;
	height: 200px;
}
/* Grid Adjustments - right side items */
#work .dtas a.thumb:nth-child(3),
#work .cm a.thumb:nth-child(3),
#work .cm a.thumb:nth-child(6),
#work .wd a.thumb:nth-child(3),
#work .wd a.thumb:nth-child(5),
#work .wd a.thumb:nth-child(7),
#work .wd a.thumb:nth-child(10),
#work .wd a.thumb:nth-child(12),
#work .wd a.thumb:nth-child(15) {
	margin-right: 0 !important;
}
/* Extra Support for IE8 */
.ie8 #work .dtas a.thumb.bofa-app,
.ie8 #work .cm a.thumb.cm-browse-engagement,
.ie8 #work .cm a.thumb.cm-rapid-testing,
.ie8 #work .wd a.thumb.reveal,
.ie8 #work .wd a.thumb.clearsky,
.ie8 #work .wd a.thumb.fa-guitar-builder,
.ie8 #work .wd a.thumb.wrigley-redesign,
.ie8 #work .wd a.thumb.kanes-scanner,
.ie8 #work .wd a.thumb.fa-site {
	margin-right: 0 !important;
}

/* Thin */
@media all and (max-width: 1000px) and (min-width: 768px) {
	#work a.thumb img.thin {
		opacity: 1;
	}
	#work a.thumb img.large,
	#work a.thumb img.mobile {
		opacity: 0;
	}

	/* dtas */
	/* 1st + 2nd + 3rd rows */
	#work .dtas a.thumb.br-app,
	#work .dtas a.thumb.bofa-app {
		width: 340px;
	}

	/* cm */
	#work .cm a.thumb.cm-buyer-guides,
	#work .cm a.thumb.cm-browse-engagement {
		width: 340px;
	}
	#work .cm a.thumb.cm-email-redesign,
	#work .cm a.thumb.cm-gifts-section,
	#work .cm a.thumb.cm-rapid-testing {
		width: 220px;
	}
	/* wd */
	/* 1st + 2nd + 3rd rows */
	#work .wd a.thumb.youdecide,
	#work .wd a.thumb.reveal,
	#work .wd a.thumb.wrigley,
	#work .wd a.thumb.clearsky,
	#work .wd a.thumb.jordans,
	#work .wd a.thumb.fa-guitar-builder {
		width: 340px;
	}
	/* 3rd row */
	#work .wd a.thumb.wrigley-mobile,
	#work .wd a.thumb.bls-charts,
	#work .wd a.thumb.wrigley-redesign {
		width: 220px;
	}
	/* 4th row */
	#work .wd a.thumb.wrigley-pia,
	#work .wd a.thumb.kanes-scanner  {
		width: 340px;
	}
	/* 5th row */
	#work .wd a.thumb.jordans-inner-circle,
	#work .wd a.thumb.bls-tour,
	#work .wd a.thumb.fa-site {
		width: 220px;
	}
}
/* Mobile */
@media all and (max-width: 767px) {
	#work a.thumb {
		width: 300px !important;
		height: 150px !important;
		margin-right: 0 !important;
		margin-top: 10px !important;
	}
	#work a.thumb img.mobile {
		opacity: 1;
	}
	#work a.thumb img.large,
	#work a.thumb img.thin {
		opacity: 0;
	}
	
	#work a.thumb div.overlay,
	#work a.thumb div.overlay div {
		opacity: 1;
		height: 39px;
		top: auto;
		text-align: left;
		padding: 0;
	}
	#work a.thumb div.overlay:after {
		content: ' ';
		display: block;
		position: absolute;
		top: 9px;
		right: 9px;
		width: 29px;
		height: 21px;
		
		background-image: url(../images_layout/mobile-work-list-arrow-2x.gif);
		background-image: url(data:image/gif;base64,R0lGODlhOgAqAIAAAP///////yH5BAEHAAEALAAAAAA6ACoAAAJvjI+pu+AMo5zKAYoztrr7xH2iFo6mVJ5q9awukr5rLJ90Pd74p+9d78sAg5QhEdU68pLKH7MpfEKLD4v1is1qt9yu9wsGT6OXMbVsRqLTEGPabYaP5VM61N7EK/VHPtEfBOgjuEOIY1iDKKP4wlcAADs=);
	}
	.no-backgroundsize #work .wd a.thumb div.overlay:after {
		background-image: url(../images_layout/mobile-work-list-arrow-1x.gif);
		background-image: url(data:image/gif;base64,R0lGODlhHQAVAJEAAP///////////wAAACH5BAEHAAIALAAAAAAdABUAAAIulI95oO3OnnxxWlTvzXryToGbaH1kwgDqyrbua55CfNKkLeKg3vGaP5IpgCVJAQA7);
	}
	
	#work a.thumb div.overlay h3 {
		font-size: 14px;
		line-height: 39px;
		padding-left: 10px;
		font-family: 'ProximaNova-Semibold', helvetica, arial, sans-serif;
		-webkit-transition: none;
		-moz-transition: none;
		transition: none;
		top: 0;
	}
	#work a.thumb div.overlay img.overlay-logo,
	#work a.thumb div.overlay h4,
	#work a.thumb div.overlay h5 {
		display: none;
	}
}


/* Awards List
-------------------------------------------*/
#awards {
	
}

#award-img {
	position: absolute;
	right: 10px;
	top: 10px;
}
#awards-list ,
#awards-list li {
	list-style-type: none;
	font-size: inherit;
	margin: 0;
	padding: 0;
}
#awards-list {
	font-family: 'ProximaNova-Regular', helvetica, arial, sans-serif;
	font-size: 13px;
	line-height: 1.3em;
	max-width: 620px;
}
#awards-list li {
	position: relative;
	background: url(../images_layout/bg-rule-dotted.png) repeat-x left bottom transparent;
	padding: 4px 0 20px 300px;
	margin-bottom: 20px;
}
#awards-list li:last-of-type {
	background: none;
	padding: 4px 0 0 60px;
	margin-bottom: 0;
}
#awards-list li hr {
	border: none;
	height: 0px;
	margin: 1em 0;
	background: transparent;
}
#awards-list li time,
#awards-list li b {
	position: absolute;
	left: 0;
	top: 0;
	font-family: "Minion-Regular", "Palatino Linotype", Palatino, Garamond, "Apple Garamond", Georgia, serif;
	font-size: 20px;
	line-height: 20px;
}
#awards-list li em {
	display: inline-block;
	width: 220px;
	padding-right: 20px;
	position: absolute;
	left: 60px;
}
#awards-list li strong {
	font-family: 'ProximaNova-Bold', helvetica, arial, sans-serif;
}

/* Thin */
@media all and (max-width: 1000px) and (min-width: 768px) {
	#award-img { display: none; }
	#awards-list { max-width: 700px; }
	#awards-list li { padding-right: 80px; }
}
/* Mobile */
@media all and (max-width: 767px) {
	#award-img { display: none; }
	#awards-list li { padding-left: 60px; padding-top: 5px !important; font-size: 12px; }
	#awards-list li em { position: static; display: block; margin-bottom: 10px; }
	#awards-list li hr { margin: 2em 0; }
}




/* Clients / Brands List Section
-------------------------------------------*/
section#clients-brands-list ul,
section#clients-brands-list ul li {
	list-style-type: none;
	font-size: inherit;
	margin: 0;
	padding: 0;
}
section#clients-brands-list ul {
	margin: 0;
	
	width: 25%;
	float: left;
	display: inline;
	
	/*font-family: 'ProximaNova-Light', helvetica, arial, sans-serif;*/
	font-family: 'ProximaNova-Regular', helvetica, arial, sans-serif;
}
section#clients-brands-list ul:after {
  content: '.';
  display: block;
  height: 0px;
  visibility: hidden;
  clear: both;
}
section#clients-brands-list ul li {
	font-size: 16px;
	margin-bottom: 18px;
}
section#clients-brands-list ul li:last-of-type {
	margin-bottom: 0;
}
/* Thin */
@media all and (max-width: 1000px) and (min-width: 768px) {
	section#clients-brands-list ul li {
		font-size: 13px;
		margin-bottom: 16px;
	}
}
/* Mobile */
@media all and (max-width: 767px) {
	section#clients-brands-list ul {
		width: 50%;
		margin-bottom: 1em;
	}
	section#clients-brands-list ul li {
		font-family: 'ProximaNova-Regular', helvetica, arial, sans-serif;
		font-size: 12px;
		margin-bottom: 1em;
	}
	section#clients-brands-list ul li:last-of-type {
		margin-bottom: 1em;
	}
}



/* SKills Section
-------------------------------------------*/
a.resume {
	position: absolute;
	right: 0;
	top: 0;
}
.ie8 a.resume {
	position: absolute !important;
}
#skills-list {
	margin: -3em auto 0 auto;
	width: 850px;
	height: 370px;
	overflow: hidden;
	text-indent: -9999em;
	background: url(../images/skills/skills-lists-lg-2015-2x.png) no-repeat 0 0 transparent;
	background-size: 100%;
}
.no-backgroundsize #skills-list {
	background-image: url(../images/skills/skills-lists-2015-lg-1x.png);
}
#skills-list ul,
#skills-list ul li {
	list-style-type: none;
	font-size: inherit;
	margin: 0;
	padding: 0;
}
#skills-list h3 			{ font-family: 'ProximaNova-Semibold', helvetica, arial, sans-serif; }
#skills-list h3.creative 	{ color: #4E325C; }
#skills-list h3.technical 	{ color: #AC683D; }
#skills-list h3.leadership 	{ color: #8C973A; }

/* Thin */
@media all and (max-width: 1000px) and (min-width: 768px) {
	#skills-list {
		width: 700px;
		height: 348px;
		background-image: url(../images/skills/skills-lists-thin-2015-2x.png);
	}
	.no-backgorund-size #skills-list {
		background-image: url(../images/skills/skills-lists-thin-2015-1x.png);
	}
}
/* Mobile */
@media all and (max-width: 767px) {
	a.resume {
		top: -6px;
	}
	#skills-list {
		font-family: 'ProximaNova-Regular', helvetica, arial, sans-serif;
		font-size: 12px;
		line-height: 140%;
		/* resets */
		width: auto;
		height: auto;
		margin: 0;
		text-indent: 0;
		background: none;
		
		background: url(../images/skills/skills-lists-mobile-2x.png) no-repeat right 50% transparent;
		background-size: 86px 227px;
	}
}




/* Furthermore Section
-------------------------------------------*/
section#furthermore p {
	font-family: 'ProximaNova-Regular', helvetica, arial, sans-serif;
	line-height: 140%;
}
/* Mobile */
@media all and (max-width: 767px) {
	section#furthermore p {
		font-size: 12px;
	}
}


/* Elsewhere Section
-------------------------------------------*/
#elsewhere {
	height: 165px;
	-webkit-transition: height .1s linear;
	-moz-transition: height .1s linear;
	transition: height .1s linear;
}
#elsewhere a {
	display: block;
	width: 10px;
	height: 10px;
	text-indent: -999em;
	
	position: absolute;
	left: 0;
	top: 0;
	
	background: url(#) no-repeat 0 0 transparent;
	background-size: 100%;
	-moz-background-size: 100%;
	
	opacity: 0.84;
	
	-webkit-transition: opacity .1s linear, left .1s linear, top .1s linear;
	-moz-transition: opacity .1s linear, left .1s linear, top .1s linear;
	transition: opacity .1s linear, left .1s linear, top .1s linear;
}
#elsewhere a:hover {
	opacity: 1.0;
}
#elsewhere a#linkedin {
	background-image: url(../images/elsewhere/linkedin-2x.png);
	/*background-size: 105px 28px;*/
	width: 105px; height: 28px;
	left: 306px; top: 62px;
}
.no-backgroundsize #elsewhere a#linkedin {
	background-image: url(../images/elsewhere/linkedin-1x.png)
}
#elsewhere a#facebook {
	background-image: url(../images/elsewhere/facebook-2x.png);
	/*background-size: 118px 24px;*/
	width: 118px; height: 24px;
	left: 392px; top: 0px;
}
.no-backgroundsize #elsewhere a#facebook {
	background-image: url(../images/elsewhere/facebook-1x.png)
}
#elsewhere a#twitter {
	background-image: url(../images/elsewhere/twitter-2x.png);
	/*background-size: 59px 40px;*/
	width: 58px; height: 40px;
	left: 570px; top: 12px;
}
.no-backgroundsize #elsewhere a#twitter {
	background-image: url(../images/elsewhere/twitter-1x.png)
}
#elsewhere a#behance {
	background-image: url(../images/elsewhere/behance-2x.png);
	/*background-size: 104px 20px;*/
	width: 104px; height: 20px;
	left: 700px; top: 10px;
}
.no-backgroundsize #elsewhere a#behance {
	background-image: url(../images/elsewhere/behance-1x.png)
}
#elsewhere a#pinterest {
	background-image: url(../images/elsewhere/pinterest-2x.png);
	/*background-size: 49px 49px;*/
	width: 49px; height: 49px;
	left: 665px; top: 62px;
}
.no-backgroundsize #elsewhere a#pinterest {
	background-image: url(../images/elsewhere/pinterest-1x.png)
}
#elsewhere a#flickr {
	background-image: url(../images/elsewhere/flickr-2x.png);
	/*background-size: 69px 21px;*/
	width: 69px; height: 21px;
	left: 499px; top: 87px;
}
.no-backgroundsize #elsewhere a#flickr {
	background-image: url(../images/elsewhere/flickr-1x.png)
}
#elsewhere a#instagram {
	background-image: url(../images/elsewhere/instagram-2x.png);
	/*background-size: 93px 29px;*/
	width: 93px; height: 29px;
	left: 385px; top: 134px;
}
.no-backgroundsize #elsewhere a#instagram {
	background-image: url(../images/elsewhere/instagram-1x.png)
}
#elsewhere a#panoramio {
	background-image: url(../images/elsewhere/panoramio-2x.png);
	/*background-size: 125px 22px;*/
	width: 125px; height: 22px;
	left: 778px; top: 105px;
}
.no-backgroundsize #elsewhere a#panoramio {
	background-image: url(../images/elsewhere/panoramio-1x.png)
}
#elsewhere a#dribbble {
	background-image: url(../images/elsewhere/dribbble-2x.png);
	width: 96px; height: 23px;
	left: 178px;
	top: 116px;
}
.no-backgroundsize #elsewhere a#dribbble {
	background-image: url(../images/elsewhere/dribbble-1x.png)
}
/* Thin */
@media all and (max-width: 1000px) and (min-width: 768px) {
	#elsewhere { height: 195px; }
	#elsewhere a#linkedin 	{ left: 250px; top: 92px; }
	#elsewhere a#facebook 	{ left: 335px; top: 30px; }
	#elsewhere a#twitter 		{ left: 515px; top: 46px; }
	#elsewhere a#behance 		{ left: 592px; top: 0px; }
	#elsewhere a#pinterest 	{ left: 625px; top: 86px; }
	#elsewhere a#flickr 		{ left: 442px; top: 115px; }
	#elsewhere a#instagram 	{ left: 325px; top: 165px; }
	#elsewhere a#panoramio 	{ left: 526px; top: 172px; }
	#elsewhere a#dribbble 	{ left: 115px; top: 137px; }
}
/* Mobile */
@media all and (max-width: 767px) {
	#elsewhere { 
		height: 235px;
		height: 278px; 
	}
	#elsewhere p {
		font-family: 'ProximaNova-Regular', helvetica, arial, sans-serif;
		font-size: 12px;
	}
	#elsewhere a#linkedin 	{ left: 10px; top: 216px; width: 80px; height: 21px; }
	#elsewhere a#facebook 	{ left: 10px; top: 100px; width: 90px; height: 18px; }
	#elsewhere a#twitter 		{ left: 134px; top: 84px; width: 45px; height: 31px; }
	#elsewhere a#behance 		{ left: 64px; top: 157px; width: 79px; height: 15px; }
	#elsewhere a#pinterest 	{ left: 208px; top: 123px; width: 37px; height: 37px; }
	#elsewhere a#flickr 		{ left: 137px; top: 199px; width: 53px; height: 16px; }
	#elsewhere a#instagram 	{ left: 228px; top: 193px; width: 71px; height: 23px; }
	#elsewhere a#panoramio 	{ left: 204px; top: 67px; width: 95px; height: 17px; }
	#elsewhere a#dribbble 	{ left: 167px; top: 250px; width: 76px; height: 18px; }
}








/* Design Work - Project Details Template Styles
-------------------------------------------------------------------------------*/

.project-details,
.project-details #wrapper {
	background: #f8f8f8;
}
.project-details #intro {
	text-align: left;
	padding-top: 20px;
}
.project-details #intro p {
	padding-left: 0.3em; /* compensate for odd kerning/character-widths within the Proxima font - headlines are misaligned */
}
#details {
	
}
#details strong {
	/*font-weight: bold;*/
	font-family: 'ProximaNova-Bold', helvetica, arial, sans-serif;
}
#details > div {
	float: left;
	display: inline;
	width: 60%;
	padding-right: 10%;
	margin-bottom: 1em;
}
#details > div p em {
	font-style: italic;
}
#details > div p.project-link a.button-gray span.arrow {
	margin-left: 26px;
}
#details .dropcap {
	/* Drop-Cap 3 lines*/
	font-family: 'ProximaNova-Light', helvetica, arial, sans-serif;
	/*font-family: "Minion-Regular", "Palatino Linotype", Palatino, Garamond, "Apple Garamond", Georgia, serif;*/
	float: left;
    font-size: 76px;
    line-height: 1;
    margin: -7px 0 -18px -5px;
    padding: 0;
    width: 0.65em;
}
.ie9 #details .dropcap {
	margin-top: -10px;
}
.ie8 #details .dropcap {
	font-size : 100%;
	float : none;
	display: inline;
	width : auto;
	margin: none;
	padding: none;
	line-height: 1;
	position: static;
	top: auto;
}
#details > div p.project-link a.url {
	display: inline-block;
	margin: 0.5em;
}
#details > aside {
	float: left;
	display: inline;
	width: 30%;
}
#details .css-columns {
	display: block;
	width: 100%;

	/* three columns for devices under 600px wide */
	/* note there is a 2nd media query below for 2 columns as well */
	-webkit-column-count:2;
	-moz-column-count:2;
	-o-column-count:2;
	-ms-column-count:2;
	column-count: 2;

	/* gutters are 20px */
	-webkit-column-gap: 20px;
	-moz-column-gap: 20px;
	-o-column-gap: 20px;
	-ms-column-gap: 20px;
	column-gap: 20px;

	/* column width set to auto - the rendering engine will calculate it based off the number of columns and the specified gutter width above */
	-webkit-column-width: auto;
	-moz-column-width: auto;
	-o-column-width: auto;
	-ms-column-width: auto;
	column-width: auto;

	/* fallback for balance below */
	-webkit-column-fill: auto;
	-moz-column-fill: auto;
	-o-column-fill: auto;
	-ms-column-fill: auto;
	column-fill: auto;

	/* balance should be ideal for item distribution between all columns, but isn't supported universally yet, so leave in the fallback above */
	-webkit-column-fill: balance;
	-moz-column-fill: balance;
	-o-column-fill: balance;
	-ms-column-fill: balance;
	column-fill: balance;
}
#details .css-columns p {
	display: block;
	width: 100%;

	/* options for break inside are 'auto' and 'avoid' - use avoid such that the inner-content within block level items distributed between columns sticks together. Without set to 'avoid' a caption + photo combo might be split between columns, for example. */
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	-o-column-break-inside: avoid;
	-ms-column-break-inside: avoid;
	column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}
.work-samples {
	background: #F3F1F0;
	padding: 60px 30px;
	width: 880px;
	
	-webkit-transition: width .1s linear;
	-moz-transition: width .1s linear;
	transition: width .1s linear;
}
.work-samples.full-width {
	padding: 0;
	width: 940px;
}
.work-samples.full-width + .work-samples.full-width {
	margin-top: 50px;
}
.work-samples img {
	max-width: 940px;
	
	display: block;
	margin: 0 auto;
	
	background: url(/portfolio/images_layout/loading_spinner.gif) no-repeat 50% 50% transparent;
	
	-webkit-transition: max-width .1s linear, width .1s linear, height .1s linear;
	-moz-transition: max-width .1s linear, width .1s linear, height .1s linear;
	transition: max-width .1s linear, width .1s linear, height .1s linear;
}
.work-samples img.more-neg-space {
	padding: 60px 0;
}
.work-samples img + img {
	margin-top: 60px;
}
/* CustomMade tweak */
.work-samples.custommade {
	background: none;
}

/* Thin */
@media all and (max-width: 1000px) and (min-width: 768px) {
	.work-samples,
	.work-samples img {
		max-width: 640px;
	}
	.work-samples.full-width,
	.work-samples.full-width img {
		padding: 0;
		max-width: 700px;
	}
	#details > div p,
	#details > aside p {
		font-size: 14px;
		line-height: 18px;
	}
	#details .dropcap {
		/* Drop-Cap 3 lines*/
	    font-size: 70px;
	    margin: -5px 0 -18px -5px;
	}
	.ie9 #details .dropcap {
		margin-top: -8px;
	}
	
}
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
	.project-details #intro h1 {
		-webkit-transform: scale(0.5);
		width: 200%;
		font-size: 122px;
		margin: -30px -50%;
	}
}


/* Mobile */
@media all and (max-width: 767px) {
	.project-details #intro {
		text-align: center;
		padding-top: 0;
	}
	.project-details #intro h1 {
		font-size: 38px;
		margin-bottom: 6px;
	}
	.project-details #intro p {
		padding-left: 0;
	}
	.work-samples {
		display: none;
	}
	.work-samples img {
		display: none;
	}
	.work-samples.full-width,
	.work-samples.full-width img {
		padding: 0;
		max-width: 300px;
	}
	.work-samples:nth-child(5) {
		padding: 15px;
	}
	.work-samples:nth-child(5),
	.work-samples:nth-child(5) img {
		display: block;
		max-width: 270px;
		margin-top: 15px;
	}
	.work-samples:nth-child(5) img:first-child {
		margin-top: 0px;
	}
	.work-samples.full-width:nth-child(5),
	.work-samples.full-width:nth-child(5) img {
		padding: 0;
		display: block;
		max-width: 300px;
	}
	#details > div {
		float: none;
		display: block;
		width: auto;
		padding-right: 0;
		margin-bottom: 2em;
	}
	#details > aside {
		float: none;
		display: block;
		width: auto;
	}
	#details > div p,
	#details > aside p {
		font-size: 12px;
		line-height: 16px;
	}
	#details .dropcap {
		/* Drop-Cap 3 lines*/
	    font-size: 60px;
	    margin: -4px 0 -18px -5px;
	}
	.ie9 #details .dropcap {
		margin-top: -7px;
	}
	#details + hr {
		display: none;
	}
	#details .css-columns {
		-webkit-column-count:1;
		-moz-column-count:1;
		-o-column-count:1;
		-ms-column-count:1;
		column-count: 1;
	}
}
@media 
all and (max-width: 767px) and (-webkit-min-device-pixel-ratio : 1.5),
all and (max-width: 767px) and (min-device-pixel-ratio : 1.5) {
	.project-details #intro { text-align: center; }
	.project-details #intro h1 {
		-webkit-transform: scale(0.5);
		width: 200%;
		font-size: 72px;
		margin: 0% -50%;
		
		margin-top: -18px;
		height: 72px;
	}
	.project-details #intro h1 + p {
		margin-top: -10px;
	}
	/* NOTE: need to manually add classes for two and three lines - otherwise a javascript solution is needed for Retina. */
	.project-details #intro h1.two-lines {
		margin-top: -36px;
		height: 144px;
	}
	.project-details #intro h1.two-lines + p {
		margin-top: -30px;
	}
	.project-details #intro h1.three-lines {
		margin-top: -54px;
		height: 216px;
	}
	.project-details #intro h1.three-lines + p {
		margin-top: -48px;
	}
	.project-details #intro p { margin: 0; } 
}





/* Experiments pg.
-------------------------------------------------------------------------------*/

section#experiments p {
	font-family: 'ProximaNova-Regular', helvetica, arial, sans-serif;
	line-height: 140%;
}
section#experiments p.demo {
	font-size: 24px;
}
section#experiments h3 {
	font-family: 'ProximaNova-bold', helvetica, arial, sans-serif;
	font-size: 18px;
	color: #212121;
	margin-top: 1.5em;
	margin-bottom: 1em;
	
}
/* Mobile */
@media all and (max-width: 767px) {
	section#experiments p,
	section#experiments ul,
	section#experiments ul li {
		font-size: 12px;
	}
	section#experiments p.demo {
		font-size: 14px;
	}
	section#experiments h3 {
		font-size: 14px;
	}
}




/* Classes
-------------------------------------------------------------------------------*/

/* Gray Button - inset shadow */
a.button-gray {
	text-align: left;
	text-decoration: none;
	display: inline-block;
	font-family: 'ProximaNova-Semibold', helvetica, arial, sans-serif;
	font-size: 13px;
	color: #1F1F1F;
	line-height: 31px;
	background-color: #F6F5F3;
	border-radius: 1.5em;
	-moz-border-radius: 1.5em;
	padding: 0px 15px 0px 15px;
	text-shadow: 0px 1px rgba(300, 300, 300, 0.55);
	-moz-box-shadow:    inset 0 1px 2px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
	box-shadow:         inset 0 1px 2px rgba(0, 0, 0, 0.25);
	
	-webkit-transition: background-color .1s linear;
	-moz-transition: background-color .1s linear;
	transition: background-color .1s linear;
}
a.button-gray:hover {
	background-color: #E9E8E6;
	cursor: pointer;
}
.ie8 a.button-gray {
	border: 1px solid #DBDADA;
	background: url(../images_layout/button-gray-ie-shadow.png) repeat-x 0 0 #F6F5F3;
	position: relative;
	border-radius: 1.5em;
	behavior: url(/css/pie.htc);
}
.ie8 a.button-gray:hover {
	border: 1px solid #D2D2D1;
	background: url(../images_layout/button-gray-ie-shadow-hover.png) repeat-x 0 0 #E9E8E6;
}

a span.arrow {
	display: inline-block;
	
	width: 11px;
	height: 11px;
	vertical-align: text-bottom;
	/*margin-top: -15px;*/
	margin-bottom: 2px;
	text-indent: -999em;
	background: url(../images_layout/arrow-rt-2x.png) no-repeat 0 0 transparent;
	background-size: 100%;
}
.no-backgroundsize a span.arrow 		{ background-image: url(../images_layout/arrow-rt-1x.png); }
a span.arrow.up 						{ background-image: url(../images_layout/arrow-up-2x.png); }
.no-backgroundsize a span.arrow.up 	{ background-image: url(../images_layout/arrow-up-1x.png); }
a span.arrow.down 						{ background-image: url(../images_layout/arrow-down-2x.png); }
.no-backgroundsize a span.arrow.down	{ background-image: url(../images_layout/arrow-down-1x.png); }
a span.arrow.left 						{ background-image: url(../images_layout/arrow-left-2x.png); }
.no-backgroundsize a span.arrow.left 	{ background-image: url(../images_layout/arrow-left-1x.png); }

.float-left {
	float: left;
	display: inline;
}
.float-right {
	float: right;
	display: inline;
}

/*----- COVER CLASS -
 forces containers to cover their floating child elements -------*/
.cover:after {
  content: '.';
  display: block;
  height: 0px;
  visibility: hidden;
  clear: both;
}
.cover {
  zoom: 1;
}