.ren {
    position:absolute;
}

#man {
    bottom:16px; right:140px;
    height:180px;
    width:100px;
    z-index:9999;
    position:fixed;
    cursor:move;
    -webkit-transform-origin:50% 100%;
    -webkit-animation:man 4s ease-in-out infinite;
    -webkit-animation-play-state:running;
    transform-origin:50% 100%;
    animation:man 4s ease-in-out infinite;
    animation-play-state:running;
}
@-webkit-keyframes man {
    from {-webkit-transform:rotateZ(0deg);}
    25%  {-webkit-transform:rotateZ(10deg);}
    50%  {-webkit-transform:rotateZ(-10deg);}
    75%  {-webkit-transform:rotateZ(10deg);}
    to   {-webkit-transform:rotateZ(0deg);}             
}
@keyframes man {
    from {transform:rotateZ(0deg);}
    25%  {transform:rotateZ(10deg);}
    50%  {transform:rotateZ(-10deg);}
    75%  {transform:rotateZ(10deg);}
    to   {transform:rotateZ(0deg);}             
}
#man div {  
    border-radius:50%;
}
#man #body {
    box-shadow:0 0 3px #000;
    top:40px;
    left:48px;
    height:70px;
    width:10px;
    background:rgba(0,0,0,.80);
    -webkit-animation:body 7s ease-in-out infinite;
    -webkit-animation-play-state:running;
    animation:body 7s ease-in-out infinite;
    animation-play-state:running;
}
@-webkit-keyframes body {
    from {left:48px;}
    25%  {left:-42px;}
    75%  {left:138px;}
    to   {left:48px;}
}
@keyframes body {
    from {left:48px;}
    25%  {left:-42px;}
    75%  {left:138px;}
    to   {left:48px;}
}
#man #head {
    box-shadow:0 0 3px #000;
    height:40px;
    width:40px;
    top:-39px;
    left:-15px;
    overflow:hidden;
    background:rgba(0,0,0,.80);
    -webkit-animation:head 4s ease-in-out infinite;
    -webkit-transform-origin:50% 100%;
    -webkit-animation-play-state:running;
    animation:head 4s ease-in-out infinite;
    transform-origin:50% 100%;
    animation-play-state:running;
}
@-webkit-keyframes head {
    from {-webkit-transform:rotateZ(0deg);}
    25%  {-webkit-transform:rotateZ(20deg);}    
    75%  {-webkit-transform:rotateZ(-20deg);}   
    to   {-webkit-transform:rotateZ(0deg);}             
}
@keyframes head {
    from {transform:rotateZ(0deg);}
    25%  {transform:rotateZ(20deg);}    
    75%  {transform:rotateZ(-20deg);}   
    to   {transform:rotateZ(0deg);}             
}
#man #head #face {
    overflow:hidden;
    border-radius:50%;
    height:100%;
    width:100%;
    -webkit-animation:face 3s ease-in-out infinite;
    -webkit-animation-play-state:running;
    animation:face 3s ease-in-out infinite;
    animation-play-state:running;
}
@-webkit-keyframes face {
    from {-webkit-transform:rotateZ(0deg);}
    25%  {-webkit-transform:rotateZ(20deg);}
    50%  {-webkit-transform:rotateZ(0deg);}
    75%  {-webkit-transform:rotateZ(-20deg);}
    to   {-webkit-transform:rotateZ(0deg);} 
}
@keyframes face {
    from {transform:rotateZ(0deg);}
    25%  {transform:rotateZ(20deg);}
    50%  {transform:rotateZ(0deg);}
    75%  {transform:rotateZ(-20deg);}
    to   {transform:rotateZ(0deg);} 
}
#man #leg {
    box-shadow:0 0 3px #000;
    top:95%;
    height:40px;
    width:5px;
    background:rgba(0,0,0,.80);
}
#man .ll {
    left:3px;   
    -webkit-transform-origin:50% 0;
    -webkit-animation:ll 4s -0.5s ease-in-out infinite;
    -webkit-animation-play-state:running;
    transform-origin:50% 0;
    animation:ll 4s -0.5s ease-in-out infinite;
    animation-play-state:running;
}
@-webkit-keyframes ll {
    from {-webkit-transform:rotateZ(30deg);}
    25%  {-webkit-transform:rotateZ(50deg);}
    50%  {-webkit-transform:rotateZ(20deg);}
    75%  {-webkit-transform:rotateZ(40deg);}
    to   {-webkit-transform:rotateZ(30deg);}
}
@keyframes ll {
    from {transform:rotateZ(30deg);}
    25%  {transform:rotateZ(50deg);}
    50%  {transform:rotateZ(20deg);}
    75%  {transform:rotateZ(40deg);}
    to   {transform:rotateZ(30deg);}
}
#man .lr {
    right:3px;
    -webkit-transform:rotateZ(-30deg);
    -webkit-transform-origin:50% 0;
    -webkit-animation-play-state:running;   
    -webkit-animation:lr 4s ease-in-out infinite;
    transform:rotateZ(-30deg);
    transform-origin:50% 0;
    animation-play-state:running;   
    animation:lr 4s ease-in-out infinite;
}
@-webkit-keyframes lr {
    from {-webkit-transform:rotateZ(-30deg);}
    25%  {-webkit-transform:rotateZ(-50deg);}
    50%  {-webkit-transform:rotateZ(-20deg);}
    75%  {-webkit-transform:rotateZ(-40deg);}
    to   {-webkit-transform:rotateZ(-30deg);}
}
@keyframes lr {
    from {transform:rotateZ(-30deg);}
    25%  {transform:rotateZ(-50deg);}
    50%  {transform:rotateZ(-20deg);}
    75%  {transform:rotateZ(-40deg);}
    to   {transform:rotateZ(-30deg);}
}
#man #leg div {
    box-shadow:0 0 3px #000;
    top:100%;
    height:100%;
    width:100%;
    -webkit-transform-origin:50% 0;
    transform-origin:50% 0;
    background:rgba(0,0,0,.80);
}
#man .ll div {
    -webkit-transform:rotateZ(-30deg);
    -webkit-animation:lld 4s -1.5 ease-in-out infinite;
    -webkit-animation-play-state:running;
    transform:rotateZ(-30deg);
    animation:lld 4s -1.5 ease-in-out infinite;
    animation-play-state:running;   
}
@-webkit-keyframes lld {
    from {-webkit-transform:rotateZ(-30deg);}
    25%  {-webkit-transform:rotateZ(-80deg);}
    50%  {-webkit-transform:rotateZ(-30deg);}
    75%  {-webkit-transform:rotateZ(-5deg);}
    to   {-webkit-transform:rotateZ(-30deg);}
}
@keyframes lld {
    from {transform:rotateZ(-30deg);}
    25%  {transform:rotateZ(-80deg);}
    50%  {transform:rotateZ(-30deg);}
    75%  {transform:rotateZ(-5deg);}
    to   {transform:rotateZ(-30deg);}
}
#man .lr div {
    -webkit-transform:rotateZ(30deg);
    -webkit-animation:lrd 4s ease-in-out infinite;
    -webkit-animation-play-state:running;
    transform:rotateZ(30deg);
    animation:lrd 4s ease-in-out infinite;
    animation-play-state:running;
}
@-webkit-keyframes lrd {
    from {-webkit-transform:rotateZ(30deg);}
    25%  {-webkit-transform:rotateZ(80deg);}
    50%  {-webkit-transform:rotateZ(30deg);}
    75%  {-webkit-transform:rotateZ(5deg);}
    to   {-webkit-transform:rotateZ(30deg);}
}
@keyframes lrd {
    from {transform:rotateZ(30deg);}
    25%  {transform:rotateZ(80deg);}
    50%  {transform:rotateZ(30deg);}
    75%  {transform:rotateZ(5deg);}
    to   {transform:rotateZ(30deg);}
}
#man #arm {
    box-shadow:0 0 3px #000;
    top:5px;
    width:35px;
    height:4px;
    background:rgba(0,0,0,.80);
}
#man .al {
    -webkit-transform-origin:100% 50%;
    -webkit-animation:al 5s ease-in-out infinite;
    -webkit-animation-play-state:running;
    transform-origin:100% 50%;
    animation:al 5s ease-in-out infinite;
    animation-play-state:running;
    left:-33px;
}
@-webkit-keyframes al {
    from {-webkit-transform:rotateZ(-60deg);}
    25%  {-webkit-transform:rotateZ(10deg);}
    50%  {-webkit-transform:rotateZ(-40deg);}
    75%  {-webkit-transform:rotateZ(30deg);}
    to   {-webkit-transform:rotateZ(-60deg);}                   
}
@keyframes al {
    from {transform:rotateZ(-60deg);}
    25%  {transform:rotateZ(10deg);}
    50%  {transform:rotateZ(-40deg);}
    75%  {transform:rotateZ(30deg);}
    to   {transform:rotateZ(-60deg);}                   
}
#man .ar {
    -webkit-transform-origin:0 50%;
    -webkit-animation:ar 5s -1s ease-in-out infinite;
    -webkit-animation-play-state:running;
    transform-origin:0 50%;
    animation:ar 5s -1s ease-in-out infinite;
    animation-play-state:running;
    right:-33px;
}
@-webkit-keyframes ar {
    from {-webkit-transform:rotateZ(60deg);}
    25%  {-webkit-transform:rotateZ(-10deg);}
    50%  {-webkit-transform:rotateZ(40deg);}
    75%  {-webkit-transform:rotateZ(-30deg);}
    to   {-webkit-transform:rotateZ(60deg);}                    
}
@keyframes ar {
    from {transform:rotateZ(60deg);}
    25%  {transform:rotateZ(-10deg);}
    50%  {transform:rotateZ(40deg);}
    75%  {transform:rotateZ(-30deg);}
    to   {transform:rotateZ(60deg);}                    
}
#man #arm div {
    box-shadow:0 0 3px #000;
    height:100%;
    width:100%; 
    background:rgba(0,0,0,.80);     
}
#man .al div {
    right:100%;
    -webkit-transform-origin:100% 50%;
    -webkit-animation-play-state:running;
    -webkit-animation:ald 5s -0.5s ease-in-out infinite;
    transform-origin:100% 50%;
    animation-play-state:running;
    animation:ald 5s -0.5s ease-in-out infinite;
}
@-webkit-keyframes ald {
    from {-webkit-transform:rotateZ(-50deg);}
    25%  {-webkit-transform:rotateZ(10deg);}
    50%  {-webkit-transform:rotateZ(-40deg);}
    75%  {-webkit-transform:rotateZ(60deg);}
    to   {-webkit-transform:rotateZ(-50deg);}   
}
@keyframes ald {
    from {transform:rotateZ(-50deg);}
    25%  {transform:rotateZ(10deg);}
    50%  {transform:rotateZ(-40deg);}
    75%  {transform:rotateZ(60deg);}
    to   {transform:rotateZ(-50deg);}   
}
#man .ar div {
    left:100%;
    -webkit-transform-origin:0 50%;
    -webkit-animation-play-state:running;
    -webkit-animation:ard 5s ease-in-out infinite;
    transform-origin:0 50%;
    animation-play-state:running;
    animation:ard 5s ease-in-out infinite;
}
@-webkit-keyframes ard {
    from {-webkit-transform:rotateZ(50deg);}
    25%  {-webkit-transform:rotateZ(-10deg);}
    50%  {-webkit-transform:rotateZ(40deg);}
    75%  {-webkit-transform:rotateZ(-60deg);}
    to   {-webkit-transform:rotateZ(50deg);}    
}
@keyframes ard {
    from {transform:rotateZ(50deg);}
    25%  {transform:rotateZ(-10deg);}
    50%  {transform:rotateZ(40deg);}
    75%  {transform:rotateZ(-60deg);}
    to   {transform:rotateZ(50deg);}    
}
#man #eye { 
    height:15px;
    width:15px;
    border-radius:50%;
}
#man #eye span {
    display:block;
    position:absolute;
    height:100%;
    width:100%;
    background:#FFF;
    box-shadow:0 0 3px #FFF;
    border-radius:50%;  
}
#man .el span {
    -webkit-animation:eyespan 1.5s ease-in-out infinite;
    -webkit-animation-play-state:running;
    animation:eyespan 1.5s ease-in-out infinite;
    animation-play-state:running;
}
#man .er span {
    -webkit-animation:eyespan 1.5s 0.1s ease-in-out infinite;
    -webkit-animation-play-state:running;
    animation:eyespan 1.5s 0.1s ease-in-out infinite;
    animation-play-state:running;   
}
@-webkit-keyframes eyespan {
    from {height:100%; top:0;}
    10%  {height:0; top:50%;}
    20%  {height:100%; top:0;}
    to   {height:100%; top:0;}
}
@keyframes eyespan {
    from {height:100%; top:0;}
    10%  {height:0; top:50%;}
    20%  {height:100%; top:0;}
    to   {height:100%; top:0;}
}
#man .el {
    left:3px; top:10px;
    -webkit-animation:el 6s ease-in-out infinite;
    -webkit-animation-play-state:running;
    animation:el 6s ease-in-out infinite;
    animation-play-state:running;
}
@-webkit-keyframes el {
    from {left:3px; top:10px;}
    30%  {left:25px; top:10px;}
    50%  {left:3px; top:20px;}
    60%  {left:3px; top:10px;}
    80%  {left:-22px; top:10px;}
    to   {left:3px; top:10px;}
}
@keyframes el {
    from {left:3px; top:10px;}
    30%  {left:25px; top:10px;}
    50%  {left:3px; top:20px;}
    60%  {left:3px; top:10px;}
    80%  {left:-22px; top:10px;}
    to   {left:3px; top:10px;}
}
#man .er {
    right:3px; top:10px;
    -webkit-animation:er 6s ease-in-out infinite;
    -webkit-animation-play-state:running;
    animation:er 6s ease-in-out infinite;
    animation-play-state:running;
}
@-webkit-keyframes er {
    from {right:3px; top:10px;}
    30%  {right:-22px; top:10px;}
    50%  {right:3px; top:20px;}
    60%  {right:3px; top:10px;}
    80%  {right:25px; top:10px;}
    to   {right:3px; top:10px;}
}
@keyframes er {
    from {right:3px; top:10px;}
    30%  {right:-22px; top:10px;}
    50%  {right:3px; top:20px;}
    60%  {right:3px; top:10px;}
    80%  {right:25px; top:10px;}
    to   {right:3px; top:10px;}
}