@keyframes top {
    0% {
        opacity: 0;
        margin-top: -120px;
    }
    100% {
        opacity: 1;
        margin-top: 0;
    }
}
@keyframes top2 {
    0% {
        opacity: 0;
        margin-top: -180px;
    }
    100% {
        opacity: 1;
        margin-top: -60px;
    }
}
@keyframes top3 {
    0% {
        opacity: 0;
        margin-left: -200px;
    }
    100% {
        opacity: 1;
        margin-left: 0px;
    }
}

@keyframes slideInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}


@keyframes slideInRight {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
.slideInRight {
    animation-name: slideInRight;
}

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

@keyframes zoomin {
    0% {
        opacity: 0;
        transform: scale(1.3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeout {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes rightin {
    0% {
        opacity: 0;
        transform: translateX(110%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes rightout {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(110%);
    }
}
@keyframes leftscale {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}
@keyframes leftout {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-110%);
        opacity: 0;
    }
}
@keyframes leftin {
    0% {
        transform: translateX(-110%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes bottomUp {
    0% {
        opacity: 0;
        transform: translateY(110%);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}
@keyframes topdown {
    0% {
        opacity: 0;
        transform: translateY(-110%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes m_rightin_one {
    0% {
        opacity: 0;
        transform: translateX(200%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes m_rightin_two {
    0% {
        opacity: 0;
        transform: translateX(200%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes m_rightin_three {
    0% {
        opacity: 0;
        transform: translateX(200%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes m_rightout_one {
    0% {
        opacity: 1;
        transform: translateY(-70%) translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-70%) translateX(200%);
    }
}
@keyframes m_rightout_two {
    0% {
        opacity: 1;
        transform: translateY(-20%) translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-20%) translateX(200%);
    }
}
@keyframes m_rightout_three {
    0% {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) translateX(200%);
    }
}



@keyframes m_rightin_one_t {
    0% {
        opacity: 0;
        transform: translateX(200%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes m_rightin_two_t {
    0% {
        opacity: 0;
        transform: translateX(200%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes m_rightin_three_t {
    0% {
        opacity: 0;
        transform: translateX(200%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes m_rightout_one_t {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(200%);
    }
}
@keyframes m_rightout_two_t {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(200%);
    }
}
@keyframes m_rightout_three_t {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(200%);
    }
}


@keyframes zoomin {
    0% {
        opacity: 0;
        transform: scale(1.3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes top-slide {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeout {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes zoomout {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.3);
    }
}