@keyframes fadeIn {
  0% { opacity: 0; }
  50% { opacity: 0; }
  80% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  50% { opacity: 1; }
  80% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes invisible {
  0% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes fadeInOut {
  0% { opacity: 1; }
  30% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.2); }
  60% { opacity: 0.2; transform: scale(1.5); }
  84% { opacity: 0; transform: scale(1.8); }
  85% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; }
}

@keyframes fadeOutIn {
  0% { opacity: 0; }
  30% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 1; }
}

.intro:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1f4035;
  animation: fadeOut 4s ease-out forwards;
  z-index: 3;
}

.intro-slide1 {
  animation: fadeIn 4s ease-out forwards,
             fadeInOut 10s forwards 4s;
}
.intro-slide2 {
  animation: invisible 4s forwards,
             fadeOutIn 10s forwards 4s;
}


@keyframes bouncing {
  0% { transform: translateY(0); }
  15% { transform: translateY(-5%); }
  30% { transform: translateY(0); }
  45% { transform: translateY(-5%); }
  60% { transform: translateY(0) scale(1); }
  80% { transform: translateY(-10%) scale(1.1); }
  100% { transform: translateY(0) scale(1); }
}
.location-map-pin {
  animation: bouncing 3.6s infinite;
}


@keyframes autoSlideIndicator {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* .view-slide-indicator.active:before {
  animation: autoSlideIndicator 8s linear;
} */
/* .panorama-slider-indicator.active:before {
  animation: autoSlideIndicator 8s linear;
} */
/* .ground-slider-indicator.active:before {
  animation: autoSlideIndicator 8s linear;
} */