/* RAAAF Copyright (C) 2013 by Systemantics, Bureau for Informatics
 Systemantics GmbH Bleichstr. 11 41747 Viersen 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%; font: inherit; 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/ */
@font-face { font-family: 'AkkuratRegular'; src: url("../webfonts/lineto-akkurat-regular.eot"); src: url("../webfonts/lineto-akkurat-regular.eot?#iefix") format("embedded-opentype"), url("../webfonts/lineto-akkurat-regular.woff") format("woff"), url("../webfonts/lineto-akkurat-regular.ttf") format("truetype"), url("../webfonts/lineto-akkurat-regular.svg#AkkuratRegular") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'AkkuratBold'; src: url("../webfonts/lineto-akkurat-bold.eot"); src: url("../webfonts/lineto-akkurat-bold.eot?#iefix") format("embedded-opentype"), url("../webfonts/lineto-akkurat-bold.woff") format("woff"), url("../webfonts/lineto-akkurat-bold.ttf") format("truetype"), url("../webfonts/lineto-akkurat-bold.svg#AkkuratBold") format("svg"); font-weight: normal; font-style: normal; }
body { font-family: "AkkuratRegular",Arial,Helvetica,sans-serif; font-size: 11px; line-height: 15px; margin: 0px 0px 24px 0px; padding: 0px; color: #000000; background-color: #ffffff; overflow-y: scroll; }

img { border: 0; }

a { text-decoration: none; }

a:link, a:active, a:visited { color: #000000; }

a:hover, a.here { color: #999999; }

p { text-align: left; margin-top: 0px; }

h1, h2, h3, h4 { color: #000000; margin: 0px 0px 0px 0px; }

h1 { font-size: 24px; line-height: 30px; }

ul { list-style: none; margin-left: 0px; padding-left: 0px; }

b, strong { font-family: "AkkuratBold",Arial,Helvetica,sans-serif; font-size: 11px; line-height: 15px; }

.noline { text-decoration: none; }

a.zoomin { cursor: -moz-zoom-in; }

a.zoomout { cursor: -moz-zoom-out; }

div.nav a:link, div.nav a:active, div.nav a:visited { text-decoration: none; }

div.nav { zoom: 1; background-color: #ffffff; color: #000000; margin: 18px auto 22px; position: relative; text-align: center; width: 840px; }
div.nav:before, div.nav:after { content: ""; display: table; }
div.nav:after { clear: both; }

div.nav_a { font-size: 15px; line-height: 23px; width: 840px; text-align: left; white-space: nowrap; }

div.nav_b { width: 840px; margin: 14px 0px 0px 0px; text-align: left; }
div.nav_b a { white-space: nowrap; }

div.nav_c { font-family: "AkkuratBold",Arial,Helvetica,sans-serif; font-size: 18px; line-height: 22px; text-transform: uppercase; float: right; text-align: left; }

#logo { display: inline-block; }
#logo img { display: block; float: left; height: 17px; margin-right: 9px; }

div.publicity { zoom: 1; margin: 0 auto; width: 850px; }
div.publicity:before, div.publicity:after { content: ""; display: table; }
div.publicity:after { clear: both; }
div.publicity img { float: left; margin: 0px 38px 12px 0; }
div.publicity img.first { margin-left: 6px; }
div.publicity img.last { margin-right: 0; }

div.txtpage { clear: both; margin: 0 auto; text-align: left; width: 840px; position: relative; }
div.txtpage:after { content: ""; clear: both; display: block; }

.page { text-align: center; }

.col { float: left; text-align: left; vertical-align: top; padding: 0px; }
.col.img { padding: 3px 0px 50px 0px; width: 250px; }
.col.img.video-img { padding-bottom: 10px; }
.col.txt { padding: 0px 100px 50px 25px; width: 465px; }
.col.txt.video-txt { padding-left: 0px; }

.newsitem, .projects-row { clear: left; }

.rood { color: #ff0000; }

.project { float: left; padding: 3px 0px 50px 0px; width: 280px; }

.project-image-link { background-position: center; background-repeat: no-repeat; background-size: contain; display: block; height: 216px; overflow: hidden; width: 250px; }

.project-title { font-size: 13px; line-height: 17px; text-align: center; width: 250px; }

.project-subtitle { text-align: center; width: 250px; }

.img-pan-container, .img-pan-container img { -webkit-box-sizing: border-box; box-sizing: border-box; }

.img-pan-container { position: relative; overflow: hidden; cursor: crosshair; height: 100%; width: 100%; }

.img-pan-container img { -webkit-transform: translateZ(0); transform: translateZ(0); position: absolute; top: 0; left: 0; }

.image-wrapper { position: relative; width: 100vw; height: calc(100vh - 173px); margin: 0 auto; }
.image-wrapper img { height: 100%; width: auto; opacity: 0; -webkit-transition: opacity .6s linear .85s; transition: opacity .6s linear .85s; padding-left: 100px; padding-right: 100px; }

.image-wrapper img.loaded { opacity: 1; }

.panning-image-loaded #spinner { opacity: 0; visibility: hidden; }

.project-navi { background-color: #fff; position: fixed; bottom: 0; left: 0; right: 0; width: 840px; padding: 10px 0 25px; margin: 0 auto; z-index: 1; }

.image-container { position: relative; margin: 0 auto; }

.arrow { font-size: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; top: 50%; }

.arrow--prev { left: -28px; }

.arrow--next { right: -28px; }

#spinner { border-top: 5px solid #000; border-right: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #000; border-radius: 1000px; height: 40px; left: 50%; margin-left: -20px; margin-top: -20px; position: absolute; top: 50%; width: 40px; z-index: 1; -webkit-transition: opacity 500ms ease, visibility 500ms ease; transition: opacity 500ms ease, visibility 500ms ease; -webkit-animation: spin .6s infinite linear; animation: spin .6s infinite linear; }

@keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } }