body, html {
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  font-family:raleway;

}
@font-face {
    font-family:mont;
    src:url('img/Mont-HeavyDEMO.otf')
}

:root {
  --green: #5AAB3A;
  --darkgreen: #123016;
}

.intro {
  background-color:white;
  position:fixed;
  top:0;
  left:0;
  z-index:10000;
  width:100vw;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  transition:.5s 1.7s;
  overflow:hidden;
}
.loaded .intro {
  height:0vh;

}
.intro .container {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100%;
  width:100%;
  max-width:1200px;
}
  .intro .logo {
    width:40%;
    height:0px;
    padding-top:20%;
    position:relative;
    overflow:visible;
  }
    .intro .logo .cont {
      width:100%;
      height:100%;
      position:absolute;
      top:0;
      left:0;

    }
      .intro .logo .cont .greenlayer {

        position:absolute;
        top:calc(50% - 50vh);
        left:calc(50% - 50vw);
        width:100vw;
        height:100vh;
        clip-path:circle(0%);
        transition:.45s 1.3s;
        background-color:var(--green);
        z-index:2;
      }
      .loaded .intro .logo .cont .greenlayer {

        clip-path:circle(100%);
      }
      .intro .logo .cont .white {
        width:100%;
        height:100%;
        background-image:url('img/logo-wit.png');
        background-size:contain;
        background-position:center;
        background-repeat:no-repeat;
        top:0;
        left:0;
        position:absolute;
        z-index:3;
        opacity:0;
        transition:.3s 1.2s;
      }
      .loaded .intro .logo .cont .white {
        opacity:1;
      }
      .intro .logo .cont .animated {
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        z-index:1;
      }
        .intro .logo .cont .animated .kode {
          background-image:url('img/Kode.png');
          background-size:auto 25.75%;
          background-position:0 84.5%;
          background-repeat:no-repeat;
          width:100%;
          height:100%;
          position:absolute;
          top:0;
          left:-40%;
          transition:.6s;
          opacity:0;
        }
        .loaded .intro .logo .cont .animated .kode {
          opacity:1;
          left:0%;
        }
        .intro .logo .cont .animated .groen {
          background-image:url('img/Groen.png');
          background-size:auto 25.75%;
          background-position:0 84.5%;
          background-repeat:no-repeat;
          width:100%;
          height:100%;
          position:absolute;
          top:0;
          left:40%;
          transition:.6s .3s;
          opacity:0;
        }
        .loaded .intro .logo .cont .animated .groen {
          opacity:1;
          left:0%;
        }

        .intro .logo .cont .animated .radar {
          width:23.6%;
          padding-top:23.6%;
          position:absolute;
          top:9.3%;
          left:38.1%;
          background-image:url('img/radarsprite.png');
          background-size:100% auto;
          background-position:0 100%;

          transform:scale(0);
          transform-origin:bottom right;
          transition:.3s .8s;
        }
        .loaded .intro .logo .cont .animated .radar {
          transform:scale(1);
          animation: radar .4s steps(1, end) 3;
        }

@keyframes radar {
  0% { background-position:0 0%; }
  25% { background-position:0 33.3%;}
  50% { background-position:0 66.6%;}
  75% { background-position:0 100%;}
}


.from-top {
  opacity:0;
  transform:translateY(-100px);
  transition:.3s;
}
.loaded .from-top {
  opacity:1;
  transform:translateY(0);
}
.bg-green {
  background-color:var(--green);
  padding-top:100px;
}

.container-fluid {
  height:auto;
  width:100%;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction: column;
}
  .container-fluid.bg-green {
    *justify-content: center;
    justify-content:flex-end;
    height:0vh;
    transition:.3s;
    opacity:0;
  }
  .loaded .container-fluid.bg-green {
    height:50vh;
    min-height:600px;
    opacity:1;
  }
  .container-fluid.bg-green .container {
    transition: .5s .2s;
  }

.container-fluid .bg {
  position:absolute;
  top:0;
  left:0;
  opacity:.075;
}
  .container-fluid .bg span {
    font-size:100vh;
    font-weight:800;
    *text-transform:uppercase;
    color:var(--darkgreen);
    *letter-spacing:-5vh;
    font-family:mont;
  }
.container-fluid .container {
  height:auto;
  width:100%;
  max-width:1400px;
  margin:0px auto;
  padding:60px 0px;
}

.button {
  padding:0px 50px;
  height:46px;
  background-color:white;
  color:var(--green);
  margin:20px 0px;
  border-radius:46px;
  line-height:46px;
  font-weight:700;
  font-size:18px;
  display:inline-block;
  box-shadow:0px 7px 20px -5px rgba(0,0,0,.3);
  cursor:pointer;
  z-index:1;
  position:relative;
  overflow:hidden;
  transition:.3s;
  text-decoration:none;
}
.button ~ .button {
  margin-left:20px;
}
.button:hover {
  color:white;
  transition:all .2s, opacity .1s .15s;
  transform:scale(1.1) translateY(-5%);
  box-shadow:0px 24px 15px -20px rgba(0,0,0,.9);
}
  .button:after {
    background-color:black;
    position:absolute;
    width:46px;
    border-radius:46px;
    height:100%;
    content: " ";
    z-index:-1;
    left:calc(50% - 25px);
    transform:scale(0);
    opacity:0;
    transition:all .0s .3s, opacity .3s;

  }
  .button:hover:after {
    width:100%;
    left:0;
    transform:scale(1);
    opacity:1;
    transition:all .3s, width .3s .15s, left .3s .15s;
  }

  .button i {
    font-size:20px;
    margin-left:-10px;
    margin-right:5px;
  }
h1 {
  font-size:70px;
  padding:0;
  margin:0;
  font-weight:800;
  color:white;
  *text-transform:uppercase;
  letter-spacing:2px;
  font-family:mont;
}
  h1 .logo{
   background-image:url('img/logo-wit.png');
   background-size:contain;
   background-repeat:no-repeat;
   display:inline-block;
   top:-100px;
   left:0px;
   width:400px;
   height:153px;
   margin-right:15px;
 }
h2.words {
  margin:5px 0 30px 0;
  position:relative;
  overflow:visible;
  height:20px;
  padding-left:40px;
}
h2.words:before {
  content:" ";
  width:33px;
  height:3px;
  background-color:black;
  display:block;
  position:absolute;
  top:14px;
  left:0px;
}
  h2.words span {
    opacity:0;
    pointer-events:none;
    position:absolute;
    display:block;
    transition:.3s;
    transform:translateX(50px);
  }
    h2.words span.active {
      opacity:1;
      transform:translateX(0px);
      pointer-events:auto;
    }
    h2.words span.active ~ span {
      transform:translateX(-50px);
    }
p {
  font-size:18px;
  font-weight:500;
  line-height:26px;

}
.bg-green p {
  max-width:900px;
  color:var(--darkgreen);
}
.over {
  transition:.5s .4s;
}
.over h2 {
  display:block;
  width:100%;
  height:40px;
  color:#eee;
  font-size:50px;
  margin:0px 0px 20px 0px;
  font-weight:800;
}
.quotes {
  display:flex;
}
  .quote {
    width:100%;
    position:relative;
  }
    .quote:nth-of-type(2) {
      padding:0px 80px;
    }
    .quote h2 {
      font-size:30px;
      color:black;
      margin:0px;
      font-weight:700;
      padding:0;
    }
    .quote h3 {
      font-size:25px;
      *text-transform:uppercase;
      font-weight:500;
      *letter-spacing:2px;
      margin:0px;
    }
    .quote span {
      color:var(--green);
      font-weight:700;
      font-size:18px;
      margin:5px 0 0px 0;
      display:block;
      position:relative;
      overflow:visible;
      padding-left:14px;
    }
    .quote span:before {
      content:" ";
      width:6px;
      height:6px;
      border-radius:6px;
      background-color:var(--green);
      display:block;
      position:absolute;
      top:8px;
      left:0px;
    }
    .quote p {
      color:#484747;
      font-size:16px;
      line-height:24px;
      font-style:italic;
      margin-right:-20px;
      position:relative;
      display:block;
    }

.contact {
  width:calc(100% - 60px);
  margin:0px auo;
  max-width:500px;
  background-color:white;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, 0%);
  display:block;
  box-shadow:0px 20px 30px -15px rgba(0,0,0,.3);
  color:#484747;
  line-height:24px;
  z-index:10;
  transition:.5s;
  pointer-events:none;
  opacity:0;
  border-radius:8px;
}
.contact.opened {
  opacity:1;
  transform:translate(-50%, -50%);
  pointer-events:auto;
}
.contact:after {
  width:100vw;
  height:100vh;
  position:fixed;
  background-color:rgba(0,0,0,.4);
  content:" ";
  top:calc(50% - 50vh);
  left:calc(50% - 50vw);
  z-index:-1;
  display:block;
  opacity:0;
  transition:.3s .0s;

}
  .contact.opened:after {
    opacity:1;
    transition:.3s .25s;
  }
  .contact .cont {
    padding:50px;
    background-color:white;
    position:relative;
    z-index:2;
    border-radius:8px;
  }
  .contact .close {
    position:absolute;
    top:20px;
    right:20px;
    width:50px;
    height:50px;
    text-align:center;
    line-height:50px;
    color:#aaa;
    cursor:pointer;
    transition:.3s;
    font-weight:100;
    font-size:30px;
  }
    .contact .close:hover {
      transform:scale(1.1);
      color:black;
    }
  .contact h2 {
    margin:0px 0px 10px 0px;
    color:black;
  }
  .contact a {
    color:var(--green);
    text-decoration:none;
  }


@media screen and (max-width:1399px) {
  .container-fluid .container {
    padding-left:100px;
    padding-right:100px;
    width:calc(100vw - 200px);
  }
}
@media screen and (max-width:991px) {
  .container-fluid .container {
    padding-left:30px;
    padding-right:30px;
    width:calc(100vw - 60px);
  }
  .container-fluid.bg-green {
    height:auto !important ;
    min-height:100vh !important;
  }
  h1 {
    font-size:40px;
  }
    h1 .logo {
      width:235px;
      height:91px;
    }
  .quotes {
    display:block;
  }
    .quotes .quote {
      padding:0px 0px 50px 0px !important;
    }
}
@media screen and (max-width:991px) {
  .button {
    margin-left:0px !important;
    display:block;
    width:90px;
  }
}
.details {
  padding-top:100px; 
}
.details a {
  color:#ccc;
}