.scalein.as-animated {
 --animation-name: scalein;
}

.slidetopleft.as-animated {
 --animation-name: slidetopleft;
}

.slidebottomright.as-animated {
 --animation-name: slidebottomright;
}

.slideinleft.as-animated {
 --animation-name: slideinleft;
}

.slideinright.as-animated {
 --animation-name: slideinright;
}

.slideinup.as-animated {
 --animation-name: slideinup;
}

.slideindown.as-animated {
 --animation-name: slideindown;
}

.rollinleft.as-animated {
 --animation-name: rollinleft;
}

.rollinright.as-animated {
 --animation-name: rollinright;
}

.scalein,
.slidetopleft,
.slidebottomright,
.slideinleft,
.slideinright,
.slideindown,
.slideinup,
.rollinleft,
.rollinright {
 opacity: 0;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
 -webkit-animation-iteration-count: 1;
 animation-iteration-count: 1;
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-delay: 0.3s;
 animation-delay: 0.3s;
 -webkit-animation-name: var(--animation-name);
 animation-name: var(--animation-name);
}

.as-animated {
 opacity: 1;
}

@-webkit-keyframes slideinup {
 0% {
  opacity: 0;
  -webkit-transform: translateY(70px);
  transform: translateY(70px);
 }

 100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
 }
}

@keyframes slideinup {
 0% {
  opacity: 0;
  -webkit-transform: translateY(70px);
  transform: translateY(70px);
 }

 100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
 }
}

@-webkit-keyframes slideinright {
 0% {
  opacity: 0;
  -webkit-transform: translateX(70px);
  transform: translateX(70px);
 }

 100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
 }
}

@keyframes slideinright {
 0% {
  opacity: 0;
  -webkit-transform: translateX(70px);
  transform: translateX(70px);
 }

 100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
 }
}

@-webkit-keyframes slideindown {
 0% {
  opacity: 0;
  -webkit-transform: translateY(-70px);
  transform: translateY(-70px);
 }

 100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
 }
}

@keyframes slideindown {
 0% {
  opacity: 0;
  -webkit-transform: translateY(-70px);
  transform: translateY(-70px);
 }

 100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
 }
}

@-webkit-keyframes slideinleft {
 0% {
  opacity: 0;
  -webkit-transform: translateX(-70px);
  transform: translateX(-70px);
 }

 100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
 }
}

@keyframes slideinleft {
 0% {
  opacity: 0;
  -webkit-transform: translateX(-70px);
  transform: translateX(-70px);
 }

 100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
 }
}

@-webkit-keyframes slidebottomright {
 0% {
  opacity: 0;
  -webkit-transform: translateX(100px) translateY(100px);
  transform: translateX(100px) translateY(100px);
 }

 100% {
  -webkit-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);
 }
}

@keyframes slidebottomright {
 0% {
  opacity: 0;
  -webkit-transform: translateX(100px) translateY(100px);
  transform: translateX(100px) translateY(100px);
 }

 100% {
  -webkit-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);
 }
}

@-webkit-keyframes slidetopleft {
 0% {
  opacity: 0;
  -webkit-transform: translateX(-100px) translateY(-100px);
  transform: translateX(-100px) translateY(-100px);
 }

 100% {
  -webkit-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);
 }
}

@keyframes slidetopleft {
 0% {
  opacity: 0;
  -webkit-transform: translateX(-100px) translateY(-100px);
  transform: translateX(-100px) translateY(-100px);
 }

 100% {
  -webkit-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);
 }
}

@-webkit-keyframes scalein {
 0% {
  opacity: 0;
  -webkit-transform: scale(0.3);
  transform: scale(0.3);
 }

 100% {
  -webkit-transform: scale(1);
  transform: scale(1);
 }
}

@keyframes scalein {
 0% {
  opacity: 0;
  -webkit-transform: scale(0.3);
  transform: scale(0.3);
 }

 100% {
  -webkit-transform: scale(1);
  transform: scale(1);
 }
}

@-webkit-keyframes rollinleft {
 0% {
  opacity: 0;
  -webkit-transform: translateX(-100%) rotate(-120deg);
  transform: translateX(-100%) rotate(-120deg);
 }

 to {
  -webkit-transform: translateX(0) rotate(0deg);
  transform: translateX(0) rotate(0deg);
 }
}

@keyframes rollinleft {
 0% {
  opacity: 0;
  -webkit-transform: translateX(-100%) rotate(-120deg);
  transform: translateX(-100%) rotate(-120deg);
 }

 to {
  -webkit-transform: translateX(0) rotate(0deg);
  transform: translateX(0) rotate(0deg);
 }
}

@-webkit-keyframes rollinright {
 0% {
  opacity: 0;
  -webkit-transform: translateX(100%) rotate(120deg);
  transform: translateX(100%) rotate(120deg);
 }

 to {
  -webkit-transform: translateX(0) rotate(0deg);
  transform: translateX(0) rotate(0deg);
 }
}

@keyframes rollinright {
 0% {
  opacity: 0;
  -webkit-transform: translateX(100%) rotate(120deg);
  transform: translateX(100%) rotate(120deg);
 }

 to {
  -webkit-transform: translateX(0) rotate(0deg);
  transform: translateX(0) rotate(0deg);
 }
}