test-svgo
Version:
-- project name: `illlustrations`, author: `vijay verma`, version: 1.0.3, author_url: `https://vijayverma.co` twitter: `https://twitter.com/realvjy` description: `Open source illlustrations kit`, siteUrl: `https://illlustrations.co/`, license: "The MIT Li
2,198 lines (1,992 loc) • 72 kB
HTML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>SVG CSS sprite preview | svg-sprite</title>
<style>@charset "UTF-8";body{padding:0;margin:0;color:#666;background:#fafafa;font-family:Arial,Helvetica,sans-serif;font-size:1em;line-height:1.4}header{display:block;padding:3em 3em 2em 3em;background-color:#fff}header p{margin:2em 0 0 0}section{border-top:1px solid #eee;padding:2em 3em 0 3em}section ul{margin:0;padding:0}section li{display:inline;display:inline-block;background-color:#fff;position:relative;margin:0 1em 1em 0;vertical-align:top;border:1px solid #ccc;cursor:default}border:1px solid #ccc;display:table-cell;vertical-align:middle;text-align:center}.icon{display:inline;display:inline-block}h1{margin-top:0}h2{margin:0;padding:0;font-size:1em;font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute;left:1em;right:1em;bottom:1em}footer{display:block;margin:0;padding:0 3em 3em 3em}footer p{margin:0;font-size:.7em}footer a{color:#0f7595;margin-left:0}</style>
<style>i{text-indent:200%;white-space:nowrap;overflow:hidden;display:inline-block;background-size:11601px 11601px!important}</style>
<!--
Sprite CSS
====================================================================================================
This is an all-in-one inline version of the CSS necessary to use the SVG sprite.
-->
<style type="text/css">
.svg-AD {
background: url("svg/sprite.css-f69d0b96.svg") 7.6923076923076925% 0 no-repeat;
width: 21px;
height: 15px;
}
.svg-AE {
background: url("svg/sprite.css-f69d0b96.svg") 53.84615384615385% 66.66666666666667% no-repeat;
width: 21px;
height: 15px;
}
.svg-AF {
background: url("svg/sprite.css-f69d0b96.svg") 0 5.555555555555555% no-repeat;
width: 21px;
height: 15px;
}
.svg-AG {
background: url("svg/sprite.css-f69d0b96.svg") 7.6923076923076925% 5.555555555555555% no-repeat;
width: 21px;
height: 15px;
}
.svg-AI {
background: url("svg/sprite.css-f69d0b96.svg") 15.384615384615385% 0 no-repeat;
width: 21px;
height: 15px;
}
.svg-AL {
background: url("svg/sprite.css-f69d0b96.svg") 15.384615384615385% 5.555555555555555% no-repeat;
width: 21px;
height: 15px;
}
.svg-AM {
background: url("svg/sprite.css-f69d0b96.svg") 0 11.11111111111111% no-repeat;
width: 21px;
height: 15px;
}
.svg-AO {
background: url("svg/sprite.css-f69d0b96.svg") 7.6923076923076925% 11.11111111111111% no-repeat;
width: 21px;
height: 15px;
}
.svg-AR {
background: url("svg/sprite.css-f69d0b96.svg") 15.384615384615385% 11.11111111111111% no-repeat;
width: 21px;
height: 15px;
}
.svg-AS {
background: url("svg/sprite.css-f69d0b96.svg") 0 16.666666666666668% no-repeat;
width: 21px;
height: 15px;
}
.svg-AT {
background: url("svg/sprite.css-f69d0b96.svg") 7.6923076923076925% 16.666666666666668% no-repeat;
width: 21px;
height: 15px;
}
.svg-AU {
background: url("svg/sprite.css-f69d0b96.svg") 15.384615384615385% 16.666666666666668% no-repeat;
width: 21px;
height: 15px;
}
.svg-AW {
background: url("svg/sprite.css-f69d0b96.svg") 23.076923076923077% 0 no-repeat;
width: 21px;
height: 15px;
}
.svg-AX {
background: url("svg/sprite.css-f69d0b96.svg") 23.076923076923077% 5.555555555555555% no-repeat;
width: 21px;
height: 15px;
}
.svg-AZ {
background: url("svg/sprite.css-f69d0b96.svg") 23.076923076923077% 11.11111111111111% no-repeat;
width: 21px;
height: 15px;
}
.svg-BA {
background: url("svg/sprite.css-f69d0b96.svg") 23.076923076923077% 16.666666666666668% no-repeat;
width: 21px;
height: 15px;
}
.svg-BB {
background: url("svg/sprite.css-f69d0b96.svg") 0 22.22222222222222% no-repeat;
width: 21px;
height: 15px;
}
.svg-BD {
background: url("svg/sprite.css-f69d0b96.svg") 7.6923076923076925% 22.22222222222222% no-repeat;
width: 21px;
height: 15px;
}
.svg-BE {
background: url("svg/sprite.css-f69d0b96.svg") 15.384615384615385% 22.22222222222222% no-repeat;
width: 21px;
height: 15px;
}
.svg-BF {
background: url("svg/sprite.css-f69d0b96.svg") 23.076923076923077% 22.22222222222222% no-repeat;
width: 21px;
height: 15px;
}
.svg-BG {
background: url("svg/sprite.css-f69d0b96.svg") 30.76923076923077% 0 no-repeat;
width: 21px;
height: 15px;
}
.svg-BH {
background: url("svg/sprite.css-f69d0b96.svg") 30.76923076923077% 5.555555555555555% no-repeat;
width: 21px;
height: 15px;
}
.svg-BI {
background: url("svg/sprite.css-f69d0b96.svg") 30.76923076923077% 11.11111111111111% no-repeat;
width: 21px;
height: 15px;
}
.svg-BJ {
background: url("svg/sprite.css-f69d0b96.svg") 30.76923076923077% 16.666666666666668% no-repeat;
width: 21px;
height: 15px;
}
.svg-BL {
background: url("svg/sprite.css-f69d0b96.svg") 30.76923076923077% 22.22222222222222% no-repeat;
width: 21px;
height: 15px;
}
.svg-BM {
background: url("svg/sprite.css-f69d0b96.svg") 0 27.77777777777778% no-repeat;
width: 21px;
height: 15px;
}
.svg-BN {
background: url("svg/sprite.css-f69d0b96.svg") 7.6923076923076925% 27.77777777777778% no-repeat;
width: 21px;
height: 15px;
}
.svg-BO {
background: url("svg/sprite.css-f69d0b96.svg") 15.384615384615385% 27.77777777777778% no-repeat;
width: 21px;
height: 15px;
}
.svg-BR {
background: url("svg/sprite.css-f69d0b96.svg") 23.076923076923077% 27.77777777777778% no-repeat;
width: 21px;
height: 15px;
}
.svg-BS {
background: url("svg/sprite.css-f69d0b96.svg") 30.76923076923077% 27.77777777777778% no-repeat;
width: 21px;
height: 15px;
}
.svg-BT {
background: url("svg/sprite.css-f69d0b96.svg") 0 33.333333333333336% no-repeat;
width: 21px;
height: 15px;
}
.svg-BV {
background: url("svg/sprite.css-f69d0b96.svg") 7.6923076923076925% 33.333333333333336% no-repeat;
width: 21px;
height: 15px;
}
.svg-BW {
background: url("svg/sprite.css-f69d0b96.svg") 15.384615384615385% 33.333333333333336% no-repeat;
width: 21px;
height: 15px;
}
.svg-BY {
background: url("svg/sprite.css-f69d0b96.svg") 23.076923076923077% 33.333333333333336% no-repeat;
width: 21px;
height: 15px;
}
.svg-BZ {
background: url("svg/sprite.css-f69d0b96.svg") 30.76923076923077% 33.333333333333336% no-repeat;
width: 21px;
height: 15px;
}
.svg-CA {
background: url("svg/sprite.css-f69d0b96.svg") 38.46153846153846% 0 no-repeat;
width: 21px;
height: 15px;
}
.svg-CC {
background: url("svg/sprite.css-f69d0b96.svg") 38.46153846153846% 5.555555555555555% no-repeat;
width: 21px;
height: 15px;
}
.svg-CD {
background: url("svg/sprite.css-f69d0b96.svg") 38.46153846153846% 11.11111111111111% no-repeat;
width: 21px;
height: 15px;
}
.svg-CF {
background: url("svg/sprite.css-f69d0b96.svg") 38.46153846153846% 16.666666666666668% no-repeat;
width: 21px;
height: 15px;
}
.svg-CG {
background: url("svg/sprite.css-f69d0b96.svg") 38.46153846153846% 22.22222222222222% no-repeat;
width: 21px;
height: 15px;
}
.svg-CH {
background: url("svg/sprite.css-f69d0b96.svg") 38.46153846153846% 27.77777777777778% no-repeat;
width: 21px;
height: 15px;
}
.svg-CI {
background: url("svg/sprite.css-f69d0b96.svg") 38.46153846153846% 33.333333333333336% no-repeat;
width: 21px;
height: 15px;
}
.svg-CK {
background: url("svg/sprite.css-f69d0b96.svg") 0 38.888888888888886% no-repeat;
width: 21px;
height: 15px;
}
.svg-CL {
background: url("svg/sprite.css-f69d0b96.svg") 7.6923076923076925% 38.888888888888886% no-repeat;
width: 21px;
height: 15px;
}
.svg-CM {
background: url("svg/sprite.css-f69d0b96.svg") 15.384615384615385% 38.888888888888886% no-repeat;
width: 21px;
height: 15px;
}
.svg-CN {
background: url("svg/sprite.css-f69d0b96.svg") 23.076923076923077% 38.888888888888886% no-repeat;
width: 21px;
height: 15px;
}
.svg-CO {
background: url("svg/sprite.css-f69d0b96.svg") 30.76923076923077% 38.888888888888886% no-repeat;
width: 21px;
height: 15px;
}
.svg-CR {
background: url("svg/sprite.css-f69d0b96.svg") 38.46153846153846% 38.888888888888886% no-repeat;
width: 21px;
height: 15px;
}
.svg-CU {
background: url("svg/sprite.css-f69d0b96.svg") 46.15384615384615% 0 no-repeat;
width: 21px;
height: 15px;
}
.svg-CV {
background: url("svg/sprite.css-f69d0b96.svg") 46.15384615384615% 5.555555555555555% no-repeat;
width: 21px;
height: 15px;
}
.svg-CW {
background: url("svg/sprite.css-f69d0b96.svg") 46.15384615384615% 11.11111111111111% no-repeat;
width: 21px;
height: 15px;
}
.svg-CX {
background: url("svg/sprite.css-f69d0b96.svg") 46.15384615384615% 16.666666666666668% no-repeat;
width: 21px;
height: 15px;
}
.svg-CY {
background: url("svg/sprite.css-f69d0b96.svg") 46.15384615384615% 22.22222222222222% no-repeat;
width: 21px;
height: 15px;
}
.svg-CZ {
background: url("svg/sprite.css-f69d0b96.svg") 46.15384615384615% 27.77777777777778% no-repeat;
width: 21px;
height: 15px;
}
.svg-DE {
background: url("svg/sprite.css-f69d0b96.svg") 46.15384615384615% 33.333333333333336% no-repeat;
width: 21px;
height: 15px;
}
.svg-DJ {
background: url("svg/sprite.css-f69d0b96.svg") 46.15384615384615% 38.888888888888886% no-repeat;
width: 21px;
height: 15px;
}
.svg-DK {
background: url("svg/sprite.css-f69d0b96.svg") 0 44.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-DM {
background: url("svg/sprite.css-f69d0b96.svg") 7.6923076923076925% 44.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-DO {
background: url("svg/sprite.css-f69d0b96.svg") 15.384615384615385% 44.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-DZ {
background: url("svg/sprite.css-f69d0b96.svg") 23.076923076923077% 44.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-EC {
background: url("svg/sprite.css-f69d0b96.svg") 30.76923076923077% 44.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-EE {
background: url("svg/sprite.css-f69d0b96.svg") 38.46153846153846% 44.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-EG {
background: url("svg/sprite.css-f69d0b96.svg") 46.15384615384615% 44.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-ER {
background: url("svg/sprite.css-f69d0b96.svg") 53.84615384615385% 0 no-repeat;
width: 21px;
height: 15px;
}
.svg-ES {
background: url("svg/sprite.css-f69d0b96.svg") 53.84615384615385% 5.555555555555555% no-repeat;
width: 21px;
height: 15px;
}
.svg-ET {
background: url("svg/sprite.css-f69d0b96.svg") 53.84615384615385% 11.11111111111111% no-repeat;
width: 21px;
height: 15px;
}
.svg-EU {
background: url("svg/sprite.css-f69d0b96.svg") 53.84615384615385% 16.666666666666668% no-repeat;
width: 21px;
height: 15px;
}
.svg-FI {
background: url("svg/sprite.css-f69d0b96.svg") 53.84615384615385% 22.22222222222222% no-repeat;
width: 21px;
height: 15px;
}
.svg-FJ {
background: url("svg/sprite.css-f69d0b96.svg") 53.84615384615385% 27.77777777777778% no-repeat;
width: 21px;
height: 15px;
}
.svg-FK {
background: url("svg/sprite.css-f69d0b96.svg") 53.84615384615385% 33.333333333333336% no-repeat;
width: 21px;
height: 15px;
}
.svg-FM {
background: url("svg/sprite.css-f69d0b96.svg") 53.84615384615385% 38.888888888888886% no-repeat;
width: 21px;
height: 15px;
}
.svg-FO {
background: url("svg/sprite.css-f69d0b96.svg") 53.84615384615385% 44.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-FR {
background: url("svg/sprite.css-f69d0b96.svg") 0 50% no-repeat;
width: 21px;
height: 15px;
}
.svg-GA {
background: url("svg/sprite.css-f69d0b96.svg") 7.6923076923076925% 50% no-repeat;
width: 21px;
height: 15px;
}
.svg-GB {
background: url("svg/sprite.css-f69d0b96.svg") 15.384615384615385% 50% no-repeat;
width: 21px;
height: 15px;
}
.svg-GB-ENG {
background: url("svg/sprite.css-f69d0b96.svg") 23.076923076923077% 50% no-repeat;
width: 21px;
height: 15px;
}
.svg-GB-NIR {
background: url("svg/sprite.css-f69d0b96.svg") 30.76923076923077% 50% no-repeat;
width: 21px;
height: 15px;
}
.svg-GB-SCT {
background: url("svg/sprite.css-f69d0b96.svg") 38.46153846153846% 50% no-repeat;
width: 21px;
height: 15px;
}
.svg-GB-WLS {
background: url("svg/sprite.css-f69d0b96.svg") 46.15384615384615% 50% no-repeat;
width: 21px;
height: 15px;
}
.svg-GB-ZET {
background: url("svg/sprite.css-f69d0b96.svg") 53.84615384615385% 50% no-repeat;
width: 21px;
height: 15px;
}
.svg-GD {
background: url("svg/sprite.css-f69d0b96.svg") 0 55.55555555555556% no-repeat;
width: 21px;
height: 15px;
}
.svg-GE {
background: url("svg/sprite.css-f69d0b96.svg") 7.6923076923076925% 55.55555555555556% no-repeat;
width: 21px;
height: 15px;
}
.svg-GF {
background: url("svg/sprite.css-f69d0b96.svg") 15.384615384615385% 55.55555555555556% no-repeat;
width: 21px;
height: 15px;
}
.svg-GG {
background: url("svg/sprite.css-f69d0b96.svg") 23.076923076923077% 55.55555555555556% no-repeat;
width: 21px;
height: 15px;
}
.svg-GH {
background: url("svg/sprite.css-f69d0b96.svg") 30.76923076923077% 55.55555555555556% no-repeat;
width: 21px;
height: 15px;
}
.svg-GI {
background: url("svg/sprite.css-f69d0b96.svg") 38.46153846153846% 55.55555555555556% no-repeat;
width: 21px;
height: 15px;
}
.svg-GL {
background: url("svg/sprite.css-f69d0b96.svg") 46.15384615384615% 55.55555555555556% no-repeat;
width: 21px;
height: 15px;
}
.svg-GM {
background: url("svg/sprite.css-f69d0b96.svg") 53.84615384615385% 55.55555555555556% no-repeat;
width: 21px;
height: 15px;
}
.svg-GN {
background: url("svg/sprite.css-f69d0b96.svg") 61.53846153846154% 0 no-repeat;
width: 21px;
height: 15px;
}
.svg-GP {
background: url("svg/sprite.css-f69d0b96.svg") 61.53846153846154% 5.555555555555555% no-repeat;
width: 21px;
height: 15px;
}
.svg-GQ {
background: url("svg/sprite.css-f69d0b96.svg") 61.53846153846154% 11.11111111111111% no-repeat;
width: 21px;
height: 15px;
}
.svg-GR {
background: url("svg/sprite.css-f69d0b96.svg") 61.53846153846154% 16.666666666666668% no-repeat;
width: 21px;
height: 15px;
}
.svg-GS {
background: url("svg/sprite.css-f69d0b96.svg") 61.53846153846154% 22.22222222222222% no-repeat;
width: 21px;
height: 15px;
}
.svg-GT {
background: url("svg/sprite.css-f69d0b96.svg") 61.53846153846154% 27.77777777777778% no-repeat;
width: 21px;
height: 15px;
}
.svg-GU {
background: url("svg/sprite.css-f69d0b96.svg") 61.53846153846154% 33.333333333333336% no-repeat;
width: 21px;
height: 15px;
}
.svg-GW {
background: url("svg/sprite.css-f69d0b96.svg") 61.53846153846154% 38.888888888888886% no-repeat;
width: 21px;
height: 15px;
}
.svg-GY {
background: url("svg/sprite.css-f69d0b96.svg") 61.53846153846154% 44.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-HK {
background: url("svg/sprite.css-f69d0b96.svg") 61.53846153846154% 50% no-repeat;
width: 21px;
height: 15px;
}
.svg-HM {
background: url("svg/sprite.css-f69d0b96.svg") 61.53846153846154% 55.55555555555556% no-repeat;
width: 21px;
height: 15px;
}
.svg-HN {
background: url("svg/sprite.css-f69d0b96.svg") 0 61.111111111111114% no-repeat;
width: 21px;
height: 15px;
}
.svg-HR {
background: url("svg/sprite.css-f69d0b96.svg") 7.6923076923076925% 61.111111111111114% no-repeat;
width: 21px;
height: 15px;
}
.svg-HT {
background: url("svg/sprite.css-f69d0b96.svg") 15.384615384615385% 61.111111111111114% no-repeat;
width: 21px;
height: 15px;
}
.svg-HU {
background: url("svg/sprite.css-f69d0b96.svg") 23.076923076923077% 61.111111111111114% no-repeat;
width: 21px;
height: 15px;
}
.svg-ID {
background: url("svg/sprite.css-f69d0b96.svg") 30.76923076923077% 61.111111111111114% no-repeat;
width: 21px;
height: 15px;
}
.svg-IE {
background: url("svg/sprite.css-f69d0b96.svg") 38.46153846153846% 61.111111111111114% no-repeat;
width: 21px;
height: 15px;
}
.svg-IL {
background: url("svg/sprite.css-f69d0b96.svg") 46.15384615384615% 61.111111111111114% no-repeat;
width: 21px;
height: 15px;
}
.svg-IM {
background: url("svg/sprite.css-f69d0b96.svg") 53.84615384615385% 61.111111111111114% no-repeat;
width: 21px;
height: 15px;
}
.svg-IN {
background: url("svg/sprite.css-f69d0b96.svg") 61.53846153846154% 61.111111111111114% no-repeat;
width: 21px;
height: 15px;
}
.svg-IO {
background: url("svg/sprite.css-f69d0b96.svg") 69.23076923076923% 0 no-repeat;
width: 21px;
height: 15px;
}
.svg-IQ {
background: url("svg/sprite.css-f69d0b96.svg") 69.23076923076923% 5.555555555555555% no-repeat;
width: 21px;
height: 15px;
}
.svg-IR {
background: url("svg/sprite.css-f69d0b96.svg") 69.23076923076923% 11.11111111111111% no-repeat;
width: 21px;
height: 15px;
}
.svg-IS {
background: url("svg/sprite.css-f69d0b96.svg") 69.23076923076923% 16.666666666666668% no-repeat;
width: 21px;
height: 15px;
}
.svg-IT {
background: url("svg/sprite.css-f69d0b96.svg") 69.23076923076923% 22.22222222222222% no-repeat;
width: 21px;
height: 15px;
}
.svg-JE {
background: url("svg/sprite.css-f69d0b96.svg") 69.23076923076923% 27.77777777777778% no-repeat;
width: 21px;
height: 15px;
}
.svg-JM {
background: url("svg/sprite.css-f69d0b96.svg") 69.23076923076923% 33.333333333333336% no-repeat;
width: 21px;
height: 15px;
}
.svg-JO {
background: url("svg/sprite.css-f69d0b96.svg") 69.23076923076923% 38.888888888888886% no-repeat;
width: 21px;
height: 15px;
}
.svg-JP {
background: url("svg/sprite.css-f69d0b96.svg") 69.23076923076923% 44.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-KE {
background: url("svg/sprite.css-f69d0b96.svg") 69.23076923076923% 50% no-repeat;
width: 21px;
height: 15px;
}
.svg-KG {
background: url("svg/sprite.css-f69d0b96.svg") 69.23076923076923% 55.55555555555556% no-repeat;
width: 21px;
height: 15px;
}
.svg-KH {
background: url("svg/sprite.css-f69d0b96.svg") 69.23076923076923% 61.111111111111114% no-repeat;
width: 21px;
height: 15px;
}
.svg-KI {
background: url("svg/sprite.css-f69d0b96.svg") 0 66.66666666666667% no-repeat;
width: 21px;
height: 15px;
}
.svg-KM {
background: url("svg/sprite.css-f69d0b96.svg") 7.6923076923076925% 66.66666666666667% no-repeat;
width: 21px;
height: 15px;
}
.svg-KN {
background: url("svg/sprite.css-f69d0b96.svg") 15.384615384615385% 66.66666666666667% no-repeat;
width: 21px;
height: 15px;
}
.svg-KP {
background: url("svg/sprite.css-f69d0b96.svg") 23.076923076923077% 66.66666666666667% no-repeat;
width: 21px;
height: 15px;
}
.svg-KR {
background: url("svg/sprite.css-f69d0b96.svg") 30.76923076923077% 66.66666666666667% no-repeat;
width: 21px;
height: 15px;
}
.svg-KW {
background: url("svg/sprite.css-f69d0b96.svg") 38.46153846153846% 66.66666666666667% no-repeat;
width: 21px;
height: 15px;
}
.svg-KY {
background: url("svg/sprite.css-f69d0b96.svg") 46.15384615384615% 66.66666666666667% no-repeat;
width: 21px;
height: 15px;
}
.svg-KZ {
background: url("svg/sprite.css-f69d0b96.svg") 0 0 no-repeat;
width: 21px;
height: 15px;
}
.svg-LA {
background: url("svg/sprite.css-f69d0b96.svg") 61.53846153846154% 66.66666666666667% no-repeat;
width: 21px;
height: 15px;
}
.svg-LB {
background: url("svg/sprite.css-f69d0b96.svg") 69.23076923076923% 66.66666666666667% no-repeat;
width: 21px;
height: 15px;
}
.svg-LC {
background: url("svg/sprite.css-f69d0b96.svg") 0 72.22222222222223% no-repeat;
width: 21px;
height: 15px;
}
.svg-LGBT {
background: url("svg/sprite.css-f69d0b96.svg") 7.6923076923076925% 72.22222222222223% no-repeat;
width: 21px;
height: 15px;
}
.svg-LI {
background: url("svg/sprite.css-f69d0b96.svg") 15.384615384615385% 72.22222222222223% no-repeat;
width: 21px;
height: 15px;
}
.svg-LK {
background: url("svg/sprite.css-f69d0b96.svg") 23.076923076923077% 72.22222222222223% no-repeat;
width: 21px;
height: 15px;
}
.svg-LR {
background: url("svg/sprite.css-f69d0b96.svg") 30.76923076923077% 72.22222222222223% no-repeat;
width: 21px;
height: 15px;
}
.svg-LS {
background: url("svg/sprite.css-f69d0b96.svg") 38.46153846153846% 72.22222222222223% no-repeat;
width: 21px;
height: 15px;
}
.svg-LT {
background: url("svg/sprite.css-f69d0b96.svg") 46.15384615384615% 72.22222222222223% no-repeat;
width: 21px;
height: 15px;
}
.svg-LU {
background: url("svg/sprite.css-f69d0b96.svg") 53.84615384615385% 72.22222222222223% no-repeat;
width: 21px;
height: 15px;
}
.svg-LV {
background: url("svg/sprite.css-f69d0b96.svg") 61.53846153846154% 72.22222222222223% no-repeat;
width: 21px;
height: 15px;
}
.svg-LY {
background: url("svg/sprite.css-f69d0b96.svg") 69.23076923076923% 72.22222222222223% no-repeat;
width: 21px;
height: 15px;
}
.svg-MA {
background: url("svg/sprite.css-f69d0b96.svg") 76.92307692307692% 0 no-repeat;
width: 21px;
height: 15px;
}
.svg-MC {
background: url("svg/sprite.css-f69d0b96.svg") 76.92307692307692% 5.555555555555555% no-repeat;
width: 21px;
height: 15px;
}
.svg-MD {
background: url("svg/sprite.css-f69d0b96.svg") 76.92307692307692% 11.11111111111111% no-repeat;
width: 21px;
height: 15px;
}
.svg-ME {
background: url("svg/sprite.css-f69d0b96.svg") 76.92307692307692% 16.666666666666668% no-repeat;
width: 21px;
height: 15px;
}
.svg-MF {
background: url("svg/sprite.css-f69d0b96.svg") 76.92307692307692% 22.22222222222222% no-repeat;
width: 21px;
height: 15px;
}
.svg-MG {
background: url("svg/sprite.css-f69d0b96.svg") 76.92307692307692% 27.77777777777778% no-repeat;
width: 21px;
height: 15px;
}
.svg-MH {
background: url("svg/sprite.css-f69d0b96.svg") 76.92307692307692% 33.333333333333336% no-repeat;
width: 21px;
height: 15px;
}
.svg-MK {
background: url("svg/sprite.css-f69d0b96.svg") 76.92307692307692% 38.888888888888886% no-repeat;
width: 21px;
height: 15px;
}
.svg-ML {
background: url("svg/sprite.css-f69d0b96.svg") 76.92307692307692% 44.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-MM {
background: url("svg/sprite.css-f69d0b96.svg") 76.92307692307692% 50% no-repeat;
width: 21px;
height: 15px;
}
.svg-MN {
background: url("svg/sprite.css-f69d0b96.svg") 76.92307692307692% 55.55555555555556% no-repeat;
width: 21px;
height: 15px;
}
.svg-MO {
background: url("svg/sprite.css-f69d0b96.svg") 76.92307692307692% 61.111111111111114% no-repeat;
width: 21px;
height: 15px;
}
.svg-MP {
background: url("svg/sprite.css-f69d0b96.svg") 76.92307692307692% 66.66666666666667% no-repeat;
width: 21px;
height: 15px;
}
.svg-MQ {
background: url("svg/sprite.css-f69d0b96.svg") 76.92307692307692% 72.22222222222223% no-repeat;
width: 21px;
height: 15px;
}
.svg-MR {
background: url("svg/sprite.css-f69d0b96.svg") 0 77.77777777777777% no-repeat;
width: 21px;
height: 15px;
}
.svg-MS {
background: url("svg/sprite.css-f69d0b96.svg") 7.6923076923076925% 77.77777777777777% no-repeat;
width: 21px;
height: 15px;
}
.svg-MT {
background: url("svg/sprite.css-f69d0b96.svg") 15.384615384615385% 77.77777777777777% no-repeat;
width: 21px;
height: 15px;
}
.svg-MU {
background: url("svg/sprite.css-f69d0b96.svg") 23.076923076923077% 77.77777777777777% no-repeat;
width: 21px;
height: 15px;
}
.svg-MV {
background: url("svg/sprite.css-f69d0b96.svg") 30.76923076923077% 77.77777777777777% no-repeat;
width: 21px;
height: 15px;
}
.svg-MW {
background: url("svg/sprite.css-f69d0b96.svg") 38.46153846153846% 77.77777777777777% no-repeat;
width: 21px;
height: 15px;
}
.svg-MX {
background: url("svg/sprite.css-f69d0b96.svg") 46.15384615384615% 77.77777777777777% no-repeat;
width: 21px;
height: 15px;
}
.svg-MY {
background: url("svg/sprite.css-f69d0b96.svg") 53.84615384615385% 77.77777777777777% no-repeat;
width: 21px;
height: 15px;
}
.svg-MZ {
background: url("svg/sprite.css-f69d0b96.svg") 61.53846153846154% 77.77777777777777% no-repeat;
width: 21px;
height: 15px;
}
.svg-NA {
background: url("svg/sprite.css-f69d0b96.svg") 69.23076923076923% 77.77777777777777% no-repeat;
width: 21px;
height: 15px;
}
.svg-NC {
background: url("svg/sprite.css-f69d0b96.svg") 76.92307692307692% 77.77777777777777% no-repeat;
width: 21px;
height: 15px;
}
.svg-NE {
background: url("svg/sprite.css-f69d0b96.svg") 84.61538461538461% 0 no-repeat;
width: 21px;
height: 15px;
}
.svg-NF {
background: url("svg/sprite.css-f69d0b96.svg") 84.61538461538461% 5.555555555555555% no-repeat;
width: 21px;
height: 15px;
}
.svg-NG {
background: url("svg/sprite.css-f69d0b96.svg") 84.61538461538461% 11.11111111111111% no-repeat;
width: 21px;
height: 15px;
}
.svg-NI {
background: url("svg/sprite.css-f69d0b96.svg") 84.61538461538461% 16.666666666666668% no-repeat;
width: 21px;
height: 15px;
}
.svg-NL {
background: url("svg/sprite.css-f69d0b96.svg") 84.61538461538461% 22.22222222222222% no-repeat;
width: 21px;
height: 15px;
}
.svg-NO {
background: url("svg/sprite.css-f69d0b96.svg") 84.61538461538461% 27.77777777777778% no-repeat;
width: 21px;
height: 15px;
}
.svg-NP {
background: url("svg/sprite.css-f69d0b96.svg") 84.61538461538461% 33.333333333333336% no-repeat;
width: 21px;
height: 15px;
}
.svg-NR {
background: url("svg/sprite.css-f69d0b96.svg") 84.61538461538461% 38.888888888888886% no-repeat;
width: 21px;
height: 15px;
}
.svg-NU {
background: url("svg/sprite.css-f69d0b96.svg") 84.61538461538461% 44.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-NZ {
background: url("svg/sprite.css-f69d0b96.svg") 84.61538461538461% 50% no-repeat;
width: 21px;
height: 15px;
}
.svg-OM {
background: url("svg/sprite.css-f69d0b96.svg") 84.61538461538461% 55.55555555555556% no-repeat;
width: 21px;
height: 15px;
}
.svg-PA {
background: url("svg/sprite.css-f69d0b96.svg") 84.61538461538461% 61.111111111111114% no-repeat;
width: 21px;
height: 15px;
}
.svg-PE {
background: url("svg/sprite.css-f69d0b96.svg") 84.61538461538461% 66.66666666666667% no-repeat;
width: 21px;
height: 15px;
}
.svg-PF {
background: url("svg/sprite.css-f69d0b96.svg") 84.61538461538461% 72.22222222222223% no-repeat;
width: 21px;
height: 15px;
}
.svg-PG {
background: url("svg/sprite.css-f69d0b96.svg") 84.61538461538461% 77.77777777777777% no-repeat;
width: 21px;
height: 15px;
}
.svg-PH {
background: url("svg/sprite.css-f69d0b96.svg") 0 83.33333333333333% no-repeat;
width: 21px;
height: 15px;
}
.svg-PK {
background: url("svg/sprite.css-f69d0b96.svg") 7.6923076923076925% 83.33333333333333% no-repeat;
width: 21px;
height: 15px;
}
.svg-PL {
background: url("svg/sprite.css-f69d0b96.svg") 15.384615384615385% 83.33333333333333% no-repeat;
width: 21px;
height: 15px;
}
.svg-PM {
background: url("svg/sprite.css-f69d0b96.svg") 23.076923076923077% 83.33333333333333% no-repeat;
width: 21px;
height: 15px;
}
.svg-PN {
background: url("svg/sprite.css-f69d0b96.svg") 30.76923076923077% 83.33333333333333% no-repeat;
width: 21px;
height: 15px;
}
.svg-PR {
background: url("svg/sprite.css-f69d0b96.svg") 38.46153846153846% 83.33333333333333% no-repeat;
width: 21px;
height: 15px;
}
.svg-PS {
background: url("svg/sprite.css-f69d0b96.svg") 46.15384615384615% 83.33333333333333% no-repeat;
width: 21px;
height: 15px;
}
.svg-PT {
background: url("svg/sprite.css-f69d0b96.svg") 53.84615384615385% 83.33333333333333% no-repeat;
width: 21px;
height: 15px;
}
.svg-PW {
background: url("svg/sprite.css-f69d0b96.svg") 61.53846153846154% 83.33333333333333% no-repeat;
width: 21px;
height: 15px;
}
.svg-PY {
background: url("svg/sprite.css-f69d0b96.svg") 69.23076923076923% 83.33333333333333% no-repeat;
width: 21px;
height: 15px;
}
.svg-QA {
background: url("svg/sprite.css-f69d0b96.svg") 76.92307692307692% 83.33333333333333% no-repeat;
width: 21px;
height: 15px;
}
.svg-RE {
background: url("svg/sprite.css-f69d0b96.svg") 84.61538461538461% 83.33333333333333% no-repeat;
width: 21px;
height: 15px;
}
.svg-RO {
background: url("svg/sprite.css-f69d0b96.svg") 92.3076923076923% 0 no-repeat;
width: 21px;
height: 15px;
}
.svg-RS {
background: url("svg/sprite.css-f69d0b96.svg") 92.3076923076923% 5.555555555555555% no-repeat;
width: 21px;
height: 15px;
}
.svg-RU {
background: url("svg/sprite.css-f69d0b96.svg") 92.3076923076923% 11.11111111111111% no-repeat;
width: 21px;
height: 15px;
}
.svg-RW {
background: url("svg/sprite.css-f69d0b96.svg") 92.3076923076923% 16.666666666666668% no-repeat;
width: 21px;
height: 15px;
}
.svg-SA {
background: url("svg/sprite.css-f69d0b96.svg") 92.3076923076923% 22.22222222222222% no-repeat;
width: 21px;
height: 15px;
}
.svg-SB {
background: url("svg/sprite.css-f69d0b96.svg") 92.3076923076923% 27.77777777777778% no-repeat;
width: 21px;
height: 15px;
}
.svg-SC {
background: url("svg/sprite.css-f69d0b96.svg") 92.3076923076923% 33.333333333333336% no-repeat;
width: 21px;
height: 15px;
}
.svg-SD {
background: url("svg/sprite.css-f69d0b96.svg") 92.3076923076923% 38.888888888888886% no-repeat;
width: 21px;
height: 15px;
}
.svg-SE {
background: url("svg/sprite.css-f69d0b96.svg") 92.3076923076923% 44.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-SG {
background: url("svg/sprite.css-f69d0b96.svg") 92.3076923076923% 50% no-repeat;
width: 21px;
height: 15px;
}
.svg-SH {
background: url("svg/sprite.css-f69d0b96.svg") 92.3076923076923% 55.55555555555556% no-repeat;
width: 21px;
height: 15px;
}
.svg-SI {
background: url("svg/sprite.css-f69d0b96.svg") 92.3076923076923% 61.111111111111114% no-repeat;
width: 21px;
height: 15px;
}
.svg-SJ {
background: url("svg/sprite.css-f69d0b96.svg") 92.3076923076923% 66.66666666666667% no-repeat;
width: 21px;
height: 15px;
}
.svg-SK {
background: url("svg/sprite.css-f69d0b96.svg") 92.3076923076923% 72.22222222222223% no-repeat;
width: 21px;
height: 15px;
}
.svg-SL {
background: url("svg/sprite.css-f69d0b96.svg") 92.3076923076923% 77.77777777777777% no-repeat;
width: 21px;
height: 15px;
}
.svg-SM {
background: url("svg/sprite.css-f69d0b96.svg") 92.3076923076923% 83.33333333333333% no-repeat;
width: 21px;
height: 15px;
}
.svg-SN {
background: url("svg/sprite.css-f69d0b96.svg") 0 88.88888888888889% no-repeat;
width: 21px;
height: 15px;
}
.svg-SO {
background: url("svg/sprite.css-f69d0b96.svg") 7.6923076923076925% 88.88888888888889% no-repeat;
width: 21px;
height: 15px;
}
.svg-SR {
background: url("svg/sprite.css-f69d0b96.svg") 15.384615384615385% 88.88888888888889% no-repeat;
width: 21px;
height: 15px;
}
.svg-SS {
background: url("svg/sprite.css-f69d0b96.svg") 23.076923076923077% 88.88888888888889% no-repeat;
width: 21px;
height: 15px;
}
.svg-ST {
background: url("svg/sprite.css-f69d0b96.svg") 30.76923076923077% 88.88888888888889% no-repeat;
width: 21px;
height: 15px;
}
.svg-SV {
background: url("svg/sprite.css-f69d0b96.svg") 38.46153846153846% 88.88888888888889% no-repeat;
width: 21px;
height: 15px;
}
.svg-SX {
background: url("svg/sprite.css-f69d0b96.svg") 46.15384615384615% 88.88888888888889% no-repeat;
width: 21px;
height: 15px;
}
.svg-SY {
background: url("svg/sprite.css-f69d0b96.svg") 53.84615384615385% 88.88888888888889% no-repeat;
width: 21px;
height: 15px;
}
.svg-SZ {
background: url("svg/sprite.css-f69d0b96.svg") 61.53846153846154% 88.88888888888889% no-repeat;
width: 21px;
height: 15px;
}
.svg-TC {
background: url("svg/sprite.css-f69d0b96.svg") 69.23076923076923% 88.88888888888889% no-repeat;
width: 21px;
height: 15px;
}
.svg-TD {
background: url("svg/sprite.css-f69d0b96.svg") 76.92307692307692% 88.88888888888889% no-repeat;
width: 21px;
height: 15px;
}
.svg-TF {
background: url("svg/sprite.css-f69d0b96.svg") 84.61538461538461% 88.88888888888889% no-repeat;
width: 21px;
height: 15px;
}
.svg-TG {
background: url("svg/sprite.css-f69d0b96.svg") 92.3076923076923% 88.88888888888889% no-repeat;
width: 21px;
height: 15px;
}
.svg-TH {
background: url("svg/sprite.css-f69d0b96.svg") 0 94.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-TJ {
background: url("svg/sprite.css-f69d0b96.svg") 7.6923076923076925% 94.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-TK {
background: url("svg/sprite.css-f69d0b96.svg") 15.384615384615385% 94.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-TL {
background: url("svg/sprite.css-f69d0b96.svg") 23.076923076923077% 94.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-TM {
background: url("svg/sprite.css-f69d0b96.svg") 30.76923076923077% 94.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-TN {
background: url("svg/sprite.css-f69d0b96.svg") 38.46153846153846% 94.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-TO {
background: url("svg/sprite.css-f69d0b96.svg") 46.15384615384615% 94.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-TR {
background: url("svg/sprite.css-f69d0b96.svg") 53.84615384615385% 94.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-TT {
background: url("svg/sprite.css-f69d0b96.svg") 61.53846153846154% 94.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-TV {
background: url("svg/sprite.css-f69d0b96.svg") 69.23076923076923% 94.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-TW {
background: url("svg/sprite.css-f69d0b96.svg") 76.92307692307692% 94.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-TZ {
background: url("svg/sprite.css-f69d0b96.svg") 84.61538461538461% 94.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-UA {
background: url("svg/sprite.css-f69d0b96.svg") 92.3076923076923% 94.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-UG {
background: url("svg/sprite.css-f69d0b96.svg") 100% 0 no-repeat;
width: 21px;
height: 15px;
}
.svg-UM {
background: url("svg/sprite.css-f69d0b96.svg") 100% 5.555555555555555% no-repeat;
width: 21px;
height: 15px;
}
.svg-US {
background: url("svg/sprite.css-f69d0b96.svg") 100% 11.11111111111111% no-repeat;
width: 21px;
height: 15px;
}
.svg-US-CA {
background: url("svg/sprite.css-f69d0b96.svg") 100% 16.666666666666668% no-repeat;
width: 21px;
height: 15px;
}
.svg-UY {
background: url("svg/sprite.css-f69d0b96.svg") 100% 22.22222222222222% no-repeat;
width: 21px;
height: 15px;
}
.svg-UZ {
background: url("svg/sprite.css-f69d0b96.svg") 100% 27.77777777777778% no-repeat;
width: 21px;
height: 15px;
}
.svg-VA {
background: url("svg/sprite.css-f69d0b96.svg") 100% 33.333333333333336% no-repeat;
width: 21px;
height: 15px;
}
.svg-VC {
background: url("svg/sprite.css-f69d0b96.svg") 100% 38.888888888888886% no-repeat;
width: 21px;
height: 15px;
}
.svg-VE {
background: url("svg/sprite.css-f69d0b96.svg") 100% 44.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-VG {
background: url("svg/sprite.css-f69d0b96.svg") 100% 50% no-repeat;
width: 21px;
height: 15px;
}
.svg-VI {
background: url("svg/sprite.css-f69d0b96.svg") 100% 55.55555555555556% no-repeat;
width: 21px;
height: 15px;
}
.svg-VN {
background: url("svg/sprite.css-f69d0b96.svg") 100% 61.111111111111114% no-repeat;
width: 21px;
height: 15px;
}
.svg-VU {
background: url("svg/sprite.css-f69d0b96.svg") 100% 66.66666666666667% no-repeat;
width: 21px;
height: 15px;
}
.svg-WF {
background: url("svg/sprite.css-f69d0b96.svg") 100% 72.22222222222223% no-repeat;
width: 21px;
height: 15px;
}
.svg-WS {
background: url("svg/sprite.css-f69d0b96.svg") 100% 77.77777777777777% no-repeat;
width: 21px;
height: 15px;
}
.svg-XK {
background: url("svg/sprite.css-f69d0b96.svg") 100% 83.33333333333333% no-repeat;
width: 21px;
height: 15px;
}
.svg-YE {
background: url("svg/sprite.css-f69d0b96.svg") 100% 88.88888888888889% no-repeat;
width: 21px;
height: 15px;
}
.svg-YT {
background: url("svg/sprite.css-f69d0b96.svg") 100% 94.44444444444444% no-repeat;
width: 21px;
height: 15px;
}
.svg-ZA {
background: url("svg/sprite.css-f69d0b96.svg") 0 100% no-repeat;
width: 21px;
height: 15px;
}
.svg-ZM {
background: url("svg/sprite.css-f69d0b96.svg") 7.6923076923076925% 100% no-repeat;
width: 21px;
height: 15px;
}
.svg-ZW {
background: url("svg/sprite.css-f69d0b96.svg") 15.384615384615385% 100% no-repeat;
width: 21px;
height: 15px;
}
</style>
<!--
====================================================================================================
-->
</head>
<body>
<header>
<h1>SVG CSS sprite preview</h1>
<p>This preview features the generated SVG file as a conventional CSS sprite. The shapes are displayed as background images of several <code><i></code> elements.</p>
</header>
<section>
<!--
Conventional CSS sprite
====================================================================================================
This technique uses CSS classes to display portions of the sprite as background image of
appropriately sized elements.
-->
<ul>
<li title="AD">
<div class="icon-box">
<!-- AD -->
<i class="svg-AD">AD</i>
</div>
<h2>AD</h2>
</li>
<li title="AE">
<div class="icon-box">
<!-- AE -->
<i class="svg-AE">AE</i>
</div>
<h2>AE</h2>
</li>
<li title="AF">
<div class="icon-box">
<!-- AF -->
<i class="svg-AF">AF</i>
</div>
<h2>AF</h2>
</li>
<li title="AG">
<div class="icon-box">
<!-- AG -->
<i class="svg-AG">AG</i>
</div>
<h2>AG</h2>
</li>
<li title="AI">
<div class="icon-box">
<!-- AI -->
<i class="svg-AI">AI</i>
</div>
<h2>AI</h2>
</li>
<li title="AL">
<div class="icon-box">
<!-- AL -->
<i class="svg-AL">AL</i>
</div>
<h2>AL</h2>
</li>
<li title="AM">
<div class="icon-box">
<!-- AM -->
<i class="svg-AM">AM</i>
</div>
<h2>AM</h2>
</li>
<li title="AO">
<div class="icon-box">
<!-- AO -->
<i class="svg-AO">AO</i>
</div>
<h2>AO</h2>
</li>
<li title="AR">
<div class="icon-box">
<!-- AR -->
<i class="svg-AR">AR</i>
</div>
<h2>AR</h2>
</li>
<li title="AS">
<div class="icon-box">
<!-- AS -->
<i class="svg-AS">AS</i>
</div>
<h2>AS</h2>
</li>
<li title="AT">
<div class="icon-box">
<!-- AT -->
<i class="svg-AT">AT</i>
</div>
<h2>AT</h2>
</li>
<li title="AU">
<div class="icon-box">
<!-- AU -->
<i class="svg-AU">AU</i>
</div>
<h2>AU</h2>
</li>
<li title="AW">
<div class="icon-box">
<!-- AW -->
<i class="svg-AW">AW</i>
</div>
<h2>AW</h2>
</li>
<li title="AX">
<div class="icon-box">
<!-- AX -->
<i class="svg-AX">AX</i>
</div>
<h2>AX</h2>
</li>
<li title="AZ">
<div class="icon-box">
<!-- AZ -->
<i class="svg-AZ">AZ</i>
</div>
<h2>AZ</h2>
</li>
<li title="BA">
<div class="icon-box">
<!-- BA -->
<i class="svg-BA">BA</i>
</div>
<h2>BA</h2>
</li>
<li title="BB">
<div class="icon-box">
<!-- BB -->
<i class="svg-BB">BB</i>
</div>
<h2>BB</h2>
</li>
<li title="BD">
<div class="icon-box">
<!-- BD -->
<i class="svg-BD">BD</i>
</div>
<h2>BD</h2>
</li>
<li title="BE">
<div class="icon-box">
<!-- BE -->
<i class="svg-BE">BE</i>
</div>
<h2>BE</h2>
</li>
<li title="BF">
<div class="icon-box">
<!-- BF -->
<i class="svg-BF">BF</i>
</div>
<h2>BF</h2>
</li>
<li title="BG">
<div class="icon-box">
<!-- BG -->
<i class="svg-BG">BG</i>
</div>
<h2>BG</h2>
</li>
<li title="BH">
<div class="icon-box">
<!-- BH -->
<i class="svg-BH">BH</i>
</div>
<h2>BH</h2>
</li>
<li title="BI">
<div class="icon-box">
<!-- BI -->
<i class="svg-BI">BI</i>
</div>
<h2>BI</h2>
</li>
<li title="BJ">
<div class="icon-box">
<!-- BJ -->
<i class="svg-BJ">BJ</i>
</div>
<h2>BJ</h2>
</li>
<li title="BL">
<div class="icon-box">
<!-- BL -->
<i class="svg-BL">BL</i>
</div>
<h2>BL</h2>
</li>
<li title="BM">
<div class="icon-box">
<!-- BM -->
<i class="svg-BM">BM</i>
</div>
<h2>BM</h2>
</li>
<li title="BN">
<div class="icon-box">
<!-- BN -->
<i class="svg-BN">BN</i>
</div>
<h2>BN</h2>
</li>
<li title="BO">
<div class="icon-box">
<!-- BO -->
<i class="svg-BO">BO</i>
</div>
<h2>BO</h2>
</li>
<li title="BR">
<div class="icon-box">
<!-- BR -->
<i class="svg-BR">BR</i>
</div>
<h2>BR</h2>
</li>
<li title="BS">
<div class="icon-box">
<!-- BS -->
<i class="svg-BS">BS</i>
</div>
<h2>BS</h2>
</li>
<li title="BT">
<div class="icon-box">
<!-- BT -->
<i class="svg-BT">BT</i>
</div>
<h2>BT</h2>
</li>
<li title="BV">
<div class="icon-box">
<!-- BV -->
<i class="svg-BV">BV</i>
</div>
<h2>BV</h2>
</li>
<li title="BW">
<div class="icon-box">
<!-- BW -->
<i class="svg-BW">BW</i>
</div>
<h2>BW</h2>
</li>
<li title="BY">
<div class="icon-box">
<!-- BY -->
<i class="svg-BY">BY</i>
</div>
<h2>BY</h2>
</li>
<li title="BZ">
<div class="icon-box">
<!-- BZ -->
<i class="svg-BZ">BZ</i>
</div>
<h2>BZ</h2>
</li>
<li title="CA">
<div class="icon-box">
<!-- CA -->
<i class="svg-CA">CA</i>
</div>
<h2>CA</h2>
</li>
<li title="CC">
<div class="icon-box">
<!-- CC -->
<i class="svg-CC">CC</i>
</div>
<h2>CC</h2>
</li>
<li title="CD">
<div class="icon-box">
<!-- CD -->
<i class="svg-CD">CD</i>
</div>
<h2>CD</h2>
</li>
<li title="CF">
<div class="icon-box">
<!-- CF -->
<i class="svg-CF">CF</i>
</div>
<h2>CF</h2>
</li>
<li title="CG">
<div class="icon-box">
<!-- CG -->
<i class="svg-CG">CG</i>
</div>
<h2>CG</h2>
</li>
<li title="CH">
<div class="icon-box">
<!-- CH -->
<i class="svg-CH">CH</i>
</div>
<h2>CH</h2>
</li>
<li title="CI">
<div class="icon-box">
<!-- CI -->
<i class="svg-CI">CI</i>
</div>
<h2>CI</h2>
</li>
<li title="CK">
<div class="icon-box">
<!-- CK -->
<i class="svg-CK">CK</i>
</div>
<h2>CK</h2>
</li>
<li title="CL">
<div class="icon-box">
<!-- CL -->
<i class="svg-CL">CL</i>
</div>
<h2>CL</h2>
</li>
<li title="CM">
<div class="icon-box">
<!-- CM -->
<i class="svg-CM">CM</i>
</div>
<h2>CM</h2>
</li>
<li title="CN">
<div class="icon-box">
<!-- CN -->
<i class="svg-CN">CN</i>
</div>
<h2>CN</h2>
</li>
<li title="CO">
<div class="icon-box">
<!-- CO -->
<i class="svg-CO">CO</i>
</div>
<h2>CO</h2>
</li>
<li title="CR">
<div class="icon-box">
<!-- CR -->
<i class="svg-CR">CR</i>
</div>
<h2>CR</h2>
</li>
<li title="CU">
<div class="icon-box">
<!-- CU -->
<i class="svg-CU">CU</i>
</div>
<h2>CU</h2>
</li>
<li title="CV">
<div class="icon-box">
<!-- CV -->
<i class="svg-CV">CV</i>
</div>
<h2>CV</h2>
</li>
<li title="CW">
<div class="icon-box">
<!-- CW -->
<i class="svg-CW">CW</i>
</div>
<h2>CW</h2>
</li>
<li title="CX">
<div class="icon-box">
<!-- CX -->
<i class="svg-CX">CX</i>
</div>
<h2>CX</h2>
</li>
<li title="CY">
<div class="icon-box">
<!-- CY -->
<i class="svg-CY">CY</i>
</div>
<h2>CY</h2>
</li>
<li title="CZ">
<div class="icon-box">
<!-- CZ -->
<i class="svg-CZ">CZ</i>
</div>
<h2>CZ</h2>
</li>
<li title="DE">
<div class="icon-box">
<!-- DE -->
<i class="svg-DE">DE</i>
</div>
<h2>DE</h2>
</li>
<li title="DJ">
<div class="icon-box">
<!-- DJ -->
<i class="svg-DJ">DJ</i>
</div>
<h2>DJ</h2>
</li>
<li title="DK">
<div class="icon-box">
<!-- DK -->
<i class="svg-DK">DK</i>
</div>
<h2>DK</h2>
</li>
<li title="DM">
<div class="icon-box">
<!-- DM -->
<i class="svg-DM">DM</i>
</div>
<h2>DM</h2>
</li>
<li title="DO">
<div class="icon-box">
<!-- DO -->
<i class="svg-DO">DO</i>
</div>
<h2>DO</h2>
</li>
<li title="DZ">
<div class="icon-box">
<!-- DZ -->
<i class="svg-DZ">DZ</i>
</div>
<h2>DZ</h2>
</li>
<li title="EC">
<div class="icon-box">
<!-- EC -->
<i class="svg-EC">EC</i>
</div>
<h2>EC</h2>
</li>
<li title="EE">
<div class="icon-box">
<!-- EE -->
<i class="svg-EE">EE</i>
</div>
<h2>EE</h2>
</li>
<li title="EG">
<div class="icon-box">
<!-- EG -->
<i class="svg-EG">EG</i>
</div>
<h2>EG</h2>
</li>
<li title="ER">
<div class="icon-box">
<!-- ER -->
<i class="svg-ER">ER</i>
</div>
<h2>ER</h2>
</li>
<li title="ES">
<div class="icon-box">
<!-- ES -->
<i class="svg-ES">ES</i>
</div>
<h2>ES</h2>
</li>
<li title="ET">
<div class="icon-box">
<!-- ET -->
<i class="svg-ET">ET</i>
</div>
<h2>ET</h2>
</li>
<li title="EU">
<div class="icon-box">
<!-- EU -->
<i class="svg-EU">EU</i>
</div>
<h2>EU</h2>
</li>
<li title="FI">
<div class="icon-box">
<!-- FI -->
<i class="svg-FI">FI</i>
</div>
<h2>FI</h2>
</li>
<li title="FJ">
<div class="icon-box">
<!-- FJ -->
<i class="svg-FJ">FJ</i>
</div>
<h2>FJ</h2>
</li>
<li title="FK">
<div class="icon-box">
<!-- FK -->
<i class="svg-FK">FK</i>
</div>
<h2>FK</h2>
</li>
<li title="FM">
<div class="icon-box">
<!-- FM -->
<i class="svg-FM">FM</i>
</div>
<h2>FM</h2>
</li>
<li title="FO">
<div class="icon-box">
<!-- FO -->
<i class="svg-FO">FO</i>
</div>
<h2>FO</h2>
</li>
<li title="FR">
<div class="icon-box">
<!-- FR -->
<i class="svg-FR">FR</i>
</div>
<h2>FR</h2>
</li>
<li title="GA">
<div class="icon-box">
<!-- GA -->
<i class="svg-GA">GA</i>
</div>
<h2>GA</h2>
</li>
<li title="GB">
<div class="icon-box">
<!-- GB -->
<i class="svg-GB">GB</i>
</div>
<h2>GB</h2>
</li>
<li title="GB-ENG">
<div class="icon-box">
<!-- GB-ENG -->
<i class="svg-GB-ENG">GB-ENG</i>
</div>
<h2>GB-ENG</h2>
</li>
<li title="GB-NIR">
<div class="icon-box">
<!-- GB-NIR -->
<i class="svg-GB-NIR">GB-NIR</i>
</div>
<h2>GB-NIR</h2>
</li>
<li title="GB-SCT">
<div class="icon-box">
<!-- GB-SCT -->
<i class="svg-GB-SCT">GB-SCT</i>
</div>
<h2>GB-SCT</h2>
</li>
<li title="GB-WLS">
<div class="icon-box">
<!-- GB-WLS -->
<i class="svg-GB-WLS">GB-WLS</i>
</div>
<h2>GB-WLS</h2>
</li>
<li title="GB-ZET">
<div class="icon-box">
<!-- GB-ZET -->
<i class="svg-GB-ZET">GB-ZET</i>
</div>
<h2>GB-ZET</h2>
</li>
<li title="GD">
<div class="icon-box">
<!-- GD -->
<i class="svg-GD">GD</i>
</div>
<h2>GD</h2>
</li>
<li title="GE">
<div class="icon-box">
<!-- GE -->
<i class="svg-GE">GE</i>
</div>
<h2>GE</h2>
</li>
<li title="GF">
<div class="icon-box">
<!-- GF -->
<i class="svg-GF">GF</i>
</div>
<h2>GF</h2>
</li>
<li title="GG">
<div class="icon-box">
<!-- GG -->
<i class="svg-GG">GG</i>
</div>
<h2>GG</h2>
</li>
<li title="GH">
<div class="icon-box">
<!-- GH -->
<i class="svg-GH">GH</i>
</div>
<h2>GH</h2>
</li>
<li title="GI">
<div class="icon-box">
<!-- GI -->
<i class="svg-GI">GI</i>
</div>
<h2>GI</h2>
</li>
<li title="GL">
<div class="icon-box">
<!-- GL -->
<i class="svg-GL">GL</i>
</div>
<h2>GL</h2>
</li>
<li title="GM">
<div class="icon-box">
<!-- GM -->
<i class="svg-GM">GM</i>
</div>
<h2>GM</h2>
</li>
<li title="GN">
<div class="icon-box">
<!-- GN -->
<i class="svg-GN">GN</i>
</div>
<h2>GN</h2>
</li>
<li title="GP">
<div class="icon-box">
<!-- GP -->
<i class="svg-GP">GP</i>
</div>
<h2>GP</h2>
</li>
<li title="GQ">
<div class="icon-box">
<!-- GQ -->
<i class="svg-GQ">GQ</i>
</div>
<h2>GQ</h2>
</li>
<li title="GR">
<div class="icon-box">
<!-- GR -->
<i class="svg-GR">GR</i>
</div>
<h2>GR</h2>
</li>
<li title="GS">
<div class="icon-box">
<!-- GS -->
<i class="svg-GS">GS</i>
</div>
<h2>GS</h2>
</li>
<li title="GT">
<div class="icon-box">
<!-- GT -->
<i class="svg-GT">GT</i>
</div>
<h2>GT</h2>
</li>
<li title="GU">
<div class="icon-box">
<!-- GU -->
<i class="svg-GU">GU</i>
</div>
<h2>GU</h2>
</li>
<li title="GW">
<div class="icon-box">
<!-- GW -->
<i class="svg-GW">GW</i>
</div>
<h2>GW</h2>
</li>
<li title="GY">
<div class="icon-box">
<!-- GY -->
<i class="svg-GY">GY</i>
</div>
<h2>GY</h2>
</li>
<li title="HK">
<div class="icon-box">
<!-- HK -->
<i class="svg-HK">HK</i>
</div>
<h2>HK