body, html{width:100%;height:100%;margin:0;}
body{background-color:#86CDEE;overflow:hidden}
.minion{width:488px;height:488px;box-shadow:1px 1px 3px 0px rgba(0,0,0, .5);border-radius:111px;
position:absolute;top:50%;left:50%;margin-top:-225px;margin-left:-244px;}
.minion::before{content: '';position:absolute;width:488px;height:595px;left:172px;top:117px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
background:linear-gradient(to right, rgba(0,0,0, .15), rgba(0,0,0, .0));
background:-webkit-linear-gradient(left, rgba(0,0,0, .15), rgba(0,0,0, .0));}

.hair,.hair1,.hair2,.hair:before,.hair1:before,.hair2:before,.hair:after,.hair1:after,.hair2:after{position:absolute;bottom:0;}
.hair:before,.hair1:before,.hair2:before,.hair:after,.hair1:after,.hair2:after{content:''}

.hair{left:138px;bottom:auto;top:26px;z-index:1}
.hair::before{left:10px;width:92px;height:52px;border-radius:0px 60px 0px 0;box-shadow:inset -6px 0px 0 -4px #000}
.hair::after{left:106px;width:60px;height:103px;border-radius:69px 0 0px 0;box-shadow:inset 6px 0px 0 -4px #000}

.hair1{left:15px;width:91px;height:81px;border-radius:0px 70px 0 0;box-shadow:inset -6px 0px 0 -5px #000}
.hair1::before{left:27px;width:63px;height:96px;border-radius:0px 70px 0px 0;box-shadow:inset -6px 0px 0 -4px #000}
.hair1::after{left:18px;width:70px;height:82px;border-radius:0px 100px 0px 0;box-shadow:inset -6px 0px 0 -4px #000}

.hair2, .hair2::before, .hair2::after{width:100px;border-radius:200px 0 0 0;box-shadow:inset 6px 0 0 -4px #000}
.hair2{left:108px;height:98px}
.hair2::before{left:0;height:117px}
.hair2::after{left:0;height:63px}


.body{width:488px;height:488px;background:#DFC047;border-radius:111px;z-index:0;top:0;position:absolute;overflow:hidden;
box-shadow:inset 0 1px 0 rgba(252,255,255, .3);}
.body::before{content:'';width:187px;height:111px;border-radius:100%;position:absolute;left:153px;top:294px;
box-shadow:0 -15px 0 -12px #000;
transform:rotate(4deg);
-webkit-transform:rotate(4deg);
-ms-transform:rotate(4deg);}
.body::after{content:'';width:120%;height:319px;border-radius:64%;position:absolute;bottom:-196px;left:-10%;background:#5482AA;}

.monocle{width:202px;height:202px;position:absolute;top:47px;left:143px;border-radius:100%;
background:linear-gradient(to bottom right, #A3A29F, #828282);
background:-webkit-linear-gradient(top left, #A3A29F, #828282);}
.monocle::before,
.monocle::after{content:'';z-index:-1;position:absolute;display:block;height:0;width:30px;top:31px;
border-bottom:144px solid #2A2A2A;border-left:5px solid transparent;border-right:5px solid transparent;left:-91px;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);}
.monocle::after{left:auto;right:-91px;
transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);}

.eye{width:160px;height:160px;background:#F3DE90;overflow:hidden;position:absolute;left:21px;top:21px;border-radius:100%}
.eye::before{content:'';width:160px;height:137px;border-radius:100%;background:#F3F0E7;position:absolute;top:7px;
animation:closeEye 10s infinite linear;
-webkit-animation:closeEye 10s infinite linear}
.eye::after{content:'';width:46px;height:46px;background:#624123;border-radius:100%;position:absolute;top:70px;left:61px;
animation:moveEye 10s infinite linear;
-webkit-animation:moveEye 10s infinite linear}


.banana{width:200px;height:200px;background:#FDBC1A;border-radius:100%;box-shadow: inset -16px 0 0 #E9AE22;position:absolute;
top:-200px;left:40px;
transform:rotate(21deg);
-webkit-transform:rotate(21deg);
-ms-transform:rotate(21deg);
animation:hideBanana 10s infinite linear;
-webkit-animation:hideBanana 10s infinite linear;}
.banana::before{content: '';width:400px;height:400px;border-radius:100%;position:relative;top:-152px;left:-243px;display:block;
background:#86CDEE;box-shadow:0 -5px 0 0px #968153}
.banana::after{content: '';display:block;width:15px;height:14px;border-radius:0;background:#7C6229;position:absolute;top:14px;
left:149px;box-shadow: inset 6px 0 0 0 rgba(255,255,255, .2);
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);}


/*Eyelid Animation*/
@-webkit-keyframes closeEye{
	0% {height:137px;top:7px;}
	20%{height:60px;top:60px;}
	39%{height:60px;top:60px;}
	40%{height:137px;top:7px;}
}
@keyframes closeEye{
	0% {height:137px;top:7px;}
	20%{height:60px;top:60px;}
	39%{height:60px;top:60px;}
	40%{height:137px;top:7px;}
}
/*Pupil Animation*/
@-webkit-keyframes moveEye{
	39%{top:70px;left:61px;}
	40%{top:34px;left:81px;}
	50%{top:34px;left:81px;}
	51%{top:34px;left:21px;}
	60%{top:34px;left:21px;}
	61%{top:70px;left:61px;}
}
@keyframes moveEye{
	39%{top:70px;left:61px;}
	40%{top:34px;left:81px;}
	50%{top:34px;left:81px;}
	51%{top:34px;left:21px;}
	60%{top:34px;left:21px;}
	61%{top:70px;left:61px;}
}
/*Do the Banana Dance*/
@-webkit-keyframes hideBanana{
	20%{top:-200px;left:40px;margin-left:0px;}
	40%{top:20px;left:40px;}
	50%{left:40px;margin-left:0px;}
	51%{left:100%;margin-left:-240px;}
	60%{top:20px;left:100%;margin-left:-240px;}
	61%{top:-200px;left:100%;margin-left:-240px;}
}
@keyframes hideBanana{
	20%{top:-200px;left:40px;margin-left:0px;}
	40%{top:20px;left:40px;}
	50%{left:40px;margin-left:0px;}
	51%{left:100%;margin-left:-240px;}
	60%{top:20px;left:100%;margin-left:-240px;}
	61%{top:-200px;left:100%;margin-left:-240px;}
}