/* CSS Document */

/*

Organized by:

Global Typography
General Layout

Header
Content
Footer

Forms and Tables
Misc.

*/



/* JS Initialize
-------------------------------------------------------------- */

.js .load-curtain {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 8000;
	height: 100%;
	width: 100%;
	background-color: #fff;
	overflow: hidden !important;
	}

.js .loading {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 280px;
	height: 79px;
	margin: -39px 0 0 -140px;
	background: url(../img/loading.gif) no-repeat center;
	}



/* Global Typography
-------------------------------------------------------------- */

body {
	color: #666;
	font-family: 'nimbus-sans', Arial, Helvetica, sans-serif;
	}

a, a:visited {
	color: #1c98a5;
	text-decoration: none;
	}

a:hover, a:active {
	color: #1c98a5;
	text-decoration: underline;
	}

h1, h2, h3, h4, h5, h6 {
	font-family: 'museo-slab', Arial, Helvetica, sans-serif;
	font-weight: 300;
	color: #666;
	line-height: 1.25;
	}

h5 {
	font-family: 'nimbus-sans-condensed', Arial, Helvetica, sans-serif;
	font-size: 2em;
	font-weight: 700;
	text-transform: uppercase;
	}


/* General Layout
-------------------------------------------------------------- */

body {
	margin: 0;
	background: #f1f1f1 url(../img/wallpaper-full-color-dark@2x.jpg) repeat fixed 50% 76px;
	background-size: 1351px 965px;
	}

body#drilldown { background: #fff; }

body#project-planner { background: #1f2120; }

body#agency { background: #14323e; }

.container {
	position: relative;
	margin: 0 auto;
	}

#header {
	position: fixed;
	z-index: 1000;
	width: 100%;
	background: url(../img/header-blue.png) repeat-x 50% 100%;
	}

#content { width: 100%; }

body#drilldown #content .container { max-width: 1000px; }

/*body#agency #content .container { max-width: 1000px; }*/

body#agency #content .container { max-width: 1400px; }

body#project-planner #content .container { max-width: 700px; }

body.single-feature #content .container { padding-bottom: 4%; }

.bg-gray {background:#f2f7fa;}
.bg-green {background:#99af3b;}
.bg-green h4, .bg-green p {color:#fff !important;}
.text-center {text-align:center;}


.page-wrap { width: 100%; }

.page-wrap .container { padding: 8% 4% 12%; }

#footer {
	width: 100%;
	background: #2b2d2d;
	}

#footer .container { padding: 3% 4%; }



/* Header
-------------------------------------------------------------- */

.banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #262626;
    color: #fff;
    padding: 12px 6px;
}

@media screen and (max-width: 540px) {
    .banner {
        font-size: 0.75em;
        flex-direction: column;
           gap: 2px;
    }
}

.banner a {
    color: #fff;
    opacity: 0.5;
    transition: opacity 0.25s ease;
}

.banner a:hover {
    text-decoration: none;
    opacity: 1;
}

.banner a::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 8px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    background: linear-gradient(
      to top left,
      transparent calc(50% - 0.5px),
      currentColor calc(50% - 0.5px),
      currentColor calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    );
}

.banner em {
    font-style: normal;
    text-decoration: underline;
}

#header h1 {
	position: absolute;
	bottom: 0;
	z-index: 0;
	width: 100%;
	height: 76px;
	margin: 0 0 0 -50%;
	text-indent: -999em;
	overflow: hidden;
	}

#header a.btn-reveal {
	display: block;
	float: right;
	margin-top: 20px;
	padding: 7px 10px;
	color: #87cfcc;
	font-family: 'nimbus-sans-condensed', Arial, Helvetica, sans-serif;
	font-size: 1.125em;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 1px;
	}

#header a.btn-reveal:hover, #header a.btn-reveal:active { text-decoration: none; }

#header a.btn-reveal:focus { outline: 0; }

#header a.btn-close {
	display: block;
	float: right;
	width: 21px;
	height: 20px;
	margin: 0;
	padding: 0;
	background: transparent url(../img/btn-close.png) no-repeat top left;
	text-indent: -999em;
	overflow: hidden;
	}

#header a.btn-close:active { background: transparent url(../img/btn-close.png) no-repeat top left; }

#header a.nav-reveal { display: none; }

#contact-pane {
	position: relative;
	z-index: 5;
	width: 100%;
	background: #2b2d2d;
	color: #a6a8ab;
	}

#contact-pane .container { max-width: 1000px; }

#contact-pane a { color: #a6a8ab; }

#contact-pane a:hover, #contact-pane a:active {
	color: #fff;
	text-decoration: none;
	}

#contact-pane h6 {
	margin: 0;
	color: #fff;
	font-family: 'nimbus-sans-condensed', Arial, Helvetica, sans-serif;
	font-size: 1.25em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	}

#contact-pane div.left { padding: 30px; }

#contact-pane div.right {
	position: relative;
	padding: 30px 0;
	}

#contact-pane a.button {
	display: block;
	float: none;
	margin: 15px 0;
	padding: 8px 10px;
	background: #2b2d2d;
	border: 1px solid #b0bf35;
	color: #fff;
	font-family: 'museo-slab', Arial, Helvetica, sans-serif;
	font-size: 1.0625em;
	font-weight: 300;
	font-style: italic;
	text-transform: none;
	text-align: center;
	}

#contact-pane a.button:active { background: #b0bf35; }

#contact-pane a.button:focus { outline: 0; }

#contact-pane a.btn-close {
	display: block;
	position: absolute;
	right: 20px;
	top: 20px;
	width: 21px;
	height: 20px;
	background: transparent url(../img/btn-close.png) no-repeat top left;
	text-indent: -999em;
	overflow: hidden;
	}

#contact-pane a.btn-close:active { background: transparent url(../img/btn-close.png) no-repeat top left; }

#nav-pane {
	position: relative;
	z-index: 5;
	background: #2b2d2d;
	}

#nav-pane ul {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	}

#nav-pane li {
	border-top: 2px solid #444;
	color: #a6a8ab;
	font-family: 'nimbus-sans-condensed', Arial, Helvetica, sans-serif;
	font-size: 1.125em;
	text-transform: uppercase;
	}

#nav-pane li a {
	display: block;
	padding: 1% 4%;
	color: #a6a8ab;
	}

#nav-pane li a:hover { text-decoration: none; }

#nav-pane li a:active {
	background: #444;
	color: #fff;
	}

#nav-pane li a:focus { outline: 0; }

#nav-pane a.button {
	display: block;
	padding: 1% 4%;
	border-top: 2px solid #444;
	color: #a6a8ab;
	font-family: 'nimbus-sans-condensed', Arial, Helvetica, sans-serif;
	font-size: 1.125em;
	text-transform: uppercase;
	}

#nav-pane a.button:hover { text-decoration: none; }

#nav-pane a.button:active {
	background: #444;
	color: #fff;
	}

#nav-pane a.button:focus { outline: 0; }

#navbar {
	position: relative;
	z-index: 5;
	background: #178e9b url(../img/header-jloop.png) no-repeat 50% 0;
	}

body#agency #navbar { background-position: -417px 50%; }

#navbar .container {
	max-width: 1000px;
	height: 76px;
	}

#navbar ul {
	float: right;
	margin: 0;
	padding: 0;
	list-style: none;
	}

#navbar li {
	float: left;
	padding-top: 20px;
	font-family: 'nimbus-sans-condensed', Arial, Helvetica, sans-serif;
	font-size: 1.125em;
	font-weight: 400;
	letter-spacing: 1px;
	}

#navbar li a {
	display: block;
	padding: 7px 10px;
	color: #87cfcc;
	line-height: 1;
	text-transform: uppercase;
	}

#navbar li a:hover, #header li a:active { text-decoration: none; }

#navbar li a:focus { outline: 0; }

#navbar li a.selected { color: #d7eeed; }

#page-nav {
	position: absolute;
	left: 50%;
	bottom: -37px;
	width: 117px;
	margin: 0 0 0 -57px;
	padding: 0;
	list-style: none;
	}

#page-nav li {
	float: left;
	margin: 0 2px 0 0;
	}

#page-nav li a {
	display: block;
	width: 37px;
	height: 37px;
	text-indent: -999em;
	overflow: hidden;
	}

#page-nav li.btn-close a { background: url(../img/btn-page-nav-close.png) no-repeat top left; }
#page-nav li.btn-next a { background: url(../img/btn-page-nav-next.png) no-repeat top left; }
#page-nav li.btn-prev a { background: url(../img/btn-page-nav-prev.png) no-repeat top left; }

#page-nav li a:active { background-position: top right; }

#page-nav li a:focus { outline: 0; }

#scroll-nav {
	display: block;
	position: fixed;
	right: 0;
	top: 50%;
	z-index: 1000;
	margin: 0;
	padding: 10px;
	list-style: none;
	text-align: right;
	}

#scroll-nav li { padding: 10px; }

#scroll-nav a {
	display: block;
	padding: 6px;
	text-indent: -9999em;
	overflow: hidden;
	}

#scroll-nav a:focus { outline: 0; }

#scroll-nav a.selected {
	background-color: #99af3b;
	border-radius: 12px;
	}

#scroll-nav a span {
	display: block;
	width: 12px;
	height: 12px;
	background-color: #99af3b;
	border-radius: 6px;
	}



/* Content
-------------------------------------------------------------- */

#content h2 {
	display: inline-block;
	margin: 0 0 15px;
	padding: 10px 20px;
	background: #99af3b;
	color: #fff;
	font-family: 'nimbus-sans-condensed', Arial, Helvetica, sans-serif;
	font-size: 2.875em;
	line-height: 1;
	text-transform: uppercase;
	}

#content h3 {
	margin: 0 0 15px;
	font-size: 1.875em;
	}

#content p, #content ul, #content ol {
	font-size: 1.375em;
	font-weight: 300;
	line-height: 1.5;
	}

#content p { margin-top: 0; }

#content strong, #content p strong, #content ul strong, #content ol strong { font-weight: 400; }

#content ul ul, #content ol ol { font-size: 100%; }

#splash-video {
	display: block;
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	}

#splash-video-wrapper {
	position: absolute;
	z-index: 100;
	width: 100%;
	height: auto;
	}

#splash-video a#launch-video {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	}

#splash-video a#launch-video:focus { outline: 0; }

#splash-video a#launch-video h2 {
	position: absolute;
	top: 10%;
	left: 0;
	display: block;
	width: 98%;
	margin: 0;
	padding: 0 1%;
	background: none;
	opacity: 0;
	color: #fff;
	font-family: 'museo-slab', Arial, Helvetica, sans-serif;
	font-size: 3.875em;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	text-transform: none;
	}

#splash-video a#launch-video h2 span {
	display: block;
	width: 214px;
	height: 57px;
	margin: 2% auto 0;
	background: url(../img/btn-see-how.png) no-repeat top left;
	opacity: 0;
	text-indent: -999em;
	overflow: hidden;
	}

#splash-video a#launch-video img {
	display: block;
	width: 100%;
	height: auto;
	}

#splash-video .close-video, #work-video .close-video {
	position: absolute;
	z-index: 1000 !important;
	top: 12px;
	right: 12px;
	width: 21px;
	height: 20px;
	}

#home { padding-top: 76px; }

#home .container { padding: 0; }

#who-we-are { padding: 10% 0 22%; }

#who-we-are .container {
	width: 45%;
	padding: 0 0 1% 55%;
	background: #e6e6e6 url(../img/bubble-chair.jpg) no-repeat 55% 0;
	background-size: cover;
	}

#who-we-are div.right {
	width: 42%;
	padding: 1%;
	}

#our-work { background: #f2f2f2; }

#our-team { background: #14323e url(../img/bg-geometric.png) no-repeat 50% 0; }

#capabilities {
	background: #2b2d2d url(../img/wind-up.jpg) no-repeat 50% 50%;
	background-size: cover;
	}

#capabilities .container { padding: 11% 8% 12%; }

.block-button {
	display: inline-block;
	margin: 20px 0;
	padding: 10px 20px;
	border: 2px solid #1c98a5;
	color: #1c98a5;
	font-size: 1.5em;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	}

.block-button:hover, .block-button:focus, .block-button:active {
	background-color: #1c98a5;
	color: #fff;
	-webkit-transition: background-color 250ms, color 250ms;
	transition: background-color 250ms, color 250ms;
	}

.block-button span {
	display: inline-block;
	padding-right: 32px;
	background: transparent url(../img/btn-reveal-caret-e.png) no-repeat 100% 50%;
	}

.block-button:hover span, .block-button:focus span, .block-button:active span { background-image: url(../img/btn-reveal-caret-e-white.png); }

.careers-wrap {
	margin: 40px 0;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	}

.careers-wrap div.row {
	padding: 10px 0;
	border-bottom: 1px solid #999;
	}

.careers-wrap div.row:last-child { border-bottom: none; }

.careers-wrap div.row h5 {
	margin: 0;
	line-height: 1.5;
	}

.careers-wrap .career-body { padding-bottom: 20px; }

.careers-wrap .career-head {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 20px 0 15px;
	}

.careers-wrap .career-head .career-title { flex: 1 1 auto; }

.careers-wrap .career-detail {
	margin-bottom: 20px;
	font-size: 1rem;
	line-height: 1.5;
	}

.careers-wrap .career-detail .career-subtitle {
	display: inline-block;
	color: #168593;
	font-family: 'nimbus-sans-condensed', Arial, Helvetica, sans-serif;
	font-size: 1.3125rem;
	font-weight: 700 !important;
	line-height: 1.14285714;
	text-transform: uppercase;
	}

.careers-wrap a.block-button {
	margin: 0;
	font-size: 1rem;
	}

.careers-wrap a.block-button:hover, .careers-wrap a.block-button:active { text-decoration: none; }

ul.portfolio {
	width: 101%;
	margin: 0;
	padding: 0;
	list-style: none;
	}

ul.portfolio li {
	float: left;
	width: 24%;
	padding-right: 1%;
	margin-bottom: 2%;
	}

ul.portfolio li a {
	display: block;
	background: #999;
	}

ul.portfolio li a:hover, ul.portfolio li a:active { text-decoration: none; }

ul.portfolio li a:focus { outline: 0; }

ul.portfolio li a img {
	display: block;
	width: 100%;
	}

ul.portfolio li a div {
	padding: 2% 4%;
	background: #999 url(../img/icon-photo.png) no-repeat 97% 25%;
	color: #fff;
	font-family: 'nimbus-sans', Arial, Helvetica, sans-serif;
	font-size: 0.72727273em;
	font-weight: 400;
	line-height: 1.15;
	text-transform: uppercase;
	white-space: nowrap;
	}

ul.portfolio li a div.study { background-image: url(../img/icon-briefcase.png); }

ul.portfolio li a div span.subtitle {
	display: block;
	font-size: 0.875em;
	font-weight: 300;
	text-transform: none;
	}

ul.portfolio li a:hover div, ul.portfolio li a:active div { background-color: #1c98a5; }

ul.process-flow {
	width: 101%;
	margin: 0;
	padding: 0;
	list-style: none;
	}

ul.process-flow > li {
	box-sizing: border-box;
	display: block;
	float: left;
	width: 32.333%;
	margin-right: 1%;
	margin-bottom: 2%;
	padding: 2%;
	background-color: #fff;
	border: 2px solid #bdbdbd;
	}

ul.process-flow > li h5 {
	margin-top: 0;
	padding-bottom: 15px;
	border-bottom: 2px solid #bdbdbd;
	font-size: 1.5em !important;
	text-align: center;
	}

ul.process-flow ul { list-style: disc; }

.image-lineup { margin-bottom: 40px; }

.image-lineup img {
	box-sizing: border-box;
	display: block;
	float: left;
	width: 20%;
	height: auto;
	padding-right: 5px;
	padding-bottom: 5px;
	}

.legend {
	margin: 5% 0 0;
	padding: 5px 0;
	list-style: none;
	border-top: 1px solid #b3b3b3;
	border-bottom: 1px solid #b3b3b3;
	}

.legend li {
	float: left;
	margin-right: 4%;
	color: #808080;
	font-size: 0.82em;
	font-weight: 400;
	text-transform: uppercase;
	}

.legend li.briefcase {
	padding-right: 35px;
	background: url(../img/icon-briefcase-gray.png) no-repeat 100% 50%;
	}

.legend li.photo {
	padding-right: 30px;
	background: url(../img/icon-photo-gray.png) no-repeat 100% 50%;
	}

.team-bio {
	position: relative;
	width: 101%;
	margin: 0 0 80px;
	padding: 0;
	list-style: none;
	}

.team-bio li.bio-thumb {
	float: left;
	width: 19%;
	padding-right: 1%;
	}

.team-bio li.selected a { background: url(../img/bg-bio-caret-light.png) no-repeat 50% 100%; }

.team-bio li.wide-thumb {
	width: 32.333%;
	padding-right: 1%;
	padding-bottom: 2%;
	}

.team-bio li a {
	display: block;
	padding-bottom: 12px;
	}

.team-bio li a img {
	display: block;
	width: 100%;
	margin-bottom: 2%;
	}

.team-bio a:hover, .team-bio a:active { text-decoration: none; }

.team-bio a:focus { outline: 0; }

.team-bio h4 {
	margin: 0 0 5%;
	color: #9ff0f4;
	font-family: 'nimbus-sans-condensed', Arial, Helvetica, sans-serif;
	font-size: 1.36em;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	}

.team-bio h4 span.subtitle {
	display: block;
	color: #168593;
	font-family: 'nimbus-sans', Arial, Helvetica, sans-serif;
	font-size: 0.6em;
	font-weight: 300;
	text-transform: none;
	}

.team-bio img.img-responsive {
	display: block;
	width: 100%;
	margin-bottom: 2%;
	}

.team-detail {
	position: absolute;
	z-index: 100;
	left: 0;
	width: 93%;
	margin-top: -1px;
	padding: 2% 3% 3%;
	background: #0c252d;
	border: 1px solid #1c98a5;
	font-size: 0.73em !important;
	}

.team-detail div.left { width: 33%; }

.team-detail div.right {
	width: 62%;
	padding-right: 2%;
	}

.team-detail a {
	display: inline;
	padding: 0;
	background: none !important;
	}

.team-detail ul { list-style-type: disc; }

.team-detail li {
	float: none;
	width: auto;
	padding: 0;
	}

.team-detail h3 {
	font-size: 1.25em !important;
	line-height: 1.5;
	}

.team-detail p {
	color: #cccbcb;
	font-size: 1em !important;
	}

.team-detail p span.highlight { color: #99af3b; }

.team-detail li { color: #fff; }

.team-detail div.left img {
	width: 100%;
	margin-bottom: 20px;
	}

.team-detail a.btn-close {
	display: block;
	position: absolute;
	right: 10px;
	top: 10px;
	width: 21px;
	height: 20px;
	margin: 0;
	padding: 0;
	background: transparent url(../img/btn-close.png) no-repeat top left !important;
	text-indent: -999em;
	overflow: hidden;
	}

.team-detail div.right a.btn-close:active { background: transparent url(../img/btn-close.png) no-repeat top left; }

#who-we-are .tab-nav {
	position: absolute;
	right: 45%;
	margin: 0;
	padding: 0;
	list-style: none;
	}

#who-we-are .tab-nav li {
	margin-right: -14px;
	padding-right: 14px;
	}

#who-we-are .tab-nav li.selected { background: url(../img/bg-tab-caret.png) no-repeat 100% 50%; }

#who-we-are .tab-nav a {
	display: block;
	padding: 15px 20px;
	background: #99af3b;
	color: #fff;
	font-family: 'nimbus-sans-condensed', Arial, Helvetica, sans-serif;
	font-size: 2.09em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	}

#who-we-are .tab-nav a:hover, #who-we-are .tab-nav a:active, #who-we-are .tab-nav li.selected a {
	background: #b0bf35;
	text-decoration: none;
	}

#who-we-are .tab-nav a:focus { outline: 0; }

#who-we-are .tabs-wrap { padding: 7% 5%; }

#who-we-are .tab p { font-size: 1.125em; }

#who-we-are .tab p strong {
	color: #1c98a5;
	}

#our-work .intro {
	position:relative;
	width: 49%;
	margin-bottom: 3%;
	padding: 0 51% 0 0;
	background: #f2f2f2;
	background-size: cover;
	}

#our-work .btn-reveal {
	display: block;
	width: 34%;
	margin: 1% auto;
	padding: 1% 0;
	border: 1px solid #1c98a5;
	font-size: 1.125em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	}

#our-work .btn-reveal:hover, #our-work .btn-reveal:active { text-decoration: none; }

#our-work .btn-reveal:focus { outline: 0; }

#our-work .btn-reveal span {
	display: inline-block;
	padding-right: 30px;
	background: url(../img/btn-reveal-caret-s.png) no-repeat 100% 50%;
	}

#our-work a.selected span { background-image: url(../img/btn-reveal-caret-n.png); }

#our-work #work-image-wrapper {
	width: 49%;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	overflow: hidden;
}

#our-work #work-image-wrapper img {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* WORK HIGHLIGHT VIDEO */
.table-outer {
	display: table;
	width: 100%;
	height: 100%;
	}

.table-inner {
	display: table-cell;
	width: 100%;
	vertical-align: middle;
	height: 100%;
	}

#our-work #video-work-button {
	text-align: center;
	width: 49%;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	background: #f2f2f2 url(../img/work-highlight.jpg) no-repeat 50% 50%;
	background-size: cover;
	}

#launch-video-work {
	margin: 0 auto;
	display: inline-block;
	*display: inline;
	zoom: 1;
	background: #000;
	background: rgba(0,0,0,.6);
	border-radius: 1000px;
	padding: 40px;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: -webkit-transform .2s ease-in-out .15s;
	-moz-transition: -moz-transform .2s ease-in-out .15s;
	-ms-transition: -ms-transform .2s ease-in-out .15s;
	transition: transform .2s ease-in-out .15s;
	}

#launch-video-work:hover {
	-webkit-transform: scale(.75);
	-moz-transform: scale(.75);
	-ms-transform: scale(.75);
	transform: scale(.75);
	}

#launch-video-work img {
	display: block;
	width: 150px;
	height: 150px;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: -webkit-transform .2s ease-in-out;
	-moz-transition: -moz-transform .2s ease-in-out;
	-ms-transition: -ms-transform .2s ease-in-out;
	transition: transform .2s ease-in-out;
	}

#launch-video-work:hover img {
	-webkit-transform: scale(.75);
	-moz-transform: scale(.75);
	-ms-transform: scale(.75);
	transform: scale(.75);
	}

#work-video-wrapper {
	position: absolute;
	width: 92%;
	height: auto;
	z-index: 500;
	padding-bottom: 32px;
	overflow: hidden;
	}

#our-team h3, #our-team p { color: #fff; }

#our-team .intro {
	width: 49%;
	margin-bottom: 4%;
	padding: 0 51% 0 0;
	background: #14323e url(../img/team-fun.jpg) no-repeat 50% 50%;
	background-size: cover;
	}

#capabilities h3 { color: #fff; }

#capabilities h6 {
	margin: 40px 0;
	padding-bottom: 10px;
	border-bottom: 1px solid #fff;
	color: #fff;
	font-family: 'nimbus-sans', Arial, Helvetica, sans-serif;
	font-size: 1em;
	text-transform: uppercase;
	}

#capabilities .intro { width: 67%; }

#capabilities .feature {
	float: left;
	width: 33.333%;
	}

#capabilities .feature h5 {
	margin: 0 0 15px;
	color: #fff;
	font-family: 'nimbus-sans-condensed', Arial, Helvetica, sans-serif;
	font-size: 2em;
	font-weight: 700;
	text-transform: uppercase;
	}

#capabilities .feature ul {
	margin: 0;
	padding: 0 0 0 20px;
	list-style: disc url(../img/bullet-caret.png);
	}

#capabilities .feature li {
	color: #fff;
	font-size: 0.77em;
	}

#capabilities .compass {
	width: 19.333%;
	padding-left: 14%;
	background: url(../img/compass.png) no-repeat 0 50%;
	background-size: auto 90%;
	}

#capabilities .megaphone {
	width: 19.333%;
	padding-left: 14%;
	background: url(../img/megaphone.png) no-repeat 0 50%;
	background-size: auto 90%;
	}

#capabilities .technology {
	width: 19.333%;
	padding-left: 14%;
	background: url(../img/technology.png) no-repeat 0 50%;
	background-size: auto 90%;
	}

body#drilldown img { width: 100%; }

body#drilldown .intro {
	width: 700px;
	margin: 0 auto;
	padding-top: 160px;
	padding-bottom: 6%;
	}

body#drilldown .intro h2 {
	display: block;
	margin: 0;
	padding: 0;
	background: none;
	color: #99af3b;
	font-family: 'museo-slab', Arial, Helvetica, sans-serif;
	font-size: 3.875em;
	line-height: 1.25;
	text-align: center;
	}

body#drilldown .intro h2 span {
	display: inline-block;
	font-size: 0.5em;
	vertical-align: top;
	}

body#drilldown .intro h3 {
	margin: 0 0 3%;
	border-bottom: 2px solid #99af3b;
	color: #6d6e70;
	font-size: 2.5em;
	font-weight: 500;
	line-height: 1.5;
	font-style: italic;
	text-align: center;
	}

body#drilldown .intro h3 span {
	display: block;
	padding-bottom: 20px;
	color: #168593;
	font-family: 'nimbus-sans', Arial, Helvetica, sans-serif;
	font-size: 0.55em;
	font-weight: 300;
	font-style: normal;
	}

body#drilldown .intro h4 {
	margin: 0;
	color: #6d6e70;
	font-size: 1.5em;
	font-weight: 500;
	font-style: italic;
	text-align: center;
	}

body#drilldown .intro p { text-align: center; }

body#drilldown .image-feature { width: 100%; }

body#drilldown .module {
	padding: 7% 0;
	background: url(../img/bg-module-rule.png) no-repeat 50% 100%;
	}

body#drilldown.single-feature .module {
	padding: 0;
	background: none;
	}

body#drilldown .module.last { background: none; }

body#drilldown .module h4 {
	margin: 0 0 3%;
	color: #168593;
	font-size: 2.125em;
	font-weight: 500;
	font-style: italic;
	}

body#drilldown .module p {
	font-size: 1.125em;
	line-height: 1.25;
	}

body#drilldown .module div.left {
	width: 50%;
	padding-right: 5%;
	}

body#drilldown .module div.left img { width: 100%; }

body#drilldown .module div.right { width: 45%; }

body#drilldown .work-row > div { float: none; }

body#drilldown .work-row > div img { width: 100%; }

body#drilldown .work-row > div:first-child {
	width: 50%;
	padding-right: 5%;
}

body#drilldown .work-row > div:last-child {
	width: 45%;
}

body#drilldown .work-row-image img + img { margin-top: 20px; }

body#drilldown .module blockquote {
	margin: 20px 0;
	padding: 15px;
	border: 2px solid #168593;
	font-size: 1.125em;
	font-style: italic;
	line-height: 1.5;
	}

body#drilldown .module blockquote span {
	display: block;
	padding-left: 40%;
	font-size: 0.78em;
	font-style: normal;
	}

body#drilldown .module blockquote span strong {
	color: #168593;
	font-size: 1.14em;
	font-weight: 300;
	}

body#drilldown .module ul.green {
	padding-left: 20px;
	font-size: 1.125em;
	}

body#drilldown .module ul.green li {
	margin-bottom: 15px;
	color: #1c98a5;
	}

body#drilldown .module ul.green li span { color: #666; }

body#drilldown .image-col { margin: 2% 0; }

body#drilldown .image-col img.left, body#drilldown .image-col img.right { width: 49%; }

body#drilldown .embed-video {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	height: auto;
	}

body#drilldown .embed-video iframe, body#drilldown .embed-video object, body#drilldown .embed-video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

body#drilldown .wallpaper {
	position: relative;
	width: 100%;
	background-position: 50% 50%;
	background-size: cover;
	}

body#drilldown .nve-skyscape { background-image: url(../img/nve-skyscape.jpg); }

body#drilldown a.btn-award {
	display: inline-block;
	position: absolute;
	top: 90px;
	right: 10px;
	z-index: 1;
	}

body#drilldown a.btn-award:focus { outline: 0; }

body#drilldown a.btn-award img {
	display: block;
	width: auto;
	border: none;
	}

body#drilldown .owl-carousel img {
	display:block;
	max-width:100%;
}

body#project-planner #content h6 {
	margin: 0;
	color: #a6a8ab;
	font-family: 'nimbus-sans', Arial, Helvetica, sans-serif;
	font-size: 1.3125em;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	letter-spacing: 1px;
	}

body#project-planner .intro {
	margin: 0 auto;
	padding-top: 140px;
	}

body#project-planner .intro h2 {
	display: block;
	margin: 0 0 25px;
	padding: 0;
	background: transparent;
	font-family: 'nimbus-sans-condensed', Arial, Helvetica, sans-serif;
	font-size: 2.875em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	}

body#project-planner .intro h2 span {
	display: inline-block;
	padding: 10px 20px;
	background: #99af3b;
	color: #fff;
	}

body#project-planner .intro p {
	float: none;
	margin-top: 0;
	color: #a6a8ab;
	font-size: 1.0625em;
	font-weight: 300;
	line-height: 1.5;
	text-align: center;
	}

body#project-planner #contact-content h6 { text-align: left; }

body#project-planner #contact-content .left {
	width: 25%;
	padding-bottom: 5%;
	color: #a6a8ab;
	}

body#agency h3 { margin-bottom: 60px; }

body#agency h5 {
	margin: 15px 0;
	color: #1c98a5;
	font-size: 2em;
	}

/*body#agency p { font-size: 1.125em; }

body#agency #content p, body#agency #content ul, body#agency #content ol { font-size: 1.125em; }

body#agency #content ul ul, body#agency #content ol ol { font-size: 100%; }*/

body#agency #content p, body#agency #content ul, body#agency #content ol { font-size: 1.3125em;	}

body#agency #content ul ul, body#agency #content ol ol { font-size: 100%; }

body#agency .intro h2 { font-size: 3em; }

body#agency .intro h3 { font-size: 2em; }

body#agency .page-wrap .container { padding: 3% 4%; }

body#agency #about-us { background: #fff; }

body#agency #about-us .image-feature {
	width: 52%;
	margin-bottom: 4%;
	padding: 0 48% 0 0;
	background: #fff url(../img/office-stairs.jpg) no-repeat 50% 50%;
	background-size: cover;
	}

body#agency #capabilities { background: #f2f2f2; }

body#agency #capabilities .intro { width: auto; }

body#agency #capabilities h3 { color: #666; }

body#agency #capabilities .col-3 ul { padding-left: 20px; }

body#agency #capabilities .col-3 li { color: #1c98a5; }

body#agency #capabilities .col-3 li span { color: #666; }

body#agency #featured-intro, body#agency #outro {
	background: #f1f1f1 url(../img/wallpaper-full-color-dark@2x.jpg) repeat fixed 50% 76px;
	background-size: 1351px 965px;
}

body#agency #featured-intro .container {
	max-width: 1100px;
	padding-top: 0;
	padding-bottom: 4%;
	}

body#agency #featured-intro .intro {
	margin: 0 auto;
	padding-top: 120px;
	padding-bottom: 0;
	}

body#agency #outro {
	text-align: center;
	padding-top: 0;
	}

body#agency #outro .container { max-width: 1100px; }

body#agency #outro #splash-video object { left:0; }

/*body#agency #launch-video h2 { font-size:2.75em; }*/

body#agency #outro h3 {
	font-size: 3em;
	color: #99af3b;
	font-weight: 500;
	}

body#agency #featured-intro .intro h2 {
	display: block;
	margin: 0 0 40px;
	padding: 0;
	background: none;
	color: #99af3b;
	font-family: 'museo-slab', Arial, Helvetica, sans-serif;
	font-size: 3.875em;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	}

body#agency #featured-intro .intro h3 {
	color: #fff;
	font-weight: 400;
	text-align: center;
	}

/*	background: #f2f2f2 url(../img/nve-landscape-gray.jpg) no-repeat 50% 100%;
	background-size: 100% auto;
	}
*/
body#agency #awards { /*background: #f2f2f2;*/ background: #fff; }

body#agency #awards h5 { margin-bottom: 0; }

body#agency #awards .col-4 { text-align:center; }

body#agency #awards .col-6 { text-align:center; }

/*body#agency #awards h5 { font-size:1.5em; }*/

body#agency #agencies-work { background: #fff; }

body#agency #our-work { background: #fff; }

body#agency #our-work .intro {
	width: auto;
	margin-bottom: 3%;
	padding: 0;
	background: #fff;
	}

body#agency #our-work h3 { margin-bottom: 30px; }

/*body#agency ul.portfolio li a div { font-size: 0.77777778em; }*/

body#agency .app-tree, body#drilldown .app-tree {
	position: relative;
	margin: -80px auto -100px auto;
	display: block;
	max-width: 100%;
	width: auto;
	}

body#drilldown .pop-swish-middle { text-align: center; }

body#drilldown .pop-swish-middle img {
	position: relative;
	margin: -200px auto 0 auto;
	display: block;
	max-width: 100%;
	width: auto;
	}

body#agency #our-team .container { padding-bottom:0; }

body#agency #our-team h3 { margin-bottom: 30px; }

body#agency .col-3 { padding-top: 1%; }

body.single-feature { background: url(../img/bg-grain.png) repeat top left !important; }

body.single-feature h5 {
	margin: 0 0 20px;
	color: #168593;
	}

body.single-feature h5 span {
	display: block;
	color: #666;
	font-family: 'nimbus-sans', Arial, Helvetica, sans-serif;
	font-size: 0.6875em;
	font-weight: 300;
	}

body.single-feature .intro { padding-top: 130px !important; }

p span.highlight {
	color: #1c98a5;
	font-weight: 400;
	text-transform: uppercase;
	}


/* Makes Youtube embeds responsive */
.responsive-vid {height: 0; padding-top: 25px; padding-bottom: 67.5%; margin-bottom: 10px; position: relative; overflow: hidden;}
.responsive-vid.widescreen {padding-bottom: 57.25%;}
.responsive-vid.vimeo {padding-top: 0;}
.responsive-vid embed, .responsive-vid iframe, .responsive-vid object, .responsive-vid video {top: 0;left: 0;width: 100%;height: 100%;position: absolute;}

#content .video-wrapper {
	position: relative;
	width: 100%;
	}

#content .video-wrapper a.btn-play {
	position: absolute;
	display: block;
	width: 100%;
	z-index: 1;
	}

#content .video-wrapper a.btn-play img {
	display: block;
	width: 100%;
	height: auto;
	}

#content .video-wrapper a.btn-play span {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -115px 0 0 -115px;
	zoom: 1;
	background: #000;
	background: rgba(0,0,0,.6);
	border-radius: 1000px;
	padding: 40px;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: -webkit-transform .2s ease-in-out .15s;
	-moz-transition: -moz-transform .2s ease-in-out .15s;
	-ms-transition: -ms-transform .2s ease-in-out .15s;
	transition: transform .2s ease-in-out .15s;
	}

#content .col-6 .video-wrapper a.btn-play span { margin: -84px 0 0 -84px; }

#content .video-wrapper a.btn-play:hover span {
	-webkit-transform: scale(.75);
	-moz-transform: scale(.75);
	-ms-transform: scale(.75);
	transform: scale(.75);
	}

#content .video-wrapper a.btn-play span img {
	display: block;
	width: 150px;
	height: 150px;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: -webkit-transform .2s ease-in-out;
	-moz-transition: -moz-transform .2s ease-in-out;
	-ms-transition: -ms-transform .2s ease-in-out;
	transition: transform .2s ease-in-out;
	}

#content .col-6 .video-wrapper a.btn-play span img {
	width: 88px;
	height: 88px;
	}

#content .video-wrapper a.btn-play:hover span img {
	-webkit-transform: scale(.75);
	-moz-transform: scale(.75);
	-ms-transform: scale(.75);
	transform: scale(.75);
	}

#content .awards-wrapper {
	width: 80%;
	margin: 0 auto;
	}

#content .awards-wrapper h3 { margin: 4% 0; }

#content .awards-wrapper h5 {
	margin: 10px 0 5px;
	font-size: 1.25em;
	}

#content .awards-wrapper p {
	margin: 0 0 20px;
	font-size: 1em;
	}

#welcome {
	position: absolute;
	z-index: 10;
	width: 100%;
	}

#welcome .container { max-width: 800px; }

#welcome .animated {
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	}

#welcome h6 {
	margin: 20px 0 0;
	color: #fff;
	font-size: 2.25em;
	opacity: 0;
	text-align: center;
	}

#welcome h6.animated { opacity: 1; }

#welcome img {
	display: block;
	width: auto !important;
	max-width: 100px;
	height: auto;
	margin: 0 auto;
	opacity: 0;
	}

#welcome img.animated { opacity: 1; }

#welcome .fadeInDown {
  -webkit-animation-name: fadeInDownShort;
          animation-name: fadeInDownShort;
}

#welcome .fadeOutDown {
  -webkit-animation-name: fadeOutDownShort;
          animation-name: fadeOutDownShort;
}

#splash-video .fadeInUp {
  -webkit-animation-name: fadeInUpShort;
          animation-name: fadeInUpShort;
}

#welcome .zoomIn {
  -webkit-animation-name: zoomInShort;
          animation-name: zoomInShort;
}

/*.col-2 {
	float: left;
	width: 48%;
	padding-right: 2%;
	padding-bottom: 2%;
	}

.col-3 {
	float: left;
	width: 31.333%;
	padding-right: 2%;
	padding-bottom: 2%;
	}

.col-4 {
	float: left;
	width: 23%;
	padding-right: 2%;
	padding-bottom: 2%;
	}*/



/* Footer
-------------------------------------------------------------- */

#footer p {
	float: left;
	margin: 0;
	color: #979797;
	font-family: 'nimbus-sans-condensed', Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: 400;
	}

#footer .row {
	margin-bottom: 10px;
	border-bottom: 1px solid #fff;
	}

#footer ul.subnav {
	float: right;
	margin: 0;
	padding: 10px 0 0;
	list-style: none;
	}

#footer ul.subnav li { float: left; }

#footer ul.subnav li a {
	display: block;
	padding: 10px;
	color: #fff;
	font-family: 'nimbus-sans-condensed', Arial, Helvetica, sans-serif;
	font-size: 1.125em;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 1px;
	}

#footer ul.subnav li a:hover, #footer ul.subnav li a:active { text-decoration: none; }

#footer ul.subnav li a:focus { outline: 0; }

#footer a.btn-reveal {
	display: block;
	float: right;
	margin-top: 10px;
	padding: 10px 0 10px 10px;
	color: #fff;
	font-family: 'nimbus-sans-condensed', Arial, Helvetica, sans-serif;
	font-size: 1.125em;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 1px;
	}

#footer a.btn-reveal:hover, #footer a.btn-reveal:active { text-decoration: none; }

#footer a.btn-reveal:focus { outline: 0; }

#footer ul.tools {
	float: right;
	margin: 0;
	padding: 0;
	list-style: none;
	}

#footer ul.tools li {
	float: left;
	margin-left: 10px;
	}

#footer ul.tools li a {
	display: block;
	width: 31px;
	height: 30px;
	text-indent: -999em;
	overflow: hidden;
	}

#footer ul.tools li.facebook a { background: url(../img/btn-facebook.png) no-repeat top left; }
#footer ul.tools li.rss a { background: url(../img/btn-rss.png) no-repeat top left; }
#footer ul.tools li.twitter a { background: url(../img/btn-twitter.png) no-repeat top left; }

#footer ul.tools li a:active { background-position: top right; }

#footer ul.tools li a:focus { outline: 0; }

#footer h6.sub-logo {
	float: left;
	width: 128px;
	height: 36px;
	margin: 0 0 10px;
	text-indent: -999em;
	overflow: hidden;
	background: url(../img/logo-jloop.png) no-repeat top left;
	}

#footer img.left { margin-left: 20px; }



/* Forms and Tables
-------------------------------------------------------------- */

label, input, textarea, select {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: normal;
	}

#project-planner label {
	display: block;
	margin-bottom: 8px;
	color: #9EA0A3;
	font-family: 'nimbus-sans-condensed', Arial, Helvetica, sans-serif;
	font-size: 1.3125em;
	font-weight: 300;
	}

#project-planner input {
	width: 96%;
	padding: 2%;
	background: #e7e8e9;
	border: none;
	color: #333;
	font-family: 'nimbus-sans', Arial, Helvetica, sans-serif;
	font-weight: 400;
	}

#project-planner input[type="submit"] {
	display: block;
	width: 300px;
	margin: 20px auto 0;
	padding: 10px 0;
	background: #202121;
	border: 1px solid #b0bf35;
	color: #fff;
	font-family: 'museo-slab', Arial, Helvetica, sans-serif;
	font-size: 1.44em;
	font-weight: 300;
	font-style: italic;
	text-align: center;
	text-transform: uppercase;
	}

#project-planner input[type="submit"]:hover { cursor: pointer; }

#project-planner input[type="submit"]:active { background: #b0bf35; }

#project-planner textarea {
	display: block;
	width: 690px;
	height: 215px;
	margin: 0;
	padding: 5px;
	background: #e7e8e9;
	border: none;
	overflow: auto;
	color: #333;
	}

#project-planner select { width: 100%; }

#project-planner form {
	width: 730px;
	margin-right: -30px;
	padding: 20px 0;
	}

#project-planner form .left {
	width: 335px;
	margin-right: 30px;
	}

#project-planner form .row {
	padding-bottom: 20px;
	border: none !important;
	}

.module table {
	clear: both;
	background: #eef0f2;
	}

.module table thead { background: #1c98a5; }

.module table th {
	padding: 1%;
	color: #fff;
	font-size: 1.75em;
	font-family: 'nimbus-sans-condensed', Arial, Helvetica, sans-serif;
	font-weight: 400;
	text-align: center;
	text-transform: uppercase;
	}

.module table th:first-child { width: 35%; }

.module table td {
	padding: 2%;
	vertical-align: top;
	color: #6d6e70;
	font-size: 1em;
	line-height: 1.5;
	}

.module table td.first {
	color: #99af3b;
	font-family: 'museo-slab', Arial, Helvetica, sans-serif;
	font-weight: 500;
	font-size: 1.5em;
	}

.module table td.first span {
	display: block;
	width: 33px;
	height: 32px;
	background: url(../img/bg-table-index.png) no-repeat top left;
	line-height: 32px;
	text-align: center;
	}

.module table tr.alt td { background-color: #d5d8da; }



/* Misc.
-------------------------------------------------------------- */

img { display: block; }

img.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
	}

.center-block {
	display: block;
	margin-right: auto;
	margin-left: auto;
	}

.text-left { text-align: left; }

.text-right { text-align: right; }

.text-center { text-align: center; }
.small-text { text-align:center; font-size: 0.7em; }

.text-justify { text-align: justify; }

hr {
	display: block;
	height: 1px;
	margin: 1% 0 2%;
	padding: 0;
	border: none;
	border-top: 1px solid #b3b3b3;
	}

.left { float: left; }

.right { float: right; }

.hide { display: none; }

.valign-box-wrap { display: table; }

.valign-box {
	display: table-cell;
	vertical-align: middle;
	}

/* Clearing floats, based on 'Micro Clearfix Hack': http://nicolasgallagher.com/micro-clearfix-hack/ */
.row:before, .container:before, .row:after, .container:after { content: ""; display: table; }
.row:after, .container:after { clear: both; }
.row, .container { *zoom: 1; }

/* Grid system, based on 'Responsive Grid System', by Denis Leblanc - released under GPL & MIT license: http://responsive.gs/ */
.gutters, .col {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url(/scripts/boxsizing.htc);
	/*	If you need support for IE7 and lower make
		sure the boxsizing.htc file is linked properly.
		More info here:  https://github.com/Schepp/box-sizing-polyfill */
	}

.col {
	display: block;
	float: left;
	width: 100%;
	}

.gutters .col {
	margin-left: 2%;
	padding-bottom: 2%;
	}

.gutters .col:first-child { margin-left: 0; }

.col-1 { width: 8.33333333333%; }
.col-2 { width: 16.6666666667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.3333333333%; }
.col-5 { width: 41.6666666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.3333333333%; }
.col-8 { width: 66.6666666667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.3333333333%; }
.col-11 { width: 91.6666666667%; }
.col-12 { width: 100%; }

.gutters .col-1 { width: 6.5%; }
.gutters .col-2 { width: 15.0%; }
.gutters .col-3 { width: 23.5%; }
.gutters .col-4 { width: 32.0%; }
.gutters .col-5 { width: 40.5%; }
.gutters .col-6 { width: 49.0%; }
.gutters .col-7 { width: 57.5%; }
.gutters .col-8 { width: 66.0%; }
.gutters .col-9 { width: 74.5%; }
.gutters .col-10 { width: 83.0%; }
.gutters .col-11 { width: 91.5%; }
.gutters .col-12 { width: 100%; }

/* Animate.css Override */
@-webkit-keyframes fadeInDownShort {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
            transform: translate3d(0, -10%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInDownShort {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
            transform: translate3d(0, -10%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@-webkit-keyframes fadeOutDownShort {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
            transform: translate3d(0, 10%, 0);
  }
}

@keyframes fadeOutDownShort {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
            transform: translate3d(0, 10%, 0);
  }
}

@-webkit-keyframes fadeInUpShort {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
            transform: translate3d(0, 10%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInUpShort {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
            transform: translate3d(0, 10%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@-webkit-keyframes zoomInShort {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.5, .5, .5);
            transform: scale3d(.5, .5, .5);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomInShort {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.5, .5, .5);
            transform: scale3d(.5, .5, .5);
  }

  50% {
    opacity: 1;
  }
}

/* Media Queries */
@media screen and (max-width: 1400px) {
	body#agency h3 { margin-bottom: 30px; }
	body#agency h5 { font-size: 2em; }
	body#agency #content p, body#agency #content ul, body#agency #content ol { font-size: 1.375em; }
	body#agency #content ul ul, body#agency #content ol ol { font-size: 100%; }
	body#agency .intro h2 { font-size: 2.875em; }
	body#agency .intro h3 { font-size: 1.875em; }
	body#agency ul.process-flow { font-size: 1.3125em; }
	}

@media screen and (max-width: 1060px) {
	ul.portfolio li a div { font-size: 0.75em; }
	}

@media screen and (max-width: 1050px) {
	#navbar { background-position: -540px 0; }
	}

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

	#our-work #work-image-wrapper {
		display: none;
	}

	#our-work #video-work-button {
		position:relative;
		width:100%;
		margin-top:20px;
		}

	#our-work #launch-video-work { margin:18px 0 12px 0; }

	#contact-pane div.left { padding: 2%; }

	#contact-pane div.right {
		float: left;
		padding: 2% 0;
		}

	#who-we-are { padding: 0; }

	#who-we-are .container {
		width: 100%;
		padding: 0;
		background: url(../img/bg-geometric.png) no-repeat 100% 0;
		background-size: cover;
		}

	#who-we-are div.right {
		float: none;
		width: 100%;
		padding: 0;
		}

	#who-we-are .tabs-wrap {
		padding-right: 4%;
		padding-left: 4%;
		color: #fff;
		}

	#who-we-are .tabs-wrap h3 {
		margin-top: 0;
		color: #fff;
		}

	#who-we-are .tab-nav {
		position: relative;
		right: auto;
		}

	#who-we-are .tab-nav li {
		float: left;
		width: 50%;
		margin: 0;
		padding: 0 0 14px;
		}

	#who-we-are .tab-nav li.selected { background: url(../img/bg-tab-caret-s.png) no-repeat 50% 100%; }

	#who-we-are .tab-nav a { padding: 2%; }

	#capabilities .container { padding: 8% 4% 12%; }

	#footer ul.subnav, #footer a.btn-reveal { display: none; }

	#footer ul.tools { margin-top: -55px; }

	.careers-wrap .career-head {
		flex-direction: column;
		align-items: stretch;
		}

	.careers-wrap .career-head .career-title { flex: 0 1 auto; }

	ul.portfolio li { width: 32.3333333%; }

	.team-bio li.bio-thumb { width: 32.3333333%; }

	.team-bio li.wide-thumb { padding-bottom: 0; }

	.team-detail h3 {
		font-size: 1.75em !important;
		font-family: 'nimbus-sans-condensed', Arial, Helvetica, sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		}

	.team-detail div.left, .team-detail div.right {
		float: none;
		width: auto;
		padding-right: 30px;
		}

	.team-detail img { display: none; }

	#our-work .intro {
		width: auto;
		padding: 0;
		background: #f2f2f2;
		}

	#our-team .intro {
		width: auto;
		padding: 0;
		background: #14323e;
		}

	#capabilities { background: #f2f2f2; }

	#capabilities .intro { width: auto; }

	#capabilities h3 { color: #666; }

	#capabilities h6 {
		margin: 2% 0;
		padding: 10px 2% 20px;
		background: #168593 url(../img/bg-green-caret-s.png) no-repeat 50% 100%;
		border-bottom: none;
		color: #fff;
		font-family: 'museo-slab', Arial, Helvetica, sans-serif;
		font-size: 1.25em;
		font-style: italic;
		text-align: center;
		text-transform: none;
		}

	#capabilities .feature {
		float: none;
		width: auto;
		margin-bottom: 2%;
		padding-bottom: 2%;
		border-bottom: 2px solid #e6e6e6;
		}

	#capabilities .feature h5 { color: #168593; }

	#capabilities .feature ul { list-style: disc url(../img/bullet-caret-green.png); }

	#capabilities .feature li { color: #666; }

	#capabilities .compass {
		width: auto;
		padding-left: 0;
		background: url(../img/compass-green.png) no-repeat 100% 50%;
		background-size: auto 90%;
		}

	#capabilities .megaphone {
		width: auto;
		padding-left: 0;
		background: url(../img/megaphone-green.png) no-repeat 100% 50%;
		background-size: auto 90%;
		}

	#capabilities .technology {
		width: auto;
		padding-left: 0;
		background: url(../img/technology-green.png) no-repeat 100% 50%;
		background-size: auto 90%;
		}
	}

@media screen and (max-width: 1000px) {
	body#drilldown .container { padding: 0 1%; }

	body#drilldown a.btn-award img {
		width: 80px;
		height: auto;
		}

	body#agency #about-us .image-feature {
		width: auto;
		padding: 0;
		background: #fff;
		}

	#footer img.left {
		width: 140px;
		height: auto;
		}

	body#agency .app-tree {
		margin:-50px auto -60px auto;
	}
	}

@media screen and (max-width: 800px) {
	#header { background: none; }

	#header h1 {
		height: 46px;
		margin: 0;
		}

	#header a.btn-reveal {
		display: none;
		margin-top: 0;
		padding: 0;
		}

	#header a.nav-reveal {
		display: block;
		width: 30px;
		height: 46px;
		background: url(../img/btn-nav-reveal.png) no-repeat 50% 50%;
		text-indent: -999em;
		overflow: hidden;
		}

	#navbar { background: #188e9b url(../img/header-jloop-small.png) no-repeat top left; }

	#navbar .container {
		height: 46px;
		padding: 0 4%;
		}

	#navbar ul { display: none; }

	#home { padding-top: 46px; }

	#our-team .block-button, #our-work .block-button { font-size: 1.125em; }

	ul.portfolio li { width: 49%; }

	.team-bio { margin-bottom: 40px; }

	.team-bio li.bio-thumb { width: 49% !important; }

	body#agency #featured-intro .intro, body#agency #outro .intro { padding-top: 80px; }

	body#drilldown .intro, body#project-planner .intro { padding-top: 100px; }

	body#drilldown .module div.left { display: none; }

	body#drilldown .module div.right { width: 100%; }

	body#drilldown .work-row > div { width: 100%; }

	body#drilldown .work-row > div.work-row-image { display: none; }

	body#drilldown a.btn-award {
		top: 60px;
		right: 10px;
		}

	body#drilldown.single-feature .module {
		padding: 7% 0;
		background: url(../img/bg-module-rule-green.png) no-repeat 50% 100%;
		}

	body#drilldown.single-feature .module.last { background: none; }

	body#project-planner #contact-content {
		display: block;
		margin-top: -40px;
		}

	body.single-feature .intro { padding-top: 80px !important; }

	body.single-feature #content .col-6 .video-wrapper { margin-top: 5%; }

	#welcome h5 { font-size: 2em; }

	#welcome .col { float: left !important; }

	#welcome .col-4 { width: 33.3333333333% !important; }

	/*.col-2, .col-3, .col-4 {
		float: none;
		width: auto;
		padding-right: 0;
		}

	.col-3 img.img-responsive, .col-4 img.img-responsive { margin: 0 auto; }*/

	.col { float: none; }

	.gutters .col { margin-left: 0; }

	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11 { width: 100% !important; }

	img.img-responsive { margin: 0 auto; }

	body#agency .app-tree {
		margin:-30px auto;
	}

	}

@media screen and (max-width: 700px) {
	#splash-video a#launch-video h2 { font-size: 2.25em; }

	#splash-video a#launch-video h2 span {
		width: 121px;
		height: 32px;
		background: url(../img/btn-see-how-sm.png) no-repeat top left;
		}

	body#drilldown .intro { width: auto; }

	body#project-planner .container { padding: 0 1%; }

	body#project-planner #contact-content .left { width: 50%; }

	#project-planner input, #project-planner select { margin-bottom: 2%; }

	#project-planner textarea {
		width: 96%;
		height: 20%;
		margin-bottom: 2%;
		padding: 2%;
		}

	#project-planner form {
		width: 100%;
		margin: 0;
		padding: 2% 0 5%;
		}

	#project-planner form .row { padding: 0; }

	#project-planner form .left {
		width: 100%;
		margin: 0;
		}
	}

@media screen and (max-width: 640px) {
	#content h2 { font-size: 1.75em; }

	#content h3 { font-size: 1.125em; }

	#content p, #content ul, #content ol { font-size: 0.9375em; }

	#content ul ul, #content ol ol { font-size: 100%; }

	#splash-video a#launch-video h2 {
		top: 5%;
		font-size: 1.75em;
		}

	#who-we-are .tab-nav a { font-size: 1.75em; }

	#who-we-are .tab p { font-size: 0.9375em; }

	#welcome h6 {
		margin-top: 10px;
		font-size: 1.75em;
		}

	#welcome .col {
		display: none;
		float: none !important;
		}

	#welcome .col-4 { width: 100% !important; }

	.team-detail, #capabilities .feature li { font-size: 1em !important; }

	ul.legend { display: none; }

	ul.portfolio li a div {
		background: #999 !important;
		font-size: 0.8em !important;
		}

	ul.portfolio li a:hover div, ul.portfolio li a:active div { background-color: #1c98a5 !important; }

	#our-work a.btn-reveal { display: none; }

	#our-work #launch-video-work {
		padding: 20px;
		margin: 40px 0 30px 0;
		}

	#our-work #launch-video-work img {
		width: 100px;
		height: 100px;
		}

	#work-video .spacer { height:24px; }

	#content .video-wrapper a.btn-play span, #content .col-6 .video-wrapper a.btn-play span {
		padding: 20px;
		margin: -60px 0 0 -60px;
		}

	#content .video-wrapper a.btn-play span img, #content .col-6 .video-wrapper a.btn-play span img {
		width: 80px;
		height: 80px;
		}

	.team-bio h4 span.subtitle {
		color: #46aebb;
		font-size: 0.75em;
		}

	.team-detail h3 { font-size: 1.125em !important; }

	body#drilldown .intro h2/*, body#agency #featured-intro .intro h2*/ { font-size: 2em; }

	body#drilldown .intro h3/*, body#agency #featured-intro .intro h3*/ { font-size: 1.25em; }

	body#drilldown .intro h3 span { font-size: 0.83em; }

	body#drilldown a.btn-award { top: 50px; }

	body#drilldown a.btn-award img { width: 60px; }

	body#agency .app-tree { margin:0 auto; }

	}

@media screen and (max-width: 480px) {
	#welcome img { max-width: 60px; }
	}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
	.js .loading {
		background-image: url(../img/loading@2x.gif);
		background-size: 280px 79px;
		}

	#navbar {
		background-image: url(../img/header-jloop@2x.png);
		background-size: 2100px 76px;
		}

	#splash-video a#launch-video h2 span {
		background-image: url(../img/btn-see-how@2x.png);
		background-size: 100% 100%;
		}

	#page-nav li.btn-close a {
		background-image: url(../img/btn-page-nav-close@2x.png);
		background-size: 74px 37px;
		}

	#page-nav li.btn-next a {
		background-image: url(../img/btn-page-nav-next@2x.png);
		background-size: 74px 37px;
		}

	#page-nav li.btn-prev a {
		background-image: url(../img/btn-page-nav-prev@2x.png);
		background-size: 74px 37px;
		}

	#footer ul.tools li.facebook a {
		background-image: url(../img/btn-facebook@2x.png);
		background-size: 62px 30px;
		}

	#footer ul.tools li.rss a {
		background-image: url(../img/btn-rss@2x.png);
		background-size: 62px 30px;
		}

	#footer ul.tools li.twitter a {
		background-image: url(../img/btn-twitter@2x.png);
		background-size: 62px 30px;
		}

	#footer h6.sub-logo {
		background-image: url(../img/logo-jloop@2x.png);
		background-size: 100% 100%;
		}
	}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px), only screen and (min-device-pixel-ratio: 2) and (max-width: 800px) {
	#header a.nav-reveal {
		background-image: url(../img/btn-nav-reveal@2x.png);
		background-size: 30px 21px;
		}

	#navbar {
		background-image: url(../img/header-jloop-small@2x.png);
		background-size: 950px 46px;
		}
	}