@font-face {
    font-family: "spoticon";
    src: url("vendor/spoticon.svg") format("svg");
    font-weight: normal;
    font-style:normal;
}

li:before {
    font-family:"spoticon";
    font-style:normal;
    font-weight:normal;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:inherit;
    vertical-align:bottom;
    display:inline-block;
    text-decoration:inherit;
}

li { list-style: none; display: inline-block; height: 32px; width: 32px; border: 1px solid #CCC; margin: 10px;}

.font-100:before { content: "\f100"; font-size: 32px; }
.font-101:before { content: "\f101"; font-size: 32px; }
.font-102:before { content: "\f102"; font-size: 32px; }
.font-103:before { content: "\f103"; font-size: 32px; }
.font-104:before { content: "\f104"; font-size: 32px; }
.font-105:before { content: "\f105"; font-size: 32px; }
.font-106:before { content: "\f106"; font-size: 32px; }
.font-107:before { content: "\f107"; font-size: 32px; }
.font-108:before { content: "\f108"; font-size: 32px; }
.font-109:before { content: "\f109"; font-size: 32px; }
.font-10a:before { content: "\f10a"; font-size: 32px; }
.font-10b:before { content: "\f10b"; font-size: 32px; }
.font-10c:before { content: "\f10c"; font-size: 32px; }
.font-10d:before { content: "\f10d"; font-size: 32px; }
.font-10e:before { content: "\f10e"; font-size: 32px; }
.font-10f:before { content: "\f10f"; font-size: 32px; }
.font-110:before { content: "\f110"; font-size: 32px; }
.font-111:before { content: "\f111"; font-size: 32px; }
.font-112:before { content: "\f112"; font-size: 32px; }
.font-113:before { content: "\f113"; font-size: 32px; }
.font-114:before { content: "\f114"; font-size: 32px; }
.font-115:before { content: "\f115"; font-size: 32px; }
.font-116:before { content: "\f116"; font-size: 32px; }
.font-117:before { content: "\f117"; font-size: 32px; }
.font-11a:before { content: "\f11a"; font-size: 32px; }
.font-11b:before { content: "\f11b"; font-size: 32px; }
.font-11c:before { content: "\f11c"; font-size: 32px; }
.font-11d:before { content: "\f11d"; font-size: 32px; }
.font-11e:before { content: "\f11e"; font-size: 32px; }
.font-11f:before { content: "\f11f"; font-size: 32px; }
.font-120:before { content: "\f120"; font-size: 32px; }
.font-121:before { content: "\f121"; font-size: 32px; }
.font-122:before { content: "\f122"; font-size: 32px; }
.font-123:before { content: "\f123"; font-size: 32px; }
.font-124:before { content: "\f124"; font-size: 32px; }
.font-125:before { content: "\f125"; font-size: 32px; }
.font-126:before { content: "\f126"; font-size: 32px; }
.font-127:before { content: "\f127"; font-size: 32px; }
.font-128:before { content: "\f128"; font-size: 32px; }
.font-129:before { content: "\f129"; font-size: 32px; }
.font-12a:before { content: "\f12a"; font-size: 32px; }
.font-12b:before { content: "\f12b"; font-size: 32px; }
.font-12c:before { content: "\f12c"; font-size: 32px; }
.font-12d:before { content: "\f12d"; font-size: 32px; }
.font-12e:before { content: "\f12e"; font-size: 32px; }
.font-12f:before { content: "\f12f"; font-size: 32px; }
.font-130:before { content: "\f130"; font-size: 32px; }
.font-131:before { content: "\f131"; font-size: 32px; }
.font-132:before { content: "\f132"; font-size: 32px; }
.font-133:before { content: "\f133"; font-size: 32px; }
.font-134:before { content: "\f134"; font-size: 32px; }
.font-135:before { content: "\f135"; font-size: 32px; }
.font-136:before { content: "\f136"; font-size: 32px; }
.font-137:before { content: "\f137"; font-size: 32px; }
.font-138:before { content: "\f138"; font-size: 32px; }
.font-139:before { content: "\f139"; font-size: 32px; }
.font-13a:before { content: "\f13a"; font-size: 32px; }
.font-13b:before { content: "\f13b"; font-size: 32px; }
.font-13c:before { content: "\f13c"; font-size: 32px; }
.font-13d:before { content: "\f13d"; font-size: 32px; }
.font-13e:before { content: "\f13e"; font-size: 32px; }
.font-13f:before { content: "\f13f"; font-size: 32px; }
.font-140:before { content: "\f140"; font-size: 32px; }
.font-141:before { content: "\f141"; font-size: 32px; }
.font-142:before { content: "\f142"; font-size: 32px; }
.font-143:before { content: "\f143"; font-size: 32px; }
.font-144:before { content: "\f144"; font-size: 32px; }
.font-145:before { content: "\f145"; font-size: 32px; }
.font-146:before { content: "\f146"; font-size: 32px; }
.font-147:before { content: "\f147"; font-size: 32px; }
.font-148:before { content: "\f148"; font-size: 32px; }
.font-149:before { content: "\f149"; font-size: 32px; }
.font-14a:before { content: "\f14a"; font-size: 32px; }
.font-14b:before { content: "\f14b"; font-size: 32px; }
.font-14c:before { content: "\f14c"; font-size: 32px; }
.font-14d:before { content: "\f14d"; font-size: 32px; }
.font-14e:before { content: "\f14e"; font-size: 32px; }
.font-14f:before { content: "\f14f"; font-size: 32px; }
.font-150:before { content: "\f150"; font-size: 32px; }
.font-151:before { content: "\f151"; font-size: 32px; }
.font-152:before { content: "\f152"; font-size: 32px; }
.font-153:before { content: "\f153"; font-size: 32px; }
.font-154:before { content: "\f154"; font-size: 32px; }
.font-155:before { content: "\f155"; font-size: 32px; }
.font-156:before { content: "\f156"; font-size: 32px; }
.font-157:before { content: "\f157"; font-size: 32px; }
.font-158:before { content: "\f158"; font-size: 32px; }
.font-159:before { content: "\f159"; font-size: 32px; }
.font-15c:before { content: "\f15c"; font-size: 32px; }
.font-15d:before { content: "\f15d"; font-size: 32px; }
.font-15e:before { content: "\f15e"; font-size: 32px; }
.font-15f:before { content: "\f15f"; font-size: 32px; }
.font-160:before { content: "\f160"; font-size: 32px; }
.font-161:before { content: "\f161"; font-size: 32px; }
.font-164:before { content: "\f164"; font-size: 32px; }
.font-165:before { content: "\f165"; font-size: 32px; }
.font-166:before { content: "\f166"; font-size: 32px; }
.font-167:before { content: "\f167"; font-size: 32px; }
.font-168:before { content: "\f168"; font-size: 32px; }
.font-169:before { content: "\f169"; font-size: 32px; }
.font-16a:before { content: "\f16a"; font-size: 32px; }
.font-16b:before { content: "\f16b"; font-size: 32px; }
.font-16c:before { content: "\f16c"; font-size: 32px; }
.font-16d:before { content: "\f16d"; font-size: 32px; }
.font-16e:before { content: "\f16e"; font-size: 32px; }
.font-16f:before { content: "\f16f"; font-size: 32px; }
.font-170:before { content: "\f170"; font-size: 32px; }
.font-171:before { content: "\f171"; font-size: 32px; }
.font-172:before { content: "\f172"; font-size: 32px; }
.font-173:before { content: "\f173"; font-size: 32px; }
.font-174:before { content: "\f174"; font-size: 32px; }
.font-175:before { content: "\f175"; font-size: 32px; }
.font-176:before { content: "\f176"; font-size: 32px; }
.font-177:before { content: "\f177"; font-size: 32px; }
.font-178:before { content: "\f178"; font-size: 32px; }
.font-179:before { content: "\f179"; font-size: 32px; }
.font-17a:before { content: "\f17a"; font-size: 32px; }
.font-17b:before { content: "\f17b"; font-size: 32px; }
.font-17c:before { content: "\f17c"; font-size: 32px; }
.font-17d:before { content: "\f17d"; font-size: 32px; }
.font-17e:before { content: "\f17e"; font-size: 32px; }
.font-17f:before { content: "\f17f"; font-size: 32px; }
.font-180:before { content: "\f180"; font-size: 32px; }
.font-181:before { content: "\f181"; font-size: 32px; }
.font-182:before { content: "\f182"; font-size: 32px; }
.font-183:before { content: "\f183"; font-size: 32px; }
.font-184:before { content: "\f184"; font-size: 32px; }
.font-185:before { content: "\f185"; font-size: 32px; }
.font-186:before { content: "\f186"; font-size: 32px; }
.font-187:before { content: "\f187"; font-size: 32px; }
.font-188:before { content: "\f188"; font-size: 32px; }
.font-189:before { content: "\f189"; font-size: 32px; }
.font-18a:before { content: "\f18a"; font-size: 32px; }
.font-18b:before { content: "\f18b"; font-size: 32px; }
.font-18c:before { content: "\f18c"; font-size: 32px; }
.font-18d:before { content: "\f18d"; font-size: 32px; }
.font-18e:before { content: "\f18e"; font-size: 32px; }
.font-18f:before { content: "\f18f"; font-size: 32px; }
.font-190:before { content: "\f190"; font-size: 32px; }
.font-191:before { content: "\f191"; font-size: 32px; }
.font-192:before { content: "\f192"; font-size: 32px; }
.font-193:before { content: "\f193"; font-size: 32px; }
.font-194:before { content: "\f194"; font-size: 32px; }
.font-195:before { content: "\f195"; font-size: 32px; }
.font-196:before { content: "\f196"; font-size: 32px; }
.font-197:before { content: "\f197"; font-size: 32px; }
.font-198:before { content: "\f198"; font-size: 32px; }
.font-199:before { content: "\f199"; font-size: 32px; }
.font-19a:before { content: "\f19a"; font-size: 32px; }
.font-19b:before { content: "\f19b"; font-size: 32px; }
.font-19c:before { content: "\f19c"; font-size: 32px; }
.font-19d:before { content: "\f19d"; font-size: 32px; }
.font-19e:before { content: "\f19e"; font-size: 32px; }
.font-19f:before { content: "\f19f"; font-size: 32px; }
.font-1a0:before { content: "\f1a0"; font-size: 32px; }
.font-1a1:before { content: "\f1a1"; font-size: 32px; }
.font-1a2:before { content: "\f1a2"; font-size: 32px; }
.font-1a3:before { content: "\f1a3"; font-size: 32px; }
.font-1a4:before { content: "\f1a4"; font-size: 32px; }
.font-1a5:before { content: "\f1a5"; font-size: 32px; }
.font-1a6:before { content: "\f1a6"; font-size: 32px; }
.font-1a7:before { content: "\f1a7"; font-size: 32px; }
.font-1a8:before { content: "\f1a8"; font-size: 32px; }
.font-1a9:before { content: "\f1a9"; font-size: 32px; }
.font-1aa:before { content: "\f1aa"; font-size: 32px; }
.font-1ab:before { content: "\f1ab"; font-size: 32px; }
.font-1ac:before { content: "\f1ac"; font-size: 32px; }
.font-1ad:before { content: "\f1ad"; font-size: 32px; }
.font-1ae:before { content: "\f1ae"; font-size: 32px; }
.font-1af:before { content: "\f1af"; font-size: 32px; }
.font-1b0:before { content: "\f1b0"; font-size: 32px; }
.font-1b1:before { content: "\f1b1"; font-size: 32px; }
.font-1b2:before { content: "\f1b2"; font-size: 32px; }
.font-1b3:before { content: "\f1b3"; font-size: 32px; }
.font-1b4:before { content: "\f1b4"; font-size: 32px; }
.font-1b5:before { content: "\f1b5"; font-size: 32px; }
.font-1b6:before { content: "\f1b6"; font-size: 32px; }
.font-1b7:before { content: "\f1b7"; font-size: 32px; }
.font-1b8:before { content: "\f1b8"; font-size: 32px; }
.font-1b9:before { content: "\f1b9"; font-size: 32px; }
.font-1ba:before { content: "\f1ba"; font-size: 32px; }
.font-1bb:before { content: "\f1bb"; font-size: 32px; }
.font-1bc:before { content: "\f1bc"; font-size: 32px; }
.font-1bd:before { content: "\f1bd"; font-size: 32px; }
.font-1be:before { content: "\f1be"; font-size: 32px; }
.font-1bf:before { content: "\f1bf"; font-size: 32px; }
.font-1c0:before { content: "\f1c0"; font-size: 32px; }
.font-1c1:before { content: "\f1c1"; font-size: 32px; }
.font-1c2:before { content: "\f1c2"; font-size: 32px; }
.font-1c3:before { content: "\f1c3"; font-size: 32px; }
.font-1c4:before { content: "\f1c4"; font-size: 32px; }
.font-1c5:before { content: "\f1c5"; font-size: 32px; }
.font-1c6:before { content: "\f1c6"; font-size: 32px; }
.font-1c7:before { content: "\f1c7"; font-size: 32px; }
.font-1c8:before { content: "\f1c8"; font-size: 32px; }
.font-1c9:before { content: "\f1c9"; font-size: 32px; }
.font-1ca:before { content: "\f1ca"; font-size: 32px; }
.font-1cb:before { content: "\f1cb"; font-size: 32px; }
.font-1cc:before { content: "\f1cc"; font-size: 32px; }
.font-1cd:before { content: "\f1cd"; font-size: 32px; }
.font-1ce:before { content: "\f1ce"; font-size: 32px; }
.font-1cf:before { content: "\f1cf"; font-size: 32px; }
.font-1d0:before { content: "\f1d0"; font-size: 32px; }
.font-1d1:before { content: "\f1d1"; font-size: 32px; }
.font-1d2:before { content: "\f1d2"; font-size: 32px; }
.font-1d3:before { content: "\f1d3"; font-size: 32px; }
.font-1d4:before { content: "\f1d4"; font-size: 32px; }
.font-1d5:before { content: "\f1d5"; font-size: 32px; }
.font-1d6:before { content: "\f1d6"; font-size: 32px; }
.font-1d7:before { content: "\f1d7"; font-size: 32px; }
.font-1d8:before { content: "\f1d8"; font-size: 32px; }
.font-1d9:before { content: "\f1d9"; font-size: 32px; }
.font-1da:before { content: "\f1da"; font-size: 32px; }
.font-1db:before { content: "\f1db"; font-size: 32px; }
.font-1dc:before { content: "\f1dc"; font-size: 32px; }
.font-1dd:before { content: "\f1dd"; font-size: 32px; }
.font-1de:before { content: "\f1de"; font-size: 32px; }
.font-1df:before { content: "\f1df"; font-size: 32px; }
.font-1e0:before { content: "\f1e0"; font-size: 32px; }
.font-1e1:before { content: "\f1e1"; font-size: 32px; }
.font-1e2:before { content: "\f1e2"; font-size: 32px; }
.font-1e3:before { content: "\f1e3"; font-size: 32px; }
.font-1e4:before { content: "\f1e4"; font-size: 32px; }
.font-1e5:before { content: "\f1e5"; font-size: 32px; }
.font-1e6:before { content: "\f1e6"; font-size: 32px; }
.font-1e7:before { content: "\f1e7"; font-size: 32px; }
.font-1e8:before { content: "\f1e8"; font-size: 32px; }
.font-1e9:before { content: "\f1e9"; font-size: 32px; }
.font-1ea:before { content: "\f1ea"; font-size: 32px; }
.font-1eb:before { content: "\f1eb"; font-size: 32px; }
.font-1ec:before { content: "\f1ec"; font-size: 32px; }
.font-1ed:before { content: "\f1ed"; font-size: 32px; }
.font-1ee:before { content: "\f1ee"; font-size: 32px; }
.font-1ef:before { content: "\f1ef"; font-size: 32px; }
.font-1f0:before { content: "\f1f0"; font-size: 32px; }
.font-1f1:before { content: "\f1f1"; font-size: 32px; }
.font-1f2:before { content: "\f1f2"; font-size: 32px; }
.font-1f3:before { content: "\f1f3"; font-size: 32px; }
.font-1f4:before { content: "\f1f4"; font-size: 32px; }
.font-1f5:before { content: "\f1f5"; font-size: 32px; }
.font-1f6:before { content: "\f1f6"; font-size: 32px; }
.font-1f7:before { content: "\f1f7"; font-size: 32px; }
.font-1f8:before { content: "\f1f8"; font-size: 32px; }
.font-1f9:before { content: "\f1f9"; font-size: 32px; }
.font-1fa:before { content: "\f1fa"; font-size: 32px; }
.font-1fb:before { content: "\f1fb"; font-size: 32px; }
.font-1fc:before { content: "\f1fc"; font-size: 32px; }
.font-1fd:before { content: "\f1fd"; font-size: 32px; }
.font-1fe:before { content: "\f1fe"; font-size: 32px; }
.font-1ff:before { content: "\f1ff"; font-size: 32px; }
.font-200:before { content: "\f200"; font-size: 32px; }
.font-201:before { content: "\f201"; font-size: 32px; }
.font-202:before { content: "\f202"; font-size: 32px; }
.font-203:before { content: "\f203"; font-size: 32px; }
.font-204:before { content: "\f204"; font-size: 32px; }
.font-205:before { content: "\f205"; font-size: 32px; }
.font-206:before { content: "\f206"; font-size: 32px; }
.font-207:before { content: "\f207"; font-size: 32px; }
.font-208:before { content: "\f208"; font-size: 32px; }
.font-209:before { content: "\f209"; font-size: 32px; }
.font-20a:before { content: "\f20a"; font-size: 32px; }
.font-20b:before { content: "\f20b"; font-size: 32px; }
.font-20c:before { content: "\f20c"; font-size: 32px; }
.font-20d:before { content: "\f20d"; font-size: 32px; }
.font-20e:before { content: "\f20e"; font-size: 32px; }
.font-20f:before { content: "\f20f"; font-size: 32px; }
.font-210:before { content: "\f210"; font-size: 32px; }
.font-211:before { content: "\f211"; font-size: 32px; }
.font-212:before { content: "\f212"; font-size: 32px; }
.font-213:before { content: "\f213"; font-size: 32px; }
.font-214:before { content: "\f214"; font-size: 32px; }
.font-215:before { content: "\f215"; font-size: 32px; }
.font-216:before { content: "\f216"; font-size: 32px; }
.font-217:before { content: "\f217"; font-size: 32px; }
.font-218:before { content: "\f218"; font-size: 32px; }
.font-219:before { content: "\f219"; font-size: 32px; }
.font-21a:before { content: "\f21a"; font-size: 32px; }
.font-21b:before { content: "\f21b"; font-size: 32px; }
.font-21c:before { content: "\f21c"; font-size: 32px; }
.font-21d:before { content: "\f21d"; font-size: 32px; }
.font-21e:before { content: "\f21e"; font-size: 32px; }
.font-21f:before { content: "\f21f"; font-size: 32px; }