.i_cross:before {
	width: 12px;
	height: 12px;
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgZmlsbD0ibm9uZSI+PHBhdGggc3Ryb2tlPSIjQjIxRjYxIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBkPSJNMTMgMSAxIDEzTTEgMWwxMiAxMiIvPjwvc3ZnPg==") 50% 50% no-repeat;
}

.medal {
  position: absolute;
  bottom: 0;
  left: 0;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: all 0.3s ease-out;
}
.medal,
.medal .face,
.medal .back {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  transition: all 0.3s ease-out;
}
.medal .face,
.medal .back {
  position: absolute;
  top: 0;
  left: 0;
}
.medal .face {
  background: #fff url('../img/face.svg') 50% 60px no-repeat;
  background-size: contain;
  transition: all 0.3s ease-out;
}
.medal .back {
  background-color: #b21f61;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
.medal .back:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -6px 0 0 -6px;
  filter: invert(1) brightness(1000%);
}
.medal .back.active {
    backface-visibility: initial;
    background-color: #b21f61;
}
.-loaded .medal .face {
  background-position: 50% 50%;
}
.-chatOpened .medal {
  transform: rotateY(180deg);
}
.-chatOpened .medal .face {
  opacity: 0;
}