@keyframes beam0Enter {
  0% {
    opacity: 0;
    top: 400vh;        width: 1px;
  }
  0.625%, 1.25% {
    opacity: 1;
    height: 386vh;        top: 14vh;
  }
  2.5% {
    opacity: 0;
    height: 386vh;        top: 14vh;
  }
}

.beam-0-enter:before,
.beam-0-enter:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  left: 15vw;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam0Enter 40s ease-in 50ms forwards;
  animation-iteration-count: infinite;
}

  @keyframes beam0Turn {
  0% {
    opacity: 0;
    height: 1px;        top: 14vh;

  }
  0.625%, 1.25% {
    opacity: 1;
    width: 4.926634279644263vw;          left: 15vw;
  }
  2.5% {
    opacity: 0;
    width: 4.926634279644263vw;          left: 15vw;
  }
}

.beam-0-turn:before,
.beam-0-turn:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  left: 15vw;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam0Turn 40s ease-in 150ms forwards;
  animation-iteration-count: infinite;
}

  @keyframes beam0Exit {
  0% {
    opacity: 0;
    top: 14vh;        height: 0vh;
  }
  0.625%, 1.25% {
    opacity: 1;
    top: 0vh;        height: 14vh;
  }
  2.5% {
    opacity: 0;
    top: 0vh;        height: 14vh;
  }
}

.beam-0-exit:before,
.beam-0-exit:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  left: 19.92663427964426vw;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam0Exit 40s ease-in 300ms forwards;
  animation-iteration-count: infinite;
}


  .beam-0 {
    z-index: 0;
    background-color: black;
    background-image: linear-gradient(0deg, transparent 0px, red 2px, transparent 4px), linear-gradient(90deg, transparent 0px, red 2px, transparent 4px);
    background-size: 1px 1px;
    height: 200%;
    position: relative;
    transform-origin: center top;
    animation-name: flyin;
    animation-duration: 50ms;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
  }
  @keyframes beam1Enter {
  0% {
    opacity: 0;
    top: 0vh;
       width: 1px;
  }
  0.625%, 1.25% {
    opacity: 1;
    height: 86vh;
  }
  2.5% {
    opacity: 0;
    height: 86vh;
  }
}

.beam-1-enter:before,
.beam-1-enter:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  left: 31vw;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam1Enter 40s ease-in 5050ms forwards;
  animation-iteration-count: infinite;
}

  @keyframes beam1Turn {
  0% {
    opacity: 0;
    height: 1px;        top: 86vh;
left: 31vw;
  }
  0.625%, 1.25% {
    opacity: 1;
    width: 4.535959441811105vw;          left: 26.464040558188895vw;
  }
  2.5% {
    opacity: 0;
    width: 4.535959441811105vw;          left: 26.464040558188895vw;
  }
}

.beam-1-turn:before,
.beam-1-turn:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  left: 31vw;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam1Turn 40s ease-in 5150ms forwards;
  animation-iteration-count: infinite;
}

  @keyframes beam1Exit {
  0% {
    opacity: 0;
    top: 86vh;        height: 0vh;
  }
  0.625%, 1.25% {
    opacity: 1;
    top: 86vh;        height: 500vw;
  }
  2.5% {
    opacity: 0;
    top: 86vh;        height: 500vw;
  }
}

.beam-1-exit:before,
.beam-1-exit:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  left: 26.464040558188895vw;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam1Exit 40s ease-in 5300ms forwards;
  animation-iteration-count: infinite;
}


  .beam-1 {
    z-index: 0;
    background-color: black;
    background-image: linear-gradient(0deg, transparent 0px, red 2px, transparent 4px), linear-gradient(90deg, transparent 0px, red 2px, transparent 4px);
    background-size: 1px 1px;
    height: 200%;
    position: relative;
    transform-origin: center top;
    animation-name: flyin;
    animation-duration: 50ms;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
  }
  @keyframes beam2Enter {
  0% {
    opacity: 0;
    top: 400vh;        width: 1px;
  }
  0.625%, 1.25% {
    opacity: 1;
    height: 365vh;        top: 35vh;
  }
  2.5% {
    opacity: 0;
    height: 365vh;        top: 35vh;
  }
}

.beam-2-enter:before,
.beam-2-enter:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  left: 58vw;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam2Enter 40s ease-in 10050ms forwards;
  animation-iteration-count: infinite;
}

  @keyframes beam2Turn {
  0% {
    opacity: 0;
    height: 1px;        top: 35vh;
left: 58vw;
  }
  0.625%, 1.25% {
    opacity: 1;
    width: 2.8156384763677966vw;          left: 55.184361523632205vw;
  }
  2.5% {
    opacity: 0;
    width: 2.8156384763677966vw;          left: 55.184361523632205vw;
  }
}

.beam-2-turn:before,
.beam-2-turn:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  left: 58vw;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam2Turn 40s ease-in 10150ms forwards;
  animation-iteration-count: infinite;
}

  @keyframes beam2Exit {
  0% {
    opacity: 0;
    top: 35vh;        height: 0vh;
  }
  0.625%, 1.25% {
    opacity: 1;
    top: 0vh;        height: 35vh;
  }
  2.5% {
    opacity: 0;
    top: 0vh;        height: 35vh;
  }
}

.beam-2-exit:before,
.beam-2-exit:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  left: 55.184361523632205vw;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam2Exit 40s ease-in 10300ms forwards;
  animation-iteration-count: infinite;
}


  .beam-2 {
    z-index: 0;
    background-color: black;
    background-image: linear-gradient(0deg, transparent 0px, red 2px, transparent 4px), linear-gradient(90deg, transparent 0px, red 2px, transparent 4px);
    background-size: 1px 1px;
    height: 200%;
    position: relative;
    transform-origin: center top;
    animation-name: flyin;
    animation-duration: 50ms;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
  }
  @keyframes beam3Enter {
  0% {
    opacity: 0;
    top: 400vh;        width: 1px;
  }
  0.625%, 1.25% {
    opacity: 1;
    height: 383vh;        top: 17vh;
  }
  2.5% {
    opacity: 0;
    height: 383vh;        top: 17vh;
  }
}

.beam-3-enter:before,
.beam-3-enter:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  left: 49vw;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam3Enter 40s ease-in 15050ms forwards;
  animation-iteration-count: infinite;
}

  @keyframes beam3Turn {
  0% {
    opacity: 0;
    height: 1px;        top: 17vh;

  }
  0.625%, 1.25% {
    opacity: 1;
    width: 4.495442412299446vw;          left: 49vw;
  }
  2.5% {
    opacity: 0;
    width: 4.495442412299446vw;          left: 49vw;
  }
}

.beam-3-turn:before,
.beam-3-turn:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  left: 49vw;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam3Turn 40s ease-in 15150ms forwards;
  animation-iteration-count: infinite;
}

  @keyframes beam3Exit {
  0% {
    opacity: 0;
    top: 17vh;        height: 0vh;
  }
  0.625%, 1.25% {
    opacity: 1;
    top: 0vh;        height: 17vh;
  }
  2.5% {
    opacity: 0;
    top: 0vh;        height: 17vh;
  }
}

.beam-3-exit:before,
.beam-3-exit:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  left: 53.49544241229945vw;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam3Exit 40s ease-in 15300ms forwards;
  animation-iteration-count: infinite;
}


  .beam-3 {
    z-index: 0;
    background-color: black;
    background-image: linear-gradient(0deg, transparent 0px, red 2px, transparent 4px), linear-gradient(90deg, transparent 0px, red 2px, transparent 4px);
    background-size: 1px 1px;
    height: 200%;
    position: relative;
    transform-origin: center top;
    animation-name: flyin;
    animation-duration: 50ms;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
  }
  @keyframes beam4Enter {
  0% {
    opacity: 0;
    left: 0vw;        width: 0vw;
  }
  0.625%, 1.25% {
    opacity: 1;
    width: 18vw;
  }
  2.5% {
    opacity: 0;
    width: 18vw;
  }
}

.beam-4-enter:before,
.beam-4-enter:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  top: 6vh;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam4Enter 40s ease-in 20050ms forwards;
  animation-iteration-count: infinite;
}

  @keyframes beam4Turn {
  0% {
    opacity: 0;
    height: 0vw;        left: 18vw;
top: 6vh;
  }
  0.625%, 1.25% {
    opacity: 1;
    height: 2.155749959935212vh;          top: 3.844250040064788vh;
  }
  2.5% {
    opacity: 0;
    height: 2.155749959935212vh;          top: 3.844250040064788vh;
  }
}

.beam-4-turn:before,
.beam-4-turn:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  top: 6vh;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam4Turn 40s ease-in 20150ms forwards;
  animation-iteration-count: infinite;
}

  @keyframes beam4Exit {
  0% {
    opacity: 0;
    left: 18vw;        width: 18vw;
  }
  0.625%, 1.25% {
    opacity: 1;
    left: 18vw;        width: 82vw;
  }
  2.5% {
    opacity: 0;
    left: 18vw;        width: 82vw;
  }
}

.beam-4-exit:before,
.beam-4-exit:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  top: 3.844250040064788vh;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam4Exit 40s ease-in 20300ms forwards;
  animation-iteration-count: infinite;
}


  .beam-4 {
    z-index: 0;
    background-color: black;
    background-image: linear-gradient(0deg, transparent 0px, red 2px, transparent 4px), linear-gradient(90deg, transparent 0px, red 2px, transparent 4px);
    background-size: 1px 1px;
    height: 200%;
    position: relative;
    transform-origin: center top;
    animation-name: flyin;
    animation-duration: 50ms;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
  }
  @keyframes beam5Enter {
  0% {
    opacity: 0;
    left: 100vw;        width: 0vw;
  }
  0.625%, 1.25% {
    opacity: 1;
    left: 12vw;        width: 88vw;
  }
  2.5% {
    opacity: 0;
    left: 12vw;        width: 88vw;
  }
}

.beam-5-enter:before,
.beam-5-enter:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  top: 17vh;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam5Enter 40s ease-in 25050ms forwards;
  animation-iteration-count: infinite;
}

  @keyframes beam5Turn {
  0% {
    opacity: 0;
    height: 0vw;        left: 12vw;

  }
  0.625%, 1.25% {
    opacity: 1;
    height: 2.436234418550784vh;          top: 17vh;
  }
  2.5% {
    opacity: 0;
    height: 2.436234418550784vh;          top: 17vh;
  }
}

.beam-5-turn:before,
.beam-5-turn:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  top: 17vh;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam5Turn 40s ease-in 25150ms forwards;
  animation-iteration-count: infinite;
}

  @keyframes beam5Exit {
  0% {
    opacity: 0;
    left: 12vw;        width: 0vw;
  }
  0.625%, 1.25% {
    opacity: 1;
    left: 0vw;        width: 12vw;
  }
  2.5% {
    opacity: 0;
    left: 0vw;        width: 12vw;
  }
}

.beam-5-exit:before,
.beam-5-exit:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  top: 19.436234418550782vh;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam5Exit 40s ease-in 25300ms forwards;
  animation-iteration-count: infinite;
}


  .beam-5 {
    z-index: 0;
    background-color: black;
    background-image: linear-gradient(0deg, transparent 0px, red 2px, transparent 4px), linear-gradient(90deg, transparent 0px, red 2px, transparent 4px);
    background-size: 1px 1px;
    height: 200%;
    position: relative;
    transform-origin: center top;
    animation-name: flyin;
    animation-duration: 50ms;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
  }
  @keyframes beam6Enter {
  0% {
    opacity: 0;
    top: 400vh;        width: 1px;
  }
  0.625%, 1.25% {
    opacity: 1;
    height: 333vh;        top: 67vh;
  }
  2.5% {
    opacity: 0;
    height: 333vh;        top: 67vh;
  }
}

.beam-6-enter:before,
.beam-6-enter:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  left: 75vw;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam6Enter 40s ease-in 30050ms forwards;
  animation-iteration-count: infinite;
}

  @keyframes beam6Turn {
  0% {
    opacity: 0;
    height: 1px;        top: 67vh;
left: 75vw;
  }
  0.625%, 1.25% {
    opacity: 1;
    width: 4.374957480192707vw;          left: 70.6250425198073vw;
  }
  2.5% {
    opacity: 0;
    width: 4.374957480192707vw;          left: 70.6250425198073vw;
  }
}

.beam-6-turn:before,
.beam-6-turn:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  left: 75vw;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam6Turn 40s ease-in 30150ms forwards;
  animation-iteration-count: infinite;
}

  @keyframes beam6Exit {
  0% {
    opacity: 0;
    top: 67vh;        height: 0vh;
  }
  0.625%, 1.25% {
    opacity: 1;
    top: 0vh;        height: 67vh;
  }
  2.5% {
    opacity: 0;
    top: 0vh;        height: 67vh;
  }
}

.beam-6-exit:before,
.beam-6-exit:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  left: 70.6250425198073vw;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam6Exit 40s ease-in 30300ms forwards;
  animation-iteration-count: infinite;
}


  .beam-6 {
    z-index: 0;
    background-color: black;
    background-image: linear-gradient(0deg, transparent 0px, red 2px, transparent 4px), linear-gradient(90deg, transparent 0px, red 2px, transparent 4px);
    background-size: 1px 1px;
    height: 200%;
    position: relative;
    transform-origin: center top;
    animation-name: flyin;
    animation-duration: 50ms;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
  }
  @keyframes beam7Enter {
  0% {
    opacity: 0;
    top: 0vh;
       width: 1px;
  }
  0.625%, 1.25% {
    opacity: 1;
    height: 19vh;
  }
  2.5% {
    opacity: 0;
    height: 19vh;
  }
}

.beam-7-enter:before,
.beam-7-enter:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  left: 43vw;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam7Enter 40s ease-in 35050ms forwards;
  animation-iteration-count: infinite;
}

  @keyframes beam7Turn {
  0% {
    opacity: 0;
    height: 1px;        top: 19vh;

  }
  0.625%, 1.25% {
    opacity: 1;
    width: 4.903827155393342vw;          left: 43vw;
  }
  2.5% {
    opacity: 0;
    width: 4.903827155393342vw;          left: 43vw;
  }
}

.beam-7-turn:before,
.beam-7-turn:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  left: 43vw;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam7Turn 40s ease-in 35150ms forwards;
  animation-iteration-count: infinite;
}

  @keyframes beam7Exit {
  0% {
    opacity: 0;
    top: 19vh;        height: 0vh;
  }
  0.625%, 1.25% {
    opacity: 1;
    top: 19vh;        height: 500vw;
  }
  2.5% {
    opacity: 0;
    top: 19vh;        height: 500vw;
  }
}

.beam-7-exit:before,
.beam-7-exit:after {
  content: '';
  display: block;
  position: absolute;
  background: #FF0000;
  height: 1px;
  width: 1px;
  opacity: 0;
  left: 47.903827155393344vw;
  box-shadow: 0 -2px 2px #FF0000;
  animation: beam7Exit 40s ease-in 35300ms forwards;
  animation-iteration-count: infinite;
}


  .beam-7 {
    z-index: 0;
    background-color: black;
    background-image: linear-gradient(0deg, transparent 0px, red 2px, transparent 4px), linear-gradient(90deg, transparent 0px, red 2px, transparent 4px);
    background-size: 1px 1px;
    height: 200%;
    position: relative;
    transform-origin: center top;
    animation-name: flyin;
    animation-duration: 50ms;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
  }