.flag-circle {
  display: inline-block;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  overflow: hidden;
  border: 1px solid rgba(24, 36, 52, .18);
  border-radius: 50%;
  background-color: #fff;
  background-repeat: no-repeat;
  box-shadow: 0 2px 8px rgba(24, 36, 52, .16);
}

.flag-circle::before {
  content: none;
}

.flag-circle.flag-en {
  background:
    linear-gradient(33deg, transparent 0 42%, #fff 42% 47%, #c8102e 47% 53%, #fff 53% 58%, transparent 58%),
    linear-gradient(-33deg, transparent 0 42%, #fff 42% 47%, #c8102e 47% 53%, #fff 53% 58%, transparent 58%),
    linear-gradient(90deg, transparent 0 42%, #fff 42% 46%, #c8102e 46% 54%, #fff 54% 58%, transparent 58%),
    linear-gradient(0deg, transparent 0 38%, #fff 38% 44%, #c8102e 44% 56%, #fff 56% 62%, transparent 62%),
    #012169;
}

.flag-circle.flag-de {
  background: linear-gradient(#000 0 33.33%, #dd0000 33.33% 66.66%, #ffce00 66.66%);
}

.flag-circle.flag-fr {
  background: linear-gradient(90deg, #0055a4 0 33.33%, #fff 33.33% 66.66%, #ef4135 66.66%);
}

.flag-circle.flag-es {
  background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%);
}

.flag-circle.flag-zh {
  background: radial-gradient(circle at 35% 35%, #ffde00 0 3px, transparent 3.5px), #de2910;
}

.flag-circle.flag-ru {
  background: linear-gradient(#fff 0 33.33%, #0039a6 33.33% 66.66%, #d52b1e 66.66%);
}

.flag-circle.flag-bg {
  background: linear-gradient(#fff 0 33.33%, #00966e 33.33% 66.66%, #d62612 66.66%);
}