@import url("https://fonts.googleapis.com/css2?family=Asap&display=swap");

.reveal {
    position: relative;
    opacity: 0;
}
.reveal.active {
    opacity: 1;
}
.active.fade-in {
    animation: fade-in 1s ease-in;
}
.active.fade-bottom {
    animation: fade-bottom 1s ease-in;
}
.active.fade-left {
    animation: fade-left 1s ease-in;
}
.active.fade-right {
    animation: fade-right 1s ease-in;
}
.active.fade-bottom-second {
    animation: fade-bottom 1.3s ease-in;
}
.active.fade-left-second {
    animation: fade-left 1.3s ease-in;
}
.active.fade-right-second {
    animation: fade-right 1.3s ease-in;
}
.active.fade-bottom-third {
    animation: fade-bottom 1.6s ease-in;
}
.active.fade-left-third {
    animation: fade-left 1.6s ease-in;
}
.active.fade-right-third {
    animation: fade-right 1.6s ease-in;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fade-bottom {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fade-left {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes fade-right {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}



.fade-in-text {
    font-size: 60px;
    animation: fadeIn 5s;
    -webkit-animation: fadeIn 5s;
    -moz-animation: fadeIn 5s;
    -o-animation: fadeIn 5s;
    -ms-animation: fadeIn 5s;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-o-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}