@font-face {
    font-family: 'MierA';
    font-weight: 800;
    src: url(fonts/MierA/MierA-Bold.woff),
     url(fonts/MierA/MierA-Bold.woff2);
}
@font-face {
    font-family: 'MierA';
    font-weight: 800;
    font-style: italic;
    src: url(fonts/MierA/MierA-BoldItalic.woff),
     url(fonts/MierA/MierA-BoldItalic.woff2);
}
@font-face {
    font-family: 'MierA';
    font-weight: 400;
    src: url(fonts/MierA/MierA-Book.woff),
     url(fonts/MierA/MierA-Book.woff2);
}
@font-face {
    font-family: 'MierA';
    font-weight: 400;
    font-style: italic;
    src: url(fonts/MierA/MierA-BookItalic.woff),
     url(fonts/MierA/MierA-BookItalic.woff2);
}
@font-face {
    font-family: 'MierA';
    font-weight: 300;
    src: url(fonts/MierA/MierA-Light.woff),
     url(fonts/MierA/MierA-Light.woff2);
}
@font-face {
    font-family: 'MierA';
    font-weight: 200;
    src: url(fonts/MierA/MierA-Thin.woff),
     url(fonts/MierA/MierA-Thin.woff2);
}




.big-title{
    font-size: var(--font-size-big-title);
    line-height: 100%;
}
.number{
    font-size: var(--font-size-number);
    font-weight: var(--font-weight-number);
    color: var(--color-scafi-base-bright);
    line-height: 100%;
}
.quote{
    font-size: var(--font-size-quote);
    line-height: 100%;
}
.subhead{
    font-size: var(--font-size-subhead);
    font-weight: var(--font-weight-book);
    line-height: 110%;
}
.title{
    font-size: var(--font-size-title);
    line-height: 110%;
}
.text{
    font-size: var(--font-size-text);
}
.text-link{
    font-size: var(--font-size-text-link);
}
.text-title{
    font-size: var(--font-size-text-title);
}
.subtext{
    font-size: var(--font-size-subtext);
}
.subtext-link{
    font-size: var(--font-size-subtext-link);
}
.subtext-bold{
    font-size: var(--font-size-subtext-bold);
}
.small-caps{
    font-size: var(--font-size-small-caps);
    font-weight: var(--font-weight-small-caps);
}
.big-icon{
    font-size: var(--font-size-big-icon);
}
.small-icon{
    font-size: var(--font-size-small-icon);
}