.FranklinGothic {
    font-family: $FranklinGothic !important;
    -webkit-font-smoothing: antialiased;
}

.Helvetica {
    font-family: $Helvetica !important;
    -webkit-font-smoothing: antialiased;
}

.Georgia {
    font-family: $Georgia;
    -webkit-font-smoothing: antialiased;
}

.h1,
.h2,
.h3,
.h4 {
    font-family: $RobotoCondensed !important;
}

.h1,
h1 {
    font-size: $text-1 !important;
    line-height: $line-height-1 !important;
}

.h2,
h2 {
    font-size: $text-2 !important;
    line-height: $line-height-3 !important;
}

.h3,
h3 {
    font-size: $text-3 !important;
    line-height: $line-height-5 !important;
}

.h4,
h4 {
    font-size: $text-4 !important;
    line-height: $line-height-7 !important;
}

.h5,
h5 {
    font-size: $text-6 !important;
    line-height: $line-height-8 !important;
}

@include add-breakpoint-prefixes {
    &text-1 {
        font-size: $text-1 !important;
    }

    &text-2 {
        font-size: $text-2 !important;
    }

    &text-3 {
        font-size: $text-3 !important;
    }

    &text-4 {
        font-size: $text-4 !important;
    }

    &text-5 {
        font-size: $text-5 !important;
    }

    &text-6 {
        font-size: $text-6 !important;
    }

    &text-7 {
        font-size: $text-7 !important;
    }

    &text-8 {
        font-size: $text-8 !important;
    }

    &text-9 {
        font-size: $text-9 !important;
    }

    &text-10 {
        font-size: $text-10 !important;
    }

    &text-11 {
        font-size: $text-11 !important;
    }

    &text-12 {
        font-size: $text-12 !important;
    }

    &text-13 {
        font-size: $text-13 !important;
    }

    &line-height-base {
        line-height: 1 !important;
    }

    &line-height-1 {
        line-height: $line-height-1 !important;
    }

    &line-height-2 {
        line-height: $line-height-2 !important;
    }

    &line-height-3 {
        line-height: $line-height-3 !important;
    }

    &line-height-4 {
        line-height: $line-height-4 !important;
    }

    &line-height-5 {
        line-height: $line-height-5 !important;
    }

    &line-height-6 {
        line-height: $line-height-6 !important;
    }

    &line-height-7 {
        line-height: $line-height-7 !important;
    }

    &line-height-8 {
        line-height: $line-height-8 !important;
    }

    &line-height-9 {
        line-height: $line-height-9 !important;
    }

    &line-height-10 {
        line-height: $line-height-10 !important;
    }

    &line-height-11 {
        line-height: $line-height-11 !important;
    }

    &line-height-12 {
        line-height: $line-height-12 !important;
    }

    &letter-spacing-1 {
        letter-spacing: 0.2rem !important;
    }

    &letter-spacing-2 {
        letter-spacing: 0.3rem !important;
    }

    &letter-spacing-3 {
        letter-spacing: 0.4rem !important;
    }

    &light {
        font-weight: $light !important;
    }

    &regular {
        font-weight: $regular !important;
    }

    &medium {
        font-weight: $medium !important;
    }

    &bold {
        font-weight: $bold !important;
    }
}

.slab {
    font-family: $RobotoSlab !important;
}

.cond {
    font-family: $RobotoCondensed !important;
}

.quote {
    &:before {
        content: '\201C';
    }

    &:after {
        content: '\201D';
    }
}

// TODO START: remove; implmented with breakpoint prefixes above
.light {
    font-weight: $light !important;
}

.normal,
.regular {
    font-weight: $regular !important;
}

.medium {
    font-weight: $medium !important;
}

.bold {
    font-weight: $bold !important;
}
// TODO END

.italic {
    font-style: italic !important;
}

.caps {
    text-transform: uppercase !important;
}

.lower {
    text-transform: lowercase !important;
}

.sentence {
    text-transform: lowercase !important;

    &::first-letter {
        text-transform: uppercase !important;
    }
}

@include add-breakpoint-prefixes {
    &text-left {
        text-align: left !important;
    }

    &text-center {
        text-align: center !important;
    }

    &text-right {
        text-align: right !important;
    }

    &text-justify {
        text-align: justify !important;
    }
}

@include add-breakpoint-prefixes {
    &nowrap {
        white-space: nowrap !important;
    }
}

@include add-breakpoint-prefixes {
    &wrap {
        white-space: normal !important;
    }
}

// DEPRECATED
.nowrap {
    white-space: nowrap !important;
}

@include add-breakpoint-prefixes {
    &line-clamp-1 {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    &line-clamp-2 {
        @supports (-webkit-line-clamp: 2) {
            /* autoprefixer: off */
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }

    &line-clamp-3 {
        @supports (-webkit-line-clamp: 3) {
            /* autoprefixer: off */
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
    }
}

.decoration-none {
    text-decoration: none !important;
}

.decoration-underline {
    text-decoration: underline !important;
}

.decoration-line-through {
    text-decoration: line-through !important;
}

.title-underline {
    background-position: 0 0.84em;
    background-repeat: repeat-x;
    background-size: 1px 15px;
}

.list-unstyled {
    margin-left: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}

.link-blue {
    color: $blue !important;

    &:hover {
        color: darken($blue, 20%) !important;
    }
}

.link-gray {
    color: $gray !important;

    &:hover {
        color: $blue !important;
    }
}

.link-gray-lighter {
    color: $gray-lighter !important;

    &:hover {
        color: $gray !important;
    }
}

.lh-2 {
    line-height: $line-height-2 !important;
}

html {
    font-family: $Roboto;
}

body {
    font-size: $text-7;
    line-height: $line-height-base;
}

a {
    text-decoration: none;
    color: $red;

    &:hover {
        color: $red-lighter;
        transition: color 0.15s ease 0s;
    }
}

b,
strong {
    font-weight: $bold;
}

em,
i {
    font-style: italic;
}

@include add-breakpoint-prefixes {
    &text-hide {
        position: absolute !important;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
}