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

/* Register  Google Fonts here */
/* @font-face {
    font-family: "Nexa";
    src: url("../../fonts/5936849/53dae8b1-5f8c-47b8-835c-d8dacc374de1.woff2") format("woff2"),
        url("../../fonts/5936849/e325023c-5aab-4c12-aa37-430a9efb8b95.woff") format("woff");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Nexa";
    src: url("../../fonts/5936949/faaba122-0508-40a3-acfb-f74709081e74.woff2") format("woff2"),
        url("../../fonts/5936949/070ec778-3332-4191-9fd8-8fdd2ca1b2b3.woff") format("woff");
    font-weight: 700;
    font-style: normal;
} */
/* @font-face {
    font-family: "Windsor";
    src: url("../../fonts/1296786/53630049-b593-4318-a2af-49197ba2fb32.woff2") format("woff2"),
        url("../../fonts/1296786/b9ac8f3b-addc-436b-865d-62dd91ea165d.woff") format("woff");
    font-weight: 400;
    font-style: normal;
} */

@font-face {
    font-family: "NexaTextLight";
    src: url("../../fonts/webFonts/NexaTextLight/font.woff2") format("woff2"), url("../../fonts/webFonts/NexaTextLight/font.woff") format("woff");
}
@font-face {
    font-family: "Windsor";
    src: url("../../fonts/webFonts/WindsorLightCondensedCE/font.woff2") format("woff2"),
        url("../../fonts/webFonts/WindsorLightCondensedCE/font.woff") format("woff");
}
@font-face {
    font-family: "Nexa";
    src: url("../../fonts/webFonts/NexaLight/font.woff2") format("woff2"), url("../../fonts/webFonts/NexaLight/font.woff") format("woff");
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: "Nexa";
    src: url("../../fonts/webFonts/NexaHeavy/font.woff2") format("woff2"), url("../../fonts/webFonts/NexaHeavy/font.woff") format("woff");
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: "Nexa";
    src: url("../../fonts/webFonts/NexaRegular/font.woff2") format("woff2"), url("../../fonts/webFonts/NexaRegular/font.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Nexa";
    src: url("../../fonts/webFonts/NexaExtraBold/font.woff2") format("woff2"), url("../../fonts/webFonts/NexaExtraBold/font.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

/*
=============
= VARIABLES =
=============
*/
/* für relative Font-Sizes, z.B. sind 
font-size: 16px = font-size: calc(16 / var(--rootsize)); */
:root {
    --rootfactor: 15; /*html / body Font Size value*/
    --rootsize: var(--rootfactor) * 1rem; /* setting it as rem */
}

@media screen and (min-width: 1380px) {
    :root {
        --rootfactor: 20;
        --rootsize: var(--rootfactor) * 1rem;
    }
}
:root {
    /* Define Font s and ont Styles */
    --sans: "Nexa", Helvetica, Arial, sans-serif;
    --serif: "Windsor", Georgia, serif;
    --text: "NexaTextLight", Helvetica, Arial, sans-serif;

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

    /* Define Colors */
    --black: #000;
    --color-txt: #252525;
    --color-txt-dark: #222222;
    --white: #fff;
    --accent-color: #db1012;

    /* Define grid Settings for dev-grid and automatic frame-width */
    --grid-col: 100px; /* Column width */
    --grid-gap: 10px; /* Gap size */
    --grid-col-count: 12;
    --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; 
    }
} */