/*
Import typefaces
*/
@font-face {
    font-family: HKGrotesk;
    src: url('../fonts/HKGrotesk-Bold.otf');
    font-style: normal;
	font-weight: 800;
	font-stretch: normal;
}


/* 
Typography
*/
.t-small {
    font-family: HKGrotesk, serif;
    font-size: 1.15rem;
    line-height: 120%;
    letter-spacing: -.025em;
}

.t-medium {
    font-family: HKGrotesk, serif;
    font-size: 1.5rem;
    line-height: 110%;
    letter-spacing: -.02em;
}

.t-large {
    font-family: HKGrotesk, serif;
    font-size: 9vw;
    line-height: 100%;
    letter-spacing: -.025em;
}

.t-large::before {
    content: "";
    display: table;
    margin-bottom: -.7vw;
}

.t-large::after {
    content: "";
    display: table;
    margin-bottom: -2vw;
}

@media only screen and (min-width: 768px) {
    .t-large {font-size: 2.5rem;}
    .t-large::before {margin-bottom: -.3rem;}
    .t-large::after {margin-bottom: -.6rem;}
}
@media only screen and (min-width: 1024px) {
    .t-large {font-size: 3rem;}
    .t-large::before {margin-bottom: -.25rem;}
    .t-large::after {margin-bottom: -.65rem;}

    .t-medium {font-size: 1.3rem;}
    .t-small {font-size: 1rem;}
}


/* 
Text Style 
*/
.t-uppercase {text-transform: uppercase;}
.t-lowercase {text-transform: lowercase;}
.t-left {text-align: left;}
.t-center {text-align: center;}
.t-right {text-align: right;}
.t-underline {text-decoration: underline;}

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