#canvas.story-animation #girl {
    animation-duration: 269s;
    animation-name: storyGirlBase;

    /* DEBUG */
    /* animation-duration: 134s; */

    display: block;

    /* Initial Conditions */
    left: 525px;
    top: 395px;
}

#canvas.story-animation #girl .arm.left {
    animation-duration: 269s;
    animation-name: storyGirlArmLeft;

    /* DEBUG */
    /* animation-duration: 134s; */
}

#canvas.story-animation #girl .arm.right {
    animation-duration: 269s;
    animation-name: storyGirlArmRight;

    /* DEBUG */
    /* animation-duration: 134s; */
}

#canvas.story-animation #girl .body {
    animation-duration: 269s;
    animation-name: storyGirlBody;

    /* DEBUG */
    /* animation-duration: 134s; */
}

#canvas.story-animation #girl .head {
    animation-duration: 269s;
    animation-name: storyGirlHead;

    /* DEBUG */
    /* animation-duration: 134s; */
}


/* ********** Keyframes ********* */
@keyframes storyGirlBase {
    from {
        left: 525px;
        top: 395px;

        opacity: 0.0;

        -webkit-transform: rotateX(180deg) scaleX(-1);
                transform: rotateX(180deg) scaleX(-1);
    }

    8.55% {
        left: 525px;
        top: 395px;

        opacity: 0.0;

        -webkit-transform: rotateX(180deg) scaleX(-1);
                transform: rotateX(180deg) scaleX(-1);
    }

    8.92% {
        left: 525px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) scaleX(-1);
                transform: rotateX(0deg) scaleX(-1);
    }

    13.01% {
        left: 525px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) scaleX(-1);
                transform: rotateX(0deg) scaleX(-1);
    }

    13.38% {
        left: 525px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) scaleX(1);
                transform: rotateX(0deg) scaleX(1);
    }

    19.33% {
        left: 700px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) scaleX(1);
                transform: rotateX(0deg) scaleX(1);
    }

    20.07% {
        left: 750px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) scaleX(-1);
                transform: rotateX(0deg) scaleX(-1);
    }

    21.18% {
        left: 750px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) scaleX(-1);
                transform: rotateX(0deg) scaleX(-1);
    }

    21.73% {
        left: 775px;
        top: 415px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(-10deg) scaleX(-1);
                transform: rotateX(0deg) rotateZ(-10deg) scaleX(-1);
    }

    22.28% {
        left: 750px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(0deg) scaleX(-1);
                transform: rotateX(0deg) rotateZ(0deg) scaleX(-1);
    }

    23.43% {
        left: 750px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(0deg) scaleX(-1);
                transform: rotateX(0deg) rotateZ(0deg) scaleX(-1);
    }

    23.98% {
        left: 775px;
        top: 415px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(-10deg) scaleX(-1);
                transform: rotateX(0deg) rotateZ(-10deg) scaleX(-1);
    }

    24.53% {
        left: 750px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(0deg) scaleX(-1);
                transform: rotateX(0deg) rotateZ(0deg) scaleX(-1);
    }

    24.90% {
        left: 750px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
                transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
    }

    26.41% {
        left: 1050px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
                transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
    }

    /* Reset */
    26.42% {
        left: 1050px;
        top: 395px;

        opacity: 0.0;

        -webkit-transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
                transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
    }

    27.88% {
        left: -150px;
        top: 395px;

        opacity: 0.0;

        -webkit-transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
                transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
    }

    27.89% {
        left: -150px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
                transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
    }

    /* Enter stage left */
    31.97% {
        left: 75px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
                transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
    }

    32.71% {
        left: 75px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
                transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
    }

    33.26% {
        left: 50px;
        top: 415px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(10deg) scaleX(1);
                transform: rotateX(0deg) rotateZ(10deg) scaleX(1);
    }

    33.81% {
        left: 75px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
                transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
    }

    33.99% {
        left: 75px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
                transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
    }

    34.73% {
        left: 150px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
                transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
    }

    38.66% {
        left: 650px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
                transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
    }

    39.03% {
        left: 690px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
                transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
    }

    39.40% {
        left: 675px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
                transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
    }

    39.40% {
        left: 675px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
                transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
    }

    45.72% {
        left: 675px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
                transform: rotateX(0deg) rotateZ(0deg) scaleX(1);
    }

    47.58% {
        left: 682px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(7deg) scaleX(1);
                transform: rotateX(0deg) rotateZ(7deg) scaleX(1);
    }

    53.90% {
        left: 682px;
        top: 395px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(7deg) scaleX(1);
                transform: rotateX(0deg) rotateZ(7deg) scaleX(1);
    }

    56.13% {
        left: 682px;
        top: 600px;

        opacity: 1.0;

        -webkit-transform: rotateX(0deg) rotateZ(7deg) scaleX(1);
                transform: rotateX(0deg) rotateZ(7deg) scaleX(1);
    }

    /* Clear */
    56.14% {
        left: 682px;
        top: 600px;

        display: none;
        opacity: 0.0;

        -webkit-transform: rotateX(0deg) rotateZ(7deg) scaleX(1);
                transform: rotateX(0deg) rotateZ(7deg) scaleX(1);
    }

    to {
        display: none;
        opacity: 0.0;
    }
}

@keyframes storyGirlArmLeft {
    from {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }

    8.92% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }

    10.41% {
        -webkit-transform: rotate(-64deg);
                transform: rotate(-64deg);
    }

    11.00% {
        -webkit-transform: rotate(-60deg);
                transform: rotate(-60deg);
    }

    11.15% {
        -webkit-transform: rotate(-64deg);
                transform: rotate(-64deg);
    }

    12.26% {
        -webkit-transform: rotate(15deg);
                transform: rotate(15deg);
    }

    39.40% {
        -webkit-transform: rotate(15deg);
                transform: rotate(15deg);
    }

    40.14% {
        -webkit-transform: rotate(42deg);
                transform: rotate(42deg);
    }

    45.72% {
        -webkit-transform: rotate(42deg);
                transform: rotate(42deg);
    }

    47.58% {
        -webkit-transform: rotate(55deg);
                transform: rotate(55deg);
    }

    to {

    }
}

@keyframes storyGirlArmRight {
    from {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }

    9.29% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }

    10.03% {
        -webkit-transform: rotate(15deg);
                transform: rotate(15deg);
    }

    13.00% {
        -webkit-transform: rotate(15deg);
                transform: rotate(15deg);
    }

    39.40% {
        -webkit-transform: rotate(15deg);
                transform: rotate(15deg);
    }

    40.14% {
        -webkit-transform: rotate(42deg);
                transform: rotate(42deg);
    }

    45.72% {
        -webkit-transform: rotate(42deg);
                transform: rotate(42deg);
    }

    47.58% {
        -webkit-transform: rotate(55deg);
                transform: rotate(55deg);
    }

    to {

    }
}

@keyframes storyGirlBody {
    from {
        
    }

    to {

    }
}

@keyframes storyGirlHead {
    from {
        -webkit-transform: rotate(-30deg);
                transform: rotate(-30deg);
    }

    11.89% {
        -webkit-transform: rotate(-30deg);
                transform: rotate(-30deg);
    }

    12.26% {
        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    21.48% {
        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    21.53% {
        -webkit-transform: rotate(2deg);
                transform: rotate(2deg);
    }

    21.58% {
        -webkit-transform: rotate(-1deg);
                transform: rotate(-1deg);
    }

    21.63% {
        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    /* Start of talking */
    21.63% {
        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    21.68% {
        -webkit-transform: rotate(2deg);
                transform: rotate(2deg);
    }

    21.78% {
        -webkit-transform: rotate(-7deg);
                transform: rotate(-7deg);
    }

    /* End of talking */
    21.83% {
        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    /* Start of laugh */
    22.60% {
        top: 0px;

        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    22.65% {
        top: 2px;

        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    22.70% {
        top: 0px;

        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    22.75% {
        top: 2px;

        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    22.80% {
        top: 0px;

        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    22.85% {
        top: 2px;

        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    /* End of laugh */
    22.90% {
        top: 0px;

        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    23.10% {
        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    23.20% {
        -webkit-transform: rotate(2deg);
                transform: rotate(2deg);
    }

    23.30% {
        -webkit-transform: rotate(-7deg);
                transform: rotate(-7deg);
    }

    23.35% {
        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    /* Start of talking */
    34.91% {
        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    34.96% {
        -webkit-transform: rotate(2deg);
                transform: rotate(2deg);
    }

    35.01% {
        -webkit-transform: rotate(-7deg);
                transform: rotate(-7deg);
    }

    /* End of talking */
    35.06% {
        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    /* Start of laugh */
    36.94% {
        top: 0px;

        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    36.99% {
        top: 2px;

        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    37.04% {
        top: 0px;

        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    37.09% {
        top: 2px;

        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    /* End of laugh */
    37.14% {
        top: 0px;

        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    /* Start of talking */
    40.32% {
        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    40.37% {
        -webkit-transform: rotate(2deg);
                transform: rotate(2deg);
    }

    40.42% {
        -webkit-transform: rotate(-7deg);
                transform: rotate(-7deg);
    }

    /* End of talking */
    40.47% {
        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    /* Start of talking */
    40.84% {
        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    40.89% {
        -webkit-transform: rotate(2deg);
                transform: rotate(2deg);
    }

    40.94% {
        -webkit-transform: rotate(-7deg);
                transform: rotate(-7deg);
    }

    /* End of talking */
    40.99% {
        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    /* Start of talking */
    43.72% {
        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    43.77% {
        -webkit-transform: rotate(2deg);
                transform: rotate(2deg);
    }

    43.82% {
        -webkit-transform: rotate(-7deg);
                transform: rotate(-7deg);
    }

    /* End of talking */
    43.87% {
        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    to {

    }
}