/* .ball {
  -webkit-animation-name: ball;
  animation-name: ball;
  -webkit-animation-duration: 2s;
  animation-duration: 2s; } */


@keyframes ball {

    0% {
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    20% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
        -webkit-transform: translate3d(0, -40px, 0);
        transform: translate3d(0, -40px, 0);
    }

    40% {
        -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    75% {
        -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    85% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
        -webkit-transform: translate3d(0, -8px, 0);
        transform: translate3d(0, -8px, 0);
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}





@keyframes pullLeft {

    0% {
        -webkit-transform: scale3d(0, 1, 1);
        transform: scale3d(0, 1, 1)
    }

    50% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scale3d(0, 1, 1);
        transform: scale3d(0, 1, 1);
        -webkit-transform-origin: center left;
        transform-origin: center left
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

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





/* ------------------------------------------------ */

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


/* ------------------------------------------------ */

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px);
    }

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

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-60px);
        -ms-transform: translateY(-60px);
        transform: translateY(-60px);
    }

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

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



@keyframes bevelIn_left {
    0% {
        opacity: 0;
        -webkit-transform: translate(-7%, -30px);
        -ms-transform: translate(-7%, -30px);
        transform: translate(-7%, -30px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0);
        transform: translate(0, 0);
    }
}

@keyframes bevelIn_right {
    0% {
        opacity: 0;
        -webkit-transform: translate(7%, -30px);
        -ms-transform: translate(7%, -30px);
        transform: translate(7%, -30px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0);
        transform: translate(0, 0);
    }
}

.arrowLeftIn {
    -webkit-animation-name: bevelIn_left;
    animation-name: bevelIn_left;
}

.arrowRightIn {
    -webkit-animation-name: bevelIn_right;
    animation-name: bevelIn_right;
}




/* ------------------------------------------------ */

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
    }

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

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50px);
        -ms-transform: translateX(-50px);
        transform: translateX(-50px);
    }

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

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




/* ------------------------------------------------ */
/* 
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(70px);
    transform: translateX(70px);
  }

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

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(70px);
    -ms-transform: translateX(70px);
    transform: translateX(70px);
  }

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

.UseTxt {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
} */