@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,800;1,400;1,500;1,600;1,700;1,800&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,800;1,900&display=swap');
* {box-sizing: border-box;}
body, html {background: rgb(16,103,47);
background: -moz-radial-gradient(circle, rgba(16,103,47,1) 0%, rgba(5,61,25,1) 100%);
background: -webkit-radial-gradient(circle, rgba(16,103,47,1) 0%, rgba(5,61,25,1) 100%);
background: radial-gradient(circle, rgba(16,103,47,1) 0%, rgba(5,61,25,1) 100%);
font-family:"Raleway", "Arial", "Helvetica"!important;font-size:1.15rem;font-weight:400;
    margin: 0; padding:0;
    color: #333;
     font-size:16px;width:100%;height:100%;
  }
body.final,html.final {background:#000;}
body.final .logo {display:none;}
body.final #nextBtn {display:none;}
body.startslide .logo {display:none;}
.text-center {text-align:center;}
.container {width:900px;margin:15px auto;height:500px;background:none;overflow:hidden;position:relative;border-radius:16px;}
.slide {width:100%;height:100vh;padding:40px;box-sizing:border-box;position:absolute;top:0; left:100vw;transition:left 0.5s ease;background:#fff;overflow-y:auto;}
.fa-circle-check {color:#50b44e;}

.slide.active {left:0;}
.slide.left {left:-100vw;}
.slide.final {background:#000;}
.slide.final .video {width:100%;}
h1, h2, h3 {font-weight:bold;margin-bottom:20px;}
.mobiel {display:none;}
.desktop {display:inline-block;}

h1 {font-size:2em;color:#0f4d23;margin-bottom:50px;}
h2 {font-size:2em;margin-top:0px;}

p, ul {line-height:1.5em;font-size:1.0em;margin-top:0px;margin-bottom:10px;}
ul { margin-left:20px; }

.nav-buttons {position:fixed;bottom:15px;right:5px;z-index:999;}
.nav-buttons button {width:auto!important;cursor:pointer;}

.slide.oplossing {padding:0px;}
.content-left {width:100%;float:left;padding:40px 20px 40px 40px;}
.content-left img {padding:0 0 0 10px;margin-top:-50px;max-width:230px;}
.icon-row {width:100%;display:inline-block;align-items:center;justify-content:space-around;margin:0 0 0 -30px;}
.icon-col {width:33%;float:left;text-align:center;flex:1;margin:0 0 10px 0;font-size:14px;}
.icon-col .icon {background:green;width:40px;height:40px;line-height:40px;margin:0 auto 5px auto;color:#FFF;text-align:center;border-radius:30px;}
.icon-col .text {width:100%;text-align:center;display:block;margin:0px;}
.icon-col img {height:60px;}

.highlight-stats ul {padding:0px;margin:0px;}
.highlight-stats li {line-height:32px;margin:0px;font-size:14px;float:left;width:50%;list-style:none;}
.highlight-stats span {background:#c62127;border:1px solid #8f191c;color:#FFF;padding:3px 6px;border-radius:5px;font-weight:bold;}
.highlight-stats label {min-width:230px;display:inline-block;}

.investering {}
.investering button {background:#3b7f38;color:#FFF;border:0px;border-radius:10px;padding:3px 6px;cursor:pointer;font-weight:bold;box-shadow:0 1px 3px 0px rgba(0,0,0,0.25)}
.investering button:hover {background:#0f4d23;}
.investering h3 {margin-bottom:0px;}
.investering ul {padding:0px;margin:0 0 10px 0;display:inline-block;}
.investering li {width:50%;float:left;font-size:14px;list-style:none;line-height:20px;padding-bottom:10px;}
.investering li i {}
.investering li label {min-width:160px;display:inline-block;}
.investering .stats {background:#eee;border:1px solid #ebebeb;padding:5px 6px;border-radius:8px;font-size:14px;}
.investering p span {background:#FFF;border:1px solid #CCC;padding:2px 6px;border-radius:8px;font-weight:bold;}
.investering p span.investment {background:#3b7f38;border-color:#0f4d23;color:#FFF;} 
.investering .progress-bar {margin:0px;}


.roadmap {display:flex;flex-direction:column;margin:30px 0;border-left:2px solid #337ab7;padding-left:30px;}
.roadmap-item {margin-bottom:20px;position:relative;}
.roadmap-item:before {content:'';position:absolute;left:-33px;top:0;width:20px;height:20px;background:#337ab7;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #337ab7;}

table {width:100%;border-collapse:collapse;margin-top:20px;font-size:0.9em;}
table, td, th {border:1px solid #ccc;}

th, td {padding:10px;text-align:left;}
th {background:#f0f0f0;}

a {color:#337ab7;text-decoration:none;}
a:hover {text-decoration:underline;}

.logo {display:block;margin:0 auto;align-items:center;font-size:1.2em;font-weight:bold;text-align:center;}
.logo img {width:32px;height:auto;margin-top:10px;}
.ref-block {font-size:0.9em;color:#555;}

.startslide {background:none;}
.startslide img {width:60%;}
.startslide button, .nav-buttons button {width:60%;background:#5db13d;color:#FFF;border: 1px solid #64d35e;box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.1);border-radius: 5px;
font-size:14px;font-weight:bold;text-align:center;padding:10px 15px;margin:15px 0 0 0;cursor:pointer;}
.startslide button:hover, .nav-buttons button:hover {background:#64d35e;}

.verdienmodel label {font-weight:bold;color:#0f4d23;font-size:20px;}
.verdienmodel i {padding-right:5px;}
.verdienmodel ul {width:50%;float:left;padding:0px;margin:0 0 10px 0;}
.verdienmodel li {list-style:none;font-size:16px;line-height:16px;padding:10px 10px 10px 0;}
.verdienmodel li small {line-height:16px;}

#myImg {border-radius: 5px;cursor: pointer;transition: 0.3s;}
#myImg:hover {opacity: 0.7;}
.modal {display: none; position:fixed;padding-top:100px;left:0;top:0;width:100%;z-index:9999;height:100%;overflow: auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.9); /* Black w/ opacity */}

.modal-content {margin: auto;display: block;width: 80%;max-width: 700px;}
#caption {margin: auto;display: block;width: 80%;max-width: 700px;text-align: center;color: #ccc;padding: 10px 0;height: 150px;}
.modal-content, #caption {animation-name: zoom;animation-duration: 0.6s;}

#modal1 .modal-content {background-color:#fff;margin:10% auto;padding:20px;border-radius:8px;width:80%;max-width:600px;position:relative;}
#modal1 .close-text {color:#aaa;float:right;font-size:28px;font-weight:bold;position:absolute;right:20px;top:10px;cursor:pointer;}
#modal1 .close-text:hover, .close-text:focus {color:#000;text-decoration:none;cursor:pointer;}
@keyframes zoom {from {transform:scale(0)}to {transform:scale(1)}
}

/* The Close Button */
.close {position: absolute;top: 15px;right: 35px;color: #f1f1f1;font-size: 40px;font-weight: bold;transition: 0.3s;
}

.close:hover,
.close:focus {color: #bbb;text-decoration: none;cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){.modal-content {  width: 100%;}
}

.timeline-container {position: relative;width: 100%;padding: 40px 0;}

.timeline-line {position: relative;width: 100%;height: 4px;margin-top:50px;background: #ccc;margin: 60px 0;overflow: visible;}

/* De progress-balk en glow zijn eerst onzichtbaar, animaties starten alleen als parent slide active is */
.slide:not(.active) .timeline-progress,
.slide:not(.active) .timeline-glow,
.slide:not(.active) .timeline-milestone {animation: none !important;opacity:0;}

.timeline-progress {position: absolute;top:0;left:0;height:4px;background: #2e7d32;/* Groentint */width:0;/* Animatie om de lijn te laten groeien */animation: lineGrow 4s forwards ease;animation-delay:0.2s;/* kleine delay zodat de slide even "staat" */}

.timeline-milestone {position: absolute;top: -150px;width: 300px;text-align:left;opacity:0;}

.timeline-milestone .dot { background: rgb(16,103,47);
background: -moz-linear-gradient(173deg, rgba(16,103,47,1) 0%, rgba(76,177,68,1) 100%);
background: -webkit-linear-gradient(173deg, rgba(16,103,47,1) 0%, rgba(76,177,68,1) 100%);
background: linear-gradient(173deg, rgba(16,103,47,1) 0%, rgba(76,177,68,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#10672f",endColorstr="#4cb144",GradientType=1); 
width:20px;height:20px;border-radius:50%;border:4px solid #4cb144;box-shadow:0 0 0 2px #2e7d32;margin-bottom:10px;position:relative;z-index:90;}
.timeline-milestone .line {width:3px;height:110px;position:absolute;margin:0 0 0 12px;
background: rgb(16,103,47);
background: -moz-linear-gradient(180deg, rgba(16,103,47,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(16,103,47,1) 0%, rgba(255,255,255,1) 100%);
background: linear-gradient(180deg, rgba(16,103,47,1) 0%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#10672f",endColorstr="#ffffff",GradientType=1); }
.timeline-milestone h3 {margin:0px;padding:10px 0 5px 0;font-weight:400;}

.milestone-q1 {left:0%;}
.milestone-q1 .dot {bottom:-137px;}
.milestone-q1 .line, .milestone-q3 .line  { background: rgb(16,103,47);
background: -moz-linear-gradient(0deg, rgba(16,103,47,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(16,103,47,1) 0%, rgba(255,255,255,1) 100%);
background: linear-gradient(0deg, rgba(16,103,47,1) 0%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#10672f",endColorstr="#ffffff",GradientType=1); }
.milestone-q2 {left:25%;top:-30px;}
.milestone-q2 .dot {top:19px;}
.milestone-q3 {left:50%;}
.milestone-q3 .dot {bottom:-137px;}
.milestone-q4 {left:110%;transform:translateX(-100%);top:-30px;}
.milestone-q4 .dot {top:19px;}
.milestone-q4 .info {width:200px;}
.timeline-milestone .info {line-height:1.4em;margin-left:20px;padding:10px 0 0 10px;font-size:14px;}
.timeline-milestone .info strong {color:#b1b1b1;}

/* Animaties */
.progress-bar {position: relative;background: #eee;border-radius: 8px;overflow: hidden;height: 30px;width: 100%;margin: 10px 0;}
.progress-fill {background: linear-gradient(90deg, #82c46c 0%, #3b7f38 100%);height: 100%;width:0; /* Start vanaf 0 */line-height:30px;color:#fff;font-weight:bold;text-shadow:0 0 2px rgba(0,0,0,0.5);text-align:center;white-space:nowrap;transition: width 1.5s ease; /* Transition voor vloeiende animatie */font-size:14px;}
.progress-container h3 {margin-bottom:0px;}
.progress-container p {margin-top:10px;}
.bar-container {margin: 30px 0;font-size:1em;}

.bar-label {margin-bottom:5px;font-weight:bold;}
.bar-outer {width:100%;max-width:400px; /* Pas aan naar wens */height:30px;background:#ddd;position:relative;border-radius:4px;overflow:hidden;}
.bar-inner {height:100%;background: linear-gradient(90deg, #82c46c 0%, #3b7f38 100%);}
.bar-text {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:0.9em;color:#fff;text-shadow:0 0 2px rgba(0,0,0,0.5);white-space:nowrap;}

.donut-container {text-align:center;width:200px;font-family: Arial, sans-serif;}
.donut-wrapper {position: relative;width: 150px;height: 150px;margin: 0 auto 10px auto;}
.donut {transform: rotate(-90deg);width:100%;height:auto;}
.donut-ring {fill:transparent;stroke:#eee;stroke-width:10;}
.donut-segment {fill:transparent;stroke:#2e7d32;stroke-width:10;stroke-linecap: round; stroke-dasharray: 282.743;stroke-dashoffset: 282.743;transition: stroke-dashoffset 2s ease; }
.donut-text {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;font-weight:bold;font-size:16px;line-height:1.2em;color:#333;}
.donut-subtext {font-size:0.9em;color:#666;}
.donut-segment {stroke-dasharray: 282.743px;stroke-dashoffset: 282.743px;}

.slide.active .donut-segment {stroke-dashoffset: calc(282.743px * 0.9);}

.contact {color:#FFF;margin-top:-90px;position:relative;text-align:center;}
.contact a {color:#82c46c;}

.tooltip{position:relative;}
.tooltip .dumClass {
    z-index: 10;
    display: none;
    padding: 14px 20px;
    bottom:20px;
    left:0;
    width: 240px;
    line-height: 16px;
    position: absolute;
}

.tooltip:hover .dumClass {
    display: inline;
    color: #ffffff;
    border: 1px solid #DCA;
    background: #444;
    -moz-border-radius: 11px;
    -webkit-border-radius: 11px;
    border-radius: 11px;
}

.dumClass:after {
    position: absolute;
    display: block;
    content: "";
    border-style: solid;
    border-width: 8px;
    height: 0;
    width: 0;
    border-color: #444 transparent transparent transparent;
    bottom: -16px;
    left: 14px;
}

/* lijn groeit van 0% naar 100% */
@keyframes lineGrow {0% { width:0%;}100% { width:100%;}}

/* glow beweegt mee langs de lijn */
@keyframes glowMove {0% {opacity:0;transform: translateX(0%);}5% {opacity:1;}100% {opacity:1;transform: translateX(100%);}}

/* De milestones verschijnen in volgorde. Q1 verschijnt vroeg, Q2 iets later, Q3 nog later, Q4 helemaal aan het eind. Gebruik animation-delay om dit te sturen.
*/

.milestone-q1 {animation: showEvent 1s forwards ease;animation-delay: 1s;/* Q1 verschijnt na 1s */}
.milestone-q2 {animation: showEvent 1s forwards ease;animation-delay: 2s;/* Q2 verschijnt na 2s */}
.milestone-q3 {animation: showEvent 1s forwards ease;animation-delay: 3s;/* Q3 verschijnt na 3s */}
.milestone-q4 {animation: showEvent 1s forwards ease;animation-delay: 4s;/* Q4 verschijnt na 4s */}

@keyframes showEvent {0% {opacity:0;}100% {opacity:1;}}
.modal-swipe {
  display:none; /* Standaard verborgen op grotere schermen */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.75);
}

.modal-swipe-content {
  background: rgba(0,0,0,0.5);
  margin: 10% auto;
  padding: 20px;
  border-radius:8px;
  width: 80%;
  max-width:300px;
  position:relative;
  text-align:center;
  font-family:Arial, sans-serif;
}
.modal-swipe-content p {color:#FFF;}
.close-swipe {
  color: #FFF;
  font-size: 28px;
  font-weight: bold;
  position:absolute;
  top:10px; right:10px;
  cursor:pointer;
}

.close-swipe:hover {
  color:#000;
}


.modal, .modal-swipe, #modal1 {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Als display:block; wordt gezet, na een kleine vertraging, pas je met JS de opacity aan */
.modal.show, .modal-swipe.show, #modal1.show {
  opacity:1;
}


@media only screen and (max-width: 980px) { /* Mobile */
  .container {width:98%;margin:0 1% 1% 1%;min-height:570px;padding:10px;position:relative;display:inline-block;}
  .slide {padding:15px;z-index:9999;}
  .logo img {height:24px;width:auto;margin-top:2px;}
  .mobiel {display:inline-block;}
  .desktop {display:none;}
  #chartAandoeningen {}
  .modal-swipe-content {margin-top:30%;}
  .bron {font-size:11px;}
  .startslide img {width:80%;}
  .startslide button {width:80%}
  .startslide.slide {padding-top:100px;}
  .icon-row {display:block;margin:0px;}
  .icon-row .icon-col {width: 33%;font-size:12px;float: left;margin:0 0 10px 0;height: autp;}
  .icon-col .text {margin:0px;font-size:10px;}
  .content-left {width:100%;padding:20px;}
  .icon-col {width:100%;height:auto;margin:0px;}
  .icon-col .icon {width:24px;height:24px;line-height:24px;}
  h1, h2 {margin-bottom:10px;}
  h2 {font-size:1.8em;}

  .highlight-stats li {width:100%;}
  .highlight-stats li i {padding-right:3px;}
  .highlight-stats label {min-width:auto;display:inline-block;margin:0 0 0 5px;line-height:16px;font-size:13px;}
  .highlight-stats span {float:right;line-height:16px;padding:1px 3px;font-size:12px;margin-top:7px;}
  .oplossing h2 {font-size:20px;padding-bottom:0px;margin-bottom:0px;}
  .oplossing p {font-size:15px;}
  .oplossing img {max-width:120px;padding-top:50px;}
  .verdienmodel ul {width:100%;}
  .verdienmodel li {padding:7px 0 7px 0;}
  .verdienmodel li:nth-child(1) {padding:0px;margin:0px;}

  .donut-row {gap:unset!important;margin-top:-20px!important;}
  .progress-container  {padding-left:10px;text-align:center;}
  .progress-container p.mobiel {padding-bottom:0px;margin-bottom:0px;}

  .investering h2 {font-size:19px;margin-bottom:2px;}
  .investering p {font-size:14px;}
  .investering .stats {display:none;}
  .investering .progress-fill {padding:0 10px;}
  .investering .progress-bar {display: none;}
  .investering li {padding-right:2px;}
  
  .timeline-container {padding:0px;}
  .timeline-milestone {position:relative;width:100%;top:auto;left:auto;}
  .timeline-milestone .dot {top:auto;bottom:auto;margin:0 0 0 4px;}
  .timeline-milestone .info {padding:0px 0 0 10px;width:90%;}
  .milestone-q1 .line { background: rgb(16,103,47);
  background: -moz-linear-gradient(0deg, rgba(16,103,47,1) 0%, rgba(76,166,41,1) 70%, rgba(255,255,255,1) 100%);
  background: -webkit-linear-gradient(0deg, rgba(16,103,47,1) 0%, rgba(76,166,41,1) 70%, rgba(255,255,255,1) 100%);
  background: linear-gradient(0deg, rgba(16,103,47,1) 0%, rgba(76,166,41,1) 70%, rgba(255,255,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#10672f",endColorstr="#ffffff",GradientType=1); }
      .milestone-q2 .line, .milestone-q3 .line { background: rgb(16,103,47);
  background: -moz-linear-gradient(180deg, rgba(16,103,47,1) 0%, rgba(77,166,47,1) 50%, rgba(16,103,47,1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(16,103,47,1) 0%, rgba(77,166,47,1) 50%, rgba(16,103,47,1) 100%);
  background: linear-gradient(180deg, rgba(16,103,47,1) 0%, rgba(77,166,47,1) 50%, rgba(16,103,47,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#10672f",endColorstr="#10672f",GradientType=1); }
      .milestone-q4 .line {  background: rgb(16,103,47);
  background: -moz-linear-gradient(180deg, rgba(16,103,47,1) 0%, rgba(77,166,47,1) 70%, rgba(255,255,255,1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(16,103,47,1) 0%, rgba(77,166,47,1) 70%, rgba(255,255,255,1) 100%);
  background: linear-gradient(180deg, rgba(16,103,47,1) 0%, rgba(77,166,47,1) 70%, rgba(255,255,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#10672f",endColorstr="#ffffff",GradientType=1); }
  .milestone-q4 {transform:none;}
  .timeline-progress {display:none;}
  .timeline-line {background:none;margin:0px;}
  .slide.final .video {width:160%;margin:15% 0 0 -30%;}
  .contact {color:#FFF;margin-top:-70px;}
}
@media (max-width: 360px) {
  .container {height:600px;
}