/*-------------------------------------------Background Image---------------------------------------------*/
#bg {
  width: 100%;
  height: auto;
}

/*-------------------------------------------Redirect Button---------------------------------------------*/
.redirect-btn {
  top: 39%;
  z-index: 1;
}

.redirect-btn img {
  width: 70%;
  animation: pulse 1.5s infinite linear;
}

.text1 {
  top: 6%;
  visibility: hidden;
}

.text1 img {
  width: 65%;
  animation: slideInOut 2s infinite linear;
}

.text2 {
  top: 8%;
  visibility: hidden;
}

.text2 img {
  width: 75%;
  animation: slideInOut 2s infinite linear;
  animation-delay: 0.2s;
}

.text3 {
  top: 14%;
  visibility: hidden;
}

.text3 img {
  width: 84%;
  animation: slideInOut 2s infinite linear;
  animation-delay: 0.4s;
}

.text4 {
  top: 16%;
  visibility: hidden;
}

.text4 img {
  width: 70%;
  animation: slideInOut 2s infinite linear;
  animation-delay: 0.6s;
}

.element1 {
  top: 19%;
  right: 3%;
}

.element1 img {
  width: 88%;
}

.element2 {
  top: 0%;
}

.element2 img {
  width: 100%;
}

.element3 {
  top: 0%;
}

.element3 img {
  width: 100%;
  filter: opacity(0.4);
}

.video {
  top: 54.5%;
}

.video video {
  width: 83%;
}

/*-------------------------------------------Keyframe Animation---------------------------------------------*/
@keyframes pulse {
  0% {
    transform: scale(0.9);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(0.9);
  }
}

@keyframes slideInOut {
  0% {
    transform: translateX(-50%);
    opacity: 0;
    visibility: visible;
  }

  10% {
    transform: translateX(-50%);
    opacity: 0;
  }

  20% {
    transform: translateX(0%);
    opacity: 1;
  }

  30% {
    transform: translateX(0%);
    opacity: 1;
  }

  40% {
    transform: translateX(0%);
    opacity: 1;
  }

  50% {
    transform: translateX(0%);
    opacity: 1;
  }

  60% {
    transform: translateX(0%);
    opacity: 1;
  }

  70% {
    transform: translateX(0%);
    opacity: 1;
  }

  80% {
    transform: translateX(50%);
    opacity: 0;
  }

  90% {
    transform: translateX(50%);
    opacity: 0;
  }

  100% {
    transform: translateX(50%);
    opacity: 0;
  }
}

/*-------------------------------------------Multi Device Screen Size---------------------------------------------*/
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  #bg {
    height: 100vh;
  }
}