@font-face {
    font-family: 'IBMPlexSans-Bold';
    src: url(../fonts/IBMPlexSans-Bold.eot);
    src: url(../fonts/IBMPlexSans-Bold.eot?#iefix) format("embedded-opentype"), 
        url(../fonts/IBMPlexSans-Bold.woff2) format("woff2"), 
        url(../fonts/IBMPlexSans-Bold.woff) format("woff"), 
        url(../fonts/IBMPlexSans-Bold.ttf) format("truetype"); 
}

@font-face {
    font-family: 'IBMPlexSans-BoldItalic';
    src: url(../fonts/IBMPlexSans-BoldItalic.eot);
    src: url(../fonts/IBMPlexSans-BoldItalic.eot?#iefix) format("embedded-opentype"), 
        url(../fonts/IBMPlexSans-BoldItalic.woff2) format("woff2"), 
        url(../fonts/IBMPlexSans-BoldItalic.woff) format("woff"), 
        url(../fonts/IBMPlexSans-BoldItalic.ttf) format("truetype"); 
}

@font-face {
    font-family: 'IBMPlexSans-ExtraLight';
    src: url(../fonts/IBMPlexSans-ExtraLight.eot);
    src: url(../fonts/IBMPlexSans-ExtraLight.eot?#iefix) format("embedded-opentype"), 
        url(../fonts/IBMPlexSans-ExtraLight.woff2) format("woff2"), 
        url(../fonts/IBMPlexSans-ExtraLight.woff) format("woff"), 
        url(../fonts/IBMPlexSans-ExtraLight.ttf) format("truetype"); 
}

@font-face {
    font-family: 'IBMPlexSans-ExtraLightItalic';
    src: url(../fonts/IBMPlexSans-ExtraLightItalic.eot);
    src: url(../fonts/IBMPlexSans-ExtraLightItalic.eot?#iefix) format("embedded-opentype"), 
        url(../fonts/IBMPlexSans-ExtraLightItalic.woff2) format("woff2"), 
        url(../fonts/IBMPlexSans-ExtraLightItalic.woff) format("woff"), 
        url(../fonts/IBMPlexSans-ExtraLightItalic.ttf) format("truetype"); 
}

@font-face {
    font-family: 'IBMPlexSans-Italic';
    src: url(../fonts/IBMPlexSans-Italic.eot);
    src: url(../fonts/IBMPlexSans-Italic.eot?#iefix) format("embedded-opentype"), 
        url(../fonts/IBMPlexSans-Italic.woff2) format("woff2"), 
        url(../fonts/IBMPlexSans-Italic.woff) format("woff"), 
        url(../fonts/IBMPlexSans-Italic.ttf) format("truetype"); 
}

@font-face {
    font-family: 'IBMPlexSans-Light';
    src: url(../fonts/IBMPlexSans-Light.eot);
    src: url(../fonts/IBMPlexSans-Light.eot?#iefix) format("embedded-opentype"), 
        url(../fonts/IBMPlexSans-Light.woff2) format("woff2"), 
        url(../fonts/IBMPlexSans-Light.woff) format("woff"), 
        url(../fonts/IBMPlexSans-Light.ttf) format("truetype"); 
}

@font-face {
    font-family: 'IBMPlexSans-LightItalic';
    src: url(../fonts/IBMPlexSans-LightItalic.eot);
    src: url(../fonts/IBMPlexSans-LightItalic.eot?#iefix) format("embedded-opentype"), 
        url(../fonts/IBMPlexSans-LightItalic.woff2) format("woff2"), 
        url(../fonts/IBMPlexSans-LightItalic.woff) format("woff"), 
        url(../fonts/IBMPlexSans-LightItalic.ttf) format("truetype"); 
}

@font-face {
    font-family: 'IBMPlexSans-Medium';
    src: url(../fonts/IBMPlexSans-Medium.eot);
    src: url(../fonts/IBMPlexSans-Medium.eot?#iefix) format("embedded-opentype"), 
        url(../fonts/IBMPlexSans-Medium.woff2) format("woff2"), 
        url(../fonts/IBMPlexSans-Medium.woff) format("woff"), 
        url(../fonts/IBMPlexSans-Medium.ttf) format("truetype");
}

@font-face {
    font-family: 'IBMPlexSans-MediumItalic';
    src: url(../fonts/IBMPlexSans-MediumItalic.eot);
    src: url(../fonts/IBMPlexSans-MediumItalic.eot?#iefix) format("embedded-opentype"), 
        url(../fonts/IBMPlexSans-MediumItalic.woff2) format("woff2"), 
        url(../fonts/IBMPlexSans-MediumItalic.woff) format("woff"), 
        url(../fonts/IBMPlexSans-MediumItalic.ttf) format("truetype"); 
}

@font-face {
    font-family: 'IBMPlexSans-Regular';
    src: url(../fonts/IBMPlexSans-Regular.eot);
    src: url(../fonts/IBMPlexSans-Regular.eot?#iefix) format("embedded-opentype"), 
        url(../fonts/IBMPlexSans-Regular.woff2) format("woff2"), 
        url(../fonts/IBMPlexSans-Regular.woff) format("woff"), 
        url(../fonts/IBMPlexSans-Regular.ttf) format("truetype"); 
}

@font-face {
    font-family: 'IBMPlexSans-SemiBold';
    src: url(../fonts/IBMPlexSans-SemiBold.eot);
    src: url(../fonts/IBMPlexSans-SemiBold.eot?#iefix) format("embedded-opentype"), 
        url(../fonts/IBMPlexSans-SemiBold.woff2) format("woff2"), 
        url(../fonts/IBMPlexSans-SemiBold.woff) format("woff"), 
        url(../fonts/IBMPlexSans-SemiBold.ttf) format("truetype"); 
}

@font-face {
    font-family: 'IBMPlexSans-SemiBoldItalic';
    src: url(../fonts/IBMPlexSans-SemiBoldItalic.eot);
    src: url(../fonts/IBMPlexSans-SemiBoldItalic.eot?#iefix) format("embedded-opentype"), 
        url(../fonts/IBMPlexSans-SemiBoldItalic.woff2) format("woff2"), 
        url(../fonts/IBMPlexSans-SemiBoldItalic.woff) format("woff"), 
        url(../fonts/IBMPlexSans-SemiBoldItalic.ttf) format("truetype"); 
}

@font-face {
    font-family: 'IBMPlexSans-Thin';
    src: url(../fonts/IBMPlexSans-Thin.eot);
    src: url(../fonts/IBMPlexSans-Thin.eot?#iefix) format("embedded-opentype"), 
        url(../fonts/IBMPlexSans-Thin.woff2) format("woff2"), 
        url(../fonts/IBMPlexSans-Thin.woff) format("woff"), 
        url(../fonts/IBMPlexSans-Thin.ttf) format("truetype"); 
}

@font-face {
    font-family: 'IBMPlexSans-ThinItalic';
    src: url(../fonts/IBMPlexSans-ThinItalic.eot);
    src: url(../fonts/IBMPlexSans-ThinItalic.eot?#iefix) format("embedded-opentype"), 
        url(../fonts/IBMPlexSans-ThinItalic.woff2) format("woff2"), 
        url(../fonts/IBMPlexSans-ThinItalic.woff) format("woff"), 
        url(../fonts/IBMPlexSans-ThinItalic.ttf) format("truetype"); 
}


:root {

    /** FONT FAMILY **/

    --km-font-family-thin: "IBMPlexSans-Thin"; /*100*/
    --km-font-family-thin-italic: "IBMPlexSans-ThinItalic"; /*100*/
    --km-font-family-extralight: "IBMPlexSans-ExtraLight"; /*200*/
    --km-font-family-extralight-italic: "IBMPlexSans-ExtraLightItalic"; /*200*/
    --km-font-family-light: "IBMPlexSans-Light"; /*300*/
    --km-font-family-light-italic: "IBMPlexSans-LightItalic"; /*300*/
    --km-font-family-regular: "IBMPlexSans-Regular"; /*400*/
    --km-font-family-italic: "IBMPlexSans-Italic"; /*400*/
    --km-font-family-medium: "IBMPlexSans-Medium"; /*500*/
    --km-font-family-medium-italic: "IBMPlexSans-MediumItalic"; /*500*/
    --km-font-family-semibold: "IBMPlexSans-SemiBold"; /*600*/
    --km-font-family-semibold-italic: "IBMPlexSans-SemiBoldItalic"; /*600*/
    --km-font-family-bold: "IBMPlexSans-Bold"; /*700*/
    --km-font-family-bold-italic: "IBMPlexSans-BoldItalic"; /*700*/

    /** COLORS **/

    --km-dark: #181232;
    --km-grey-1: #423F53;
    --km-grey-2: #747181;
    --km-grey-3: #ADABB6;
    --km-grey-4: #E9E9E9;
    --km-grey-5: #F1EBEA;
    --km-grey-6: #F8F8F8;

    --km-light: #FFFFFF;

    --km-electrifying-kiss: #D61C4E;
    --km-electrifying-kiss-medium: #F693AE;
    --km-electrifying-kiss-lighter: #F9E2E8;
    --km-electrifying-kiss-op75: #D61C4EBF;

    --km-ornery-tangerine: #F77E21;
    --km-ornery-tangerine-medium: #FCA562;
    --km-ornery-tangerine-lighter: #FDDFC8;
    --km-ornery-tangerine-op75: #F77E21BF;

    --km-ukon-saffron: #FAC213;
    --km-ukon-saffron-medium: #F5D56E;
    --km-ukon-saffron-lighter: #F9E8B3;
    --km-ukon-saffron-op75: #FAC213BF;
    --km-ukon-saffron-op50: #FAC21380;

}