@import "animated-homepage/common.css";
@import "animated-homepage/buttons.css";
@import "animated-homepage/initial-animated-block.css";
@import "animated-homepage/typography.css";
@import "animated-homepage/two-column-block.css";
@import "animated-homepage/three-column-block.css";
@import "animated-homepage/two-third.css";
@import "animated-homepage/footer.css";

@keyframes videoOpacity {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeAndGrow {
    0% {
        opacity: 0;
        width: 200px;
        filter: blur(4px);
    }

    20% {
        opacity: 0;
        width: 300px;
        filter: blur(4px);
    }

    40% {
        opacity: 1;
        width: 400px;
        filter: blur(0px);
    }

    60% {
        width: 500px;
        filter: blur(0px);
    }

    80% {
        width: 600px;
        filter: blur(0px);
    }

    100% {
        width: 700px;
        filter: blur(0px);
    }
}


@media only screen and (max-width: 768px) {
    @keyframes fadeAndGrowMobile {
        0% {
            opacity: 0;
            width: 200px;
            filter: blur(4px);
        }

        20% {
            opacity: 0;
            width: 40%;
            filter: blur(4px);
        }

        40% {
            opacity: 1;
            width: 50%;
            filter: blur(0px);
        }

        60% {
            width: 60%;
            filter: blur(0px);
        }

        80% {
            width: 70%;
            filter: blur(0px);
        }

        100% {
            width: 80%;
            filter: blur(0px);
        }
    }
}