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

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

.fadeInUp {
    -webkit-animation: fadeInUp 1.5s forwards;
    animation: fadeInUp 1.5s forwards;
}

/************************fade-in-left************************/

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

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

.fadeInLeft {
    -webkit-animation: fadeInLeft 1.5s forwards;
    animation: fadeInLeft 1.5s forwards;
}

/************************fade-in-right************************/

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

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

.fadeInRight {
    -webkit-animation: fadeInRight 1.5s forwards;
    animation: fadeInRight 1.5s forwards;
}

/************************fade-in************************/

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation: fadeIn 1.5s;
    animation: fadeIn 1.5s;
}

/************************scaleing************************/

@-webkit-keyframes scaling {
    0% {
        -webkit-transform: scale(1, 1) translate(-50%, -50%);
    }
    50% {
        -webkit-transform: scale(1.2, 1.2) translate(-50%, -50%);
    }
    100% {
        -webkit-transform: scale(1, 1) translate(-50%, -50%);
    }
}

@keyframes scaling {
    0% {
        transform: scale(1, 1) translate(-50%, -50%);
    }
    50% {
        transform: scale(1.2, 1.2) translate(-50%, -50%);
    }
    100% {
        transform: scale(1, 1) translate(-50%, -50%);
    }
}

.scaling {
    -webkit-animation: scaling 1s ease-in-out;
    animation: scaling 1s ease-in-out;
}

/* *********************** scale-up ************************/

@-webkit-keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.bounceIn1 {
    -webkit-animation: bounceIn .7s forwards;
    animation: bounceIn .7s forwards;
}

.bounceIn2 {
    -webkit-animation: bounceIn .7s .2s forwards;
    animation: bounceIn .7s .2s forwards;
}

.bounceIn3 {
    -webkit-animation: bounceIn .7s .3s forwards;
    animation: bounceIn .7s .4s forwards;
}

.bounceIn4 {
    -webkit-animation: bounceIn .7s .4s forwards;
    animation: bounceIn .7s .8s forwards;
}