:root {
  --check-out-single-animation-props: 5s ease-in-out infinite forwards;
  --check-out-single-success-delay: 150ms;
}

.check-out-single {
  animation: check-out-single var(--check-out-single-animation-props);
}

.check-out-single line,
.check-out-single path,
.check-out-single rect {
  vector-effect: non-scaling-stroke;
}

.check-out-single #hands-books {
  animation: check-out-single-hands-books var(--check-out-single-animation-props);
}

.check-out-single #thumbs {
  animation: check-out-single-thumbs var(--check-out-single-animation-props);
}

.check-out-single #hands {
  animation: check-out-single-hands var(--check-out-single-animation-props);
}

.check-out-single #success #items * {
  animation: check-out-single-success var(--check-out-single-animation-props);
  opacity: 0;
}

.check-out-single #success #items :nth-child(1) {
  animation-delay: 0ms;
}

.check-out-single #success #items :nth-child(2) {
  animation-delay: calc(var(--check-out-single-success-delay) * 1);
}

.check-out-single #success #items :nth-child(3) {
  animation-delay: calc(var(--check-out-single-success-delay) * 2);
}

.check-out-single #success #items :nth-child(4) {
  animation-delay: calc(var(--check-out-single-success-delay) * 3);
}

.check-out-single #success #items :nth-child(5) {
  animation-delay: calc(var(--check-out-single-success-delay) * 4);
}

/* Keyframes */
@keyframes check-out-single {
  0% {
    opacity: 0;
  }

  5%, 75% {
    opacity: 1;
  }

  80%, 100% {
    opacity: 0;
  }
}

@keyframes check-out-single-thumbs {
  0%, 45% {
    transform: translate3d(0, 387px, 0);
  }

  65%, 100% {
    transform: translate3d(100px, 900px, 0) scale(1.3);
  }
}

@keyframes check-out-single-hands {
  0%, 45% {
    transform: translate3d(0, 0, 0);
  }

  65%, 100% {
    transform: translate3d(0, 300px, 0) scale(1.3);
  }
}

@keyframes check-out-single-hands-books {
  0%, 10% {
    transform: translate3d(109px, -218px, 0);
  }

  40%, 100% {
    transform: scale(0.75) translate3d(400px, -120px, 0);
  }
}

@keyframes check-out-single-success {
  0%, 55% {
    opacity: 0;
  }

  65%, 80% {
    opacity: 1;
  }

  81%, 100% {
    opacity: 0;
  }
}