.butterfly-movement{
      font-size: 0.23vw;
      position: absolute;
      left: -90vw;
      top: 0;
      bottom: 0;
      height: 100vw;
      width: 140vw;
      margin: auto;
      display: flex;
      align-items: center;
      /* transform: rotate(-60deg); */
      pointer-events: none;
      z-index: 999;
    }

    .butterfly-perspective{
      perspective: 100vw;
    }

	.butterfly-wrapper {
      transform-style: preserve-3d;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      /* top: 0; */
      right: 0;
      width: 0;
      /* bottom: 0; */
      transform: rotateY(0deg);
    }

    .butterfly {
      position: relative;
      width: 4em;
      height: 50em;
      transform-style: preserve-3d;
      z-index: 2;
    }

    .wing-wrapper {
      position: absolute;
      width: 50em;
      height: 100em;
      top: -25em;
      transform-style: preserve-3d;
      backface-visibility: hidden;
    }

    .wing-wrapper.left {
      right: 100%;
      transform-origin: right center;
      animation: flapLeft 4s ease-in-out infinite;
    }

    .wing-wrapper.right {
      left: 100%;
      transform-origin: left center;
      animation: flapRight 4s ease-in-out infinite ;
    }

    

    .wing-wrapper.left .wing-face.front, .wing-wrapper.right .wing-face.back::after {
      transform:scaleX(-1);
    }

    .wing-face::after{
      content:"";
      background-image: url(../img/bf-wing.png);
      background-size: contain;
      background-repeat: no-repeat;
      display:block;
      width:100%;
      height:100%;
    }

    .wing-face.back {
      transform: rotateY(180deg);
    }

    .wing-wrapper.left .wing-face {
      border-radius: 100% 0 0 100%;
    }

    .body-wrapper {
      position: absolute;
      top: 0;
      left: -15em;
      right: -15em;
      width: 30em;
      height: 50em;
      margin: auto;
      transform-style: preserve-3d;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .body-face {
      position: absolute;
      width: 20em;
      height: 50em;
      background: url(../img/bf-body.png);
      backface-visibility: hidden;
      background-size: contain;
      background-repeat: no-repeat;
    }

    .body-face.back {
      transform: rotateY(180deg);
    }

	.wing-face {
      position: absolute;
      width: 50em;
      height: 100em;
      backface-visibility: hidden;
    }

	body.flyX .wing-wrapper.left{
      animation: flyflapLeft  ease-in-out infinite;filter:blur(1em);
    }

    body.flyX .wing-wrapper.right{
      animation: flyflapRight  ease-in-out infinite;filter:blur(1em);
    }

	body.fly .butterfly-movement{animation: flyrotate 2.5s forwards ease-in-out }
	body.fly .butterfly-wrapper{animation: butterflyrotate 0.7s forwards ease-in-out}
	body.flyX .butterfly{animation: flybutterfly  ease-in-out infinite}
	body.flyX .butterfly, body.flyX .wing-wrapper.right, body.flyX .wing-wrapper.left{animation-duration:0.3s}  
	
	body.fly1 .butterfly-movement{animation: move_left_right 2.5s forwards linear;width:0;height:0;right:auto;left:auto;bottom:auto;top:auto;margin: 0;}
	body.fly1 .butterfly-wrapper{transform: rotateY(-90deg) rotateX(60deg);}

	body.fly2 .butterfly-movement{animation: move_right_left 2.5s forwards linear;width:0;height:0;right:auto;left:auto;bottom:auto;top:auto;margin: 0;}
	body.fly2 .butterfly-wrapper{transform:rotateY(90deg) rotateX(60deg)}

	body.fly3 .butterfly-movement{animation: move_right_left3 1.5s forwards linear; width:0;height:0;right:auto;left:auto;bottom:auto;top:auto;}
	body.fly3 .butterfly-wrapper{transform: rotateY(90deg) rotateX(60deg);animation: butterflyrotate3 1.5s ease-in-out forwards;}
	body.fly3 .wing-wrapper{transition:0.5s all}
	body.fly3:not(flyX) .wing-wrapper{animation-delay: -0.6s;} 
	
	body.fly4 .butterfly-movement{animation: move_right_left4 1.5s forwards linear; width:0;height:0;right:auto;left:auto;bottom:auto;top:auto;}
	body.fly4 .butterfly-wrapper{transform:rotateY(90deg) rotateX(60deg);animation: butterflyrotate4 1.5s ease-in-out forwards;}

	body.fly1 .wing-face::after, body.fly2 .wing-face::after{filter: none;}

	body.flystill1 .butterfly-movement{width:0;height:0;right:auto;left:50%;bottom:auto;top:auto;}
	body.flystill1 .butterfly-wrapper{transform: rotateY(90deg) rotateX(60deg);animation: butterflyrotate3 1.5s ease-in-out forwards;}

	body.flystill2 .butterfly-movement{width:0;height:0;right:auto;left:50%;bottom:auto;top:auto;}
	body.flystill2 .butterfly-wrapper{transform:rotateY(90deg) rotateX(60deg);animation: butterflyrotate4 1.5s ease-in-out forwards;}
	
	
	.b-shadow {position: absolute;z-index: 1;filter: blur(0.6em);transform-style:preserve-3d;top: 0;right: 4em;width: 200em;left: -100em;display: flex;right: -100em;margin: auto;align-items: center;justify-content: center;height: 170em;top: -60em;}
	.the-butterfly {position: relative;z-index: 99;transform-style:preserve-3d;transform: translateZ(5em);}
	.the-butterfly .wing-wrapper{z-index:99}
	.b-shadow.shadow2{height: 50em;width: 200em;left: -100em;display: flex;right: -100em;margin: auto;align-items: center;justify-content: center;height: 170em;top: -13em;mask-image: radial-gradient(circle at top, transparent 45% , white 45%);filter: blur(2em);position: absolute;}
	.b-shadow .butterfly {z-index:0;filter: brightness(0);top: 9em;/* font-size: 0.9em; */transition:0.5s all}
	.b-shadow.shadow2 .butterfly {filter: brightness(0);margin-top: 0;font-size: 0.9em;transition:0.5s all}

	.b-shadow .butterfly .body-wrapper{display:none}

	.b-shadow .wing-wrapper.left {animation: flapLefts 4s ease-in-out infinite;}
	.b-shadow .wing-wrapper.right {animation: flapRights 4s ease-in-out infinite;}
	
	.b-shadow.shadow2 .wing-wrapper.left {animation: flapLefts2 4s ease-in-out infinite;}
	.b-shadow.shadow2 .wing-wrapper.right {animation: flapRights2 4s ease-in-out infinite;}

	body.fly .b-shadow .butterfly{opacity:0}
	body.fly1 .b-shadow{display:none}
	body.fly2 .b-shadow{display:none}
	body.fly3 .b-shadow{display:none}
	body.fly4 .b-shadow{display:none}

	.eyes{position:absolute;left:0;right:0;top:50%;transform: translateY(-161%);height: 17.6vw;object-fit: contain;/* opacity: 0; */animation: openEyes 12s ease-in-out infinite;/* min-height: 9.4dvh; */width: auto;left: -150vw;right: -150vw;margin: auto;width: 300vw;max-width: none;/* box-shadow: 0 0 0 10px black; */}

	@keyframes openEyes {
		  0%   { opacity:0 }
		  20%   { opacity:0 }
		  23% {opacity:1}
		  55% {opacity:1}
		  60%   { opacity:0 }
		  100%   { opacity:0 }
	}

    @keyframes flapLeft {
      0%   { transform: rotateY(0deg); }
      25% {transform: rotateY(60deg);;filter:brightness(0.5) contrast(1.5);}
      50%   { transform: rotateY(0deg);filter:brightness(1) contrast(1); }
	  75% {transform: rotateY(20deg);filter:brightness(0.9); contrast(1.1);}
      100%   { transform: rotateY(0deg);filter:brightness(1) contrast(1); }
    }

    @keyframes flapRight {
      0%   { transform: rotateY(0deg); }
      25% {transform: rotateY(-60deg);filter:brightness(0.5); contrast(1.5);}
      50%   { transform: rotateY(0deg);filter:brightness(1) contrast(1);  }
	  75% {transform: rotateY(-20deg);filter:brightness(0.9); contrast(1.1);}
      100%   { transform: rotateY(0deg);filter:brightness(1) contrast(1); }
    }

	@keyframes flapLefts {
      0%   { transform: rotateY(0deg); }
      25% {transform: rotateY(60deg) translateX(0em) translateY(15em);filter:blur(2em)}
      50%   { transform: rotateY(0deg);filter:brightness(1) contrast(1); }
	  75% {transform: rotateY(20deg) translateX(0em) translateY(5em);filter:blur(1em)}
      100%   { transform: rotateY(0deg);filter:brightness(1) contrast(1); }
    }

    @keyframes flapRights {
      0%   { transform: rotateY(0deg); }
      25% {transform: rotateY(-60deg) translateX(0em) translateY(15em);filter:blur(2em);}
      50%   { transform: rotateY(0deg);filter:none; }
	  75% {transform: rotateY(-20deg) translateX(0em) translateY(5em);filter:blur(1em)}
      100%   { transform: rotateY(0deg); }
    }

	@keyframes flapLefts2 {
      0%   { transform: rotateY(0deg); }
      25% {transform: rotateY(60deg) translateX(5em) translateY(15em);filter:blur(2em);}
      50%   { transform: rotateY(0deg);filter:none; }
	  75% {transform: rotateY(20deg) translateX(2em) translateY(5em);filter:blur(1em);}
      100%   { transform: rotateY(0deg); }
    }

    @keyframes flapRights2 {
      0%   { transform: rotateY(0deg); }
      25% {transform: rotateY(-60deg) translateX(-5em) translateY(15em);filter:blur(2em);}
      50%   { transform: rotateY(0deg);filter:none; }
	  75% {transform: rotateY(-20deg) translateX(-2em) translateY(5em);filter:blur(1em);}
      100%   { transform: rotateY(0deg); }
    }


     @keyframes flyflapLeft {
      0%   { transform: rotateY(-20deg); }
      30% {transform: rotateY(80deg);filter:blur(0.5em) brightness(0.3); contrast(1.5);}
      100%   { transform: rotateY(-20deg); }
    }

    @keyframes flyflapRight {
      0%   { transform: rotateY(20deg); }
      30% {transform: rotateY(-80deg);filter:blur(0.5em) brightness(0.3); contrast(1.5);}
      100%   { transform: rotateY(20deg);filter:none; }
    }

	@keyframes flybutterfly {
      0%   { transform: none; }
      70% {transform: translateZ(-10em);}
      100%   { transform: none; }
    }

	@keyframes flyrotate{
		0%{}
		99%{transform:rotate(-179deg)}
		100%{display:none}
	}

	@keyframes butterflyrotate{
		0%{}
		100%{transform:rotateY(90deg);}
	}

	@keyframes butterflyrotate3{
		0%{transform:rotateY(90deg) rotateX(60deg) scale(1);}
		50%{transform:rotateY(90deg) rotateX(60deg) scale(1);}
		100%{transform:rotateY(20deg) rotateX(20deg) scale(0.7);}
	}

	@keyframes butterflyrotate4{		
		0%{transform:rotateY(20deg) rotateX(60deg) scale(0.7);}
		70%{transform:rotateY(90deg) rotateX(60deg) scale(1);}
		100%{transform:rotateY(90deg) rotateX(60deg) scale(1);}
	}

	@keyframes shadowmove{
		0%{filter: drop-shadow(0em 15em 1em black);}
		100%{filter: drop-shadow(150em 0em 2em rgba(0,0,0,0.0)) }
	}

	@keyframes move_left_right{
		0%{left:-100em;top:400em;}
		99%{left:calc(100vw + 100em);top:50em }
		100%{display:none}

	}

	@keyframes move_right_left{
		0%{right:-100em;top:400em;}
		99%{right:calc(100vw + 100em);top:50em }
		100%{display:none }
	}

	@keyframes move_right_left3{
		0%{right:-100em;bottom:200px;}
		100%{right:calc(80vw);bottom:75px }
	}

	

	@keyframes move_right_left4{
		0%{right:calc(80vw);bottom:75px}
		100%{right:calc(100vw + 100em);bottom:200px}
	}

	

	@media(min-width:993px){
		.butterfly-movement{font-size: 0.2vh;left: -120vh;top: 0;bottom: 0;height: 120vh;width: 120vh;margin-left: calc(50vw - 200px);}

		body.fly #site > .butterfly-movement{left:calc(-120vh + 400px);} 
		
		@keyframes move_right_left3{
			0%{right:50vw;top:-100px;}
			100%{right:calc(100vw - 400px);top:300px }
		}

		@keyframes move_right_left4{
			0%{right:calc(100vw - 400px);top:300px}
			100%{right:calc(100vw + 100em);top:0px}
		}

		@keyframes flyrotate{
			0%{}
			99%{transform:rotate(-90deg)}
			100%{display:none}
		}
	}


@supports (-webkit-touch-callout: none) {
	body:not(.fly):not(.fly1):not(.fly2) .wing-wrapper .wing-face::after{     
      animation: flapShade 4s ease-in-out infinite;
    }
	
    body:not(.fly):not(.fly1):not(.fly2) .b-shadow:not(.shadow2){animation:shadowAppear 2s forwards ease-in-out}
    
    @keyframes shadowAppear{
    	0%{opacity:0}
    	99%{opacity:1}
    	100%{opacity:1}
    }

    @keyframes flapShade {
      0%   { filter:none }
      25% {filter:brightness(0.5); contrast(1.5);}
      50%   { filter:none }
	  75% {filter:brightness(0.9); contrast(1.1);}
      100%   { filter:none }
    }


	@keyframes flapLeft {
      0%   { transform: rotateY(0deg); }
      25% {transform: rotateY(60deg);filter:none}
      50%   { transform: rotateY(0deg);filter:none }
	  75% {transform: rotateY(20deg);filter:none}
      100%   { transform: rotateY(0deg);filter:none }
    }

    @keyframes flapRight {
      0%   { transform: rotateY(0deg); }
      25% {transform: rotateY(-60deg);filter:none}
      50%   { transform: rotateY(0deg);filter:none  }
	  75% {transform: rotateY(-20deg);filter:none}
      100%   { transform: rotateY(0deg);filter:none }
    }

}


body.pauseAll #site > .butterfly-movement{display:none}