/*
Import typefaces
*/
@font-face {
    font-family: FKScreamer;
    src: url('../fonts/FKScreamer-Bold.otf');
}

@font-face {
    font-family: UntitledSans-Bold;
    src: url('../fonts/UntitledSans-Bold.otf');
}

@font-face {
    font-family: UntitledSans-Black;
    src: url('../fonts/UntitledSans-Black.otf');
}

/* 
Text Style 
*/
.text--uppercase {
	text-transform: uppercase;
}

.text--lowercase {
	text-transform: lowercase;
}

.text--italic {
	font-style: italic;
}

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

.text--align-center {
	text-align: center;
    margin-left: auto;
    margin-right: auto;
}

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

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


/* 
Typography
*/
.type--display {
    font-family: FKScreamer, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 21vw;
    letter-spacing: -.002em;
    line-height: 80%;
    text-transform: uppercase;
}

.type--title {
    font-family: UntitledSans-Bold, Helvetica, Arial, sans-serif;
    font-size: 3rem;
    letter-spacing: -0.025em;
    line-height: 95%;
}

.type--body {
    font-family: UntitledSans-Black, Helvetica, Arial, sans-serif;
    font-size: 2rem;
    letter-spacing: -0.017em;
    line-height: 120%;
}

.type--caption {
    font-family: UntitledSans-Black, Helvetica, Arial, sans-serif;
    font-size: 1.5rem;
    letter-spacing: -0.015em;
    line-height: 120%;
}


/* DESKTOP */
@media only screen and (min-width: 1024px) {
    .type--title {
        font-size: 4rem;
        letter-spacing: -0.03em;
        line-height: 93%;
    }

    .type--display {
        font-size: 30rem;
        letter-spacing: -.002em;
        line-height: 80%;
        text-transform: uppercase;
    }
}