/*
 ____ _     ____  _  ____ _____ _  _____ _      ____ 
/   _Y \ /|/  __\/ \/ ___Y__ __Y \/  __// \  /|/  _ \
|  / | |_|||  \/|| ||    \ / \ | ||  \  | |\ ||| / \|
|  \_| | |||    /| |\___ | | | | ||  /_ | | \||| |-||
\____|_/ \|\_/\_\\_/\____/ \_/ \_/\____\\_/  \|\_/ \|

This page was made by Christie!
*/


/*--------keyframe rule----------*/
@keyframes fade-in{
    0% {opacity: 0;}
    100% {opacity: 1;}
}

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

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

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

/*------fade in animations--------*/

.fade-in{
    animation-name: fade-in;
        -moz-animation-name: fade-in;
        -ms-animation-name: fade-in;
        -o-animation-name: fade-in;
        -webkit-animation-name: fade-in;
    animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        -o-animation-duration: 0.5s;
        -webkit-animation-duration: 0.5s;
    animation-fill-mode: backwards;
        -moz-animation-fill-mode: backwards;
        -o-animation-fill-mode: backwards;
        -webkit-animation-fill-mode: backwards;
}

.fade-two{
    animation-delay: 1s;
        -moz-animation-delay: 1s;
        -o-animation-delay: 1s;
        -webkit-animation-delay: 1s;
}

.fade-three{
    animation-delay: 2s;
        -moz-animation-delay: 2s;
        -o-animation-delay: 2s;
        -webkit-animation-delay: 2s;
}

.fade-four{
    animation-delay: 3s;
        -moz-animation-delay: 3s;
        -o-animation-delay: 3s;
        -webkit-animation-delay: 3s;
}