@font-face {
  font-family: 'Sparks-Bar-Narrow';
  src: url('../webfonts/Sparks-Bar-Narrow.eot');
  src: url('../webfonts/Sparks-Bar-Narrow.eot?#iefix') format('embedded-opentype'),
       url('../webfonts/Sparks-Bar-Narrow.woff2') format('woff2'),
       url('../webfonts/Sparks-Bar-Narrow.woff') format('woff'),
       url('../webfonts/Sparks-Bar-Narrow.ttf') format('truetype'),
       url('../webfonts/Sparks-Bar-Narrow.svg#Sparks-Bar-Narrow') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Sparks-Bar-Extranarrow';
  src: url('../webfonts/Sparks-Bar-Extranarrow.eot');
  src: url('../webfonts/Sparks-Bar-Extranarrow.eot?#iefix') format('embedded-opentype'),
       url('../webfonts/Sparks-Bar-Extranarrow.woff2') format('woff2'),
       url('../webfonts/Sparks-Bar-Extranarrow.woff') format('woff'),
       url('../webfonts/Sparks-Bar-Extranarrow.ttf') format('truetype'),
       url('../webfonts/Sparks-Bar-Extranarrow.svg#Sparks-Bar-Extranarrow') format('svg');
  font-weight: normal;
  font-style: normal;
}

.sparks { text-rendering: optimizeLegibility; font-variant-ligatures: contextual; font-feature-settings: "calt" 1, "kern" 1; font-kerning: normal; -webkit-font-feature-settings: "calt", "kern"; -moz-font-feature-settings: "calt=1", "kern=1"; }

.dotline-extrathin { font-family: Sparks-Dotline-Extrathin; }
.dotline-thin { font-family: Sparks-Dotline-Thin; }
.dotline-medium { font-family: Sparks-Dotline-Medium; }
.dotline-thick { font-family: Sparks-Dotline-thick; }
.dotline-extrathick { font-family: Sparks-Dotline-Extrathick; }

.dot-extrasmall { font-family: Sparks-Dot-Extrasmall; }
.dot-small { font-family: Sparks-Dot-Small; }
.dot-medium { font-family: Sparks-Dot-Medium; }
.dot-large { font-family: Sparks-Dot-Large; }
.dot-extralarge { font-family: Sparks-Dot-Extralarge; }

.bar-extranarrow { font-family: Sparks-Bar-Extranarrow; }
.bar-narrow { font-family: Sparks-Bar-Narrow; }
.bar-medium { font-family: Sparks-Bar-Medium; }
.bar-wide { font-family: Sparks-Bar-Wide; }
.bar-extrawide { font-family: Sparks-Bar-Extrawide; }

.bar-responsive { font-family: Sparks-Bar-Extranarrow; }

@media only screen and (min-width : 1440px) {
    .bar-responsive { font-family: Sparks-Bar-Narrow; }
}