/* WEBACKROOM Font Class */
/*---------------------------------------------------------------------------*
 * SF UI Display
 *---------------------------------------------------------------------------*/

/** Black */
@font-face {
  font-family: "SF Display Black";
  font-weight: 900;
  src: url("../fonts/SF-UI-Display-Black.otf");
}

/** Bold */
@font-face {
  font-family: "SF Display Bold";
  font-weight: 700;
  src: url("../fonts/SF-UI-Display-Bold.otf");
}

/** Heavy */
@font-face {
  font-family: "SF Display Heavy";
  font-weight: 800;
  src: url("../fonts/SF-UI-Display-Heavy.otf");
}

/** Light */
@font-face {
  font-family: "SF Display Light";
  font-weight: 200;
  src: url("../fonts/SF-UI-Display-Light.otf");
}

/** Medium */
@font-face {
  font-family: "SF Display Medium";
  font-weight: 500;
  src: url("../fonts/SF-UI-Display-Medium.otf");
}

/** Regular */
@font-face {
  font-family: "SF Display Regular";
  font-weight: 400;
  src: url("../fonts/SF-UI-Display-Regular.otf");
}

/** Semibold */
@font-face {
  font-family: "SF Display Semibold";
  font-weight: 600;
  src: url("../fonts/SF-UI-Display-Semibold.otf");
}

/** Thin */
@font-face {
  font-family: "SF Display Thin";
  font-weight: 300;
  src: url("../fonts/SF-UI-Display-Thin.otf");
}

/** Ultralight */
@font-face {
  font-family: "SF Display Ultralight";
  font-weight: 100;
  src: url("../fonts/SF-UI-Display-Ultralight.otf");
}

/*---------------------------------------------------------------------------*
 * SF UI Text
 *---------------------------------------------------------------------------*/

/** Bold */
@font-face {
  font-family: "SF Text Bold";
  font-weight: 700;
  src: url("../fonts/SF-UI-Text-Bold.otf");
}

/** Bold Italic */
@font-face {
  font-family: "SF Text Bold Italic";
  font-weight: 700;
  font-style: italic;
  src: url("../fonts/SF-UI-Text-BoldItalic.otf");
}

/** Heavy */
@font-face {
  font-family: "SF Text Heavy";
  font-weight: 800;
  src: url("../fonts/SF-UI-Text-Heavy.otf");
}

/** Heavy Italic */
@font-face {
  font-family: "SF Text Heavy Italic";
  font-weight: 800;
  font-style: italic;
  src: url("../fonts/SF-UI-Text-HeavyItalic.otf");
}

/** Light */
@font-face {
  font-family: "SF Text Light";
  font-weight: 200;
  src: url("../fonts/SF-UI-Text-Light.otf");
}

/** Light Italic */
@font-face {
  font-family: "SF Text Light Italic";
  font-weight: 200;
  font-style: italic;
  src: url("../fonts/SF-UI-Text-HeavyItalic.otf");
}

/** Medium */
@font-face {
  font-family: "SF Text Medium";
  font-weight: 500;
  src: url("../fonts/SF-UI-Text-Medium.otf");
}
/** Medium Italic */
@font-face {
  font-family: "SF Text Medium Italic";
  font-weight: 500;
  font-style: italic;
  src: url("../fonts/SF-UI-Text-MediumItalic.otf");
}
/** Regular */
@font-face {
  font-family: "SF Text Regular";
  font-weight: 400;
  src: url("../fonts/SF-UI-Text-Regular.otf");
}

/** Regular Italic */
@font-face {
  font-family: "SF Text Regular Italic";
  font-weight: 400;
  font-style: italic;
  src: url("../fonts/SF-UI-Text-RegularItalic.otf");
}

/** Semibold */
@font-face {
  font-family: "SF Text Semibold";
  font-weight: 600;
  src: url("../fonts/SF-UI-Text-Semibold.otf");
}

/** Semibold Italic */
@font-face {
  font-family: "SF Text Semibold Italic";
  font-weight: 600;
  font-style: italic;
  src: url("../fonts/SF-UI-Text-SemiboldItalic.otf");
}


/** Ultrathin */
@font-face {
  font-family: "SF Text Ultrathin";
  font-weight: 100;
  src: url("../fonts/SF-UI-Text-Ultrathin.otf");
}
/** Ultrathin Italic */
@font-face {
  font-family: "SF Text Ultrathin Italic";
  font-weight: 100;
  font-style: italic;
  src: url("../fonts/SF-UI-Text-UltrathinItalic.otf");
}

/*---------------------------------------------------------------------------*
 * SF Mono
 *---------------------------------------------------------------------------*/

/** Bold */
@font-face {
  font-family: "SF Mono Bold";
  font-weight: 700;
  src: url("../fonts/SFMono-Bold.otf");
}

/** Bold Italic */
@font-face {
  font-family: "SF Mono Bold Italic";
  font-weight: 700;
  font-style: italic;
  src: url("../fonts/SFMono-BoldItalic.otf");
}

/** Heavy */
@font-face {
  font-family: "SF Mono Heavy";
  font-weight: 800;
  src: url("../fonts/SFMono-Heavy.otf");
}

/** Heavy Italic */
@font-face {
  font-family: "SF Mono Heavy Italic";
  font-weight: 800;
  font-style: italic;
  src: url("../fonts/SFMono-HeavyItalic.otf");
}

/** Light */
@font-face {
  font-family: "SF Mono Light";
  font-weight: 200;
  src: url("../fonts/SFMono-Light.otf");
}

/** Light Italic */
@font-face {
  font-family: "SF Mono Light Italic";
  font-weight: 200;
  font-style: italic;
  src: url("../fonts/SFMono-HeavyItalic.otf");
}

/** Medium */
@font-face {
  font-family: "SF Mono Medium";
  font-weight: 500;
  src: url("../fonts/SFMono-Medium.otf");
}

/** Medium Italic */
@font-face {
  font-family: "SF Mono Medium Italic";
  font-weight: 500;
  font-style: italic;
  src: url("../fonts/SFMono-MediumItalic.otf");
}

/** Regular */
@font-face {
  font-family: "SF Mono Regular";
  font-weight: 400;
  src: url("../fonts/SFMono-Regular.otf");
}

/** Regular Italic */
@font-face {
  font-family: "SF Mono Regular Italic";
  font-weight: 400;
  font-style: italic;
  src: url("../fonts/SFMono-RegularItalic.otf");
}

/** Semibold */
@font-face {
  font-family: "SF Mono Semibold";
  font-weight: 600;
  src: url("../fonts/SFMono-Semibold.otf");
}

/** Semibold Italic */
@font-face {
  font-family: "SF Mono Semibold Italic";
  font-weight: 600;
  font-style: italic;
  src: url("../fonts/SFMono-SemiboldItalic.otf");
}
/* FONT FAMILIES */
.ff-display-black{ font-family: "SF Display Black"; }
.ff-display-bold{ font-family: "SF Display Bold"; }
.ff-display-heavy{ font-family: "SF Display Heavy"; }
.ff-display-light{ font-family: "SF Display Light"; }
.ff-display-medium{ font-family: "SF Display Medium"; }
.ff-display-regular{ font-family: "SF Display Regular"; }
.ff-display-semibold{ font-family: "SF Display Semibold"; }
.ff-display-thin{ font-family: "SF Display Thin"; }
.ff-display-ultralight{ font-family: "SF Display Ultralight"; }
.ff-text-bold{ font-family: "SF Text Bold"; }
.ff-text-bold-italic{ font-family: "SF Text Bold Italic"; }
.ff-text-heavy{ font-family: "SF Text Heavy"; }
.ff-text-heavy-italic{ font-family: "SF Text Heavy Italic"; }
.ff-text-light{ font-family: "SF Text Light"; }
.ff-text-light-italic{ font-family: "SF Text Light Italic"; }
.ff-text-medium{ font-family: "SF Text Medium"; }
.ff-text-medium-italic{ font-family: "SF Text Medium Italic"; }
.ff-text-regular{ font-family: "SF Text Regular"; }
.ff-text-regular-italic{ font-family: "SF Text Regular Italic"; }
.ff-text-semibold{ font-family: "SF Text Semibold"; }
.ff-text-semibold-italic{ font-family: "SF Text Semibold Italic"; }
.ff-text-ultrathin{ font-family: "SF Text Ultrathin"; }
.ff-text-ultrathin-italic{ font-family: "SF Text Ultrathin Italic"; }
.ff-mono-bold{ font-family: "SF Mono Bold"; }
.ff-mono-bold-italic{ font-family: "SF Mono Bold Italic"; }
.ff-mono-bold-heavy{ font-family: "SF Mono Heavy"; }
.ff-mono-heavy-italic{ font-family: "SF Mono Heavy Italic"; }
.ff-mono-light{ font-family: "SF Mono Light"; }
.ff-mono-light-italic{ font-family: "SF Mono Light Italic";}
.ff-mono-medium{ font-family: "SF Mono Medium"; }
.ff-mono-medium-italic{ font-family: "SF Mono Medium Italic"; }
.ff-mono-regular{ font-family: "SF Mono Regular"; }
.ff-mono-regular-italic{ font-family: "SF Mono Regular Italic"; }
.ff-mono-semibold{ font-family: "SF Mono Semibold"; }
.ff-mono-semibold-italic{ font-family: "SF Mono Semibold Italic"; }
 


/* FONT-WEIGHTS */
.fw-black{ font-weight: 900; }
.fw-heavy{ font-weight: 800; }
.fw-bold{ font-weight: 700; }
.fw-semibold{ font-weight: 600; }
.fw-medium{ font-weight: 500; }
.fw-regular{ font-weight: 400; }
.fw-thin{ font-weight: 300; }
.fw-light{ font-weight: 200; }
.fw-ultrathin{ font-weight: 100; }
/* FONT-STYLES */
.italic{font-style: italic}
.regular{font-style:normal}

/* FONT-SIZES */
.fs-0_1{font-size:0.1em;}
.fs-0_2{font-size:0.2em;}
.fs-0_3{font-size:0.3em;}
.fs-0_4{font-size:0.4em;}
.fs-0_5{font-size:0.5em;}
.fs-0_6{font-size:0.6em;}
.fs-0_7{font-size:0.7em;}
.fs-0_8{font-size:0.8em;}
.fs-0_9{font-size:0.9em;}
.fs-1{font-size:1em;}
.fs-1_1{font-size:1.1em;}
.fs-1_2{font-size:1.2em;}
.fs-1_3{font-size:1.3em;}
.fs-1_4{font-size:1.4em;}
.fs-1_5{font-size:1.5em;}
.fs-1_6{font-size:1.6em;}
.fs-1_7{font-size:1.7em;}
.fs-1_8{font-size:1.8em;}
.fs-1_9{font-size:1.9em;}
.fs-2{font-size:2em;}
.fs-2_1{font-size:2.1em;}
.fs-2_2{font-size:2.2em;}
.fs-2_3{font-size:2.3em;}
.fs-2_4{font-size:2.4em;}
.fs-2_5{font-size:2.5em;}
.fs-2_6{font-size:2.6em;}
.fs-2_7{font-size:2.7em;}
.fs-2_8{font-size:2.8em;}
.fs-2_9{font-size:2.9em;}
.fs-3{  font-size:3em;}
.fs-3_1{font-size:3.1em;}
.fs-3_2{font-size:3.2em;}
.fs-3_3{font-size:3.3em;}
.fs-3_4{font-size:3.4em;}
.fs-3_5{font-size:3.5em;}
.fs-3_6{font-size:3.6em;}
.fs-3_7{font-size:3.7em;}
.fs-3_8{font-size:3.8em;}
.fs-3_9{font-size:3.9em;}
.fs-4{  font-size:4em;}
.fs-4_1{font-size:4.1em;}
.fs-4_2{font-size:4.2em;}
.fs-4_3{font-size:4.3em;}
.fs-4_4{font-size:4.4em;}
.fs-4_5{font-size:4.5em;}
.fs-4_6{font-size:4.6em;}
.fs-4_7{font-size:4.7em;}
.fs-4_8{font-size:4.8em;}
.fs-4_9{font-size:4.9em;}