@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


@keyframes slide-top {
    0% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }

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

@keyframes slide-top-cont {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
    }
    /*80%{

    }*/

    100% {
        -webkit-transform: translate(-200px 300px);
        transform: translate(-200px 300px);
    }
}

@keyframes slide-down {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
    }

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

@keyframes slide-left {
    0% {
        -webkit-transform: translateX(-200px);
        transform: translateX(-200px);
    }

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

@keyframes slide-right {
    0% {
        -webkit-transform: translateX(200px);
        transform: translateX(200px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes slide-left-cont {
    0% {
        -webkit-transform: translateX(-400px);
        transform: translateX(-400px);
    }

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

@keyframes slide-right-cont {
    0% {
        -webkit-transform: translateX(400px);
        transform: translateX(400px);
    }

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