/*

h1[data-animation=bounceOutRight]::after{
  opacity: 0;
}
h1[data-animation=bounceOutRight].animation::after{
  animation: bounceOutRight 1500ms ease-in-out;
  animation-delay: 500ms;
}
h1[data-animation=bounceInLeft].animation{
  opacity: 1
}
h1[data-animation=bounceInLeft].animation::after{
  opacity: 1;
  animation: bounceInLeft 1500ms ease-in-out;
}

[data-animation=boomInLeftInga] {
  opacity: 0;
}
[data-animation=boomInLeftInga].animation{
  opacity: 1;
  animation: boomInLeftInga 1500ms ease-in-out;
}
@keyframes boomInLeftInga {
    0% {
      opacity: 0;
      transform: translateX(-500%);
    }
    50%{
      transform: translateX(50%);
    }
    75%{
      transform: translateX(-20%);
    }
    100% {
      opacity: 1;
      transform: translateX(-0%);
    }
}
[data-animation=fadeIn]{
  opacity: 0;
}
[data-animation=fadeIn].animation{
  opacity: 1;
  animation:  fadeIn 1500ms ease-out;
  animation-delay: 200ms
}

[data-animation=flipInX]{
  opacity: 0;
}
[data-animation=flipInX].animation{
  opacity: 1;
  animation:  flipInX 1500ms ease-out;
}
[data-animation=flipOutX].animation{
  opacity: 0;
  animation:  flipOutX 1500ms ease-out;
}
[data-animation=boomOutRight]{
  opacity: 0;
  animation:  wobble 1500ms ease-out;
  animation-delay: 200ms;
}
[data-animation=wobble]{
  animation: wobble 2000ms linear;
  animation-delay: 200ms;
}

[data-animation=fadeInUp] {
  opacity: 0;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  transform: translateY(-100%);
}
[data-animation=fadeInUp].animation {
  opacity: 1;
  animation: fadeInUp 1000ms linear;
}
[data-animation=fadeInLeft].animation{
  
  animation: fadeInLeft 2000ms linear;
}
@keyframes boomOutRight{
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    20%,60% {
        -webkit-transform: rotate3d(0,0,1,40deg);
        transform: rotate3d(0,0,1,40deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    40%,80% {
        -webkit-transform: rotate3d(0,0,1,30deg);
        transform: rotate3d(0,0,1,30deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }

    100% {
        -webkit-transform: translate3d(0,700px,0) scale(15);
        transform: translate3d(0,700px,0) scale(15);
        opacity: 0
    }
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px,0,0);
        transform: translate3d(-20px,0,0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(2000px,0,0);
        transform: translate3d(2000px,0,0)
    }
}

@keyframes wobble {
    0% {
      opacity: 1;
        -webkit-transform: none;
        transform: none
    }

    15% {
        -webkit-transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
        transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)
    }

    30% {
        -webkit-transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);
        transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg)
    }

    45% {
        -webkit-transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
        transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);
        transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg)
    }

    75% {
        -webkit-transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
        transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)
    }

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



[data-animation=boomInOut_1]{
  opacity: 0;
  animation: boomInOut_1 1000ms linear;
}
[data-animation=boomInOut_2]{
  opacity: 0;
  animation: boomInOut_2 1000ms linear;
  animation-delay: 500ms;
}
[data-animation=boomInOut_3]{
  opacity: 0;
  animation: boomInOut_3 1000ms linear;
  animation-delay: 200ms;
}
[data-animation=boomInOut_4]{
  opacity: 0;
  animation: boomInOut_4 1500ms linear;
  animation-delay: 100ms;
}
[data-animation=boomInOut_5]{
  opacity: 0;
  animation: boomInOut_5 1000ms linear;
  animation-delay: 700ms;
}

@keyframes boomInOut_1{
    0% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(-500%) translateX(-500%) scale(-10);
    }  
}
@keyframes boomInOut_2{
    0% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(-200%) translateX(-500%) scale(5) rotate(170deg);
    }  
}
@keyframes boomInOut_3{
    0% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(-150%) translateX(500%) scale(5) rotate(90deg);
    }  
}
@keyframes boomInOut_4{
    0% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(-150%) translateX(200%) scale(15) rotate(360deg);
    }  
}
@keyframes boomInOut_5{
    0% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(150%) translateX(-100%) scale(-21) rotate(90deg);
    }  
}

@keyframes flipOutX {
    0% {
        opacity: 1;
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg);
        transform: perspective(400px) rotate3d(1,0,0,-20deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
        transform: perspective(400px) rotate3d(1,0,0,90deg);
        opacity: 0
    }
}
@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(-300%);
    }

    20%,60% {
        transform: translateY(-120%);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    100% {
        transform: translateY(0);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
}
*/