.hero-anime {
  position: relative;
  width: 100%;
  height: 75vh;
  overflow: hidden;
  z-index: 0;
}
.hero-anime:before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0px;
  left: 0%;
  width: 100%;
  height: 100%;
  background: #00a1ff;
  opacity: 0.7;
  overflow: hidden;
}
.hero-anime img {
  position: absolute;
  top: 0;
  left: 0%;
  width: 40%;
  height: 100%;
  margin: 0;
  opacity: 1;
  max-width: unset;
}
.hero-anime img#cargo {
  z-index: 2;
  width: 120%;
  transform: translate(0%, 0%) scale(1.25);
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: right;
     object-position: right;
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
}
.hero-anime img#truck {
  z-index: 0;
  clip-path: unset;
  left: 66%;
  left: 0;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  /*transition-delay: 0.2s;*/
}
.hero-anime img#plane2 {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 70%;
  height: auto;
  z-index: 2;
  transform: translate(-94%, 39%) rotate(-14deg) scale(0.3);
}
.hero-anime .teksti {
  position: absolute;
  color: #fff !important;
  text-align: center;
  top: 50%;
  left: 50%;
  width: 90%;
  max-width: 800px;
  transform: translate(-50%, -50%);
  opacity: 1;
  z-index: 4;
}
.hero-anime .teksti h1,
.hero-anime .teksti p {
  color: #fff !important;
}
.hero-anime .teksti a.nappi {
  background: #fff !important;
  color: #009df9 !important;
  border-radius: 20px !important;
}
.hero-anime .teksti a.nappi:hover {
  background: #6ebe28 !important;
  color: #fff !important;
  border-radius: 0px !important;
}
.hero-anime.animee {
  /*.teksti {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: opacity 1s ease-in-out;
  }*/
}
.hero-anime.animee img {
  opacity: 1;
}
.hero-anime.animee img#truck {
  width: 71%;
  left: 43%;
  transition: all 2s ease-in-out;
}
.hero-anime.animee img#cargo {
  transform: translate(-25%, 0%) scale(1);
  clip-path: polygon(65% 0%, 75% 50%, 65% 100%, 0% 100%, 0 50%, 0% 0%);
  filter: brightness(0.7);
  transition: all 1.5s ease-in-out;
}
.hero-anime.animee img#plane2 {
  transform: translate(2%, -35%) rotate(-14deg) scale(1);
  transition: all 2s ease-in-out;
}

@media (max-width: 1199px) {
  .hero-anime img#cargo {
    width: 100%;
  }
  .hero-anime.animee img#cargo {
    width: 100%;
    transform: translate(0%, -65%) scale(1);
    clip-path: polygon(0 0, 100% 0%, 100% 86%, 50% 100%, 0 86%);
    filter: brightness(0.7);
    transition: all 1.5s ease-in-out;
  }
  /* .hero-anime.animee .teksti {
    transition: all 0.75s ease-in-out;
    transition-delay: 1s;
  }*/
  .hero-anime.animee img#plane2 {
    transform: translate(2%, -55%) rotate(-14deg) scale(1);
  }
  .hero-anime img#truck {
    z-index: 0;
    clip-path: unset;
    left: -20%;
    top: 12%;
    width: 120%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    /* transition-delay: 0.2s; */
  }
  .hero-anime.animee img#truck {
    width: 100%;
    left: 0%;
    top: 10%;
    transition: all 2s ease-in-out;
  }
}
/*
@media (max-width: 991px) {
  .hero-anime.animee img#truck {
    left: 39%;
  }
}*/
.block-preview .hero-anime,
.block-preview .hero-anime.animee {
  padding: 0px !important;
}
.block-preview .hero-anime img,
.block-preview .hero-anime.animee img {
  margin: 0 !important;
  position: absolute;
  top: 0;
  left: 0%;
  width: 40%;
  height: 100% !important;
  margin: 0;
  opacity: 1;
  max-width: unset !important;
}
.block-preview .hero-anime img#cargo,
.block-preview .hero-anime.animee img#cargo {
  transform: translate(-25%, 0%) scale(1) !important;
  clip-path: polygon(65% 0%, 75% 50%, 65% 100%, 0% 100%, 0 50%, 0% 0%) !important;
  filter: brightness(0.7) !important;
  transition: none !important;
}
.block-preview .hero-anime img#truck,
.block-preview .hero-anime.animee img#truck {
  width: 71% !important;
  left: 43% !important;
  transition: none !important;
}
.block-preview .hero-anime img#plane2,
.block-preview .hero-anime.animee img#plane2 {
  transform: translate(2%, -35%) rotate(-14deg) scale(1) !important;
  transition: none !important;
}
.block-preview .hero-anime .teksti,
.block-preview .hero-anime.animee .teksti {
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
  transition: none !important;
}

@media (max-width: 500px) {
  .hero-anime img#plane2 {
    width: 95%;
    left: 0;
  }
}
.hero-anime.done img#plane2,
.hero-anime.done img#cargo,
.hero-anime.done img#truck {
  transition: none !important;
}