.avatar{
    height: 56px;
    margin: auto;
    position: relative;
    width: 43.45px;
    z-index: 1;
}

@keyframes avatar-tick {
    92%   { transform: translateY(0); }
    96%  { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

.avatar-parts{
    position: relative;
    animation: avatar-tick 2.5s infinite;
    z-index: 999;
}

.avatar-parts .part{
    user-select: none;
    position: absolute;
}

.body.part{
    left: -20px;
    top: -24px;
}

.mood.part{
    left: -56px;
    top: -59px;
}

.hat.part{
    top: -49px;
    left: -16.7px;
    z-index: 3;
}

.item1.part{
    left: -9px;
    top: 3px;
    z-index: 3;
}

.item0.part{
    top: -18px;
    left: -2px;
    z-index: 4;
}

.item2.part{
    top: -45px;
    left: -10px;
    z-index: 2;
}

.avatar .grol-right.part{
    position: absolute;
    top: 25px;
    left: 16px;
    transform: scale(-0.8, 0.8);
}

.avatar .grol-left.part{
    position: absolute;
    transform: scale(0.8);
    top: 25px;
    left: -8px;
}

.avatar.last-member{
    transform: translate(62px, 88px);
    height: auto;
    width: auto;
}

.welcome-login .avatar{ transform: scale(1.4) translate(0px, 70px);}
.avatar-spot .avatar{    transform: scale(1.4);top: -38px;}
.avatar-spot img{ image-rendering: pixelated;}
.shopping .avatar{transform: scale(2);top: 78px;left: -8px;}