/* --- Animation 1 --- */

.opening-anim {
    -webkit-animation: OpeningSequence 5s ease-out;
    -moz-animation: OpeningSequence 5s ease-out;
    animation: OpeningSequence 5s ease-out;
}

@-webkit-keyframes OpeningSequence {
    0% {
        letter-spacing: 50px;
        opacity: 0;
        transform: scale(3);
        -webkit-transform: scale(3);
        -moz-transform: scale(3);
    }
    100% {
        letter-spacing: 5px;
        opacity: 1;
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
    }
}

@-moz-keyframes OpeningSequence {
    0% {
        letter-spacing: 50px;
        opacity: 0;
        transform: scale(1.5);
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
    }
    100% {
        letter-spacing: 5px;
        opacity: 1;
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
    }
}

@keyframes OpeningSequence {
    0% {
        /* letter-spacing: 50px; */
        opacity: 0;
        transform: scale(1.5);
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
    }
    100% {
        /* letter-spacing: 5px; */
        opacity: 1;
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
    }
}



/* --- Animation 2 --- */
.fade-in-after-intro {
    -webkit-animation: FadeInAfterIntro 5s ease-out;
    -moz-animation: FadeInAfterIntro 5s ease-out;
    animation: FadeInAfterIntro 5s ease-out;
}

@-webkit-keyframes FadeInAfterIntro {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

@-moz-keyframes FadeInAfterIntro {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

@keyframes FadeInAfterIntro {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}