/* === Workflow Chart === */
#workflow-chart {
    position     : relative;
    width        : 10px;
    height       : 3144px;
    display      : inline-block;
}

/* === Generic Animations === */
@-webkit-keyframes fade-in {
    from { opacity : 0.0; }
    to   { opacity : 1.0; }
}
@-moz-keyframes fade-in {
    from { opacity : 0.0; }
    to   { opacity : 1.0; }
}
@-ms-keyframes fade-in {
    from { opacity : 0.0; }
    to   { opacity : 1.0; }
}
@-o-keyframes fade-in {
    from { opacity : 0.0; }
    to   { opacity : 1.0; }
}
@keyframes fade-in {
    from { opacity : 0.0; }
    to   { opacity : 1.0; }
}

@-webkit-keyframes fade-out {
    from { opacity : 1.0; }
    to   { opacity : 0.0; }
}
@-moz-keyframes fade-out {
    from { opacity : 1.0; }
    to   { opacity : 0.0; }
}
@-ms-keyframes fade-out {
    from { opacity : 1.0; }
    to   { opacity : 0.0; }
}
@-o-keyframes fade-out {
    from { opacity : 1.0; }
    to   { opacity : 0.0; }
}
@keyframes fade-out {
    from { opacity : 1.0; }
    to   { opacity : 0.0; }
}

@-webkit-keyframes fade-out-move-left {
    from {
        opacity           : 1.0;
        -webkit-transform : none;
    }
    to {
        opacity           : 0.0;
        -webkit-transform : translateX(800px);
    }
}
@-moz-keyframes fade-out-move-left {
    from {
        opacity        : 1.0;
        -moz-transform : none;
    }
    to {
        opacity        : 0.0;
        -moz-transform : translateX(800px);
    }
}
@-ms-keyframes fade-out-move-left {
    from {
        opacity       : 1.0;
        -ms-transform : none;
    }
    to {
        opacity       : 0.0;
        -ms-transform : translateX(800px);
    }
}
@-o-keyframes fade-out-move-left {
    from   {
        opacity      : 1.0;
        -o-transform : none;
    }
    to {
        opacity      : 0.0;
        -o-transform : translateX(800px);
    }
}
@keyframes fade-out-move-left {
    from {
        opacity   : 1.0;
        transform : none;
    }
    to {
        opacity   : 0.0;
        transform : translateX(800px);
    }
}

@-webkit-keyframes fade-in-move-left {
    from {
        opacity           : 0.0;
        -webkit-transform : translateX(-800px);
    }
    to   {
        opacity           : 1.0;
        -webkit-transform : none;
    }
}
@-moz-keyframes fade-in-move-left {
    from {
        opacity        : 0.0;
        -moz-transform : translateX(-800px);
    }
    to   {
        opacity        : 1.0;
        -moz-transform : none;
    }
}
@-ms-keyframes fade-in-move-left {
    from {
        opacity       : 0.0;
        -ms-transform : translateX(-800px);
    }
    to   {
        opacity       : 1.0;
        -ms-transform : none;
    }
}
@-o-keyframes fade-in-move-left {
    from {
        opacity      : 0.0;
        -o-transform : translateX(-800px);
    }
    to   {
        opacity      : 1.0;
        -o-transform : none;
    }
}
@keyframes fade-in-move-left {
    from {
        opacity   : 0.0;
        transform : translateX(-800px);

    }
    to   {
        opacity   : 1.0;
        transform : none;
    }
}

@-webkit-keyframes fade-out-move-right {
    from {
        opacity           : 1.0;
        -webkit-transform : none;
    }
    to {
        opacity           : 0.0;
        -webkit-transform : translateX(-800px);
    }
}
@-moz-keyframes fade-out-move-right {
    from {
        opacity        : 1.0;
        -moz-transform : none;
    }
    to {
        opacity        : 0.0;
        -moz-transform : translateX(-800px);
    }
}
@-ms-keyframes fade-out-move-right {
    from {
        opacity       : 1.0;
        -ms-transform : none;
    }
    to {
        opacity       : 0.0;
        -ms-transform : translateX(-800px);
    }
}
@-o-keyframes fade-out-move-right {
    from   {
        opacity      : 1.0;
        -o-transform : none;
    }
    to {
        opacity      : 0.0;
        -o-transform : translateX(-800px);
    }
}
@keyframes fade-out-move-right {
    from {
        opacity   : 1.0;
        transform : none;
    }
    to {
        opacity   : 0.0;
        transform : translateX(-800px);
    }
}

@-webkit-keyframes fade-in-move-right {
    from {
        opacity           : 0.0;
        -webkit-transform : translateX(800px);
    }
    to   {
        opacity           : 1.0;
        -webkit-transform : none;
    }
}
@-moz-keyframes fade-in-move-right {
    from {
        opacity        : 0.0;
        -moz-transform : translateX(800px);
    }
    to   {
        opacity        : 1.0;
        -moz-transform : none;
    }
}
@-ms-keyframes fade-in-move-right {
    from {
        opacity       : 0.0;
        -ms-transform : translateX(800px);
    }
    to   {
        opacity       : 1.0;
        -ms-transform : none;
    }
}
@-o-keyframes fade-in-move-right {
    from {
        opacity      : 0.0;
        -o-transform : translateX(800px);
    }
    to   {
        opacity      : 1.0;
        -o-transform : none;
    }
}
@keyframes fade-in-move-right {
    from {
        opacity   : 0.0;
        transform : translateX(800px);

    }
    to   {
        opacity   : 1.0;
        transform : none;
    }
}

/* === Lightbulb === */
#workflow-lightbulb {
    position : absolute;
    top      : 0px;
    left     : -50px;
}

/* === Line 01 === */
#workflow-line-01 {
    position : absolute;
    top      : 173px;
    left     : 6px;
}

/* === Consulting === */
#workflow-consulting {
    position : absolute;
    top      : 428px;
    left     : -114px;
}

/* === Line 02 === */
#workflow-line-02 {
    position : absolute;
    top      : 568px;
    left     : 5px;
}

/* === Vision === */
#workflow-vision {
    position : absolute;
    top      : 885px;
    left     : 630px;
    left     : -79px;
}

/* === Line 03 === */
#workflow-line-03 {
    position : absolute;
    top      : 1077px;
    left     : 5px;
}

/* === Concept === */
#workflow-concept {
    position : absolute;
    top      : 1407px;
    left     : -164px;
}

/* === Line 04 === */
#workflow-line-04 {
    position : absolute;
    top      : 1589px;
    left     : 5px;
}

/* === Prototyping === */
#workflow-prototyping {
    position : absolute;
    top      : 1832px;
    left     : -37px;
}

/* === Line 05 === */
#workflow-line-05 {
    position : absolute;
    top      : 1486px;
    left     : 82px;
}

/* === Line 06 === */
#workflow-line-06 {
    position : absolute;
    top      : 1589px;
    left     : -67px;
}

/* === Line 07 === */
#workflow-line-07 {
    position : absolute;
    top      : 2034px;
    left     : 5px;
}

/* === Gears === */

/* --- Container --- */
#workflow-gears {
    width    : 220px;
    height   : 220px;
    position : absolute;
    top      : 2312px;
    left     : -114px;
}

/* --- Gear 01 --- */
@-webkit-keyframes rotate-gear-01 {
    0% {
        -webkit-transform : rotate(0turn);
        opacity           : 0.0;
    }
    20% {
        opacity : 1.0;
    }
    100% {
        -webkit-transform : rotate(3turn);
    }
}
@-moz-keyframes rotate-gear-01 {
    0% {
        -moz-transform : rotate(0turn);
        opacity        : 0.0;
    }
    20% {
        opacity : 1.0;
    }
    100% {
        -moz-transform : rotate(3turn);
    }
}
@-ms-keyframes rotate-gear-01 {
    0% {
        -ms-transform : rotate(0turn);
        opacity       : 0.0;
    }
    20% {
        opacity : 1.0;
    }
    100% {
        -ms-transform : rotate(3turn);
    }
}
@-ms-keyframes rotate-gear-01 {
    0% {
        -ms-transform : rotate(0turn);
        opacity       : 0.0;
    }
    20% {
        opacity : 1.0;
    }
    100% {
        -ms-transform : rotate(3turn);
    }
}
@-o-keyframes rotate-gear-01 {
    0% {
        -o-transform : rotate(0turn);
        opacity      : 0.0;
    }
    20% {
        opacity : 1.0;
    }
    100% {
        -o-transform : rotate(3turn);
    }
}
@keyframes rotate-gear-01 {
    0% {
        transform : rotate(0turn);
        opacity   : 0.0;
    }
    20% {
        opacity : 1.0;
    }
    100% {
        transform : rotate(3turn);
    }
}

#workflow-gear-01 {
    position : absolute;
    top      : 66px;
    left     : 2px;
}

/* --- Gear 02 --- */
@-webkit-keyframes rotate-gear-02 {
    0% {
        -webkit-transform : rotate(0turn);
        opacity           : 0.0;
    }
    20% {
        opacity : 1.0;
    }
    100% {
        -webkit-transform : rotate(-4turn);
    }
}
@-moz-keyframes rotate-gear-02 {
    0% {
        -moz-transform : rotate(0turn);
        opacity        : 0.0;
    }
    20% {
        opacity : 1.0;
    }
    100% {
        -moz-transform : rotate(-4turn);
    }
}
@-ms-keyframes rotate-gear-02 {
    0% {
        -ms-transform : rotate(0turn);
        opacity       : 0.0;
    }
    20% {
        opacity : 1.0;
    }
    100% {
        -ms-transform : rotate(-4turn);
    }
}
@-o-keyframes rotate-gear-02 {
    0% {
        -o-transform : rotate(0turn);
        opacity      : 0.0;
    }
    20% {
        opacity : 1.0;
    }
    100% {
        -o-transform : rotate(-4turn);
    }
}
@keyframes rotate-gear-02 {
    0% {
        transform : rotate(0turn);
        opacity   : 0.0;
    }
    20% {
        opacity : 1.0;
    }
    100% {
        transform : rotate(-4turn);
    }
}

#workflow-gear-02 {
    position : absolute;
    top      : 0px;
    left     : 103px;
}

/* === Line 08 === */
#workflow-line-08 {
    position : absolute;
    top      : 2566px;
    left     : 5px;
}


/* === Rocket === */

/* --- Rocket Body --- */
@-webkit-keyframes move-rocket {
    0% {
        opacity           : 0.0;
        display           : none;
        -webkit-transform : translateY(150px);
    }
    1% {
        display : block;
    }
    20% {
        opacity : 1.0;
    }
    100% {
        -webkit-transform : none;
    }
}
@-moz-keyframes move-rocket {
    0% {
        opacity        : 0.0;
        display        : none;
        -moz-transform : translateY(150px);
    }
    1% {
        display : block;
    }
    20% {
        opacity : 1.0;
    }
    100% {
        -moz-transform : none;
    }
}
@-ms-keyframes move-rocket {
    0% {
        opacity       : 0.0;
        display       : none;
        -ms-transform : translateY(150px);
    }
    1% {
        display : block;
    }
    20% {
        opacity : 1.0;
    }
    100% {
        -ms-transform : none;
    }

}
@-o-keyframes move-rocket {
    0% {
        opacity      : 0.0;
        display      : none;
        -o-transform : translateY(150px);
    }
    1% {
        display : block;
    }
    20% {
        opacity : 1.0;
    }
    100% {
        -o-transform : none;
    }
}
@keyframes move-rocket {
    0% {
        opacity   : 0.0;
        display   : none;
        transform : translateY(150px);
    }
    1% {
        display : block;
    }
    20% {
        opacity : 1.0;
    }
    100% {
        transform : none;
    }
}

#workflow-rocket {
    width    : 112px;
    height   : 340px;
    position : absolute;
    top      : 2808px;
    left     : -49px;
    z-index  : 100;
}

/* --- Flame --- */
/*
@-webkit-keyframes flame-flicker {
    0%   { -webkit-transform : scale(.8); }
    100% { -webkit-transform : scale(1);  }
}
@-moz-keyframes flame-flicker {
    0%   { -moz-transform : scale(.8); }
    100% { -moz-transform : scale(1);  }
}
@-ms-keyframes flame-flicker {
    0%   { -ms-transform : scale(.8); }
    100% { -ms-transform : scale(1);  }
}
@-o-keyframes flame-flicker {
    0%   { -o-transform : scale(.8); }
    100% { -o-transform : scale(1);  }
}
@keyframes flame-flicker {
    0%   { transform : scale(.8); }
    100% { transform : scale(1);  }
}

#workflow-rocket-flame {
    position : absolute;
    top      : 212px;
    left     : 34px;
}