@charset "UTF-8";
/*
Theme Name: PMS 72
Theme URI: http://www.pms72.com/
Description: Theme custom made for you.

Author: PMS 72 :: Sean Jeronimus
Version: 1.0
Tags:
*/

/* =============================================================================
   Fontello
   ========================================================================== */

  @font-face {
    font-family: 'icons';
    src: url('css/fontello.eot?46007740');
    src: url('css/fontello.eot?46007740#iefix') format('embedded-opentype'),
         url('css/fontello.woff?46007740') format('woff'),
         url('css/fontello.ttf?46007740') format('truetype'),
         url('css/fontello.svg?46007740#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
  	font-family: 'comic';
  	src: url('css/comic.eot');
  	src: url('css/comic.eot?#iefix') format('embedded-opentype'),
  		url('css/comic.woff') format('woff'),
  		url('css/comic.ttf') format('truetype'),
  		url('css/comic.svg#comic') format('svg');
  	font-weight: normal;
  	font-style: normal;
  }

  [class^="icon-"]:before, [class*=" icon-"]:before, [class^="icon-"]:after, [class*=" icon-"]:after {
    font-family: "icons";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: auto;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: 0;
  }

  .icon-twitter:before { content: '\e809'; margin-bottom: -0.2em} /* '' */
  .icon-facebook:before { content: '\e801'; } /* '' */
  .icon-linkedin:before { content: '\e818'; } /* '' */
  .icon-left:before { content: '\e812'; margin-left: 0; width: auto; margin-right: 0.2em; } /* '' */
  .icon-up:before { content: '\e84a'; margin: 5px auto 0 -1px; width: auto; } /* '' */
  .icon-phone:before { content: '\e802'; margin-left: 0; width: auto; margin-right: 0.2em; } /* '' */
  .icon-print:before { content: '\e85e'; margin-left: 0; width: auto; margin-right: 0.2em; } /* '' */
  .icon-mail:before { content: '\e840'; margin-left: 0; width: auto; margin-right: 0.2em; } /* '' */
  .icon-user:before { content: '\e841'; margin-left: 0; width: auto; margin-right: 0.2em; } /* '' */
  .icon-spin:before { content: '\e837'; margin-left: 0; width: auto; margin-right: 0.2em; } /* '' */

  .icon-linkleft:before { content: '\e811'; margin-left: 0; margin-right: 0.3em; width: auto; font-size: 1em; } /* '' */
  .icon-linkright:after { content: '\e812'; margin-left: 0.3em; margin-right: 0; width: auto; font-size: 1em; font-weight: inherit;} /* '' */
  .icon-linkbig:after { content: '\e84d'; margin-left: 0; margin-right: 0; width: auto; font-size: 1em; font-weight: 100;} /* '' */
  .icon-linkdown:before { content: '\e814'; margin-left: 0; margin-right: 0; margin-top: 0; width: auto; font-size: 1em; font-weight: inherit; display: block; } /* '' */

/* =============================================================================
   HTML5 Reset
   ========================================================================== */

  * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

  article, aside, details, figcaption, figure, footer, header, hgroup, nav, main,  section { display: block; }
  audio, canvas, video { display: inline-block; }
  audio:not([controls]) { display: none; }
  [hidden] { display: none; }

  html { background: #14142C; font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
  html, button, input, select, textarea { font: 400 17px/24px 'europa', helvetica, arial, sans-serif; color: #FFF; }
  body { margin: 0; padding: 0;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  ::-moz-selection { background: #2baee4; color: #fff; text-shadow: none; }
  ::selection { background: #2baee4; color: #fff; text-shadow: none; }

  a, a:link,
  a:visited { color: #FFF; opacity: 1;}
  a:hover { color: #FFF; text-decoration: none; opacity: 0.6; }
  a.active { color: #FFF; text-decoration: underline; opacity: 0.6; }
  a:focus { outline: thin dotted; }
  a:hover, a:active { outline: 0; }
  abbr[title] { border-bottom: 1px dotted; }
  b, strong { font-weight: 600; }
  blockquote { margin: 1em 40px; }
  dfn { font-style: italic; }
  hr { border: 0; border-top: 1px solid #FFF; display: block; height: 1px; margin: 1em 0; padding: 0; }
  ins { background: #ff9; color: #1A1A1A; text-decoration: none; }
  mark { background: #ff0; color: #1A1A1A; font-style: italic; font-weight: bold; }
  pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
  pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

  q { quotes: none; }
  q:before, q:after { content: ""; content: none; }
  small { font-size: 85%; }
  sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
  sup { top: -0.5em; }
  sub { bottom: -0.25em; }

  ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
  dd { margin: 0 0 0 40px; }
  nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

  img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
  svg:not(:root) { overflow: hidden; }
  figure { margin: 0; }

  form { margin: 0; }
  fieldset { border: 0; margin: 0; padding: 0; }

  label { cursor: pointer; }
  legend { border: 0; padding: 0; white-space: normal; }
  button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; }
  button, input { line-height: normal; }
  button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
  button[disabled], input[disabled] { cursor: default; }
  input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
  input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
  input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
  button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
  textarea { overflow: auto; vertical-align: top; resize: vertical; }
  input:valid, textarea:valid {  }
  input:invalid, textarea:invalid { background-color: #f0dddd; }
  input:focus, select:focus, textarea:focus, button:focus { outline: none;}

  table { border-collapse: collapse; border-spacing: 0; }
  td { vertical-align: top; }

  .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; position: fixed; top:0; left: 0; width: 100%; }

/* =============================================================================
   Blocks
   ========================================================================== */

  header,
  main,
  footer,
  .pagina { margin: 0 auto; }
  header { position: relative; }

  #logo { padding: 30px 0 0; }

  main { padding: 25px 0 80px; }

  .paginawrap { position: relative; }
  .met_achtergrond { background: #FFF; }
  .pagina { padding: 40px 0 80px; }
  .home .pagina { padding-bottom: 40px; }
  .infinite { margin-bottom: 80px; }
  .projectinfo { padding:40px 0; }
  .no_padding { padding: 0; }
  .no_overflow { overflow: hidden; }
  .border_b { border-bottom: 1px solid #FFF; padding-bottom: 20px; margin-bottom: 20px; }
  .border_t { border-top: 1px solid #FFF;  }
  .item { float:left; }

  .single-project .col_2,
  .single-project .col_3,
  .single-project .col_4 { margin-bottom: 20px }

  .infinite .col_4 { margin-bottom: 40px }

  #map_canvas{ height: 330px; }

  .home .col_12.extra_margin { margin-top: 30px; padding-top: 40px; margin-bottom: 10px; border-top: solid 1px #FFF; }
  .home .met_achtergrond .col_12.extra_margin { border-top: solid 1px rgba(20, 20, 44, 0.8); }

  #north, #east, #south, #west { background: #FFF; position: fixed; z-index: 9990; }
  #north, #south { left: 0; right: 0; height: 8px; }
  #north { top: 0; }
  .admin-bar #north { display: none }
  #south { bottom: 0; }
  #east, #west { top: 0; bottom: 0; width: 8px; }
  #east { right: 0; }
  #west { left: 0; }

  .bottom_menu { margin: 0 auto; text-align: left; padding: 0 20px; }
  .bottom_menu nav { border-top: 1px solid #FFF; padding: 45px 0 0 0; }
  .bottom_menu nav a { display: inline-block; padding: 0 20px 0 0; text-decoration: none; }
  .bottom_menu nav a:hover { text-decoration: underline; }


/* =============================================================================
   Images
   ========================================================================== */

  .opacity a img { opacity: 1 }
  .opacity a:hover img { opacity: .6 }

  #start { position: absolute; text-align: left; top: 10px; left: 10px; width: 100%; }
  #start p { margin: 0; padding: 0; }

  .masthead { position: relative; }
  .cycle-slide { opacity: 0.3 !important; padding: 0 0 50px 0; margin: 0 10px; }
  .cycle-slide-active { opacity: 1 !important }
  .cycle-slideshow .alt-captions { margin-bottom:10px; }
  .cycle-slideshow a { display:block; }
  .cycle-slideshow .slide > a { height: 0; padding-bottom: 63%; position: relative; width: 100%; }
  .cycle-slideshow .slide { position: relative; width: 100%; }
  .cycle-slideshow .slide img { height: 100%; position: absolute; width: 100%; z-index: 0; }

  .cycle_nav button { background: transparent; border: 0 none; height: 100%; position: absolute; top: 0; width: 500px; z-index: 999; }
  .cycle_nav .prev { left: -500px; }
  .cycle_nav .next { right: -260px; }
  .cycle_nav .prev:hover { background: url(images/overlay-prev.png) center center no-repeat;}
  .cycle_nav .next:hover { background: url(images/overlay-next.png) center center no-repeat;}

  .thumbs img {
      width: 100%;
      height: auto;
  }

/* =============================================================================
   Typography
   ========================================================================== */

  h1, h2, h3, h4, h5, h6, strong { font-weight: 400; }
  h1, h2, h3, h4, h5, h6, p { margin: 0 0 15px; padding: 0; }
  p + ul,
  h3 + ul,
  p + ol,
  h3 + ol,
  h2 + h3,
  h2 + h4,
  h2 + h5,
  h2 + h6,
  h3 + h4,
  h3 + h5,
  h3 + h6,
  h4 + h5,
  h4 + h6,
  h5 + h6 { margin-top: -15px; }

  p + h3 {
      margin-top: 30px;
  }


  h2 { font-size: 32px; }
  h3 { line-height: 28px; }
  .naast_logo h2 { text-align: right; margin-top: -85px; }
  .col_4 h3 a { font-size: 1.1em; padding: 0 0 8px 0; }
  .col_4 h3 a:link,
  .col_4 h3 a:visited,
  .col_4 h3 a:hover,
  .col_4 h3 a:active { text-decoration: none; }

  .col_4 > a { padding: 0; display: block; text-decoration: none; }

  a:link,
  a:visited { text-decoration: underline; }
  a:hover,
  a:active { text-decoration: none; }

  .met_achtergrond a:link,
  .met_achtergrond a:visited { color: #14142C; text-decoration: underline; }
  .met_achtergrond a:hover,
  .met_achtergrond a:active { color: #14142C; text-decoration: none; }

  .masthead a:link,
  .masthead a:visited { text-decoration: none; }
  .masthead a:hover,
  .masthead a:active { text-decoration: none; }

  .netwerk a:link,
  .netwerk a:visited,
  .opdrachtgevers a:link,
  .opdrachtgevers a:visited { text-decoration:none; }
  .netwerk a:hover,
  .netwerk a:active,
  .opdrachtgevers a:hover,
  .opdrachtgevers a:active { text-decoration: underline; }

  .archief1 { margin: 0 10px; }
  .archief1 a { font-weight: 400; display: block; padding: 10px 0; }

  #logo h1,
  #logo h2 { display: none; }
  #logo a { background: url(images/logo.svg) no-repeat left top; display: block; height: 125px; overflow:hidden; width: 83px; background-size: contain; }
  .no-svg #logo a { background: url(images/logo.png) no-repeat left top; display: block; height: 124px; overflow:hidden;width: 83px; }
  .no-opacity #logo a:link,
  .no-opacity #logo a:visited { background-position: left top; }
  .no-opacity #logo a:hover,
  .no-opacity #logo a:active { background-position: left bottom; }

  main a.dir { background: url(../images/folder.png) no-repeat left top; }
  main a.file { background: url(../images/file.png) no-repeat left top; }

  .met_achtergrond p,
  .met_achtergrond h1,
  .met_achtergrond h2,
  .met_achtergrond h3,
  .met_achtergrond h4,
  .met_achtergrond h5,
  .met_achtergrond h6 { color: #14142C }
  .met_achtergrond hr { border-top: 1px solid #14142C; }

  .projectinfo,
  .col_12 .studio {
      font-size: 18px;
/*
    -webkit-columns: 2 200px;
       -moz-columns: 2 200px;
            columns: 2 200px;
    -webkit-column-gap: 20px;
       -moz-column-gap: 20px;
            column-gap: 20px;
*/
  }

  .opdrachtgevers { padding:0 0 20px 0; }
  .opdrachtgevers a, .netwerk a { white-space: nowrap;}

  main ul li {list-style:none; }

  .backtotop { background: #FFF; display: none; bottom: 0; height: 35px; left: 0; position:fixed; width: 100%; z-index: 99;}
  .backtotop a { display: block; padding: 8px 0; }
  .backtotop a:link,
  .backtotop a:visited { text-decoration: none; color: #14142C; }
  .backtotop a:hover,
  .backtotop a:active { text-decoration: underline; color: #14142C; }
  .js .backtotop { display: block; }


  main .item.col_12 ul li { list-style: circle; }

  .page .item.col_12 h2 { font-size: 32px; line-height: 38px; padding-bottom: 20px; }
  .home.page .item.col_12 h2 { font-size: 32px; line-height: auto; padding-bottom: 0; }

/* =============================================================================
   Post- en Pagenav
   ========================================================================== */

  .navigation { width: 100%; text-align: center; padding: 10px 0; }
  .post-navigation { width: 100%; text-align: left; padding: 0; }
  .page-navigation { width: 100%; text-align: left; padding: 30px 0; }

  .post-navigation .next { float: right;}
  .post-navigation .prev { float: left;}

  #infscr-loading { color: #FFF; clear: left; display: block; position: relative; margin: 0 8px; }
  #infscr-loading > div,
  #infscr-loading > img { position: absolute; left: 0; top: 0; height: 0; padding: 0; margin: 0; }

  .change { background:#FFF; bottom:0; height:40px; left: 0; position: fixed; width:100%; z-index: 99; }
  .change .navigation a.prev { text-decoration: none; float:left; }
  .change .navigation a.next {text-decoration: none; float:right; }
  .change p { margin: 0; padding: 8px 0; }
  .change a:link,
  .change a:visited,
  .change a:hover,
  .change a:active { color: #14142C; text-decoration: none; }


  /* =============================================================================
   Animation
   ========================================================================== */

  a {
  -webkit-transition: .2s ease;
     -moz-transition: .2s ease;
       -o-transition: .2s ease;
      -ms-transition: .2s ease;
          transition: .2s ease;
  }
  .opacity .col_4 a img,
  .opacity .col_4 a img,
  .cycle-slide {
    -webkit-transition: .3s ease;
       -moz-transition: .3s ease;
         -o-transition: .3s ease;
        -ms-transition: .3s ease;
            transition: .3s ease;
  }


  /* =============================================================================
   Splash page video
   ========================================================================== */

.splash {
    background: url(images/sweet-sixteen-pattern.png) #f90;
    font-family: 'comic', sans-serif;
}
.splash body {
    min-width: 960px;
}
.splash header {
    height: 560px;
    text-align: center;
}
.splash #logo {
    height: 248px;
    left: 50%;
    margin-left: -84px;
    position: absolute;
    width: 166px;
    z-index: 88;
}
.splash #logo a {
    background-size: 166px 496px;
    height: 248px;
    width: 166px;
}
.splash #logo a:link,
.splash #logo a:visited,
.splash #logo a:hover,
.splash #logo a:active {
    opacity: 1;
}
.splash .ribbon {
    height: 301px;
    left: 50%;
    margin-left: -400px;
    position: absolute;
    top: 338px;
    width: 800px;
    z-index: 99;
}
.splash .time {
    color: red;
    font-size: 48px;
    position: absolute;
    top: 370px;
}
.splash .time.start {
    left: 130px;
}
.splash .time.today {
    right: 130px;
}
.splash .home-btn:link,
.splash .home-btn:visited,
.splash .home-btn:hover,
.splash .home-btn:active {
    bottom: 5px;
    color: #fff;
    font-size: 25px;
    opacity: 1;
    position: absolute;
    right: 0;
    text-decoration: underline;
    z-index: 999;
}
.splash marquee {
    font-size: 58px;
    line-height: 58px;
    margin: 20px 0;
}
.video-container-wrap {
    background-color: #f63;
    width: 100%;
}
.video-container-inner {
    margin: 0 auto;
    max-width: 100%;
    width: 940px;
}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
/*
.video-container.no-controls {
    padding-top: 0;
}
*/
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* =============================================================================
   404
   ========================================================================== */

  h2.mega_ultra_super_huge { font-size: 400px; line-height: 400px; margin: 0; padding: 0; text-align: center; }
  .glitch { position: relative; }
  .glitch:before,
  .glitch:after { content: attr(data-text); height: 100%; left: 0;position: absolute; top: 0; width: 100%; }
  .glitch:before { background: #14142C; left: 2px; text-shadow: -1px 0 red; }
  .glitch:after { background: #14142C; left: -2px; text-shadow: -1px 0 blue; }
  .glitch:before { clip: rect(44px, 1000px, 56px, 0); }

  @-webkit-keyframes glitch-anim-1 {
      0% { clip: rect(233px, 9999px, 408px, 0); }
      5% { clip: rect(468px, 9999px, 79px, 0); }
     10% { clip: rect(196px, 9999px, 105px, 0); }
     15% { clip: rect(387px, 9999px, 320px, 0); }
     20% { clip: rect(61px, 9999px, 276px, 0); }
     25% { clip: rect(369px, 9999px, 60px, 0); }
     30% { clip: rect(244px, 9999px, 56px, 0); }
     35% { clip: rect(437px, 9999px, 361px, 0); }
     40% { clip: rect(419px, 9999px, 309px, 0); }
     45% { clip: rect(261px, 9999px, 437px, 0); }
     50% { clip: rect(218px, 9999px, 158px, 0); }
     55% { clip: rect(352px, 9999px, 357px, 0); }
     60% { clip: rect(246px, 9999px, 46px, 0); }
     65% { clip: rect(390px, 9999px, 371px, 0); }
     70% { clip: rect(103px, 9999px, 385px, 0); }
     75% { clip: rect(476px, 9999px, 259px, 0); }
     80% { clip: rect(446px, 9999px, 472px, 0); }
     85% { clip: rect(130px, 9999px, 198px, 0); }
     90% { clip: rect(91px, 9999px, 352px, 0); }
     95% { clip: rect(386px, 9999px, 297px, 0); }
    100% { clip: rect(432px, 9999px, 68px, 0); }
  }
  @-webkit-keyframes glitch-anim-2 {
      0% { clip: rect(258px, 9999px, 336px, 0); }
      5% { clip: rect(445px, 9999px, 426px, 0); }
     10% { clip: rect(31px, 9999px, 102px, 0); }
     15% { clip: rect(54px, 9999px, 483px, 0); }
     20% { clip: rect(445px, 9999px, 27px, 0); }
     25% { clip: rect(149px, 9999px, 16px, 0); }
     30% { clip: rect(399px, 9999px, 157px, 0); }
     35% { clip: rect(219px, 9999px, 412px, 0); }
     40% { clip: rect(280px, 9999px, 283px, 0); }
     45% { clip: rect(397px, 9999px, 335px, 0); }
     50% { clip: rect(242px, 9999px, 201px, 0); }
     55% { clip: rect(421px, 9999px, 347px, 0); }
     60% { clip: rect(145px, 9999px, 188px, 0); }
     65% { clip: rect(430px, 9999px, 215px, 0); }
     70% { clip: rect(280px, 9999px, 2px, 0); }
     75% { clip: rect(96px, 9999px, 419px, 0); }
     80% { clip: rect(131px, 9999px, 58px, 0); }
     85% { clip: rect(455px, 9999px, 480px, 0); }
     90% { clip: rect(72px, 9999px, 390px, 0); }
     95% { clip: rect(489px, 9999px, 426px, 0); }
    100% { clip: rect(32px, 9999px, 308px, 0); }
  }
  @-moz-keyframes glitch-anim-1 {
      0% { clip: rect(233px, 9999px, 408px, 0); }
      5% { clip: rect(468px, 9999px, 79px, 0); }
     10% { clip: rect(196px, 9999px, 105px, 0); }
     15% { clip: rect(387px, 9999px, 320px, 0); }
     20% { clip: rect(61px, 9999px, 276px, 0); }
     25% { clip: rect(369px, 9999px, 60px, 0); }
     30% { clip: rect(244px, 9999px, 56px, 0); }
     35% { clip: rect(437px, 9999px, 361px, 0); }
     40% { clip: rect(419px, 9999px, 309px, 0); }
     45% { clip: rect(261px, 9999px, 437px, 0); }
     50% { clip: rect(218px, 9999px, 158px, 0); }
     55% { clip: rect(352px, 9999px, 357px, 0); }
     60% { clip: rect(246px, 9999px, 46px, 0); }
     65% { clip: rect(390px, 9999px, 371px, 0); }
     70% { clip: rect(103px, 9999px, 385px, 0); }
     75% { clip: rect(476px, 9999px, 259px, 0); }
     80% { clip: rect(446px, 9999px, 472px, 0); }
     85% { clip: rect(130px, 9999px, 198px, 0); }
     90% { clip: rect(91px, 9999px, 352px, 0); }
     95% { clip: rect(386px, 9999px, 297px, 0); }
    100% { clip: rect(432px, 9999px, 68px, 0); }
  }
  @-moz-keyframes glitch-anim-2 {
      0% { clip: rect(258px, 9999px, 336px, 0); }
      5% { clip: rect(445px, 9999px, 426px, 0); }
     10% { clip: rect(31px, 9999px, 102px, 0); }
     15% { clip: rect(54px, 9999px, 483px, 0); }
     20% { clip: rect(445px, 9999px, 27px, 0); }
     25% { clip: rect(149px, 9999px, 16px, 0); }
     30% { clip: rect(399px, 9999px, 157px, 0); }
     35% { clip: rect(219px, 9999px, 412px, 0); }
     40% { clip: rect(280px, 9999px, 283px, 0); }
     45% { clip: rect(397px, 9999px, 335px, 0); }
     50% { clip: rect(242px, 9999px, 201px, 0); }
     55% { clip: rect(421px, 9999px, 347px, 0); }
     60% { clip: rect(145px, 9999px, 188px, 0); }
     65% { clip: rect(430px, 9999px, 215px, 0); }
     70% { clip: rect(280px, 9999px, 2px, 0); }
     75% { clip: rect(96px, 9999px, 419px, 0); }
     80% { clip: rect(131px, 9999px, 58px, 0); }
     85% { clip: rect(455px, 9999px, 480px, 0); }
     90% { clip: rect(72px, 9999px, 390px, 0); }
     95% { clip: rect(489px, 9999px, 426px, 0); }
    100% { clip: rect(32px, 9999px, 308px, 0); }
  }
  @-ms-keyframes glitch-anim-1 {
      0% { clip: rect(233px, 9999px, 408px, 0); }
      5% { clip: rect(468px, 9999px, 79px, 0); }
     10% { clip: rect(196px, 9999px, 105px, 0); }
     15% { clip: rect(387px, 9999px, 320px, 0); }
     20% { clip: rect(61px, 9999px, 276px, 0); }
     25% { clip: rect(369px, 9999px, 60px, 0); }
     30% { clip: rect(244px, 9999px, 56px, 0); }
     35% { clip: rect(437px, 9999px, 361px, 0); }
     40% { clip: rect(419px, 9999px, 309px, 0); }
     45% { clip: rect(261px, 9999px, 437px, 0); }
     50% { clip: rect(218px, 9999px, 158px, 0); }
     55% { clip: rect(352px, 9999px, 357px, 0); }
     60% { clip: rect(246px, 9999px, 46px, 0); }
     65% { clip: rect(390px, 9999px, 371px, 0); }
     70% { clip: rect(103px, 9999px, 385px, 0); }
     75% { clip: rect(476px, 9999px, 259px, 0); }
     80% { clip: rect(446px, 9999px, 472px, 0); }
     85% { clip: rect(130px, 9999px, 198px, 0); }
     90% { clip: rect(91px, 9999px, 352px, 0); }
     95% { clip: rect(386px, 9999px, 297px, 0); }
    100% { clip: rect(432px, 9999px, 68px, 0); }
  }
  @-ms-keyframes glitch-anim-2 {
      0% { clip: rect(258px, 9999px, 336px, 0); }
      5% { clip: rect(445px, 9999px, 426px, 0); }
     10% { clip: rect(31px, 9999px, 102px, 0); }
     15% { clip: rect(54px, 9999px, 483px, 0); }
     20% { clip: rect(445px, 9999px, 27px, 0); }
     25% { clip: rect(149px, 9999px, 16px, 0); }
     30% { clip: rect(399px, 9999px, 157px, 0); }
     35% { clip: rect(219px, 9999px, 412px, 0); }
     40% { clip: rect(280px, 9999px, 283px, 0); }
     45% { clip: rect(397px, 9999px, 335px, 0); }
     50% { clip: rect(242px, 9999px, 201px, 0); }
     55% { clip: rect(421px, 9999px, 347px, 0); }
     60% { clip: rect(145px, 9999px, 188px, 0); }
     65% { clip: rect(430px, 9999px, 215px, 0); }
     70% { clip: rect(280px, 9999px, 2px, 0); }
     75% { clip: rect(96px, 9999px, 419px, 0); }
     80% { clip: rect(131px, 9999px, 58px, 0); }
     85% { clip: rect(455px, 9999px, 480px, 0); }
     90% { clip: rect(72px, 9999px, 390px, 0); }
     95% { clip: rect(489px, 9999px, 426px, 0); }
    100% { clip: rect(32px, 9999px, 308px, 0); }
  }
  @-o-keyframes glitch-anim-1 {
      0% { clip: rect(233px, 9999px, 408px, 0); }
      5% { clip: rect(468px, 9999px, 79px, 0); }
     10% { clip: rect(196px, 9999px, 105px, 0); }
     15% { clip: rect(387px, 9999px, 320px, 0); }
     20% { clip: rect(61px, 9999px, 276px, 0); }
     25% { clip: rect(369px, 9999px, 60px, 0); }
     30% { clip: rect(244px, 9999px, 56px, 0); }
     35% { clip: rect(437px, 9999px, 361px, 0); }
     40% { clip: rect(419px, 9999px, 309px, 0); }
     45% { clip: rect(261px, 9999px, 437px, 0); }
     50% { clip: rect(218px, 9999px, 158px, 0); }
     55% { clip: rect(352px, 9999px, 357px, 0); }
     60% { clip: rect(246px, 9999px, 46px, 0); }
     65% { clip: rect(390px, 9999px, 371px, 0); }
     70% { clip: rect(103px, 9999px, 385px, 0); }
     75% { clip: rect(476px, 9999px, 259px, 0); }
     80% { clip: rect(446px, 9999px, 472px, 0); }
     85% { clip: rect(130px, 9999px, 198px, 0); }
     90% { clip: rect(91px, 9999px, 352px, 0); }
     95% { clip: rect(386px, 9999px, 297px, 0); }
    100% { clip: rect(432px, 9999px, 68px, 0); }
  }
  @-o-keyframes glitch-anim-2 {
      0% { clip: rect(258px, 9999px, 336px, 0); }
      5% { clip: rect(445px, 9999px, 426px, 0); }
     10% { clip: rect(31px, 9999px, 102px, 0); }
     15% { clip: rect(54px, 9999px, 483px, 0); }
     20% { clip: rect(445px, 9999px, 27px, 0); }
     25% { clip: rect(149px, 9999px, 16px, 0); }
     30% { clip: rect(399px, 9999px, 157px, 0); }
     35% { clip: rect(219px, 9999px, 412px, 0); }
     40% { clip: rect(280px, 9999px, 283px, 0); }
     45% { clip: rect(397px, 9999px, 335px, 0); }
     50% { clip: rect(242px, 9999px, 201px, 0); }
     55% { clip: rect(421px, 9999px, 347px, 0); }
     60% { clip: rect(145px, 9999px, 188px, 0); }
     65% { clip: rect(430px, 9999px, 215px, 0); }
     70% { clip: rect(280px, 9999px, 2px, 0); }
     75% { clip: rect(96px, 9999px, 419px, 0); }
     80% { clip: rect(131px, 9999px, 58px, 0); }
     85% { clip: rect(455px, 9999px, 480px, 0); }
     90% { clip: rect(72px, 9999px, 390px, 0); }
     95% { clip: rect(489px, 9999px, 426px, 0); }
    100% { clip: rect(32px, 9999px, 308px, 0); }
  }
  @keyframes glitch-anim-1 {
      0% { clip: rect(233px, 9999px, 408px, 0); }
      5% { clip: rect(468px, 9999px, 79px, 0); }
     10% { clip: rect(196px, 9999px, 105px, 0); }
     15% { clip: rect(387px, 9999px, 320px, 0); }
     20% { clip: rect(61px, 9999px, 276px, 0); }
     25% { clip: rect(369px, 9999px, 60px, 0); }
     30% { clip: rect(244px, 9999px, 56px, 0); }
     35% { clip: rect(437px, 9999px, 361px, 0); }
     40% { clip: rect(419px, 9999px, 309px, 0); }
     45% { clip: rect(261px, 9999px, 437px, 0); }
     50% { clip: rect(218px, 9999px, 158px, 0); }
     55% { clip: rect(352px, 9999px, 357px, 0); }
     60% { clip: rect(246px, 9999px, 46px, 0); }
     65% { clip: rect(390px, 9999px, 371px, 0); }
     70% { clip: rect(103px, 9999px, 385px, 0); }
     75% { clip: rect(476px, 9999px, 259px, 0); }
     80% { clip: rect(446px, 9999px, 472px, 0); }
     85% { clip: rect(130px, 9999px, 198px, 0); }
     90% { clip: rect(91px, 9999px, 352px, 0); }
     95% { clip: rect(386px, 9999px, 297px, 0); }
    100% { clip: rect(432px, 9999px, 68px, 0); }
  }
  @keyframes glitch-anim-2 {
      0% { clip: rect(258px, 9999px, 336px, 0); }
      5% { clip: rect(445px, 9999px, 426px, 0); }
     10% { clip: rect(31px, 9999px, 102px, 0); }
     15% { clip: rect(54px, 9999px, 483px, 0); }
     20% { clip: rect(445px, 9999px, 27px, 0); }
     25% { clip: rect(149px, 9999px, 16px, 0); }
     30% { clip: rect(399px, 9999px, 157px, 0); }
     35% { clip: rect(219px, 9999px, 412px, 0); }
     40% { clip: rect(280px, 9999px, 283px, 0); }
     45% { clip: rect(397px, 9999px, 335px, 0); }
     50% { clip: rect(242px, 9999px, 201px, 0); }
     55% { clip: rect(421px, 9999px, 347px, 0); }
     60% { clip: rect(145px, 9999px, 188px, 0); }
     65% { clip: rect(430px, 9999px, 215px, 0); }
     70% { clip: rect(280px, 9999px, 2px, 0); }
     75% { clip: rect(96px, 9999px, 419px, 0); }
     80% { clip: rect(131px, 9999px, 58px, 0); }
     85% { clip: rect(455px, 9999px, 480px, 0); }
     90% { clip: rect(72px, 9999px, 390px, 0); }
     95% { clip: rect(489px, 9999px, 426px, 0); }
    100% { clip: rect(32px, 9999px, 308px, 0); }
  }
  .glitch:before {
    -webkit-animation: glitch-anim-1 2s infinite linear alternate-reverse;
       -moz-animation: glitch-anim-1 2s infinite linear alternate-reverse;
        -ms-animation: glitch-anim-1 2s infinite linear alternate-reverse;
         -o-animation: glitch-anim-1 2s infinite linear alternate-reverse;
            animation: glitch-anim-1 2s infinite linear alternate-reverse;
  }

  .glitch:after {
    -webkit-animation: glitch-anim-2 2s infinite linear alternate-reverse;
       -moz-animation: glitch-anim-2 2s infinite linear alternate-reverse;
        -ms-animation: glitch-anim-2 2s infinite linear alternate-reverse;
         -o-animation: glitch-anim-2 2s infinite linear alternate-reverse;
            animation: glitch-anim-2 2s infinite linear alternate-reverse;
  }

/* =============================================================================
   Media Queries
   ========================================================================== */

  @media only screen and (max-width: 1023px) {
    #logo a { height: 72px; width: 48px; }
    header,
    .paginawrap,
    .backtotop { padding: 0 20px; }

    main { padding: 25px 0 45px;}

    .cycle-slideshow,
    .cycle-carousel-wrap { width:100% !important; }
    .cycle-slide { margin: 0; padding-bottom: 20px }
    .alt-captions h2 { font-size: 24px; }

    #start { left: 0 }
    .archief1 { margin: 0; }
    .extra_marge_t { margin-top: 30px; }

    .item { width: 100%; }
    .item img { max-width: 100%; height: auto }

    #north, #south { height: 2px; }
    #east, #west { width: 2px; }

    .naast_logo h2 { margin-top: -30px; margin-bottom: 30px; text-align: left; font-size: 25px; }

    .projectinfo, .col_12 .studio {
      -webkit-columns: 1;
      -moz-columns: 1;
      columns: 1;
      -webkit-column-gap: 1;
      -moz-column-gap: 1;
      column-gap: 1;
      }

    .bottom_menu {  padding: 0 20px; width: auto;  }
    .bottom_menu nav { padding: 45px 0 0 0; }
    .bottom_menu nav a { display: block; padding: 5px 0; }

  }

  @media only screen and (min-width: 768px) and (max-width: 1023px) { /* tablet */
    .item { margin: 0 10px; }
    .col_2  { width: 140px }
    .col_3  { width: 220px }
    .col_4  { width: 300px }
    .col_6  { width: 460px }
    .col_9  { width: 700px }
    .col_12 { width: 940px }
    .bottom_menu nav a { display: inline-block; padding: 0 15px 0 0; }
  }

  @media only screen and (min-width: 1024px) { /* desktop */
    header,
    .pagina { width: 960px }
    .item { margin: 0 10px; }
    .col_2  { width: 140px }
    .col_3  { width: 220px }
    .col_4  { width: 300px }
    .col_6  { width: 460px }
    .col_9  { width: 700px }
    .col_12 { width: 940px }
    .offset_col_3 { margin-left: 250px; }
    .extra_marge_t { margin-top: 60px; }

    .cycle-slideshow { overflow: visible !important; width:940px !important; }
    .cycle-slideshow .slide { width: 730px; padding-right: 30px }
    .masthead .cycle-slideshow img { width: 700px; height: 440px }

    .change .navigation,
    .backtotop a { margin: 0 auto; width: 940px; }

    .bottom_menu {  padding: 10px; width: 960px; }
    .bottom_menu nav { padding: 45px 0 0 0;  }
  }

/* =============================================================================
   IE 7+8 mediaquery failback
   ========================================================================== */

  .ie7 header { width: 960px; }
  .ie7 .masthead .cycle-slideshow img { width: 700px; height: auto; }
  .ie7 .pagina { width: 960px; }
  .ie7 .item { float:left; margin-left: 10px; margin-right: 10px; }
  .ie7 .col_2  { width: 140px;  }
  .ie7 .col_3  { width: 220px;  }
  .ie7 .col_4  { width: 300px;  }
  .ie7 .col_6  { width: 460px;  }
  .ie7 .col_9  { width: 700px;  }
  .ie7 .col_12 { width: 940px;  }
  .ie7 .offset_col_3 { margin-left: 250px; }
  .ie7 .extra_marge_t { margin-top: 60px; }
  .ie7 .change .navigation { width: 940px; margin: 0 auto; }

  .ie8 header { width: 960px }
  .ie8 .masthead .cycle-slideshow img { width: 700px; height: auto; }
  .ie8 .pagina { width: 960px; }
  .ie8 .item { float:left; margin-left: 10px; margin-right: 10px; }
  .ie8 .col_2  { width: 140px;  }
  .ie8 .col_3  { width: 220px;  }
  .ie8 .col_4  { width: 300px;  }
  .ie8 .col_6  { width: 460px;  }
  .ie8 .col_9  { width: 700px;  }
  .ie8 .col_12 { width: 940px;  }
  .ie8 .offset_col_3 { margin-left: 250px; }
  .ie8 .extra_marge_t { margin-top: 60px; }
  .ie8 .change .navigation { width: 940px; margin: 0 auto; }


/* =============================================================================
   Non-Semantic Classes
   ========================================================================== */

  .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
  .ir br { display: none; }
  .hidden { display: none !important; visibility: hidden; }
  .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
  .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
  .invisible { visibility: hidden; }
  .clearfix:before, .clearfix:after { content: ""; display: table; }
  .clearfix:after { clear: both; }
  .clearfix { height: 0; clear: both; }
  .clear { clear: both; }

/* ==========================================================================
   Print styles
   ========================================================================== */

  @media print {
    * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
    a, a:visited { text-decoration: underline; }
    a[href]:after { content: " (" attr(href) ")"; }
    abbr[title]:after { content: " (" attr(title) ")"; }
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; }
    tr, img { page-break-inside: avoid; }
    img { max-width: 100% !important; }
    @page { margin: 0.5cm; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3 { page-break-after: avoid; }
  }