/* logo animation */
#wing3{
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
    animation: logoAnim .25s ease forwards .25s; 
}
#wing2{
    stroke-dasharray: 372;
    stroke-dashoffset: 372;
    animation: logoAnim .25s ease forwards .5s; 
}
#wing1{
    stroke-dasharray: 371;
    stroke-dashoffset: 371;
    animation: logoAnim .25s ease forwards .75s; 
}
#wing3_2{
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
    animation: logoAnim .25s ease forwards 1s; 
}
#wing2_2{
    stroke-dasharray: 374;
    stroke-dashoffset: 374;
    animation: logoAnim .25s ease forwards 1.25s; 
}
#wing1_2{
    stroke-dasharray: 371;
    stroke-dashoffset: 371;
    animation: logoAnim .25s ease forwards 1.5s; 
}
#crown{
    stroke-dasharray: 393;
    stroke-dashoffset: 393;
    animation: logoAnim 0.25s ease forwards 1.75s; 
}
#head{
    stroke-dasharray: 497;
    stroke-dashoffset: 497;
    animation: logoAnim .25s ease forwards 2s; 
}
#rEye{
    stroke-dasharray: 145;
    stroke-dashoffset: 145;
    animation-name: logoAnim, wink;
    animation-duration: .25s, 1s;
    animation-delay: 2.5s, 5s;
    animation-fill-mode: forwards, forwards;
    transform-origin: 50% 50%;
}

@keyframes wink {
    0% {
        transform: rotateX(0deg);
    }

    50% {
        transform: rotateX(90deg);
      }       
    100% {
        transform: rotateX(0deg);
    }
  }
  @keyframes spin360 {
    to {
        transform: rotateY(360deg);
    }
  }
#logo{
    animation-name: spin360;
    animation-duration: 1s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
    transform-origin: 50% 50%;
}
#lEye{
    stroke-dasharray: 145;
    stroke-dashoffset: 145;
    animation: logoAnim .25s ease forwards 3s; 
}
@keyframes logoAnim{
    to {
        stroke-dashoffset: 0;
    }
}



/* cat animation */
#catswing{
    position:relative;
    /* animation-name: swing; */
    animation-duration: 8s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function:linear;
    transform-origin: 50% 50%;
    box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12)
;
}
@keyframes swing {
    0% {
        transform: skew(0deg,0deg);
        
    }
    12.5% {
        transform: skew(-5deg,-5deg);
    }
    25% {
        transform: skew(-7deg,0deg);
    }
    37.5% {
        transform: skew(-5deg,5deg);
    }
    50% {
        transform: skew(0deg,7deg);
      }  
    62.5% {
        transform: skew(5deg,5deg);
    }     
    75% {
        transform: skew(7deg,0deg);
    }
    87.5% {
        transform: skew(5deg,-5deg);
    }  
    100% {
        transform: skew(0deg,0deg);
    }
  }


#head2{
    stroke-dasharray: 1864;
    stroke-dashoffset: 1864;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ;
}
#wisk1{
    stroke-dasharray: 116.5;
    stroke-dashoffset: 116.5;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 

}
#wisk2{
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 

}
#wisk3{
    stroke-dasharray: 197;
    stroke-dashoffset: 197;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 

}
#wisk4{
    stroke-dasharray: 298;
    stroke-dashoffset: 298;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s; 

}
#wisk5{
    stroke-dasharray: 211;
    stroke-dashoffset: 211;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 

}
#wisk6{
    stroke-dasharray: 421;
    stroke-dashoffset: 421;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 

}
#wisk7{
    stroke-dasharray: 575;
    stroke-dashoffset: 575;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 

}
#wisk8{
    stroke-dasharray: 503.7;
    stroke-dashoffset: 503.7;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 

}
#wisk9{
    stroke-dasharray: 119;
    stroke-dashoffset: 119;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 

}
#wisk10{
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 

}
#wisk11{
    stroke-dasharray: 226.7;
    stroke-dashoffset: 226.7;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 

}
#wiskfat{
    stroke-dasharray: 384;
    stroke-dashoffset: 384;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 

}
#eye1{
    stroke-dasharray: 49.3;
    stroke-dashoffset: 49.3;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 

}
#eye2{
    stroke-dasharray: 214;
    stroke-dashoffset: 214;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 

}


/* prettyGirl animation */
#prettyGirlSwing{
    position:relative;
    /* animation-name: swing; */
    animation-duration: 8s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function:linear;
    transform-origin: 50% 50%;
    box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12)
;
}
#earRing1{
    stroke-dasharray: 226;
    stroke-dashoffset: 226;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 
}
#earRing2{
    stroke-dasharray: 105;
    stroke-dashoffset: 105;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 
}
#mouth{
    stroke-dasharray: 263;
    stroke-dashoffset: 263;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 
}
#nose{
    stroke-dasharray: 98.4;
    stroke-dashoffset: 98.4;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 
}
#nose1{
    stroke-dasharray: 191;
    stroke-dashoffset: 191;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 
}
#rightPuple{
    stroke-dasharray: 17;
    stroke-dashoffset: 17;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 
}
#rightEye{
    stroke-dasharray: 707;
    stroke-dashoffset: 707;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 
}
#leftPuple{
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 
}
#leftEye{
    stroke-dasharray: 433;
    stroke-dashoffset: 433;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 
}
#rightPuple{
    stroke-dasharray: 17;
    stroke-dashoffset: 17;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 
}
#face{
    stroke-dasharray: 1513;
    stroke-dashoffset: 1513;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 
}
#hair{
    stroke-dasharray: 1505;
    stroke-dashoffset: 1505;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 
}
#hair1{
    stroke-dasharray: 211;
    stroke-dashoffset: 211;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 
}
#hair2{
    stroke-dasharray: 778;
    stroke-dashoffset: 778;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 
}
#hair3{
    stroke-dasharray: 363;
    stroke-dashoffset: 363;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 
}
#hair4{
    stroke-dasharray: 789;
    stroke-dashoffset: 789;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 
}
#hair5{
    stroke-dasharray: 490;
    stroke-dashoffset: 490;
    animation-direction: alternate;
    animation: logoAnim 8s linear forwards infinite 0.7s ; 
}