.animacja{opacity: 0;}
.animacja2{opacity: 0;}
.animOpacityDiv{
    animation-name: animOpacity;
    animation-duration: 1.45s;
    animation-iteration-count: 1;
     animation-fill-mode: forwards;
}

.animOpacityDivLong{
    animation-name: animOpacity;
    animation-duration: 3.2s;
    animation-iteration-count: 1;
     animation-fill-mode: forwards;
}
.animOpacityDivLongOut{
    animation-name: animOpacityOut;
    animation-duration: 3.2s;
    animation-iteration-count: 1;
     animation-fill-mode: forwards;
}

.animOpacityMarginDiv{
    animation-name: animOpacityMargin;
    animation-duration: .8s;
    animation-iteration-count: 1;
     animation-fill-mode: forwards;
}

.animLeft{
    animation-name: animLeft;
    animation-duration: 1.1s;
    animation-iteration-count: 1;
     animation-fill-mode: forwards;
}

.animBottom{
    animation-name: animBottom;
    animation-duration: .8s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.animZoomOut{
    animation-name: animZoomOut;
    animation-duration: .7s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.animZoom{
    animation-name: animZoom;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.animZoomBlink{
    animation-name: animZoomBlink;
    animation-duration: 2s;
    animation-iteration-count: 1;
     animation-fill-mode: forwards;
}


@keyframes animOpacity {
    0%{ opacity: 0; }

    100%{ opacity: 1; }
}
@keyframes animOpacityOut {
    0%{ opacity: 1; }

    100%{ opacity: 0; }
}


@keyframes animOpacityMargin {
    0%{ opacity: 0; 
      -moz-transform: translateY(10px);
      -webkit-transform: translateY(10px);
      -o-transform: translateY(10px);
      -ms-transform: translateY(10px);
      transform: translateY(10px);
    }

    100%{ opacity: 1;
      -moz-transform: translateY(-0px);
      -webkit-transform: translateY(-0px);
      -o-transform: translateY(-0px);
      -ms-transform: translateY(-0px);
      transform: translateY(-0px);}
  }

@keyframes animLeft {
    0%{ opacity: 0; 
      -moz-transform: translateX(-15px);
      -webkit-transform: translateX(-15px);
      -o-transform: translateX(-15px);
      -ms-transform: translateX(-15px);
      transform: translateX(-15px);
    }

    100%{ opacity: 1;
      -moz-transform: translateX(-0px);
      -webkit-transform: translateX(-0px);
      -o-transform: translateX(-0px);
      -ms-transform: translateX(-0px);
      transform: translateX(-0px);}
  }

@keyframes animBottom {
    0%{ opacity: 0; 
      -moz-transform: translateY(-10px);
      -webkit-transform: translateY(-10px);
      -o-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
      transform: translateY(-10px);
    }

    100%{ opacity: 1;
      -moz-transform: translateY(-0px);
      -webkit-transform: translateY(-0px);
      -o-transform: translateY(-0px);
      -ms-transform: translateY(-0px);
      transform: translateY(-0px);}
  }

@keyframes animZoom {
    0%{ opacity: 0; 
        -moz-transform: scale(.9);
        -webkit-transform: scale(.9);
        -o-transform: scale(.9);
        -ms-transform: scale(.9);
        transform: scale(.9);
  }

    100%{ opacity: 1;
       -moz-transform: scale(1);
      -webkit-transform: scale(1);
      -o-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);     
  }
}

@keyframes animZoomOut {
    0%{ opacity: 0; 
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
  }

    100%{ opacity: 1;
       -moz-transform: scale(1);
      -webkit-transform: scale(1);
      -o-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);     
  }
}

@keyframes animZoomBlink {
    0%{ opacity: 0; 
        -moz-transform: scale(.9);
        -webkit-transform: scale(.9);
        -o-transform: scale(.9);
        -ms-transform: scale(.9);
        transform: scale(.9);
}

    90%{ opacity: 1;
       -moz-transform: scale(.99);
      -webkit-transform: scale(.99);
      -o-transform: scale(.99);
      -ms-transform: scale(.99);
      transform: scale(.99);     
  }
    91%{ opacity: 0;
       -moz-transform: scale(.991);
      -webkit-transform: scale(.991);
      -o-transform: scale(.991);
      -ms-transform: scale(.991);
      transform: scale(.991);     
  }
    92%{ opacity: 1;
       -moz-transform: scale(.992);
      -webkit-transform: scale(.992);
      -o-transform: scale(.992);
      -ms-transform: scale(.992);
      transform: scale(.992);     
  }
    93%{ opacity: 0;
       -moz-transform: scale(.993);
      -webkit-transform: scale(.993);
      -o-transform: scale(.993);
      -ms-transform: scale(.993);
      transform: scale(.993);     
  }
    94%{ opacity: 1;
       -moz-transform: scale(.994);
      -webkit-transform: scale(.994);
      -o-transform: scale(.994);
      -ms-transform: scale(.994);
      transform: scale(.994);     
  }
    96%{ opacity: 1;
       -moz-transform: scale(.996);
      -webkit-transform: scale(.996);
      -o-transform: scale(.996);
      -ms-transform: scale(.996);
      transform: scale(.996);     
  }
    97%{ opacity: 0;
       -moz-transform: scale(.997);
      -webkit-transform: scale(.997);
      -o-transform: scale(.997);
      -ms-transform: scale(.997);
      transform: scale(.997);     
  }
    98%{ opacity: 1;
       -moz-transform: scale(.998);
      -webkit-transform: scale(.998);
      -o-transform: scale(.998);
      -ms-transform: scale(.998);
      transform: scale(.998);     
  }
    99%{ opacity: 0;
       -moz-transform: scale(.999);
      -webkit-transform: scale(.999);
      -o-transform: scale(.999);
      -ms-transform: scale(.999);
      transform: scale(.999);     
  }
    100%{ opacity: 1;
       -moz-transform: scale(1);
      -webkit-transform: scale(1);
      -o-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);     
  }
}


@keyframes animOpacity {
    0%{ opacity: 0; }

    100%{ opacity: 1; }
}


@keyframes animArrow {
    0%{ opacity: 1;
        transform: translateX(0px);
     }

    50%{ opacity: 0; 
          transform: translateX(10px);
          opacity: 0;
        }
    51%{ opacity: 0; 
          transform: translateX(-10px);
        }
    100%{ opacity: 1; 
          transform: translateX(0px);
        }
}

@keyframes animArrowUp {
    0%{ opacity: 1;
        transform: translateY(0px);
     }

    50%{ opacity: 0; 
          transform: translateY(-5px);
          opacity: 0;
        }
    51%{ opacity: 0; 
          transform: translateY(5px);
        }
    100%{ opacity: 1; 
          transform: translateY(0px);
        }
}

@keyframes animRound {
    0%{ 
        transform: scale(1);
        transform-origin: bottom right;
     }
    20%{ 
        transform: scale(1);
        transform-origin: bottom right;
     }

    65%{ 
          transform: scale(0);
          transform-origin: bottom right;
          opacity: .4;
        }
    66%{ 
          transform: scale(0);
          transform-origin: top left;
        }
    100%{ 
          transform-origin: top left;
          transform: scale(1);
        }
}


@keyframes animButBlobIn {
    0%{ opacity: 0; 
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
  }

    100%{ opacity: 1;
        -moz-transform: scale(3.9);
        -webkit-transform: scale(3.9);
        -o-transform: scale(3.9);
        -ms-transform: scale(3.9);
        transform: scale(3.9);
  }
}


@keyframes animButBlobOut {
    0%{ opacity: 1; 
        -moz-transform: scale(3.9);
        -webkit-transform: scale(3.9);
        -o-transform: scale(3.9);
        -ms-transform: scale(3.9);
        transform: scale(3.9);
  }

    100%{ opacity: 0;
       -moz-transform: scale(1);
      -webkit-transform: scale(1);
      -o-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);     
  }
}


@keyframes skewing {
  0% { transform: skewX(6deg); }
  10% { transform: skewX(-6deg); }
  20% { transform: skewX(4deg); }
  30% { transform: skewX(-4deg); }
  40% { transform: skewX(2deg); }
  50% { transform: skewX(-6deg); }
  55% { transform: skewX(6deg); }
  60% { transform: skewX(-5deg); }
  65% { transform: skewX(5deg); }
  70% { transform: skewX(-4deg); }
  75% { transform: skewX(4deg); }
  80% { transform: skewX(-3deg); } 
  85% { transform: skewX(3deg); }
  90% { transform: skewX(-2deg); } 
  95% { transform: skewX(2deg); }
  100%   { transform: skewX(1deg); }
}

@keyframes skewing-child {
  0%      { transform: skewX(-10deg); }
  100%     { transform: skewX(10deg); }
}

@keyframes moving {
  0% {transform: translate(-130px);}
  30% {transform: translate(-45px);} 
  70% {transform: translate(45px);}
  100% {transform: translate(130px);}
}

@keyframes squishing {
  10%, 40%, 80% { transform: scale(1, .9); }
  0%, 30%, 60%, 100% {transform: scale(.9, 1);}
}