.hidden {
  opacity: 0;
}

.left {
  animation: left 0.6s;
}
@keyframes left {
  0% {opacity: 0; transform: translateX(-20px);}
  100% {opacity: 1; transform: translateX(0px);}
}

.left1 {
  animation: left 0.7s 0.15s backwards;
}
.left2 {
  animation: left 0.7s 0.3s backwards;
}
.left3 {
  animation: left 0.7s 0.45s backwards;
}
.left4 {
  animation: left 0.7s 0.6s backwards;
}
.left5 {
  animation: left 0.7s 0.75s backwards;
}
.left6 {
  animation: left 0.7s 0.9s backwards;
}
.left7 {
  animation: left 0.7s 1.05s backwards;
}
.left8 {
  animation: left 0.7s 1.2s backwards;
}


.right {
  animation: right 0.6s;
}
@keyframes right {
  0% {opacity: 0; transform: translateX(20px);}
  100% {opacity: 1; transform: translateX(0px);}
}
@keyframes rightA {
  0% {opacity: 0; transform: translateX(50px);}
  100% {opacity: 1; transform: translateX(0px);}
}
.right1 {
  animation: right 0.6s 0.15s backwards;
}
.right2 {
  animation: right 0.6s 0.3s backwards;
}
.right3 {
  animation: right 0.6s 0.45s backwards;
}
.right4 {
  animation: right 0.6s 0.6s backwards;
}
.right5 {
  animation: right 0.6s 0.75s backwards;
}
.right6 {
  animation: right 0.6s 0.9s backwards;
}
.right7 {
  animation: right 0.6s 1.05s backwards;
}
.right8 {
  animation: right 0.6s 1.2s backwards;
}
.right9 {
  animation: right 0.6s 1.35s backwards;
}
.right10 {
  animation: right 0.6s 1.5s backwards;
}
.right11 {
  animation: right 0.6s 1.65s backwards;
}
.right12 {
  animation: right 0.6s 1.8s backwards;
}
.rightA {
  animation: rightA 0.9s 0.1s backwards;
}


.bottom {
  animation: bottom 0.6s;
}
@keyframes bottom {
  0% {opacity: 0; transform: translateY(20px);}
  100% {opacity: 1; transform: translateX(0px);}
}
@keyframes bottomA {
  0% {opacity: 0; transform: translateY(40px);}
  100% {opacity: 1; transform: translateX(0px);}
}
@keyframes bottomB {
  0% {opacity: 0; transform: translateY(70px);}
  100% {opacity: 1; transform: translateX(0px);}
}

.bottom1 {
  animation: bottom 0.6s 0.15s backwards;
}
.bottom2 {
  animation: bottom 0.6s 0.3s backwards;
}
.bottom3 {
  animation: bottom 0.6s 0.45s backwards;
}

.bottomA {
  animation: bottomA 0.9s both;
}

.bottom1A {
  animation: bottomA 0.9s 0.2s both;
}

.bottom2A {
  animation: bottomA 0.9s 0.3s both;
}

.bottom3A {
  animation: bottomA 0.9s 0.45s both;
}

.bottom7A {
  animation: bottomA 0.9s 1.05s both;
}

.bottom8A {
  animation: bottomA 0.9s 1.2s both;
}

.bottomB {
  animation: bottomB 1s backwards;
}

.bottom1B {
  animation: bottomB 1s 0.15s backwards;
}

.bottom2B {
  animation: bottomB 1s 0.3s backwards;
}

.bottom3B {
  animation: bottomB 1s 0.45s backwards;
}

.bottom4B {
  animation: bottomB 1s 0.6s backwards;
}

.bottom5B {
  animation: bottomB 1s 0.75s backwards;
}
.bottom6B {
  animation: bottomB 1s 0.9s backwards;
}
.bottom7B {
  animation: bottomB 1s 1.05s backwards;
}