@font-face {
    font-family: 'Roobert-Regular';
    src: url('../../assets/fonts/Roobert-Regular.woff2') format('woff2'),
         url('../../assets/fonts/Roobert-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tobias-Light';
    src: url('../../assets/fonts/Tobias-Light.woff2') format('woff2'),
         url('../../assets/fonts/Tobias-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tobias-LightItalic';
    src: url('../../assets/fonts/Tobias-LightItalic.woff2') format('woff2'),
         url('../../assets/fonts/Tobias-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


/* FONT FAMILY */
.roobert {
    font-family: 'Roobert-Regular', Helvetica, sans-serif;
}

.tobias {
    font-family: 'Tobias-Light';
    font-style: normal;
}

i .tobias,
em .tobias,
.tobias i,
.tobias em {
    font-family: 'Tobias-LightItalic';
    font-style: normal;
}

.tobias-b-alt b,
b.tobias-b-alt,
.tobias-b-alt strong,
strong.tobias-b-alt {
    font-family: 'Roobert-Regular';
    font-weight: 400;
}

.tobias-italic {
    font-family: 'Tobias-LightItalic';
}


/* COLORS */
.black {
    color: var(--black);
}

.white {
    color: var(--white);
}

.darkGrey {
    color: var(--darkGrey);
}


/* LAYOUT */
.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

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

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

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


/* SIZE */
/*
80 > 50
70 > 35
55 > 35
50 > 35
40 > 30
35 > 30
30 > 25
25 > 25
20 > 20
15 > 15
10 > 10
*/

.p1 {
    font-size: 1em; /*10px*/
    line-height: 1;
}

.p2 {
    font-size: 1.5em; /*15px*/
    line-height: 120%;
}

.p3 {
    font-size: 2em; /*20px*/
    line-height: 110%;
}

.p4 {
    font-size: 2.5em; /*25px*/
    line-height: 110%;
}

.p5 {
    font-size: 3em; /*30px*/
    line-height: 120%;
}

.p6 {
    font-size: 3.5em; /*35px*/
    line-height: 110%;
}

.p7 {
    font-size: 4em; /*40px*/
    line-height: 110%;
}

.p8 {
    font-size: 5em; /*50px*/
    line-height: 120%;
}

.p9 {
    font-size: 5.5em; /*55px*/
    line-height: 110%;
}

.p10 {
    font-size: 7em; /*70px*/
    line-height: 1;
}

.p11 {
    font-size: 8em; /*80px*/
    line-height: 110%;
}

.p12 {
    font-size: 11em; /*110px*/
    line-height: 1;
    letter-spacing: -.5px;
}



@media only screen and (max-width: 740px) {
	/* SIZE */
    
    /*
    80 > 50
    70 > 35
    55 > 35
    50 > 35
    40 > 30
    35 > 30
    30 > 25
    25 > 25
    20 > 20
    15 > 15
    10 > 10
    */

    .p1 {
        font-size: 1em; /*10px*/
        line-height: 1;
    }

    .p2 {
        font-size: 1.499em; /*15px*/
        line-height: 120%;
    }

    .p3 {
        font-size: 2em; /*20px*/
        line-height: 110%;
    }

    .p4 {
        font-size: 2.5em; /*25px*/
        line-height: 110%;
    }

    .p5 {
        font-size: 2.5em; /*25px*/
        line-height: 110%;
    }

    .p6 {
        font-size: 3em; /*30px*/
        line-height: 110%;
    }

    .p7 {
        font-size: 3em; /*30px*/
        line-height: 110%;
    }

    .p8 {
        font-size: 3.5em; /*35px*/
        line-height: 110%;
    }

    .p9 {
        font-size: 3.5em; /*35px*/
        line-height: 110%;
    }

    .p10 {
        font-size: 3.5em; /*35px*/
        line-height: 110%;
    }

    .p11 {
        font-size: 5em; /*50px*/
        line-height: 110%;
    }

    .p12 {
        font-size: 5em; /*50px*/
        line-height: 110%;
        letter-spacing: 0px;
    }
}

@media only screen and (max-width: 550px) {

}