@-webkit-keyframes rt-fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0,100px,0);
        transform: translate3d(0,100px,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }
}

@keyframes rt-fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0,100px,0);
        transform: translate3d(0,100px,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }
}

.fadeInUp.rt-animate {
    -webkit-animation-name: rt-fadeInUp;
    animation-name: rt-fadeInUp
}

@-webkit-keyframes rt-fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0,-100px,0);
        transform: translate3d(0,-100px,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes rt-fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0,-100px,0);
        transform: translate3d(0,-100px,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInDown.rt-animate {
    -webkit-animation-name: rt-fadeInDown;
    animation-name: rt-fadeInDown
}

@-webkit-keyframes rt-fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100px,0,0);
        transform: translate3d(-100px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes rt-fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100px,0,0);
        transform: translate3d(-100px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInLeft.rt-animate {
    -webkit-animation-name: rt-fadeInLeft;
    animation-name: rt-fadeInLeft
}

@-webkit-keyframes rt-fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100px,0,0);
        transform: translate3d(100px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes rt-fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100px,0,0);
        transform: translate3d(100px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInRight.rt-animate {
    -webkit-animation-name: rt-fadeInRight;
    animation-name: rt-fadeInRight
}

/* animation for sectio  or widget  / column / box */

@-webkit-keyframes rtZoom {
    0% {
        -webkit-transform: scale(1,1);
        transform: scale(1,1)
    }

    50% {
        -webkit-transform: scale(1.5,1.5);
        transform: scale(1.5,1.5)
    }

    to {
        -webkit-transform: scale(1,1);
        transform: scale(1,1)
    }
}

@keyframes rtZoom {
    0% {
        -webkit-transform: scale(1,1);
        transform: scale(1,1)
    }

    50% {
        -webkit-transform: scale(1.5,1.5);
        transform: scale(1.5,1.5)
    }

    to {
        -webkit-transform: scale(1,1);
        transform: scale(1,1)
    }
}

@-webkit-keyframes toBottomFromTop {
    49% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    50% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }

    51% {
        opacity: 1
    }
}


@keyframes rt-blink {
	0%,
	50%,
	100% {
		opacity: 1;
	}

	25%,
	75% {
		opacity: 0;
	}
}

@-webkit-keyframes rt-blink {
    0%,
    50%,
    100% {
            opacity: 1;
    }

    25%,
    75% {
            opacity: 0;
    }
}


@keyframes rt-bounce {
    0% {
            animation-timing-function: ease-in;
            opacity: 1;
            transform: translateY(-45px);
    }

    24% {
            opacity: 1;
    }

    40% {
            animation-timing-function: ease-in;
            transform: translateY(-24px);
    }

    65% {
            animation-timing-function: ease-in;
            transform: translateY(-12px);
    }

    82% {
            animation-timing-function: ease-in;
            transform: translateY(-6px);
    }

    93% {
            animation-timing-function: ease-in;
            transform: translateY(-4px);
    }

    25%,
    55%,
    75%,
    87% {
            animation-timing-function: ease-out;
            transform: translateY(0px);
    }

    100% {
            animation-timing-function: ease-out;
            opacity: 1;
            transform: translateY(0px);
    }
}

@-webkit-keyframes bounce {
  0% {
            animation-timing-function: ease-in;
            opacity: 1;
            transform: translateY(-45px);
    }

    24% {
            opacity: 1;
    }

    40% {
            animation-timing-function: ease-in;
            transform: translateY(-24px);
    }

    65% {
            animation-timing-function: ease-in;
            transform: translateY(-12px);
    }

    82% {
            animation-timing-function: ease-in;
            transform: translateY(-6px);
    }

    93% {
            animation-timing-function: ease-in;
            transform: translateY(-4px);
    }

    25%,
    55%,
    75%,
    87% {
            animation-timing-function: ease-out;
            transform: translateY(0px);
    }

    100% {
            animation-timing-function: ease-out;
            opacity: 1;
            transform: translateY(0px);
    }  
}


@keyframes jello {
    0% {
            transform: scale3d(1, 1, 1);
    }

    30% {
            transform: scale3d(0.75, 1.25, 1);
    }

    40% {
            transform: scale3d(1.25, 0.75, 1);
    }

    50% {
            transform: scale3d(0.85, 1.15, 1);
    }

    65% {
            transform: scale3d(1.05, 0.95, 1);
    }

    75% {
            transform: scale3d(0.95, 1.05, 1);
    }

    100% {
            transform: scale3d(1, 1, 1);
    }
}

@-webkit-keyframes jello {
   0% {
            transform: scale3d(1, 1, 1);
    }

    30% {
            transform: scale3d(0.75, 1.25, 1);
    }

    40% {
            transform: scale3d(1.25, 0.75, 1);
    }

    50% {
            transform: scale3d(0.85, 1.15, 1);
    }

    65% {
            transform: scale3d(1.05, 0.95, 1);
    }

    75% {
            transform: scale3d(0.95, 1.05, 1);
    }

    100% {
            transform: scale3d(1, 1, 1);
    } 
}


@keyframes pulse {
    0% {
            animation-timing-function: ease-out;
            transform: scale(1);
            transform-origin: center center;
    }

    10% {
            animation-timing-function: ease-in;
            transform: scale(0.91);
    }

    17% {
            animation-timing-function: ease-out;
            transform: scale(0.98);
    }

    33% {
            animation-timing-function: ease-in;
            transform: scale(0.87);
    }

    45% {
            animation-timing-function: ease-out;
            transform: scale(1);
    }
}

@-webkit-keyframes pulse {
    0% {
            animation-timing-function: ease-out;
            transform: scale(1);
            transform-origin: center center;
    }

    10% {
            animation-timing-function: ease-in;
            transform: scale(0.91);
    }

    17% {
            animation-timing-function: ease-out;
            transform: scale(0.98);
    }

    33% {
            animation-timing-function: ease-in;
            transform: scale(0.87);
    }

    45% {
            animation-timing-function: ease-out;
            transform: scale(1);
    }
}


@keyframes shake {
    0%,
    100% {
            transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70% {
            transform: translateX(-10px);
    }

    20%,
    40%,
    60% {
            transform: translateX(10px);
    }

    80% {
            transform: translateX(8px);
    }

    90% {
            transform: translateX(-8px);
    }
}

@-webkit-keyframes shake {
    0%,
    100% {
            transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70% {
            transform: translateX(-10px);
    }

    20%,
    40%,
    60% {
            transform: translateX(10px);
    }

    80% {
            transform: translateX(8px);
    }

    90% {
            transform: translateX(-8px);
    }  
}

@keyframes vibrate {
    0% {
            transform: translate(0);
    }

    20% {
            transform: translate(-2px, 2px);
    }

    40% {
            transform: translate(-2px, -2px);
    }

    60% {
            transform: translate(2px, 2px);
    }

    80% {
            transform: translate(2px, -2px);
    }

    100% {
            transform: translate(0);
    }
}

@-webkit-keyframes vibrate {
  0% {
            transform: translate(0);
    }

    20% {
            transform: translate(-2px, 2px);
    }

    40% {
            transform: translate(-2px, -2px);
    }

    60% {
            transform: translate(2px, 2px);
    }

    80% {
            transform: translate(2px, -2px);
    }

    100% {
            transform: translate(0);
    }  
}


@keyframes wobble {
    0%,
    100% {
            transform: translateX(0%);
            transform-origin: 50% 50%;
    }

    15% {
            transform: translateX(-30px) rotate(-6deg);
    }

    30% {
            transform: translateX(15px) rotate(6deg);
    }

    45% {
            transform: translateX(-15px) rotate(-3.6deg);
    }

    60% {
            transform: translateX(9px) rotate(2.4deg);
    }

    75% {
            transform: translateX(-6px) rotate(-1.2deg);
    }
}


@-webkit-keyframes wobble {   
    0%,
    100% {
            transform: translateX(0%);
            transform-origin: 50% 50%;
    }

    15% {
            transform: translateX(-30px) rotate(-6deg);
    }

    30% {
            transform: translateX(15px) rotate(6deg);
    }

    45% {
            transform: translateX(-15px) rotate(-3.6deg);
    }

    60% {
            transform: translateX(9px) rotate(2.4deg);
    }

    75% {
            transform: translateX(-6px) rotate(-1.2deg);
    }
}