/*---=====================================================
   <!--IT-Tech All Animation Here-->
=========================================================---*/

/*bounce-left-right-animation*/

@keyframes bounceleft {
    0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
    }
    50% {
        -webkit-transform: translateX(-15px);
        transform: translateX(-15px);
    }
    100% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
    }
}

/*bounce-top-bottom-animation*/

@keyframes bounce {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
    50% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
    100% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
}

@keyframes animate {
    0% {
        background-position: 0;
    }
    50% {
        background-position: 600px;
    }
    100% {
        background-position: 650px;
    }
}

/*wood animation*/

@keyframes wooo {
    0% {
        transform: rotate3d(0, 0, 0);
    }
    50% {
        transform: rotate3d(0, 1, 0, 180deg);
    }
    100% {
        transform: rotate3d(0, 1, 0, 359deg);
    }
}

@keyframes dance {
    0% {
        -webkit-transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1.0);
    }
}

@keyframes rotateme {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/*left bounce animation*/

@keyframes moveLeftBounce {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(30px);
        transform: translateX(30px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.bounce-animate4 {
    animation-name: float-bob4;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob4;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob4;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob4;
    -o-animation-duration: 5s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

.bounce-animate5 {
    animation-name: float-bob4;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob4;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob4;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob4;
    -o-animation-duration: 5s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

@keyframes float-bob4 {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
    50% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
    100% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
}

@keyframes float-bob5 {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
    50% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
}

/* wave animation */

@keyframes wave-animation {
    0% {
        transform: rotate( 0.0deg);
    }
    10% {
        transform: rotate(14.0deg);
    }
    /* The following five values can be played with to make the waving more or less extreme */
    20% {
        transform: rotate(-8.0deg);
    }
    30% {
        transform: rotate(14.0deg);
    }
    40% {
        transform: rotate(-4.0deg);
    }
    50% {
        transform: rotate(10.0deg);
    }
    60% {
        transform: rotate( 0.0deg);
    }
    /* Reset for the last half to pause */
    100% {
        transform: rotate( 0.0deg);
    }
}