/***************************************************
 * Custom logo entrance animation
 **************************************************/

.coming-logo svg {
  overflow: visible;
}

.coming-logo .svg-elem-10 {
  animation: logo-slide-left 0.35s ease-out 0s both;
}
.coming-logo .svg-elem-11 {
  animation: logo-slide-left 0.35s ease-out 0.04s both;
}
.coming-logo .svg-elem-12 {
  animation: logo-slide-left 0.35s ease-out 0.08s both;
}
.coming-logo .svg-elem-13 {
  animation: logo-slide-left 0.35s ease-out 0.12s both;
}
.coming-logo .svg-elem-14 {
  animation: logo-slide-left 0.35s ease-out 0.16s both;
}
.coming-logo .svg-elem-15 {
  animation: logo-slide-left 0.35s ease-out 0.2s both;
}
.coming-logo .svg-elem-16 {
  animation: logo-slide-left 0.35s ease-out 0.24s both;
}
.coming-logo .svg-elem-17 {
  animation: logo-slide-left 0.35s ease-out 0.28s both;
}

.coming-logo .svg-elem-1 {
  animation: logo-slide-right 0.35s ease-out 0.5s both;
}
.coming-logo .svg-elem-2 {
  animation: logo-slide-right 0.35s ease-out 0.54s both;
}
.coming-logo .svg-elem-3 {
  animation: logo-slide-right 0.35s ease-out 0.58s both;
}
.coming-logo .svg-elem-4 {
  animation: logo-slide-right 0.35s ease-out 0.62s both;
}
.coming-logo .svg-elem-5 {
  animation: logo-slide-right 0.35s ease-out 0.66s both;
}
.coming-logo .svg-elem-6 {
  animation: logo-slide-right 0.35s ease-out 0.7s both;
}
.coming-logo .svg-elem-7 {
  animation: logo-slide-right 0.35s ease-out 0.74s both;
}
.coming-logo .svg-elem-8 {
  animation: logo-slide-right 0.35s ease-out 0.78s both;
}
.coming-logo .svg-elem-9 {
  animation: logo-slide-right 0.35s ease-out 0.82s both;
}

.coming-logo .svg-elem-18 {
  animation: logo-slide-left 0.2s ease-out 1.0s both;
}

.coming-logo .svg-elem-19 {
  animation: logo-slide-right 0.2s ease-out 1.1s both;
}

@keyframes logo-slide-left {
  0% {
    opacity: 0;
    transform: translateX(-60px);
  }
  80% {
    opacity: 1;
    transform: translateX(5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes logo-slide-right {
  0% {
    opacity: 0;
    transform: translateX(60px);
  }
  80% {
    opacity: 1;
    transform: translateX(-5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}