.hero-fadein {
  opacity: 0; }

.hero {
  height: 100vh; }
  .hero-cube-1 {
    transform: translate(-714%, -246%) scale(0.8); }
  .hero-cube-2 {
    transform: translate(-282%, 323%) scale(0.9); }
  .hero-cube-3 {
    transform: translate(278%, 401%) scale(0.7) rotate(175deg);
    opacity: .56; }
    .hero-cube-3-2 {
      transform: translate(-142%, -553%) scale(0.7) rotate(-2deg);
      opacity: .56; }
  .hero-cube-4 {
    transform: translate(578%, 316%) scale(0.8) rotate(6deg);
    opacity: .75; }
  .hero-cube-5 {
    transform: translate(609%, -203%) scale(0.8) rotate(113deg);
    opacity: .56; }
  .hero-logo-yoyaba {
    transform: translate(-541%, 386%) scale(0.8, 0.8); }
  .hero-logo-volume {
    transform: translate(231%, 204%) scale(0.9); }
  .hero-logo-ituso {
    transform: translate(334%, -51%); }
  .hero-logo-werkules {
    transform: translate(44%, -454%); }
  .hero-logo-ampathy {
    transform: translate(-221%, 122%); }
  .hero-logo-oliver-h {
    transform: translate(-446%, 333%); }
  .hero-logo-quinx {
    transform: translate(35%, -392%) scale(0.9); }
  .hero-line {
    width: 1px;
    height: 133%;
    transform: translate(0%, 114%); }
    .hero-line-inner {
      background-color: #C8C8C8;
      width: 100%;
      height: 100%; }

.video-row {
  margin-bottom: 127px; }
  .video-row-last {
    margin-bottom: 0; }

.video-item {
  transform: translate(15%, -50%) scale(1.5); }
  .video-item-noscale {
    transform: translate(15%, -50%); }
  .video-item-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%; }
    .video-item-inner > .gdrive-video-frame-container {
      height: 100%;
      width: 100%; }
      .video-item-inner > .gdrive-video-frame-container > .gdrive-video-frame {
        height: 100%;
        width: 100%;
        max-height: 100%;
        max-width: 100%; }
  .video-item-wrapper {
    position: relative;
    padding-top: 56.47%; }
  .video-item-reverse {
    transform: translate(-15%, -50%) scale(1.5); }
  .video-item-btn {
    max-width: 21%; }

.video-text {
  font-family: 'Poppins';
  font-weight: normal;
  color: #1D1E22;
  margin-bottom: 14px; }
  .video-text-box {
    width: 100%;
    height: 100%;
    background-color: #F1F1F1; }
    .video-text-box-volume {
      padding: 97px 127px 130px 283px;
      border-bottom: 10px solid #FE6800; }
    .video-text-box-yoyaba {
      padding: 97px 283px 130px 127px;
      border-bottom: 10px solid #FFC32E; }
  .video-text-btn {
    background-color: #2660FF;
    border-radius: 8px;
    padding: 13px 27px;
    box-shadow: 0px 5px 19px -3px #0000004f; }
    .video-text-btn:hover {
      color: #d7d7d7; }

.video-cube-1 {
  transform: translate(240%, -139%); }

.video-cube-2 {
  transform: translate(-169%, 57%); }

.video-cube-3 {
  transform: translate(261%, -26%); }

.video-cube-4 {
  transform: translate(48%, -43%); }

.video-cube-5 {
  transform: translate(-60%, 70%); }

.video-cube-6 {
  transform: translate(34%, -31%); }

.video-cube-7 {
  transform: translate(-397%, -130%); }

.ready {
  padding-top: 130px;
  padding-bottom: 130px; }
  .ready-text {
    margin-bottom: 45px; }
  .ready-item-title {
    color: #2660FF; }
  .ready-item-text {
    font-weight: bold;
    margin-bottom: 0; }
  .ready-line {
    background-color: #C8C8C8;
    width: 1px;
    height: 154px; }

@media only screen and (max-width: 768px) {
  .hero {
    height: 90vh;
    margin-top: -22%; }
    .hero-title {
      font-size: calc(3.625rem - 2rem);
      line-height: calc(3.5rem - 1.4rem); }
    .hero-logo-yoyaba {
      transform: scale(0.9); }
    .hero-logo-volume {
      transform: scale(0.9); }
    .hero-cube-1 {
      opacity: .35;
      transform: translate(14%, 329%) scale(0.8); }
    .hero-cube-3 {
      opacity: .32;
      transform: translate(165%, -363%); }
    .hero-cube-3m {
      opacity: .56;
      transform: translate(23%, 79%) scale(0.5) rotate(103deg); }
    .hero-cube-4m {
      opacity: .56;
      transform: translate(-35%, 341%) scale(0.8); }
    .hero-line {
      height: 93%; }
  .video-row {
    margin-bottom: 40px; }
  .video-text-box-volume {
    padding: 22px 35px 28px;
    transform: translate(0px, 0px) !important; }
  .video-text-box-yoyaba {
    padding: 22px 35px 28px;
    transform: translate(0px, 0px) !important; }
  .video-cube-1 {
    transform: translate(-35%, -41%); }
  .video-cube-2 {
    transform: translate(34%, -48%); }
  .video-cube-3 {
    transform: translate(319%, 68%); }
  .video-cube-4 {
    transform: translate(0, 0); }
  .video-cube-5 {
    transform: translate(0, 0); }
  .video-cube-6 {
    transform: translate(0, 0); }
  .video-cube-7 {
    transform: translate(-426%, -282%); }
  .ready {
    padding-top: 3rem;
    padding-bottom: 70px; }
    .ready-text {
      margin-bottom: .5rem; } }