/*
  Wiel Arets Architects
  Copyright (C) 2012 by Systemantics, Bureau for Informatics

  Systemantics GmbH
  Alte Poststr. 38
  47877 Willich
  GERMANY

  Web:    www.systemantics.net
  Email:  hello@systemantics.net

  Permission granted to use the files associated with this
  website only on your webserver.

  Changes to these files are PROHIBITED due to license restrictions.
*/



/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
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: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Clearfix hack by http://nicolasgallagher.com/micro-clearfix-hack/ */

.cf:before,
.cf:after {
	content: "";
	display: table;
}

.cf:after {
	clear: both;
}

.cf {
	zoom: 1;
}

/* Styles */

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body,
input {
	font: normal 13px/17px "Apercu Medium", Calibri, sans-serif;
	font-size-adjust: 0.508;
}

em,
i {
	font-family: "Apercu Medium Italic", Calibri, sans-serif;
}

body,
a {
	color: #000;
}

body {
	background: #efeff0;
}

img {
	display: block;
}

h1,
h2,
h3,
th {
	font-weight: normal;
}

p {
	margin-bottom: 1em;
}

a {
	text-decoration: none;
}

a.mailto {
	text-decoration: none !important;
	border-bottom: none !important;
}

a.mailto:hover {
	color: #808080 !important;
}

#logo {
	font-size: 92px;
	left: 28px;
	letter-spacing: 5px;
	line-height: 89px;
	position: absolute;
	top: 0;
}

#logo a {
	background: url(../elements/logo.png) no-repeat;
	display: block;
	height: 65px;
	margin-top: 18px;
	text-indent: -9999px;
	width: 214px;
}

.content {
	margin: 0 0 0 28px;
	padding-top: 125px;
}

html body > * {
	visibility: hidden;
}

html.wf-active body > *,
html.wf-inactive body > * {
	visibility: visible;
}

.content a {
	border-bottom: 1px solid transparent;
	display: inline-block;
	padding-bottom: 1px;
}

.content a:hover,
.hover a {
	border-bottom-color: #000;
}

/* Navigation */

#menu {
	font-size: 21px;
	left: 291px;
	line-height: 16px;
	position: absolute;
	top: 16px;
	width: 730px;
}

#menu li {
	float: left;
}

#menu_media {
	width: 85px;
}

#menu_academia {
	width: 122px;
}

#menu_projects {
	width: 107px;
}

#menu_products {
	width: 114px;
}

#menu_archive {
	width: 98px;
}

#menu_biography {
	width: 122px;
}

#menu li a {
	border-bottom: 2px solid transparent;
	display: inline-block;
	padding-bottom: 6px;
}

#menu li a:hover,
#menu li.here a {
	border-bottom-color: #000;
}

.archive #menu li a:hover,
.archive #menu li.here a {
	border-bottom-color: #fff;
}

#submenu {
	left: 291px;
	line-height: 16px;
	position: absolute;
	top: 71px;
	width: 730px;
}

#submenu li {
	float: left;
	margin-right: 25px;
}

#submenu li a {
	border-bottom: 1px solid transparent;
	display: inline-block;
}

#submenu li a:hover,
#submenu li.here a {
	border-bottom-color: #000;
	padding-bottom: 1px;
}

.archive #submenu li a:hover,
.archive #submenu li.here a {
	border-bottom-color: #fff;
}

/* Home page */

body.has-video {
	height: 100%;
	overflow: hidden;
	width: 100%;
}

#welcome {
	opacity: 0;
}

#enter,
#enter a {
	color: #fff;
}

#enter {
	height: 180px;
	left: 50%;
	margin-left: -175px;
	margin-top: -90px;
	position: absolute;
	text-align: center;
	top: 50%;
	width: 350px;
	z-index: 1;
}

#enter-logo {
	background: url(../elements/logo_intro.png) no-repeat 0 33px;
	font-size: 155px;
	letter-spacing: 5px;
	line-height: 155px;
}

#enter-logo a {
	display: block;
	height: 155px;
	text-indent: -9999px;
	width: 350px;
}

/* News items */

.news {
	margin-bottom: 18px;
	width: 1034px;
}

.news.without-image {
	padding-left: 789px;
}

.news img {
	float: left;
	margin-right: 18px;
}

.news .date {
	margin-bottom: 4px;
}

.news h2 {
	font-size: 21px;
	line-height: 26px;
	margin-bottom: 8px;
}

.news h2 a {
	border-bottom-width: 2px;
	display: inline;
	padding-bottom: 0;
}

.news .text {
	float: left;
	width: 245px;
}

/* Publications */

.publication {
	float: left;
	margin-right: 18px;
	width: 508px;
}

.publication .caption {
	height: 41px;
	margin-top: 4px;
}

/* Publication details */

#publication .images {
	float: left;
	margin-right: 18px;
	width: 771px;
}

#publication .images img {
	margin-bottom: 18px;
}

#publication .text {
	float: left;
	margin-right: 18px;
	width: 245px;
}

#publication h1 {
	font-size: 21px;
	line-height: 26px;
	margin-bottom: 8px;
}

#publication .date {
	margin-bottom: 4px;
}

/* Videos */

.video {
	float: left;
	margin-right: 18px;
	width: 508px;
}

.video .caption {
	height: 41px;
	margin-top: 4px;
}

#video .images {
	float: left;
	margin-right: 18px;
	width: 771px;
}

#video .text {
	float: left;
	margin-right: 18px;
	width: 245px;
}

#video h1 {
	font-size: 21px;
	line-height: 26px;
	margin-bottom: 8px;
}

/* Press */

#press {
	font-size: 21px;
	line-height: 26px;
	width: 508px;
}

#press-name,
#press-password {
	float: left;
	margin-top: 1em;
	position: relative;
	width: 245px;
}

#press-name {
	margin-right: 18px;
}

#press-name-field,
#press-password-field {
	background: #000;
	border: 1px solid transparent;
	color: #fff;
	font-size: 21px;
	line-height: 26px;
}

#press-name-field:focus,
#press-password-field:focus {
	border: 1px solid #fff;
	outline: none;
}

#press-name label,
#press-password label {
	left: 1px;
	position: absolute;
	top: 5px;
}

#press button {
	visibility: hidden;
}

/* Press file list */

#press_list #path {
	font-size: 21px;
	line-height: 26px;
}

#press_list td.modified {
	width: 263px;
}

#press_list td.size {
	width: 132px;
}

#press_list td.type {
	width: 131px;
}

#press_list td.name {
	width: 469px;
}

#press_list tr .modified .download,
#press_list tr.hover .modified span {
	display: none;
}

#press_list tr.hover .modified .download {
	display: block;
}

/* Text page */

#text {
	font-size: 36px;
	line-height: 48px;
	width: 771px;
}

#text p {
	margin-bottom: 48px;
}

#text a {
	border-bottom-width: 3px;
}

/* Theory list */

.theory {
	font-size: 21px;
	line-height: 26px;
	width: 771px;
}

.theory h2 {
	font-size: 36px;
	line-height: 48px;
	margin-bottom: 8px;
}

.theory h2 a {
	border-bottom: 2px solid transparent;
}

.theory p {
	margin-bottom: 26px;
}

.theory .summary {
	margin-bottom: 20px;
}

/* Theory detail */

#theory {
	font-size: 21px;
	line-height: 26px;
	width: 771px;
}

#theory h1 {
	font-size: 36px;
	line-height: 48px;
	margin-bottom: 10px;
}

/* Research */

#research .column {
	float: left;
}

.research {
	margin: 0 18px 18px 0;
	width: 245px;
}

.research h2 {
	font-size: 21px;
	line-height: 26px;
	margin-bottom: 8px;
}

.research h2 a {
	border-bottom: 2px solid transparent;
}

/* Research details */

#research .images {
	left: 291px;
	right: 18px;
	position: absolute;
}

#research .images img {
	float: left;
	margin-bottom: 18px;
	margin-right: 18px;
}

#research .images .lb {
	clear: left;
}

#research .text {
	float: left;
	margin-right: 18px;
	width: 245px;
}

#research h1 {
	font-size: 21px;
	line-height: 28px;
	margin-bottom: 8px;
}

/* Projects */

.project {
	float: left;
	height: 290px;
	margin-right: 18px;
}

.project .image {
	background-repeat: no-repeat;
	cursor: pointer;
	height: 245px;
}

.project:hover .image,
.is-touch .project .image {
	background-position: 0 -245px;
}

.project .caption {
	display: none;
	height: 41px;
	margin-top: 4px;
}

.project:hover .caption,
.is-touch .project .caption {
	display: block;
}

/* Project details */

#project .images {
	left: 291px;
	position: absolute;
}

#project .images a {
	border-bottom: none;
}

#project .images img {
	float: left;
	margin: 0 18px 18px 0;
}

#project .text {
	float: left;
	margin-right: 18px;
	width: 245px;
}

#project h1 {
	font-size: 21px;
	line-height: 28px;
	margin: -8px 0 8px;
}

/* Zoomed image */

body.fullscreenimage {
	background: #000;
	overflow: hidden;
}

body.fullscreenimage #logo a {
	background-position: 0 -65px;
}

#image h1 {
	display: none;
}

#image {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

#arrow-left,
#arrow-right {
	background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
	bottom: 70px;
	position: absolute;
	top: 50px;
	width: 30%;
}

#arrow-left {
	cursor: url(../elements/arrow_left.cur), url(/elements/arrow_left.cur), default;
	left: 0;
}

#arrow-right {
	cursor: url(../elements/arrow_right.cur), url(/elements/arrow_right.cur), default;
	right: 0;
}

#image-container {
	left: 50%;
	position: absolute;
	top: 50%;
	width: 100%;
}

.button {
	position: absolute;
}

.button.right {
	right: 73px;
}

.button.left {
	left: 73px;
}

.button.middle {
	margin-top: -9px;
	top: 50%;
}

.button.top {
	top: 15px;
}

#button_close:hover {
	border-bottom: 2px solid #fff;
}

#button_prev,
#button_next {
	display: none !important;
	font-size: 42px;
	line-height: 42px;
}

#button_prev.visible,
#button_next.visible {
	display: block !important;
}

.button a {
	color: #fff;
}

/* Archive */

body.archive {
	background: #000;
}

body.archive #logo a {
	background-position: 0 -65px;
}

body.archive,
body.archive a {
	color: #fff;
}

.archive td,
.archive th {
	height: 38px;
	text-align: left;
	vertical-align: middle;
}

.archive td,
.archive td a {
	color: #95979a;
}

.archive tr.hover td,
.archive tr.hover td a,
.archive td a:hover {
	color: #fff;
}

.archive tr.clickable td {
	cursor: pointer;
}

.archive td {
	border-bottom: 1px solid #95979a;
}

#archive td.name,
#archive td.year,
#archive td.typology {
	width: 263px;
}

#archive td.location {
	width: 206px;
}

#archive.products td.typology {
	width: 469px;
}

/* Search */

#search td.name {
	width: 789px;
}

#search td.medium {
	width: 206px;
}

#search-q {
	background: #000;
	border: 1px solid transparent;
	color: #fff;
	padding: 0 1px;
	width: 241px;
}

#search-q:focus {
	border: 1px solid #fff;
	outline: none;
}

#search-form button {
	display: none;
}

#search-form label {
	margin-top: 4px;
	position: absolute;
}

/* Biography */

#biography {
	font-size: 36px;
	line-height: 48px;
	width: 995px;
}

#biography p {
	margin-bottom: 26px;
}

/* Awards */

#awards {
	font-size: 36px;
	line-height: 48px;
	width: 771px;
}

#awards h1 {
	display: none;
}

#awards .award {
	margin-bottom: 48px;
}

#awards .award p {
	margin-bottom: 0;
}

/* Collaborators */

#collaborators {
	font-size: 21px;
	line-height: 26px;
	width: 1052px;
}

#collaborators h1 {
	display: none;
}

#collaborators h2 span {
	border-bottom: 2px solid #000;
	display: inline-block;
	padding-bottom: 3px;
}

#collaborators .block {
	margin-bottom: 21px;
	width: 245px;
}

#collaborators .column {
	float: left;
	margin-right: 18px;
}

/* Contact page */

#contact {
	font-size: 50px;
	line-height: 64px;
	width: 995px;
}

#contact h1 {
	display: none;
}

#contact p {
	margin-bottom: 36px;
}

#contact a {
	border-bottom-width: 5px;
	height: 67px;
	display: inline-block;
	padding-bottom: 0;
}

/* Vacancies */

#vacancies {
	font-size: 21px;
	line-height: 26px;
	width: 771px;
}

#vacancies h1 {
	display: none;
}

.vacancy h1,
.vacancy h2 {
	margin-bottom: 1em;
}

.vacancy {
	margin-bottom: 2em;
}

/* Colophon */

#colophon {
	font-size: 21px;
	line-height: 26px;
	width: 771px;
}

#colophon h1 {
	display: none;
}

#colophon a {
	border-bottom-width: 2px;
	padding-bottom: 0;
}

.videoBG{
	position: fixed;
    z-index: -1;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    opacity: 1;
    overflow: hidden;
}

.videoBG__video{
	position: absolute;
    z-index: -1;
    top: 0;
    left: 0px;
    min-width: 0px;
    min-height: 0px;
    width: 100%;
    height: 100%;
}