.bee{-webkit-animation:hover 2s ease-in-out infinite;animation:hover 2s ease-in-out infinite}
.bee-body{position:relative;margin:136px 130px 38px;min-width:130px;background:#ffca31;height:130px;width:130px;border-radius:50%;background-size:130px 65px,cover,cover,cover;background-image:linear-gradient(to bottom,transparent 50%,#292929 50%),radial-gradient(circle at 51% 36%,#FFD764 47%,transparent 47%),radial-gradient(circle at 51% 53%,#FFD764 55%,transparent 55%),radial-gradient(circle at 60% 53%,#ffebb1 60%,transparent 60%);box-shadow:35px -105px 0 -44px #FFD764,-35px -105px 0 -44px #FFD764,38px -107px 0 -41px #ffebb1,-32px -107px 0 -41px #ffebb1,35px -105px 0 -38px #ffca31,-35px -105px 0 -38px #ffca31,3px -95px 0 -18px #FFD764,5px -100px 0 -15px #ffebb1,0 -95px 0 -10px #ffca31,-35px -183px 0 -57px #363636,35px -183px 0 -57px #363636,-33px -185px 0 -56px #505050,37px -185px 0 -56px #505050,-35px -184px 0 -54px #292929,35px -184px 0 -54px #292929}
.bee-body:after{position:absolute;content:"";background:linear-gradient(to bottom,transparent 50%,#363636 50%);height:130px;width:130px;right:0;bottom:0;background-size:130px 65px;border-radius:50%;-webkit-clip-path:ellipse(41% at 51% 48%);clip-path:ellipse(41% at 51% 48%)}
.bee-body:before{position:absolute;content:"";background:linear-gradient(to bottom,transparent 50%,#434343 50%);height:130px;width:130px;right:0;bottom:0;background-size:130px 65px;border-radius:50%;-webkit-clip-path:ellipse(41% at 61% 48%);clip-path:ellipse(41% at 61% 48%)}
.mouth{content:"";position:absolute;width:20px;height:20px;left:55px;bottom:128px;border-radius:50%;box-sizing:border-box;border-bottom:5px solid #363636}
.antenae{position:relative;z-index:-2;width:60px;height:60px;border-radius:50%;right:-75px;bottom:130px;border:8px solid #363636;box-sizing:border-box;border-style:hidden hidden hidden solid;transform:skewY(-20deg)}
.antenae:before{content:"";position:absolute;width:60px;height:60px;border-radius:50%;left:-87px;bottom:30px;border:8px solid #363636;box-sizing:border-box;border-style:hidden solid hidden hidden;transform:skewY(40deg)}
.antenae:after{transform:skewY(20deg);position:absolute;content:"";bottom:-213px;left:-33px;width:30px;height:30px;background:linear-gradient(to right,#292929 50%,#363636 50%);-webkit-clip-path:polygon(0 0,50% 100%,100% 0);clip-path:polygon(0 0,50% 100%,100% 0)}
.bee-left{-webkit-animation:flight-left .5s ease-out infinite;animation:flight-left .5s ease-out infinite;content:"";position:absolute;background-color:#F8F8FF;height:100px;width:150px;bottom:110px;right:100px;border-radius:30px 130px 0 130px;transform:skewY(20deg);z-index:-1;box-shadow:inset 30px 105px 0 -70px #FFF}
.bee-left:after{-webkit-animation:flight-little .5s ease-in-out infinite;animation:flight-little .5s ease-in-out infinite;content:"";position:absolute;width:100px;height:110px;top:70px;left:48px;background-color:#F0F0F0;border-radius:50%/50% 0 100% 50%;box-shadow:inset 10px 1px 0 0 #FFF,inset 30px 7px 0 0 #f6f6f6}
.bee-right{-webkit-animation:flight-right .5s ease-in-out infinite;animation:flight-right .5s ease-in-out infinite;content:"";position:absolute;background-color:#F8F8FF;height:100px;width:150px;bottom:110px;left:100px;border-radius:30px 130px 0 130px;border-radius:130px 30px 130px 0;transform:skewY(-20deg);z-index:-1;box-shadow:inset 30px 105px 0 -70px #FFF}
.bee-right:after{-webkit-animation:flight-little .5s ease-in-out infinite;animation:flight-little .5s ease-in-out infinite;content:"";position:absolute;width:100px;height:110px;top:70px;right:48px;background-color:#F0F0F0;border-radius:50%/0 50% 50% 100%;box-shadow:inset -10px 1px 0 0 #FFF,inset -30px 7px 0 0 #f6f6f6}
.blink{position:relative}
.blink:before{background-image:radial-gradient(circle at 71% 38%,#fff 8%,transparent 8%),radial-gradient(circle at 65% 50%,#363636 16%,transparent 16%),radial-gradient(circle at 69% 47%,#434343 19%,transparent 19%),radial-gradient(circle at 65% 50%,#292929 25%,transparent 25%),radial-gradient(ellipse at 50% 55%,#F8F8FF 50%,transparent 50%),radial-gradient(circle at 70% 50%,#FFF 65%,transparent 65%);left:2px}
.blink:before,.blink:after{-webkit-clip-path:ellipse(50% 20% at 50% 50%);clip-path:ellipse(50% 20% at 50% 50%);content:"";position:absolute;height:55px;width:55px;border-radius:50%;background-color:#F0F0F0;top:-67px;-webkit-animation:blink 10s linear infinite;animation:blink 10s linear infinite}
.blink:after{background-image:radial-gradient(circle at 41% 38%,#fff 8%,transparent 8%),radial-gradient(circle at 35% 50%,#363636 16%,transparent 16%),radial-gradient(circle at 39% 47%,#434343 19%,transparent 19%),radial-gradient(circle at 35% 50%,#292929 25%,transparent 25%),radial-gradient(ellipse at 50% 55%,#F8F8FF 50%,transparent 50%),radial-gradient(circle at 70% 50%,#FFF 65%,transparent 65%);left:73px}
.wrapper{display:flex;flex-direction:column;align-items:center}
.shadow{height:45px;width:170px;border-radius:50%;background-color:#e3e3e1;-webkit-animation:shadow 2s ease-in-out infinite;animation:shadow 2s ease-in-out infinite}
@-webkit-keyframes blink {
0%{-webkit-clip-path:ellipse(50% 50% at 50% 50%);clip-path:ellipse(50% 50% at 50% 50%)}
9%{-webkit-clip-path:ellipse(50% 50% at 50% 50%);clip-path:ellipse(50% 50% at 50% 50%)}
10%{-webkit-clip-path:ellipse(50% 5% at 50% 50%);clip-path:ellipse(50% 5% at 50% 50%)}
11%{-webkit-clip-path:ellipse(50% 50% at 50% 50%);clip-path:ellipse(50% 50% at 50% 50%)}
30%{-webkit-clip-path:ellipse(50% 50% at 50% 50%);clip-path:ellipse(50% 50% at 50% 50%)}
31%{-webkit-clip-path:ellipse(50% 5% at 50% 50%);clip-path:ellipse(50% 5% at 50% 50%)}
32%{-webkit-clip-path:ellipse(50% 50% at 50% 50%);clip-path:ellipse(50% 50% at 50% 50%)}
33%{-webkit-clip-path:ellipse(50% 50% at 50% 50%);clip-path:ellipse(50% 50% at 50% 50%)}
34%{-webkit-clip-path:ellipse(50% 5% at 50% 50%);clip-path:ellipse(50% 5% at 50% 50%)}
35%{-webkit-clip-path:ellipse(50% 50% at 50% 50%);clip-path:ellipse(50% 50% at 50% 50%)}
50%{-webkit-clip-path:ellipse(50% 50% at 50% 50%);clip-path:ellipse(50% 50% at 50% 50%)}
60%{-webkit-clip-path:ellipse(50% 20% at 50% 50%);clip-path:ellipse(50% 20% at 50% 50%)}
61%{-webkit-clip-path:ellipse(50% 20% at 50% 50%);clip-path:ellipse(50% 20% at 50% 50%)}
69%{-webkit-clip-path:ellipse(50% 20% at 50% 50%);clip-path:ellipse(50% 20% at 50% 50%)}
70%{-webkit-clip-path:ellipse(50% 50% at 50% 50%);clip-path:ellipse(50% 50% at 50% 50%)}
79%{-webkit-clip-path:ellipse(50% 50% at 50% 50%);clip-path:ellipse(50% 50% at 50% 50%)}
80%{-webkit-clip-path:ellipse(50% 5% at 50% 50%);clip-path:ellipse(50% 5% at 50% 50%)}
81%{-webkit-clip-path:ellipse(50% 50% at 50% 50%);clip-path:ellipse(50% 50% at 50% 50%)}
100%{-webkit-clip-path:ellipse(50% 50% at 50% 50%);clip-path:ellipse(50% 50% at 50% 50%)}
}
@-webkit-keyframes hover {
0%{transform:translateY(0px)}
50%{transform:translateY(-15px)}
100%{transform:translateY(0px)}
}
@keyframes hover {
0%{transform:translateY(0px)}
50%{transform:translateY(-15px)}
100%{transform:translateY(0px)}
}
@-webkit-keyframes shadow {
0%{width:170px}
50%{width:180px}
100%{width:170px}
}
@keyframes shadow {
0%{width:170px}
50%{width:180px}
100%{width:170px}
}
@-webkit-keyframes flight-left {
0%{width:150px;transform:skewY(20deg)}
50%{width:125px;transform:skewY(25deg)}
100%{width:150px;transform:skewY(20deg)}
}
@keyframes flight-left {
0%{width:150px;transform:skewY(20deg)}
50%{width:125px;transform:skewY(25deg)}
100%{width:150px;transform:skewY(20deg)}
}
@-webkit-keyframes flight-right {
0%{width:150px;transform:skewY(-20deg)}
50%{width:125px;transform:skewY(-25deg)}
100%{width:150px;transform:skewY(-20deg)}
}
@keyframes flight-right {
0%{width:150px;transform:skewY(-20deg)}
50%{width:125px;transform:skewY(-25deg)}
100%{width:150px;transform:skewY(-20deg)}
}
@-webkit-keyframes flight-little {
0%{height:110px}
50%{height:100px}
100%{height:110px}
}
@keyframes flight-little {
0%{height:110px}
50%{height:100px}
100%{height:110px}
}