@charset "utf-8";
/* CSS Document */

/*FONT SIZE KEY *?
/* Default font size is 16px on all browsers. 
To calculate the correct em size, divide desired size by 16. Result is correct em size.
Eg. 12px = 0.75em (because 12/16 = 0.75em)
*/



.clearfix {display: inline-block; display:block; overflow: hidden;}
.clear {clear:both}

a:link {color:#ffde00; border-bottom:dotted 1px #fff; text-decoration:none;} /* unvisited link */
a:visited {color:#E2BE59; border-bottom:dotted 1px #fff} /* visited link */
a:hover {color:#E2BE59; text-decoration: none;} /* mouse over link */
/*a:active {color:#ffde00; border-bottom:dotted 1px #fff;} clicked on link */

::selection	{ background:#ffde00; color:#000; /* Safari and Opera */ }
::-moz-selection  { background:#ffde00; color:#000; /* Firefox */ }


body {font-size:100%; height:100%;background:#212121; color:#fff; -webkit-font-smoothing: antialiased;}

p {font: 1.4em/1.6em Georgia,'Times New Roman', Times, serif; color:#e0e0e0;}
p span.ital {font-family: Helvetica, 'TeXGyrePagellaItalic', 'Times New Roman', Times, serif;}
p span.highlight {/*background:#ffde00; color:#000; padding:0 4px; margin-right:2px;*/ border-bottom:1px solid #ffde00}

.wrap {}
#header {}

#content {max-width:1547px; height:100%; margin: 0 auto; position:relative;}
#content-primary {}
#content-secondary {}


#menu-left {width:260px; height:100%; background:url(../images/bg-menu.png) repeat; position:absolute; left:0; top:0;z-index:899;}
ul#main-nav { color:#fff; position:absolute; top:0; left:50px; z-index:999; }
ul#main-nav {font: 0.875em/1.5 Helvetica, 'TeXGyrePagellaRegular', 'Times New Roman', Times, serif; letter-spacing:-0.01em;}
ul#main-nav li {padding:3px 0 0 2px;} /*new left menu lines*/
*html ul#main-nav {width:170px;} /*IE6 hack*/
ul#main-nav li.last {border-bottom:none;}
ul#main-nav li a {color:#fff; border:none;}
ul#main-nav li.ui-state-active {opacity:1!important; }
ul#main-nav li.ui-state-active a {color:#fff!important;}
ul#main-nav li.logo {font-size:4.3125em; letter-spacing:-0.08em; margin-top:25px; margin-bottom:30px; border:none; padding:0}
ul#main-nav li.logo img {width:140px;}
ul#main-nav li.top-menu-1 {text-transform:uppercase; font:35px 'VegurBold', Helvetica, sans-serif; letter-spacing:-0.07em; position:absolute; top:17px; left:556px; border:none; padding:0}
ul#main-nav li.top-menu-2 {text-transform:uppercase; font:35px 'VegurBold', Helvetica, sans-serif; letter-spacing:-0.07em; position:absolute; top:17px; left:818px;  color:#cccccc; border:none; padding:0}
ul#main-nav li.top-menu-3 {text-transform:uppercase; font:3.3846em 'VegurBold', Helvetica, sans-serif; letter-spacing:-0.07em; position:absolute; top:17px; left:981px;  color:#cccccc; border:none; padding:0}
*html ul#main-nav li.top-menu-1, *html ul#main-nav li.top-menu-2 {top:33px;}/*IE6 hack*/

ul#main-nav li.new {background:url(../images/new.gif) 0 7px no-repeat; padding-left:28px;}

/*Javascript Off header*/
#inner #header ul#main-nav li.logo {padding-left:207px;}


/*New TOP navigation styling*/

#top-nav {float:right; width: 500px; margin-right:90px;}

.about {z-index:999; font:43px 'VegurBold', Helvetica, sans-serif; letter-spacing:-0.07em; position:absolute; right:441px; top:17px}
.about a {color:#fff; padding-right:16px; border:none; text-decoration:none;}
#inner .about {right:441px}

.blog {z-index:999; font:43px 'VegurBold', Helvetica, sans-serif; letter-spacing:-0.07em; position:absolute; right:278px; top:17px}
.blog a {color:#fff; background:url(../images/new_win.png) right 3px no-repeat; padding-right:16px; border:none; text-decoration:none;}
#inner .blog {right:278px}

.contact {z-index:999; font:43px 'VegurBold', Helvetica, sans-serif; letter-spacing:-0.07em; position:absolute; right:110px; top:17px}
.contact a {color:#fff; padding-right:16px; border:none; text-decoration:none;}
#inner .contact {right:110px;}


@media (max-width: 1120px) {

.about {z-index:999; font:32px 'VegurBold', Helvetica, sans-serif; letter-spacing:-0.07em; position:absolute; right:8em; top:17px}
.about a {color:#fff; padding-right:16px; border:none; text-decoration:none;}
#inner .about {right:8em}

.blog {z-index:999; font:32px 'VegurBold', Helvetica, sans-serif; letter-spacing:-0.07em; position:absolute; right:5.1em; top:17px}
.blog a {color:#fff; background:url(../images/new_win.png) right 3px no-repeat; padding-right:16px; border:none; text-decoration:none;}
#inner .blog {right:5.1em}

.contact {z-index:999; font:32px 'VegurBold', Helvetica, sans-serif; letter-spacing:-0.07em; position:absolute; right:1em; top:17px}
.contact a {color:#fff; padding-right:16px; border:none; text-decoration:none;}
#inner .contact {right:1em;}

}



/*INNER PAGES*/
#main-content {width:80%; background:#212121; padding: 130px 5% 0 270px/*260px before left menu lines added*/; display:inline-block; display:block; overflow:hidden; font-size:100%;}
#main-content h1 {font:68px/1.2 'VegurBold', Helvetica, sans-serif; text-transform:uppercase; margin:-2px 0 10px;}
#main-content h3.visit {float:right; font: bold 0.8125em/1.4 Helvetica,'TeXGyrePagellaRegular', 'Times New Roman', Times, serif; margin:10px 90px 0 0}
#The_Human_Experience_Film #main-content h3.visit {background:url("../images/apple.png") no-repeat scroll 0 0 transparent; height:24px; padding:6px 0 0 26px;}
#main-content h3.appstore {width:100px; height:52px; background:url("../images/appstore.png") no-repeat scroll 0 0 transparent; text-indent:-9999px; margin-top:0}
#main-content h3.windowsmarketplace {width:182px; height:35px; background:url("../images/windowsmarketplace.png") no-repeat scroll 0 0 transparent; text-indent:-9999px; margin-top:0}


#main-content .desc {display:inline-block; display:block; overflow:hidden; margin-bottom:40px;}
#main-content .desc .col-1 {float:left; max-width:60%;}
#main-content .desc .col-2 {float:right; width:195px; text-align:right; margin-right:90px; padding-left:5%;}
#main-content .desc .col-2 p {font: 1em/1.6em Helvetica;}
#main-content .desc p span {color:#fff; font-style:italic;}
#main-content .desc p em {font-style:italic;}
/*#main-content .desc p a{color:#ffde00; border-bottom:dotted 1px #fff}
#main-content .desc p a:hover {color:#E2BE59}*/
#main-content .work p.caption {font-size:12px; font-style:italic; color:#c4c4c4; margin:-15px 0 20px}
#main-content .desc p.big {font:bold 18px/1.55 helvetica,'TeXGyrePagellaRegular', 'Times New Roman', Times, serif; color:#fff;}

#about #main-content .desc p, #About #main-content .desc p {margin-bottom:15px;}
#about #main-content .desc .col-1, #About #main-content .desc .col-1 {float:left; width:440px;}
#about #main-content .desc .col-2, #About #main-content .desc .col-2 {float:right; width:255px; text-align:left;}
#about #main-content .desc .col-2 p, #About #main-content .desc .col-2 p {margin-bottom:10px; font-size:11px;}
#about #main-content .desc .col-2 p span, #About #main-content .desc .col-2 p span {font-style:italic; font-weight:bold;}

.ui-tabs-panel {z-index:2;}

#footer {width:732px; padding:0 0 10px 260px;}
#footer p {font: 8px verdana; text-transform:uppercase; color:#333;}


#main-content .work img {margin-bottom:20px; width:85%;}
#main-content .work img.border {border: 1px solid #444;}
#The_Human_Experience #main-content .work img, #the #main-content .work img {border: 1px solid #444;}



/*Social*/
.social {width:300px;}
.social a {float:left; margin-top:20px; text-indent:-9000px; cursor:pointer; border:none;}
.social a.linkedin {background:url("../images/social-logos.png") no-repeat scroll 0 0 transparent; height:34px; width:130px;}
.social a.linkedin:hover {background-position:0 -34px;}
.social a.twitter {background:url("../images/social-logos.png") no-repeat scroll -161px 0 transparent; height:34px; width:130px; margin-left:27px;}
.social a.twitter:hover {background-position:-161px -34px;}
.social a.googleplus {background:url("../images/social-logos.png") no-repeat scroll -326px 0 transparent; height:43px; width:133px;}
.social a.googleplus:hover {background-position:-326px -43px;}
.social a.behance {background:url("../images/social-logos.png") no-repeat scroll -490px 0 transparent; height:23px; width:109px; margin-left:24px;}
.social a.behance:hover {background-position:-490px -23px;}


/*Slideshow*/
#imac {width:799px; height:676px; background:url("../images/imac.jpg") no-repeat scroll 0 0 transparent; position:relative;}
#imac #slideshow{position:absolute; left:34px; top:34px; width:729px; margin-bottom:10px;}
#imac #slideshow #slideshow-nav { z-index: 50; position:absolute; left: 345px; bottom:-75px}
#imac #slideshow #slideshow-nav a {float:left; width:9px; height:0px; padding-top:9px; background:url("../images/dot.png") no-repeat scroll 0 0 transparent;display:block; overflow:hidden; margin-right:7px; border:none;}
#imac #slideshow #slideshow-nav a.activeSlide {background-position:0 -9px;}


@media (max-width: 936px) {
	#tabs {display: flex!important; flex-direction: column;}
	ul#main-nav {order:2; position:relative;}
	.ui-tabs-panel {order:1;}
	#main-content {width:100%; padding:130px 5% 0 5%;}

}



/*FONTS*/


@font-face {
	font-family: 'TeXGyrePagellaRegular';
	src: url('../fonts/texgyrepagella-regular.eot');
	src: local('../fonts/TeX Gyre Pagella'), local('../fonts/TeXGyrePagella-Regular'), url('../fonts/texgyrepagella-regular.woff') format('woff'), url('../fonts/texgyrepagella-regular.ttf') 	format('truetype'), url('../fonts/texgyrepagella-regular.svg#TeXGyrePagella-Regular') format('svg');
}

@font-face {
	font-family: 'TeXGyrePagellaItalic';
	src: url('../fonts/texgyrepagella-italic.eot');
	src: local('../fonts/TeX Gyre Pagella'), local('../fonts/TeXGyrePagella-Italic'), url('../fonts/texgyrepagella-italic.woff') format('woff'), url('../fonts/texgyrepagella-italic.ttf') format('truetype'), url('../fonts/texgyrepagella-italic.svg#TeXGyrePagella-Italic') format('svg');
}

@font-face {
	font-family: 'TeXGyrePagellaBold';
	src: url('../fonts/texgyrepagella-bold.eot');
	src: local('../fonts/TeX Gyre Pagella'), local('../fonts/TeXGyrePagella-Bold'), url('../fonts/texgyrepagella-bold.woff') format('woff'), url('../fonts/texgyrepagella-bold.ttf') format('truetype'), url('../fonts/texgyrepagella-bold.svg#TeXGyrePagella-Bold') format('svg');
}

@font-face {
	font-family: 'TeXGyrePagellaBoldItalic';
	src: url('../fonts/texgyrepagella-bolditalic.eot');
	src: local('../fonts/TeX Gyre Pagella'), local('../fonts/TeXGyrePagella-BoldItalic'), url('../fonts/texgyrepagella-bolditalic.woff') format('woff'), url('../fonts/texgyrepagella-bolditalic.ttf') format('truetype'), url('vtexgyrepagella-bolditalic.svg#TeXGyrePagella-BoldItalic') format('svg');
}

@font-face {
	font-family: 'VegurExtraLight';
	src: url('../fonts/Vegur-EL_0500.eot');
	src: local('../fonts/Vegur'), local('../fonts/Vegur-ExtraLight'), url('../fonts/Vegur-EL_0500.woff') format('woff'), url('../fonts/Vegur-EL_0500.ttf') format('truetype'), url('../fonts/Vegur-EL_0500.svg#Vegur-ExtraLight') format('svg');
}

@font-face {
	font-family: 'VegurRegular';
	src: url('../fonts/Vegur-R_0500.eot');
	src: local('../fonts/Vegur'), local('../fonts/Vegur-Regular'), url('../fonts/Vegur-R_0500.woff') format('woff'), url('../fonts/Vegur-R_0500.ttf') format('truetype'), url('../fonts/Vegur-R_0500.svg#Vegur-Regular') format('svg');
}

@font-face {
	font-family: 'VegurBold';
	src: url('../fonts/Vegur-B_0500.eot');
	src: local('../fonts/Vegur'), local('../fonts/Vegur-Bold'), url('../fonts/Vegur-B_0500.woff') format('woff'), url('../fonts/Vegur-B_0500.ttf') format('truetype'), url('../fonts/Vegur-B_0500.svg#Vegur-Bold') format('svg');
}