@font-face {
    font-family: 'assistant-reg';
    font-weight: normal;
    font-style: normal;
    src: url('wb/assistant-reg.eot') format('embedded-opentype'),
        url('wb/assistant-reg.woff') format('woff'),
        url('wb/assistant-reg.ttf') format('truetype'),
        url('wb/assistant-reg.svg') format('svg');
}

@font-face {
    font-family: 'assistant-b';
    font-weight: normal;
    font-style: normal;
    src: url('wb/assistant-b.eot') format('embedded-opentype'),
        url('wb/assistant-b.woff') format('woff'),
        url('wb/assistant-b.ttf') format('truetype'),
        url('wb/assistant-b.svg') format('svg');
}
@font-face {
    font-family: 'Arial';
    font-weight: normal;
    font-style: normal;
    src: url('wb/Arial.eot') format('embedded-opentype'),
        url('wb/Arial.woff') format('woff'),
        url('wb/Arial.ttf') format('truetype'),
        url('wb/Arial.svg') format('svg');
}

@font-face {
    font-family: 'Arial-Bold';
    font-weight: normal;
    font-style: normal;
    src: url('wb/Arial-Bold.eot') format('embedded-opentype'),
        url('wb/Arial-Bold.woff') format('woff'),
        url('wb/Arial-Bold.ttf') format('truetype'),
        url('wb/Arial-Bold.svg') format('svg');
} 



:root {
    --ft-b1: 'assistant-reg'; 
    --ft-b2: 'Arial';
    --ft-t1: 'assistant-b';
    --ft-t2: 'Arial-Bold'; 

    --ft-nav: 'Arial-Bold';
}

:root {
    --ft-xs: 60%;
    --ft-s: 80%;
    --ft-m: 18px;
    --h1: 350%; 
    --h2: 300%; 
    --h3: 250%; 
    --h4: 220%; 
    --h5: 150%; 
    --h6: 120%; 

    --hclr: #000;
    --bdclr: #555;
}

@media (max-width: 767px) {
    :root { 
        --ft-m: 15px; 

        --ft-xs: 60%;
        --ft-s: 80%; 
        --h4: 220%;
        /* --h1: 260%; 
        --h2: 210%; 
        --h3: 160%; 
         
        --h5: 120%; 
        --h6: 100%;  */
    }
} 

.ft1 {
    font-family: var(--ft-t1);
}
.ft2 {
    font-family: var(--ft-t2);
}
.ft3 {
    font-family: var(--ft-t3);
}
.fb1 {
    font-family: var(--ft-b1);
}
.fb2 {
    font-family: var(--ft-b2);
}
.fb3 {
    font-family: var(--ft-b3);
}
h1, .h1, h2, .h2, h3, .h3,
h4, .h4, h5, .h5, h6, .h6 { 
    --tt: initial;
    font-family: var(--ft-t1); 
    line-height: 1;
    text-transform: var(--tt);
    color: var(--hclr)
}
h1, h2, h3,
h4, h5, h6 {
    --m: 0 0 15px; 
    margin: var(--m); 
}
h1, .h1{ 
    font-size: var(--h1);  
}
h2, .h2{ 
    font-size: var(--h2);  
}
h3, .h3{ 
    font-size: var(--h3);  
}
h4, .h4{ 
    font-size: var(--h4);  
}
h5, .h5{ 
    font-size: var(--h5);  
}
h6, .h6{ 
    font-size: var(--h6);  
}
p {
    margin: 0 0 0;
}
p + p,
ul + p,
ol + p {
    margin: 15px 0 0;
}
b, strong {
    font-family: var(--ft-t1);
}