@keyframes slidefromleft {
    0% { opacity: 0; transform: translate(0, 200px); }
    15% { opacity: 0; }
    50% { transform: translate(0, 200px); }
    51% { transform: translate(-1000px, 0); }
    90% { opacity: 0; }
    100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes slidefromright {
    0% { opacity: 0; transform: translate(0, 200px); }
    15% { opacity: 0; }
    50% { transform: translate(0, 200px); }
    51% { transform: translate(1000px, 0); }
    90% { opacity: 0; }
    100% { opacity: 1; transform: translate(0, 0); }
}

@keyframes dash {
    0% {
        stroke-dashoffset: -800;
    }
    75% {
        stroke-dashoffset: 0;
        fill-opacity: 0;
        stroke-opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        fill-opacity: 1;
        stroke-opacity: 0;
    }
}

@keyframes fill-grow {
    0% {
        opacity: 0;
        width: 0;
    }
    100% {
        width: 100%;
        opacity: 1;
    }
}

@keyframes petal {
    0% {
        opacity: 0;
        transform: translateY(25px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes top-petal {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes center {
    0% {
        opacity: 0;
        transform: translate(0px,0px) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: translate(0px,0px) rotate(0deg);
    }
}

@keyframes flower-stem {
    0% {
        stroke-dashoffset: -800;
    }
    90% {
        stroke-dashoffset: 0;
        fill-opacity: 0;
        stroke-opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        fill-opacity: 1;
        stroke-opacity: 0;
    }
}

#leaf-b,#goodest_boy_4_ {
    stroke-opacity: 1;
    stroke-dashoffset: -800;
    stroke-dasharray: 800;
    stroke-linecap: round;
    stroke: #bcbec0;
    fill: #549417;
    fill-opacity: 0;
    animation: dash 3s ease-in-out 1;
    animation-fill-mode: forwards;
}

.text-logo-letters-a {
    animation: slidefromleft 2.5s ease 1;
    opacity: 0;
    animation-fill-mode: forwards;
}
.text-logo-letters-b {
    animation: slidefromright 2.5s ease 1;
    opacity: 0;
    animation-fill-mode: forwards;
}
#a1 {
    animation-iteration-count: 1;
}
#a2 {
    animation-iteration-count: 1;
    animation-delay: .1s;
}
#a3 {
    animation-iteration-count: 1;
    animation-delay: .2s;
}
#a4 {
    animation-iteration-count: 1;
    animation-delay: .3s;
}
#a5 {
    animation-iteration-count: 1;
    animation-delay: .4s;
}
#a6 {
    animation-iteration-count: 1;
    animation-delay: .5s;
}
#a7 {
    animation-iteration-count: 1;
    animation-delay: .6s;
}
#a8 {
    animation-iteration-count: 1;
    animation-delay: .7s;
}
#b1 {
    animation-iteration-count: 1;
    /*animation-delay: .8s;*/
    animation-delay: 1.4s;
}
#b2 {
    animation-iteration-count: 1;
    /*animation-delay: .9s;*/
    animation-delay: 1.3s;
}
#b3 {
    animation-iteration-count: 1;
    /*animation-delay: 1s;*/
    animation-delay: 1.2s;
}
#b4 {
    animation-iteration-count: 1;
    /*animation-delay: 1.1s;*/
    animation-delay: 1.1s;
}
#b5 {
    animation-iteration-count: 1;
    /*animation-delay: 1.2s;*/
    animation-delay: 1s;
}
#b6 {
    animation-iteration-count: 1;
    /*animation-delay: 1.3s;*/
    animation-delay: .9s;
}
#b7 {
    animation-iteration-count: 1;
    /*animation-delay: 1.4s;*/
    animation-delay: .8s;
}
#b8 {
    animation-iteration-count: 1;
    /*animation-delay: 1.5s;*/
    animation-delay: .7s;
}


/* Brain Flower Animations */
.brain-contain {
    width: 300px;
    height: 600px;
    position: relative;
    display: block;
}
#brainMe {
    animation: fill-grow 1.5s ease-in-out;
    animation-fill-mode: forwards;
    max-width: 300px;
}

.flower-center {
    animation: center 1.5s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 4.5s;
    opacity: 0;
    transform: translate(0px,0px) rotate(0deg);
    transform-origin: 89px 37px;
}
.flower-petal {
    animation: petal 1.5s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 6s;
    opacity: 0;
}
.flower-top {
    transform: translate(7.5px, 10px);
}
.flower-stem {
    stroke-opacity: 1;
    stroke-dashoffset: -800;
    stroke-dasharray: 800;
    stroke-linecap: round;
    stroke: #bcbec0;
    fill: #73B9AF;
    fill-opacity: 0;
    animation: flower-stem 3s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}


.petal {
    animation: top-petal 1.5s ease-in-out;
    animation-fill-mode: forwards;
    opacity: 0;    
}

.petal-1 {
    animation-delay: 5s;
}   
.petal-2 {
    animation-delay: 5.05s;
}
.petal-3 {
    animation-delay: 5.1s;
}      
.petal-4 {
    animation-delay: 5.15s;
}
.petal-5 {
    animation-delay: 5.2s;
}            
.petal-6 {
    animation-delay: 5.25s;
}            
.petal-7 {
    animation-delay: 5.3s;
}
.petal-7 {
    animation-delay: 5.35s;
}
.petal-8 {
    animation-delay: 5.4s;
}
.petal-9 {
    animation-delay: 5.45s;
}
.petal-10 {
    animation-delay: 5.5s;
}
.petal-11 {
    animation-delay: 5.55s;
}
.petal-12 {
    animation-delay: 5.6s;
}
.petal-13 {
    animation-delay: 5.65s;
}
.petal-14 {
    animation-delay: 5.7s;
}
.petal-15 {
    animation-delay: 5.75s;
}
.petal-16 {
    animation-delay: 5.8s;
}