/* ====================
    01. @TYPOGRAPHY / @GLOBAL
	02. @LANDING 
	02. @ABOUT
	03. @CROSSROADS 
	04. @FUTURE 
	05. @PROCESS
	06. @PEOPLE
	07. @CONTACT 
	08. @MEDIA QUERIES
	==================== */
	
html,
body { background: #f7f7f7; font-size: 1em; line-height: 1.4; letter-spacing: 0.025em; height: 100%; }
::-moz-selection { background: black; color: white; text-shadow: none; }
::selection { background: black; color: white; text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
img { vertical-align: middle; max-width: 100%; }

/* ====================
    @TYPOGRAPHY / @GLOBAL
	==================== */
@font-face { font-family: 'BrandonGrotesque-Black'; src: url('../fonts/BrandonGrotesque-Black.eot'); src: url('../fonts/BrandonGrotesque-Black.eot?#iefix') format('embedded-opentype'), url('../fonts/BrandonGrotesque-Black.woff') format('woff'), url('../fonts/BrandonGrotesque-Black.ttf') format('truetype'), url('../fonts/BrandonGrotesque-Black.svg') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'BrandonGrotesque-Medium'; src: url('../fonts/BrandonGrotesque-Medium.eot'); src: url('../fonts/BrandonGrotesque-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/BrandonGrotesque-Medium.woff') format('woff'), url('../fonts/BrandonGrotesque-Medium.ttf') format('truetype'), url('../fonts/BrandonGrotesque-Medium.svg') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'BrandonGrotesque-Regular'; src: url('../fonts/BrandonGrotesque-Regular.eot'); src: url('../fonts/BrandonGrotesque-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/BrandonGrotesque-Regular.woff') format('woff'), url('../fonts/BrandonGrotesque-Regular.ttf') format('truetype'), url('../fonts/BrandonGrotesque-Regular.svg') format('svg'); font-weight: normal; font-style: normal; }

body {
	font: 14px/24px 'Droid Sans', Helvetica Neue, Arial;
	-webkit-font-smoothing: antialiased;
}

#people, #people-list {display:none}

#container {width:100%;overflow:hidden}

#bg-process-wrapper, #bg-people-wrapper, #process-deco, #people-top-deco {
    position:absolute;
    width:100%;
}
#bg-process-wrapper, #people-top-deco {
    top: 0;
}
#process-deco {
    top: -300;
}

h1 {
	font-family: 'BrandonGrotesque-Black', Arial, sans-serif;
	font-size: 70px /*80px*/;
	line-height: 1em;
	font-weight: lighter;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

ul{ padding: 0; }

.col-wrapper h2 {
	font: lighter 26px/1.4em 'BrandonGrotesque-Regular', Helvetica Neue, Arial;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.txt-accent{
	border-top:1px solid black;
}
.wrapper, .large-wrapper {
	width: 93%;
	margin: 0 5%;
}
.header-container {
	background: white;
	position: fixed;
	top: -300px;
	width: 100%;
	z-index: 10;
}
#btnBack {
    position:fixed;
    bottom:-300px;
    right:20px;
    z-index:5;
}
#nav-logo {
	background: url(../images/navLogo.jpg) 0 0 no-repeat;
	height: 200px;
	width: 70px;
	margin: 0;
	position: absolute;
	top: 0;
}
nav {float:right}
nav ul {
	margin: 0;
	padding: 0;
}
nav ul li {
	float: left;
	margin-right: 30px;
}
nav ul li:last-child {
	margin-right: 0;
}
nav a {
	font: 13px/23px 'BrandonGrotesque-Medium', Helvetica Neue, Arial;
	color: #383838;
	display: block;
	padding: 17px 0;
	text-align: center;
	text-decoration: none;
}
nav a:hover {
	color: #666;
}
a, a:hover {
	-moz-transition: all .5s ease-in;
	-webkit-transition: all .5s ease-in;
	transition: all .5s ease-in;
}
.bold {
	font-family: 'BrandonGrotesque-Black';
	font-weight: lighter;
}
.inner-wrapper, .outer-wrapper,
#bg-about, #bg-crossroads, #bg-process, #bg-people{
	width: 100%;
}
#about, .relative {
	position: relative;
}
#future, #people, #contact{
	background: url(../images/bgDark.jpg) 0 0 repeat;
	color: white;
}
#bg-about {
    position:absolute;
}
.center{
	display: block;
	margin: 0 auto;
}

/* ==============
    @FOOTER
   ============== */

.footer-container {
	background: black;
}
.footer-container footer {
	color: white;
	padding: 20px 0;
}
footer h3 {
	font: 12px/22px 'BrandonGrotesque-Regular', Helvetica Neue, Arial;
	color: white;
	text-transform: uppercase;
}
.footer-container h3 span img {
	margin: 5px 10px 0 0;
	vertical-align: top;
}

/* ===============
    @LANDING SECTION
   =============== */

#landing {
	background: #0a0a0a;
	padding: 100px 0;
}
/*#landing img.logo {
    width: 90px;
}*/
#landing a img {
	margin-top: 50px;
}

/* ===============
    @ABOUT SECTION
   =============== */

#about {
    height: 1040px;
    background:black;
}

#about .inner-wrapper {
	position: absolute;
	z-index: 2;
}
#about .col-wrapper {
	width: 850px;
	margin: 300px auto;
}
#about .anim {
    position:absolute;
    top:0;
    left:0;
}
#about .col-one {
    position:relative;
	width: 260px;
	height: 180px;
	margin-right: 80px;
	float: left;
	text-align:right;
}
#about .col-one .anim {
	width: 260px;
}
#about .col-two {
    position:relative;
	color: white;
	width: 510px;
	height: 350px;
	float: left;
	margin-top: 80px;
}
#about .col-two .anim {
	width: 510px;
}
#about .col-one h1 {
	color: white;
	text-transform: uppercase;
	font-size: 88px;
	margin: 0 -30px 0 0;
}
.btn-play-vid {
    display:none;
	background: url(../images/btnPlayVideo.png) 0 0 no-repeat;
	width: 75px;
	height: 76px;
	margin-top: 20px;
	margin-right: -30px;
	float: right;
}
.btn-play-vid:hover {
	cursor: pointer;
	background-position: 0 -76px;
}
.btn-play-vid.ipad {display:none}
.btn-play-vid.ipad:hover {
	cursor: pointer;
	background-position: center -76px;
}

/* ===============
    @TATOU
   =============== */
#tatou {position:relative;width:100%;height:995px;background:#7a7a7a url(../images/bgTatou.png) no-repeat center top}
#tatou .copy {width:670px;margin:400px auto 0;color:#fff;font:14px/24px 'Droid Sans', Helvetica Neue, Arial;}
#tatou p {width:440px}

/* ===============
    @CROSSROADS
   =============== */

#crossroads {
	background: #f1f1f1;
}
#crossroads .col-wrapper {
	width: 730px;
	margin: 230px auto;
}
#crossroads p {
	padding: 0 10px 0 0;
}
#crossroads .col-one.min800, #crossroads .col-two.min800 {
    float:left;
    width:350px;
    margin-bottom:100px;
}
#crossroads .col-one.min800 {
    margin-right: 30px;
}
#crossroads .col-one.min800 h2 {
    padding: 0;
    margin-top: 110px;
}
.crossroads-lockup {
	position: relative;
	margin-bottom: 110px;
}
.crossroads-lockup img {
	min-width: 537px;
	position: absolute;
	top: -55px;
	left: -5px;
}
.min800 .crossroads-lockup img {
	left: -15px;
}

/* ===============
    @FUTURE SECTION
   =============== */
#future {
    overflow:hidden;
}
#future .col-wrapper {
	width: 1200px;
	height: 900px;
	margin: 125px auto;
}
#future .col-one, #future .col-two, #future .col-three, #future .col-four {
	float: left;
	position: relative;
}
#future .col-one .anim, #future .col-two .anim, #future .col-four .anim {
    top: 210px;
}
#future .col-one, #future .col-two, #future .col-one .anim, #future .col-two .anim {
	width: 220px;
	text-align: center;
	height: 100%;
}
#future .col-one {
	margin-right: 60px;
}
#future .col-two {
	margin-right: 50px;
}
#future .col-three {
	margin-right: 40px;
}
#future .col-three .anim, #future .col-four .anim, #future .col-three, #future .col-four {
	width: 300px;
	height: 100%;
}
#future h1.number {
	font-size: 60px;
}
#future h1.number img {
	margin: 15px auto;
}
#future .highlight {
	color: #4ec2c2 /*cyan*/;
}
#future .anim {
    position: absolute;
}

/* ===============
    @PROCESS
   =============== */
   
#bg-process-wrapper{
	position:relative;
	min-height:600px;
}
#bg-process{
	position: absolute;
    z-index: -1;
}
#process-deco{
	background:url(../images/decoFuture.png) 0 0 repeat-x transparent;
	height:345px;
}
#process {
	background:#f7f7f7;
	color:black;
}
#process .col-wrapper {
	width: 1310px;
	margin: 125px auto;
}
#process .col-one, #process .col-two, #process .col-three, #process .col-four {
	float: left;
	margin-left:30px;
}
#process .col-one {
	width:320px;
	margin-top:10px;
}
#process .col-three{
	margin-top:450px;
}
#process .col-four{
	margin-top:1335px;
}
#process .col-two, #process .col-three, #process .col-four {
	width:290px;
}
#process .highlight {
	color: #fcb242 /*yellow*/;
}
#process .col-two ul {
    margin-left:16px;
}
ul.process-icons{
	width:100%;
	padding:0;
}
ul.process-icons li{
	width:48%;
	margin:0 2% 2% 0;
	float:left;
	background: #eaeaea;
	color:black;
	list-style:none;
	height:110px;
}
ul.process-icons li	h3{
	text-align:center;
	font:normal lighter 12px/14px 'Droid Sans', Helvetica Neue, Arial;
	height:100px;
	position: relative;
	top:10%;
	margin:1em 1.2em;
}
.icon-right{
	margin-right:0 !important;
}
ul.process-icons li img{
	display:block;
	margin:0 auto;
	padding-bottom:10px;
}

/* ===============
    @PEOPLE
   =============== */
   
#bg-people-wrapper{
	position:relative;
	overflow:hidden;
}
#bg-people{
	position: absolute;
    z-index: -1;
    top: -35%;
}
#people-top-deco{
	background:url(../images/triangleLight.png) 0 0 repeat-x transparent;
	height:119px;
	/*position: relative;
    top: -180px;*/
}
#people-bottom-deco{
	background:url(../images/triangleDark.png) 0 0 repeat-x transparent;
	height:119px;
}
#people .col-wrapper {
	width: 100%;
}
#people .col-one, #people .col-two{
	width:50%;
	float:left;
}
.col-inner-wrapper{
	padding:20% 15% 5%;
}
#people .highlight {
	font-family: 'BrandonGrotesque-Medium';
	color: #bdcd37 /*lime*/;
}
#people .more {display:none}
#people .people-list { margin-top: -1em }
#people .people-list ul{ width: 100%; }
#people .people-list ul li{ float: left; display: block; width: 20%;}
#people .people-list ul li div{ width: 100%; position: relative; }
#people .people-list ul li div img{ width: 100%; }
#people .people-list ul li div span{ width: 100%; height: 100%; position: absolute; display: block; bottom: 0; left: 0; background: url("../images/overlay70.png"); margin: 0; padding: 0;}

#people .people-list ul li div h3{ position:absolute;font-family: "BrandonGrotesque-Black"; font-size: 30px; line-height: 30px; text-transform: uppercase; bottom:-21px; left:12px}

#people .people-list ul li div span.selected {display:block !important}

/* ===============
    @CONTACT
   =============== */
#contact .col-one {float:left;width:60%}

#contact .col-two {float:left;width:40%}

#contact #location-map{ width: 100%; min-height: 1050px; }

#contact .contact-details{ list-style: none; margin:0 0 1em -41px }

#contact .contact-details li { display: block; width: 100%; }

#contact .contact-details li img{ float: left; margin-right: 28px; }

#contact .contact-details li p .phone {font-size:22px;--webkit-font-smoothing:antialiased}

#contact .contact-details li a, footer a { color: #fff; }

#contact .col-inner-wrapper img {margin-top:1em}

#contact .col-inner-wrapper{ padding: 25% 25% 0 45%; }

#contact .contact-details li p {
    font-family: "BrandonGrotesque-Regular";
    font-size: 14px;
    line-height: 1.8em;
    bottom: 0;
    text-transform: uppercase;
    float: left; 
    display: block; 
    margin-top: 6px;
    margin-bottom: 0;
}

/* ====================
    @MEDIA QUERIES
	==================== */

/* default */
.min1330 {display:none}
.max1330 {display:block}
.max1240 {display:none}

@media only screen and (min-width: 901px) {
    .max800 {display:none}
    .min800 {display:block}
}
@media only screen and (min-width: 1330px) {
    .max800 {display:none}
    .min800 {display:block}
    .min1330 {display:block}
    .max1330 {display:none}
}

@media only screen and (max-width: 900px) {
    body {overflow-x:hidden}
    #about {background:#313131;height:1630px}
    #bg-about, #about .inner-wrapper {position:relative;overflow:hidden}
    #about .col-wrapper {margin-top:100px}
    #about .col-one {margin:0 30px}
    #about .col-two {width:400px;height:400px;margin-top:145px}
    #about .col-two .anim {width:400px}
    #about .col-one .btn-play-vid {display:none}
    #about .col-one h1 {line-height:0.85em;font-size:80px}
    .btn-play-vid.ipad {/*display:block;*/display:none;position:absolute;width:100%;background-position:center top;height:76px;top:260px}
    .col-wrapper h2 {font-size:26px;line-height:40px}
    #about .col-two p, #crossroads p, #future p, #process p, #people p, #contact p {font-size:14px;line-height:24px}
    #crossroads .col-wrapper {width: 350px}
    #crossroads .col-wrapper h2 {padding-left:20px}
    #tatou .copy {width:510px}
    #tatou p {width:480px}
    #process p {color:#333333}
    #crossroads .col-wrapper {position:relative;margin:230px 0 110px 20%;width:380px}
    #crossroads .crossroads-lockup {left:25px}
    #crossroads p {padding: 0 20px;}
    #future {height:1700px}
    #future .col-wrapper {position:relative}
    #future .col-one .anim,  .col-two .anim,  .col-three .anim,  .col-four .anim {top:0;width:100%}
    #future .col-one {position:absolute;left:80px;width:250px}
    #future .col-two {position:absolute;top:522px;left:80px}
    #future .col-three {position:absolute;left:386px}
    #future .col-four {position:absolute;top:402px;left:386px}
    #future h2 {margin:0 0 .83em 0}
    #process .col-one h1 {font-size:77px}
    #process-deco {background-image:url(../images/decoFuture768.png)}
    #bg-process-wrapper {min-height:512px}
    #process .col-one {margin-left:70px}
    .min800 {display:none}
    .max800 {display:block}
    #process li {background:#eaeaea}
    ul.process-icons li {margin:0 1% 1% 0;padding: 0 4%;width:40%}
    #process .col-two ul {margin-left:0}
    #process .col-one.max800 {margin-top:60px}
    #process .col-two.max800 {margin-top:70px}
    #process .col-one.max800 h2 {margin-bottom:0.3em}
    #people-top-deco {background-image:url(../images/decoPeople1.png)}
    #people-bottom-deco {background-image:url(../images/decoPeople2.png);height:57px}
    #people .col-one img {width:100%}
    #people .col-one {width:100%}
    #people .col-two {float:none;clear:left;margin-left:10%;width:80%}
    #people .col-two h1, #contact .col-one h1 {font-size:80px}
    #poople .col-inner-wrapper {padding:15% 15% 5%}
    #people .copy p:last-child {margin-bottom:6em}
    #people .people-list ul li div h3 {
        font-family: "BrandonGrotesque-Medium";
        font-size: 13px;
        line-height: 1em;
        bottom: 0;
    }
    #contact .col-inner-wrapper{padding:25% 22% 20% 20%}
}

@media only screen and (max-width: 1240px) {
    /* future to three columns */
    .max1240 {display:block}
    .min1330, .min1240 {display:none}
    #future div.col-four {display:none}
    #future .col-wrapper {width:900px}
}

/* ===============
    HELPER CLASSES
   =============== */
.ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; }
.ir:before { content: ""; display: block; width: 0; height: 150%; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden }
.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both }
.clearfix { *zoom: 1; clear: both; }
.float-l { float: left }
.float-r { float: right }

@media print {
	* { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
	a,
	a:visited { text-decoration: underline }
	a[href]:after { content: " (" attr(href) ")" }
	abbr[title]:after { content: " (" attr(title) ")" }
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after { content: "" }
	pre,
	blockquote { border: 1px solid #999; page-break-inside: avoid; }
	thead { display: table-header-group }
	tr,
	img { page-break-inside: avoid }
	img { max-width: 100% !important }
}

#ourwork{
	padding-top: 150px;
	padding-bottom: 150px;
	background: url(../images/bgDark.jpg) 0 0 repeat;
}

#ourwork h1 {
	color: #FFF;
}

#ourwork p{
	color:  #FFF;
	margin-bottom: 60px;
}

#ourwork .item{
	display: block;
}

#ourwork .item:hover{
	width: 100%;
	cursor: pointer;
}

#ourwork .item img{
	width: 100%;
	filter: grayscale(80%);
	transition: all .5s;
}

#ourwork .item:hover img{
	filter: grayscale(0%);
	transition: all .5s;
}

#ourwork .item:hover, #ourwork .item:active, #ourwork .item:focus{
	outline: none;
}


#ourwork .item label{
	color:  #FFF;
	width: 100%;
	display: block;
	margin-top: 20px;
	border-top: 1px solid #EEE;
	padding-top: 5px;
	font-size: 1.5em;
	transition: all .5s;
}

#ourwork .item:hover label{
	color:  #009faf;
	border-top: 1px solid #009faf;
}

#ourteam{
	padding-top: 150px;
	padding-bottom: 150px;
	background-color: #D8D8D8;
}

#ourteam img{
	width: 100%;
}

#ourteam .item label{
	color:  #000;
	width: 100%;
	display: block;
	margin-top: 20px;
	border-top: 1px solid #000;
	padding-top: 5px;
	font-size: 1.2em;
	transition: all .5s;
}

.work-detail{
	background: url(../images/bgDark.jpg) 0 0 repeat;
	padding-top: 80px;
	padding-bottom: 150px;
	min-height: 100vh;
}

.work-detail h1, .work-detail h2, .work-detail p{
	color: #FFF;
}

.work-detail h1{
	margin-bottom: 50px;
}

.work-detail h2{
	text-transform: uppercase;
}

.video-player {
    width: 100%;
    padding-bottom: 56.25%;
    position: relative;
    background-size: cover;
    margin-top: 30px;
    background-color: grey;
}

    .video-player iframe {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        height: 100%;
	}
	
	.work-detail .header-container{
		top: 0 !important;
	}

	nav a:active, nav a:hover, nav a:focus{
		border: none;
		outline: none;
	}