@font-face {
    font-family: 'Trebuchet MS';
    src: local('Trebuchet MS Bold'), local('TrebuchetMS-Bold'),
    url('TrebuchetMS-Bold.woff2') format('woff2'),
    url('TrebuchetMS-Bold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Trebuchet MS';
    src: local('Trebuchet MS'), local('TrebuchetMS'),
    url('../../fonts/TrebuchetMS.woff2') format('woff2'),
    url('../../fonts/TrebuchetMS.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sua';
    src: local('Sua Regular'), local('Sua-Regular'),
    url('../../fonts/Sua-Regular.woff2') format('woff2'),
    url('../../fonts/Sua-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sua XBold';
    src: local('Sua XBold'), local('Sua-XBold'),
    url('../../fonts/Sua-XBold.woff2') format('woff2'),
    url('../../fonts/Sua-XBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sua';
    src: local('Sua Light'), local('Sua-Light'),
    url('../../fonts/Sua-Light.woff2') format('woff2'),
    url('../../fonts/Sua-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sua';
    src: local('Sua Thin'), local('Sua-Thin'),
    url('../../fonts/Sua-Thin.woff2') format('woff2'),
    url('../../fonts/Sua-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}



:root {
    --font-sans: "Sua", sans-serif;
    --font-sans2: "Trebuchet MS", sans-serif;
    --font-size-xxxxlarge: 13.5rem;
    --font-size-xxxlarge: 5.625rem;
    --font-size-xxlarge: 4.5rem;
    --font-size-xlarge: 3.75rem;
    --font-size-llarge: 2.3rem;
    --font-size-large: 1.875rem;
    --font-size-mid: 1.5rem;
    --font-size-md: 1.3125rem;
    --font-size-base: 1.125rem;
    --font-size-base-s: 1rem;
    --font-size-small: 0.875rem;
    --font-size-xsmall: 0.75rem;
    --font-size-xxsmall: 0.625rem;
    --font-size-xxxsmall: 0.5rem;
    --line-height: 1;
    --letter-spacing: -.0025em;
    --zoom: 1;
    /*font-size: 1.1111vw;*/
    font-size: calc(1.1111vw * var(--zoom));
}
@media (max-width: 480px) {
    :root {
        --font-size-xxxxlarge: 10.75rem;
        --font-size-xxxlarge: 3.125rem;
        --font-size-xxlarge: 3.4375rem;
        --font-size-xlarge: 1.875rem;
        --font-size-large: 1.4375rem;
        --font-size-mid: 1.25rem;
        --font-size-base-s: 0.875rem;
        --font-size-small: 0.75rem;
        font-size: 16px;
    }
}


.display-sans {
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: var(--letter-spacing);
    line-height: 0.88;
    font-size: var(--font-size-xxxxlarge);
    letter-spacing: calc(var(--letter-spacing) * 30);
}

.title1-sans {
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: var(--letter-spacing);
    line-height: 0.88;
    font-size: var(--font-size-xxxlarge);
    letter-spacing: calc(var(--letter-spacing) * 2);
}

.title2-sans {
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: var(--letter-spacing);
    line-height: 0.83;
    font-size: var(--font-size-xxlarge);
    text-transform: uppercase;
}

.title3-sans {
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: var(--letter-spacing);
    line-height: 0.83;
    font-size: var(--font-size-xlarge);
}

.title4-sans {
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: var(--letter-spacing);
    line-height: 0.83;
    font-size: var(--font-size-large);
}


.text-sans-large {
    font-family: var(--font-sans2);
    font-weight: 400;
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height);
    font-size: var(--font-size-large);
}

.text-sans-mid {
    font-family: var(--font-sans2);
    font-weight: 400;
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height);
    font-size: var(--font-size-mid);
}

.text-sans2-md {
    font-family: var(--font-sans2);
    font-weight: 400;
    line-height: var(--line-height);
    font-size: var(--font-size-md);
}

.text-sans-base {
    font-family: var(--font-sans2);
    font-weight: 400;
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height);
    font-size: var(--font-size-base);
}

.text-sans-small {
    font-family: var(--font-sans2);
    font-weight: 400;
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height);
    font-size: var(--font-size-small);
}

.text-sans-xsmall {
    font-family: var(--font-sans2);
    font-weight: 400;
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height);
    font-size: var(--font-size-xsmall);
}

html,
body {
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: var(--line-height);
    font-size: var(--font-size-base);
    letter-spacing: 0;
}

.text-sans2-sm {
    font-family: var(--font-sans2);
    font-weight: 400;
    line-height: var(--line-height);
    font-size: var(--font-size-xsmall);
    letter-spacing: var(--letter-spacing);
}