@font-face {
   font-family: 'sf-pro';
   src: url('../fonts/sf1.woff2') format('woff2'),
       /* Modern Browsers */
       url('../fonts/sf1.woff') format('woff');
       /* Modern Browsers */
   font-weight: 100;
   
   
}

@font-face {
   font-family: 'sf-pro';
   src: url('../fonts/sf2.woff2') format('woff2'),
       /* Modern Browsers */
       url('../fonts/sf2.woff') format('woff');
       /* Modern Browsers */
       font-weight: 200;
}

@font-face {
   font-family: 'sf-pro';
   src: url('../fonts/sf3.woff2') format('woff2'),
       /* Modern Browsers */
       url('../fonts/sf3.woff') format('woff');
       /* Modern Browsers */
       font-weight: 300;
}

@font-face {
   font-family: 'sf-pro';
   src: url('../fonts/sf4.woff2') format('woff2'),
       /* Modern Browsers */
       url('../fonts/sf4.woff') format('woff');
       /* Modern Browsers */
       font-weight: 400;
}

@font-face {
   font-family: 'sf-pro';
   src: url('../fonts/sf5.woff2') format('woff2'),
       /* Modern Browsers */
       url('../fonts/sf5.woff') format('woff');
       /* Modern Browsers */
       font-weight: 500;
}

@font-face {
   font-family: 'sf-pro';
   src: url('../fonts/sf6.woff2') format('woff2'),
       /* Modern Browsers */
       url('../fonts/sf6.woff') format('woff');
       /* Modern Browsers */
       font-weight: 600;
}

@font-face {
   font-family: 'sf-pro';
   src: url('../fonts/sf7.woff2') format('woff2'),
       /* Modern Browsers */
       url('../fonts/sf7.woff') format('woff');
       /* Modern Browsers */
       font-weight: 700;
}