@charset "utf-8";
.fadeUpTrigger{
    opacity:0;
}

.fadeUp{
    animation-name: fadeUpAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime{
    from{
        opacity: 0;
        transform: translateY(30px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInTrigger{
    opacity:0;
}

.fadeIn{
    animation-name: fadeInAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnime{
    from{
        opacity: 0;
        transform: translateX(-50px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeTrigger{
    opacity: 0;
}

.fade{
    animation-name: fadeAnime;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

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