/* Vendors */
/*
  HTML5 Reset :: style.css
  ----------------------------------------------------------
  We have learned much from/been inspired by/taken code where offered from:
  Eric Meyer          :: http://meyerweb.com
  HTML5 Doctor        :: http://html5doctor.com
  and the HTML5 Boilerplate :: http://html5boilerplate.com
-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent; }

main, article, aside, figure, footer, header, nav, section, details, summary {
  display: block; }

/* Handle box-sizing while better addressing child elements:
   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
  box-sizing: border-box; }

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

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
/* Responsive images and other embedded objects */
/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */
img,
object,
embed {
  max-width: 100%; }

/*
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
  In fact, it *will* cause problems with Google Maps' controls at small size.
  If this is the case for you, try uncommenting the following:
#map img {
    max-width: none;
}
*/
/* force a vertical scrollbar to prevent a jumpy page */
html {
  overflow-y: scroll; }

/* we use a lot of ULs that aren't bulleted.
  you'll have to restore the bullets within content,
  which is fine because they're probably customized anyway */
ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help; }

/* tables still need cellspacing="0" in the markup */
table {
  border-collapse: separate;
  border-spacing: 0; }

th {
  font-weight: bold;
  vertical-align: bottom; }

td {
  font-weight: normal;
  vertical-align: top; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

pre {
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */ }

input[type="radio"] {
  vertical-align: text-bottom; }

input[type="checkbox"] {
  vertical-align: bottom; }

.ie7 input[type="checkbox"] {
  vertical-align: baseline; }

.ie6 input {
  vertical-align: text-bottom; }

select, input, textarea {
  font: 99% sans-serif; }

table {
  font-size: inherit;
  font: 100%; }

small {
  font-size: 85%; }

strong {
  font-weight: bold; }

td, td img {
  vertical-align: top; }

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* standardize any monospaced elements */
pre, code, kbd, samp {
  font-family: monospace, sans-serif; }

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {
  cursor: pointer; }

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent; }

/* make buttons play nice in IE */
button,
input[type=button] {
  width: auto;
  overflow: visible; }

/* scale images in IE7 more attractively */
.ie7 img {
  -ms-interpolation-mode: bicubic; }

/* prevent BG image flicker upon hover
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/
/* let's clear some floats */
.clearfix:after {
  content: " ";
  display: block;
  clear: both; }

/* Utils */
/* Base */
/*------------------------------------------------------------------
[Color codes]
-------------------------------------------------------------------*/
/*
* Primary colors
*/
:root {
  --main-color: rgba(179, 174, 169, 1); }

/*
  * Set your font
  */
/*
   * Set your font size
   */
/*
   * Default spacing for margin-bottom and other paddings
   */
/*
   * Grid gutter used in tools.grid, 12 columns is standard
   */
@lost gutter 25px;
/*
   * Maximum width of the website
   */
/*
   * Adjust the border-radius
   */
/*
   * Media queries
   */
@custom-media --breakpoint-10 (min-width: 600px);
@custom-media --breakpoint-20 (min-width: 750px);
@custom-media --breakpoint-30 (min-width: 1000px);
@custom-media --breakpoint-40 (min-width: 1200px);
/*
   * Z-index plan
   */
/*
   * Animation beziers
   */
/* ---------------------------------------------------
      TEXT STYLING
  ----------------------------------------------------- */
*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  /* Safari/Chrome, other WebKit */
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */ }

html, body {
  margin: 0;
  font: 10px "basis-grotesque-medium-pro", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  line-height: 1.6;
  font-weight: normal; }

body {
  background-color: black;
  font-family: brandon-grotesque, sans-serif;
  font-weight: 500;
  font-style: normal;
  height: 100%; }

.fallback {
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  background-size: cover; }

.fallback__always-on {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  display: block;
  background-size: cover; }

.my-bottom-toolbar {
  position: fixed;
  bottom: 0px; }

@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */
  .my-bottom-toolbar {
    -webkit-transition: bottom 0.15s ease-in-out;
    transition: bottom 0.15s ease-in-out;
    box-shadow: 0 44px 0 rgba(255, 255, 255, 0.8); }
  .safari-toolbars-hidden .my-bottom-toolbar {
    bottom: 44px; } }

#ajax-load {
  display: block;
  width: 100%;
  height: 100%;
  position: relative; }

.character__bg-image {
  background-image: url("../img/karakter/karakterpagina_achtergrond_sm.jpg"); }
  @media (min-width: 1200px) {
    .character__bg-image {
      background-image: url("../img/karakter/karakterpagina_achtergrond_md.jpg"); } }
  @media (min-width: 1921px) {
    .character__bg-image {
      background-image: url("../img/karakter/karakterpagina_achtergrond_lg.jpg"); } }

.start-game {
  display: -webkit-box;
  display: flex;
  width: 15%; }
  .start-game__button {
    cursor: pointer;
    display: -webkit-box;
    display: flex;
    align-self: center;
    top: unset;
    left: unset; }
  .start-game__wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center; }

.fullscreen {
  top: 0;
  left: 0; }
  .fullscreen__button {
    cursor: pointer; }
  .fullscreen__wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100; }

.endpoint {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center; }
  .endpoint h1 {
    color: white;
    font-size: 6vw;
    text-align: center; }
  .endpoint video {
    width: 100%;
    height: 100%;
    z-index: 0;
    display: -webkit-box;
    display: flex;
    align-self: center;
    -webkit-box-pack: center;
            justify-content: center; }

.video-wrapper {
  display: table;
  position: relative; }

.playpause {
  display: block;
  position: relative;
  border: 8px solid white;
  box-shadow: 0 4px 6px -3px rgba(0, 0, 0, 0.3), inset 0 3px 4px -2px rgba(0, 0, 0, 0.25);
  position: relative;
  width: 80px;
  height: 80px;
  background: grey;
  background-image: linear-gradient(120deg, rgba(166, 166, 166, 0.3) 50%, grey 51%);
  border-radius: 50%;
  -webkit-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.465, 1.55) 0.2s, border-width 0.4s cubic-bezier(0.68, -0.55, 0.465, 1.55);
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.465, 1.55) 0.2s, border-width 0.4s cubic-bezier(0.68, -0.55, 0.465, 1.55);
  margin: auto;
  position: absolute;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%; }
  .playpause:before {
    display: block;
    position: absolute;
    content: "";
    bottom: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border: 30px solid transparent;
    border-width: 25px 0px 25px 40px;
    border-radius: 0;
    border-left-color: white;
    -webkit-transform: translate(-13px, 50%);
            transform: translate(-13px, 50%); }
  .playpause:hover, .playpause.active {
    border: 4px solid white; }

.endpoint-overlay {
  width: 100%;
  height: 100%;
  padding-top: 22.5%;
  z-index: 10; }
  .endpoint-overlay p {
    color: white;
    font-size: 1.2vw;
    text-align: center; }
  .endpoint-overlay a {
    color: white;
    font-weight: bold;
    font-weight: 900;
    text-decoration: none; }
    .endpoint-overlay a:hover {
      text-decoration: underline; }

.modal, .blocker {
  z-index: 1000000 !important; }

.blocker:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.05em; }

.blocker {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 1;
  padding: 20px;
  box-sizing: border-box;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  text-align: center; }

.modal {
  display: none;
  vertical-align: middle;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  background-image: url("../img/popup.jpg");
  background-size: cover;
  background-size: 100% 100%;
  font-size: 1.6rem;
  padding: 3rem;
  width: auto;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 10px #000; }

.modal a.close-modal {
  position: absolute;
  top: -12.5px;
  right: -12.5px;
  display: block;
  width: 30px;
  height: 30px;
  text-indent: -9999px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==); }

.motion-btn {
  max-width: 70px;
  display: inline-block; }

.gyscope_text_ios13-higher {
  display: none; }

.gyscope_text_ios13-older {
  display: none; }

#toggle-fullscreen {
  cursor: pointer;
  height: auto;
  display: block;
  width: 25%;
  position: absolute;
  z-index: 200; }

.no-js #loader {
  display: none; }

.js #loader {
  display: block;
  position: absolute;
  left: 100px;
  top: 0; }

.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000000;
  background-color: black;
  background-size: cover !important;
  background-position: center;
  background-repeat: no-repeat; }

.cookies {
  padding: 20px;
  bottom: 0; }
  .cookies p {
    font-family: 'arial', sans-serif;
    font-size: 1.4rem;
    line-height: 1;
    color: white; }

.navigation {
  background-color: rgba(0, 0, 0, 0.3);
  height: 100%;
  width: 200px;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1000000;
  padding-top: 15px; }
  @media screen and (max-width: 1024px) {
    .navigation {
      display: none; } }
  .navigation ul {
    padding-left: 30px; }
  .navigation li {
    line-height: 1.2rem; }
    .navigation li a {
      font-size: 1.4rem;
      line-height: 1.8;
      display: block;
      color: white; }
      .navigation li a:active {
        background-color: yellow; }
  .navigation .todo:before, .navigation .done:before {
    display: block;
    width: 10px;
    height: 1.8em;
    content: " ";
    position: absolute;
    float: left;
    margin-left: -15px; }
  .navigation .todo:before {
    background-color: red; }
  .navigation .done:before {
    background-color: lightgreen; }

.characters_container {
  display: table;
  margin: 0 auto;
  border: 10px solid blue; }

.character_wrapper {
  position: absolute;
  left: 0;
  top: 0;
  right: 0; }

.character_animation_wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  overflow: hidden; }

.character_image_wrapper {
  position: relative;
  z-index: 10; }
  .character_image_wrapper img {
    margin: 0 auto;
    display: block;
    left: 0;
    right: 0;
    max-height: 100%; }

.character_map {
  position: absolute;
  width: 33.33%;
  height: 100%;
  z-index: 100;
  cursor: pointer; }

.character_1_map {
  left: 0; }

.character_2_map {
  left: 33.33%; }

.character_3_map {
  right: 0; }

.fs {
  width: 100%;
  height: 100%;
  max-height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  left: 0;
  top: 0; }

.screenfill {
  height: 100%;
  width: 100%;
  left: 0;
  display: block;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  position: absolute; }

.container {
  position: absolute;
  left: auto; }

.imgwrap {
  max-height: 100%;
  max-height: 100vh;
  max-width: 100vw;
  max-width: 100%;
  z-index: -1;
  opacity: 0; }

.parrelax_wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  max-height: 100%;
  max-height: 100vh;
  top: 0; }
  .parrelax_wrapper img {
    max-width: 100%;
    max-height: 100%;
    z-index: 0; }
  .parrelax_wrapper #scene {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden; }
    .parrelax_wrapper #scene .layer {
      display: -webkit-box;
      display: flex;
      height: 100%;
      width: 100%; }
      .parrelax_wrapper #scene .layer .bgi {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
        -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
        bottom: 0;
        background-size: cover;
        position: absolute;
        width: 110%;
        left: -5%;
        top: -10%;
        bottom: -5%; }
        .parrelax_wrapper #scene .layer .bgi img, .parrelax_wrapper #scene .layer .bgi video {
          position: absolute;
          width: 100%; }
        .parrelax_wrapper #scene .layer .bgi--s {
          width: 100%;
          left: 0;
          top: 0;
          bottom: 0; }

video {
  position: absolute;
  top: 0;
  left: 0; }

/*------------------------------------------------------------------
[Tekstbalk]
-------------------------------------------------------------------*/
.choice {
  position: absolute;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  display: -webkit-box;
  display: flex;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 100;
  width: 45%;
  bottom: 11%; }
  @media (max-width: 768px) {
    .choice {
      top: 130%;
      width: 90%; } }
  .choice .character__icon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10; }

.border {
  position: absolute;
  z-index: 10;
  width: 8px; }

.border--left {
  left: -8px;
  top: 0;
  display: none; }
  @media (min-width: 1024px) {
    .border--left {
      height: 100%;
      display: block; } }

.border--right {
  right: -8px;
  top: 0;
  display: none; }
  @media (min-width: 1024px) {
    .border--right {
      height: 100%;
      display: block; } }

.border--top {
  top: 0; }
  @media (min-width: 1024px) {
    .border--top {
      display: none; } }

.border--bottom {
  bottom: 0px; }
  @media (min-width: 1024px) {
    .border--bottom {
      display: none; } }

/*------------------------------------------------------------------
[Mobile]
-------------------------------------------------------------------*/
.mobile_arrow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10 !important; }
  @media (min-width: 768px) {
    .mobile_arrow {
      display: none; } }

.audio_toggle {
  position: absolute;
  left: 15px;
  bottom: 15px;
  width: 40px;
  height: 40px;
  z-index: 100000 !important;
  background-size: cover;
  background-image: url("../img/geluidknop.png"); }
  .audio_toggle.off {
    background-image: url("../img/geluidknop_uit.png"); }

/*------------------------------------------------------------------
[Buttons]
-------------------------------------------------------------------*/
.left, .right {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100000; }

.choice .choice_wrapper {
  position: relative;
  display: block;
  width: 100%; }

.btn-images .left__wrapper {
  background: url("../img/btn-bg--a.png");
  background-size: 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; }

.btn-images .right__wrapper {
  background: url("../img/btn-bg--b.png");
  background-size: 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; }

.btn {
  position: absolute;
  top: 0;
  font-size: 0.55vw;
  font-weight: bold;
  font-weight: 600;
  position: absolute;
  text-align: center;
  width: 21%;
  color: white;
  line-height: 1.2em;
  height: 20%;
  text-transform: uppercase;
  z-index: 1000; }
  @media (max-width: 768px) {
    .btn {
      font-size: 1.4vw; } }
  .btn a, .btn a:hover, .btn a:visited, .btn a:active {
    color: white;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center; }
  .btn--a {
    top: 31%;
    right: 3.5%; }
  .btn--b {
    top: 56%;
    right: 3.5%; }

/*------------------------------------------------------------------
[Typewriter effect]
-------------------------------------------------------------------*/
#choice__text {
  position: absolute;
  top: 30%;
  left: 27%;
  width: calc(100% - 55%);
  height: 45%;
  display: inline;
  z-index: 2000; }
  #choice__text #text {
    position: absolute;
    font-size: 1.8em;
    line-height: 1.25em;
    letter-spacing: 0;
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    resize: none;
    padding-bottom: 5px;
    overflow: auto; }

#cursor {
  position: absolute;
  color: black;
  display: block; }

.chars {
  visibility: hidden; }

/*------------------------------------------------------------------
[Raadsel]
-------------------------------------------------------------------*/
.raadsel_block {
  position: absolute;
  top: 0;
  left: 0; }

.raadsel_question {
  border: 1px solid lightgrey;
  border-radius: 3px;
  position: absolute;
  top: 30%;
  right: 4%;
  max-width: 20.5%;
  font-size: 2rem; }

/* Parts */
/* ------------------------------------------------------------------
/* Roate screen
*/
.rotate-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
  width: 100%;
  height: 100%;
  z-index: 1000; }

.iconContainer {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px; }
  .iconContainer p {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin: 0;
    font-size: 20px;
    opacity: 0; }

.rotate-notice {
  position: absolute;
  margin-left: -100px;
  width: 200px;
  left: 50%;
  top: 50%;
  margin-top: 80px;
  text-align: center; }
  .rotate-notice h1 {
    color: white; }

.rotate-phone {
  position: relative;
  left: 50%;
  margin-left: -50px;
  width: 0;
  height: 0;
  border: 0 solid grey;
  background: #fff;
  border-radius: 10px;
  box-sizing: border-box; }
  .rotate-phone i {
    text-align: center;
    width: 100%;
    line-height: 120px;
    font-size: 50px;
    color: #454545;
    opacity: 0; }

@media only screen and (min-height: 400px) and (max-width: 1023px) {
  .rotate-overlay {
    display: block; }
  .rotate-overlay .rotate-phone {
    -webkit-animation: sizeIncrease .5s forwards ease,  borderIncrease .5s .5s forwards ease,  rotateRight .7s 1s forwards ease;
            animation: sizeIncrease .5s forwards ease,  borderIncrease .5s .5s forwards ease,  rotateRight .7s 1s forwards ease; }
  .rotate-overlay .rotate-phone i {
    -webkit-animation: fadeIn .5s .8s forwards ease;
            animation: fadeIn .5s .8s forwards ease; }
  .rotate-overlay .iconContainer p {
    -webkit-animation: fadeIn .5s 1.3s forwards ease;
            animation: fadeIn .5s 1.3s forwards ease; } }

/* KEYFRAMES
------------------------------------------- */
/* Animate width + height */
@-webkit-keyframes sizeIncrease {
  0% {
    width: 0;
    height: 10px; }
  50% {
    width: 100px;
    height: 10px; }
  100% {
    width: 100px;
    height: 160px; } }
@keyframes sizeIncrease {
  0% {
    width: 0;
    height: 10px; }
  50% {
    width: 100px;
    height: 10px; }
  100% {
    width: 100px;
    height: 160px; } }

/* Add borders */
@-webkit-keyframes borderIncrease {
  100% {
    border-width: 20px 10px; } }
@keyframes borderIncrease {
  100% {
    border-width: 20px 10px; } }

/* fade-in  */
@-webkit-keyframes fadeIn {
  100% {
    color: #000;
    opacity: 1; } }
@keyframes fadeIn {
  100% {
    color: #000;
    opacity: 1; } }

/* Rotate device */
@-webkit-keyframes rotateRight {
  100% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); } }
@keyframes rotateRight {
  100% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); } }

.beginscherm_1 {
  background: url("../../assets/img/scenes/beginscherm/sm/beginscherm_1.png"); }
  @media (min-width: 1200px) {
    .beginscherm_1 {
      background: url("../../assets/img/scenes/beginscherm/md/beginscherm_1.png"); } }

.beginscherm_2 {
  background: url("../../assets/img/scenes/beginscherm/sm/beginscherm_2.png"); }
  @media (min-width: 1200px) {
    .beginscherm_2 {
      background: url("../../assets/img/scenes/beginscherm/md/beginscherm_2.png"); } }

.beginscherm_3 {
  background: url("../../assets/img/scenes/beginscherm/sm/beginscherm_3.png"); }
  @media (min-width: 1200px) {
    .beginscherm_3 {
      background: url("../../assets/img/scenes/beginscherm/md/beginscherm_3.png"); } }

.beginscherm_4 {
  background: url("../../assets/img/scenes/beginscherm/sm/beginscherm_4.png"); }
  @media (min-width: 1200px) {
    .beginscherm_4 {
      background: url("../../assets/img/scenes/beginscherm/md/beginscherm_4.png"); } }

.beginscherm_5 {
  background: url("../../assets/img/scenes/beginscherm/sm/beginscherm_5.png"); }
  @media (min-width: 1200px) {
    .beginscherm_5 {
      background: url("../../assets/img/scenes/beginscherm/md/beginscherm_5.png"); } }

.beginscherm_6 {
  background: url("../../assets/img/scenes/beginscherm/sm/beginscherm_6.png"); }
  @media (min-width: 1200px) {
    .beginscherm_6 {
      background: url("../../assets/img/scenes/beginscherm/md/beginscherm_6.png"); } }

.bos_1 {
  background: url("../../assets/img/scenes/bos/sm/bos_1.png"); }
  @media (min-width: 1200px) {
    .bos_1 {
      background: url("../../assets/img/scenes/bos/md/bos_1.png"); } }

.bos_2 {
  background: url("../../assets/img/scenes/bos/sm/bos_2.png"); }
  @media (min-width: 1200px) {
    .bos_2 {
      background: url("../../assets/img/scenes/bos/md/bos_2.png"); } }

.bos_3 {
  background: url("../../assets/img/scenes/bos/sm/bos_3.png"); }
  @media (min-width: 1200px) {
    .bos_3 {
      background: url("../../assets/img/scenes/bos/md/bos_3.png"); } }

.bos_4 {
  background: url("../../assets/img/scenes/bos/sm/bos_4.png"); }
  @media (min-width: 1200px) {
    .bos_4 {
      background: url("../../assets/img/scenes/bos/md/bos_4.png"); } }

.bos_5 {
  background: url("../../assets/img/scenes/bos/sm/bos_5.png"); }
  @media (min-width: 1200px) {
    .bos_5 {
      background: url("../../assets/img/scenes/bos/md/bos_5.png"); } }

.bos_6 {
  background: url("../../assets/img/scenes/bos/sm/bos_6.png"); }
  @media (min-width: 1200px) {
    .bos_6 {
      background: url("../../assets/img/scenes/bos/md/bos_6.png"); } }

.brug_1 {
  background: url("../../assets/img/scenes/brug/sm/brug_1.png"); }
  @media (min-width: 1200px) {
    .brug_1 {
      background: url("../../assets/img/scenes/brug/md/brug_1.png"); } }

.brug_2 {
  background: url("../../assets/img/scenes/brug/sm/brug_2.png"); }
  @media (min-width: 1200px) {
    .brug_2 {
      background: url("../../assets/img/scenes/brug/md/brug_2.png"); } }

.brug_3 {
  background: url("../../assets/img/scenes/brug/sm/brug_3.png"); }
  @media (min-width: 1200px) {
    .brug_3 {
      background: url("../../assets/img/scenes/brug/md/brug_3.png"); } }

.dorp_1 {
  background: url("../../assets/img/scenes/dorp/sm/dorp_1.png"); }
  @media (min-width: 1200px) {
    .dorp_1 {
      background: url("../../assets/img/scenes/dorp/md/dorp_1.png"); } }

.dorp_2 {
  background: url("../../assets/img/scenes/dorp/sm/dorp_2.png"); }
  @media (min-width: 1200px) {
    .dorp_2 {
      background: url("../../assets/img/scenes/dorp/md/dorp_2.png"); } }

.dorp_3 {
  background: url("../../assets/img/scenes/dorp/sm/dorp_3.png"); }
  @media (min-width: 1200px) {
    .dorp_3 {
      background: url("../../assets/img/scenes/dorp/md/dorp_3.png"); } }

.dorp_4 {
  background: url("../../assets/img/scenes/dorp/sm/dorp_4.png"); }
  @media (min-width: 1200px) {
    .dorp_4 {
      background: url("../../assets/img/scenes/dorp/md/dorp_4.png"); } }

.dorp_5 {
  background: url("../../assets/img/scenes/dorp/sm/dorp_5.png"); }
  @media (min-width: 1200px) {
    .dorp_5 {
      background: url("../../assets/img/scenes/dorp/md/dorp_5.png"); } }

.dorp_6 {
  background: url("../../assets/img/scenes/dorp/sm/dorp_6.png"); }
  @media (min-width: 1200px) {
    .dorp_6 {
      background: url("../../assets/img/scenes/dorp/md/dorp_6.png"); } }

.dorp_7 {
  background: url("../../assets/img/scenes/dorp/sm/dorp_7.png"); }
  @media (min-width: 1200px) {
    .dorp_7 {
      background: url("../../assets/img/scenes/dorp/md/dorp_7.png"); } }

.draak_1 {
  background: url("../../assets/img/scenes/draak/sm/draak_1.png"); }
  @media (min-width: 1200px) {
    .draak_1 {
      background: url("../../assets/img/scenes/draak/md/draak_1.png"); } }

.draak_2 {
  background: url("../../assets/img/scenes/draak/sm/draak_2.png"); }
  @media (min-width: 1200px) {
    .draak_2 {
      background: url("../../assets/img/scenes/draak/md/draak_2.png"); } }

.draak_3 {
  background: url("../../assets/img/scenes/draak/sm/draak_3.png"); }
  @media (min-width: 1200px) {
    .draak_3 {
      background: url("../../assets/img/scenes/draak/md/draak_3.png"); } }

.draak_4 {
  background: url("../../assets/img/scenes/draak/sm/draak_4.png"); }
  @media (min-width: 1200px) {
    .draak_4 {
      background: url("../../assets/img/scenes/draak/md/draak_4.png"); } }

.draak_5 {
  background: url("../../assets/img/scenes/draak/sm/draak_5.png"); }
  @media (min-width: 1200px) {
    .draak_5 {
      background: url("../../assets/img/scenes/draak/md/draak_5.png"); } }

.draak_6 {
  background: url("../../assets/img/scenes/draak/sm/draak_6.png"); }
  @media (min-width: 1200px) {
    .draak_6 {
      background: url("../../assets/img/scenes/draak/md/draak_6.png"); } }

.erfgenaam_1 {
  background: url("../../assets/img/scenes/erfgenaam/sm/erfgenaam_1.png"); }
  @media (min-width: 1200px) {
    .erfgenaam_1 {
      background: url("../../assets/img/scenes/erfgenaam/md/erfgenaam_1.png"); } }

.erfgenaam_2 {
  background: url("../../assets/img/scenes/erfgenaam/sm/erfgenaam_2.png"); }
  @media (min-width: 1200px) {
    .erfgenaam_2 {
      background: url("../../assets/img/scenes/erfgenaam/md/erfgenaam_2.png"); } }

.erfgenaam_3 {
  background: url("../../assets/img/scenes/erfgenaam/sm/erfgenaam_3.png"); }
  @media (min-width: 1200px) {
    .erfgenaam_3 {
      background: url("../../assets/img/scenes/erfgenaam/md/erfgenaam_3.png"); } }

.erfgenaam_4 {
  background: url("../../assets/img/scenes/erfgenaam/sm/erfgenaam_4.png"); }
  @media (min-width: 1200px) {
    .erfgenaam_4 {
      background: url("../../assets/img/scenes/erfgenaam/md/erfgenaam_4.png"); } }

.erfgenaam_5 {
  background: url("../../assets/img/scenes/erfgenaam/sm/erfgenaam_5.png"); }
  @media (min-width: 1200px) {
    .erfgenaam_5 {
      background: url("../../assets/img/scenes/erfgenaam/md/erfgenaam_5.png"); } }

.fles_1 {
  background: url("../../assets/img/scenes/fles/sm/fles_1.png"); }
  @media (min-width: 1200px) {
    .fles_1 {
      background: url("../../assets/img/scenes/fles/md/fles_1.png"); } }

.fles_2 {
  background: url("../../assets/img/scenes/fles/sm/fles_2.png"); }
  @media (min-width: 1200px) {
    .fles_2 {
      background: url("../../assets/img/scenes/fles/md/fles_2.png"); } }

.fles_3 {
  background: url("../../assets/img/scenes/fles/sm/fles_3.png"); }
  @media (min-width: 1200px) {
    .fles_3 {
      background: url("../../assets/img/scenes/fles/md/fles_3.png"); } }

.fles_4 {
  background: url("../../assets/img/scenes/fles/sm/fles_4.png"); }
  @media (min-width: 1200px) {
    .fles_4 {
      background: url("../../assets/img/scenes/fles/md/fles_4.png"); } }

.fles_5 {
  background: url("../../assets/img/scenes/fles/sm/fles_5.png"); }
  @media (min-width: 1200px) {
    .fles_5 {
      background: url("../../assets/img/scenes/fles/md/fles_5.png"); } }

.graf_1 {
  background: url("../../assets/img/scenes/graf/sm/graf_1.png"); }
  @media (min-width: 1200px) {
    .graf_1 {
      background: url("../../assets/img/scenes/graf/md/graf_1.png"); } }

.graf_2 {
  background: url("../../assets/img/scenes/graf/sm/graf_2.png"); }
  @media (min-width: 1200px) {
    .graf_2 {
      background: url("../../assets/img/scenes/graf/md/graf_2.png"); } }

.graf_3 {
  background: url("../../assets/img/scenes/graf/sm/graf_3.png"); }
  @media (min-width: 1200px) {
    .graf_3 {
      background: url("../../assets/img/scenes/graf/md/graf_3.png"); } }

.graf_4 {
  background: url("../../assets/img/scenes/graf/sm/graf_4.png"); }
  @media (min-width: 1200px) {
    .graf_4 {
      background: url("../../assets/img/scenes/graf/md/graf_4.png"); } }

.graf_5 {
  background: url("../../assets/img/scenes/graf/sm/graf_5.png"); }
  @media (min-width: 1200px) {
    .graf_5 {
      background: url("../../assets/img/scenes/graf/md/graf_5.png"); } }

.graf_6 {
  background: url("../../assets/img/scenes/graf/sm/graf_6.png"); }
  @media (min-width: 1200px) {
    .graf_6 {
      background: url("../../assets/img/scenes/graf/md/graf_6.png"); } }

.graf_7 {
  background: url("../../assets/img/scenes/graf/sm/graf_7.png"); }
  @media (min-width: 1200px) {
    .graf_7 {
      background: url("../../assets/img/scenes/graf/md/graf_7.png"); } }

.graf_8 {
  background: url("../../assets/img/scenes/graf/sm/graf_8.png"); }
  @media (min-width: 1200px) {
    .graf_8 {
      background: url("../../assets/img/scenes/graf/md/graf_8.png"); } }

.grot_1 {
  background: url("../../assets/img/scenes/grot/sm/grot_1.png"); }
  @media (min-width: 1200px) {
    .grot_1 {
      background: url("../../assets/img/scenes/grot/md/grot_1.png"); } }

.grot_2 {
  background: url("../../assets/img/scenes/grot/sm/grot_2.png"); }
  @media (min-width: 1200px) {
    .grot_2 {
      background: url("../../assets/img/scenes/grot/md/grot_2.png"); } }

.grot_3 {
  background: url("../../assets/img/scenes/grot/sm/grot_3.png"); }
  @media (min-width: 1200px) {
    .grot_3 {
      background: url("../../assets/img/scenes/grot/md/grot_3.png"); } }

.grot_4 {
  background: url("../../assets/img/scenes/grot/sm/grot_4.png"); }
  @media (min-width: 1200px) {
    .grot_4 {
      background: url("../../assets/img/scenes/grot/md/grot_4.png"); } }

.grot_5 {
  background: url("../../assets/img/scenes/grot/sm/grot_5.png"); }
  @media (min-width: 1200px) {
    .grot_5 {
      background: url("../../assets/img/scenes/grot/md/grot_5.png"); } }

.grot_6 {
  background: url("../../assets/img/scenes/grot/sm/grot_6.png"); }
  @media (min-width: 1200px) {
    .grot_6 {
      background: url("../../assets/img/scenes/grot/md/grot_6.png"); } }

.hallucinatie_1 {
  background: url("../../assets/img/scenes/hallucinatie/sm/hallucinatie_1.png"); }
  @media (min-width: 1200px) {
    .hallucinatie_1 {
      background: url("../../assets/img/scenes/hallucinatie/md/hallucinatie_1.png"); } }

.hallucinatie_2 {
  background: url("../../assets/img/scenes/hallucinatie/sm/hallucinatie_2.png"); }
  @media (min-width: 1200px) {
    .hallucinatie_2 {
      background: url("../../assets/img/scenes/hallucinatie/md/hallucinatie_2.png"); } }

.hallucinatie_3 {
  background: url("../../assets/img/scenes/hallucinatie/sm/hallucinatie_3.png"); }
  @media (min-width: 1200px) {
    .hallucinatie_3 {
      background: url("../../assets/img/scenes/hallucinatie/md/hallucinatie_3.png"); } }

.hallucinatie_4 {
  background: url("../../assets/img/scenes/hallucinatie/sm/hallucinatie_4.png"); }
  @media (min-width: 1200px) {
    .hallucinatie_4 {
      background: url("../../assets/img/scenes/hallucinatie/md/hallucinatie_4.png"); } }

.herberg_1 {
  background: url("../../assets/img/scenes/herberg/sm/herberg_1.png"); }
  @media (min-width: 1200px) {
    .herberg_1 {
      background: url("../../assets/img/scenes/herberg/md/herberg_1.png"); } }

.herberg_2 {
  background: url("../../assets/img/scenes/herberg/sm/herberg_2.png"); }
  @media (min-width: 1200px) {
    .herberg_2 {
      background: url("../../assets/img/scenes/herberg/md/herberg_2.png"); } }

.herberg_3 {
  background: url("../../assets/img/scenes/herberg/sm/herberg_3.png"); }
  @media (min-width: 1200px) {
    .herberg_3 {
      background: url("../../assets/img/scenes/herberg/md/herberg_3.png"); } }

.herberg_4 {
  background: url("../../assets/img/scenes/herberg/sm/herberg_4.png"); }
  @media (min-width: 1200px) {
    .herberg_4 {
      background: url("../../assets/img/scenes/herberg/md/herberg_4.png"); } }

.herberg_5 {
  background: url("../../assets/img/scenes/herberg/sm/herberg_5.png"); }
  @media (min-width: 1200px) {
    .herberg_5 {
      background: url("../../assets/img/scenes/herberg/md/herberg_5.png"); } }

.jagen_1 {
  background: url("../../assets/img/scenes/jagen/sm/jagen_1.png"); }
  @media (min-width: 1200px) {
    .jagen_1 {
      background: url("../../assets/img/scenes/jagen/md/jagen_1.png"); } }

.jagen_2 {
  background: url("../../assets/img/scenes/jagen/sm/jagen_2.png"); }
  @media (min-width: 1200px) {
    .jagen_2 {
      background: url("../../assets/img/scenes/jagen/md/jagen_2.png"); } }

.jagen_3 {
  background: url("../../assets/img/scenes/jagen/sm/jagen_3.png"); }
  @media (min-width: 1200px) {
    .jagen_3 {
      background: url("../../assets/img/scenes/jagen/md/jagen_3.png"); } }

.jagen_4 {
  background: url("../../assets/img/scenes/jagen/sm/jagen_4.png"); }
  @media (min-width: 1200px) {
    .jagen_4 {
      background: url("../../assets/img/scenes/jagen/md/jagen_4.png"); } }

.jagen_5 {
  background: url("../../assets/img/scenes/jagen/sm/jagen_5.png"); }
  @media (min-width: 1200px) {
    .jagen_5 {
      background: url("../../assets/img/scenes/jagen/md/jagen_5.png"); } }

.jagen_6 {
  background: url("../../assets/img/scenes/jagen/sm/jagen_6.png"); }
  @media (min-width: 1200px) {
    .jagen_6 {
      background: url("../../assets/img/scenes/jagen/md/jagen_6.png"); } }

.koning_1 {
  background: url("../../assets/img/scenes/koning/sm/koning_1.png"); }
  @media (min-width: 1200px) {
    .koning_1 {
      background: url("../../assets/img/scenes/koning/md/koning_1.png"); } }

.koning_2 {
  background: url("../../assets/img/scenes/koning/sm/koning_2.png"); }
  @media (min-width: 1200px) {
    .koning_2 {
      background: url("../../assets/img/scenes/koning/md/koning_2.png"); } }

.koning_3 {
  background: url("../../assets/img/scenes/koning/sm/koning_3.png"); }
  @media (min-width: 1200px) {
    .koning_3 {
      background: url("../../assets/img/scenes/koning/md/koning_3.png"); } }

.koning_4 {
  background: url("../../assets/img/scenes/koning/sm/koning_4.png"); }
  @media (min-width: 1200px) {
    .koning_4 {
      background: url("../../assets/img/scenes/koning/md/koning_4.png"); } }

.koning_5 {
  background: url("../../assets/img/scenes/koning/sm/koning_5.png"); }
  @media (min-width: 1200px) {
    .koning_5 {
      background: url("../../assets/img/scenes/koning/md/koning_5.png"); } }

.man_in_nood_1 {
  background: url("../../assets/img/scenes/man_in_nood/sm/man_in_nood_1.png"); }
  @media (min-width: 1200px) {
    .man_in_nood_1 {
      background: url("../../assets/img/scenes/man_in_nood/md/man_in_nood_1.png"); } }

.man_in_nood_2 {
  background: url("../../assets/img/scenes/man_in_nood/sm/man_in_nood_2.png"); }
  @media (min-width: 1200px) {
    .man_in_nood_2 {
      background: url("../../assets/img/scenes/man_in_nood/md/man_in_nood_2.png"); } }

.man_in_nood_3 {
  background: url("../../assets/img/scenes/man_in_nood/sm/man_in_nood_3.png"); }
  @media (min-width: 1200px) {
    .man_in_nood_3 {
      background: url("../../assets/img/scenes/man_in_nood/md/man_in_nood_3.png"); } }

.man_in_nood_4 {
  background: url("../../assets/img/scenes/man_in_nood/sm/man_in_nood_4.png"); }
  @media (min-width: 1200px) {
    .man_in_nood_4 {
      background: url("../../assets/img/scenes/man_in_nood/md/man_in_nood_4.png"); } }

.monster_1 {
  background: url("../../assets/img/scenes/monster/sm/monster_1.png"); }
  @media (min-width: 1200px) {
    .monster_1 {
      background: url("../../assets/img/scenes/monster/md/monster_1.png"); } }

.monster_2 {
  background: url("../../assets/img/scenes/monster/sm/monster_2.png"); }
  @media (min-width: 1200px) {
    .monster_2 {
      background: url("../../assets/img/scenes/monster/md/monster_2.png"); } }

.monster_3 {
  background: url("../../assets/img/scenes/monster/sm/monster_3.png"); }
  @media (min-width: 1200px) {
    .monster_3 {
      background: url("../../assets/img/scenes/monster/md/monster_3.png"); } }

.monster_4 {
  background: url("../../assets/img/scenes/monster/sm/monster_4.png"); }
  @media (min-width: 1200px) {
    .monster_4 {
      background: url("../../assets/img/scenes/monster/md/monster_4.png"); } }

.monster_5 {
  background: url("../../assets/img/scenes/monster/sm/monster_5.png"); }
  @media (min-width: 1200px) {
    .monster_5 {
      background: url("../../assets/img/scenes/monster/md/monster_5.png"); } }

.monster_6 {
  background: url("../../assets/img/scenes/monster/sm/monster_6.png"); }
  @media (min-width: 1200px) {
    .monster_6 {
      background: url("../../assets/img/scenes/monster/md/monster_6.png"); } }

.ochtend_1 {
  background: url("../../assets/img/scenes/ochtend/sm/ochtend_1.png"); }
  @media (min-width: 1200px) {
    .ochtend_1 {
      background: url("../../assets/img/scenes/ochtend/md/ochtend_1.png"); } }

.ochtend_2 {
  background: url("../../assets/img/scenes/ochtend/sm/ochtend_2.png"); }
  @media (min-width: 1200px) {
    .ochtend_2 {
      background: url("../../assets/img/scenes/ochtend/md/ochtend_2.png"); } }

.ochtend_3 {
  background: url("../../assets/img/scenes/ochtend/sm/ochtend_3.png"); }
  @media (min-width: 1200px) {
    .ochtend_3 {
      background: url("../../assets/img/scenes/ochtend/md/ochtend_3.png"); } }

.profetie_1 {
  background: url("../../assets/img/scenes/profetie/sm/profetie_1.png"); }
  @media (min-width: 1200px) {
    .profetie_1 {
      background: url("../../assets/img/scenes/profetie/md/profetie_1.png"); } }

.profetie_2 {
  background: url("../../assets/img/scenes/profetie/sm/profetie_2.png"); }
  @media (min-width: 1200px) {
    .profetie_2 {
      background: url("../../assets/img/scenes/profetie/md/profetie_2.png"); } }

.profetie_3 {
  background: url("../../assets/img/scenes/profetie/sm/profetie_3.png"); }
  @media (min-width: 1200px) {
    .profetie_3 {
      background: url("../../assets/img/scenes/profetie/md/profetie_3.png"); } }

.profetie_4 {
  background: url("../../assets/img/scenes/profetie/sm/profetie_4.png"); }
  @media (min-width: 1200px) {
    .profetie_4 {
      background: url("../../assets/img/scenes/profetie/md/profetie_4.png"); } }

.profetie_5 {
  background: url("../../assets/img/scenes/profetie/sm/profetie_5.png"); }
  @media (min-width: 1200px) {
    .profetie_5 {
      background: url("../../assets/img/scenes/profetie/md/profetie_5.png"); } }

.sleutel_1 {
  background: url("../../assets/img/scenes/sleutel/sm/sleutel_1.png"); }
  @media (min-width: 1200px) {
    .sleutel_1 {
      background: url("../../assets/img/scenes/sleutel/md/sleutel_1.png"); } }

.sleutel_2 {
  background: url("../../assets/img/scenes/sleutel/sm/sleutel_2.png"); }
  @media (min-width: 1200px) {
    .sleutel_2 {
      background: url("../../assets/img/scenes/sleutel/md/sleutel_2.png"); } }

.sleutel_3 {
  background: url("../../assets/img/scenes/sleutel/sm/sleutel_3.png"); }
  @media (min-width: 1200px) {
    .sleutel_3 {
      background: url("../../assets/img/scenes/sleutel/md/sleutel_3.png"); } }

.tweesprong_1 {
  background: url("../../assets/img/scenes/tweesprong/sm/tweesprong_1.png"); }
  @media (min-width: 1200px) {
    .tweesprong_1 {
      background: url("../../assets/img/scenes/tweesprong/md/tweesprong_1.png"); } }

.tweesprong_2 {
  background: url("../../assets/img/scenes/tweesprong/sm/tweesprong_2.png"); }
  @media (min-width: 1200px) {
    .tweesprong_2 {
      background: url("../../assets/img/scenes/tweesprong/md/tweesprong_2.png"); } }

.tweesprong_3 {
  background: url("../../assets/img/scenes/tweesprong/sm/tweesprong_3.png"); }
  @media (min-width: 1200px) {
    .tweesprong_3 {
      background: url("../../assets/img/scenes/tweesprong/md/tweesprong_3.png"); } }

.tweesprong_4 {
  background: url("../../assets/img/scenes/tweesprong/sm/tweesprong_4.png"); }
  @media (min-width: 1200px) {
    .tweesprong_4 {
      background: url("../../assets/img/scenes/tweesprong/md/tweesprong_4.png"); } }

.verleiding_1 {
  background: url("../../assets/img/scenes/verleiding/sm/verleiding_1.png"); }
  @media (min-width: 1200px) {
    .verleiding_1 {
      background: url("../../assets/img/scenes/verleiding/md/verleiding_1.png"); } }

.verleiding_2 {
  background: url("../../assets/img/scenes/verleiding/sm/verleiding_2.png"); }
  @media (min-width: 1200px) {
    .verleiding_2 {
      background: url("../../assets/img/scenes/verleiding/md/verleiding_2.png"); } }

.verleiding_3 {
  background: url("../../assets/img/scenes/verleiding/sm/verleiding_3.png"); }
  @media (min-width: 1200px) {
    .verleiding_3 {
      background: url("../../assets/img/scenes/verleiding/md/verleiding_3.png"); } }

.verleiding_4 {
  background: url("../../assets/img/scenes/verleiding/sm/verleiding_4.png"); }
  @media (min-width: 1200px) {
    .verleiding_4 {
      background: url("../../assets/img/scenes/verleiding/md/verleiding_4.png"); } }

.vogelvrouwen_1 {
  background: url("../../assets/img/scenes/vogelvrouwen/sm/vogelvrouwen_1.png"); }
  @media (min-width: 1200px) {
    .vogelvrouwen_1 {
      background: url("../../assets/img/scenes/vogelvrouwen/md/vogelvrouwen_1.png"); } }

.vogelvrouwen_2 {
  background: url("../../assets/img/scenes/vogelvrouwen/sm/vogelvrouwen_2.png"); }
  @media (min-width: 1200px) {
    .vogelvrouwen_2 {
      background: url("../../assets/img/scenes/vogelvrouwen/md/vogelvrouwen_2.png"); } }

.vogelvrouwen_3 {
  background: url("../../assets/img/scenes/vogelvrouwen/sm/vogelvrouwen_3.png"); }
  @media (min-width: 1200px) {
    .vogelvrouwen_3 {
      background: url("../../assets/img/scenes/vogelvrouwen/md/vogelvrouwen_3.png"); } }

.vreemd_geluid_1 {
  background: url("../../assets/img/scenes/vreemd_geluid/sm/vreemd_geluid_1.png"); }
  @media (min-width: 1200px) {
    .vreemd_geluid_1 {
      background: url("../../assets/img/scenes/vreemd_geluid/md/vreemd_geluid_1.png"); } }

.vreemd_geluid_2 {
  background: url("../../assets/img/scenes/vreemd_geluid/sm/vreemd_geluid_2.png"); }
  @media (min-width: 1200px) {
    .vreemd_geluid_2 {
      background: url("../../assets/img/scenes/vreemd_geluid/md/vreemd_geluid_2.png"); } }

.vreemd_geluid_3 {
  background: url("../../assets/img/scenes/vreemd_geluid/sm/vreemd_geluid_3.png"); }
  @media (min-width: 1200px) {
    .vreemd_geluid_3 {
      background: url("../../assets/img/scenes/vreemd_geluid/md/vreemd_geluid_3.png"); } }

.vreemd_geluid_4 {
  background: url("../../assets/img/scenes/vreemd_geluid/sm/vreemd_geluid_4.png"); }
  @media (min-width: 1200px) {
    .vreemd_geluid_4 {
      background: url("../../assets/img/scenes/vreemd_geluid/md/vreemd_geluid_4.png"); } }

.vreemd_geluid_5 {
  background: url("../../assets/img/scenes/vreemd_geluid/sm/vreemd_geluid_5.png"); }
  @media (min-width: 1200px) {
    .vreemd_geluid_5 {
      background: url("../../assets/img/scenes/vreemd_geluid/md/vreemd_geluid_5.png"); } }

.vreemd_geluid_6 {
  background: url("../../assets/img/scenes/vreemd_geluid/sm/vreemd_geluid_6.png"); }
  @media (min-width: 1200px) {
    .vreemd_geluid_6 {
      background: url("../../assets/img/scenes/vreemd_geluid/md/vreemd_geluid_6.png"); } }

.vreemd_geluid_7 {
  background: url("../../assets/img/scenes/vreemd_geluid/sm/vreemd_geluid_7.png"); }
  @media (min-width: 1200px) {
    .vreemd_geluid_7 {
      background: url("../../assets/img/scenes/vreemd_geluid/md/vreemd_geluid_7.png"); } }

.dood_1 {
  background: url("../../assets/img/scenes/dood/sm/dood_1.png"); }
  @media (min-width: 1200px) {
    .dood_1 {
      background: url("../../assets/img/scenes/dood/md/dood_1.png"); } }

.dood_2 {
  background: url("../../assets/img/scenes/dood/sm/dood_2.png"); }
  @media (min-width: 1200px) {
    .dood_2 {
      background: url("../../assets/img/scenes/dood/md/dood_2.png"); } }

.dood_3 {
  background: url("../../assets/img/scenes/dood/sm/dood_3.png"); }
  @media (min-width: 1200px) {
    .dood_3 {
      background: url("../../assets/img/scenes/dood/md/dood_3.png"); } }

.dood_4 {
  background: url("../../assets/img/scenes/dood/sm/dood_4.png"); }
  @media (min-width: 1200px) {
    .dood_4 {
      background: url("../../assets/img/scenes/dood/md/dood_4.png"); } }

.dood_5 {
  background: url("../../assets/img/scenes/dood/sm/dood_5.png"); }
  @media (min-width: 1200px) {
    .dood_5 {
      background: url("../../assets/img/scenes/dood/md/dood_5.png"); } }

.dood_6 {
  background: url("../../assets/img/scenes/dood/sm/dood_6.png"); }
  @media (min-width: 1200px) {
    .dood_6 {
      background: url("../../assets/img/scenes/dood/md/dood_6.png"); } }

.dood_7 {
  background: url("../../assets/img/scenes/dood/sm/dood_7.png"); }
  @media (min-width: 1200px) {
    .dood_7 {
      background: url("../../assets/img/scenes/dood/md/dood_7.png"); } }

.dood_8 {
  background: url("../../assets/img/scenes/dood/sm/dood_8.png"); }
  @media (min-width: 1200px) {
    .dood_8 {
      background: url("../../assets/img/scenes/dood/md/dood_8.png"); } }

.beginscherm_animation_1 {
  background-image: url("../img/beginscherm/animaties/beginscherm_1_animatie.png");
  /* is statisch want animatie is te groot */ }

.beginscherm_animation_5 {
  background-image: url("../img/beginscherm/animaties/beginscherm_5.png"); }

.beginscherm_knetterijs {
  background-image: url("../img/beginscherm/lg/beginscherm_4_knetterijs.png");
  z-index: 0; }

.beginscherm_basic {
  background-image: url("../img/beginscherm/lg/beginscherm_6.png");
  z-index: 0; }

.sleutel_animation_3 {
  background-image: url("../img/scenes/sleutel/animaties/sleutel_3_animatie.png"); }

.vreemd_geluid_animation_2 {
  background-image: url("../img/scenes/vreemd_geluid/animaties/vreemd_geluid_2_animatie.png"); }

.vreemd_geluid_animation_3 {
  background-image: url("../img/scenes/vreemd_geluid/vreemd_geluid_3.png");
  /* is statisch want animatie is te groot */ }

.vreemd_geluid_animation_5 {
  background-image: url("../img/scenes/vreemd_geluid/animaties/vreemd_geluid_5.png"); }

.vogelvrouwen_animation_1 {
  background-image: url("../img/scenes/vogelvrouwen/animaties/vogelvrouwen_1_animatie.png"); }

.tweesprong_animation_2 {
  background-image: url("../img/scenes/tweesprong/animaties/tweesprong_2_animatie_lg.png"); }

.tweesprong_animation_4 {
  background-image: url("../img/scenes/tweesprong/animaties/tweesprong_4_animatie.png"); }

.profetie_animation_1 {
  background-image: url("../img/scenes/profetie/animaties/profetie_1_sm.png"); }
  @media (min-width: 1200px) {
    .profetie_animation_1 {
      background-image: url("../img/scenes/profetie/animaties/profetie_1_md.png"); } }
  @media (min-width: 1921px) {
    .profetie_animation_1 {
      background-image: url("../img/scenes/profetie/animaties/profetie_1_lg.png"); } }

.monster_animation_2_1 {
  background-image: url("../img/scenes/monster/animaties/monster_2_animatie_1.png"); }

.monster_animation_2_2 {
  background-image: url("../img/scenes/monster/animaties/monster_2_animatie_2.png"); }

.man_in_nood_animation_2 {
  background-image: url("../img/scenes/man_in_nood/animaties/man_in_nood_2_animatie.png"); }

.jagen_animation_1 {
  background-image: url("../img/scenes/jagen/animaties/jagen_1.png"); }

.jagen_animation_5 {
  background-image: url("../img/scenes/jagen/animaties/jagen_5.png"); }

.herberg_animation_1_1 {
  background-image: url("../img/scenes/herberg/animaties/herberg_1_animatie_1.png"); }

.herberg_animation_1_2 {
  background-image: url("../img/scenes/herberg/animaties/herberg_1_animatie_2.png"); }

.herberg_animation_1_3 {
  background-image: url("../img/scenes/herberg/animaties/herberg_1_animatie_3.png"); }

.herberg_animation_2 {
  background-image: url("../img/scenes/herberg/animaties/herberg_2_animatie.png"); }

.herberg_animation_4_1 {
  background-image: url("../img/scenes/herberg/animaties/herberg_4_animatie_1.png"); }

.herberg_animation_4_2 {
  background-image: url("../img/scenes/herberg/animaties/herberg_4_animatie_2.png"); }

.hallucinatie_animation_4_1 {
  background-image: url("../img/scenes/hallucinatie/animaties/hallucinatie_4_animatie1.png"); }

.hallucinatie_animation_4_2 {
  background-image: url("../img/scenes/hallucinatie/animaties/hallucinatie_4_animatie2.png"); }

.graf_animation_1 {
  background-image: url("../img/scenes/graf/animaties/graf_1_animatie.png"); }

.graf_animation_2 {
  background-image: url("../img/scenes/graf/animaties/graf_2_animatie.png"); }

.graf_animation_6 {
  background-image: url("../img/scenes/graf/animaties/graf_6_animatie.png"); }

.graf_animation_8 {
  background-image: url("../img/scenes/graf/animaties/graf_8_animatie.png"); }

.fles_animation_3 {
  background-image: url("../img/scenes/fles/animaties/fles_3_sm.png"); }
  @media (min-width: 1200px) {
    .fles_animation_3 {
      background-image: url("../img/scenes/fles/animaties/fles_3_md.png"); } }
  @media (min-width: 1921px) {
    .fles_animation_3 {
      background-image: url("../img/scenes/fles/animaties/fles_3_lg.png"); } }

.erfgenaam_animation_1 {
  background-image: url("../img/scenes/erfgenaam/animaties/erfgenaam_1_animatie.png"); }

.dorp_animation_2 {
  background-image: url("../img/scenes/dorp/animaties/dorp_2_animatie.png"); }

.brug_animation_1 {
  background-image: url("../img/scenes/brug/animaties/brug_1.png"); }

.brug_animation_2 {
  background-image: url("../img/scenes/brug/animaties/brug_2_animatie.png"); }