/* 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; }

/*
modifications to original reset, avoid unwated white space between elements
*/
body {
  font-size: 0; }

/*
apply a natural box layout model to all elements
*/
html {
  box-sizing: border-box; }

*,
*:before,
*:after {
  box-sizing: inherit; }

/*
reset the fontello default margin
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
  width: auto !important;
  margin-right: 0px !important;
  margin-left: 0px !important; }

body, html {
  font-family: "Europa", serif;
  color: #666; }

html.webfonts-loading p, html.webfonts-loading h1, html.webfonts-loading h2, html.webfonts-loading h3, html.webfonts-loading h4, html.webfonts-loading h5, html.webfonts-loading h6 {
  font-size: 0px !important; }

a {
  color: #666;
  text-decoration: none; }

.article-content-inner a {
  text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Europa", serif;
  font-size: 18px;
  line-height: 1.2;
  font-weight: bold;
  margin-top: 20px;
  color: #555; }

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: 0; }

h2 {
  font-size: 38px; }

h3 {
  font-size: 22px;
  line-height: 32px; }

p {
  margin-top: 15px;
  font-size: 16px;
  line-height: 1.6667; }

h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
  margin-top: 10px; }

h2 + p + div {
  margin-top: 25px !important; }

p.quote {
  font-size: 26px !important;
  line-height: 1.4 !important;
  max-width: 400px !important;
  margin-top: 35px !important;
  color: #555; }

p.quote + p {
  margin-top: 25px !important; }

.writepad .top-menu {
  height: 95px; }
.writepad .desktop-menu-buttons {
  top: 10px; }

.top-menu {
  height: 125px;
  font-size: 10px;
  position: relative;
  border-bottom: 1px solid #bbb; }
  @media screen and (max-width: 320px) {
    .top-menu {
      height: 85px; } }
  .top-menu li {
    display: inline-block; }
  .top-menu .logo-wrapper {
    display: inline-block;
    margin: 5px 15px; }
    .top-menu .logo-wrapper img {
      height: 85px; }
    @media screen and (max-width: 320px) {
      .top-menu .logo-wrapper {
        margin: 2px 15px; }
        .top-menu .logo-wrapper img {
          height: 75px; } }
  .top-menu .banner {
    background-color: #ff6540;
    height: 30px; }
    .top-menu .banner p {
      margin-top: 0;
      text-align: center;
      color: white;
      font-size: 16px;
      font-weight: bold;
      line-height: 30px; }
      .top-menu .banner p a {
        color: white;
        text-decoration: underline; }
    @media screen and (max-width: 320px) {
      .top-menu .banner {
        display: none; } }

.writepad .top-menu .banner {
  display: none; }

.desktop-menu-buttons {
  position: absolute;
  top: 40px;
  right: 15px; }
  .desktop-menu-buttons a {
    color: #555;
    position: relative;
    display: inline-block;
    width: 45px;
    height: 60px;
    cursor: pointer; }
    .desktop-menu-buttons a i.icon-home {
      position: absolute;
      top: 12px;
      left: 10px;
      font-size: 17px;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      padding: 8px;
      border: 1px solid #666;
      text-align: center; }
    .desktop-menu-buttons a i.icon-menu {
      position: absolute;
      top: 12px;
      left: 10px;
      font-size: 18px;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      padding: 8px;
      border: 1px solid #666;
      text-align: center; }
    .desktop-menu-buttons a i.icon-info {
      position: absolute;
      top: 12px;
      left: 10px;
      font-size: 18px;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      padding: 8px;
      border: 1px solid #666;
      text-align: center; }
    .desktop-menu-buttons a i.icon-cancel-button-light-bold {
      position: absolute;
      top: 12px;
      left: 10px;
      font-size: 14px;
      line-height: 18px;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      padding: 8px;
      border: 1px solid #666;
      text-align: center; }

ul {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 50px; }

li {
  font-size: 15px;
  display: block;
  line-height: 30px; }
  li a {
    color: #555;
    text-decoration: none; }

.gridcell {
  width: 50%;
  padding-bottom: 50%;
  display: inline-block;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0); }
  .gridcell h1, .gridcell h4, .gridcell h5, .gridcell h6 {
    display: none; }
  .gridcell h2 {
    margin: 0;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1.6;
    font-weight: normal;
    letter-spacing: 3px;
    color: #666; }
    @media screen and (max-width: 1439px) {
      .gridcell h2 {
        font-size: 9px; } }
  .gridcell h3 {
    margin: 0;
    margin-top: 10px;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 1.6;
    font-weight: normal;
    letter-spacing: 3px;
    color: #666; }
    @media screen and (max-width: 1439px) {
      .gridcell h3 {
        font-size: 8px; } }
    @media screen and (max-width: 375px) {
      .gridcell h3 {
        font-size: 6px; } }
  .gridcell p {
    margin: 0;
    margin-top: 10px;
    text-transform: uppercase;
    font-size: 10px;
    line-height: 1.6;
    font-weight: normal;
    letter-spacing: 3px;
    color: #666; }
    @media screen and (max-width: 1439px) {
      .gridcell p {
        font-size: 8px; } }
    @media screen and (max-width: 375px) {
      .gridcell p {
        font-size: 6px; } }
  .gridcell img {
    opacity: 0.75;
    transition: opacity 0.9s ease;
    transform: translateZ(0);
    -webkit-transform: translateZ(0); }
  .gridcell.container {
    padding-bottom: 0; }
  .gridcell.hover img {
    opacity: 1;
    transition: opacity 0.9s ease; }
  .gridcell .gridcell-first-inner,
  .gridcell .gridcell-inner {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; }
  .gridcell .gridcell-overlay {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; }
  .gridcell .left-cell:after,
  .gridcell .right-cell:after {
    content: "";
    border-width: 20px;
    border-style: solid;
    border-color: transparent;
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    margin-top: -20px; }
  .gridcell .left-cell:after {
    border-right-color: white;
    right: 0; }
  .gridcell .right-cell:after {
    border-left-color: white;
    left: 0; }
  .gridcell .gridcell-inner:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; }
  .gridcell .gridcell-inner > div {
    display: inline-block;
    vertical-align: middle;
    padding: 15px;
    width: 100%;
    text-align: center; }

.gridcell.mobile-cell {
  display: none; }

.gridcell img {
  width: 100%; }

.gridcell .gridcell-first-inner .postit {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.9);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) translateZ(0);
  width: 60%;
  height: 30%; }

.gridcell .gridcell-first-inner .postit > div {
  display: inline-block;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) translateZ(0);
  width: 80%; }

.gridcell p {
  margin-top: 5px;
  color: #404040; }

.gridcell-first-inner p.leesmeer {
  text-decoration: underline; }

.gridcell span.button {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5%;
  display: inline-block;
  margin: 0 5px; }

.gridcell span.button p {
  visibility: visible;
  display: inline-block;
  padding: 10px 10px;
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
  color: #404040;
  border: 2px solid #404040;
  text-transform: uppercase;
  margin: auto; }

@media screen and (max-width: 1280px) {
  .gridcell .gridcell-first-inner > div {
    bottom: 2%;
    left: 2%;
    right: 2%;
    padding: 15px; }

  .gridcell span.button p {
    padding: 6px 6px;
    font-size: 12px; }

  /*
  .gridcell .gridcell-inner div {
      vertical-align: top;
      margin-top: 10%;
  }
  */
  .gridcell .left-cell:after,
  .gridcell .right-cell:after {
    border-width: 10px;
    margin-top: -5px; } }
@media screen and (max-width: 1023px) {
  .gridcell.container.emptygridcell {
    display: none; }

  .gridcell span.button p {
    padding: 10px 10px;
    font-size: 15px; }

  .gridcell .gridcell-inner div {
    vertical-align: middle;
    margin-top: auto; }

  .gridcell .left-cell:after,
  .gridcell .right-cell:after {
    border-width: 20px;
    top: 50%;
    margin-top: -20px; }

  .gridcell.first-cell {
    padding-bottom: 75%; }

  .gridcell.first-cell,
  .gridcell.container {
    width: 100%; }

  .gridcell.desktop-cell {
    display: none; }

  .gridcell.mobile-cell {
    display: inline-block; } }
@media screen and (max-width: 640px) {
  .gridcell span.button p {
    padding: 6px 6px;
    font-size: 12px;
    line-height: 1.4; }

  .gridcell .gridcell-first-inner .postit {
    width: 70%;
    height: 40%; }

  .gridcell .left-cell:after,
  .gridcell .right-cell:after {
    border-width: 10px;
    margin-top: -5px; } }
@media screen and (max-width: 499px) {
  .gridcell .gridcell-first-inner .postit {
    width: 70%;
    height: 60%; }

  .gridcell.first-cell {
    padding-bottom: 100%; }

  .gridcell .gridcell-inner div {
    margin-top: 0; }

  .gridcell .left-cell:after,
  .gridcell .right-cell:after {
    border-width: 10px;
    margin-top: -5px; } }
/*
smaller than iphone 6 plus
*/
@media screen and (max-width: 413px) {
  .gridcell .gridcell-first-inner .postit {
    width: 80%;
    height: 50%; }

  .gridcell .gridcell-first-inner > div {
    padding: 5px; }

  .gridcell p {
    display: none; }

  .gridcell.first-cell p {
    display: block; } }
.article-content-inner {
  max-width: 1100px;
  margin: auto;
  padding: 25px 30px 50px 30px; }
  @media screen and (max-width: 1024px) {
    .article-content-inner {
      max-width: 800px; } }
  .article-content-inner .imageblock {
    margin: 40px 0; }
  .article-content-inner p, .article-content-inner h1, .article-content-inner h2, .article-content-inner h3, .article-content-inner h4, .article-content-inner h5, .article-content-inner h6 {
    max-width: 660px;
    margin-left: auto;
    margin-right: auto; }

.imageblock {
  border: 0px solid white; }

.imageblock-template {
  width: 100%;
  position: relative; }

.image-wrapper {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  display: none; }
  .image-wrapper a {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(/site/img/play_button.png);
    background-position: center;
    background-repeat: no-repeat; }

.imageblock-template-1 {
  padding-bottom: 62%; }
  .imageblock-template-1 .image-wrapper-1 {
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }

.imageblock-template-2 {
  padding-bottom: 50%; }
  .imageblock-template-2 .image-wrapper-1 {
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 50%;
    border-right: 3px solid white; }
  .imageblock-template-2 .image-wrapper-2 {
    display: block;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 0;
    border-left: 3px solid white; }

.imageblock-template-3 {
  padding-bottom: 50%; }
  .imageblock-template-3 .image-wrapper-1 {
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 33.333%;
    border-right: 3px solid white; }
  .imageblock-template-3 .image-wrapper-2 {
    display: block;
    top: 0;
    bottom: 50%;
    left: 66.666%;
    right: 0;
    border-bottom: 3px solid white;
    border-left: 3px solid white; }
  .imageblock-template-3 .image-wrapper-3 {
    display: block;
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 66.666%;
    right: 0;
    border-top: 3px solid white;
    border-left: 3px solid white; }

.imageblock-template-4,
.imageblock-template-5,
.imageblock-template-6,
.imageblock-template-7,
.imageblock-template-8,
.imageblock-template-9,
.imageblock-template-10 {
  padding-bottom: 75%; }
  .imageblock-template-4 .image-wrapper-1,
  .imageblock-template-5 .image-wrapper-1,
  .imageblock-template-6 .image-wrapper-1,
  .imageblock-template-7 .image-wrapper-1,
  .imageblock-template-8 .image-wrapper-1,
  .imageblock-template-9 .image-wrapper-1,
  .imageblock-template-10 .image-wrapper-1 {
    display: block;
    top: 0;
    bottom: 33.333%;
    left: 0;
    right: 0;
    border-bottom: 3px solid white; }
  .imageblock-template-4 .image-wrapper-2,
  .imageblock-template-5 .image-wrapper-2,
  .imageblock-template-6 .image-wrapper-2,
  .imageblock-template-7 .image-wrapper-2,
  .imageblock-template-8 .image-wrapper-2,
  .imageblock-template-9 .image-wrapper-2,
  .imageblock-template-10 .image-wrapper-2 {
    display: block;
    top: 66.666%;
    bottom: 0;
    left: 0%;
    right: 66.666%;
    border-top: 3px solid white;
    border-right: 3px solid white; }
  .imageblock-template-4 .image-wrapper-3,
  .imageblock-template-5 .image-wrapper-3,
  .imageblock-template-6 .image-wrapper-3,
  .imageblock-template-7 .image-wrapper-3,
  .imageblock-template-8 .image-wrapper-3,
  .imageblock-template-9 .image-wrapper-3,
  .imageblock-template-10 .image-wrapper-3 {
    display: block;
    top: 66.666%;
    bottom: 0;
    left: 33.333%;
    right: 33.333%;
    border-top: 3px solid white;
    border-left: 3px solid white;
    border-right: 3px solid white; }
  .imageblock-template-4 .image-wrapper-4,
  .imageblock-template-5 .image-wrapper-4,
  .imageblock-template-6 .image-wrapper-4,
  .imageblock-template-7 .image-wrapper-4,
  .imageblock-template-8 .image-wrapper-4,
  .imageblock-template-9 .image-wrapper-4,
  .imageblock-template-10 .image-wrapper-4 {
    display: block;
    top: 66.666%;
    bottom: 0;
    left: 66.666%;
    right: 0%;
    border-top: 3px solid white;
    border-left: 3px solid white; }

@media screen and (max-width: 1023px) {
  .imageblock {
    border: 0px; }

  .image-wrapper {
    border-color: white !important; } }
html.writepad .writepad-wrapper {
  display: block; }

html.writepad .writepad-close,
html.writepad .writepad-close-wrapper {
  display: inline-block; }

.writepad-wrapper {
  z-index: 98;
  display: none;
  position: absolute;
  top: 95px;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: white; }
  @media screen and (max-width: 320px) {
    .writepad-wrapper {
      top: 85px; } }
  .writepad-wrapper .writepad {
    position: relative;
    width: 100%; }
    .writepad-wrapper .writepad a {
      border-bottom: 1px dashed #555; }
    .writepad-wrapper .writepad p {
      font-size: 18px; }
    .writepad-wrapper .writepad h2 {
      margin-top: 0; }
    .writepad-wrapper .writepad h2:first-child {
      margin-top: 0px; }
    .writepad-wrapper .writepad ul {
      margin-left: 15px; }
    .writepad-wrapper .writepad li {
      text-indent: -15px; }
    .writepad-wrapper .writepad li:before {
      content: "-\00a0\00a0";
      text-indent: -15px; }
    .writepad-wrapper .writepad .writepad-inner .writepad-content {
      padding: 0px 15px 25px;
      max-width: 830px;
      margin: auto; }
  @media screen and (max-width: 1023px) {
    .writepad-wrapper .writepad .writepad-inner .writepad-content {
      max-width: 630px; } }

html.writepad-center .writepad {
  top: 50%;
  transform: translateY(-50%);
  margin-top: -125px; }
  @media screen and (max-width: 320px) {
    html.writepad-center .writepad {
      margin-top: -85px; } }
  html.writepad-center .writepad .writepad-inner .writepad-content {
    padding: 25px 15px 25px; }

.writepad-close-wrapper {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 95px;
  background-color: white;
  z-index: 99; }
  @media screen and (max-width: 320px) {
    .writepad-close-wrapper {
      height: 85px; } }

.writepad-close-inner {
  position: relative;
  margin: auto;
  height: 60px;
  max-width: 830px; }
  @media screen and (max-width: 1023px) {
    .writepad-close-inner {
      max-width: 630px; } }

.writepad-close {
  position: absolute;
  top: 16px;
  right: 15px;
  font-size: 29px;
  line-height: 29px; }

body, html {
  height: 100%; }

.viewport {
  max-width: 100%;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden; }

.header-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 125px; }
  @media screen and (max-width: 320px) {
    .header-wrapper {
      height: 85px; } }

.writepad .header-wrapper {
  height: 95px; }

.main-content-wrapper {
  position: absolute;
  top: 125px;
  bottom: 0;
  right: 0;
  left: 0; }
  @media screen and (max-width: 320px) {
    .main-content-wrapper {
      top: 85px; } }

.main-content {
  position: relative; }

.navigation-bar {
  position: absolute;
  visibility: hidden;
  top: 0;
  bottom: 0;
  right: -375px;
  width: 375px; }

html.menu-active .darken {
  position: absolute;
  z-index: 999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); }

html.menu-active .navigation-bar {
  visibility: visible; }

.scrollable {
  outline: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch; }

html.menu-active .scrollable {
  overflow: hidden; }

.footer {
  border-top: 1px solid #bbb;
  padding: 50px 0; }
  .footer p {
    margin: auto; }

/*# sourceMappingURL=styles.css.map */