@keyframes maxOff {
  to {
    left: 100%;
  }
}

@keyframes overlayOpc {
  to {
    opacity: 0.5;
  }
}

@keyframes colorWhite {
  to {
    color: white;
  }
}

@keyframes opacity0 {
  to {
    opacity: 0;
  }
}

.home_video {
  min-height: 30vh;
}

.hero_home {
  clip-path: polygon(80% 0, 100% 12%, 110% 110%, 0 100%, 0 0);
}


@media (min-width: 768px) {
  .hero_home {
    min-height: 70vh;
    clip-path: polygon(84% 0, 100% 24%, 110% 110%, 0 100%, 0 0);
  }

  .hero_home-effect {
    position: absolute;
    inset: 0%;
    width: 100%;
    z-index: -2;
  }

  .hero_home-overlay {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 42%;
    background-color: white;
    animation: 2s maxOff 2s ease-in-out forwards;
  }

  .hero_home-overlay-opc {
    position: absolute;
    inset: 0%;
    background-color: rgba(0, 0, 0);
    opacity: 0;
    animation: 3.5s overlayOpc 1.3s ease-in-out forwards;
  }

  .home-white {
    animation: 1.6s colorWhite 1.8s ease-out forwards;
  }

  .hero-section_bg {
    top: 0;
    right: 0;
    z-index: 1;
    animation: 2.5s opacity0 1s ease-in-out forwards;
  }
}