.demo .link {
  display: block;
  margin: 30px;
}
.demo .text-center {
  text-align: center !important;
}
.demo .button {
  display: inline-flex;
  align-items: center;
  padding: 16px 35px;
  padding-left: 20px;
  background-color: orange;
  color: #fff;
  border-radius: 25px;
  font-size: 1.15em;
  text-decoration: none;
  margin: 0 !important;
}

#animation-wrapper {
  display: none;
  opacity: 0;
  transition: opacity 0.4;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  position: fixed;
  opacity: 1;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 100 !important;
}
#animation-wrapper.show {
  display: flex;
}

.hidden {
  display: none;
}

#bulldog {
  width: 70%;
  max-width: 564px;
}
#bulldog.animate {
  display: block;
  -webkit-animation: bulldog 3s both ease-in-out;
          animation: bulldog 3s both ease-in-out;
}

@-webkit-keyframes bulldog {
  0% {
    opacity: 0;
    transform: translateX(-400%);
  }
  50% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(400%);
  }
}

@keyframes bulldog {
  0% {
    opacity: 0;
    transform: translateX(-400%);
  }
  50% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(400%);
  }
}
#animation-3 {
  opacity: 0;
  transition: opacity 0.5s;
  width: 40%;
  margin-top: 30px;
}

#animation-4 {
  opacity: 0;
  transition: opacity 0.5s;
  width: 40%;
  margin-top: 30px;
}
#animation-4.animate {
  display: block;
  -webkit-animation: starfall 3s both ease-in-out;
          animation: starfall 3s both ease-in-out;
}

@-webkit-keyframes starfall {
  0% {
    opacity: 0;
    transform: translate(150%, -300%);
  }
  50% {
    transform: unset;
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-150%, 300%);
  }
}

@keyframes starfall {
  0% {
    opacity: 0;
    transform: translate(150%, -300%);
  }
  50% {
    transform: unset;
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-150%, 300%);
  }
}
#animation-5 {
  width: 70%;
  max-width: 2000px;
  overflow: hidden;
  transform-origin: left;
}
#animation-5 img {
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#animation-5.animate {
  display: block;
  -webkit-animation: rainbow 1s both ease-out;
          animation: rainbow 1s both ease-out;
}

@-webkit-keyframes rainbow {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes rainbow {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
.animation-shake {
  -webkit-animation: shake 6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both infinite;
          animation: shake 6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both infinite;
}

@-webkit-keyframes shake {
  1%, 9% {
    transform: translate3d(-1px, 0, 0);
  }
  2%, 8% {
    transform: translate3d(2px, 0, 0);
  }
  3%, 5%, 7% {
    transform: translate3d(-4px, 0, 0);
  }
  4%, 6% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes shake {
  1%, 9% {
    transform: translate3d(-1px, 0, 0);
  }
  2%, 8% {
    transform: translate3d(2px, 0, 0);
  }
  3%, 5%, 7% {
    transform: translate3d(-4px, 0, 0);
  }
  4%, 6% {
    transform: translate3d(4px, 0, 0);
  }
}
.animation-rocket {
  -webkit-animation: startRocket both 1s;
          animation: startRocket both 1s;
}

@-webkit-keyframes startRocket {
  0% {
    transform: rotate(-45deg);
  }
  10% {
    transform: translateY(0) rotate(-45deg);
  }
  80% {
    transform: translateY(-240px) rotate(-60deg);
  }
  100% {
    transform: translateY(-300px) rotate(-30deg);
    opacity: 0;
  }
}

@keyframes startRocket {
  0% {
    transform: rotate(-45deg);
  }
  10% {
    transform: translateY(0) rotate(-45deg);
  }
  80% {
    transform: translateY(-240px) rotate(-60deg);
  }
  100% {
    transform: translateY(-300px) rotate(-30deg);
    opacity: 0;
  }
}
.image {
  max-width: 100%;
  margin-top: 100px;
}

.dog-1.animate {
  -webkit-animation: dog-1 2s 0.5s both infinite;
          animation: dog-1 2s 0.5s both infinite;
}

@-webkit-keyframes dog-1 {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes dog-1 {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
}
.dog-2.animate {
  -webkit-animation: dog-2 2s 0.5s both infinite;
          animation: dog-2 2s 0.5s both infinite;
}

@-webkit-keyframes dog-2 {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  70% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes dog-2 {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  70% {
    transform: scale(1);
    opacity: 1;
  }
}
.dog-3.animate {
  display: block;
  -webkit-animation: dog-3 3s both infinite;
          animation: dog-3 3s both infinite;
}

@-webkit-keyframes dog-3 {
  0% {
    transform: translate(100%, -100%) rotate(-145deg);
    opacity: 0;
  }
  20% {
    transform: translate(-10%, 30%) rotate(25deg);
  }
  30%, 70% {
    transform: translate(0) rotate(0);
    opacity: 1;
  }
  80% {
    transform: translate(10%, 30%) rotate(25deg);
  }
  100% {
    transform: translate(-100%, -100%) rotate(-145deg);
    opacity: 0;
  }
}

@keyframes dog-3 {
  0% {
    transform: translate(100%, -100%) rotate(-145deg);
    opacity: 0;
  }
  20% {
    transform: translate(-10%, 30%) rotate(25deg);
  }
  30%, 70% {
    transform: translate(0) rotate(0);
    opacity: 1;
  }
  80% {
    transform: translate(10%, 30%) rotate(25deg);
  }
  100% {
    transform: translate(-100%, -100%) rotate(-145deg);
    opacity: 0;
  }
}
.dog-4.animate {
  display: block;
  -webkit-animation: dog-4 3s 0.5s both infinite;
          animation: dog-4 3s 0.5s both infinite;
}

@-webkit-keyframes dog-4 {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes dog-4 {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
}
.dog-5.animate {
  display: block;
  -webkit-animation: dog-5 3s 0.5s both infinite ease-in-out;
          animation: dog-5 3s 0.5s both infinite ease-in-out;
}

@-webkit-keyframes dog-5 {
  0% {
    transform: translateX(1000%) skew(-25deg);
  }
  40% {
    transform: translateX(-30%) skew(25deg);
  }
  50% {
    transform: translateX(0);
  }
}

@keyframes dog-5 {
  0% {
    transform: translateX(1000%) skew(-25deg);
  }
  40% {
    transform: translateX(-30%) skew(25deg);
  }
  50% {
    transform: translateX(0);
  }
}
.dog-6.animate {
  display: block;
  -webkit-animation: dog-6 3s 0.5s both infinite ease-in-out;
          animation: dog-6 3s 0.5s both infinite ease-in-out;
}

@-webkit-keyframes dog-6 {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  20% {
    transform: scale(1.2);
  }
  30% {
    transform: scale(0.8);
  }
  40% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes dog-6 {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  20% {
    transform: scale(1.2);
  }
  30% {
    transform: scale(0.8);
  }
  40% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}
#superdog {
  width: 50%;
  max-width: 300px;
  overflow: hidden;
  transform-origin: left;
}
@media (max-width: 768px) {
  #superdog {
    top: 0 !important;
    bottom: 0 !important;
  }
}
@media (min-width: 768px) {
  #superdog {
    width: 25%;
  }
}
#superdog img {
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#superdog.animate {
  display: block;
  -webkit-animation: superdog-alt-mobile 2s both ease-in-out;
          animation: superdog-alt-mobile 2s both ease-in-out;
}
@media (min-width: 768px) {
  #superdog.animate {
    -webkit-animation: superdog 2s both ease-in-out;
            animation: superdog 2s both ease-in-out;
  }
}

@-webkit-keyframes superdog {
  0% {
    opacity: 0;
    transform: translateX(300%);
  }
  50% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-300%);
  }
}

@keyframes superdog {
  0% {
    opacity: 0;
    transform: translateX(300%);
  }
  50% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-300%);
  }
}
#superdog-alt {
  width: 50%;
  max-width: 300px;
  overflow: hidden;
  transform-origin: left;
}
@media (max-width: 768px) {
  #superdog-alt {
    top: 0 !important;
    bottom: 0 !important;
  }
}
@media (min-width: 768px) {
  #superdog-alt {
    width: 25%;
  }
}
#superdog-alt img {
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#superdog-alt.animate {
  display: block;
  -webkit-animation: superdog-alt-mobile 2s both ease-in-out;
          animation: superdog-alt-mobile 2s both ease-in-out;
}
@media (min-width: 768px) {
  #superdog-alt.animate {
    -webkit-animation: superdog-alt 2s both ease-in-out;
            animation: superdog-alt 2s both ease-in-out;
  }
}

@-webkit-keyframes superdog-alt {
  0% {
    opacity: 0;
    transform: translateX(-200%) scaleX(-1);
  }
  50% {
    opacity: 1;
    transform: translateX(100%) scaleX(-1);
  }
  100% {
    opacity: 0;
    transform: translateX(400%) scaleX(-1);
  }
}

@keyframes superdog-alt {
  0% {
    opacity: 0;
    transform: translateX(-200%) scaleX(-1);
  }
  50% {
    opacity: 1;
    transform: translateX(100%) scaleX(-1);
  }
  100% {
    opacity: 0;
    transform: translateX(400%) scaleX(-1);
  }
}
@-webkit-keyframes superdog-alt-mobile {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(400%) scaleX(-1) rotate(45deg);
  }
  50% {
    opacity: 1;
    transform: translateX(100%) translateY(0) scaleX(-1) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: translateX(250%) translateY(-400%) scaleX(-1) rotate(45deg);
  }
}
@keyframes superdog-alt-mobile {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(400%) scaleX(-1) rotate(45deg);
  }
  50% {
    opacity: 1;
    transform: translateX(100%) translateY(0) scaleX(-1) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: translateX(250%) translateY(-400%) scaleX(-1) rotate(45deg);
  }
}/*# sourceMappingURL=animation.css.map */