body, html {
    font-family: 'Open Sans',sans-serif;
    color: var(--primary-text-color);
    font-weight: var(--regular-font-weight);
}

body .h1--large {
    font-size: 64px;
    line-height: var(--smallest-line-height);
}

body .h1--small {
    font-size: 48px;
    line-height: var(--small-line-height);
}

body .h1--thick {
    font-weight: var(--bold-font-weight);
}

body .h2--main {
    font-size: 36px;
    line-height: var(--small-line-height);
}

body .h2--thick {
    font-weight: var(--bold-font-weight);
}

body .h2--thin {
    font-weight: var(--light-font-weight);
}

body .h3--main {
    font-size: 28px;
    line-height: var(--small-line-height);
}

body .h3--thick {
    font-weight: var(--semibold-font-weight);
}

body .h3--thin {
    font-weight: var(--light-font-weight);
}

body .h4--main, h2 {
    font-size: 22px;
    line-height: var(--small-line-height);
}

body .h4--thick, h2 {
    font-weight: var(--semibold-font-weight);
}

body .h5--main, h3 {
    font-size: 18px;
    line-height: var(--small-line-height);
}

body .h5--thick, h3 {
    font-weight: var(--semibold-font-weight);
}

body .h6--main, h4, h5 {
    font-size: 16px;
    line-height: var(--small-line-height);
}

body h5.h6--main {
    font-style: italic;
}

body .h6--thick, h4, h5 {
    font-weight: var(--semibold-font-weight);
}

.primary-semi-bold-text {
    font-weight: var(--semibold-font-weight)!important;
}

.primary-large-text {
    font-size: 26px;
    line-height: var(--medium-line-height);
}

.primary-medium-text, p {
    font-size:  var(--medium-font-size);
    line-height: var(--medium-line-height);
}

.primary-small-text {
    font-size: var(--small-font-size);
    line-height: var(--medium-line-height);
}

.primary-smallest-text {
    font-size: var(--smallest-font-size);
    line-height: var(--small-line-height);
}

.secondary-medium-text {
    font-size: 20px;
    line-height: var(--medium-line-height);
}

.h1--large.black-text,
.h1--small.black-text,
.h2--main.black-text,
.h3--main.black-text,
.h4--main.black-text,
.h5--main.black-text,
.h6--main.black-text {
    color: var(--secondary-text-color)!important;
}

.black-text {
    color: var(--primary-text-color)!important;
}

.cyan-text {
    color: var(--primary-cyan-color)!important;
}

.white-text {
    color: var(--white-color)!important;
}

.brand-color-text {
    color: var(--secondary-cyan-color)!important;
}

.hyphens--auto {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.hyphens--auto,.hyphens--manual {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.hyphens--manual {
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
}

.center-text {
    text-align: center;
}

/* needs to be specified webkit-line-clamp-3 */
.truncate-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.webkit-line-clamp-2 {
    -webkit-line-clamp: 2;
}

.webkit-line-clamp-3 {
    -webkit-line-clamp: 3;
}

.webkit-line-clamp-4 {
    -webkit-line-clamp: 4;
}

@media screen and (max-width: 930px) {
    body .h1--large {
        font-size: 46px;
    }

    body .h1--small {
        font-size: 40px;
    }

    .primary-large-text {
        font-size: 20px;
    }
}

@media screen and (max-width: 770px) {
    body .h1--small {
        font-size: 38px;
    }

    body .h2--main {
        font-size: 32px;
    }
}

@media screen and (max-width: 576px) {
    body .h1--large {
        font-size: 40px;
    }

    body .h1--small {
        font-size: 30px;
    }

    body .h2--main {
        font-size: 26px;
    }

    body .h3--main {
        font-size: 24px;
    }
}