@font-face {
	font-family: 'bebas_neue';
	src: url('fonts/bebasneue-webfont.eot');
	src: url('fonts/bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/bebasneue-webfont.woff2') format('woff2'),
		 url('fonts/bebasneue-webfont.woff') format('woff'),
		 url('fonts/bebasneue-webfont.ttf') format('truetype'),
		 url('fonts/bebasneue-webfont.svg#bebas_neueregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

html, body { background:#fff; border:0; margin:0; padding:0; }
body { font-family: 'bebas_neue', sans-serif; font-size:18px; overflow-x:hidden; }
.ie8-overlay { display:none; }

.shadow { /* horizontal, vertical, blur-rad, spread-rad, color */
	-moz-box-shadow:    0px 0px 5px 6px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0px 0px 5px 6px rgba(0,0,0,0.25);
	box-shadow:         0px 0px 5px 6px rgba(0,0,0,0.25);
}
.hide { display:none; }
.hidetext { text-indent: 100%; white-space: nowrap; overflow: hidden; }
.align-left { float:left; }
.align-right { float:right; }

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

h1, h2, h3, h4 { padding:0; margin:0; font-weight:normal; line-height:normal; color:#990000; }
h2 { line-height:42px; }
div, table, ul, li { margin:0; padding:0; }
.text-link { cursor:pointer; text-decoration:underline; }

.anim25 { -webkit-animation-duration:.25s; animation-duration:.25s; -webkit-transition-duration:.25s; transition-duration:.25s;}
.anim50 { -webkit-animation-duration:.5s; animation-duration:.5s; -webkit-transition-duration:.5s; transition-duration:.5s;}
.anim75 { -webkit-animation-duration:.75s; animation-duration:.75s; -webkit-transition-duration:.75s; transition-duration:.75s;}
.anim1 { -webkit-animation-duration:1s; animation-duration:1s; -webkit-transition-duration:1s; transition-duration:1s;}

.hide-text { text-indent: 100%; white-space: nowrap;	overflow: hidden; }

a { color:#282828; }
a.active { color:#990000; }

#wrapper.overflowfix { position:relative; overflow:hidden; }
.mainbg { width:100%; height:auto; position:absolute; }
.dash1 { width:100%; position:absolute; top:420px; pointer-events: none; opacity:.5; }
.dash2 { width:100%; position:absolute; top:1480px; pointer-events: none;  }
.header-wrapper { width:100%; max-width:960px; margin:0 auto; padding:0; left:0; right:0; position:fixed; z-index:99; }
#header { background:url(../imgs/transbg.png) top left repeat; position:absolute; top:-100px; right:2%; padding:8px 25px; font-size:1em; color:#fff; }
#header .nav-logo { 
	width:0; display:inline-block; 
	-ms-transform: scale(0); /* IE 9 */
    -webkit-transform: scale(0); /* Safari */
    transform: scale(0);
	margin-right:0; 
	margin-left:0;
} 
#header .logo { 
	height:auto;  
	vertical-align:middle; 
	width:100%;
}
#header.expanded .nav-logo { 
	width:43px; 
	margin-right:18px;
	-ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Safari */
    transform: scale(1);
}
#header .navbtn { text-decoration:none; color:#fff; cursor:pointer; }
#header .navbtn.active { color:#990000; }
#header .navbtn.active { pointer-events:none; }
#header.expanded { font-size:24px; }

.content-panel { width:96%; max-width:910px; padding:0 2%; margin:0 auto;  margin-bottom:80px; position:relative; }
.content-panel.panel768 { width:96%; padding:0 2%; max-width:768px; }
.content-panel .panel-head { width:100%; margin-bottom:10px; position:relative; }
.content-panel h2 { font-size:48px; display:inline-block; }
.content-panel .more-link { position:absolute; bottom:0; right:0; font-size:18px; width:auto; text-align:right;}

.3daccel {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
.logo-lockup-wrapper { position:relative; margin:0 auto; width:100%; max-width:960px; height:100%; }
.logo-lockup { position:absolute; left:250px; top:125px; white-space: nowrap; }
.logo-lockup .big-logo { width:257px; display:inline-block; vertical-align:middle; margin-right:15px; }
.logo-lockup .name-block { display:inline-block; vertical-align:top; padding-top:30px; text-transform:uppercase; }
.logo-lockup .name-block .hdr1{ font-size:30px; line-height:30px; color:#000; }
.logo-lockup .name-block .hdr2 { font-size:72px; line-height:60px; color:#000; }
.logo-lockup .name-block .hdr2 #roles { display:block; }
.jumpshoot-wrapper { position:absolute; width:553px; top:10px; left:10px; }
.jumpshoot-wrapper .bullet { position:absolute; top:92px; left:380px; }

#hero { min-height:700px; }

#featured-works { min-height:520px; }
#featured-works .column { width:24.25%; margin-left:1%; display:inline-block; vertical-align:top; }
#featured-works .column.first { margin-left:0; }
#featured-works .column .thumb-link { margin-bottom:10px; display:block; background:#000; position:relative; opacity:0; }
#featured-works .column .thumb-link .thumb { position:relative; width:100%; background-position:center; background-repeat:no-repeat; opacity:0; background-size:cover; overflow:hidden; }
#featured-works .column .thumb-link .thumb01 { background-image:url(../imgs/projects/thumb_ft01.jpg); height:121px; }
#featured-works .column .thumb-link .thumb02 { background-image:url(../imgs/projects/thumb_ft02.jpg); height:121px; }
#featured-works .column .thumb-link .thumb03 { background-image:url(../imgs/projects/thumb_ft03.jpg); height:211px; }
#featured-works .column .thumb-link .thumb04 { background-image:url(../imgs/projects/thumb_ft04.jpg); height:151px; }
#featured-works .column .thumb-link .thumb05 { background-image:url(../imgs/projects/thumb_ft09.jpg); height:151px; }
#featured-works .column .thumb-link .thumb06 { background-image:url(../imgs/projects/thumb_ft06.jpg); height:151px; }
#featured-works .column .thumb-link .thumb07 { background-image:url(../imgs/projects/thumb_ft07.jpg); height:216px; }
#featured-works .column .thumb-link .thumb08 { background-image:url(../imgs/projects/thumb_ft08.jpg); height:247px; }
#featured-works .column .thumb-link .thumb09 { background-image:url(../imgs/projects/thumb_ft09.jpg); height:155px; }
#featured-works .column .thumb-link .thumb10 { background-image:url(../imgs/projects/thumb_ft10.jpg); height:138px; }
#featured-works .column .thumb-link .thumb_coffeemate { background-image:url(../imgs/projects/thumb_ft_coffeemate.jpg); height:216px; }
#featured-works .column .thumb-link .thumb_cisco { background-image:url(../imgs/projects/thumb_ft_cisco.jpg); height:155px; }
#featured-works .column .thumb-link .thumb_intuit { background-image:url(../imgs/projects/thumb_ft_intuit.jpg); height:138px; }
#featured-works .column .thumb-link .thumb_cardinal_health { background-image:url(../imgs/projects/thumb_ft_cardinal_health_edgepark.jpg); height:160px; }
#featured-works .column .thumb-link .thumb_benjamin_moore { background-image:url(../imgs/projects/thumb_ft_benjamin_moore.jpg); height:247px; }
#featured-works .column .thumb-link .overlay { display:block; width:100%; height:100%; position:absolute; top:0; left:0; background:url(../imgs/transbg75.png) center center; background-size: cover; }
#featured-works .column .thumb-link .overlay .proj_title { 
	display:block; 
	position:absolute; 
	text-align:center; 
	top:0; left:0; bottom:0; right:0; margin:auto; 
	color:#fff; 
	font-size:18px;
	text-shadow: 0 15px 25px rgba(0,0,0,1),0 15px 25px rgba(0,0,0,.5),0 15px 5px rgba(0,0,0,.12);
}
#featured-works .column .thumb-link .overlay .proj_title .title.hidetext { white-space:normal; }

#featured-brands { opacity:0; }
#featured-brands .logos-wrapper { background:url(../imgs/slant-grid-bg.png) top left; border:1px solid #fff; border-left:none; border-right:none; padding:40px 0; text-align:center; }
#featured-brands .logos-wrapper .brand-icon { display:inline-block; vertical-align:middle; width:12%; margin-left:4%; top:30px; opacity:0; position:relative; }
#featured-brands .logos-wrapper .brand-icon:nth-of-type(1) { margin-left:0 !important; }
#featured-brands .logos-wrapper .brand-icon:nth-of-type(6) { margin-right:0 !important; }

#social-panel .panel50 { display:inline-block; width:47%; vertical-align:top; }
#social-panel .instagram-wrapper { margin-right:2%; }
.instagram-wrapper .instagram-imgbox { width:23.5%; margin-right:2%; display:inline-block; position:relative; }
.instagram-wrapper .instagram-imgbox:last-of-type { margin-right:0; }
.instagram-wrapper .instagram-image { width:100%; height:96px; display:block; position:relative; background-repeat:no-repeat; background-position:center center; background-size:100% auto; background-color:initial; overflow:hidden; background-size:cover;}
.instagram-wrapper .insta-overlay { background:rgba(0,0,0,.25); width:101%; height:101%; position:absolute; top:0; left:0; opacity:0; }
.instagram-wrapper .insta-overlay .view-promt { 
	color:#fff; 
	position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; 
	height:20px; 
	text-align:center; 
	text-shadow: 0 15px 25px rgba(0,0,0,1),0 15px 25px rgba(0,0,0,.5),0 15px 5px rgba(0,0,0,.12);
}

#social-panel .twitter-wrapper { margin-left:2%; }
#social-panel .twitter-wrapper .twitter-feed { background:#fff; margin-bottom:5px; overflow:hidden;padding:0 2%; height:96px; overflow-y:auto; }
#social-panel .twitter-wrapper .twitter-feed iframe { width:100% !important; padding:0; margin:0; }
#social-panel .twitter-wrapper  .twitter-follow-button { font-size:18px; }

#footer { display:table; margin:0 auto; width:auto !important; text-align:center; margin-bottom:100px; clear:both; }
#footer .icons-wrapper { padding-bottom:10px; }
#footer .footer-cp { border-top: 2px solid #666; padding:10px; margin:0; }
.icon-btn { display:inline-block; width:50px; height:50px; margin-left:14px; background-size:100%; background-repeat:no-repeat; background-position:top left; }
.icon-btn:first-of-type { margin-left:0; }
.icon-btn.email { background-image:url(../imgs/icon_email_normal.png); }
.icon-btn.instagram { background-image:url(../imgs/icon_insta_normal.png); }
.icon-btn.twitter { background-image:url(../imgs/icon_twitter_normal.png); }
.icon-btn.linkedin { background-image:url(../imgs/icon_linkedin_normal.png); }

.tilt-wrapper > * {
	transform: translate3d(0px, 0px, 0px);
	
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;

	-webkit-perspective-origin: 50% 50%;
	-moz-perspective-origin: 50% 50%;
	-ms-perspective-origin: 50% 50%;
	-o-perspective-origin: 50% 50%;
	perspective-origin: 50% 50%;

	-webkit-perspective: 1500px;
	-moz-perspective: 1500px;
	-ms-perspective: 1500px;
	-o-perspective: 1500px;
	perspective: 1500px;

	width:100%; height:100%;
}

.easecubic {
	-webkit-transition: all 1s cubic-bezier(0.25,1,0.25,1);
	-moz-transition: all 1s cubic-bezier(0.25,1,0.25,1);
	-ms-transition: all 1s cubic-bezier(0.25,1,0.25,1);
	-o-transition: all 1s cubic-bezier(0.25,1,0.25,1);
	transition: all 1s cubic-bezier(0.25,1,0.25,1);
}
.easelinear {
	-webkit-transition: all linear;
	-moz-transition: all linear;
	-ms-transition: all linear;
	-o-transition: all linear;
	transition: all linear;
}

#wrapper  { padding-bottom:80px; overflow:hidden; position:relative; }

.project-header {
	border-bottom: 1px solid #ddd;
	margin-bottom: .25em;
	margin-top: 1em;
	font-size: 2em;
	color: black;
}

.mobile .dash2 { opacity:.5; top:1580px; }

@media only screen and (max-width : 768px) {
	#header, #header.expanded { font-size:1em; right:0; }
	.header-wrapper { width:100%; }
	.jumpshoot-wrapper { width:70%; margin-top:2em; }
	.jumpshoot-wrapper > img { width:100%; }
	.jumpshoot-wrapper .bullet { top: 13%; left: 68%; }
	
	.logo-lockup { right: 0; left: 0 !important; margin: 0 auto; width: 75%; white-space:normal; }
	.logo-lockup .big-logo { width:75%; margin-left:25%; }
	.logo-lockup .name-block { 
		white-space:nowrap; 
		position: absolute;
		top: 20%;
		bottom:0;
		right: -5%;
		text-align: right;
		margin-top:auto; margin-bottom:auto;
	}
	
	#featured-works .column { width:49% !important; display:inline-block; float:none; margin-left:2%; }
	#featured-works .column:nth-of-type(4) { margin-left:0; }
	.more-link { display:block; position:static !important; text-align:left !important; }
	
	#featured-brands .logos-wrapper .brand-icon { width:25%; max-height:initial !important; margin: 0 3% 1.5em !important; }
	#featured-brands .logos-wrapper .brand-icon:nth-of-type(1) { margin-left:3% !important; }
	#featured-brands .logos-wrapper .brand-icon:nth-of-type(6) { margin-right:3% !important; }
	
}
@media only screen and (max-width : 640px) { 
	.logo-lockup .big-logo { width:100%; margin-left:0; }
	.logo-lockup .name-block { 
		display:block; 
		white-space:normal; 
		position: static;
		text-align: center;
	}
	
	#social-panel .panel50 { width:100%; display:block; }
	#social-panel .panel50:last-of-type { margin-left:0; margin-top:2em; }
	#social-panel .twitter-wrapper .twitter-feed { width:96% !important; height:auto;  }
	
	#featured-brands .logos-wrapper .brand-icon { width:35%; max-height:initial !important; margin: 0 7% 1.5em !important; }
	#featured-brands .logos-wrapper .brand-icon:nth-of-type(1) { margin-left:7% !important; }
	#featured-brands .logos-wrapper .brand-icon:nth-of-type(6) { margin-right:7% !important; }
	
	.content-panel h2 { font-size:2em; line-hieght:.8em; }
	.content-panel .more-link, #project .desc-panel .desc-wrap p { font-size:1em; }
}

@media only screen and (max-width : 360px) { 
	#header, #header.expanded { font-size:.88em; right:0; text-align:center; width:100%; padding:8px 0; } 
	#header.expanded { width:100%; text-align:center; } 
	#header .nav-logo { display:inline-block; width:0; }
	#header.expanded  .nav-logo { width:43px; }
	#header.expanded  .nav-logo .logo { margin-left:0; }
	#hero { min-height:575px; }
	
	
}