.p-flags.row {
  margin-bottom: 20px;
}
.p-flag {
  padding: 15px 0;
  cursor: pointer;
}
.p-flag.active,
.p-flag:hover {
  -webkit-box-shadow: 0 0 2px 2px #616161 inset;
  -moz-box-shadow: 0 0 2px 2px #616161 inset;
  box-shadow: 0 0 2px 2px #616161 inset;
}
.p-flag.active {
  background: #efefef;
}
.voice-details > img.flag {
  margin-right: 8px;
  width: 20px;
}
#avatar-voice {
  width: 150px;
  margin: 10px auto;
  font-size: 20px;
}
.speech-range {
  margin-bottom: 10px;
}
.voice-details {
  margin-top: 15px;
}
.voice-details .lang-name {
  font-size: 11px;
}
/* ================== pronounce avatars ==================== */
.pron-avatar {
  width: 80px;
  height: 80px;
  margin: auto;
  background-size: 352px 264px;
}
.bg-alex,
.bg-david {
  background-position: -4px -4px;
}
.bg-daniel,
.bg-guy {
  background-position: -92px -4px;
}
.bg-wendy,
.bg-libby,
.bg-mia,
.bg-fiona {
  background-position: -4px -92px;
}
.bg-fred,
.bg-mark {
  background-position: -92px -92px;
}
.bg-zira,
.bg-karen,
.bg-hayley {
  background-position: -180px -4px;
}
.bg-natasha,
.bg-julia {
  background-position: -180px -92px;
}
.bg-moira,
.bg-emily {
  background-position: -4px -180px;
}
.bg-oliver {
  background-position: -92px -180px;
}
.bg-samantha,
.bg-clara,
.bg-heather {
  background-position: -180px -180px;
}
.bg-tessa,
.bg-leah {
  background-position: -268px -4px;
}
.bg-veena,
.bg-priya,
.bg-neerja {
  background-position: -268px -92px;
}
.bg-victoria,
.bg-aria {
  background-position: -268px -180px;
}
.p-preview > div:nth-child(n + 5) {
  display: none;
}
.p-preview .pron-avatar {
  background-size: 160px 160px;
}
.p-preview .bg-alex,
.p-preview .bg-david,
.p-preview .bg-fred {
  background-position: 0 0;
}
.p-preview .bg-daniel,
.p-preview .bg-oliver,
.p-preview .bg-mark {
  background-position: -80px 0;
}
.p-preview .bg-karen,
.p-preview .bg-natasha,
.p-preview .bg-hayley,
.p-preview .bg-mia,
.p-preview .bg-libby,
.p-preview .bg-zira,
.p-preview .bg-moira {
  background-position: 0 -80px;
}
.p-preview .bg-veena,
.p-preview .bg-priya,
.p-preview .bg-neerja,
.p-preview .bg-wendy,
.p-preview .bg-tessa {
  background-position: -80px -80px;
}
@media (max-width: 767px) {
  .p-flag .voice-details {
    margin-top: 5px;
  }
  .p-flag .voice-details > span {
    font-size: 14px;
  }
}