.fig {
	top: 200px;
	left: 200px;
	position: absolute;
	transform: translate(-50%,-100%) scale(1.6);
	margin-top: 10px;
	transition: all 0.9s linear;
	z-index: 99;
	font-size: 16px;
}

.fig.me {
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
	z-index: 199;
}

.avatar-body {
	width: 64px;
	height: 99px;
	background-image: url(../img/avatar-4.png);
	background-position: top left;
	background-size: auto 300%;
}

.avatar-name {
	text-align: center;
	font-family: Neucha;
	color: #fff;
	font-weight: bold;
}

.avatar-body.skin__1 {
	background-image: url(../img/avatar-1.png);
}

.avatar-body.skin__2 {
	background-image: url(../img/avatar-2.png);
}

.avatar-body.skin__3 {
	background-image: url(../img/avatar-3.png);
}

.avatar-body.skin__4 {
	background-image: url(../img/avatar-4.png);
}

.avatar-body.skin__5 {
	background-image: url(../img/avatar-5.png);
}



.move  .avatar-body{
	background-position-x: -1024px;
	transition: background-position-x 0.9s steps(16, start);
}

.right  .avatar-body{
	background-position-y: -99px;
}

.left  .avatar-body{
	background-position-y: -188px;
}




.fig.me.out .radius {
	display: block;
	content: '';
	position: absolute;
	width: 300px;
	height: 300px;
	border: 1px solid rgba(255,255,255,0.3);
	background: transparent;
	transform: translate(-38%,-61%)  scale(0.1,0.1);
	border-radius: 50%;
	animation-duration: 0.6s;
	animation-timing-function: ease-out;
	animation: showBorder  0.6s 1 ease-in-out;
	z-index: -999;
}

@keyframes showBorder {
    0% {transform: translate(-38%,-61%)  scale(0.1,0.1); opacity: 0;}
    90% {transform: translate(-38%,-61%)  scale(1,0.7); opacity: 0.8;}
    100% {transform: translate(-38%,-61%)  scale(0.01,0.01); opacity: 0;}
}