@font-face {
  font-family: 'Metropolis';
  src: url('Metropolis-Thin.otf'), url('Metropolis-Thin.eot');
  font-weight: 100;
}

@font-face {
  font-family: 'Metropolis';
  src: url('Metropolis-ThinItalic.otf'), url('Metropolis-ThinItalic.eot');
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('Metropolis-ExtraLight.otf'), url('Metropolis-ExtraLight.eot');
  font-weight: 200;
}

@font-face {
  font-family: 'Metropolis';
  src: url('Metropolis-ExtraLightItalic.otf'), url('Metropolis-ExtraLightItalic.eot');
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('Metropolis-Light.otf'), url('Metropolis-Light.eot');
  font-weight: 300;
}

@font-face {
  font-family: 'Metropolis';
  src: url('Metropolis-LightItalic.otf'), url('Metropolis-LightItalic.eot');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('Metropolis-Regular.otf'), url('Metropolis-Regular.eot');
  font-weight: 400;
}

@font-face {
  font-family: 'Metropolis';
  src: url('Metropolis-RegularItalic.otf'), url('Metropolis-RegularItalic.eot');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('Metropolis-Medium.otf'), url('Metropolis-Medium.eot');
  font-weight: 500;
}

@font-face {
  font-family: 'Metropolis';
  src: url('Metropolis-Medium.otf'), url('Metropolis-Medium.eot');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('Metropolis-SemiBold.otf'), url('Metropolis-SemiBold.eot');
  font-weight: 600;
}

@font-face {
  font-family: 'Metropolis';
  src: url('Metropolis-SemiBoldItalic.otf'), url('Metropolis-SemiBoldItalic.eot');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('Metropolis-Bold.otf'), url('Metropolis-Bold.eot');
  font-weight: 700;
}

@font-face {
  font-family: 'Metropolis';
  src: url('Metropolis-BoldItalic.otf'), url('Metropolis-BoldItalic.eot');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('Metropolis-ExtraBold.otf'), url('Metropolis-ExtraBold.eot');
  font-weight: 800;
}

@font-face {
  font-family: 'Metropolis';
  src: url('Metropolis-ExtraBoldItalic.otf'), url('Metropolis-ExtraBoldItalic.eot');
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('Metropolis-Black.otf'), url('Metropolis-Black.eot');
  font-weight: 900;
}

@font-face {
  font-family: 'Metropolis';
  src: url('Metropolis-BlackItalic.otf'), url('Metropolis-BlackItalic.eot');
  font-weight: 900;
  font-style: italic;
}