.bg-video-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background: url(https://designsupply-web.com/samplecontent/vender/codepen/20181014.png) no-repeat center center/cover;
}
.bg-video-wrap video {
  min-width: 100%;
  min-height: 100vh;
  z-index: 1;
}

.bg-video-wrap .overlay {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%);
  background-size: 3px 3px;
}

.mission-container{
  display:grid;
  place-items:center;
  width:100%;
  margin:auto;
  background:linear-gradient(50deg,darkgreen,Teal);
  position:relative;
  border-radius:5%;
  overflow:hidden;
  padding:3px;
}
.mission-container::before{
  content:'';
  background:linear-gradient(45deg,SpringGreen,Aqua);
  width:400px;
  height:20px;
  position:absolute;
  transform: rotate(-52deg) translate(0,-180px); 
}
.mission-container .card{
  display:grid;
  place-items:center;
  width:100%;
  padding: 10px;
  border-radius:5%;
  background-color:#111522;
  color:#858585;
  position:relative;
}

.mission-container .txt{
  display:flex;
  flex-direction:column;
  text-align:center;
  transition: color 1s ease;
}

.mission-container p::before{
  content:"";
  display:inline-block;
  width:98%;
  height:2px;
  background:linear-gradient(45deg,SpringGreen,Aqua);
  transform:scaleX(0);
  transition: transform 1s ease;
}
.mission-container:hover::before{
 animation: effetto 3s infinite ;
}
.mission-container:hover .txt p::before{
  transform:scaleX(1);
}

.mission-container:hover .card{
  color:#fff;
}
@keyframes effetto{
  50%{ transform: rotate(-52deg) translate(0,180px)}
}



.wielen {
  transform-origin: 50% 50%;
  -webkit-animation: bus 4s ease-in-out infinite;
  -ms-animation: bus 4s ease-in-out infinite;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  -ms-animation-duration: 4s;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-iteration-count: infinite;
}


@-ms-keyframes spin {
  0% {
      -ms-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg);
      background-color:#2187e7;
      background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
      background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
  }
  13% {
      -ms-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
  }
  25% {
      -ms-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
  }
  38% {
      -ms-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
  }
  50% {
      -ms-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
  }
  63% {
      -ms-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
  }
  75% {
      -ms-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg);
  }
  88% {
      -ms-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg);
  }
  100% {
      -ms-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg);
  }
}

@-webkit-keyframes spin {
  0%  {
      -webkit-transform: rotate(0deg) ;
      -ms-transform: rotate(0deg) ;
      transform: rotate(0deg) ;
  }
      100%  {
      -webkit-transform: rotate(1800deg) ;
      -ms-transform: rotate(1800deg) ;
      transform: rotate(1800deg) ;
  }
}
@-ms-keyframes spin {
  0%  {
      -ms-transform: rotate(0deg) ;
  }
      100%  {
      -ms-transform: rotate(1800deg) ;
  }
}

@-ms-keyframes spin {
  0%  {
      -ms-transform: rotate(0deg) ;
  }
      100%  {
      -ms-transform: rotate(1800deg) ;
  }
}

.motor {
animation: bus 4s ease-in-out infinite;
-webkit-animation: bus 4s ease-in-out infinite;

}

@-webkit-keyframes bus{
0% {
 -webkit-transform: translate(-25px, 0px);
 transform: translate(-25px, -6px);
   
}
50% {
 -webkit-transform: translate(50px, 0px);
 transform: translate(25px, 6px);
}
   100% {
 -webkit-transform: translate(-25px, 0px);
 transform: translate(-25px, -6px);
}
  
} 



.top-bg:hover {
  width: 100%;
  transform: translateX(-25%) translateY(-25%);
}

.shake {
  animation: shake 0.1s infinite;
}

@keyframes shake {
  0%, 100% {
  transform: rotateZ(0deg);
  }

  25% {
  transform: rotateZ(-1deg);
  }

  50%{
  transform: rotateZ(1deg);
  }
}

.flits {
  animation: flitsen 1s ease-in-out infinite;
  -webkit-animation: flitsen .2s ease-in-out infinite;    
  fill: #DFEDFB;
}

@-webkit-keyframes flitsen{
  0% {
      -webkit-transform: translate(50px, 0px);
      transform: translate(250px, 0px);
      opacity: 1;
   }
  100% {
      -webkit-transform: translate(-25px, 0px);
      transform: translate(-250px, 0px);
      opacity: 0.5;
   }
  
} 

.wolkjes {
  animation: zweven 1s linear infinite;
  -webkit-animation: zweven 7s linear infinite;    
  
}

@-webkit-keyframes zweven{
  0% {
      -webkit-transform: translate(50px, 0px);
      transform: translate(1200px, 0px);
   }
  100% {
      -webkit-transform: translate(-25px, 0px);
      transform: translate(-1500px, 0px);
   }
  
} 

.vlam {
  animation: vlammend 1s infinite;
  -webkit-animation: vlammend .5s infinite;  
}

@-webkit-keyframes vlammend{
  0% {
      opacity: 1;
   }
  100% {
      opacity: 0;
   }
  
} 

.shadow {
  animation: schaduw 1.5s ease-in-out infinite;
  -webkit-animation: schaduw 1.5s ease-in-out infinite;  
}

@keyframes schaduw {
  0%, 100% {
  transform: scale(1, 1);
  }


  50%{
  transform: scale(1.05, 1);
  }
}

.buildings1 {
  animation: zweven1 40s linear infinite;
  -webkit-animation: zweven1 40s linear infinite;    
  fill: "#404AA2";
  
}


@-webkit-keyframes zweven1{
  0% {
      -webkit-transform: translate(0px, 0px);
      transform: translate(0px, 0px);
   }
  100% {
      -webkit-transform: translate(-25px, 0px);
      transform: translate(-1600px, 0px);
   }
} 

.buildings2 {
  animation: zweven2 40s linear infinite;
  -webkit-animation: zweven2 40s linear infinite;    
}

@-webkit-keyframes zweven2{
  0% {
      -webkit-transform: translate(50px, 0px);
      transform: translate(1600px, 0px);
   }
  100% {
      -webkit-transform: translate(-25px, 0px);
      transform: translate(-1600px, 0px);
   }
  
}