/* Estilos base */
body {
    font-family: "lato", sans-serif;
    font-weight: 400;
    font-style: normal;
}

h1.h1-title {
    font-family: var(--font-family-primary);
    font-size: 66px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
    letter-spacing: -1.32px;
}

@media (max-width: 1024px) {
    h1.h1-title {
        font-size: 50px;
        letter-spacing: -1px;
    }
}

@media (max-width: 768px) {
    h1.h1-title {
        font-size: 32px;
        letter-spacing: -0.8px;
    }
}


@media (max-width: 480px) {
    h1.h1-title {
        font-size: 32px;
        letter-spacing: -0.8px;
    }
}

h1.h1-title-tag {
    font-family: var(--font-family-primary);
    font-size: 22.726px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%;
    letter-spacing: 1.364px;
}

@media (max-width: 768px) {
    h1.h1-title-tag {
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 160%;
        letter-spacing: 0.96px;
    }
}

h1.h1-title-use-case {
    font-family: var(--font-family-primary);
    font-size: 58px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
    /* 63.8px */
    letter-spacing: -1.16px;
}

@media (max-width: 768px) {
    h1.h1-title-use-case {
        font-size: 42px;
        letter-spacing: -0.84px;
    }
}

h2.h2-title-hero {
    font-family: var(--font-family-primary);
    font-size: 66px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
    letter-spacing: -1.32px;
}

@media (max-width: 1024px) {
    h2.h2-title-hero {
        font-size: 50px;
        letter-spacing: -1px;
    }
}

@media (max-width: 768px) {
    h2.h2-title-hero {
        font-size: 32px;
        letter-spacing: -0.8px;
    }
}


@media (max-width: 480px) {
    h2.h2-title-hero {
        font-size: 32px;
        letter-spacing: -0.8px;
    }
}

h2.h2-title {
    /* H2 */
    font-family: var(--font-family-primary);
    font-size: 52px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
    /* 57.2px */
    letter-spacing: -0.52px;
}


@media (max-width: 768px) {
    h2.h2-title {
        font-size: 24px;
    }
}

h3.h3-title {
    /* H3 */
    font-family: var(--font-family-primary);
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    /* 39.6px */
    letter-spacing: -0.72px;
}

@media (max-width: 1024px) {
    h3.h3-title {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    h3.h3-title {
        font-size: 26px;
    }
}

@media (max-width: 480px) {
    h3.h3-title {
        font-size: 22px;
    }
}

h4.h4-title {

    /* H4 */
    font-family: var(--font-family-primary);
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 105%;
}

@media (max-width: 1024px) {
    h4.h4-title {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    h4.h4-title {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    h4.h4-title {
        font-size: 24px;
    }
}

h5.h5-title {
    font-family: var(--font-family-primary);
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 105%;
}

@media (max-width: 768px) {
    h5.h5-title {
        font-size: 16px;
    }
}

/* Genomcore Nav Items */

.nav-item {
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}

p.txt-subtitle {
    font-family: var(--font-family-primary);
    font-size: 22px;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: 0.22px;
}

@media (max-width: 1024px) {
    p.txt-subtitle {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    p.txt-subtitle {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    p.txt-subtitle {
        font-size: 14px;
    }
}

.tag-title {
    font-family: var(--font-family-primary);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%;
    letter-spacing: 1.08px;
    text-transform: uppercase;
}

.tag-medium {
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: 0.96px;
}

@media (max-width: 768px) {
    .tag-medium {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%;
        letter-spacing: 0.84px;
    }
}


.tag-small {
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: 0.84px;
}

@media (max-width: 768px) {
    .tag-small {
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
        /* 16px */
        letter-spacing: 0.6px;
    }
}

p {
    & strong {
        font-weight: 600;
    }
}

p.txt-large {
    /* TXT - Large */
    font-family: var(--font-family-primary);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: 0.18px;


}

@media (max-width: 768px) {
    p.txt-large {
        font-size: 16px;
        line-height: 18px;
        text-align: left;
    }
}

p.txt-medium {
    /* TXT - Medium */
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    /* 20.8px */
    letter-spacing: 0.16px;
}

p.txt-small {

    /* TXT - Small */
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    /* 18.2px */
    letter-spacing: 0.14px;
}

p.txt-xsmall {
    color: var(--blue-color);

    /* TXT - XSmall */
    font-family: var(--font-family-primary);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    /* 15.6px */
    letter-spacing: 0.12px;
}


/* Estilo italic normal */
.italic {
    font-weight: 400;
    font-style: italic;
}

/* Medium */
.medium {
    font-weight: 500;
    font-style: normal;
}

/* Medium Italic */
.medium-italic {
    font-weight: 500;
    font-style: italic;
}

/* Semibold */
.semibold {
    font-weight: 600;
    font-style: normal;
}

/* Semibold Italic */
.semibold-italic {
    font-weight: 600;
    font-style: italic;
}

/* Bold */
.bold {
    font-weight: 700;
    font-style: normal;
}

/* Bold Italic */
.bold-italic {
    font-weight: 700;
    font-style: italic;
}