/*
============
= FONTFACE =
============
*/

/* Register  Google Fonts here */

/* latin-ext */
@font-face {
    font-family: "PT Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../../fonts/ptserif/v19/EJRTQgYoZZY2vCFuvAFT_rO1chb-.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "PT Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../../fonts/ptserif/v19/EJRTQgYoZZY2vCFuvAFT_r21cg.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: "PT Serif";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../../fonts/ptserif/v19/EJRQQgYoZZY2vCFuvAFT9gaQZyffoPNB.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "PT Serif";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../../fonts/ptserif/v19/EJRQQgYoZZY2vCFuvAFT9gaQZynfoA.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: "PT Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../../fonts/ptserif/v19/EJRVQgYoZZY2vCFuvAFYzr-tdg.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "PT Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../../fonts/ptserif/v19/EJRVQgYoZZY2vCFuvAFWzr8.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: "PT Serif";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../../fonts/ptserif/v19/EJRSQgYoZZY2vCFuvAnt66qcVyvHpA.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "PT Serif";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../../fonts/ptserif/v19/EJRSQgYoZZY2vCFuvAnt66qSVys.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: "Parkinsans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url(../../fonts/parkinsans/v2/-W_7XJXvQyPb1QfpBpRrfkoLfq0k.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Parkinsans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url(../../fonts/parkinsans/v2/-W_7XJXvQyPb1QfpBpRrfkQLfg.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
=============
= VARIABLES =
=============
*/
:root {
    --rootfactor: 17; /*html / body Font Size in px, but without px*/
    --rootsize: var(--rootfactor) * 1rem; /* use Font size and divide by this: font-size: calc(16 / var(--rootsize)); */
}

@media screen and (min-width: 1380px) {
    :root {
        --rootfactor: 21;
        --rootsize: var(--rootfactor) * 1rem;
    }
}
:root {
    /* Define Font s and ont Styles */
    --sans: "Parkinsans", Helvetica, Arial, sans-serif;
    --serif: "PT Serif", Georgia, serif;

    --thin: 100;
    --extralight: 200;
    --light: 300;
    --regular: 400;
    --medium: 500;
    --semibold: 600;
    --bold: 700;
    --extrabold: 800;

    /* Define Colors */
    --black: #000;
    --white: #fff;
    --blue: #312b6b;
    --lightblue: #a1a9d6;
    --middleblue: #686fa1;
    --orange: #e2905a;

    /* Define grid Settings for dev-grid and automatic frame-width */
    --grid-col: 172px; /* Column width */
    --grid-gap: 20px; /* Gap size */
    --grid-col-count: 6;
    --grid-width: calc((var(--grid-col) + var(--grid-gap)) * var(--grid-col-count) - var(--grid-gap)); /* Total width (column + gap) */

    --w1: calc((var(--grid-col) + var(--grid-gap)));
    --w2: calc((var(--grid-col) + var(--grid-gap)) * 2 - var(--grid-gap));
    --w3: calc((var(--grid-col) + var(--grid-gap)) * 3 - var(--grid-gap));
    --w4: calc((var(--grid-col) + var(--grid-gap)) * 4 - var(--grid-gap));
    --w5: calc((var(--grid-col) + var(--grid-gap)) * 5 - var(--grid-gap));
    --w6: calc((var(--grid-col) + var(--grid-gap)) * 6 - var(--grid-gap));
    --w7: calc((var(--grid-col) + var(--grid-gap)) * 7 - var(--grid-gap));
    --w8: calc((var(--grid-col) + var(--grid-gap)) * 8 - var(--grid-gap));
    --w9: calc((var(--grid-col) + var(--grid-gap)) * 9 - var(--grid-gap));
    --w10: calc((var(--grid-col) + var(--grid-gap)) * 10 - var(--grid-gap));
    --w11: calc((var(--grid-col) + var(--grid-gap)) * 11 - var(--grid-gap));
    --w12: calc((var(--grid-col) + var(--grid-gap)) * 12 - var(--grid-gap));
    --w13: calc((var(--grid-col) + var(--grid-gap)) * 13 - var(--grid-gap));
    --w14: calc((var(--grid-col) + var(--grid-gap)) * 14 - var(--grid-gap));
    --w15: calc((var(--grid-col) + var(--grid-gap)) * 15 - var(--grid-gap));
    --w16: calc((var(--grid-col) + var(--grid-gap)) * 16 - var(--grid-gap));
    --w17: calc((var(--grid-col) + var(--grid-gap)) * 17 - var(--grid-gap));
    --w18: calc((var(--grid-col) + var(--grid-gap)) * 18 - var(--grid-gap));
    --w19: calc((var(--grid-col) + var(--grid-gap)) * 19 - var(--grid-gap));
    --w20: calc((var(--grid-col) + var(--grid-gap)) * 20 - var(--grid-gap));
    --w21: calc((var(--grid-col) + var(--grid-gap)) * 21 - var(--grid-gap));
    --w22: calc((var(--grid-col) + var(--grid-gap)) * 22 - var(--grid-gap));
    --w23: calc((var(--grid-col) + var(--grid-gap)) * 23 - var(--grid-gap));
    --w24: calc((var(--grid-col) + var(--grid-gap)) * 24 - var(--grid-gap));
}

/* Optional: Set different Grid gaps or Grid Settings for screen-sizes */
/* @media screen and (min-width: 768px) {
    :root {
        --grid-gap: 16px;
    }
}
@media screen and (min-width: 1380px) {
    :root {
        --grid-gap: 16px; 
    }
} */