@font-face {
    font-family: "Roboto";
    src: local(Roboto Thin), url("../fonts/Roboto-Thin.eot");
    src: url("../fonts/Roboto-Thin.eot?#iefix") format("embedded-opentype"), 
         url("../fonts/Roboto-Thin.woff2") format("woff2"), 
         url("../fonts/Roboto-Thin.woff") format("woff"), 
         url("../fonts/Roboto-Thin.ttf") format("truetype");
    font-weight: 200;
}

@font-face {
    font-family: "Roboto";
    src: local(Roboto Light), url("../fonts/Roboto-Light.eot");
    src: url("../fonts/Roboto-Light.eot?#iefix") format("embedded-opentype"), 
         url("../fonts/Roboto-Light.woff2") format("woff2"),
         url("../fonts/Roboto-Light.woff") format("woff"), 
         url("../fonts/Roboto-Light.ttf") format("truetype");
    font-weight: 300;
}

@font-face {
    font-family: "Roboto";
    src: local(Roboto Regular), url("../fonts/Roboto-Regular.eot");
    src: url("../fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"), 
         url("../fonts/Roboto-Regular.woff2") format("woff2"), 
         url("../fonts/Roboto-Regular.woff") format("woff"), 
         url("../fonts/Roboto-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Medium.eot");
    src: url("../fonts/Roboto-Medium.eot?#iefix") format("embedded-opentype"), 
         url("../fonts/Roboto-Medium.woff2") format("woff2"),
         url("../fonts/Roboto-Medium.woff") format("woff"), 
         url("../fonts/Roboto-Medium.ttf") format("truetype");
    font-weight: 500;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Bold.eot");
    src: url("../fonts/Roboto-Bold.eot?#iefix") format("embedded-opentype"), 
         url("../fonts/Roboto-Bold.woff2") format("woff2"), 
         url("../fonts/Roboto-Bold.woff") format("woff"), 
         url("../fonts/Roboto-Bold.ttf") format("truetype");
    font-weight: 700;
}

html {
    line-height: 1.5;
    font-family: "Roboto", sans-serif;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.87);
}