body, html {
  overflow:hidden;
}
.boom-container {
  height:calc(100% - 50px);
  width:calc(100% - 50px);
  position:relative;
  margin:50px auto 0px auto;
  transition:1s;
  opacity:0;
  transform:translateY(50%);
  transform-origin:center bottom;
}
.boom-container.set {
  opacity:1;
  transform:translateY(0%);
}
.boom {
  width:1280px;
  height:1920px;
  background-image:url('../../img/boom.png');
  background-size:100% auto;
  background-position:top center;
  background-repeat:no-repeat;
  *border:1px solid red;
  display:block;
  margin:0px auto;
  position:absolute;
  transform-origin:center;
  bottom:0%;
  left:50%;
}
@media (orientation: landscape) {
  .boom {
    height:1280px;
  }
}


  .boom .bladeren {
    *border:1px solid green;
    *background:rgba(0,255,0,.1);
    width:100%;
    height:1050px;
    border-radius:50% 50% 40% 40%;
    position:relative;
    overflow:visible;
  }
    .boom .bladeren .tak {
      *background-color:rgba(255, 0, 0,.2);
      position:absolute;
      display:block;
      pointer-events:none;
    }

    .tak.selected { border-color:yellow; }
      .boom .bladeren .tak:nth-of-type(1) { width:80px; height:700px; bottom:0; left:46%; }
      .boom .bladeren .tak:nth-of-type(2) { width:100px; height:430px; bottom:-8%; left:25%; transform:rotate(-70deg); }
      .boom .bladeren .tak:nth-of-type(3) { width:100px; height:260px; bottom:10%; left:33%; transform:rotate(-74deg); }
      .boom .bladeren .tak:nth-of-type(4) { width:100px; height:400px; bottom:20%; left:13%; transform:rotate(-56deg); }
      .boom .bladeren .tak:nth-of-type(5) { width:80px; height:150px; bottom:20%; left:7%; transform:rotate(-56deg); }
      .boom .bladeren .tak:nth-of-type(6) { width:100px; height:200px; bottom:23%; left:36%; transform:rotate(-36deg); }
      .boom .bladeren .tak:nth-of-type(7) { width:120px; height:400px; bottom:36%; left:29%; transform:rotate(-56deg); }
      .boom .bladeren .tak:nth-of-type(8) { width:80px; height:300px; bottom:36%; left:21%; transform:rotate(-60deg); }
      .boom .bladeren .tak:nth-of-type(9) { width:80px; height:160px; bottom:69%; left:17%; transform:rotate(-23deg); }
      .boom .bladeren .tak:nth-of-type(10) { width:120px; height:430px; bottom:55%; left:30%; transform:rotate(-23deg); }
      .boom .bladeren .tak:nth-of-type(11) { width:120px; height:200px; bottom:45%; left:45%; transform:rotate(2deg); }
      .boom .bladeren .tak:nth-of-type(12) { width:80px; height:350px; bottom:65%; left:45%; transform:rotate(2deg); }
      .boom .bladeren .tak:nth-of-type(13) { width:80px; height:350px; bottom:65%; left:58%; transform:rotate(32deg); }
      .boom .bladeren .tak:nth-of-type(14) { width:120px; height:580px; bottom:38%; left:66%; transform:rotate(42deg); }
      .boom .bladeren .tak:nth-of-type(15) { width:80px; height:160px; bottom:60%; left:60%; transform:rotate(0deg); }
      .boom .bladeren .tak:nth-of-type(16) { width:80px; height:540px; bottom:32%; left:76%; transform:rotate(50deg); }
      .boom .bladeren .tak:nth-of-type(17) { width:120px; height:240px; bottom:10%; left:56%; transform:rotate(50deg); }
      .boom .bladeren .tak:nth-of-type(18) { width:80px; height:480px; bottom:22%; left:78%; transform:rotate(55deg); }
      .boom .bladeren .tak:nth-of-type(19) { width:80px; height:410px; bottom:17%; left:82%; transform:rotate(65deg); }
      .boom .bladeren .tak:nth-of-type(20) { width:100px; height:200px; bottom:-4%; left:60%; transform:rotate(90deg); }
      .boom .bladeren .tak:nth-of-type(21) { width:80px; height:320px; bottom:-4%; left:80%; transform:rotate(70deg); }
      .boom .bladeren .tak:nth-of-type(22) { width:80px; height:280px; bottom:7%; left:78%; transform:rotate(50deg); }
      .boom .bladeren .tak:nth-of-type(23) { width:80px; height:500px; bottom:0; left:52%; transform:rotate(1deg); }
      .boom .bladeren .tak:nth-of-type(24) { width:60px; height:140px; bottom:6%; left:65%; transform:rotate(70deg); }




    .boom .bladeren .tak .blad {
      pointer-events:auto;
      width:30px;
      height:40px;
      position:absolute;
      bottom:0;
      left:calc(50% - 12.5px);
      background-image:url('../../img/blad1.png');
      background-size:contain;
      background-repeat:no-repeat;
      background-position:center;
      border-radius:12px 25px 15px 12px;
      cursor:pointer;
      opacity:0;
      transition:.3s;
      *border:1px solid red;
      z-index:1;

    }
    .boom-container.searching .boom .bladeren .tak .blad {
      width:0px;
      height:0px;
    }
    .boom-container .boom .bladeren .tak .blad.search-result {
      width:30px;
      height:40px;
    }
    .boom .bladeren .tak .blad.new {
      animation:newblad 2s 1;
    }
    @keyframes newblad {
      0% { width:300px; height:400px; *filter:drop-shadow(0px 0px 60px yellow);  }
      100% { width:30px; height:40px; *filter:drop-shadow(0px 0px 0px yellow);  }
    }


      .boom .bladeren .tak .blad:nth-of-type(1n + 1) { background-image:url('../../img/blad1.png'); }
      .boom .bladeren .tak .blad:nth-of-type(2n + 1) { background-image:url('../../img/blad2.png'); }
      .boom .bladeren .tak .blad:nth-of-type(3n + 1) { background-image:url('../../img/blad4.png'); }
      .boom .bladeren .tak .blad[data-kleur="groen"] {
        pointer-events:none;
      }

      .boom .bladeren .tak .blad[data-kleur="gekleurd"] {
         background-image:url('../../img/blad-goud.png');
         *filter:drop-shadow(0px 0px 10px yellow);
         transform:scale(2);
      }
      .boom .bladeren .tak .blad[data-opdracht="Belangrijkste inzichten"] { background-image:url('../../img/blad-goud.png');    }
      .boom .bladeren .tak .blad[data-opdracht="Meest verrast, geraakt of geïnspireerd door"] { background-image:url('../../img/blad-rood.png');   }
      .boom .bladeren .tak .blad[data-opdracht="Mee naar de dagelijkse praktijk"] { background-image:url('../../img/blad-oranje.png');   }
      .boom .bladeren .tak .blad[data-opdracht="Overige opmerkingen"] { background-image:url('../../img/blad-bruin.png');   }

      .boom .bladeren .tak .blad:hover {

        z-index:2;
      }

.boom .message {
  width:660px;
  height:500px;
  position:absolute;
  top:calc(50% - 300px);
  left:calc(50% - 250px);
  z-index:3;
  padding:70px 25px 50px 25px;
  font-weight:bold;
  color:var(--green);
  font-size:0;
  animation:no-message 1s 1;
  pointer-events:none;
  opacity:0;
  transition:1s;
  transform:translate(200%) rotate(-25deg); opacity:0;
  text-align:center;
}
.boom.message-loaded .message {
  animation:message 10s 1;
}
.boom.message-clicked .message {
  transform:translate(0%) rotate(1deg); opacity:1;
}
@keyframes no-message {
  0% {}
  100% {}
}
@keyframes message {
 0% { transform:translate(200%) rotate(-25deg) scale(1); opacity:0; }
 20% { transform:translate(0%) rotate(1deg) scale(1); opacity:1; }
 80% { transform:translate(0%) rotate(1deg) scale(1); opacity:1; }
 100% { transform:translate(-200%) rotate(25deg) scale(1); opacity:0; }
}
  .boom .message:after {
    content:" ";
    background-image:url('../../img/blad1.png');
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    width:500px;
    height:600px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%) rotate(97deg) scale(2);
    z-index:-1;
  }
  .boom .message[data-kleur="goud"] {
    *filter:drop-shadow(0px 0px 20px yellow);
  }
  .boom .message[data-kleur="goud"]:after {
    background-image:url('../../img/blad-goud.png');
  }
  .boom .message[data-opdracht="Belangrijkste inzichten"]:after { background-image:url('../../img/blad-goud.png');    }
  body .boom .message[data-opdracht="Meest verrast, geraakt of geïnspireerd door"] .tekst { color:#400808; text-shadow:0px 2px 1px rgba(150, 38, 38, .65);  }
  body .boom .message[data-opdracht="Meest verrast, geraakt of geïnspireerd door"]:after { background-image:url('../../img/blad-rood.png');   }
  body .boom .message[data-opdracht="Mee naar de dagelijkse praktijk"] .tekst { color:#412111; text-shadow:0px 2px 1px rgba(98, 46, 29, .65);  }
  body .boom .message[data-opdracht="Mee naar de dagelijkse praktijk"]:after { background-image:url('../../img/blad-oranje.png');   }
  body .boom .message[data-opdracht="Overige opmerkingen"] .tekst { color:#3d2929; text-shadow:0px 2px 1px rgb(69 51 51 / 27%);  }
  body .boom .message[data-opdracht="Overige opmerkingen"]:after { background-image:url('../../img/blad-bruin.png');   }

  .boom .message-layer {
    position:absolute;
    top:calc(50% - 50vh);
    left:calc(50% - 50vw);
    z-index:5;
    background:rgba(255,0,0,.0);
    display:block;
    width:100vw;
    height:100vh;
    pointer-events:none;
  }
    .boom.message-clicked .message-layer, .boom.message-loaded .message-layer {
      pointer-events:auto;
    }

  .boom .tekst {
    font-size:36px;
    *border:1px solid red;
    display:inline-block;
    height:70px;
    line-height:80px;
    white-space:nowrap;
    text-shadow:0px 2px 1px rgba(190, 229, 83, .65);
      transform:rotate(-2deg);
  }
  .boom .message[data-kleur="goud"] .tekst {
    color: #452d0b;
    text-shadow:0px 2px 1px rgba(255,227,90, .65);

  }
    .boom .tekst#opdracht{ font-size:42px;  }

    .boom .tekst#belofte {
      width:100%;
      height:auto;
      word-break:break-word;
      white-space:normal;
      line-height:50px;
      margin-top:32px;

    }




.boom .meter {
  width:400px;
  height:400px;
  background-image:url('../../img/meter.png');
  background-size:contain;
  background-position:center top;
  background-repeat:no-repeat;
  position:absolute;
  bottom:30px;
  right:30px;
}
  .boom .meter .wijzer {
    width:40px;
    height:40px;
    border-radius:30px;
    position:absolute;
    top:calc(50% - 20px);
    left:calc(50% - 20px);
    background:Green;
    overflow:visible;
    transition:3s;
  }
    .boom .meter .wijzer:after {
      width:100px;
      height:40px;
      position:absolute;
      top:0;
      right:0px;
      content:" ";
      background-image:url('../../img/wijzer.png');
      background-size:contain;
      background-position:center right;
      background-repeat:no-repeat;
    }
@media (orientation: landscape) {
  .boom .meter {
    bottom:-100px;
    width:300px;
    height:300px;
  }
}
.boom .loop {
  width:100%;
  height:50%;
  position:absolute;
  top:25%;
  left:0;
  pointer-events:none;
  transition:1s 3s;
  transform:scale(1);
  z-index:10;
  *display:none;
}
.boom.message-loaded .loop, .boom.message-clicked .loop, .searching .boom .loop {
  opacity:0;
  transform:scale(0);
  transition:1s;
}
  .loop .message {
    opacity:0;
    transform:translateX(-150%) scale(0);
    z-index:1;
    animation:fadeOut 1s 1;

  }
    .loop .message.highlighted {
      z-index: 2;
      transform:translateX(0%) scale(1);
      opacity:1;
      animation:fadeIn 3s 1;
    }
    .loop .message.highlighted + .message {
      *transform:translateX(150%) scale(0);

    }
    .boom.message-loaded .loop .message, .boom.message-clicked .loop .message {
      opacity:0;
    }

  @keyframes fadeIn {
    0% { transform: scale(0); margin-left:0px; }
    30% { margin-left:-300px; }
    100% { transform: scale(1); margin-left:0px; }
  }
  @keyframes fadeOut {
    0% { transform:scale(1); margin-left:0; }
    30% { margin-left:300px;  }
    100% { transform:scale(0); margin-left:0; }
  }


.search {
  width:100vw;
  height:100px;
  position:fixed;
  top:80px;
  left:0;
  z-index:5;
  pointer-events:none;
  transition:height .3s, top .3s;

}
.search.opened {
  opacity:1;
  pointer-events:auto;
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(20px);
  height:100vh;
  top:0;
}
  .search .close {
    position:absolute;
    height:40px;
    width:40px;
    position:absolute;
    top:15px;
    right:15px;
    text-align:center;
    line-height:40px;
    color:white;
    font-size:40px;
    opacity:0;
    transition:.3s;
    cursor:pointer;
    pointer-events:none;
  }
    .search.opened .close {
      opacity:1;
      pointer-events:auto;
    }
  .search .content {
    top:50%;
  	transform:translateY(-50%);
    position:relative;
    height:auto;
    padding:0px 25px;
    overflow:visible;
  }
  .search .content * {
    opacity:0;
    transition:.3s;
  }
  .search.opened .content * {
    opacity:1;
  }
    .search .content h2 {
      color:white;
      text-shadow:2px 2px 0px var(--green);
      font-size:0;
    }
    .search.opened .content h2 {
      font-size:26px;
    }
    .search .content input {
      height:60px;
      line-height:60px;
      background-color:white;
      border:0px;
      border-bottom:2px solid var(--lightblue);
      padding:0px 25px;
      width:calc(100% - 290px);
      outline:0px;
      display:inline-block;
      position:relative;

      border-radius:15px;
      font-size:20px;
      color:var(--green);
      transition:.3s;
      box-shadow:0px 5px 15px -5px rgb(65 97 140 / 23%);
      font-weight:700;
    }
    .search .content .send {
      height:64px;
      outline:none;
      width:auto;
      border:0;
      display:inline-block;
      background-color:var(--orange);
      border-bottom:2px solid rgba(0,0,0,.3);
      border-radius:15px;
      color:white;
      font-weight:900;
      font-size:20px;
      margin:0px auto;
      display:inline-block;
      text-align:center;
      line-height:64px;
      width:220px;
      margin-left:15px;
      opacity:1;
      float:right;
      pointer-events:auto;
      cursor:pointer;
    }
      .search .content .zoekterm {
        position:absolute;
        height:64px;
        line-height:60px;
        background:rgba(255,255,255,.4);
        border:2px solid white;
        padding:0px 15px;
        border-radius:15px;
        color:var(--green);
        font-size:20px;
        font-weight:bold;
        top:0px;
        right:260px;
        width:calc(100% - 550px);
        opacity:1;
        overflow:hidden;
        padding-right:60px;
        text-overflow:ellipsis;
        white-space: nowrap;
        max-width:400px;
        pointer-events:none;
        opacity:0;
        transition:.3s;
        box-shadow:0px 5px 15px -5px rgba(0,0,0,.15);
      }
      .search .content .zoekterm * {
        opacity:1;
      }
      .boom-container.searching + .search .content .zoekterm {
        opacity:1;
        pointer-events:auto;
      }
      .search.opened .content .zoekterm {
        pointer-events:none !important;
        opacity:0 !important;
      }
        .search .content .zoekterm .remove {
          position:absolute;
          top:20px;
          right:20px;
          color:var(--green);
          font-size:20px;
          height:20px;
          width:20px;
          text-align:center;
          line-height:20px;
          opacity:1;
        }

  .new-b {
    position:absolute;
    top:20px;
    right:25px;

  }
  .naar-overzicht {
    position:absolute;
    top:90px;
    right:25px;
  }


  .gebruikers-form {
    width:100%;
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    position:fixed;
    top:50vh;
    pointer-events:none;
    left:0;
    background: rgb(21,91,113);
  background: linear-gradient(133deg, rgba(21,91,113,.8) 0%, rgba(45,110,130,.6) 45%, rgba(19,73,89,1) 100%);
  backdrop-filter:blur(10px);
    background-size:cover;
    z-index:10;
    transition:.3s;
    opacity:0;
  }
    .gebruikers-form.opened {
      opacity:1;
      pointer-events:auto;
      top:0;
    }
    .gebruikers-form .close {
      position:absolute;
      height:40px;
      width:40px;
      position:absolute;
      top:15px;
      right:15px;
      text-align:center;
      line-height:40px;
      color:white;
      font-size:40px;
      opacity:1;
      transition:.3s;
      cursor:pointer;
    }

  .gebruikers-form .belofte-cont {
    animation:fadeIn .4s 1;
  }
  @keyframes fadeIn {
    0% {  opacity:0; margin-top:-124px; *transform:translateY(-50px);    }
    100% {  opacity:1; margin-top:0; *transform:translateY(0px);    }
  }
@media screen and (max-width:767px) {
  .search {
    top:35px;
  }
  .new-b { top:10px; }
  .search .content .send {
    height:44px;
    line-height:44px;
    width:130px;
    font-size:15px;
  }

  .search .content input {
    height:44px;
    line-height:44px;
    font-size:15px;
    width:20%;
  }
  .search.opened .content input {
    width:calc(100% - 50px);
    margin-bottom:20px;
  }

  .search .content .zoekterm {
    height:44px;
    line-height:44px;
    font-size:15px;
    right:160px;
    width:calc(100% - 290px);
    padding-right:40px;
  }
    .search .content .zoekterm .remove {
      right:10px;
      top:10px;
    }
}