.hero {
  height: 300px;
  margin-bottom: 30px;
  max-width: 1280px;
  margin: auto;
  background: #000;
  border-radius: 0.5rem;
  position: relative;
  overflow: hidden;
}
.hero .hero-bg {
  position: absolute;
  top: 0;
  background-repeat: repeat;
  background-position-x: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.hero #hero-video:focus-visible {
  outline: none;
}
.hero #hero-bg1 {
  background-image: url(images/scroller_bg1.png);
}
.hero #hero-bg2 {
  background-image: url(images/scroller_bg2.png);
}
.hero #hero-bg3 {
  background-image: url(images/scroller_bg3.png);
}
.hero .icon {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  position: relative;
  background-color: rgba(0, 0, 0, 0.2);
  background-position-x: calc(50% + 220px);
  pointer-events: none;
}
.hero .icon_unity {
  background-image: url(images/icons/unity.png);
}
.hero .icon_html5 {
  background-image: url(images/icons/html5.png);
}
.hero .icon_vr {
  background-image: url(images/icons/vr.png);
}
.hero .icon_nodejs {
  background-image: url(images/icons/nodejs.png);
}
.hero .icon_nextjs {
  background-image: url(images/icons/nextjs.png);
}

::-webkit-media-controls {
  display: none !important;
}

#video-placeholder {
  width: 400px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -4px;
  height: 100%;
}
#video-placeholder video {
  height: 100%;
}

#hero-spritesheet {
  width: 400px;
  height: 300px;
}
#hero-spritesheet.idle {
  animation: idle 0.96 s steps(24) infinite;
}

@keyframes idle {
  100% {
    background-position-x: -9600px;
  }
}

/*# sourceMappingURL=hero.css.map */