@font-face {
    font-family: Roboto400;
    src:
            url(/assets/roboto-latin-400.5d4aeb4e.woff2) format('woff2'),
            url(/assets/roboto-latin-400.bafb105b.woff) format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: Roboto300;
    src:
            url(/assets/roboto-latin-300.55536c8e.woff2) format('woff2'),
            url(/assets/roboto-latin-300.a1471d1d.woff) format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: Roboto500;
    src:
            url(/assets/roboto-latin-500.28546717.woff2) format('woff2'),
            url(/assets/roboto-latin-500.de8b7431.woff) format('woff');
    font-weight: 500;
    font-style: normal;
}

/*
  The purpose of defining class stages is to
  re-render once a stage has been met. We start
  with the minimal default stage of sans-serif,
  and progressively re-render.
*/
html, body {
    font-family: sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    color: rgba(255, 255, 255, 0.7);
}

/*
  The defined stages now modify the display of
  elements once they are loaded.
*/

/*
  During primary stage we only load the Roboto font.
  Once it's loaded, update the body to use it.
*/
.font-stage-primary html,
.font-stage-primary body {
    font-family: Roboto400, sans-serif;
}

/* Prevent the secondary fonts from being tree-shaken away */
.font-stage-secondary .roboto300 {
    font-family: Roboto300, sans-serif;
}
.font-stage-secondary .roboto500 {
    font-family: Roboto500, sans-serif;
}


/*# sourceMappingURL=FontStager.css.map*/