html, body {
  min-height: 667px;
}

.search-egg {
  position: fixed;
  width: 750px;
  height: 1334px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 30px;
  zoom: .5;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
}

$h: 622px;
$w: 609px;

// balls

$red: rgb(255, 59, 48);
$orange: rgb(255, 149, 0);
$yellow: rgb(255, 204, 0);
$green: rgb(76, 217, 100);
$tealBlue: rgb(90, 200, 250);
$blue: rgb(0, 122, 255);
$purple: rgb(88, 86, 214);
$pink: rgb(255, 45, 85);

.balls {
  width: $w;
  height: $h;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: ($h / -2);
  margin-left: ($w / -2);
  z-index: 3;
  .ball {
    border-radius: 50%;
    position: absolute;
    opacity: 0.7;
    $f: 12;
    &:nth-child(1) {
      width: 120px;
      height: 120px;
      background: $yellow;
      left: 205px;
      top: 56px;
      $dur: (3 * $f + 4 - 5);
      animation: moveUp1 ($dur / $f * 1s) (5/$f * 1s) both ease-in-out;
      @keyframes moveUp1 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 5) / $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 5)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(2) {
      width: 80px;
      height: 80px;
      background: $yellow;
      left: 175px;
      top: 95px;
      $dur: (3 * $f + 10 - 8);
      animation: moveUp2 ($dur /$f * 1s) (8/$f * 1s) both ease-in-out;
      @keyframes moveUp2 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 8)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 8)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(3) {
      width: 120px;
      height: 120px;
      background: $yellow;
      left: 98px;
      top: 76px;
      $dur: (3 * $f + 4 - 2);
      animation: moveUp3 ($dur/$f * 1s) (2/$f * 1s) both ease-in-out;
      @keyframes moveUp3 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 2)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 2)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(4) {
      width: 48px;
      height: 48px;
      background: $orange;
      left: 121px;
      top: 165px;
      $dur: (3 * $f + 9 - 8);
      animation: moveUp4 ($dur/$f * 1s) (8/$f * 1s) both ease-in-out;
      @keyframes moveUp4 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 8)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 8)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(5) {
      width: 35px;
      height: 35px;
      background: $orange;
      left: 85px;
      top: 140px;
      $dur: (3 * $f + 4 - 5);
      animation: moveUp5 ($dur/$f * 1s) (5/$f * 1s) both ease-in-out;
      @keyframes moveUp5 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 5)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 5)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(6) {
      width: 102px;
      height: 102px;
      background: $orange;
      left: 43px;
      top: 160px;
      $dur: (3 * $f + 10 - 5);
      animation: moveUp6 ($dur/$f * 1s) (5/$f * 1s) both ease-in-out;
      @keyframes moveUp6 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 5)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 5)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(7) {
      width: 52px;
      height: 52px;
      background: $pink;
      left: 76px;
      top: 235px;
      $dur: (3 * $f + 3 - 7);
      animation: moveUp7 ($dur/$f * 1s) (7/$f * 1s) both ease-in-out;
      @keyframes moveUp7 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(8) {
      width: 80px;
      height: 80px;
      background: $pink;
      left: 41px;
      top: 263px;
      $dur: (3 * $f + 9 - 4);
      animation: moveUp8 ($dur/$f * 1s) (4/$f * 1s) both ease-in-out;
      @keyframes moveUp8 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 4)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 4)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(9) {
      width: 120px;
      height: 120px;
      background: $pink;
      left: 0;
      top: 298px;
      $dur: (4 * $f + 0 - 6);
      animation: moveUp9 ($dur/$f * 1s) (6/$f * 1s) both ease-in-out;
      @keyframes moveUp9 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 6)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 6)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(10) {
      width: 52px;
      height: 52px;
      background: $blue;
      left: 76px;
      top: 361px;
      $dur: (3 * $f + 2 - 3);
      animation: moveUp10 ($dur/$f * 1s) (3/$f * 1s) both ease-in-out;
      @keyframes moveUp10 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 3)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 3)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(11) {
      width: 52px;
      height: 52px;
      background: $blue;
      left: 86px;
      top: 387px;
      $dur: (3 * $f + 1 - 7);
      animation: moveUp11 ($dur/$f * 1s) (7/$f * 1s) both ease-in-out;
      @keyframes moveUp11 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(12) {
      width: 36px;
      height: 36px;
      background: $blue;
      left: 77px;
      top: 397px;
      $dur: (3 * $f + 3 - 2);
      animation: moveUp12 ($dur/$f * 1s) (2/$f * 1s) both ease-in-out;
      @keyframes moveUp12 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 2)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 2)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(13) {
      width: 80px;
      height: 80px;
      background: $blue;
      left: 75px;
      top: 425px;
      $dur: (3 * $f + 2 - 8);
      animation: moveUp13 ($dur/$f * 1s) (8/$f * 1s) both ease-in-out;
      @keyframes moveUp13 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 8)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 8)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(14) {
      width: 36px;
      height: 36px;
      background: $blue;
      left: 74px;
      top: 511px;
      $dur: (2 * $f + 11 - 4);
      animation: moveUp14 ($dur/$f * 1s) (4/$f * 1s) both ease-in-out;
      @keyframes moveUp14 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 4)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 4)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(15) {
      width: 52px;
      height: 52px;
      background: $blue;
      left: 132px;
      top: 480px;
      $dur: (3 * $f + 1 - 7);
      animation: moveUp15 ($dur/$f * 1s) (7/$f * 1s) both ease-in-out;
      @keyframes moveUp15 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(16) {
      width: 36px;
      height: 36px;
      background: $blue;
      left: 169px;
      top: 511px;
      $dur: (3 * $f + 2 - 4);
      animation: moveUp16 ($dur/$f * 1s) (4/$f * 1s) both ease-in-out;
      @keyframes moveUp16 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 4)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 4)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(17) {
      width: 80px;
      height: 80px;
      background: $tealBlue;
      left: 153px;
      top: 524px;
      $dur: (3 * $f + 3 - 7);
      animation: moveUp17 ($dur/$f * 1s) (7/$f * 1s) both ease-in-out;
      @keyframes moveUp17 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(18) {
      width: 52px;
      height: 52px;
      background: $tealBlue;
      left: 212px;
      top: 542px;
      $dur: (3 * $f + 5 - 1);
      animation: moveUp18 ($dur/$f * 1s) (1/$f * 1s) both ease-in-out;
      @keyframes moveUp18 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 1)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 1)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(19) {
      width: 80px;
      height: 80px;
      background: $tealBlue;
      left: 241px;
      top: 537px;
      $dur: (3 * $f + 3 - 2);
      animation: moveUp19 ($dur/$f * 1s) (2/$f * 1s) both ease-in-out;
      @keyframes moveUp19 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 2)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 2)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(20) {
      width: 80px;
      height: 80px;
      background: $tealBlue;
      left: 285px;
      top: 524px;
      $dur: (3 * $f + 3 - 8);
      animation: moveUp20 ($dur/$f * 1s) (8/$f * 1s) both ease-in-out;
      @keyframes moveUp20 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 8)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 8)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(21) {
      width: 60px;
      height: 60px;
      background: $tealBlue;
      left: 325px;
      top: 529px;
      $dur: (4 * $f + 0 - 3);
      animation: moveUp21 ($dur/$f * 1s) (3/$f * 1s) both ease-in-out;
      @keyframes moveUp21 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 3)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 3)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(22) {
      width: 52px;
      height: 52px;
      background: $tealBlue;
      left: 358px;
      top: 538px;
      $dur: (3 * $f + 1 - 6);
      animation: moveUp22 ($dur/$f * 1s) (6/$f * 1s) both ease-in-out;
      @keyframes moveUp22 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 6)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 6)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(23) {
      width: 52px;
      height: 52px;
      background: $tealBlue;
      left: 393px;
      top: 542px;
      $dur: (3 * $f +5 - 2);
      animation: moveUp23 ($dur/$f * 1s) (2/$f * 1s) both ease-in-out;
      @keyframes moveUp23 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 2)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 2)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(24) {
      width: 36px;
      height: 36px;
      background: $tealBlue;
      left: 410px;
      top: 587px;
      $dur: (3 * $f + 2 - 7);
      animation: moveUp24 ($dur/$f * 1s) (7/$f * 1s) both ease-in-out;
      @keyframes moveUp24 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(25) {
      width: 80px;
      height: 80px;
      background: $tealBlue;
      left: 422px;
      top: 524px;
      $dur: (3 * $f + 1- 3);
      animation: moveUp25 ($dur/$f * 1s) (3/$f * 1s) both ease-in-out;
      @keyframes moveUp25 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 3)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 3)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(26) {
      width: 60px;
      height: 60px;
      background: $tealBlue;
      left: 455px;
      top: 500px;
      $dur: (3 * $f + 9 - 7);
      animation: moveUp26 ($dur/$f * 1s) (7/$f * 1s) both ease-in-out;
      @keyframes moveUp26 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(27) {
      width: 36px;
      height: 36px;
      background: $tealBlue;
      left: 512px;
      top: 556px;
      $dur: (3 * $f + 1 - 1);
      animation: moveUp27 ($dur/$f * 1s) (1/$f * 1s) both ease-in-out;
      @keyframes moveUp27 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 1)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 1)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(28) {
      width: 102px;
      height: 102px;
      background: $blue;
      left: 471px;
      top: 465px;
      $dur: (3 * $f +10 - 5);
      animation: moveUp28 (($dur)/$f * 1s) (5/$f * 1s) both ease-in-out;
      @keyframes moveUp28 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 5)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 5)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(29) {
      width: 80px;
      height: 80px;
      background: $blue;
      left: 493px;
      top: 431px;
      $dur: (3 * $f + 5 - 7);
      animation: moveUp29 ($dur/$f * 1s) (7/$f * 1s) both ease-in-out;
      @keyframes moveUp29 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(30) {
      width: 60px;
      height: 60px;
      background: $blue;
      left: 549px;
      top: 472px;
      $dur: (3 * $f + 7 - 1);
      animation: moveUp30 ($dur/$f * 1s) (1/$f * 1s) both ease-in-out;
      @keyframes moveUp30 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 1)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 1)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(31) {
      width: 94px;
      height: 94px;
      background: $blue;
      left: 505px;
      top: 399px;
      $dur: (3 * $f +10 - 2);
      animation: moveUp31 ($dur/$f * 1s) (2/$f * 1s) both ease-in-out;
      @keyframes moveUp31 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 2)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 2)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(32) {
      width: 52px;
      height: 52px;
      background: $pink;
      left: 533px;
      top: 373px;
      $dur: (3 * $f + 2 - 7);
      animation: moveUp32 ($dur/$f * 1s) (7/$f * 1s) both ease-in-out;
      @keyframes moveUp32 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(33) {
      width: 60px;
      height: 60px;
      background: $pink;
      left: 489px;
      top: 350px;
      $dur: (3 * $f + 2 - 4);
      animation: moveUp33 ($dur/$f * 1s) (4/$f * 1s) both ease-in-out;
      @keyframes moveUp33 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 4)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 4)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(34) {
      width: 24px;
      height: 24px;
      background: $pink;
      left: 489px;
      top: 350px;
      $dur: (3 * $f + 1 - 4);
      animation: moveUp34 ($dur/$f * 1s) (4/$f * 1s) both ease-in-out;
      @keyframes moveUp34 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 4)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 4)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(35) {
      width: 60px;
      height: 60px;
      background: $pink;
      left: 529px;
      top: 301px;
      $dur: (3 * $f + 5 - 8);
      animation: moveUp35 ($dur/$f * 1s) (8/$f * 1s) both ease-in-out;
      @keyframes moveUp35 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 8)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 8)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(36) {
      width: 60px;
      height: 60px;
      background: $pink;
      left: 463px;
      top: 327px;
      $dur: (3 * $f + 1 - 1);
      animation: moveUp36 ($dur/$f * 1s) (1/$f * 1s) both ease-in-out;
      @keyframes moveUp36 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 1)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 1)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(37) {
      width: 80px;
      height: 80px;
      background: $blue;
      left: 450px;
      top: 287px;
      $dur: (3 * $f + 10 - 3);
      animation: moveUp37 ($dur/$f * 1s) (3/$f * 1s) both ease-in-out;
      @keyframes moveUp37 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 3)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 3)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(38) {
      width: 60px;
      height: 60px;
      background: $pink;
      left: 450px;
      top: 269px;
      $dur: (3 * $f + 1 - 8);
      animation: moveUp38 ($dur/$f * 1s) (8/$f * 1s) both ease-in-out;
      @keyframes moveUp38 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 8)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 8)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(39) {
      width: 98px;
      height: 98px;
      background: $yellow;
      left: 457px;
      top: 237px;
      $dur: (3 * $f +1 - 8);
      animation: moveUp39 ($dur/$f * 1s) (8/$f * 1s) both ease-in-out;
      @keyframes moveUp39 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 8)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 8)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(40) {
      width: 60px;
      height: 60px;
      background: $orange;
      left: 479px;
      top: 221px;
      $dur: (3 * $f + 7 - 5);
      animation: moveUp40 ($dur/$f * 1s) (5/$f * 1s) both ease-in-out;
      @keyframes moveUp40 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 5)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 5)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(41) {
      width: 60px;
      height: 60px;
      background: $orange;
      left: 536px;
      top: 205px;
      $dur: (3 * $f + 2 - 8);
      animation: moveUp41 ($dur/$f * 1s) (8/$f * 1s) both ease-in-out;
      @keyframes moveUp41 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 8)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 8)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(42) {
      width: 52px;
      height: 52px;
      background: $orange;
      left: 495px;
      top: 176px;
      $dur: (3 * $f + 5 - 2);
      animation: moveUp42 ($dur/$f * 1s) (2/$f * 1s) both ease-in-out;
      @keyframes moveUp42 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 2)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 2)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(43) {
      width: 38px;
      height: 38px;
      background: $yellow;
      left: 547px;
      top: 160px;
      $dur: (3 * $f +7 - 5);
      animation: moveUp43 ($dur/$f * 1s) (5/$f * 1s) both ease-in-out;
      @keyframes moveUp43 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 5)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 5)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(44) {
      width: 88px;
      height: 88px;
      background: $yellow;
      left: 468px;
      top: 122px;
      $dur: (3 * $f + 3 - 3);
      animation: moveUp44 ($dur/$f * 1s) (3/$f * 1s) both ease-in-out;
      @keyframes moveUp44 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 3)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 3)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(45) {
      width: 60px;
      height: 60px;
      background: $yellow;
      left: 441px;
      top: 127px;
      $dur: (3 * $f + 3 - 7);
      animation: moveUp45 ($dur/$f * 1s) (7/$f * 1s) both ease-in-out;
      @keyframes moveUp45 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(46) {
      width: 60px;
      height: 60px;
      background: $pink;
      left: 409px;
      top: 116px;
      $dur: (3 * $f + 3 - 4);
      animation: moveUp46 ((3 * $f + 3- 4)/$f * 1s) (4/$f * 1s) both ease-in-out;
      @keyframes moveUp46 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 4)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 4)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(47) {
      width: 60px;
      height: 60px;
      background: $yellow;
      left: 394px;
      top: 115px;
      $dur: (3 * $f + 3 - 4);
      animation: moveUp47 ($dur/$f * 1s) (4/$f * 1s) both ease-in-out;
      @keyframes moveUp47 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 4)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 4)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(48) {
      width: 36px;
      height: 36px;
      background: $yellow;
      left: 379px;
      top: 138px;
      $dur: (3 * $f + 1 - 9);
      animation: moveUp48 ($dur/$f * 1s) (9/$f * 1s) both ease-in-out;
      @keyframes moveUp48 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 9)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 9)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(49) {
      width: 24px;
      height: 24px;
      background: $green;
      left: 359px;
      top: 156px;
      $dur: (3 * $f + 4 - 6);
      animation: moveUp49 ($dur/$f * 1s) (6/$f * 1s) both ease-in-out;
      @keyframes moveUp49 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 6)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 6)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(50) {
      width: 18px;
      height: 18px;
      background: $blue;
      left: 347px;
      top: 166px;
      $dur: (3 * $f + 2 - 6);
      animation: moveUp50 ($dur/$f * 1s) (6/$f * 1s) both ease-in-out;
      @keyframes moveUp50 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 6)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 6)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(51) {
      width: 20px;
      height: 20px;
      background: $green;
      left: 331px;
      top: 170px;
      $dur: (3 * $f + 2 - 7);
      animation: moveUp51 ($dur/$f * 1s) (7/$f * 1s) both ease-in-out;
      @keyframes moveUp51 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(52) {
      width: 20px;
      height: 20px;
      background: $yellow;
      left: 313px;
      top: 174px;
      $dur: (3 * $f + 5 - 5);
      animation: moveUp52 ($dur/$f * 1s) (5/$f * 1s) both ease-in-out;
      @keyframes moveUp52 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 5)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 5)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(53) {
      width: 38px;
      height: 38px;
      background: $yellow;
      left: 280px;
      top: 149px;
      $dur: (3 * $f + 4- 7);
      animation: moveUp53 ($dur/$f * 1s) (7/$f * 1s) both ease-in-out;
      @keyframes moveUp53 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(54) {
      width: 40px;
      height: 40px;
      background: $yellow;
      left: 410px;
      top: 89px;
      $dur: (3 * $f + 3 - 2);
      animation: moveUp54 ($dur/$f * 1s) (2/$f * 1s) both ease-in-out;
      @keyframes moveUp54 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 2)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 2)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(55) {
      width: 60px;
      height: 60px;
      background: $green;
      left: 415px;
      top: 37px;
      $dur: (3 * $f + 7 - 1);
      animation: moveUp55 ($dur/$f * 1s) (1/$f * 1s) both ease-in-out;
      @keyframes moveUp55 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 1)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 1)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(56) {
      width: 38px;
      height: 38px;
      background: $green;
      left: 426px;
      top: 14px;
      $dur: (3 * $f + 5 - 4);
      animation: moveUp56 ($dur/$f * 1s) (4/$f * 1s) both ease-in-out;
      @keyframes moveUp56 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 4)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 4)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(57) {
      width: 60px;
      height: 60px;
      background: $green;
      left: 372px;
      top: 0;
      $dur: (3 * $f + 7 - 7);
      animation: moveUp57 ($dur/$f * 1s) (7/$f * 1s) both ease-in-out;
      @keyframes moveUp57 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(58) {
      width: 40px;
      height: 40px;
      background: $green;
      left: 356px;
      top: 27px;
      $dur: (3 * $f + 7 - 5);
      animation: moveUp58 ($dur/$f * 1s) (5/$f * 1s) both ease-in-out;
      @keyframes moveUp58 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 5)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 5)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(59) {
      width: 80px;
      height: 80px;
      background: $green;
      left: 291px;
      top: 11px;
      $dur: (3 * $f + 4 - 5);
      animation: moveUp59 ($dur/$f * 1s) (5/$f * 1s) both ease-in-out;
      @keyframes moveUp59 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 5)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 5)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
    &:nth-child(60) {
      width: 60px;
      height: 60px;
      background: $yellow;
      left: 283px;
      top: 56px;
      $dur: (3 * $f + 7 - 7);
      animation: moveUp60 ($dur/$f * 1s) (7/$f * 1s) both ease-in-out;
      @keyframes moveUp60 {
        0% {
          transform: translate3d(0, 1175px, 0);
        }
        #{(27 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        #{(28 - 7)/ $dur * 100%} {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -1225px, 0);
        }
      }
    }
  }
}

// mac

.mac {
  width: $w;
  height: $h;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: ($h / -2);
  margin-left: ($w / -2);
  z-index: 2;
  &-inner {
    $mac_url: "https://res.cloudinary.com/dgnx97ptu/image/upload/v1520317668/apple-mac_hgeegs.png";
    position: absolute;
    left: 94px;
    top: 31px;
    width: 446px;
    height: 540px;
    background: url($mac_url) 0 0 no-repeat;
    background-size: 100%;

    animation: mac_inner_in_out ((52-28)/12 * 1s) (30/12 * 1s) both;
  }
}

@keyframes mac_inner_in_out {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  #{5/24 * 100%} {
    opacity: 1;
  }
  #{(47-28) / 24 * 100%} {
    opacity: 1;
  }
  30% {
    transform: scale((180 / 446));
  }
  50% {
    transform: scale((208 / 446));
  }
  65% {
    transform: scale((200 / 446));
  }
  100% {
    opacity: 0;
    transform: scale((200 / 446));
  }
}



.main {
  &.start-fade-in {
    animation: start-fade-in 0.6s both;
  }
}

.search-egg {
  &.fade-out {
    animation: fade-out 0.6s both;
  }
}

@keyframes start-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}