/* animations */
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slideInFromTop {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slideInFromBottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes flickerAnimationTop {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes flickerAnimationBottom {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.line_top {
  width: 510px;
  height: 47px;
  border-bottom: 1px solid #fff;
  position: absolute;
  top: 30px;
  left: 0px;

  animation: 1s ease-out 0s 1 slideInFromLeft, 1s ease-out 0s 1 flickerAnimationTop;
}

.line_down {
  width: 55px;
  height: 710px;
  border-right: 1px solid #fff;
  position: absolute;
  top: 0px;
  left: 30px;

  animation: 1s ease-out 0s 1 slideInFromTop, 1s ease-out 0s 1 flickerAnimationBottom;
}

.line_bottom {
  width: 510px;
  height: 47px;
  border-top: 1px solid #fff;
  position: absolute;
  bottom: 30px;
  right: 0px;

  animation: 1s ease-out 0s 1 slideInFromRight, 1s ease-out 0s 1 flickerAnimationBottom;
}

.line_up {
  width: 55px;
  height: 670px;
  border-left: 1px solid #fff;
  position: absolute;
  bottom: 0px;
  right: 30px;

  animation: 1s ease-out 0s 1 slideInFromBottom, 1s ease-out 0s 1 flickerAnimationTop;
}