[class*=animation-] {
-webkit-animation-duration:.5s;
-o-animation-duration:.5s;
animation-duration:.5s;
-webkit-animation-timing-function:ease-out;
-o-animation-timing-function:ease-out;
animation-timing-function:ease-out;
-webkit-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both
}

.animation-delay-300{
    -webkit-animation-delay: 300ms;
    -o-animation-delay: 300ms;
    animation-delay: 300ms
}
.animation-delay-500{
    -webkit-animation-delay: 500ms;
    -o-animation-delay: 500ms;
    animation-delay: 500ms
}
.animation-delay-700{
    -webkit-animation-delay: 700ms;
    -o-animation-delay: 700ms;
    animation-delay: 700ms
}
.animation-delay-1s{
    -webkit-animation-delay: 1000ms;
    -o-animation-delay: 1000ms;
    animation-delay: 1000ms
}


.animation-slide-top{
    -webkit-animation-name:slide-top;
    -o-animation-name:slide-top;
    animation-name:slide-top;
}
.animation-slide-bottom{
    -webkit-animation-name: slide-bottom;
    -o-animation-name: slide-bottom;
    animation-name: slide-bottom
}
.animation-fade{
    -webkit-animation-name: fade;
    -o-animation-name: fade;
    animation-name: fade;
}
.animation-fadeOutLeft{
    -webkit-animation-name: fadeOutLeft;
    -o-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}
.animation-fadeInLeft{
    -webkit-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}
.animation-fadeInRight{
    -webkit-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
}
.animation-pulse-shrink{
    -webkit-animation-name: pulse-shrink;
    -o-animation-name: pulse-shrink;
    animation-name: pulse-shrink;
}
@keyframes slide-top {
    0% {
        opacity:0;
        -webkit-transform:translate3d(0, -100%, 0);
        transform:translate3d(0, -100%, 0);
    }
    100% {
        opacity:1;
        -webkit-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
    }
}
@-webkit-keyframes slide-top {
    0% {
        opacity:0;
        -webkit-transform:translate3d(0, -100%, 0);
        transform:translate3d(0, -100%, 0);
    }
    100% {
        opacity:1;
        -webkit-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
    }
}
@-o-keyframes slide-top {
    0% {
        opacity:0;
        -webkit-transform:translate3d(0, -100%, 0);
        transform:translate3d(0, -100%, 0);
    }
    100% {
        opacity:1;
        -webkit-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
    }
}

@keyframes slide-bottom{
    0% {
        opacity:0;
        -webkit-transform:translate3d(0, 100%, 0);
        transform:translate3d(0, 100%, 0);
    }
    100% {
        opacity:1;
        -webkit-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
    }
}
@-webkit-keyframes slide-bottom{
    0% {
        opacity:0;
        -webkit-transform:translate3d(0, 100%, 0);
        transform:translate3d(0, 100%, 0);
    }
    100% {
        opacity:1;
        -webkit-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
    }
}
@-o-keyframes slide-bottom{
    0% {
        opacity:0;
        -webkit-transform:translate3d(0, 100%, 0);
        transform:translate3d(0, 100%, 0);
    }
    100% {
        opacity:1;
        -webkit-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
    }
}

@keyframes fade {
    0% {
        opacity:0
    }
    100% {
        opacity:1
    }
}
@-webkit-keyframes fade {
    0% {
        opacity:0
    }
    100% {
        opacity:1
    }
}
@-o-keyframes fade {
    0% {
        opacity:0
    }
    100% {
        opacity:1
    }
}

@keyframes fadeOutLeft {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@-webkit-keyframes fadeOutLeft {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}
@-o-keyframes fadeOutLeft {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@-o-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@-o-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes pulse-shrink {
    to {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
    }
}
@-webkit-keyframes pulse-shrink {
    to {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
    }
}
@-o-keyframes pulse-shrink {
    to {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
    }
}

@keyframes shapeMover {
    0%,100% {
        -webkit-transform:perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
        transform:perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0)
    }
    50% {
        -webkit-transform:perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
        transform:perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px)
    }
}
@-webkit-keyframes shapeMover {
    0%,100% {
        -webkit-transform:perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
        transform:perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0)
    }
    50% {
        -webkit-transform:perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
        transform:perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px)
    }
}
@-o-keyframes shapeMover {
    0%,100% {
        -webkit-transform:perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
        transform:perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0)
    }
    50% {
        -webkit-transform:perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
        transform:perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px)
    }
}





/*animation*/
@-webkit-keyframes sticky {
    0% {
        top: -200px;
    }
    100% {
        top: 0;
    }
}
@keyframes sticky {
    0% {
        top: -200px;
    }
    100% {
        top: 0;
    }
}