@keyframes slide-in {
    0% {
        transform: translateY(50%);
        opacity:0;
    }
    100% {
        transform: translateY(0px);
        opacity:1;
    }
  }

  @keyframes slide-in-sm {
    0% {
        transform: translateY(80px);
        opacity:0;
    }
    100% {
        transform: translateY(0px);
        opacity:1;
    }
  }

  @keyframes slide-in-out {
    0% {
        transform: translateY(50%);
        opacity:0;
    }
    10%, 70% {
        transform: translateY(0px);
        opacity:1;
    }
    100% {
      transform: translateY(50%);
      opacity:0;
    }
  }
  
  @keyframes slide-down {
    0% {
        transform: translateY(-50%);
        opacity:0;
    }
    100% {
        transform: translateY(0px);
        opacity:1;
    }
  }

  @keyframes slide-down-sm {
    0% {
        transform: translateY(-5px);
        opacity:0;
    }
    100% {
        transform: translateY(0px);
        opacity:1;
    }
  }
  
  @keyframes slide-left {
    0% {
        transform: translateX(20px);
        opacity:0;
    }
    100% {
        transform: translateX(0px);
        opacity:1;
    }
  }

  @keyframes slide-right-sm {
    0% {
        transform: translateX(-10px);
        opacity:0;
    }
    100% {
        transform: translateX(0px);
        opacity:1;
    }
  }

  @keyframes slide-left-full {
    0% {
        transform: translateX(10%) translateX(10%);
        opacity:1;
    }
    50% {
        transform: translateX(-10%) translateX(0);
        opacity:1;
    }
    70% {
        transform: translateX(-10%) translateX(0);
        opacity:1;
    }
    100% {
        transform: translateX(-40%)  translateX(10%);
        opacity:1;
    }
  }

  @keyframes birds {
    0% {
        transform: scale(0.9) translateX(-12%) translateY(0);
        opacity:0;
    }
    10% {
      transform: scale(1) translateX(-6%) translateY(2%);
      opacity:1;
    }
    20% {
      transform: scale(1) translateX(-2%) translateY(0);
      opacity:1;
    }
    30% {
      transform: scale(1) translateX(5%) translateY(2%);
      opacity:1;
    }
    40% {
      transform: scale(1) translateX(10%) translateY(0);
      opacity:1;
    }
    50% {
      transform: scale(1) translateX(20%) translateY(2%);
      opacity:1;
    }
    60% {
      transform: scale(1) translateX(30%) translateY(0);
      opacity:1;
    }
    70% {
      transform: scale(1) translateX(40%) translateY(2%);
      opacity:1;
    }
    80% {
      transform: scale(1) translateX(50%) translateY(0);
      opacity:1;
    }
    90% {
      transform: scale(1) translateX(60%) translateY(2%);
      opacity:1;
    }
    100% {
      transform: scale(1) translateX(70%) translateY(0);
      opacity:0;
    }
  }

  @keyframes tree-man {
    0% {
        transform: scale(1) translateX(0) translateY(0);
        opacity:1;
    }
    10% {
      transform: scale(1) translateX(-1%) translateY(2%);
      opacity:1;
    }
    20% {
      transform: scale(1) translateX(-2%) translateY(0);
      opacity:1;
    }
    30% {
      transform: scale(1) translateX(-5%) translateY(2%);
      opacity:1;
    }
    40% {
      transform: scale(1) translateX(-10%) translateY(0);
      opacity:1;
    }
    50% {
      transform: scale(1) translateX(-20%) translateY(2%);
      opacity:1;
    }
    60% {
      transform: scale(1) translateX(-30%) translateY(0);
      opacity:1;
    }
    70% {
      transform: scale(1) translateX(-40%) translateY(2%);
      opacity:1;
    }
    80% {
      transform: scale(1) translateX(-50%) translateY(0);
      opacity:1;
    }
    90% {
      transform: scale(1) translateX(-60%) translateY(2%);
      opacity:1;
    }
    98% {
      transform: scale(1) translateX(-65%) translateY(0);
      opacity:1;
    }
    100% {
      transform: scale(1) translateX(-65%) translateY(0);
      opacity:0;
    }
  }

  @keyframes racoon {
    0% {
      transform: translateX(0) translateY(-2%);
      opacity:0;
    }
    10% {
      transform: translateX(-7%) translateY(-2%);
      opacity:1;
    }
    40% {
      transform: translateX(-10%) translateY(-2%);
      opacity:1;
    }
    70% {
      transform: translateX(-6%) translateY(-2%);
      opacity:1;
    }
    95% {
      transform: translateX(0) translateY(-2%);
      opacity:1;
    }
    96% {
      transform: translateX(0) translateY(-2%);
      opacity:1;
    }
    100% {
      transform: translateX(0) translateY(-2%);
      opacity:1;
    }
  }

  @keyframes rum {
    0% {
        transform: translateX(0) translateY(0);
        opacity:1;
    }
    10% {
        transform: translateX(0) translateY(0);
        opacity:1;
    }
    40% {
        transform: translateX(0) translateY(0);
        opacity:1;
    }
    70% {
        transform: translateX(4.5%) translateY(0);
        opacity:1;
    }
    95% {
        transform: translateX(10%) translateY(0);
        opacity:0;
    }
    96% {
      transform: translateX(0) translateY(-10%);
      opacity:0;
    }
    100% {
      transform: translateX(0) translateY(0);
      opacity:1;
    }
  }

    

  @keyframes eyes {
    0%, 40%, 60%, 80%, 100% {
      opacity:0;
    }
    10%, 50%, 70%, 90% {
      opacity:1;
    }
  }
  
  @keyframes slide-right {
    0% {
        transform: translateX(-20px);
        opacity:0;
    }
    100% {
        transform: translateX(0px);
        opacity:1;
    }
  }
  
  @keyframes scale-in-out-center {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    20% {
      transform: scale(1);
      opacity: 1;
    }
    80% {
      transform: scale(1);
      opacity: 1;
    }
    100% {
      transform: scale(0);
      opacity: 0;
    }
  }
  
  @keyframes scale-in-center {
    0% {
      transform: scale(0);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes scale-out-in-center {
    0% {
      transform: scale(1.4);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes pulsate-fwd {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes pulsate-sm-fwd {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  
  
  @keyframes level-align-center {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(70px);
    }
  }
  
  @keyframes fade-out {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fade-in-out {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    40% {
      opacity: 0.8;
    }
    50% {
      opacity: 1;
    }
    60% {
      opacity: 0.8;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
  @keyframes tada {
    0% {
        transform: scale3d(1, 1, 1);
        filter: drop-shadow(0 0 0 crimson);
    }
    10%, 20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        filter: drop-shadow(0 0 0.75rem crimson);
    }
    30%, 50%, 70%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        filter: drop-shadow(0 0 0.75rem crimson);
    }
    40%, 60%, 80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        filter: drop-shadow(0 0 0.75rem crimson);
    }
    100% {
        transform: scale3d(1, 1, 1) ;
        filter: drop-shadow(0 0 0 crimson);
    }
  } 

  @keyframes tada-sm {
    0% {
        transform: scale3d(1, 1, 1);
        filter: drop-shadow(0 0 0 crimson);
    }
    10%, 20% {
        transform: scale3d(.99, .99, .99) rotate3d(0, 0, 1, -0.3deg);
        filter: drop-shadow(0 0 0.75rem crimson);
    }
    30%, 50%, 70%, 90% {
        transform: scale3d(1.01, 1.01, 1.01) rotate3d(0, 0, 1, 0.3deg);
        filter: drop-shadow(0 0 0.75rem crimson);
    }
    40%, 60%, 80% {
        transform: scale3d(1.01, 1.01, 1.01) rotate3d(0, 0, 1, -0.3deg);
        filter: drop-shadow(0 0 0.75rem crimson);
    }
    100% {
        transform: scale3d(1, 1, 1) ;
        filter: drop-shadow(0 0 0 crimson);
    }
  } 
  
  
  @keyframes slide-in-out-center {
    0% {
      transform: translateX(-20px);
      opacity: 0;
    }
    20% {
      transform: translateX(0px);
      opacity: 1;
    }
    30% {
      transform: translateX(5px);
    }
    80% {
      transform: translateX(0px);
      opacity: 1;
    }
    100% {
      transform: translateX(20px);
      opacity: 0;
    }
  }

  @keyframes reveal-up {
    0% {
      transform: translateY(0);
    }
    100% {
        transform: translateY(-42%);
    }
  }

  @keyframes reveal-down {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(45%);
    }
  }

  @keyframes reveal-up-full {
    0% {
      transform: translateY(0);
    }
    100% {
        transform: translateY(-62%);
    }
  }

  @keyframes reveal-down-full {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(65%);
    }
  }

  @keyframes hide-up {
    0% {
        
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(0);
    }
  }

  @keyframes hide-down {
    0% {
        transform: translateY(50%);
    }
    100% {
        transform: translateY(0);
    }
  }

  @keyframes rotate-3d {
    0% {
      transform: perspective(500px) rotateY(0deg) scale(0.8);
    }
    50% {
        transform: perspective(400px) rotateY(180deg) scale(1.1);
    }
    80% {
          transform: perspective(500px) rotateY(360deg) scale(0.8);
    }
    100% {
        transform: perspective(500px) rotateY(360deg) scale(0.8);
    }
  }

  @keyframes rotate {
    0% {
        transform: perspective(1000px) rotate(0deg);
    }
    100% {
        transform: perspective(1000px) rotate(360deg);
    }
  }

  @keyframes phoneRotate {
    0% {
        transform: rotate(0deg);
    }
    20%, 80% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(0deg);
    }
  }

  @keyframes float {
    0% {
      transform: translateX(0) translateY(0);
    }
    50% {
      transform: translateX(30px) translateY(10px);
    }
    100% {
      transform: translateX(0) translateY(0);
    }
  }

  @keyframes float-up {
    0% {
      transform: translateX(0) translateY(0);
    }
    50% {
      transform: translateX(0) translateY(10px);
    }
    100% {
      transform: translateX(0) translateY(0);
    }
  }

  @keyframes float-reverse {
    0% {
      transform: translateX(0) translateY(0);
    }
    50% {
      transform: translateX(-10px) translateY(-10px);
    }
    100% {
      transform: translateX(0) translateY(0);
    }
  }

  @keyframes shadow {
    0% {
        opacity: .8;
        transform: translateX(-50%) translateY(-40%) scale(.5);
    }
    50% {
        opacity: 0.3;
        transform: translateX(-50%) translateY(-50%) scale(1);
    }
    80% {
        opacity: .8;
        transform: translateX(-50%) translateY(-40%) scale(.5);
    }
    100% {
        opacity: .8;
        transform: translateX(-50%) translateY(-40%) scale(.5);
    }
  }

  @keyframes open-curtain-left {
    0% {
        transform: scaleX(100%)
    }
    100% {
        transform: scaleX(0.575)
    }
  }

  @keyframes close-curtain-left {
    0% {
        transform: scaleX(0.575)
    }
    100% {
        transform: scaleX(100%)
    }
  }

  @keyframes open-curtain-right {
    0% {
        transform: scaleX(100%)
    }
    100% {
        transform: scaleX(50%)
    }
  }

  @keyframes close-curtain-right {
    0% {
        transform: scaleX(50%)
    }
    100% {
        
        transform: scaleX(100%)
    }
  }

  @keyframes tvOn {
    0% {
        filter: brightness(200%);
    }
    100% {
        filter: brightness(1);
    }
  }
  
  .anim-tada {
    animation: tada 1s linear both;
  }

  .anim-tada-sm {
    animation: tada-sm 1s linear both;
  }
  
  .anim-scale-in-out{
    animation: scale-in-out-center 2s cubic-bezier(0.46, -0.71, 0.49, 1.53) both;
  }

  .anim-racoon{
    animation: racoon 2.5s ease-in-out both;
  }

  .anim-rum{
    animation: rum 2.5s ease-in-out both;
  }

  .anim-eyes{
    animation: eyes 20s ease-in-out both;
  }
  
  .anim-scale-in{
    animation: scale-in-center 0.3s cubic-bezier(0.46, -0.71, 0.49, 1.53) both;
  }

  .anim-scale-out-in{
    animation: scale-out-in-center 0.5s cubic-bezier(0, 0.71, 0.26, 1) both;
  }
  
  .anim-fade-in{
    animation: fade-in 0.3s linear both;
  }

  .anim-fade-in-out{
    animation: fade-in-out 2s linear both;
  }
  
  .anim-slide-in-up, .ajs-dialog{
    animation: slide-in 500ms cubic-bezier(0, 0.71, 0.26, 1) both;
  }
  .anim-slide-in-up-sm{
    animation: slide-in-sm 500ms cubic-bezier(0, 0.71, 0.26, 1) both;
  }
  .anim-slide-in-out-up{
    animation: slide-in-out 4s linear both;
  }
  .anim-slide-in-down{
    animation: slide-down 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }
  .anim-slide-in-down-sm{
    animation: slide-down-sm 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }
  .anim-slide-in-left{
    animation: slide-left 500ms cubic-bezier(0, 0.71, 0.26, 1) both;
  }
  .anim-slide-in-right-sm{
    animation: slide-right-sm 500ms cubic-bezier(0, 0.71, 0.26, 1) both;
  }
  .anim-slide-in-left-full{
    animation: slide-left-full 3s cubic-bezier(0, 0.71, 0.26, 1) both;
  }
  .anim-birds{
    animation: birds 3s linear both;
  }
  .anim-tree-man{
    animation: tree-man 12s ease-in-out both;
  }
  .anim-slide-out-left{
    animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }
  
  .anim-slide-in-right{
    animation: slide-right 500ms cubic-bezier(0, 0.71, 0.26, 1) both;
  }
  .anim-slide-out-right{
    animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  .anim-reveal-up{
    animation: reveal-up 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  .anim-reveal-down{
    animation: reveal-down 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  .story-1 .anim-reveal-up, .desk .anim-reveal-up, .story-2 .anim-reveal-up, .desk .anim-reveal-up, .story-3 .anim-reveal-up, .desk .anim-reveal-up, .story-4 .anim-reveal-up, .desk .anim-reveal-up{
    animation: reveal-up-full 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  .story-1 .anim-reveal-down, .desk .anim-reveal-down, .story-2 .anim-reveal-down, .desk .anim-reveal-down, .story-3 .anim-reveal-down, .desk .anim-reveal-down, .story-4 .anim-reveal-down, .desk .anim-reveal-down{
    animation: reveal-down-full 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  .anim-hide-up{
    animation: hide-up 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  .anim-hide-down{
    animation: hide-down 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  .anim-curtain-open-left{
    animation: open-curtain-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  .anim-curtain-close-left{
    animation: close-curtain-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  .anim-curtain-open-right{
    animation: open-curtain-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  .anim-curtain-close-right{
    animation: close-curtain-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  .anim-pulsate{
    animation: pulsate-sm-fwd 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 4;
  }

  .anim-rotate-3d{
    backface-visibility: hidden;
    animation: rotate-3d 2s linear infinite;
  }

  .anim-rotate{
    animation: rotate 1s linear infinite;
  }

  .anim-rotate-staggered{
    animation: rotate 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite;
  }

  .anim-shadow{
    animation: shadow 2s linear infinite;
  }
  
  .anim-float{
    animation: float 10s ease-in-out infinite;
  }

  .anim-float-up{
    animation: float-up 6s ease-in-out infinite;
  }

  .anim-float-reverse{
    animation: float-reverse 10s ease-in-out infinite;
  }

  .anim-tv-on{
    animation: tvOn 1s ease-in-out 1;
  }

  .anim-phone-rotate{
    animation: phoneRotate 4s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite;
  }

  .anim-delay-1{animation-delay: 200ms;}
  .anim-delay-2{animation-delay: 400ms;}
  .anim-delay-3{animation-delay: 600ms;}
  .anim-delay-4{animation-delay: 800ms;}
  .anim-delay-5{animation-delay: 1000ms;}
  .anim-delay-6{animation-delay: 1200ms;}
  .anim-delay-7{animation-delay: 1400ms;}
  .anim-delay-8{animation-delay: 1600ms;}
  
  .anim-duration-1{animation-duration: 100ms;}
  .anim-duration-2{animation-duration: 200ms;}
  .anim-duration-3{animation-duration: 300ms;}
  .anim-duration-4{animation-duration: 400ms;}
  .anim-duration-5{animation-duration: 500ms;}
  .anim-duration-6{animation-duration: 600ms;}
  .anim-duration-7{animation-duration: 700ms;}
  .anim-duration-8{animation-duration: 800ms;}
  
  
  .anim-ease-bounce{animation-timing-function: cubic-bezier(0.18, 1.83, 0.53, 0.88);}