@import url("https://fonts.googleapis.com/css?family=Lato:400,700");
/* 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;
  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.4; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

html {
  font-size: 62.5%;
  /* 10px */
  height: 100%; }

body {
  height: 100%;
  background: url("../img/bg-all.jpg") top center repeat-x #aec27b;
  background-size: contain;
  font-family: 'Lato', sans-serif; }

@media screen and (min-width: 769px) {
  @-moz-keyframes shift-left {
    50% {
      background-position: -10000% 0; } }
  @-webkit-keyframes shift-left {
    50% {
      background-position: -10000% 0; } }
  @keyframes shift-left {
    50% {
      background-position: -10000% 0; } }
  .clouds {
    width: 100%;
    height: 100%;
    background: url("../img/clouds.png") repeat-x 0 0;
    background-size: contain;
    -webkit-animation: shift-left 2000s linear infinite;
    -moz-animation: shift-left 2000s linear infinite;
    animation: shift-left 2000s linear infinite; } }
h1, h2, h3 {
  font-weight: bold; }

h1 {
  font-size: 1.4rem; }

#main {
  background: url("../img/bg.png") no-repeat top center;
  background-size: contain;
  height: 100%;
  width: 133vh;
  margin: 0 auto;
  position: relative; }

.clouds > header {
  padding: 20px 10px;
  background: #def0f8;
  width: 20%;
  max-width: 220px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

@media screen and (max-width: 1200px) {
  .clouds > header {
    width: 15%; } }
@media screen and (max-width: 1000px) {
  .clouds > header {
    top: 100px;
    width: 15%; } }
@media screen and (max-width: 768px) {
  body {
    background-image: none;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden; }

  .clouds {
    background: #7fc2e1;
    height: 99vw; }

  .clouds > header {
    top: 10px;
    left: auto;
    right: 2%;
    width: 10%; } }
@media screen and (orientation: portrait) and (max-width: 768px) {
  #main {
    background: url("../img/bg_mobile.png") no-repeat center 100px;
    background-size: contain;
    height: 100vh;
    padding-top: 100px;
    width: 100%;
    margin: 0 auto;
    position: relative; } }
@media screen and (orientation: landscape) and (max-width: 768px) {
  .clouds {
    height: 66vh; }

  #main {
    background: url("../img/bg_mobile.png") no-repeat center 0;
    background-size: contain;
    height: 100vh;
    padding: 0;
    width: 100%;
    margin: 0 auto;
    position: relative; } }
@media screen and (min-aspect-ratio: 5 / 6) and (max-aspect-ratio: 1 / 1) {
  html, body {
    height: 125vw; } }
nav ul li {
  display: block; }
  nav ul li a {
    padding: 5px 15px 5px 40px;
    display: block;
    color: #000;
    font-size: 1.6rem;
    text-decoration: none;
    transition: all, 0.2s; }
    nav ul li a:hover {
      color: #77c5e2; }
nav ul .home a {
  background: url("../img/icon_home.png") no-repeat left center;
  background-size: contain; }
nav ul .onderzoek a {
  background: url("../img/icon_onderzoek.png") no-repeat left center;
  background-size: contain; }
nav ul .info a {
  background: url("../img/icon_info.png") no-repeat left center;
  background-size: contain; }
nav ul .zij_zijn_er a {
  background: url("../img/icon_zij_zijn_er.png") no-repeat left center;
  background-size: contain; }

@media screen and (min-width: 769px) {
  nav {
    background: url("../img/nav.png") no-repeat center left;
    background-size: contain;
    width: 700px;
    margin: 0 auto;
    padding: 80px 0; }
    nav ul {
      padding-left: 31%;
      display: flex; }
      nav ul .home {
        margin-left: 3px;
        margin-top: 15px; }
        nav ul .home a {
          padding: 4px 15px 4px 40px; }
      nav ul .onderzoek {
        margin-top: 0;
        margin-bottom: 15px; }
        nav ul .onderzoek a {
          padding: 0px 25px 10px 30px; }
      nav ul .info {
        margin-top: 15px; }
        nav ul .info a {
          padding: 5px 20px 5px 25px; }
      nav ul .zij_zijn_er {
        margin-top: 0px;
        margin-bottom: 15px; }
        nav ul .zij_zijn_er a {
          padding: 0px 10px 10px 40px; }
    nav .toggle__menu {
      display: none; } }
@media screen and (orientation: landscape) and (max-height: 900px) {
  nav {
    padding-top: 30px;
    padding-bottom: 30px; } }
@media screen and (max-width: 768px) {
  nav {
    width: 100%;
    position: relative;
    top: -100px; }
    nav .toggle__menu {
      background: url("../img/nav_mobile.png") no-repeat top left;
      background-size: contain;
      width: 95%;
      padding: 28px 0 12px 5%; }
      nav .toggle__menu .toggle__menu__btn {
        display: block;
        width: 30px;
        height: 30px;
        padding: 2px; }
        nav .toggle__menu .toggle__menu__btn span {
          transition: all, 0.4s;
          width: 30px;
          height: 3px;
          margin: 4px 0;
          background: #000;
          display: block; }
    nav ul {
      background: #fff;
      padding: 10px;
      position: absolute;
      top: 100%;
      z-index: 100;
      left: 0;
      width: 100%;
      display: none; }
      nav ul li {
        padding: 10px 5px; }

  nav.active .toggle__menu .toggle__menu__btn span:first-child {
    transform: rotate(45deg);
    margin-top: 5px;
    position: relative;
    top: 6px; }
  nav.active .toggle__menu .toggle__menu__btn span:nth-child(2) {
    transform: rotate(-45deg); }
  nav.active .toggle__menu .toggle__menu__btn span:last-child {
    opacity: 0; } }
@media screen and (orientation: landscape) and (max-width: 768px) {
  nav {
    padding: 0;
    top: 5px;
    left: 5px; }
    nav .toggle__menu {
      width: 34px;
      height: 30px;
      padding: 10px;
      border-radius: 5px;
      background-image: none;
      background: #fff; } }
section {
  position: fixed;
  top: 200px;
  bottom: 20px;
  left: 0;
  right: 0;
  z-index: 10; }
  section .modal {
    background-color: rgba(255, 255, 255, 0.9);
    max-width: 1000px;
    height: 100%;
    margin: 0 auto; }
    section .modal header {
      position: relative;
      z-index: 11;
      padding-left: 20px;
      height: 10%; }
      section .modal header:before {
        width: 160px;
        height: 160px;
        background: url("../img/zon.png") no-repeat top left;
        background-size: contain;
        display: block;
        content: " ";
        position: absolute;
        top: -80px;
        right: -80px;
        z-index: 12;
        transform: rotate(-20deg);
        transform-origin: center;
        -webkit-animation: spin 10s linear infinite;
        -moz-animation: spin 10s linear infinite;
        animation: spin 10s linear infinite; }
      section .modal header h1 {
        padding-left: 60px;
        padding-top: 20px;
        font-size: 2.6rem; }
        section .modal header h1 a {
          text-decoration: none;
          color: #000; }
      section .modal header .close {
        display: block;
        position: absolute;
        top: 20px;
        width: 32px;
        height: 32px;
        opacity: 1;
        border: 2px solid #000; }
      section .modal header .close:before, section .modal header .close:after {
        position: absolute;
        left: 15px;
        content: ' ';
        height: 33px;
        width: 2px;
        background-color: #000; }
      section .modal header .close:before {
        transform: rotate(45deg); }
      section .modal header .close:after {
        transform: rotate(-45deg); }
      section .modal header .close:hover {
        border-color: #555; }
        section .modal header .close:hover:before, section .modal header .close:hover:after {
          background-color: #555; }
    section .modal .modal__content {
      height: 90%;
      overflow: scroll;
      font-size: 1.6rem;
      padding: 0 20px; }

@media screen and (orientation: landscape) and (max-height: 900px) {
  section {
    top: 110px; }
    section .modal header {
      height: 15%; }
    section .modal .modal__content {
      height: 85%; } }
@media screen and (orientation: landscape) and (max-height: 600px) {
  section {
    top: 0px;
    width: 100vw;
    height: 100vh; }
    section .modal header {
      height: 20%; }
    section .modal .modal__content {
      height: 80%; } }
@media screen and (orientation: portrait) and (max-width: 768px) {
  section {
    top: 80px;
    width: 100vw;
    height: 80vh; } }
.img-responsive {
  max-width: 100%;
  height: auto;
  width: auto; }

@-moz-keyframes spin {
  50% {
    -moz-transform: rotate(20deg); } }
@-webkit-keyframes spin {
  50% {
    -webkit-transform: rotate(20deg); } }
@keyframes spin {
  50% {
    -webkit-transform: rotate(20deg); } }
@-moz-keyframes move {
  50% {
    top: 3%; } }
@-webkit-keyframes move {
  50% {
    top: 3%; } }
@keyframes move {
  50% {
    top: 3%; } }
@media screen and (min-width: 768px) {
  body.home #house:before {
    width: 160px;
    height: 160px;
    background: url("../img/zon.png") no-repeat top left;
    background-size: contain;
    display: block;
    content: " ";
    position: absolute;
    top: 0;
    right: -160px;
    z-index: 12;
    transform: rotate(-20deg);
    transform-origin: center;
    -webkit-animation: spin 10s linear infinite;
    -moz-animation: spin 10s linear infinite;
    animation: spin 10s linear infinite; }

  #house:after {
    width: 15%;
    height: 15%;
    background: url("../img/vlinder.png") no-repeat top left;
    background-size: contain;
    display: block;
    content: " ";
    position: absolute;
    top: 6%;
    left: 0%;
    z-index: 9;
    -webkit-animation: move 3s linear infinite;
    -moz-animation: move 3s linear infinite;
    animation: move 3s linear infinite; }

  .rabbit {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 4;
    background: url("../img/rabbit.png") no-repeat bottom left;
    background-size: contain;
    height: 39%;
    width: 27%; }
    .rabbit .bubble {
      background: #fff;
      border: 4px solid #000;
      border-radius: 50%;
      padding: 20px 40px;
      display: block; }
      .rabbit .bubble:after {
        content: " ";
        display: block;
        position: absolute;
        top: 100%;
        left: 40%;
        margin-top: -2px;
        background: url("../img/bubbletail.png") no-repeat top center;
        background-size: contain;
        height: 30px;
        width: 20px; }
    .rabbit .rabbit__bubble {
      position: absolute;
      bottom: 60%;
      left: 10px;
      max-width: 250px;
      z-index: 6;
      font-size: 1.4rem; }
      .rabbit .rabbit__bubble h1 {
        font-size: 1.4rem; }
    .rabbit .turtoise__bubble {
      position: absolute;
      bottom: 35%;
      right: -5%;
      max-width: 150px;
      z-index: 5; }

  #house {
    position: absolute;
    top: 23%;
    left: 26%;
    height: 64%;
    width: 50%; } }
#onthaal,
#traject,
#dossier,
#begeleiders,
#regels-afspraken,
#info {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  background: rgba(255, 255, 255, 0.8);
  color: #000;
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: bold;
  opacity: 0;
  transition: all, 0.2s; }
  #onthaal:hover,
  #traject:hover,
  #dossier:hover,
  #begeleiders:hover,
  #regels-afspraken:hover,
  #info:hover {
    opacity: 1; }

#onthaal {
  height: 27%;
  top: 70.5%;
  left: 50%;
  width: 48%; }

#traject {
  height: 27%;
  top: 70.5%;
  left: 2.5%;
  width: 46.5%; }

#dossier {
  height: 27%;
  top: 41.5%;
  left: 40.5%;
  width: 29.2%; }

#begeleiders {
  height: 27%;
  top: 41.5%;
  left: 2.5%;
  width: 36.5%; }

#regels-afspraken {
  height: 27%;
  top: 41.5%;
  left: 71%;
  width: 27%; }

#info {
  background: transparent;
  height: 16.5%;
  top: 2%;
  left: 2.5%;
  width: 96%;
  padding-top: 20%;
  z-index: 3;
  overflow: hidden; }
  #info:after {
    content: " ";
    background-color: rgba(255, 255, 255, 0.8);
    display: block;
    position: absolute;
    opacity: 0;
    top: 100%;
    left: 0;
    padding-bottom: 61%;
    width: 61%;
    z-index: -1;
    transform-origin: 0 0;
    transform: rotate(-35deg) skewX(20deg);
    transition: all, 0.2s; }
  #info:hover:after {
    opacity: 1; }

.mobile_intro {
  display: none; }

@media screen and (orientation: landscape) and (max-width: 768px) {
  .rabbit {
    display: none; }

  #house {
    position: absolute;
    top: 0;
    left: 25%;
    height: 81%;
    width: 50%; }

  .mobile_intro {
    display: block;
    background: #fff;
    padding: 1em;
    position: absolute;
    top: 120px;
    left: 0;
    width: 20%; }
    .mobile_intro:before {
      display: block;
      content: " ";
      position: absolute;
      top: 5px;
      right: -10px;
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 10px solid #fff; } }
@media screen and (orientation: portrait) and (max-width: 768px) {
  .rabbit {
    display: none; }

  #house {
    position: absolute;
    top: 100px;
    width: 100%;
    height: 93vw; }

  .mobile_intro {
    display: block;
    background: #fff;
    padding: 1em;
    position: absolute;
    top: 75vh;
    left: 10%;
    right: 10%;
    width: 80%; }
    .mobile_intro:before {
      display: block;
      content: " ";
      position: absolute;
      top: -10px;
      left: 5px;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #fff; } }
.modal__content figure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 10px 10px 0; }
  .modal__content figure figcaption {
    padding: 20px; }
.modal__content h2 {
  padding-top: 24px;
  padding-bottom: 18px; }
.modal__content h3 {
  padding-top: 24px;
  padding-bottom: 18px; }
.modal__content p {
  padding: 6px 0 12px 0;
  max-width: 450px; }
.modal__content .img-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between; }
  .modal__content .img-container img {
    padding: 20px; }
.modal__content .img-border {
  border: 2px solid #000; }
.modal__content .table__borderless {
  border: 0; }
  .modal__content .table__borderless td {
    padding: 10px; }
.modal__content .row {
  display: flex;
  justify-content: space-around; }
.modal__content footer {
  padding: 6px 0 12px 0; }
.modal__content .flex {
  display: flex;
  align-items: center; }
  .modal__content .flex > * {
    margin-left: 10px;
    margin-right: 10px; }
.modal__content ul {
  padding-bottom: 20px; }
  .modal__content ul li {
    display: list-item;
    list-style-position: inside;
    list-style-type: circle; }
.modal__content .audio {
  margin: 20px;
  cursor: pointer; }

@media screen and (orientation: landscape), screen and (min-width: 769px) {
  .onderzoek {
    display: flex;
    flex-wrap: wrap; }
    .onderzoek article:first-child {
      width: 40%; }
    .onderzoek article:last-child {
      width: 60%; } }
.portaal {
  height: 100%; }
  .portaal .row {
    height: 50%;
    align-items: center; }
    .portaal .row a {
      height: 60%;
      max-width: 33%;
      text-decoration: none;
      display: block; }
      .portaal .row a figure {
        height: 100%;
        padding: 0;
        display: flex;
        justify-content: flex-end;
        flex-direction: column;
        flex-wrap: nowrap; }
        .portaal .row a figure img {
          display: block;
          max-height: 80%;
          width: auto;
          max-width: 100%; }
        .portaal .row a figure figcaption {
          height: 20%;
          display: block;
          padding: 5px;
          text-align: center;
          text-decoration: none;
          color: #000; }

@media screen and (min-width: 768px) {
  .situering {
    padding-left: 400px;
    background: url("../img/situering.png") no-repeat 20px center;
    padding-bottom: 50px; } }
.onthaal.situering img {
  margin-top: 60px; }

@media screen and (min-width: 769px) {
  .quotes {
    padding-left: 100px;
    padding-right: 100px;
    max-width: 800px;
    margin: 0 auto; }
    .quotes article {
      display: flex;
      justify-content: space-between; }
    .quotes .quotes-img {
      background: url("../img/quotes_detail.png") no-repeat left center;
      overflow: auto;
      padding-left: 300px;
      position: relative;
      left: -100px; }
    .quotes p {
      padding-top: 30px;
      padding-bottom: 30px; } }
@media screen and (min-width: 768px) {
  .vragentrommel {
    padding-left: 400px;
    background: url("../img/vragentrommel.png") no-repeat 20px center;
    padding-bottom: 50px; } }
.vragentrommel article {
  display: flex;
  justify-content: space-between; }

@media screen and (min-width: 768px) {
  .begeleiders {
    padding-left: 420px;
    background: url("../img/wat_denken_begeleiders.png") no-repeat 20px center;
    padding-bottom: 50px; }
    .begeleiders h3 {
      background: url("../img/vragentrommel.png") no-repeat right center;
      background-size: 72px 79px;
      display: inline-block;
      padding-right: 100px;
      padding-top: 50px;
      padding-bottom: 40px; } }
.onthaal.begeleiders img {
  margin-top: 60px; }

.kinderen {
  max-width: 600px;
  margin: 0 auto; }
  .kinderen p {
    max-width: 600px;
    min-height: 100px;
    background-image: url("../img/kinderen.png");
    background-repeat: no-repeat; }
  .kinderen p:nth-child(odd) {
    padding-left: 150px;
    background-position: 20px center; }
  .kinderen p:nth-child(even) {
    padding-right: 150px;
    background-position: right center; }

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