@keyframes moveUp {
    from {
        transform: translateY(5%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(15%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes enLarge {
    from{
        scale: 0;
        opacity: 0;
    }to{
        scale: 1;
        opacity: 1;
    }    
}

@keyframes pullDown {
    from{
        max-height: 0;
    }to{
        max-height: 100em;
    }
}

@keyframes pullUp {
    from{
        max-height: 100em;
    }to{
        max-height: 0;
    }
}

@keyframes rotateYZ_180 {
    from{
        transform: rotateY(0deg) rotateZ(0deg);
    }to{
        transform: rotateY(-180deg) rotateZ(180deg);
    }
}

@keyframes rotateYZ_180_Back {
    from{
        transform: rotateY(-180deg) rotateZ(180deg);
    }to{
        transform: rotateY(0deg) rotateZ(0deg);
    }
}

@keyframes scaleGain {
    0%{
        scale: 1;
    }50%{
        scale: 1.1;
    }100%{
        scale: 1;
    }
}

.rotateYZ_180{
    animation: rotateYZ_180 200ms linear forwards;
}

.rotateYZ_180_Back{
    animation: rotateYZ_180_Back 200ms linear forwards;
}

.animationReverse{
    animation-direction: reverse;
}

.transparent{
    opacity: 0;
}

.fadeInLeft {
    animation: fadeInLeft 1s ease-in both;
}

.fadeInRight{
    animation: fadeInRight 1s ease-in both;
}

.moveUp {
    animation: moveUp 1s ease-in both;
}

.enLarge{
    animation: enLarge 1s cubic-bezier(0.6, 1.92, 1, 0.36) forwards;
}

.pullDown{
    animation: pullDown 200ms linear forwards;
    overflow: hidden;
}
.pullUp{
    animation: pullUp 200ms linear forwards;
    overflow: hidden;
}