@import url(http://fonts.googleapis.com/css?family=Montserrat);

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}html,body{width:100%;height:100%;-webkit-font-smoothing:subpixel-antialiased;font-smoothing:subpixel-antialiased}

/* Defaults */

i {font-style: italic}
#projects, #videos, #flip-container {
-webkit-transition:-webkit-transform 300ms;-moz-transition:-moz-transform 300ms;-o-transition:-o-transform 300ms;transition:transform 300ms;-webkit-perspective: 1000;-moz-perspective: 1000;-ms-perspective: 1000;}

.about-hyph {
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto;
}


body.noscroll {
    position: fixed;
    overflow-y: scroll;
}

    
/* Main */

#projects, #videos, #video-zoom {
	position: relative;
	background-color:#000
}

#projects .project-item{
	position: relative;
	width: 50%;
	float: left;
	overflow: hidden;
	cursor: pointer;
}

#project-zoom, #video-zoom{
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	display: none;
}

#video-zoom{
	z-index: 1;
}

#project-zoom .project-closer{
	position: absolute;
	top: 20px;
	right: 25px;
	width: 24px;
	height: 24px;
	cursor: pointer;
	-webkit-opacity:0.35;
	-moz-opacity:0.35;
	-khtml-opacity: 0.35;
	opacity: 0.35;
	filter:alpha(opacity=35)
}

.light {background: url(../img/x-mark-24-white.png) no-repeat}
.dark {background: url(../img/x-mark-24.png) no-repeat}

.video-closer{
	position: fixed;
	top: 20px;
	left: 25px;
	width: 24px;
	height: 24px;
	background: url(../img/x-mark-24-white.png) no-repeat;
	cursor: pointer;
	-webkit-opacity:0.35;
	-moz-opacity:0.35;
	-khtml-opacity: 0.35;
	opacity: 0.35;
	filter:alpha(opacity=35);
	display: none;
	z-index: 5;
}

#controls #more-information-caller {
	position: fixed;
	bottom: 20px;
	right: 30px;
	width: 47px;
	height: 27px;
	cursor: pointer
}

#controls #more-information-container {
	position: relative;
	width: 98%;
	height: auto;
	padding: 30px 0 40px 50px;
	background: url(../img/footer-gradient.png) repeat-x;
	margin: 50px 0 0 0;
	display: none;
}

#more-information-container #footer-closer {
	position: absolute;
	top: 20px;
	right: 50px;
	width: 29px;
	height: 29px;
	background: url(../img/footer-closer.png) no-repeat;
	cursor: pointer;
}

#more-information-container #clip-caller {
	position: absolute;
	top: 20px;
	right: 88px;
	width: 29px;
	height: 29px;
	background: url(../img/clip-caller.png) no-repeat;
	cursor: pointer;
}

#more-information-container h1, #news-item h2, #more-information-container h2, #flip-container li, #filter-container span, .credits, .news-date, .press-note {
	font-family: 'Helvetica Neue', Helvetica, Arial !important;
	font-weight: 300;
	font-size: 21px;
	line-height: 1.2em;
	color: #fff;
	display: inline-block;
}

.credits, .press-note {
	font-size: 11px !important;
	letter-spacing: 1px;
	margin-top: 20px !important;
	margin-left: 3px !important;
	margin-bottom: -10px !important;
	color: #ccc !important;
}

#news-item .press-note {
	text-align: right;
	margin-top: 10px !important;
	line-height: 2.3em;
	vertical-align: top;
	display: block;
	text-transform: uppercase;
	color: #ddd !important;
}

.press-note a{ 
	vertical-align: top;
	border-bottom: 0 !important
}

#news-item .news-date {
	font-size: 11px !important;
	letter-spacing: 1px;
	margin-top: 0 !important;
	margin-bottom: 2px !important;
	margin-left: 42px !important;
	color: #ccc !important;
	display: block;
}

#flip-container li {
	font-weight: 100;
	text-transform: uppercase;
	font-style: italic;
	letter-spacing: 1px;
}

#filter-container span {
	font-weight: 100;
	font-style: italic;
	letter-spacing: 1px;
	margin: 0 1px;
	cursor: pointer;
}

#filter-container .sort-call {
	display: block;
	margin: 10px
}

#filter-container #sub-filter-container {
	margin: 14px 10px 12px 10px;
}

#sub-filter-container span{
	padding-bottom: 1px;
}

#filter-container .cities, #filter-container .others {
	margin-top: 14px;
	display: block;
	cursor: default !important;
}

#filter-container .divider {
	margin: 0 -3px 0 1px;
}

#filter-container .mobile-filter {
	margin-top: 18px !important;
	display: none;
}

#filter-container .hover:hover, #filter-container .active {
	padding-bottom: 0px;
	border-bottom: 1px solid #fff;
	font-weight: 300;
}

#more-information-container p, #flip-content-inner p, #news-item p {
	font-family: 'Montserrat', sans-serif;	
	font-size: 22px;
	line-height: 1.35em;
	color: #fff;
	display: inline-block;
	margin: 10px 110px 0 0;
	text-shadow: 1px 1px 1px #111;
	text-rendering: optimizelegibility;
}

#flip-content-inner p {
	margin: 0 20px 0 0;
	width: 566px;
}

#news-item p {
	margin: 10px 22px 0 0 !important;
	width: 566px;
	border-bottom: 1px dashed #aaa;
	padding-bottom: 14px;
}

#more-information-container p a, #flip-content-inner p a, #news-item p a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid #fff
}

#more-information-container h2, #news-item h2 {
	border-bottom: 1px solid #fff;
}

#news-item h2 {margin-left:42px}

#videos .video-item {
	position: relative;
	width: 25%;
	float: left;
	overflow: hidden
}

.project-item img, .project-item img{
	width: auto;
	float: left
}

.video-item .the-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.video-item .play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -45px 0 0 -70px;
	width: 140px;
	height: 90px;
	cursor: pointer;
	background: url(../img/video-play-btn-v.png) 38px 27px no-repeat;
}

#flip-container{
	position: fixed;
	top: 0;
	left: -635px;
	bottom: 0;
	width: 635px;
	background: #000;
	z-index: 10;
}

#lang-container{
	position: fixed;
	right: 15px;
	bottom: 15px;
	width: 84px;
	height: 40px;
	background: url(../img/lang-switch-bg.png);
	z-index: 2;
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
}

#filter-container{
	position: fixed;
	right: 15px;
	top: 18px;
	width: 290px;
	height: 48px;
	/*height: 524px;*/
	background: url(../img/filter-menu-bg.png) top left no-repeat;
	overflow: hidden;
	z-index: 2;
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
}

#lang-container span {
	font-family: 'Helvetica Neue', Helvetica, Arial !important;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.2em;
	color: #eee;
	display: inline-block;
	margin: 11px -10px 0 16px;
	letter-spacing: 1px;
	cursor: pointer;
}

#flip-content #about-img {
	position: absolute;
	top: -65px;
	left: 0;
	width: 100%;
	-webkit-opacity:0.45;
	-moz-opacity:0.45;
	-khtml-opacity: 0.45;
	opacity: 0.45;
	filter:alpha(opacity=45);
}

#about-img img {
	width: 100%;
}

#flip-container #flip-content{
	position: absolute;
	top: 65px;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 1;
}

#flip-content #flip-content-inner{
	position: relative;
	display: inline-block;
	height: 92%;
	margin: 10px 15px 0 35px;
	overflow: auto;
	z-index: 3;
  	-webkit-overflow-scrolling: touch;
	outline: none
}

#news-item{
	display: inline-block;
	margin: 2px 0 22px 0;
}

#scrollbar_track {  
    position:absolute;  
    top:0;  
    right:0;  
    height:100%;  
    width:10px;  
    background-color:transparent;  
    cursor:move;  
} 
 
#scrollbar_handle {  
    width:10px;  
    background-color:#5c92e7;  
    cursor:move;  
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px;  
	-webkit-opacity:0.9;
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
	filter:alpha(opacity=90);
} 
 
#scrollbar_content {  
    overflow:hidden;  
    width:485px;  
    height:250px;  
}  

#flip-container .flip-caller{
	position: absolute;
	top: 18px;
	right: -63px;
	width: 63px;
	height: 40px;
	cursor: pointer;
	background: url(../img/sub-flip-handler.png) top left no-repeat;	
}

#flip-container .flip-border-gradient{
	position: absolute;
	top: 0;
	right: -25px;
	width: 25px;
	bottom: 0;
	background: url(../img/flip-menu-border-gradient.png) top left no-repeat;
	display: none;
}

#flip-container ul {
	position: relative;
	display: inline-block;
	padding: 15px 0 20px 12%;
	width: 88.1%;
	z-index: 2;
	background:url(../img/flip-navi-background.png) top left repeat-x;
}

#flip-container ul li {
	display: inline-block;
	margin: 3px;
}

#flip-container ul li a {
	color: #fff;
	text-decoration: none;
}

#flip-container ul li a:hover, #flip-container ul li a.active {
	padding-bottom: 1px;
	border-bottom: 1px solid #fff;
}

#swipe-panel {position: absolute;top: 12%;left: 0;right: 0;bottom: 20%;z-index: 3}

#videos .loading-bar{
	width: 120px;
	height: 60px;
	position: relative;
	bottom: 72px;
	left: 50%;
	margin-left: -60px;
}

#videos {
	background: none;
}

/* Scroll pane */

.jspContainer
{
	position: relative;
	overflow: hidden;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width: 6px;
	height: 100%;
}

.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 6px;
}

.jspVerticalBar *,
.jspHorizontalBar *
{
	margin: 0;
	padding: 0;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	background: #111;
	position: relative;
	-webkit-opacity:0.35;
	-moz-opacity:0.35;
	-khtml-opacity: 0.35;
	opacity: 0.35;
	filter:alpha(opacity=35)
}

.jspDrag
{
	background: #eee;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}

.jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow
{
	height: 16px;
}

.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

* html .jspCorner
{
	margin: 0 -3px 0 0;
}

/* Resolutions */

@media screen and (max-width: 640px){
	#projects .project-item{width: 100%}
	#videos .video-item {width: 50%}
	#more-information-container #clip-caller {top: 15px;right: 60px}
	#more-information-container #footer-closer {top: 15px;right: 25px}
	#more-information-container h1, #news-item h2, #more-information-container h2, #more-information-container p, #flip-content-inner p, #news-item p {font-size: 13px}
	#news-item h2 {margin-left:0}
	#flip-content-inner {margin:10px 15px 0 25px !important}
	#flip-content-inner p, #news-item p {width:218px}
	#flip-container li,#filter-container span, #lang-container span {font-size:13px}
	#lang-container span {margin: 6px -9px 0 10px;}
	#flip-container #flip-content {top:45px}
	#flip-content #about-img{top:-45px}
	#flip-container ul {padding: 15px 0 0 23px;}
	#filter-container{height:36px; width: 180px}
	#lang-container{height:30px;width:65px;}
	#news-item .news-date {margin-left:0 !important}
	#more-information-container p {margin: 5px 30px 0 0}
	#controls #more-information-container {padding: 20px 0 30px 20px}
	#flip-container{-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);transform: translate3d(0,0,0);width: 263px;left: -263px}
	#flip-container .flip-caller{right: -57px;width: 57px;background: url(../img/sub-flip-handler-mobile.png) top left no-repeat}
}