/*------------------------
Motion CSS
The library of CSS3 animation

create by Petr Pavlyuk  - http://pavlyukpetr.com

Copyright (c) 2015-2016 Petr Pavlyuk
------------------------*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


.animated.vibro {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

.animated.rotbo-in-right, .animated.rotbo-in-left   {
  -webkit-animation-duration: 1.1s;
  animation-duration: 1.1s;
}

.animated.fade-in, .animated.slide-in-right , .animated.slide-in-left , .animated.slide-in-up , .animated.slide-in-down , .animated.slide-out-up , .animated.slide-out-down , .animated.bounce-in , .animated.bounce-in-right , .animated.bounce-in-left , .animated.bounce-in-up, .animated.bounce-in-down, .animated.roll-in-right, .animated.roll-in-left, .animated.roll-out-right, .animated.roll-out-left, .animated.flip-in-x, .animated.flip-in-y, .animated.fanfare, .animated.wabble  {
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
}

.animated.flip   {
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
}

.animated.slide-out-right, .animated.slide-out-left, .animated.back-in-right, .animated.back-out-right, .animated.back-in-left, .animated.back-out-left, .animated.back-in-up, .animated.back-out-up, .animated.back-in-down, .animated.back-out-down, .animated.scale-in  {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

.animated.float {
  -webkit-animation-duration: 1.6s;
  animation-duration: 1.6s;
}

.animated.hinge, .animated.rotbo-out-left, .animated.rotbo-out-right, .animated.whirl {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.Rotate1, .animated.Rotate2, .animated.Rotate3 {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
.animated.Rotate4 {
  -webkit-animation-duration: 2.2s;
  animation-duration: 2.2s;
}

#animation
{
    visibility: hidden;
}
.animation
{
    visibility: visible !important;
    animation-fill-mode: both !important;
	-webkit-animation-fill-mode: both !important;
}
.replay
{
    -webkit-animation-iteration-count: infinite !important;
    animation-iteration-count: infinite !important;
}
.delay-05s
{
    -webkit-animation-delay: .5s !important;
    animation-delay: .5s !important;
}
.delay-1s{
    -webkit-animation-delay: 1s !important;
    animation-delay: 1s !important;
}
.delay-1-5s{
    -webkit-animation-delay: 1.5s !important;
    animation-delay: 1.5s !important;
}
.delay-2s{
    -webkit-animation-delay: 2s !important;
    animation-delay: 2s !important;
}
.delay-3s{
    -webkit-animation-delay: 3s !important;
    animation-delay: 3s !important;
}
.delay-bord{
    -webkit-animation-delay: 6s !important;
    animation-delay: 6s !important;
}
.delay-bord-s{
    -webkit-animation-delay: 2s !important;
    animation-delay: 2s !important;
}


@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

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

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);

    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

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

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/*fade-in*/
.fade-in
{
    -webkit-animation-name: fade-in ;
	animation-name: fade-in ;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
}
@-webkit-keyframes fade-in
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}
@keyframes fade-in
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}
/*fade-out*/
.fade-out
{ 
    -webkit-animation-name: fade-out ;
  animation-name: fade-out ;        
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@-webkit-keyframes fade-out
{
    0%
    {
        opacity: 1;
    }
    100%
    {
        opacity: 0;
    }
}
@keyframes fade-out
{
    0%
    {
        opacity: 1;
    }
    100%
    {
        opacity: 0;
    }
}
/*fade-in right*/
.fade-in-right
{
	-webkit-animation-name: fade-in-right;
  animation-name: fade-in-right; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@-webkit-keyframes fade-in-right
{
    0%
    {
        -webkit-transform: translateX(-100%);

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

        opacity: 1;
    }
}
@keyframes fade-in-right
{
    0%
    {
        transform: translateX(-100%);

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

        opacity: 1;
    }
}
/*fade-in left*/
.fade-in-left
{
-webkit-animation-name: fade-in-left ;
  animation-name: fade-in-left;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@-webkit-keyframes fade-in-left
{
    0%
    {
        -webkit-transform: translateX(100%);

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

        opacity: 1;
    }
}
@keyframes fade-in-left
{
    0%
    {
        transform: translateX(100%);

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

        opacity: 1;
    }
}
/*fade-in up*/
.fade-in-up
{
	-webkit-animation-name: fade-in-up ;
  animation-name: fade-in-up ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@-webkit-keyframes fade-in-up
{
    0%
    {
        -webkit-transform: translateY(100%);

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

        opacity: 1;
    }
}
@keyframes fade-in-up
{
    0%
    {
        transform: translateY(100%);

        opacity: 0;
    }
    100%
    {
        transform: translateY(0%);

        opacity: 1;
    }
}
/*fade-in down*/
.fade-in-down
{
  -webkit-animation-name: fade-in-down ;
  animation-name: fade-in-down ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@-webkit-keyframes fade-in-down
{
    0%
    {
        -webkit-transform: translateY(-100%);

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

        opacity: 1;
    }
}
@keyframes fade-in-down
{
    0%
    {
        transform: translateY(-100%);

        opacity: 0;
    }
    100%
    {
        transform: translateY(0%);

        opacity: 1;
    }
}

/*fade-out right*/
.fade-out-right
{
   -webkit-animation-name: fade-out-right ;
  animation-name: fade-out-right  ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@-webkit-keyframes fade-out-right
{
    0%
    {
        -webkit-transform: translateX(0%);

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

        opacity: 0;
    }
}
@keyframes fade-out-right
{
    0%
    {
        transform: translateX(0%);

        opacity: 1;
    }
    100%
    {
        transform: translateX(100%);

        opacity: 0;
    }
}
/*fade-out left*/
.fade-out-left
{ 
    -webkit-animation-name: fade-out-left ;
  animation-name: fade-out-left ;        
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@-webkit-keyframes fade-out-left
{
    0%
    {
        -webkit-transform: translateX(0%);

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

        opacity: 0;
    }
}
@keyframes fade-out-left
{
    0%
    {
        transform: translateX(0%);

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

        opacity: 0;
    }
}
/*fade-out up*/
.fade-out-up
{
	-webkit-animation-name: fade-out-up ;
  animation-name: fade-out-up ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@-webkit-keyframes fade-out-up
{
    0%
    {
        -webkit-transform: translateY(0%);

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

        opacity: 0;
    }
}
@keyframes fade-out-up
{
    0%
    {
        transform: translateY(0%);

        opacity: 1;
    }
    100%
    {
        transform: translateY(-100%);

        opacity: 0;
    }
}
/*fade-out down*/
.fade-out-down
{
	-webkit-animation-name: fade-out-down ;
  animation-name: fade-out-down ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@-webkit-keyframes fade-out-down
{
    0%
    {
        -webkit-transform: translateY(0%);

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

        opacity: 0;
    }
}
@keyframes fade-out-down
{
    0%
    {
        transform: translateY(0%);

        opacity: 1;
    }
    100%
    {
        transform: translateY(100%);

        opacity: 0;
    }
}

/*slide-in right*/
.slide-in-right
{
    -webkit-animation-name: slide-in-right ;
  animation-name: slide-in-right ; 
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
}
@-webkit-keyframes slide-in-right
{
    0%
    {
        -webkit-transform: translateX(-2000px);
    }
    100%
    {
        -webkit-transform: translateX(0px);
    }
}
@keyframes slide-in-right
{
    0%
    {
        transform: translateX(-2000px);
    }
    100%
    {
        transform: translateX(0px);
    }
}
/*slide-in left*/
.slide-in-left
{
    -webkit-animation-name: slide-in-left ;
  animation-name: slide-in-left ; 
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
}
@-webkit-keyframes slide-in-left
{
    0%
    {
        -webkit-transform: translateX(2000px);
    }
    100%
    {
        -webkit-transform: translateX(0px);
    }
}
@keyframes slide-in-left
{
    0%
    {
        transform: translateX(2000px);
    }
    100%
    {
        transform: translateX(0px);
    }
}
/*slide-in up*/
.slide-in-up
{
    -webkit-animation-name: slide-in-up ;
  animation-name: slide-in-up ;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
}
@-webkit-keyframes slide-in-up
{
    0%
    {
        -webkit-transform: translateY(1000px);
    }
    100%
    {
        -webkit-transform: translateY(0px);
    }
}
@keyframes slide-in-up
{
    0%
    {
        transform: translateY(1000px);
    }
    100%
    {
        transform: translateY(0px);
    }
}
/*slide-in down*/
.slide-in-down
{
    -webkit-animation-name: slide-in-down ;
  animation-name: slide-in-down ;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
}
@-webkit-keyframes slide-in-down
{
    0%
    {
        -webkit-transform: translateY(-120px);
    }
    100%
    {
        -webkit-transform: translateY(0px);
    }
}
@keyframes slide-in-down
{
    0%
    {
        transform: translateY(-120px);
    }
    100%
    {
        transform: translateY(0px);
    }
}

/*slide-out right*/
.slide-out-right
{ 
    -webkit-animation-name: slide-out-right ;
  animation-name: slide-out-right ;        
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
}
@-webkit-keyframes slide-out-right
{
    0%
    {
        -webkit-transform: translateX(0px);
    }
    100%
    {
        -webkit-transform: translateX(2000px);
    }
}
@keyframes slide-out-right
{
    0%
    {
        transform: translateX(0px);
    }
    100%
    {
        transform: translateX(2000px);
    }
}
/*slide-out left*/
.slide-out-left
{
	-webkit-animation-name: slide-out-left ;
  animation-name: slide-out-left ; 
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
}
@-webkit-keyframes slide-out-left
{
    0%
    {
        -webkit-transform: translateX(0px);
    }
    100%
    {
        -webkit-transform: translateX(-2000px);
    }
}
@keyframes slide-out-left
{
    0%
    {
        transform: translateX(0px);
    }
    100%
    {
        transform: translateX(-2000px);
    }
}
/*slide-out up*/
.slide-out-up
{
    -webkit-animation-name: slide-out-up ;
  animation-name:slide-out-up  ;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
}
@-webkit-keyframes slide-out-up
{
    0%
    {
        -webkit-transform: translateY(0px);
    }
    100%
    {
        -webkit-transform: translateY(-1000px);
    }
}
@keyframes slide-out-up
{
    0%
    {
        transform: translateY(0px);
    }
    100%
    {
        transform: translateY(-1000px);
    }
}
/*slide-out down*/
.slide-out-down
{
    -webkit-animation-name: slide-out-down ;
  animation-name: slide-out-down ; 
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
}
@-webkit-keyframes slide-out-down
{
    0%
    {
        -webkit-transform: translateY(0px);
    }
    100%
    {
        -webkit-transform: translateY(1000px);
    }
}
@keyframes slide-out-down
{
    0%
    {
        transform: translateY(0px);
    }
    100%
    {
        transform: translateY(1000px);
    }
}

/*bounce-in*/
.bounce-in
{
	-webkit-animation-name: bounce-in ;
  animation-name: bounce-in ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes bounce-in
{
    0%
    {
        transform: scale(.9);

        opacity: 0;
    }
    25%
    {
        transform: scale(1.2);
    }
    40%
    {
        transform: scale(.8);
    }
    50%
    {
        transform: scale(1.1);
    }
    60%
    {
        transform: scale(.9);
    }
    70%
    {
        transform: scale(1.05);

        opacity: 1;
    }
    80%
    {
        transform: scale(.95);
    }
    90%
    {
        transform: scale(1.01);
    }
    100%
    {
        transform: scale(1);
    }
}
@-webkit-keyframes bounce-in
{
    0%
    {
        -webkit-transform: scale(.9);

        opacity: 0;
    }
    25%
    {
        -webkit-transform: scale(1.2);
    }
    40%
    {
        -webkit-transform: scale(.8);
    }
    50%
    {
        -webkit-transform: scale(1.1);
    }
    60%
    {
        -webkit-transform: scale(.9);
    }
    70%
    {
        -webkit-transform: scale(1.05);

        opacity: 1;
    }
    80%
    {
        -webkit-transform: scale(.95);
    }
    90%
    {
        -webkit-transform: scale(1.01);
    }
    100%
    {
        -webkit-transform: scale(1);
    }
}
/*bounce-in-right*/
.bounce-in-right
{
	-webkit-animation-name: bounce-in-right ;
  animation-name: bounce-in-right ; 
    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;
}
@keyframes bounce-in-right
{
    0%
    {
        transform: translateX(-2000px);
    }
    63%
    {
        transform: translateX(30px);
    }
    70%, 80%, 90%, 100%
    {
        transform: translateX(0px);
    }
    75%
    {
        transform: translateX(14px);
    }
    85%
    {
        transform: translateX(8px);
    }
    95%
    {
        transform: translateX(4px);
    }
}
@-webkit-keyframes bounce-in-right
{
    0%
    {
        -webkit-transform: translateX(-2000px);
    }
    63%
    {
        -webkit-transform: translateX(30px);
    }
    70%, 80%, 90%, 100%
    {
        -webkit-transform: translateX(0px);
    }
    75%
    {
        -webkit-transform: translateX(14px);
    }
    85%
    {
        -webkit-transform: translateX(8px);
    }
    95%
    {
        -webkit-transform: translateX(4px);
    }
}
/*bounce-in left*/
.bounce-in-left
{
	-webkit-animation-name: bounce-in-left ;
  animation-name: bounce-in-left ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes bounce-in-left
{
    0%
    {
        transform: translateX(2000px);
    }
    63%
    {
        transform: translateX(-30px);
    }
    70%, 80%, 90%, 100%
    {
        transform: translateX(0px);
    }
    75%
    {
        transform: translateX(-14px);
    }
    85%
    {
        transform: translateX(-8px);
    }
    95%
    {
        transform: translateX(-4px);
    }
}
@-webkit-keyframes bounce-in-left
{
    0%
    {
        -webkit-transform: translateX(2000px);
    }
    63%
    {
        -webkit-transform: translateX(-30px);
    }
    70%, 80%, 90%, 100%
    {
        -webkit-transform: translateX(0px);
    }
    75%
    {
        -webkit-transform: translateX(-14px);
    }
    85%
    {
        -webkit-transform: translateX(-8px);
    }
    95%
    {
        -webkit-transform: translateX(-4px);
    }
}
/*bounce-in up*/
.bounce-in-up
{
	-webkit-animation-name: bounce-in-up ;
  animation-name: bounce-in-up ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes bounce-in-up
{
    0%
    {
        transform: translateY(1000px);
    }
    25%
    {
        transform: translateY(50px);
    }
    30%, 55%, 70%, 80%, 90%, 100%
    {
        transform: translateY(0px);
    }
    45%
    {
        transform: translateY(25px);
    }
    63%
    {
        transform: translateY(15px);
    }
    75%
    {
        transform: translateY(7px);
    }
    85%
    {
        transform: translateY(4px);
    }
    95%
    {
        transform: translateY(2px);
    }
}
@-webkit-keyframes bounce-in-up
{
    0%
    {
        -webkit-transform: translateY(1000px);
    }
    25%
    {
        -webkit-transform: translateY(50px);
    }
    30%, 55%, 70%, 80%, 90%, 100%
    {
        -webkit-transform: translateY(0px);
    }
    45%
    {
        -webkit-transform: translateY(25px);
    }
    63%
    {
        -webkit-transform: translateY(15px);
    }
    75%
    {
        -webkit-transform: translateY(7px);
    }
    85%
    {
        -webkit-transform: translateY(4px);
    }
    95%
    {
        -webkit-transform: translateY(2px);
    }
}
/*bounce-in down*/
.bounce-in-down
{
	-webkit-animation-name: bounce-in-down ;
  animation-name: bounce-in-down ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes bounce-in-down
{
    0%
    {
        transform: translateY(-1000px);
    }
    25%
    {
        transform: translateY(-50px);
    }
    30%, 55%, 70%, 80%, 90%, 100%
    {
        transform: translateY(0px);
    }
    45%
    {
        transform: translateY(-25px);
    }
    63%
    {
        transform: translateY(-15px);
    }
    75%
    {
        transform: translateY(-7px);
    }
    85%
    {
        transform: translateY(-4px);
    }
    95%
    {
        transform: translateY(-2px);
    }
}
@-webkit-keyframes bounce-in-down
{
    0%
    {
        -webkit-transform: translateY(-1000px);
    }
    25%
    {
        -webkit-transform: translateY(-50px);
    }
    30%, 55%, 70%, 80%, 90%, 100%
    {
        -webkit-transform: translateY(0px);
    }
    45%
    {
        -webkit-transform: translateY(-25px);
    }
    63%
    {
        -webkit-transform: translateY(-15px);
    }
    75%
    {
        -webkit-transform: translateY(-7px);
    }
    85%
    {
        -webkit-transform: translateY(-4px);
    }
    95%
    {
        -webkit-transform: translateY(-2px);
    }
}

/*roll-in-right*/
.roll-in-right
{
    -webkit-animation-name: roll-in-right ;
  animation-name: roll-in-right ; 
}
@keyframes roll-in-right
{
    0%
    {
        transform: translateX(-100%) rotate(-130deg);

        opacity: 0;
    }
    100%
    {
        transform: translateX(0%) rotate(0deg);

        opacity: 1;
    }
}
@-webkit-keyframes roll-in-right
{
    0%
    {
        -webkit-transform: translateX(-100%) rotate(-130deg);

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

        opacity: 1;
    }
}
/*roll-in-left*/
.roll-in-left
{
	-webkit-animation-name: roll-in-left ;
  animation-name: roll-in-left ; 
}
@keyframes roll-in-left
{
    0%
    {
        transform: translateX(100%) rotate(130deg);

        opacity: 0;
    }
    100%
    {
        transform: translateX(0%) rotate(0deg);

        opacity: 1;
    }
}
@-webkit-keyframes roll-in-left
{
    0%
    {
        -webkit-transform: translateX(100%) rotate(130deg);

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

        opacity: 1;
    }
}
/*roll-out-right*/
.roll-out-right
{
	-webkit-animation-name: roll-out-right;
  animation-name: roll-out-right ; 
}
@keyframes roll-out-right
{
    0%
    {
        transform: translateX(0%) rotate(0deg);

        opacity: 1;
    }
    100%
    {
        transform: translateX(100%) rotate(130deg);

        opacity: 0;
    }
}
@-webkit-keyframes roll-out-right
{
    0%
    {
        -webkit-transform: translateX(0%) rotate(0deg);

        opacity: 1;
    }
    100%
    {
        -webkit-transform: translateX(100%) rotate(130deg);

        opacity: 0;
    }
}
/*roll-out-left*/
.roll-out-left
{
	-webkit-animation-name: roll-out-left ;
  animation-name: roll-out-left ; 
}
@keyframes roll-out-left
{
    0%
    {
        transform: translateX(0%) rotate(0deg);

        opacity: 1;
    }
    100%
    {
        transform: translateX(-100%) rotate(-130deg);

        opacity: 0;
    }
}
@-webkit-keyframes roll-out-left
{
    0%
    {
        -webkit-transform: translateX(0%) rotate(0deg);

        opacity: 1;
    }
    100%
    {
        -webkit-transform: translateX(-100%) rotate(-130deg);

        opacity: 0;
    }
}

/*rotbo-in-right*/
.rotbo-in-right
{
	-webkit-animation-name: rotbo-in-right ;
  animation-name: rotbo-in-right ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes rotbo-in-right
{
    0%
    {
        transform: translateX(-1000px) rotateZ(-540deg);
    }
    63%
    {
        transform: translateX(15px) rotateZ(20deg);
    }
    75%
    {
        transform: translateX(-7px) rotateZ(-7deg);
    }
    85%
    {
        transform: translateX(4px) rotateZ(4deg);
    }
    95%
    {
        transform: translateX(-2px) rotateZ(-2deg);
    }
    100%
    {
        transform: translateX(0px) rotateZ(0deg);
    }
}
@-webkit-keyframes rotbo-in-right
{
    0%
    {
        -webkit-transform: translateX(-1000px) rotateZ(-540deg);
    }
    63%
    {
        -webkit-transform: translateX(15px) rotateZ(20deg);
    }
    75%
    {
        -webkit-transform: translateX(-7px) rotateZ(-7deg);
    }
    85%
    {
        -webkit-transform: translateX(4px) rotateZ(4deg);
    }
    95%
    {
        -webkit-transform: translateX(-2px) rotateZ(-2deg);
    }
    100%
    {
        -webkit-transform: translateX(0px) rotateZ(0deg);
    }
}
/*rotbo-in-left*/
.rotbo-in-left
{
	-webkit-animation-name: rotbo-in-left ;
  animation-name: rotbo-in-left ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes rotbo-in-left
{
    0%
    {
        transform: translateX(1000px) rotateZ(540deg);
    }
    63%
    {
        transform: translateX(-15px) rotateZ(-20deg);
    }
    75%
    {
        transform: translateX(7px) rotateZ(7deg);
    }
    85%
    {
        transform: translateX(-4px) rotateZ(-4deg);
    }
    95%
    {
        transform: translateX(2px) rotateZ(2deg);
    }
    100%
    {
        transform: translateX(0px) rotateZ(0deg);
    }
}
@-webkit-keyframes rotbo-in-left
{
    0%
    {
        -webkit-transform: translateX(1000px) rotateZ(540deg);
    }
    63%
    {
        -webkit-transform: translateX(-15px) rotateZ(-20deg);
    }
    75%
    {
        -webkit-transform: translateX(7px) rotateZ(7deg);
    }
    85%
    {
        -webkit-transform: translateX(-4px) rotateZ(-4deg);
    }
    95%
    {
        -webkit-transform: translateX(2px) rotateZ(2deg);
    }
    100%
    {
        -webkit-transform: translateX(0px) rotateZ(0deg);
    }
}
/*rotbo-out-left*/
.rotbo-out-left
{
	-webkit-animation-name: rotbo-out-left ;
  animation-name: rotbo-out-left ;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes rotbo-out-left
{
    0%
    {
        transform: translateX(0%) rotateZ(0deg);
    }
    20%
    {
        transform: translateX(15px) rotateZ(20deg);
    }
    100%
    {
        transform: translateX(-2000px) rotateZ(-1080deg);
    }
}
@-webkit-keyframes rotbo-out-left
{
    0%
    {
        -webkit-transform: translateX(0%) rotateZ(0deg);
    }
    20%
    {
        -webkit-transform: translateX(15px) rotateZ(20deg);
    }
    100%
    {
        -webkit-transform: translateX(-2000px) rotateZ(-1080deg);
    }
}
/*rotbo-out-right*/
.rotbo-out-right
{
	-webkit-animation-name: rotbo-out-right ;
  animation-name: rotbo-out-right ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes rotbo-out-right
{
    0%
    {
        transform: translateX(0%) rotateZ(0deg);
    }
    20%
    {
        transform: translateX(-15px) rotateZ(-20deg);
    }
    100%
    {
        transform: translateX(2000px) rotateZ(1080deg);
    }
}
@-webkit-keyframes rotbo-out-right
{
    0%
    {
        -webkit-transform: translateX(0%) rotateZ(0deg);
    }
    20%
    {
        -webkit-transform: translateX(-15px) rotateZ(-20deg);
    }
    100%
    {
        -webkit-transform: translateX(2000px) rotateZ(1080deg);
    }
}

/*flip*/
.flip
{
	-webkit-animation-name: flip ;
  animation-name: flip ; 
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}
@keyframes flip
{
    0% {
    transform: rotateY(-360deg);
  }
  40% {
    transform: scale(1.6) rotateY(-190deg);
  }
  50% {
    transform: scale(1.6) rotateY(-150deg);
  }
  80% {
    transform: scale(.95);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes flip
{
    0%
    {
        -webkit-transform: perspective(500px) rotateX(70deg);

        opacity: .2;
    }
    30%
    {
        -webkit-transform: perspective(500px) rotateX(-50deg);
    }
    45%
    {
        -webkit-transform: perspective(500px) rotateX(30deg);
    }
    65%
    {
        -webkit-transform: perspective(500px) rotateX(-20deg);
    }
    85%
    {
        -webkit-transform: perspective(500px) rotateX(10deg);
    }
    100%
    {
        -webkit-transform: perspective(500px) rotateX(0deg);
    }
}
/*flip-in-x*/
.flip-in-x
{
	-webkit-animation-name: flip-in-x ;
  animation-name: flip-in-x ; 
}
@keyframes flip-in-x
{
    0%
    {
        transform: perspective(500px) rotateX(70deg);

        opacity: .2;
    }
    30%
    {
        transform: perspective(500px) rotateX(-50deg);
    }
    45%
    {
        transform: perspective(500px) rotateX(30deg);
    }
    65%
    {
        transform: perspective(500px) rotateX(-20deg);
    }
    85%
    {
        transform: perspective(500px) rotateX(10deg);
    }
    100%
    {
        transform: perspective(500px) rotateX(0deg);
    }
}
@-webkit-keyframes flip-in-x
{
    0%
    {
        -webkit-transform: perspective(500px) rotateX(70deg);

        opacity: .2;
    }
    30%
    {
        -webkit-transform: perspective(500px) rotateX(-50deg);
    }
    45%
    {
        -webkit-transform: perspective(500px) rotateX(30deg);
    }
    65%
    {
        -webkit-transform: perspective(500px) rotateX(-20deg);
    }
    85%
    {
        -webkit-transform: perspective(500px) rotateX(10deg);
    }
    100%
    {
        -webkit-transform: perspective(500px) rotateX(0deg);
    }
}
/*flip-in-y*/
.flip-in-y
{
    -webkit-animation-name: flip-in-y ;
  animation-name: flip-in-y ; 
}
@keyframes flip-in-y
{
    0%
    {
        transform: perspective(500px) rotateY(70deg);

        opacity: .2;
    }
    30%
    {
        transform: perspective(500px) rotateY(-50deg);
    }
    45%
    {
        transform: perspective(500px) rotateY(30deg);
    }
    65%
    {
        transform: perspective(500px) rotateY(-20deg);
    }
    85%
    {
        transform: perspective(500px) rotateY(10deg);
    }
    100%
    {
        transform: perspective(500px) rotateY(0deg);
    }
}
@-webkit-keyframes flip-in-y
{
    0%
    {
        -webkit-transform: perspective(500px) rotateY(70deg);

        opacity: .2;
    }
    30%
    {
        -webkit-transform: perspective(500px) rotateY(-50deg);
    }
    45%
    {
        -webkit-transform: perspective(500px) rotateY(30deg);
    }
    65%
    {
        -webkit-transform: perspective(500px) rotateY(-20deg);
    }
    85%
    {
        -webkit-transform: perspective(500px) rotateY(10deg);
    }
    100%
    {
        -webkit-transform: perspective(500px) rotateY(0deg);
    }
}
/*flip-out-x*/
.flip-out-x
{
	-webkit-animation-name: flip-out-x ;
  animation-name: flip-out-x ; 
}
@keyframes flip-out-x
{
    0%
    {
        transform: perspective(500px) rotateX(0deg);
    }
    50%
    {
        transform: perspective(500px) rotateX(-30deg);

        opacity: 1;
    }
    100%
    {
        transform: perspective(500px) rotateX(70deg);

        opacity: 0;
    }
}
@-webkit-keyframes flip-out-x
{
    0%
    {
        -webkit-transform: perspective(500px) rotateX(0deg);
    }
    50%
    {
        -webkit-transform: perspective(500px) rotateX(-30deg);

        opacity: 1;
    }
    100%
    {
        -webkit-transform: perspective(500px) rotateX(70deg);

        opacity: 0;
    }
}
/*flip-out-y*/
.flip-out-y
{
   -webkit-animation-name: flip-out-y ;
  animation-name: flip-out-y ; 
}
@keyframes flip-out-y
{
    0%
    {
        transform: perspective(500px) rotateY(0deg);
    }
    50%
    {
        transform: perspective(500px) rotateY(-30deg);

        opacity: 1;
    }
    100%
    {
        transform: perspective(500px) rotateY(70deg);

        opacity: 0;
    }
}
@-webkit-keyframes flip-out-y
{
    0%
    {
        -webkit-transform: perspective(500px) rotateY(0deg);
    }
    50%
    {
        -webkit-transform: perspective(500px) rotateY(-30deg);

        opacity: 1;
    }
    100%
    {
        -webkit-transform: perspective(500px) rotateY(70deg);

        opacity: 0;
    }
}

/*rotate*/
.rotate
{
	-webkit-animation-name: rotate ;
  animation-name: rotate ; 
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}
@keyframes rotate
{
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes rotate
{
    0%
    {
        -webkit-transform: rotate(0deg);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
    }
}
/*rotate-in*/
.rotate-in
{
    -webkit-animation-name: rotate-in ;
  animation-name: rotate-in  ; 
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}
@keyframes rotate-in
{
    0%
    {
        transform: rotate(-0deg);

        opacity: 0;
    }
    80%
    {
        opacity: 1;
    }
    100%
    {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes rotate-in
{
    0%
    {
        -webkit-transform: rotate(-0deg);

        opacity: 0;
    }
    80%
    {
        opacity: 1;
    }
    100%
    {
        -webkit-transform: rotate(360deg);
    }
}
/*rotate-out*/
.rotate-out
{
    -webkit-animation-name: rotate-out ;
  animation-name: rotate-out ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes rotate-out
{
    0%
    {
        transform: rotate(-360deg);
    }
    20%
    {
        opacity: 1;
    }
    100%
    {
        transform: rotate(0deg);

        opacity: 0;
    }
}
@-webkit-keyframes rotate-out
{
    0%
    {
        -webkit-transform: rotate(-360deg);
    }
    20%
    {
        opacity: 1;
    }
    100%
    {
        -webkit-transform: rotate(0deg);

        opacity: 0;
    }
}
/*rotate-in-x*/
.rotate-in-x
{
    -webkit-animation-name: rotate-in-x ;
  animation-name: rotate-in-x ; 
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
}
@keyframes rotate-in-x
{
    0%
    {
        transform: rotateX(180deg);

        opacity: 0;
    }
    80%
    {
        opacity: 1;
    }
    100%
    {
        transform: rotateX(0deg);
    }
}
@-webkit-keyframes rotate-in-x
{
    0%
    {
        -webkit-transform: rotateX(180deg);

        opacity: 0;
    }
    80%
    {
        opacity: 1;
    }
    100%
    {
        -webkit-transform: rotateX(0deg);
    }
}
/*rotate-out-x*/
.rotate-out-x
{
   -webkit-animation-name: rotate-out-x ;
  animation-name: rotate-out-x ; 
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
}
@keyframes rotate-out-x
{
    0%
    {
        transform: rotateX(0deg);
    }
    20%
    {
        opacity: 1;
    }
    100%
    {
        transform: rotateX(180deg);

        opacity: 0;
    }
}
@-webkit-keyframes rotate-out-x
{
    0%
    {
        -webkit-transform: rotateX(0deg);
    }
    20%
    {
        opacity: 1;
    }
    100%
    {
        -webkit-transform: rotateX(180deg);

        opacity: 0;
    }
}
/*rotate-in-y*/
.rotate-in-y
{
    -webkit-animation-name: rotate-in-y ;
  animation-name: rotate-in-y ; 
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
}
@keyframes rotate-in-y
{
    0%
    {
        transform: rotateY(-180deg);

        opacity: 0;
    }
    100%
    {
        transform: rotateY(0deg);

        opacity: 1;
    }
}
@-webkit-keyframes rotate-in-y
{
    0%
    {
        -webkit-transform: rotateY(0deg);

        opacity: 0;
    }
    60%
    {
        opacity: 1;
    }
    100%
    {
        -webkit-transform: rotateY(360deg);
    }
}
/*rotate-out-y*/
.rotate-out-y
{
   -webkit-animation-name: rotate-out-y ;
  animation-name: rotate-out-y ; 
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
}
@keyframes rotate-out-y
{
    0%
    {
        transform: rotateY(0deg);

        opacity: 1;
    }
    100%
    {
        transform: rotateY(-180deg);

        opacity: 0;
    }
}
@-webkit-keyframes rotate-out-y
{
    0%
    {
        -webkit-transform: rotateY(0deg);

        opacity: 1;
    }
    100%
    {
        -webkit-transform: rotateY(-180deg);

        opacity: 0;
    }
}
/*rotate-in-3d*/
.rotate-in-3d
{
    -webkit-animation-name: rotate-in-3d ;
  animation-name: rotate-in-3d ; 
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
}
@keyframes rotate-in-3d
{
    0%
    {
        transform: rotate3d(1, 1, 0, 0deg);

        opacity: 0;
    }
    60%
    {
        opacity: 1;
    }
    100%
    {
        transform: rotate3d(1, 1, 0, 360deg);
    }
}
@-webkit-keyframes rotate-in-3d
{
    0%
    {
        -webkit-transform: rotate3d(1, 1, 0, 0deg);

        opacity: 0;
    }
    60%
    {
        opacity: 1;
    }
    100%
    {
        -webkit-transform: rotate3d(1, 1, 0, 360deg);
    }
}
/*rotate-out-3d*/
.rotate-out-3d
{
    -webkit-animation-name: rotate-out-3d ;
  animation-name: rotate-out-3d ; 
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
}
@keyframes rotate-out-3d
{
    0%
    {
        transform: rotate3d(1, 1, 0, 360deg);
    }
    40%
    {
        opacity: 1;
    }
    100%
    {
        transform: rotate3d(1, 1, 0, 0deg);

        opacity: 0;
    }
}
@-webkit-keyframes rotate-out-3d
{
    0%
    {
        -webkit-transform: rotate3d(1, 1, 0, 360deg);
    }
    40%
    {
        opacity: 1;
    }
    100%
    {
        -webkit-transform: rotate3d(1, 1, 0, 0deg);

        opacity: 0;
    }
}
/*rotate-in-scale*/
.rotate-in-scale
{
    -webkit-animation-name: rotate-in-scale ;
  animation-name: rotate-in-scale ; 
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
}
@keyframes rotate-in-scale
{
    0%
    {
        transform: scale(0) rotate(-540deg);

        opacity: 0;
    }
    80%
    {
        opacity: 1;
    }
    100%
    {
        transform: scale(1) rotate(0deg);
    }
}
@-webkit-keyframes rotate-in-scale
{
    0%
    {
        -webkit-transform: scale(0) rotate(-540deg);

        opacity: 0;
    }
    80%
    {
        opacity: 1;
    }
    100%
    {
        -webkit-transform: scale(1) rotate(0deg);
    }
}
/*rotate-out-scale*/
.rotate-out-scale
{
    -webkit-animation-name: rotate-out-scale ;
  animation-name: rotate-out-scale ; 
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
}
@keyframes rotate-out-scale
{
    0%
    {
        transform: scale(1) rotate(0deg);
    }
    40%
    {
        opacity: 1;
    }
    100%
    {
        transform: scale(0) rotate(540deg);

        opacity: 0;
    }
}
@-webkit-keyframes rotate-out-scale
{
    0%
    {
        -webkit-transform: scale(1) rotate(0deg);
    }
    40%
    {
        opacity: 1;
    }
    100%
    {
        -webkit-transform: scale(0) rotate(540deg);

        opacity: 0;
    }
}

/*turn-in-x*/
.turn-in-x
{
   -webkit-animation-name: turn-in-x ;
  animation-name: turn-in-x ; 
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}
@keyframes turn-in-x
{
    0%
    {
        transform: rotateX(360deg) scale(0);

        opacity: 0;
    }
    100%
    {
        transform: rotateX(0deg) scale(1);

        opacity: 1;
    }
}
@-webkit-keyframes turn-in-x
{
    0%
    {
        -webkit-transform: rotateX(360deg) scale(0);

        opacity: 0;
    }
    100%
    {
        -webkit-transform: rotateX(0deg) scale(1);

        opacity: 1;
    }
}
/*turn-out-x*/
.turn-out-x
{
    -webkit-animation-name: turn-out-x ;
  animation-name: turn-out-x ; 
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}
@keyframes turn-out-x
{
    0%
    {
        transform: rotateX(0deg) scale(1);

        opacity: 1;
    }
    80%
    {
        opacity: 0;
    }
    100%
    {
        transform: rotateX(360deg) scale(0);
    }
}
@-webkit-keyframes turn-out-x
{
    0%
    {
        -webkit-transform: rotateX(0deg) scale(1);

        opacity: 1;
    }
    80%
    {
        opacity: 0;
    }
    100%
    {
        -webkit-transform: rotateX(360deg) scale(0);
    }
}
/*turn-in-y*/
.turn-in-y
{
    -webkit-animation-name: turn-in-y ;
  animation-name: turn-in-y ; 
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}
@keyframes turn-in-y
{
    0%
    {
        transform: rotateY(0deg) scale(0);

        opacity: 0;
    }
    100%
    {
        transform: rotateY(360deg) scale(1);

        opacity: 1;
    }
}
@-webkit-keyframes turn-in-y
{
    0%
    {
        -webkit-transform: rotateY(0deg) scale(0);

        opacity: 0;
    }
    100%
    {
        -webkit-transform: rotateX(360deg) scale(1);

        opacity: 1;
    }
}
/*turn-out-y*/
.turn-out-y
{
    -webkit-animation-name: turn-out-y ;
  animation-name: turn-out-y ; 
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}
@keyframes turn-out-y
{
    0%
    {
        transform: rotateY(0deg) scale(1);

        opacity: 1;
    }
    80%
    {
        opacity: 0;
    }
    100%
    {
        transform: rotateY(360deg) scale(0);
    }
}
@-webkit-keyframes turn-out-y
{
    0%
    {
        -webkit-transform: rotateY(0deg) scale(1);

        opacity: 1;
    }
    80%
    {
        opacity: 0;
    }
    100%
    {
        -webkit-transform: rotateY(360deg) scale(0);
    }
}

/*Back*/
/*back in right*/
.back-in-right
{
	-webkit-animation-name: back-in-right ;
  animation-name: back-in-right ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes back-in-right
{
    0%
    {
        transform: translateX(-2000px) scale(.7);

        opacity: .7;
    }
    80%
    {
        transform: translateX(0px) scale(.7);

        opacity: .7;
    }
    100%
    {
        transform: scale(1);

        opacity: 1;
    }
}
@-webkit-keyframes back-in-right
{
    0%
    {
        -webkit-transform: translateX(-2000px) scale(.7);

        opacity: .7;
    }
    80%
    {
        -webkit-transform: translateX(0px) scale(.7);

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

        opacity: 1;
    }
}
/*back out right*/
.back-out-right
{ 
	-webkit-animation-name: back-out-right ;
  animation-name: back-out-right ;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}
@keyframes back-out-right
{
    0%
    {
        transform: scale(1);

        opacity: 1;
    }
    20%
    {
        transform: translateX(0px) scale(.7);

        opacity: .7;
    }
    100%
    {
        transform: translateX(2000px) scale(.7);

        opacity: .7;
    }
}
@-webkit-keyframes back-out-right
{
    0%
    {
        -webkit-transform: scale(1);

        opacity: 1;
    }
    20%
    {
        -webkit-transform: translateX(0px) scale(.7);

        opacity: .7;
    }
    100%
    {
        -webkit-transform: translateX(2000px) scale(.7);

        opacity: .7;
    }
}
/*back in left*/
.back-in-left
{
	-webkit-animation-name: back-in-left ;
  animation-name: back-in-left ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes back-in-left
{
    0%
    {
        transform: translateX(2000px) scale(.7);

        opacity: .7;
    }
    80%
    {
        transform: translateX(0px) scale(.7);

        opacity: .7;
    }
    100%
    {
        transform: scale(1);

        opacity: 1;
    }
}
@-webkit-keyframes back-in-left
{
    0%
    {
        -webkit-transform: translateX(2000px) scale(.7);

        opacity: .7;
    }
    80%
    {
        -webkit-transform: translateX(0px) scale(.7);

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

        opacity: 1;
    }
}
/*back out left*/
.back-out-left
{ 
-webkit-animation-name: back-out-left ;
  animation-name: back-out-left ;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}
@keyframes back-out-left
{
    0%
    {
        transform: scale(1);

        opacity: 1;
    }
    20%
    {
        transform: translateX(0px) scale(.7);

        opacity: .7;
    }
    100%
    {
        transform: translateX(-2000px) scale(.7);

        opacity: .7;
    }
}
@-webkit-keyframes back-out-left
{
    0%
    {
        -webkit-transform: scale(1);

        opacity: 1;
    }
    20%
    {
        -webkit-transform: translateX(0px) scale(.7);

        opacity: .7;
    }
    100%
    {
        -webkit-transform: translateX(-2000px) scale(.7);

        opacity: .7;
    }
}
/*back in up*/
.back-in-up
{
    -webkit-animation-name: back-in-up ;
  animation-name: back-in-up ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes back-in-up
{
    0%
    {
        transform: translateY(1200px) scale(.7);

        opacity: .7;
    }
    80%
    {
        transform: translateY(0px) scale(.7);

        opacity: .7;
    }
    100%
    {
        transform: scale(1);

        opacity: 1;
    }
}
@-webkit-keyframes back-in-up
{
    0%
    {
        -webkit-transform: translateY(1200px) scale(.7);

        opacity: .7;
    }
    80%
    {
        -webkit-transform: translateY(0px) scale(.7);

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

        opacity: 1;
    }
}
/*back out up*/
.back-out-up
{ 
	-webkit-animation-name: back-out-up ;
  animation-name: back-out-up ;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}
@keyframes back-out-up
{
    0%
    {
        transform: scale(1);

        opacity: 1;
    }
    20%
    {
        transform: translateY(0px) scale(.7);

        opacity: .7;
    }
    100%
    {
        transform: translateY(-1200px) scale(.7);

        opacity: .7;
    }
}
@-webkit-keyframes back-out-up
{
    0%
    {
        -webkit-transform: scale(1);

        opacity: 1;
    }
    20%
    {
        -webkit-transform: translateY(0px) scale(.7);

        opacity: .7;
    }
    100%
    {
        -webkit-transform: translateY(-1200px) scale(.7);

        opacity: .7;
    }
}
/*back in down*/
.back-in-down
{ 
    -webkit-animation-name: back-in-down ;
  animation-name: back-in-down ;        
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes back-in-down
{
    0%
    {
        transform: translateY(-1200px) scale(.7);

        opacity: .7;
    }
    80%
    {
        transform: translateY(0px) scale(.7);

        opacity: .7;
    }
    100%
    {
        transform: scale(1);

        opacity: 1;
    }
}
@-webkit-keyframes back-in-down
{
    0%
    {
        -webkit-transform: translateY(-2000px) scale(.7);

        opacity: .7;
    }
    80%
    {
        -webkit-transform: translateY(0px) scale(.7);

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

        opacity: 1;
    }
}
/*back out down*/
.back-out-down
{ 
-webkit-animation-name: back-out-down ;
  animation-name: back-out-down ;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}
@keyframes back-out-down
{
    0%
    {
        transform: scale(1);

        opacity: 1;
    }
    20%
    {
        transform: translateY(0px) scale(.7);

        opacity: .7;
    }
    100%
    {
        transform: translateY(1200px) scale(.7);

        opacity: .7;
    }
}
@-webkit-keyframes back-out-down
{
    0%
    {
        -webkit-transform: scale(1);

        opacity: 1;
    }
    20%
    {
        -webkit-transform: translateY(0px) scale(.7);

        opacity: .7;
    }
    100%
    {
        -webkit-transform: translateY(1200px) scale(.7);

        opacity: .7;
    }
}

/*push-in-up*/
.push-in-up
{
    transform-origin: 50% 100% 0; 
	-webkit-animation-name: push-in-up ;
  animation-name: push-in-up ;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}
@keyframes push-in-up
{
    0%
    {
        transform: rotateX(90deg);

        opacity: 0;
    }
    100%
    {
        transform: none;
    }
}
@-webkit-keyframes push-in-up
{
    0%
    {
        -webkit-transform: rotateX(90deg);

        opacity: 0;
    }
    100%
    {
        -webkit-transform: none;
    }
}
/*push-out-down*/
.push-out-down
{
    transform-origin: 50% 100% 0; 
    -webkit-animation-name: push-out-down  ;
  animation-name: push-out-down  ;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}
@keyframes push-out-down
{
    0%
    {
        transform: none;
    }
    100%
    {
        transform: rotateX(90deg);

        opacity: 0;
    }
}
@-webkit-keyframes push-out-down
{
    0%
    {
        -webkit-transform: none;
    }
    100%
    {
        -webkit-transform: rotateX(90deg);

        opacity: 0;
    }
}
/*push-in-down*/
.push-in-down
{
    -webkit-transform-origin: 50% 0 0;
            transform-origin: 50% 0 0;
    -webkit-animation-name: push-in-down ;
  animation-name: push-in-down ; 
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}
@keyframes push-in-down
{
    0%
    {
        transform: rotateX(-90deg);

        opacity: 0;
    }
    100%
    {
        transform: none;
    }
}
@-webkit-keyframes push-in-down
{
    0%
    {
        -webkit-transform: rotateX(-90deg);

        opacity: 0;
    }
    100%
    {
        -webkit-transform: none;
    }
}
/*push-out-up*/
.push-out-up
{
    -webkit-transform-origin: 50% 0 0;
            transform-origin: 50% 0 0;
    -webkit-animation-name: push-out-up ;
  animation-name: push-out-up ;  
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}
@keyframes push-out-up
{
    0%
    {
        transform: none;
    }
    100%
    {
        transform: rotateX(-90deg);

        opacity: 0;
    }
}
@-webkit-keyframes push-out-up
{
    0%
    {
        -webkit-transform: none;
    }
    100%
    {
        -webkit-transform: rotateX(-90deg);

        opacity: 0;
    }
}
/*push-in-right*/
.push-in-right
{
    -webkit-transform-origin: 0 50% 0;
    transform-origin: 0 50% 0;
    -webkit-animation-name: push-in-right ;
    animation-name: push-in-right ; 

    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    transform-style: preserve-3d;
}
@keyframes push-in-right
{
    0%
    {
        transform: rotateY(90deg);

        opacity: 0;
    }
    100%
    {
        transform: none;
    }
}
@-webkit-keyframes push-in-right
{
    0%
    {
        -webkit-transform: rotateY(90deg);

        opacity: 0;
    }
    100%
    {
        -webkit-transform: none;
    }
}
/*push-out-left*/
.push-out-left
{
    -webkit-transform-origin: 0 50% 0;
    transform-origin: 0 50% 0;
    -webkit-animation-name: push-out-left ;
  animation-name: push-out-left ; 

    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}
@keyframes push-out-left
{
    0%
    {
        transform: none;
    }
    100%
    {
        transform: rotateY(90deg);

        opacity: 0;
    }
}
@-webkit-keyframes push-out-left
{
    0%
    {
        -webkit-transform: none;
    }
    100%
    {
        -webkit-transform: rotateY(90deg);

        opacity: 0;
    }
}
/*push-in-left*/
.push-in-left
{
    -webkit-transform-origin: 100% 50% 0;
    transform-origin: 100% 50% 0;
    -webkit-animation-name: push-in-left ;
  animation-name: push-in-left ; 

    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    transform-style: preserve-3d;
}
@keyframes push-in-left
{
    0%
    {
        transform: rotateY(-90deg);

        opacity: 0;
    }
    100%
    {
        transform: none;
    }
}
@-webkit-keyframes push-in-left
{
    0%
    {
        -webkit-transform: rotateY(-90deg);

        opacity: 0;
    }
    100%
    {
        -webkit-transform: none;
    }
}
/*push-out-right*/
.push-out-right
{
    -webkit-transform-origin: 100% 50% 0;
    transform-origin: 100% 50% 0;
    -webkit-animation-name: push-out-right ;
  animation-name: push-out-right ; 

    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    transform-style: preserve-3d;
}
@keyframes push-out-right
{
    0%
    {
        transform: none;
    }
    100%
    {
        transform: rotateY(-90deg);

        opacity: 0;
    }
}
@-webkit-keyframes push-out-right
{
    0%
    {
        -webkit-transform: none;
    }
    100%
    {
        -webkit-transform: rotateY(-90deg);

        opacity: 0;
    }
}

/* Clip */
/*clip-x-in*/
.clip-x-in
{
	-webkit-animation-name: clip-x-in ;
  animation-name: clip-x-in ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes clip-x-in
{
    0%
    {
        transform: scale(1, 0);
    }
    100%
    {
        transform: none;
    }
}
@-webkit-keyframes clip-x-in
{
    0%
    {
        -webkit-transform: scale(1, 0);
    }
    100%
    {
        -webkit-transform: none;
    }
}
/*clip-y-in*/
.clip-y-in
{
    -webkit-animation-name: clip-y-in ;
  animation-name: clip-y-in ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes clip-y-in
{
    0%
    {
        transform: scale(0, 1);
    }
    100%
    {
        transform: none;
    }
}
@-webkit-keyframes clip-y-in
{
    0%
    {
        -webkit-transform: scale(0, 1);
    }
    100%
    {
        -webkit-transform: none;
    }
}
/*clip-xy-in*/
.clip-xy-in
{
	-webkit-animation-name: clip-xy-in ;
  animation-name: clip-xy-in ;  
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes clip-xy-in
{
    0%
    {
        transform: scale(0, .5);
        
    }
    50%
    {
        transform: scale(1, .5);
    }
    100%
    {
        transform: none;
    }
}
@-webkit-keyframes clip-xy-in
{
    0%
    {
        -webkit-transform: scale(0, .5);
        
    }
    50%
    {
        -webkit-transform: scale(1, .5);
    }
    100%
    {
        -webkit-transform: none;
    }
}
/*clip-x-out*/
.clip-x-out
{
	-webkit-animation-name: clip-x-out ;
  animation-name: clip-x-out ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes clip-x-out
{
    0%
    {
        transform: none;
    }
    100%
    {
        transform: scale(1, 0);
    }
}
@-webkit-keyframes clip-x-out
{
    0%
    {
        -webkit-transform: none;
    }
    100%
    {
        -webkit-transform: scale(1, 0);
    }
}
/*clip-y-out*/
.clip-y-out
{
	-webkit-animation-name: clip-y-out ;
  animation-name: clip-y-out ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes clip-y-out
{
    0%
    {
        transform: none;
    }
    100%
    {
        transform: scale(0, 1);
    }
}
@-webkit-keyframes clip-y-out
{
    0%
    {
        -webkit-transform: none;
    }
    100%
    {
        -webkit-transform: scale(0, 1);
    }
}
/*clip-xy-out*/
.clip-xy-out
{
	-webkit-animation-name: clip-xy-out;
  animation-name: clip-xy-out; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes clip-xy-out
{
    0%
    {
        transform: none;
    }
    50%
    {
        transform: scale(1, .5);
    }
    100%
    {
        transform: scale(0, .5);
    }
}
@-webkit-keyframes clip-xy-out
{
    0%
    {
        -webkit-transform: none;
    }
    50%
    {
        -webkit-transform: scale(1, .5);
    }
    100%
    {
        -webkit-transform: scale(0, .5);
    }
}

/*fanfare*/
.fanfare
{
	-webkit-animation-name: fanfare ;
  animation-name: fanfare ; 
}
@keyframes fanfare
{
    0%, 100% {
    transform: scale(1);
  }

30% {
    transform: scale(.8) rotateZ(5deg);
  }
  40%, 60%, 80% {
    transform: scale(1.15) rotateZ(-5deg);
  }
50%, 70%, 90% {
    transform: scale(1.15) rotateZ(5deg);
  }
}
@-webkit-keyframes fanfare
{
    0%, 100% {
    -webkit-transform: scale(1);
  }

30% {
    -webkit-transform: scale(.8) rotateZ(5deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale(1.15) rotateZ(-5deg);
  }
50%, 70%, 90% {
    -webkit-transform: scale(1.15) rotateZ(5deg);
  }
}
/*float*/
.float
{
   -webkit-animation-name: float ;
  animation-name: float ; 
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
@keyframes float
{
    0%, 100%
    {
        transform: translateY(0);
    }
    50%
    {
        transform: translateY(-20px);
    }
}
@-webkit-keyframes float
{
    0%, 100%
    {
        -webkit-transform: translateY(0);
    }
    50%
    {
        -webkit-transform: translateY(-20px);
    }
}
/*orbit*/
.orbit
{
    -webkit-animation: orbit 3s;
            animation: orbit 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}
@keyframes orbit
{
    0% {
    transform: rotate(0deg) translateX(20px) rotate(0deg);
}
100% {
    transform: rotate(360deg) translateX(20px) rotate(-360deg);
}
}
@-webkit-keyframes orbit
{
    0% {
    -webkit-transform: rotate(0deg) translateX(20px) rotate(0deg);
}
100% {
    -webkit-transform: rotate(360deg) translateX(20px) rotate(-360deg);
}
}
/*spiral*/
.spiral
{
    -webkit-animation-name: spiral ;
  animation-name: spiral ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes spiral
{
    0%
    {
        transform: rotateY(-360deg) translateY(-150%);
    }
    100%
    {
        transform: rotateY(0) translateY(0px);
    }
}
@-webkit-keyframes spiral
{
    0%
    {
        -webkit-transform: rotateY(-360deg) translateY(-150%);
    }
    100%
    {
        -webkit-transform: rotateY(0) translateY(0px);
    }
}
/*bounce*/
.bounce
{
   -webkit-animation-name: bounce ;
  animation-name: bounce ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes bounce
{
    0%, 30%, 55%, 70%, 80%, 90%, 100%
    {
        transform: translateY(0px);
    }
    25%
    {
        transform: translateY(-50px);
    }
    45%
    {
        transform: translateY(-25px);
    }
    63%
    {
        transform: translateY(-15px);
    }
    75%
    {
        transform: translateY(-7px);
    }
    85%
    {
        transform: translateY(-4px);
    }
    95%
    {
        transform: translateY(-2px);
    }
}
@-webkit-keyframes bounce
{
    0%, 30%, 55%, 70%, 80%, 90%, 100%
    {
        -webkit-transform: translateY(0px);
    }
    25%
    {
        -webkit-transform: translateY(-50px);
    }
    45%
    {
        -webkit-transform: translateY(-25px);
    }
    63%
    {
        -webkit-transform: translateY(-15px);
    }
    75%
    {
        -webkit-transform: translateY(-7px);
    }
    85%
    {
        -webkit-transform: translateY(-4px);
    }
    95%
    {
        -webkit-transform: translateY(-2px);
    }
}
.vibro
{
    -webkit-animation-name: vibro ;
  animation-name: vibro ; 
}
@keyframes vibro
{
    0%, 100%
    {
        transform: translateX(0px);
    }
    10%, 30%, 50%, 70%, 90%
    {
        transform: translateX(5px);
    }
    20%, 40%, 60%, 80%
    {
        transform: translateX(-5px);
    }
}
@-webkit-keyframes vibro
{
    0%, 100%
    {
        -webkit-transform: translateX(0px);
    }
    10%, 30%, 50%, 70%, 90%
    {
        -webkit-transform: translateX(5px);
    }
    20%, 40%, 60%, 80%
    {
        -webkit-transform: translateX(-5px);
    }
}
/*heartbeat*/
.heartbeat
{
    -webkit-animation: heartbeat 8s;
            animation: heartbeat 8s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}
@keyframes heartbeat
{
    0%, 20%, 40%, 60%, 80%, 100%
    {
        transform: scale(1);
    }
    10%, 30%, 50%, 70%, 90%
    {
        transform: scale(1.15);
    }
}
@-webkit-keyframes heartbeat
{
    0%, 20%, 40%, 60%, 80%, 100%
    {
        -webkit-transform: scale(1);
    }
    10%, 30%, 50%, 70%, 90%
    {
        -webkit-transform: scale(1.15);
    }
}
.shake
{
	-webkit-animation-name: shake ;
  animation-name: shake ; 
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}
@keyframes shake
{
    0%, 100%
    {
        transform: translateX(0px);
    }
    12.5%, 37.5%, 62.5%, 87.5%
    {
        transform: translateX(20px);
    }
    25%, 50%, 75%
    {
        transform: translateX(-20px);
    }
}
@-webkit-keyframes shake
{
    0%, 100%
    {
        -webkit-transform: translateX(0px);
    }
    12.5%, 37.5%, 62.5%, 87.5%
    {
        -webkit-transform: translateX(20px);
    }
    25%, 50%, 75%
    {
        -webkit-transform: translateX(-20px);
    }
}
/*puff*/
.puff
{
   -webkit-animation-name: puff ;
  animation-name: puff ; 
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@keyframes puff
{
    0%
    {
        transform: none;
    }
    100%
    {
        transform: scale(1.2);

        opacity: 0;
    }
}
@-webkit-keyframes puff
{
    0%
    {
        -webkit-transform: none;
    }
    100%
    {
        -webkit-transform: scale(1.2);

        opacity: 0;
    }
}
/*scale-in*/
.scale-in
{ 
    -webkit-animation-name: scale-in ;
  animation-name: scale-in ;        
}
@keyframes scale-in
{
    0%
    {
        transform: scale(0);
        opacity: 0;
    }
    100%
    {
        transform: scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes scale-in
{
    0%
    {
        -webkit-transform: scale(0);
        opacity: 0;
    }
    100%
    {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}
/*scale-out*/
.scale-out
{
    -webkit-animation-name: scale-out ;
  animation-name: scale-out ; 
}
@keyframes scale-out
{
    0%
    {
        transform: none;

        opacity: 1;
    }
    80%
    {
        opacity: 0;
    }
    100%
    {
        transform: scale(0);
        opacity: 0;
    }
}
@-webkit-keyframes scale-out
{
    0%
    {
        -webkit-transform: none;

        opacity: 1;
    }
    50%
    {
        opacity: .7;
    }
    100%
    {
        -webkit-transform: scale(0);

        opacity: 0;
    }
}
/*stretch*/
.stretch
{
    -webkit-animation-name: stretch ;
  animation-name: stretch ; 
}
@keyframes stretch
{
    0%, 100%
    {
        transform: scale3d(1, 1, 1);
    }
    30%
    {
        transform: scale3d(1.3, .7, 1);
    }
    40%
    {
        transform: scale3d(.7, 1.3, 1);
    }
    60%
    {
        transform: scale3d(1.2, .8, 1);
    }
    75%
    {
        transform: scale3d(.8, 1.2, 1);
    }
    90%
    {
        transform: scale3d(1.05, .95, 1);
    }
}
@-webkit-keyframes stretch
{
    0%, 100%
    {
        -webkit-transform: scale3d(1, 1, 1);
    }
    30%
    {
        -webkit-transform: scale3d(1.3, .7, 1);
    }
    40%
    {
        -webkit-transform: scale3d(.7, 1.3, 1);
    }
    60%
    {
        -webkit-transform: scale3d(1.2, .8, 1);
    }
    75%
    {
        -webkit-transform: scale3d(.8, 1.2, 1);
    }
    90%
    {
        -webkit-transform: scale3d(1.05, .95, 1);
    }
}
/*pulse*/
.pulse
{
   -webkit-animation-name: pulse ;
  animation-name: pulse ; 
}
@keyframes pulse
{
    0%
    {
        transform: none;
    }
    50%
    {
        transform: scale(1.15);
    }
    100%
    {
        transform: scale(1);
    }
}
@-webkit-keyframes pulse
{
    0%
    {
        -webkit-transform: none;
    }
    50%
    {
        -webkit-transform: scale(1.15);
    }
    100%
    {
        -webkit-transform: scale(1);
    }
}
/*spin*/
.spin
{
    -webkit-transform-origin: 50% 50% -200px;
    transform-origin: 50% 50% -200px;
    -webkit-animation-name: spin ;
  animation-name: spin ; 
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
}
@keyframes spin
{
    0%
    {
        transform: rotateY(0deg);
    }
    100%
    {
        transform: rotateY(360deg);
    }
}
@-webkit-keyframes spin
{
    0%
    {
        -webkit-transform: rotateY(0deg);
    }
    100%
    {
        -webkit-transform: rotateY(360deg);
    }
}
/*spin*/
.spin2
{
    -webkit-transform-origin: 50% 50% 200px;
    transform-origin: 50% 50% 200px;
    -webkit-animation-name: spin2 ;
  animation-name: spin2 ; 
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
}
@keyframes spin2
{
    0%
    {
        transform: rotateY(-360deg);
    }
    100%
    {
        transform: rotateY(0deg);
    }
}
@-webkit-keyframes spin2
{
    0%
    {
        -webkit-transform: rotateY(-360deg);
    }
    100%
    {
        -webkit-transform: rotateY(0deg);
    }
}
/*spin-y*/
.spin-y
{
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-animation-name: spin-y ;
  animation-name: spin-y ; 
}
@keyframes spin-y
{
    0%
    {
        transform: rotateY(0deg);
    }
    100%
    {
        transform: rotateY(360deg);
    }
}
@-webkit-keyframes spin-y
{
    0%
    {
        -webkit-transform: rotateY(0deg);
    }
    100%
    {
        -webkit-transform: rotateY(360deg);
    }
}
/*whirl*/
.whirl
{
	-webkit-animation-name: whirl ;
  animation-name: whirl ; 
}
@keyframes whirl
{
    0%
    {
        transform: translateY(1000px) rotateY(0deg);
    }
    80%
    {
        transform: translateY(-100%) rotateY(720deg);
    }
    100%
    {
        transform: translateY(0px);
    }
}
@-webkit-keyframes whirl
{
    0%
    {
        -webkit-transform: translateY(1000px) rotateY(0deg);
    }
    80%
    {
        -webkit-transform: translateY(-100%) rotateY(720deg);
    }
    100%
    {
        -webkit-transform: translateY(0px);
    }
}
/*wabble*/
.wabble
{
    -webkit-transform-origin: 50% 0 0;
    transform-origin: 50% 0 0;
    -webkit-animation-name: wabble ;
  animation-name: wabble ; 
}
@keyframes wabble
{
    0%, 100%
    {
        transform: rotateZ(0deg);
    }
    12.5%
    {
        transform: rotateZ(-20deg);
    }
    25%
    {
        transform: rotateZ(18deg);
    }
    37.5%
    {
        transform: rotateZ(-15deg);
    }
    50%
    {
        transform: rotateZ(13deg);
    }
    62.5%
    {
        transform: rotateZ(-10deg);
    }
    75%
    {
        transform: rotateZ(7deg);
    }
    87.5%
    {
        transform: rotateZ(-3deg);
    }
}
@-webkit-keyframes wabble
{
    0%, 100%
    {
        -webkit-transform: rotateZ(0deg);
    }
    12.5%
    {
        -webkit-transform: rotateZ(-20deg);
    }
    25%
    {
        -webkit-transform: rotateZ(18deg);
    }
    37.5%
    {
        -webkit-transform: rotateZ(-15deg);
    }
    50%
    {
        -webkit-transform: rotateZ(13deg);
    }
    62.5%
    {
        -webkit-transform: rotateZ(-10deg);
    }
    75%
    {
        -webkit-transform: rotateZ(7deg);
    }
    87.5%
    {
        -webkit-transform: rotateZ(-3deg);
    }
}