/* * * * * * * * * * * * * Spring Animation:  */

.butterfly {
    position: absolute;
    z-index: 2000;
    top: 10px;
    left: 10px;
	width: 50px;
	height: 50px;
	transform-style: preserve-3d;
    transform-origin: 25px 25px;
    overflow: visible;

    -webkit-animation-name: butterfly;
       -moz-animation-name: butterfly;
        -ms-animation-name: butterfly;
         -o-animation-name: butterfly;
            animation-name: butterfly;
     
    -webkit-animation-duration: 30s;
       -moz-animation-duration: 30s;
        -ms-animation-duration: 30s;
         -o-animation-duration: 30s;
            animation-duration: 30s;     
        
    -webkit-animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
         -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;

    -webkit-transform-origin: 50% 50%;
       -moz-transform-origin: 50% 50%;
         -o-transform-origin: 50% 50%;
            transform-origin: 50% 50%;            

    -webkit-animation-timing-function: linear;
       -moz-animation-timing-function: linear;
            animation-timing-function: linear;
    
    transform: rotateY(-226deg) rotateX(0deg) rotateZ(-70deg); 
}

.butterfly:hover {
    cursor: pointer;
    transform: rotateY(-255deg) rotateX(20deg) rotateZ(-15deg);
}

#butterflybody {
    position: absolute;
    z-index: 2002;
    transform: rotateY(90deg) translateX(0px) translateY(14px) translateZ(9px);
    transform-origin:  left left;   
    width: 6px;
    height: 25px;
    background-color: rgba(0, 0, 0, 0.8);
    overflow: visible;
}

#butterflyAntena {
    position: absolute;
    z-index: 2002;
    top: -23px;
    left: -7px;
    width: 20px;
    height: 20px;
    transform: rotateZ(45deg);
    border-bottom: 1px solid #333333;
    border-right: 1px solid #333333;
}

.rightWing {
    background-image: url('images/wing_01.png');
    transform: rotateY(-90deg) translateX(13px) translateY(-42px);
    transform-origin:  left left;   
    z-index: 2002;

    -webkit-animation-name: rightWing;
       -moz-animation-name: rightWing;
        -ms-animation-name: rightWing;
         -o-animation-name: rightWing;
            animation-name: rightWing;
}

.leftWing {
    background-image: url('images/wing_02.png');
    transform: rotateY(-90deg) translateX(-13px);
	transform-origin: center left;
    z-index: 2002;

    -webkit-animation-name: leftWing;
       -moz-animation-name: leftWing;
        -ms-animation-name: leftWing;
         -o-animation-name: leftWing;
            animation-name: leftWing;
}

.rightWing, .leftWing {
    width: 25px;
    height: 44px;
     
    -webkit-animation-duration: 3s;
       -moz-animation-duration: 3s;
        -ms-animation-duration: 3s;
         -o-animation-duration: 3s;
            animation-duration: 3s;     
     
    -webkit-animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
         -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;

    -webkit-transform-origin: 50% 50%;
       -moz-transform-origin: 50% 50%;
         -o-transform-origin: 50% 50%;
            transform-origin: 50% 50%;            

    -webkit-animation-timing-function: linear;
       -moz-animation-timing-function: linear;
            animation-timing-function: linear
}

@keyframes rightWing {

    0% {
        transform: rotateY(-90deg) translateX(13px) translateY(-42px);
    }

    2% {
        transform: rotateY(0deg) translateX(13px) translateY(-42px);
    }

    10% {
        transform: rotateY(-90deg) translateX(13px) translateY(-42px);
    }

    15% {
        transform: rotateY(0deg) translateX(13px) translateY(-42px);
    }

    20% {
        transform: rotateY(-90deg) translateX(13px) translateY(-42px);
    }

    25% {
        transform: rotateY(0deg) translateX(13px) translateY(-42px);
    }

    30% {
        transform: rotateY(-90deg) translateX(13px) translateY(-42px);
    }

    35% {
        transform: rotateY(0deg) translateX(13px) translateY(-42px);
    }

    40% {
        transform: rotateY(-90deg) translateX(13px) translateY(-42px);
    }

    60% {
        transform: rotateY(0deg) translateX(13px) translateY(-42px);
    }

    65% {
        transform: rotateY(-90deg) translateX(13px) translateY(-42px);
    }

    70% {
        transform: rotateY(0deg) translateX(13px) translateY(-42px);
    }

    75% {
        transform: rotateY(-90deg) translateX(13px) translateY(-42px);
    }

    80% {
        transform: rotateY(0deg) translateX(13px) translateY(-42px);
    }

    90% {
        transform: rotateY(-90deg) translateX(13px) translateY(-42px);
    }

    95% {
        transform: rotateY(0deg) translateX(13px) translateY(-42px);
    }

    100% {
        transform: rotateY(-90deg) translateX(13px) translateY(-42px);
    }
}

@keyframes leftWing {

    0% {
        transform: rotateY(-90deg) translateX(-13px);
    }

    2% {
        transform: rotateY(-180deg) translateX(-13px);
    }

    10% {
        transform: rotateY(-90deg) translateX(-13px);        
    }

    15% {
        transform: rotateY(-180deg) translateX(-13px);        
    }

    20% {
        transform: rotateY(-90deg) translateX(-13px);        
    }

    25% {
        transform: rotateY(-180deg) translateX(-13px);        
    }

    30% {
        transform: rotateY(-90deg) translateX(-13px);        
    }

    35% {
        transform: rotateY(-180deg) translateX(-13px);  
    }

    40% {
        transform: rotateY(-90deg) translateX(-13px);        
    }

    60% {
        transform: rotateY(-180deg) translateX(-13px);  
    }

    65% {
        transform: rotateY(-90deg) translateX(-13px);        
    }

    70% {
        transform: rotateY(-180deg) translateX(-13px);  
    }

    75% {
        transform: rotateY(-90deg) translateX(-13px);        
    }

    80% {
        transform: rotateY(-180deg) translateX(-13px);  
    }

    90% {
        transform: rotateY(-90deg) translateX(-13px);        
    }

    95% {
        transform: rotateY(-180deg) translateX(-13px);  
    }

    100% {
        transform: rotateY(-90deg) translateX(-13px);      
    }
}

@keyframes butterfly {

    0% {
        top: 55%;
        left: -30px;
        transform: rotateY(-226deg) rotateX(0deg) rotateZ(-70deg);
    }

    2% {
        top: 50%;
        left: 3%;
    }

    /* C01 */
    4% {
        top: 48%;
        left: 5%;
    }

    6% {
        top: 50%;
        left: 8%;
        transform: rotateY(-110deg) rotateX(0deg) rotateZ(-40deg);
    }

    8% {
        top: 55%;
        left: 15%;
    }

    /* C02 */
    12% {
        top: 60%;
        left: 20%;
    }

    13% {
        top: 62%;
        left: 23%;
        transform: rotateY(-240deg) rotateX(0deg) rotateZ(-100deg);
    }

    14% {
        top: 64%;
        left: 26%;
    }

    16% {
        top: 60%;
        left: 30%;
    }

    /* C03 */
    18% {
        top: 48%;
        left: 34%;
    }

    19% {
        top: 43%;
        left: 36%;
        transform: rotateY(-60deg) rotateX(0deg) rotateZ(-30deg); 
    }

    20% {
        top: 37%;
        left: 34%;
    }

    /* C04 */
    24% {
        top: 30%;
        left: 29%;
    }

    25% {
        top: 25%;
        left: 25%;
        transform: rotateY(-60deg) rotateX(0deg) rotateZ(-45deg);
    }

    26% {
        top: 31%;
        left: 21%;
    }

    /* C05 */
    28% {
        top: 35%;
        left: 18%;
    }

    30% {
        top: 55%;
        left: 15%;
        transform: rotateY(160deg) rotateX(0deg) rotateZ(-80deg); 
    }

    32% {
        top: 60%;
        left: 12%;
    }

    /* C05 */
    34% {
        top: 65%;
        left: 11%;
    }

    36% {
        top: 68%;
        left: 15%;
        transform: rotateY(200deg) rotateX(0deg) rotateZ(-80deg); 
    }

    38% {
        top: 71%;
        left: 20%;
    }

    /* Landing */
    40% {
        top: 68%;
        left: 30%;
        transform: rotateY(100deg) rotateX(0deg) rotateZ(-80deg); 
    }

    42% {
        top: 70%;
        left: 36%;
        transform: rotateY(-20deg) rotateX(0deg) rotateZ(-80deg); 
    }

    44% {
        top: 78%;
        left: 42%;
        transform: rotateY(-90deg) rotateX(0deg) rotateZ(-60deg);
    }

    58% {
        top: 78%;
        left: 42%;
        transform: rotateY(-90deg) rotateX(0deg) rotateZ(-60deg);
    }

    62% {
        top: 70%;
        left: 52%;
    }

    /* C05 */
    66% {
        top: 65%;
        left: 58%;
    }

    69% {
        top: 61%;
        left: 60%;
        transform: rotateY(-145deg) rotateX(0deg) rotateZ(-40deg);
    }

    72% {
        top: 57%;
        left: 62%;
    }

    /* C06 */
    66% {
        top: 52%;
        left: 65%;
    }

    69% {
        top: 47%;
        left: 68%;
        transform: rotateY(-235deg) rotateX(0deg) rotateZ(-80deg);
    }

    72% {
        top: 42%;
        left: 65%;
    }

    /* C07 */
    74% {
        top: 37%;
        left: 61%;
    }

    76% {
        top: 32%;
        left: 58%;
        transform: rotateY(-145deg) rotateX(0deg) rotateZ(-40deg);
    }

    78% {
        top: 27%;
        left: 63%;
    }

    80% {
        top: 20%;
        left: 62%;
        transform: rotateY(-20deg) rotateX(0deg) rotateZ(-70deg);
    }

    /* C07 */
    82% {
        top: 18%;
        left: 66%;
    }

    84% {
        top: 15%;
        left: 70%;
    }

    86% {
        top: 18%;
        left: 74%;
    }

    /* C08 */
    90% {
        top: 25%;
        left: 74%;
    }

    92% {
        top: 18%;
        left: 80%;
    }

    94% {
        top: 12%;
        left: 88%;
    }

    /* End: */
    97% {
        top: 5%;
        left: 105%;
    }

    98% {
        top: -60px;
        left: 110%;
    }

    99% {
        top: -60px;
        left: -55px;
    }

    100% {
        top: 55%;
        left: -55px;
        transform: rotateY(320deg) rotateX(0deg) rotateZ(-80deg); 
    }
}