.fib, .fi {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
}

.fi {
  position: relative;
  display: inline-block;
  width: 1.333333em;
  line-height: 1em;
}
.fi:before {
  content: " ";
}
.fi.fis {
  width: 1em;
}

.fi-gb {
  background-image: url(../flags/4x3/gb.svg);
}
.fi-gb.fis {
  background-image: url(../flags/1x1/gb.svg);
}

.fi-gb-eng {
  background-image: url(../flags/4x3/gb-eng.svg);
}
.fi-gb-eng.fis {
  background-image: url(../flags/1x1/gb-eng.svg);
}

.fi-es {
  background-image: url(../flags/4x3/es.svg);
}
.fi-es.fis {
  background-image: url(../flags/1x1/es.svg);
}

.fi-es-ct {
  background-image: url(../flags/4x3/es-ct.svg);
}
.fi-es-ct.fis {
  background-image: url(../flags/1x1/es-ct.svg);
}

.fi-br {
  background-image: url(../flags/4x3/br.svg);
}
.fi-br.fis {
  background-image: url(../flags/1x1/br.svg);
}

.fi-pt {
  background-image: url(../flags/4x3/pt.svg);
}
.fi-pt.fis {
  background-image: url(../flags/1x1/pt.svg);
}


.fi-fr {
  background-image: url(../flags/4x3/fr.svg);
}
.fi-fr.fis {
  background-image: url(../flags/1x1/fr.svg);
}

.fi-de {
  background-image: url(../flags/4x3/de.svg);
}
.fi-de.fis {
  background-image: url(../flags/1x1/de.svg);
}

.fi-nl {
  background-image: url(../flags/4x3/nl.svg);
}
.fi-nl.fis {
  background-image: url(../flags/1x1/nl.svg);
}


.fi-it {
  background-image: url(../flags/4x3/it.svg);
}
.fi-it.fis {
  background-image: url(../flags/1x1/it.svg);
}