.coffee-wrapper{display:inline-block;position:relative;width:38px;height:24px;vertical-align:middle}.coffee-body{position:absolute;bottom:5px;left:0;height:15px;width:28px;border-radius:0 0 150px 150px;background-color:#fff;overflow:hidden;z-index:1}.coffee-shade{position:absolute;height:25px;width:18px;background-color:#f0f0f0;left:45%;top:-3px;transform:rotate(50deg)}.coffee-handle{position:absolute;height:7px;width:7px;border-radius:0 150px 150px 0;border:2px solid #F3F3F3;z-index:0;left:27px;bottom:12px}.coffee-saucer{position:absolute;height:4px;width:32px;border-radius:0 0 100px 100px;background-color:#f9f9f9;bottom:0;left:-1px;z-index:2}.coffee-steam{position:absolute;height:12px;width:12px;border-radius:50%;background-color:#fff;bottom:18px;left:10px;z-index:3;opacity:0}#steam1{animation:coffee-steam-left 4s ease-out infinite}#steam3{animation:coffee-steam-left 4s ease-out 1s infinite}#steam2{animation:coffee-steam-right 4s ease-out .5s infinite}#steam4{animation:coffee-steam-right 4s ease-out 1.5s infinite}@keyframes coffee-steam-left{0%{transform:translateY(0) translate(0) scale(.25);opacity:.2}to{transform:translateY(-20px) translate(-8px) scale(1);opacity:0}}@keyframes coffee-steam-right{0%{transform:translateY(0) translate(0) scale(.25);opacity:.2}to{transform:translateY(-20px) translate(8px) scale(1);opacity:0}}