@keyframes right {
    16.65% {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    33.3% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }
    49.95% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    66.6% {
        -webkit-transform: translateX(-1px);
        transform: translateX(-1px);
    }
    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes right {
    16.65% {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    33.3% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }
    49.95% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    66.6% {
        -webkit-transform: translateX(-1px);
        transform: translateX(-1px);
    }
    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@-webkit-keyframes pulse {
    0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }
    50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
    }
    100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }
    }
    @keyframes pulse {
    0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }
    50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
    }
    100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }
}

@keyframes up {
    16.65% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
    }
    
    33.3% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    49.95% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }
    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes up {
    16.65% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
    }
    
    33.3% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    49.95% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }
    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

/* fade in  */
@keyframes fadeIn {
    0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -450%, 0);
    transform: translate3d(0, -450%, 0);
    }
    100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -410%, 0);
    transform: translate3d(0, -410%, 0);
    }
}
@-webkit-keyframes fadeIn {
    0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -450%, 0);
    transform: translate3d(0, -450%, 0);
    }
    100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -410%, 0);
    transform: translate3d(0, -410%, 0);
    }
}
@keyframes fadeInDown {
    0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -410%, 0);
    transform: translate3d(0, -410%, 0);
    }
    100% {
    opacity: 1;
    -webkit-transform:  translate3d(0, -410%, 0);
    transform: translate3d(0, -410%, 0);
    }
} 
@-webkit-keyframes fadeInDown {
    0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -410%, 0);
    transform: translate3d(0, -410%, 0);
    }
    100% {
    opacity: 1;
    -webkit-transform:  translate3d(0, -410%, 0);
    transform: translate3d(0, -410%, 0);
    }
} 
  
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(-0%);
        -webkit-transform: translateX(0%);
    }
}
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
    }
}

@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}