body, html {
  background-image:url('../../img/regen2.jpg');
  background-size:cove r;
}

.naar-boom {
  position:absolute;
  top:90px;
  right:25px;
  z-index:1000;
}
h1 {
  color:white;
  text-shadow:2px 2px 0px var(--green);
  margin-top:100px;
  padding-left:15px;
}
@media screen and (min-width:991px) {
  h1 {
    margin-top:200px;
  }
}
#opdracht {
  width:calc(100% - 30px);
  margin:15px 15px 30px 15px;
}
.beloftes {
  display:flex;
  flex-wrap:wrap;
  margin-bottom:100px;
}
.belofte {
  background-color:white;
  border:0px;
  border-bottom:2px solid var(--lightblue);
  padding: 25px;
  width:100%;
  outline:0px;
  margin-bottom:15px;
  border-radius:15px;
  color:var(--green);
  transition:.3s;
  box-shadow:0px 5px 15px -5px rgb(65 97 140 / 23%);
  font-weight:700;
  height:auto;
  min-height:calc(100% - 15px);
  position:relative;
  overflow:visible;
}
  .belofte:after {
    content:" ";
    width:60px;
    height:80px;
    background-image:url('../../img/blad1.png');
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    position:absolute;
    top:-20px;
    right:-4px;
    transform:rotate(-20deg);
  }
      [data-opdracht="Belangrijkste inzichten"] .belofte:after { background-image:url('../../img/blad-goud.png');    }
      [data-opdracht="Meest verrast, geraakt of geïnspireerd door"] .belofte:after { background-image:url('../../img/blad-rood.png');  }
      [data-opdracht="Mee naar de dagelijkse praktijk"] .belofte:after { background-image:url('../../img/blad-oranje.png');    }
      [data-opdracht="Overige opmerkingen"] .belofte:after { background-image:url('../../img/blad-bruin.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');   }


  .belofte h3 {
    font-size:20px;
    padding:0;
    margin:0;

  }
    .belofte .del {
      opacity:.5;
      font-size:16px;
      font-weight:bold;
      cursor:pointer;

      position:absolute;
      top:10px;
      left:10px;
    }
      .belofte .del:hover {
        opacity:1;
      }
  .belofte span {
    font-weight:500;
    font-size:18px;
  }
    .belofte.groen .afdeling, .belofte.goud .school {
      display:none;
    }


input[type="search"] {
  height:60px;
  line-height:60px;
  background-color:white;
  border:0px;
  border-bottom:2px solid var(--lightblue);
  padding:0px 25px;
  width:calc(100% - 80px);
  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;
  margin:0px 15px 25px 15px;
}
@media screen and (max-width:767px) {
  .beloftes .col-12 {
    width:100%;
  }
}