@font-face {
    font-family: 'Body Font';
    src: url('fonts/Roboto/Roboto-Regular.ttf');
}
@font-face {
    font-family: "Body Font";
    src: url("fonts/Roboto/Roboto-Light.ttf");
    font-weight: 300;
}
@font-face {
    font-family: "Body Font";
    src: url("fonts/Roboto/Roboto-Light.ttf");
    font-weight: 200;
}
@font-face {
    font-family: "Body Font";
    src: url("fonts/Roboto/Roboto-Bold.ttf");
    font-weight: 700;
}
@font-face {
    font-family: "Body Font";
    src: url("fonts/Roboto/Roboto-Bold.ttf");
    font-weight: bold;
}

@font-face {
    font-family: "Header";
    src: url("fonts/Roboto_Slab/RobotoSlab-Regular.ttf");
}
@font-face {
    font-family: "Header";
    src: url("fonts/Roboto_Slab/RobotoSlab-Light.ttf");
    font-weight: 300;
}
@font-face {
    font-family: "Header";
    src: url("fonts/Roboto_Slab/RobotoSlab-Light.ttf");
    font-weight: 200;
}
@font-face {
    font-family: "Header";
    src: url("fonts/Roboto_Slab/RobotoSlab-Bold.ttf");
    font-weight: 700;
}
@font-face {
    font-family: "Header";
    src: url("fonts/Roboto_Slab/RobotoSlab-Bold.ttf");
    font-weight: bold;
}

html,body {
    font-family:"Body Font","Helvetica Neue",Arial,Sans-Serif;
}

body {
    font-size: 13px;
    line-height: 22px;
    color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: "Body Font", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-top: 0;
    font-weight:normal;
    margin-block-end: initial;
    margin-inline-end: initial;
}

h1,.h1 {
    font-family: "Body Font", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:2em;
}

h2,.h2 {
    font-size:1.5em;
    color: #333;
}

h3,.h3 {
    font-size:1.17em;
}

h4,.h4 {
    font-size:1.12em;
}

h5 { font-size: .83em; }
h6 { font-size: .75em; }

@media (max-width:767px) {
    h1,.h1 {
        font-size:32px;
    }

    h2,.h2 {
        font-size: 26px;
        line-height: 32px;
    }

    h3,.h3 {
        font-size:20px;
    }

    h4,.h4 {
        font-size:14px;
    }
}