/* basic settings */

body{
	background:#fff;
	color:#000;
	font-size:1em;
	font-family: 'Times New Roman', serif;
	line-height:1.3;
	vertical-align:baseline;
}


/* reset */

menu,dl,ul,ol,nav{
	margin:0em;
	padding:0em;
}
li{
	margin:0em;
	padding:0em;
	list-style-type:none;
	clear:both;
}

/* images */

img{
	/*margin:0em;*/
	padding:0em;
	width:100%;
	display:inline-block;
}


/* typography */

#contact,#navigation,h1,h2,h3,p,dl,span.title,form{
	font-size:1em;
	margin:0em;
	padding:0em;
	font-weight:normal;
}
h1,h2{
	font-weight:bold;
}
h2{
	margin-top:1em;
}
h3{
	margin-top:0.5em;
}
article p{
	max-width:36em;
	margin-top:0.5em;
}
article h3 + p{
	margin-top:0em;
}
#masthead{	
	font-family:'HelveticaNeueW02-XBlkCn 739235';
	text-decoration:none;
	font-size:2em;
	letter-spacing:-1px;
	line-height:normal;
}

/* layout */

.block{;
	margin:0.625em;
}
#masthead{
	display:block;
	width:100%;
	text-align:center;
}
#tools{
	clear:both;
	overflow:hidden;
}

#contact{
	float:left;
	display:inline-block;
	width:60%;
}
#phone{
	display:block;
}
#email{
	display:inline-block;
}
#navigation{
	float:right;
	width:36%;
}
#footer{
	width:auto;
	text-align:center;
}


/* links */

a{
	color:#000;
	text-decoration:none;
}
a:hover{
	text-decoration:none;
}
#masthead{
	color:#000;
	background:#fff;
}
#masthead:hover{
	text-decoration:none;
}
header aside a,header nav a{
	border-bottom:none;
	color:#000;
	background:#fff;
	display:inline-block;
	padding:0em 0.2em;
}
header aside a:hover,header nav a:hover{
	border-bottom:none;
	background:#000;
	color:#fff;
}


/* teaser */

ul.teaser{
	overflow:hidden;
	margin-bottom:0.625em;
}
ul.teaser li{
	clear:none;
	float:left;	
	height:12em;
	overflow:hidden;
}
ul.teaser-1 li:nth-child(1),ul.teaser-1 li:nth-child(5){
	background-position:top center;
}
ul.teaser li:nth-child(n+4){
	margin-bottom:0.5em;
}
ul.teaser-orig li:nth-child(n+6){
	display:none;
}
ul.teaser li img{
	visibility:hidden;
}
ul.teaser li a,ul.teaser li.news span{
	display:block;
	width:100%;
	height:100%;
}
/* project */
ul.teaser li.project a{
	position:relative;
}
/* transparent box */
ul.teaser li.project a div.box{
	background: none repeat scroll 0 0 #000;
	left: 0;
	top:0px;
	width:100%;
	height:100%;
	position: absolute;
    opacity:0;
}
ul.teaser li.project a:hover div.box{
	opacity:0.5;
}
/* video */
ul.teaser li.video a{
	background-position:center center;
	background-image:url(../assets/play.png);
	background-repeat:no-repeat;
}
/* news */
ul.teaser li.news{
	display:block;
	margin:0.5em 0em;
	height:auto;
	width:100%;
}
ul.teaser li.news .hot{
	width:auto;
	color:#fff;
	background:#000;
	display:block;
	padding:0.5em;
}
ul.teaser li.news p:before{
	content:"News: ";
	font-family:'HelveticaNeueW01-77BdCn 692722','Helvetiva';
	letter-spacing:1px;
}

/* layouts */
ul.teaser li a{
	background-size: cover;
	background-position:center center;
}





/* layout 1 */

ul.teaser-1 li:nth-child(1){
	width:32%;	
}
ul.teaser-1 li:nth-child(2){
	width:68%;	
}
/* 2013 */
/*
ul.teaser-1 li:nth-child(4){
	width:64%;	
}
ul.teaser-1 li:nth-child(5){
	width:36%;
}
ul.teaser-1 li:nth-child(1) a,ul.teaser-1 li:nth-child(4) a{
	margin-right:0.5em;
	width:auto;
}
ul.teaser-1 li:nth-child(1) a div.box,ul.teaser-1 li:nth-child(4) a div.box{
    width:auto;
    right:0em;
}
*/
ul.teaser-1 li:nth-child(2) a,ul.teaser-1 li:nth-child(5) a{
	background-position:top center;
}
/* 2015 */
ul.teaser-1 li:nth-child(4n+4),ul.teaser-1 li:nth-child(4n+7){
	width:64%;
}
ul.teaser-1 li:nth-child(4n+5),ul.teaser-1 li:nth-child(4n+6){
	width:36%;
}
ul.teaser-1 li:nth-child(2) a,ul.teaser-1 li:nth-child(5) a{
	background-position:top center;
}
ul.teaser-1 li:nth-child(1) a,ul.teaser-1 li:nth-child(4n+4) a,ul.teaser-1 li:nth-child(4n+6) a{
	margin-right:0.5em;
	width:auto;
}
ul.teaser-1 li:nth-child(1) a div.box,ul.teaser-1 li:nth-child(4n+4) a div.box,ul.teaser-1 li:nth-child(4n+6) a div.box{
    width:auto;
    right:0em;
}


/* layout 2 */

ul.teaser-2 li:nth-child(1){
	width:36%;	
	float:right;
}
ul.teaser-2 li:nth-child(2){
	width:64%;	
}
ul.teaser-2 li:nth-child(1) a,ul.teaser-2 li:nth-child(5) a{
	background-position:top center;
}
/* 2013 */
/*
ul.teaser-2 li:nth-child(4){
	float:right;
	width:68%;	
}
ul.teaser-2 li:nth-child(5){
	width:32%;
}
ul.teaser-2 li:nth-child(2) a,ul.teaser-2 li:nth-child(5) a{
	margin-right:0.5em;
	width:auto;
}
ul.teaser-2 li:nth-child(1) a div.box,ul.teaser-2 li:nth-child(4) a div.box{
    left:0em;
}
*/

/* 2015 */
ul.teaser-2 li:nth-child(n+4){
	float:right;
}
ul.teaser-2 li:nth-child(4n+4),ul.teaser-2 li:nth-child(4n+7){
	width:64%;
}
ul.teaser-2 li:nth-child(4n+5),ul.teaser-2 li:nth-child(4n+6){
	width:36%;
}
ul.teaser-2 li:nth-child(2) a,ul.teaser-2 li:nth-child(4n+5) a,ul.teaser-2 li:nth-child(4n+7) a{
	margin-right:0.5em;
	width:auto;
}
/*
ul.teaser-2 li:nth-child(2) a div.box,ul.teaser-2 li:nth-child(4n+5) a div.box,ul.teaser-2 li:nth-child(4n+7) a div.box{
    left:0em;
}
*/





/* overview */
ul.overview li.project a{
	background-position:top center;
}
ul.overview li.video a{
	background-position:center center;
}
ul.overview li.landscape{
	width:64%;
}
ul.overview li.portrait{
	width:36%;
}
ul.overview li.neutral{
	width:50%;
	/*height:10em;*/
}
ul.overview li.widescreen{
	width:100%;
}

/*
ul.overview-1 li:nth-child(1){
	width:32%;	
}
ul.overview-1 li:nth-child(2){
	width:68%;	
}
*/
ul.overview li.spacer a{
	margin-right:0.5em;
	width:auto;
}
ul.overview li.spacer-right a{
	margin-right:0.25em;
}
ul.overview li.spacer-left a{
	margin-left:0.25em;
}
ul.overview li a{
	width:auto;
}
ul.overview li a div.box{
    width:auto;
   /* right:0em;*/
}


ul.overview-2 li:nth-child(1),ul.overview-2 li:nth-child(n+4){
	float:right;
}



ul.overview li.elastic{
	position: relative;
	padding-bottom: 55%;
	height: 0 !important;
	overflow: hidden;
}
ul.overview li.elastic a{
	position:absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
ul.overview li.spacer-right-xxx a{
	/* Firefox */
	width: -moz-calc(100% - 0.5em);
	/* WebKit */
	width: -webkit-calc(100% - 0.5em);
	/* Opera */
	width: -o-calc(100% - 0.5em);
	width: calc(100% - 0.5em);
	max-width:100%;
}

/* project */

/* gallery */
ul.gallery{
	text-align:center;
}
ul.gallery li{
	margin:1em auto;
	margin-top:0.625em;
	margin-bottom:0.625em;
}
ul.gallery img{
	display:block;
}
ul.gallery li:first-child{
	margin-top:0em;
}
ul.gallery li:first-child dl{
	display:block;
}
ul.gallery li div.box div{
	display:none;
}
/* mobile version */
body.mobile ul.gallery li{
	display:none;
}
body.mobile ul.gallery li:first-child{
	display:block;
	cursor:pointer;
}
body.mobile ul.gallery li div.box div.info{
	display:none;
}
body.mobile ul.gallery li:first-child div.box div.info{
	display:block;
}
/* info */
.info{
	position:relative;
}
.caption{
	display:block;
	color:#000;
	text-align:center;
	width:100%;
	padding-top:0.5em;
}


/* elastic */

.elastic-video {
    position: relative;
    padding-bottom: 55%;
    padding-top: 15px;
    height: 0;
    overflow: hidden;
}
.elastic-video video, .elastic-video embed{
    position: static;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width:100%;
}


/* pager */

#pager{
	margin:0.625em;
	padding:0em;
	display:block;
	overflow:hidden;
	opacity:0;
}
body.mobile #pager{
	opacity:1;
}
body:hover #pager{
	opacity:1;
}
#pager .btn{
	font-family:Arial,Helvetica,sans-serif;
	padding:0.25em 0em;
	text-align:center;
	width:50%;
	margin:0em;
	display:block;
	float:left;
}
#pager .previous:before{
	content:"⟨";
}
#pager .next:before{
	content:"⟩";
}
#pager a.btn{
	color:#fff;
	background:#000;
}
#pager a.btn:hover{
	background:#fff;
	color:#000;
	text-decoration:none;
}

body.mobile #pager .previous:before{
	content:"‹";
}
body.mobile #pager .next:before{
	content:"›";
}



/* swipe */

body.busy #overlay{
    position:fixed;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    background-color:rgba(0,0,0,0.5);
    z-index:110;
    background-image:url(../assets/ajax-loader.gif);
    background-position:center center;
    background-repeat:no-repeat;
}
body.busy-mobile #overlay{
    background-image:url(../assets/m-ajax-loader.gif);
}

/* transitions */

header aside a,header nav a,#pager a.btn,ul.teaser li.news a{
	-webkit-transition: color 0.5s ease-out;
	-moz-transition: color 0.5s ease-out;
	-o-transition: color 0.5s ease-out;
	transition: color 0.5s ease-out;
	-webkit-transition: background-color 0.5s ease-out;
	-moz-transition: background-color 0.5s ease-out;
	-o-transition: background-color 0.5s ease-out;
	-transition: background-color 0.5s ease-out;
}
ul.teaser li.project a div.box{
	-webkit-transition: opacity 0.5s ease-out;
	-moz-transition: opacity 0.5s ease-out;
	-o-transition: opacity 0.5s ease-out;
	transition: opacity 0.5s ease-out;
}