#logo-div #map {
  animation-name: mapscale;
  animation-delay: .25s;
  animation-duration: 1s;
}

.no-logo-anim #logo-div * {
  animation: none !important;
}

@keyframes mapscale {
  from {
    transform: scale(1.5) translate(-150px, -5px);
  }

  to {
    transform: scale(1) translate(0, 0);
  }
}

#logo-div #mappiness-text {
  animation-delay: .5s;
  animation-duration: 1s;
  animation-name: fade-in;
}

#logo-div #app-text {
  animation-delay: .5s;
  animation-duration: 1s;
  animation-name: drop-in;
}

#logo-div #map-outline {
  opacity: 0;
}

#logo-div .fold {
  opacity: 1;
}

#logo-div * {
  animation-fill-mode: both;
  animation-duration: 1s;
}

#logo-div #red-dot {
  animation-name: fade-in;
  animation-delay: 0;
}

#logo-div #orange-dot {
  animation-name: fade-in;
  animation-delay: 0.05s;
}

#logo-div #green-dot {
  animation-name: fade-in;
  animation-delay: 0.1s;
}

#logo-div #blue-dot {
  animation-name: fade-in;
  animation-delay: 0.15s;
}

#logo-div #purple-dot {
  animation-name: fade-in;
  animation-delay: 0.2s;
}

#logo-div #indigo-dot {
  animation-name: fade-in;
  animation-delay: 0.25s;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes drop-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}