@import 'grid.css';
@import 'mobile.css';

/* Reset
--------------------------------------------- */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp{border:0;margin:0;padding:0;font-size:100%}html,body{height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}b,strong{font-weight:bold}img{color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic}li{display:list-item}table{border-collapse:collapse;border-spacing:0}th,td,caption{font-weight:normal;vertical-align:top;text-align:left}q{quotes:none}q:before,q:after{content:'';content:none}sub,sup,small{font-size:75%}sub,sup{line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}svg{overflow:hidden}


/* Typekit
--------------------------------------------- */
.social a, #mobile-menu a, #philosophy h3 b, #contact-us .email span, #bio h3, #bio h4, #case-studies a h4, .page-copy h2, .page-copy h4,
.sidebar h4
{ font-family: futura-pt-n3, futura-pt, sans-serif; font-style: normal; font-weight: 300; } /* Futura Light */

#contact p strong, #home h2, #philosophy h2, #philosophy h3, #leadership h2, #bio h2, #process .headline, .process h4,
#process .headline, .process h4, #offices h2, .office strong, #contact-us .email, #contact-us li strong, 
#contact-us h4 strong, #case-study h2, #case-study .section h4, .back-parent, #case-study .section h4, #case-studies a h3,
#error-page h2, .page-header h2
{ font-family: futura-pt-n7, futura-pt, sans-serif; font-style: normal; font-weight: 700; } /* Futura Bold */

{ font-family: futura-pt-n8, futura-pt, sans-serif; font-style: normal; font-weight: 800; } /* Futura Extra Bold */

body
{ font-family: droid-serif-n4, droid-serif, serif; font-style: normal; font-weight: 400; } /* Droid Serif Regular */

#process .headline em, .office a, #contact-us h4, #contact-us li a, #case-study h3, .contact, .mobile-menu, .next-section, .page-copy h3
{ font-family: droid-serif-i4, droid-serif, serif; font-style: italic; font-weight: 400;} /* Droid Serif Regular Italic */

.cs-nav a
{ font-family: droid-serif-n7, droid-serif, serif; font-style: normal; font-weight: 700; } /* Droid Serif Bold */


/* Base
--------------------------------------------- */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

html, body { height: 100%; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { font-size: 16px; line-height: 1.231; background: #d4d4d4 url('/images/bg_interior.jpg') no-repeat; }

h1, h2, h3, h4, h5 { font-weight: normal; }

a { cursor: pointer; }
a:hover, a:active { outline: 0; }


/* State
--------------------------------------------- */
.s-ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.mobile-only {display: none; }
#contact { display: none; }

.no-csstransitions .pagination .page-name, .no-csstransitions .grid a span { display: none; }
.no-csstransitions .pagination li a:hover + .page-name, .no-csstransitions .grid a:hover span { display: block; }

.pagination { cursor: pointer; }
.mobile-only { display: none; }
.mobile-nav { display: none; }
ul.subNav-list a{cursor:pointer;}


/* Layout
--------------------------------------------- */
.header { height: 44px; width: 100%; position: fixed; top: 0; left: 0; z-index: 200; }
.slide, #content { height: 100%; width: 100%; }


/* Modules
--------------------------------------------- */
.logo { float: left; width: 153px; height: 14px; margin: 15px 0 0 1.5%; }
#contact, #mobile-menu { position: absolute; top: 44px; left: 0; width: 100%; z-index: 100; }
.offices { width: 80%; margin: 0 auto; list-style: none; text-align: center; }
.offices li { display: inline-block; text-align: left; }
.social { float: right; margin: 15px 1.5% 0 0; }
.contact, .mobile-menu { float: right; height: 20px; margin: 12px 1.5% 0 0; cursor: pointer; position: relative; }
.pagination { height: 44px; width: 60%; position: absolute; top: 0; left: 20%; z-index: 110; }
.pagination li { position: relative; display: inline; margin-left: 20px; }
.pagination li:first-child { margin: 0; }
.pagination a { display: inline-block; width: 10px; height: 44px; }
.pagination .page-name { position: absolute; top: 15px; padding-top: 8px; width: 200px; margin-left: -100px; left: 50%; }
.page-name p { display: inline-block; }
.prev { left: 0; }
.next { right: 0; }
#loading { width: 31px; height: 31px; background: url('/images/loading.gif') no-repeat; position: absolute; top: 50%; left: 50%; margin-top: -15.5px; margin-left: -15.5px; display: none; }
#prev, #next { display: block; width: 62px; height: 102px; position: fixed; top: 50%; margin-top: -51px; cursor:pointer; }
#prev { left: -10px; }
#next { right: -10px; }
.next-section { display: inline-block; height: 22px; }
.back-parent { display: none; font-size: 0.875em; text-transform: uppercase; text-align: center; text-decoration: none; }


/* Theme
--------------------------------------------- */
body { color: #393536; }
.header { background: #fafafa; }
.logo { background: url('/images/sprites.png') 0 -100px no-repeat; text-indent: -9999em; }
#contact, #mobile-menu { background: #fafafa; }
.offices { padding-bottom: 35px; }
.offices li { padding: 15px 0 0 5%; font-size: 0.813em; line-height: 1.538; }
.offices li:first-child { padding-left: 0; }
.offices li strong { font-family: sans-serif; text-transform: uppercase; }
.offices li a { font-style: italic; text-decoration: none; }
.social { text-align: right; list-style: none; }
.social li { margin: 0; padding: 0; line-height: 1.563; }
.social a { text-decoration: none; text-transform: uppercase; font-size: 0.688em; }
.contact, .mobile-menu { background: transparent; border: 0; font-size: 0.750em; color: #7d7d7d; font-style: italic; padding: 0; }
.contact:hover, .contact.open, .mobile-menu:hover, .mobile-menu.open { color: #ee4232; }
.pagination { text-align: center; }
.pagination a { background: url('/images/sprites.png') -25px 17px no-repeat; }
.pagination a:hover, .pagination .active a { background-position: 0 17px; }
.pagination .page-name { text-align: center; background: url('/images/sprites.png') 50% -25px no-repeat; }
.page-name p { background: #fafafa; padding: 10px 8px; font-size: 0.875em; font-style: italic; }
#prev, #next { background-image: url('/images/sprites.png'); background-repeat: no-repeat; text-indent: -9999px; cursor:pointer;}
#prev { background-position: 0 -150px; }
#next { background-position: right -150px; }
.next-section { padding: 0 14px 0 6px; background: url('/images/sprites.png') right -400px no-repeat; font-size: 12px; text-decoration: none; color: #fafafa !important; line-height: 22px; }
.next-section b { color: #f5bdb7; font-weight: normal; }


/* Slides
--------------------------------------------- */
#philosophy, #process, #leadership, #case-studies, #case-study { color: #393536; }

#home, #offices, #contact-us { background-repeat: no-repeat;  }

#home { background-color: #5ca7da; }
#home .content { width: 58%; position: absolute; top: 44%; left: 50%; margin: -121px 0 0 -27.75%; }
#home .content img { float: left; margin-right: 5%; width: 30%; max-width: 205px; max-height: 205px; height: auto; }
#home .copy { float: left; /*overflow: auto;*/ width: 65%; }
.circle-logo { text-align: center; }
#home { color: #fafafa; }
#home h2 { font-size: 2.250em; text-transform: uppercase; line-height: 1; margin-bottom: 0.25em; }
#home p { font-size: 1.250em; font-style: italic; line-height: 1.25; margin-bottom: 1em; }

#philosophy .content { width: 48%; position: absolute; top: 44%; left: 50%; margin: -121px 0 0 -24%; }
#philosophy .copy { overflow: auto; width: 53%; float: left; padding-top: 1.5em; }
#philosophy h2 { vertical-align: middle; margin-right: 20px; display: inline-block; }
#philosophy h2, #philosophy h3 { font-size: 4.250em; text-transform: uppercase; line-height: 0.875; }
#philosophy h3 { float: left; width: 47%; }
#philosophy p { font-size: 0.875em; line-height: 1.714; margin-bottom: 1em; }

#process .content { width: 77%; position: absolute; top: 35%; left: 50%; margin: -121px 0 0 -38.5%; }
#process .headline { font-size: 1.125em; text-transform: uppercase; margin-bottom: 40px; }
#process .headline em { font-size: 0.722em; text-transform: none; }
#process .processes a { text-decoration: none; }
.process { float: left; width: 23.5%; margin-left: 2%; padding-top: 6%; }
.process:first-child { margin: 0; }
.process h4 { font-size: 1.875em; text-transform: uppercase; }
.process p { font-size: 0.750em; line-height: 1.5; }
#process .next-section { margin-top: 50px; color: #fafafa; }

#insight { background: url('/media/1364618/icon_insight.png') no-repeat; }
#create { background: url('/media/1364623/icon_create.png') no-repeat; }
#deploy { background: url('/media/1364628/icon_deploy.png') no-repeat; }
#measure { background: url('/media/1364633/icon_measure.png') no-repeat; }

#leadership { display: table; }
#leadership .content { display: table-cell; vertical-align: middle; text-align: center; width: 930px; height: 408px; position: absolute; top: 50%; left: 50%; margin: -304px auto 0 -465px; padding-top: 100px; }
#leadership .copy { position: absolute; right: 0; top: 314px; width: 298px; text-align: left; }
#leadership h2, #bio h2 { font-size: 1.875em; text-transform: uppercase; }
#leadership p { padding-bottom: 0.875em; font-size: 1em; }
#leadership p a { text-decoration: none; }
#leadership .grid { text-align: center; font-size: 0.75em; position: relative; }
.grid a { position: absolute; display: block; width: 108px; height: 108px; color:#000; text-decoration: none; z-index: 1; }
.grid a div { width: 92px; height: 92px; }
.grid a img { width: 92px; height: 92px; }
.grid a span { background: #FFF; font-size: 0.875em; position: absolute; bottom: 94%; right: -30px; width: 113px; padding: 5px 5px 14px; }
.grid a span em { color: #ee4330; display: block; background: url('/images/tt_arrow.png') no-repeat 50% 100%; padding-bottom:14px; margin-bottom:-21px;}
.grid a:hover { z-index: 100; }
.grid a.g01, .grid a.g02, .grid a.g03 { width: 210px; height: 210px; }
.grid a.g01 img, .grid a.g02 img, .grid a.g03 img { width: 194px; height: 194px; }
.grid a.g01 { left: 306px; top: 0; }
.grid a.g02 { left: 102px; top: 102px; }
.grid a.g03 { left: 408px; top: 204px; }
.grid a.g04 { left: 0; top: 0; }
.grid a.g05 { left: 102px; top: 0; }
.grid a.g06 { left: 204px; top: 0; }
.grid a.g07 { left: 510px; top: 0; }
.grid a.g08 { left: 612px; top: 0; }
.grid a.g09 { left: 714px; top: 0; }
.grid a.g10 { left: 816px; top: 0; }
.grid a.g11 { left: 0; 	   top: 102px; }
.grid a.g12 { left: 510px; top: 102px; }
.grid a.g13 { left: 612px; top: 102px; }
.grid a.g14 { left: 714px; top: 102px; }
.grid a.g15 { left: 816px; top: 102px; }
.grid a.g16 { left: 0; 	   top: 204px; }
.grid a.g17 { left: 306px; top: 204px; }
.grid a.g18 { left: 0; 	   top: 306px; }
.grid a.g19 { left: 102px; top: 306px; }
.grid a.g20 { left: 204px; top: 306px; }
.grid a.g21 { left: 306px; top: 306px; }

#bio { display: table; }
#bio .content { display: table-cell; vertical-align: middle; text-align: center; width: 730px; position: absolute; top: 25%; left: 50%; margin: -121px 0 0 -365px; padding-top: 100px; padding-bottom: 100px; }
#bio .pics { float: left; width: 352px; margin-right: 18px; text-align: left; }
#bio .lg-img { width: 350px; height: 350px; }
#bio .copy { float:left; width: 360px; text-align: left; }
#bio h3 { font-size: 1.125em; text-transform: uppercase; }
#bio h4 a { font-size: 0.875em; text-decoration: none; }
#bio h3, #bio h4 { padding: 0 0 0.5em; }
#bio p { line-height: 1.786em; padding: 0 0 1em; font-size: 0.778em; }
#bio p a { color: #ee4330; text-decoration:none; }
#bio .subnav { margin:2px 0 0 -8px; font-size: 0; width: 360px; }
#bio .subnav a { display: inline-block; margin: 6px 0 0 5px; }
#bio .subnav a img { width: 27px; height: 27px; margin: 2px; }
#bio .subnav .active img, #bio .subnav a:hover img { border: 2px solid #ee4330; margin: 0; }

#offices { background-color: #d4d4d4; }
#offices .content { width: 35%; position: absolute; top: 44%; left: 13%; margin-top: -121px; }
#offices h2 { font-size: 1.875em; text-transform: uppercase; }
.office { border-top: 1px solid #c7c7c7; padding: 0.865em 0; overflow: auto; line-height: 1.25em; }
.office:first-child { border: 0; }
.office ul { list-style: none; }
.office li { width: 50%; float: left; font-size: 0.813em; }
.office strong { text-transform: uppercase; font-size: 0.813em; }
.office a { text-decoration: none; }

#contact-us { text-align: center; background-color: #7ec1f1; }
#contact-us .content { width: 58%; position: absolute; top: 44%; left: 50%; margin: -121px 0 0 -29%; }
#contact-us h4 { font-size: 1.125em; display: inline-block; }
#contact-us h4 a { color: #393536; text-decoration: none; text-transform: uppercase; }
#contact-us .email { font-size: 2.750em; color: #393536; text-decoration: none; text-transform: uppercase; letter-spacing: -0.05em; }
#contact-us ul { list-style: none; background: url('/images/bg_stripes.png') 0 bottom repeat-x; overflow: auto; padding: 0 0 1em; margin: 0 0 1em; }
#contact-us li { float: left; width: 25%; height: 55px; text-align: left; display: table; }
#contact-us li a { font-size: 0.750em; color: #393536; display: table-cell; padding-top: 0.5em; text-decoration: none; line-height: 1; width: 74%; vertical-align: middle; }
#contact-us .email:hover, #contact-us li a:hover { color: #ee4232; }
#contact-us li a:first-child { width: 25%; }
#contact-us li strong { font-size: 1.154em; text-transform: uppercase; }
#contact-us li img { width: 90%; height: auto; display: inline-block; vertical-align: top; margin-right: 5px; }

#contact-us .headline h4 { width: 36%; display: inline-block; }
#contact-us .stripe { width: 32%; display: inline-block; height: 1em; background: url('/images/bg_stripes.png') 0 73% repeat-x; }

#cs-nav { display: none; }

#case-studies { display: table; }
#case-studies .content { display: table-cell; vertical-align: middle; text-align: center; }
#case-studies ul { list-style: none; font-size: 0em; width: 84%; max-width: 1300px; margin: 0 auto; }
#case-studies li { width: 24%; position: relative; display: inline-block; margin: 5px 0.5% 5px 0.5%; text-align: left; }
#case-studies .cs { width: 100%; height: 100%; position: relative; }
#case-studies img { width: 100%; }
#case-studies li a { font-size: 16px; height: 100%; width: 100%; position: absolute; background: #262626; background: rgba(0,0,0,0.6); top: 0; left: 0; text-decoration: none; }
#case-studies a h4 { font-size: 0.813em; color: #fafafa; margin: 15px 15px 5px 15px; text-transform: uppercase; }
#case-studies a h3 { font-size: 2em; color: #fafafa; margin: 0 15px; line-height: 0.875; }

.no-cssanimations #case-studies li a { display: none; }
.no-cssanimations #case-studies li:hover a { display: block; }

#case-study .content { width: 47%; max-width: 610px; padding-bottom: 20%; margin: 200px auto 0; }
#case-study h2 { font-size: 2.250em; text-transform: uppercase; margin-top: 0.417em; line-height: 1; padding-top: 1.111em; text-align: center; background: url('/images/bg_stripes.png') 0 0 repeat-x; }
#case-study h3 { font-size: 0.813em; text-align: center; border-bottom: 1px solid #cacaca; margin-bottom: 1.154em; padding-bottom: 1.154em; }
#case-study p { font-size: 0.813em; margin-bottom: 2.692em; line-height: 1.375; }
#case-study .section { margin-bottom: 1em; }
#case-study .section img { width: 100%; margin-bottom: 10px; }
#case-study .section h4 { text-transform: uppercase; text-align: center; font-size: 0.938em; border-bottom: 1px solid #cacaca; margin-bottom: 0.769em; margin-top: 2em; padding-bottom: 0.769em; }
#case-study .section .caption { font-size: 0.75em; margin-bottom: 1.091em; text-align: left; }
#case-study .two-up img { float: right; width: 49%; }
#case-study .two-up img:first-child { float: left; }

.cs-nav { overflow: auto; }
.cs-nav a { font-size: 12px; color: #393536; text-decoration: none; }
.cs-nav a:hover { color: #ee4232; }
.cs-nav .cs-back { float: left; padding-left: 23px; background: url('/images/icon_case-study.png') 0 50% no-repeat; }
.cs-nav .cs-next { float: right; padding-right: 14px; background: url('/images/icon_arrow.png') right 50% no-repeat; }
.cs-nav.bottom { margin-top: 1.667em; padding-top: 1.667em; background: url('/images/bg_stripes.png') 0 0 repeat-x; }

#case-study .video { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin-bottom: 1em; }
#case-study .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#error-page .content { height: 175px; width: 47%; position: absolute; top: 50%; padding-bottom: 20%; left: 50%; margin: -62.5px 0 0 -23.5%; text-align: center; }
#error-page h2 { font-size: 4.250em; text-transform: uppercase; line-height: 0.875; letter-spacing: -0.05em }
#error-page .next-section { margin-top: 1em; }

#careers .page { padding-top: 6.563em; }

.page-header h2 { font-size: 3.750em; text-transform: uppercase; text-align: center; border-bottom: 2px solid #4b4849; position: relative; padding-bottom: 0.25em; }
.page-header hr { display: block; height: 1px; border: 0; border-top: 1px solid #4b4849; margin: 1px 0; padding: 0; }
.page-header { margin-bottom: 2.500em; }

.page { padding-bottom: 6.563em; }
.page-copy h2 { font-size: 1.875em; line-height: 1; text-transform: uppercase; font-weight: normal; margin-bottom: 0.25em; }
.page-copy h3 { margin-bottom: 1em; line-height: 1.5; }
.page-copy h4 { font-size: 1em; margin-bottom: 0.25em; }
.page-copy p { font-size: 0.875em; margin-bottom: 1em; line-height: 1.571; }
.page-copy ul { margin-bottom: 1em; margin-left: 1em; }
.page-copy li { font-size: 0.875em; margin-bottom: 0.5em; }
.page-copy a { text-decoration: none; }

.sidebar h4 { font-size: 0.875em; border-bottom: 1px solid #d3d1d1; text-transform: uppercase; margin-bottom: 1em; }
.sidebar ul { margin-bottom: 2em; list-style: none; }
.sidebar li { margin-bottom: 1em; }
.sidebar li a { font-size: 0.875em; text-decoration: none; }
.sidebar li.current a { background: url('/images/icon_arrow-nav.png') 0 50% no-repeat; padding-left: 10px; }
.sidebar p { font-size: 0.875em; }


/* Colors
--------------------------------------------- */
.page-name p, .offices a, .social a, .processes a, .office a, #bio h4 a, .back-parent, #contact-us h4 a:hover, .page-copy h2, .page-copy h4, .sidebar a, .page-copy a, #leadership p a { color: #ee4232; }


/* IE
--------------------------------------------- */
.lt-ie9 .background img { min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; }

.lt-ie8 .process { width: 22.5%; }

.lt-ie8 #contact-us li { width: 24%; }
.lt-ie8 #contact-us .stripe { width: 29%; }

.lt-ie8 .pagination .page-name { top: 44px; }

.lt-ie8 #case-studies ul { margin-top: 14%; }

.lt-ie8 .page-name p, .lt-ie8 .next-section, .lt-ie8 #philosophy h2, .lt-ie8 #bio .subnav a, .lt-ie8 #contact-us h4,
.lt-ie8 #contact-us li a, .lt-ie8 #contact-us li img, .lt-ie8 .pagination a, .lt-ie8 #case-studies li, 
.lt-ie8 .offices li, .lt-ie8 #contact-us .headline h4, .lt-ie8 #contact-us .stripe, .lt-ie8 #case-studies li
{ zoom: 1; display: inline; } /* inline-block fix for IE7 */

.lt-ie9 .process { padding-top: 75px; }

.lt-ie8 #philosophy h2, .lt-ie8 #case-studies a h3 { line-height: 1.1; }


/* CSS3
--------------------------------------------- */
.page-name p, .contact, .grid a span {
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
			border-radius: 4px;
}

body, #home, #offices, #contact-us {
	background-size: 100%;
	background-position: 50% bottom;
}

body, #offices { 
	background-position: 50% 50%;
}

.grid a img, #case-studies .cs, #bio .pics .lg-img, #bio .pics .subnav img {
	-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.25);
	   -moz-box-shadow: 0 0 8px rgba(0,0,0,0.25);
	   		box-shadow: 0 0 8px rgba(0,0,0,0.25);
}

#contact-us .email { color: rgba(57,53,54,0.96); }

.cssanimations #case-studies li a, .csstransitions .pagination .page-name, .csstransitions .grid a span { opacity: 0; visibility: hidden; -webkit-backface-visibility: hidden; }
.cssanimations #case-studies li:hover a, .csstransitions .pagination li a:hover + .page-name, .csstransitions .grid a:hover span { opacity: 1; visibility: visible; }

.cssanimations #case-studies li a, .csstransitions .pagination .page-name, .csstransitions .grid a span {
	-webkit-transition: opacity 200ms ease-in-out;
	   -moz-transition: opacity 200ms ease-in-out;
			transition: opacity 200ms ease-in-out;
}

#home h2, #home p { 
	text-shadow: 0px 0px 50px rgba( 0,0,0,0.1 );
}

#insight, #create, #deploy, #measure { background-size: 23%; }


/* Media Queries
--------------------------------------------- */
@media only screen and (min-width: 1280px) {
	#case-studies a h3 { font-size: 2em; }
}	

@media only screen and (min-width: 1280px) {
	body { font-size: 18px; }
	#case-studies li a { font-size: 21px; }
	#contact-us .headline h4 { width: 32%; }
	#contact-us .stripe { width: 34%; }
	#case-studies a h3 { font-size: 2em; }
}

@media only screen and (max-width: 1280px) and (min-width: 1024px) {
	#case-studies li a { font-size: 16px; }
}	

@media only screen and (max-width: 1024px) {
	.offices { width: 85%; }
	.offices li { padding: 15px 0 0 4%; }
	body, #case-studies a { font-size: 14px; }
	#philosophy h3 { width: 49%; }
	#philosophy .copy { width: 51%; }
	#offices .content { width: 40%; }
	#case-study .content { width: 65%; }
	#case-studies a h3 { font-size: 1.5em; }
	#contact-us .email { font-size: 2.25em; }
}

@media only screen and (max-width: 1023px) {
	#leadership .content { display: block; text-align: left; position: relative; top: auto; left: auto; width: auto; height: auto; margin: 0 82px; padding-top: 77px; }
	#leadership .copy { position: relative; right: auto; top: auto; width: auto; }
	#leadership .grid { text-align: left; height: auto; }
	#leadership .grid { font-size: 1.25em; }
	#leadership .grid em { font-size: 0.875em; }
	.grid a { position: relative; display: block; width: 50% !important; min-height:102px; height: auto !important; left: auto !important; top: auto !important; float: left; }
	.grid a img { width: 92px !important; height: 92px !important; float:left; margin:0 10px 10px 0;}
	.grid a div { width: 92px !important; height: 92px !important; float:left; margin:0 10px 10px 0;}
	.csstransitions .grid a span,
	.no-csstransitions .grid a span { display: block; background: none; position: relative; bottom: auto; right: auto; width: auto; opacity: 1; visibility: visible; }
	.grid a span em { background: none; margin:0; padding:0; }
	#bio .content { width: 580px; margin-left: -290px; }
	#bio .pics { width: 232px; }
	#bio .lg-img { width: 230px; height: 230px; }
	#bio .subnav { width:240px; }
	#bio .copy { width: 330px; }
	#contact-us .email { font-size: 2.4em; }
}

@media only screen and (max-width: 800px) {
	body, #case-studies a { font-size: 12px; }
	.offices { width: 85%; }
	.offices li { padding: 15px 0 0 1%; }
	.pagination { left: 30%; }
	#home .content { margin: -121px 0 0 -37%; width: 74%; top: 54%; }
	#philosophy .content { width: 56%; margin-left: -28%; }
	#philosophy h3 { line-height: 1; }	
	
	#process { text-align: center; }
	#process .content { width: auto; position: static; margin: 0 10% 100px; padding-top: 77px; text-align: left; }
	.process, .process:first-child { float: none; width: auto; padding: 0 0 0 35px; margin: 0 0 35px; }
	.lt-ie9 .process, .no-backgroundsize .process { background: none !important; width: 100%; padding-left: 0; }
	#insight, #create, #deploy, #measure { background-size: 4%; background-position: 0 2px; }
	.process p { font-size: 1.143em; }
	#process .headline { font-size: 1.143em; }
	#process .headline em { font-size: 1em; }

	#case-studies { display: table; }
	#case-studies .content { display: table-cell; vertical-align: middle; text-align: center; padding: 88px 0; }
	#case-studies li { width: 49%; }
	#case-studies li a { font-size: 27px; }
	#case-studies a h4 { font-size: 0.5em; margin-bottom: 5px; }

	#case-studies .content { top: 47%; }
	#case-studies a h3 { font-size: 1.4em; }
	
	#case-study .content { width: 70%; }
	#case-study p, #case-study .section h4 { font-size: 1.143em; }
	#case-study .section .caption { font-size: 1em; }
	
	#leadership .grid { font-size: 1em; }
	#leadership .grid em { font-size: 0.875em; }
	#leadership p { font-size: 1em; }
	.grid a span { font-size: 1.25em; }
	
	#offices { text-align: center; font-size: 21px; background: none; }
	#offices { background: none !important; }
	#offices .content { width: auto; position: static; margin: 0 10%; padding-top: 88px; text-align: left; }
	.office li { float: none; }
	
	#contact-us .content { width: 75%; position: absolute; top: 44%; left: 50%; margin: -121px 0 0 -37.5%; }
	
	#contact-us .headline h4 { width: 30%; }
	#contact-us .stripe { width: 35%; }
	#contact-us .email { font-size: 2.75em; }
	#contact-us li a { font-size: 1em; }
	#contact-us li a:first-child { width: 35%; }
}

@media only screen and (max-width: 625px) {
	.offices { width: 344px; }
	.offices li { padding: 15px 0 0 0; width: 170px; }
}	

@media only screen and (max-width: 600px) {
	body, #case-studies a { font-size: 14px; }
	#contact-us { height: 100%; }
	.logo { margin-left: 4.5%; }
	.contact, .social { margin-right: 4.5%; }
	.next-section { display: none; }
	.back-parent { display: block; }
	
	.lt-ie9 .background img { display: none; }
	
	#prev, #next { display: none; }
	
	.mobile-nav { display: block; margin-top: 4em; padding-bottom: 4em; text-align: center; }
	.mobile-nav .prev, .mobile-nav .next { display: inline-block; width: 71px; height: 71px; background-image: url('/images/mobile_prev-next.png'); text-indent: -999em; }
	.lt-ie8 .mobile-nav .prev, .lt-ie8 .mobile-nav .next { display: inline; zoom: 1; }
	.mobile-nav .prev { background-position: 0 0; margin-right: 20px; }
	.mobile-nav .next { background-position: right 0; margin-left: 20px; }
	
	#home { text-align: center; background-image: url('/images/mobile-bg-home.jpg') !important; }
	#home .content { width: auto; position: static; margin: 0 2% 0; padding-top: 77px; }
	#home .content img { float: none; margin-right: 0; width: 50%; }
	#home .copy { float: none; margin: 0 auto; width: 80%; }
	.circle-logo { margin-bottom: 2em; }
	
	#philosophy { text-align: center; }
	#philosophy .content { width: auto; position: static; margin: 0 6% 100px; padding-top: 77px; left: auto; top: auto; text-align: left; }
	#philosophy .copy, #philosophy h2, #philosophy h3 { width: auto; float: none; padding: 0; }
	#philosophy p { background: none; padding: 0; }

	#insight, #create, #deploy, #measure { background-size: 6%; background-position: 0 2px; }

	#leadership .content { margin: 0 6%; }
	.grid a { width: auto !important; float: none; min-height:62px; }
	.grid a img { width: 50px !important; height: 50px !important; }
	.grid a div { width: 50px !important; height: 50px !important; }

	#bio .content, #bio .pics, #bio .copy { float: none; width: auto; }
	#bio .content { display: block; left: auto; top: auto; margin: 0 6%; padding-top:77px; padding-bottom:20px; width: auto; position: relative; }
	#bio .pics { margin: 0 0 20px; }
	#bio .lg-img { max-width: 100%; width: 100%; height: auto; }
	#bio .subnav { display: none; }
	
	#offices { background-image: none !important; }
	.office li { width: 100%; }
	
	#contact-us { background-image: url('/images/mobile-bg-contact.jpg') !important; }
	#contact-us .content { width: auto; position: static; margin: 0 6% 0; padding-top: 100px; }
	#contact-us li { text-align: center; width: 25%; }

	#contact-us ul { text-align: center; }
	#contact-us li a, .lt-ie8 #contact-us li a { display: none; }
	#contact-us li a:first-child { display: inline-block; width: 70%; }
	.lt-ie8 #contact-us li a:first-child { display: inline; zoom: 1; }
	.lt-ie8 #contact-us li { width: 23%; }

	#contact-us .headline h4 { width: 35%; }
	#contact-us .stripe { width: 32.5%; }

	#contact-us .email { font-size: 2.65em; }
	
	#case-studies .content { width: auto; position: static; margin: 0 6%; padding-top: 77px; padding-bottom: 0; }
	#case-studies li { width: 100%; position: relative; display: block; }
	#case-studies li img { display: inline; }
	#case-studies li a { display: block; position: static; background: #333333; padding: 10px 0 15px; }
	.cssanimations #case-studies li a { opacity: 1; visibility: visible; }
	#case-studies li h4 { margin: 0 15px 5px 15px; font-size: ; }
	#case-studies li h3 { font-size: 1em; }
	
	#case-study .content { width: auto; position: static; margin: 0 6% 100px; padding-top: 77px; }

	#careers .page-copy {  }
	#careers .mobile-only { display: block; }
	#careers .hide-for-mobile { display: none; }
}

@media only screen and (max-width: 480px) {
	body, #case-studies a { font-size: 14px; }
	.mobile-only { display: block; }
	.hide-for-mobile { display: none; }
	
	#content, .slide { height: auto; min-height: 100%; }
	
	.logo { margin-left: 4.5%; }
	.mobile-menu { margin-right: 4.5%; }
	#mobile-menu { display: none; padding-bottom: 18px; }
	#mobile-menu ul { list-style: none; margin: 0 4.5%; }
	#mobile-menu li { float: left; width: 50%; }
	#mobile-menu a { display: block; height: 30px; border: 2px solid #fafafa; border-width: 2px 2px 2px 0; background: #f2f2f2; font-size: 12px; color: #393536; text-align: center; text-decoration: none; line-height: 30px; }
	#mobile-menu li:nth-child(2n+2) a { border-width: 2px 0 2px 2px; }
	
	#home p, #philosophy p { font-size: 1em; }
	
	#philosophy h2, #philosophy h3 { font-size: 2.143em; }
	#philosophy h3 { margin-bottom: 0.5em; }
	
	#insight, #create, #deploy, #measure { background-size: 9%; background-position: 0 2px; }	
	
	.grid a span { font-size: 1.5em; }
	.grid a span em { font-size: 0.75em; }
	
	#contact-us .email { font-size: 1.4em; }
	#contact-us .stripe { width: 25%; }
	#contact-us .headline h4 { width: 50%; font-size: 0.875em; }
	#contact-us h4 strong { display: block; }
	#case-studies li a { padding-top: 0; }
	#case-studies li a h4 { padding-top: 10px; }

}

@media only screen and (min-width: 481px) and (max-height: 650px) {
	#home { background-position: 50% 50%; }
	#contact-us { background-position: 50% 60%; }
	.lt-ie9 #home { background-image: none !important; }
}	

@media only screen and (min-width: 1280px) and (max-height: 768px) {
	.lt-ie9 .background img {
		top: -50px;
	}
	.lt-ie9 #home { background-image: none !important; }
}

@media only screen and (min-width: 481px) and (max-height: 575px) {
	#case-study .content, #offices .content, #process .content, #philosophy .content, #home .content {
		top: 225px;
		padding-bottom: 88px;
	}
	
	#contact-us .content {
		top: 225px;
	}
	
	#case-studies .content {
		padding: 88px 0;
	}
	
	.lt-ie9 .background img {
		top: -75px;
	}
	.lt-ie9 #home { background-image: none !important; }
}

@media only screen and (max-height: 480px) {
	.lt-ie9 .background img {
		top: -100px;
	}
	.lt-ie9 #home { background-image: none !important; }
}

@media only screen and (max-height: 575px) and (min-width: 1024px) {
	#leadership .content { position: relative; margin: 100px auto 0; display: block; left: auto; top: auto; padding: 0; }
	#leadership .copy { top: 210px; }
}


/* Grid
--------------------------------------------- */
@media only screen and (min-width: 601px) {
	.row { width: 720px; font-size: 16px; }
}

@media only screen and (min-width: 1024px) {
	.row { width: 960px; font-size: 16px; }
}

@media only screen and (min-width: 1280px) {
	.row { width: 1140px; font-size: 16px; }
}

@media only screen and (max-width: 600px) {
	.row { width: 100%; font-size: 16px; }
}
