/* ==========================================================================
   	Wow
============================================================================= */

.wow { visibility: hidden; }

.f1{ -webkit-animation-delay: 0.2s; animation-delay: 0.2s ;}
.f2{ -webkit-animation-delay: 0.4s; animation-delay: 0.4s ;}
.f3{ -webkit-animation-delay: 0.6s; animation-delay: 0.6s ;}
.f4{ -webkit-animation-delay: 0.8s; animation-delay: 0.8s ;}
.f5{ -webkit-animation-delay: 1.0s; animation-delay: 1.0s ;}
.f6{ -webkit-animation-delay: 1.2s; animation-delay: 1.2s ;}
.f7{ -webkit-animation-delay: 1.4s; animation-delay: 1.4s ;}
.f8{ -webkit-animation-delay: 1.6s; animation-delay: 1.6s ;}


/* ==========================================================================
	Custom animaties
============================================================================= */	

/* faden */

@-webkit-keyframes infaden {
   0% {  opacity: 0;}
   100% {max-height: 200px; opacity: 1;}
}

@keyframes infaden {
   0% {  opacity: 0;}
   100% {max-height: 200px; opacity: 1;}
}

/* cookie */

@-webkit-keyframes cookie {
   0% {  opacity: 0;}
   100% {max-height: 200px; opacity: 1;}
}

@keyframes cookie {
   0% {  opacity: 0;}
   100% {max-height: 200px; opacity: 1;}
}

/* groeiende lijn */

@-webkit-keyframes lijn {
   0% {  opacity: 0;}
   20% {  opacity: 0.2;}
   40% {  opacity: 0.4;}
   60% {  opacity: 0.6;}
   80% { opacity: 0.8;}
   100% {width: 100%; opacity: 1;}
}

@keyframes lijn {
   0% {  opacity: 0;}
   20% { opacity: 0.2;}
   40% { opacity: 0.4;}
   60% { opacity: 0.6;}
   80% { opacity: 0.8;}
   100% {width: 100%; opacity: 1;}
}

/* lijn uit */

@-webkit-keyframes lijn-uit {
   100% {  opacity: 0;}
   0% {width: 100%; opacity: 1;}
}

@keyframes lijn-uit {
   100% {  opacity: 0;}
   0% {width: 100%; opacity: 1;}
}

/* ==========================================================================
   Hamburger
============================================================================= */

.hamburger {
  position: absolute;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  right:13px;
  z-index: 999;
}

.hamburger .lijnen {
  position: relative;
  width: 100%;
  height: 3px;
  background: #000;
  display: block;
  -webkit-transform-origin: center;
  transform-origin: center;
}
.hamburger .lijnen:after,.hamburger .lijnen:before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
}
.hamburger .lijnen:before {
  top: -10px;
}
.hamburger .lijnen:after {
  bottom: -10px;
}

.hamburger.actief .lijnen {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.hamburger.actief .lijnen:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: 0;
}
.hamburger.actief .lijnen:before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0;
}