/* global variables */
:root {
    --fontsize: calc(0.3125rem + ((1vw - 3.6px) * 0.4965));
}

:root {
    /* add fluid rem function */
    font-size: max(37.5%, min(var(--fontsize), 62.5%));
    /* RWD */
    --global-width: min(calc(320px + ((1vw - 3.6px) * 100)), 135.6rem);
    /* --global-width--small: min(calc(320px + ((1vw - 3.6px) * 88)), 80.8rem); */
    /*small

    /* colors */
    --color-white: #fff;
    --color-lightgray: #F5F5F5;
    --color-silver: #DBDBDB;
    --color-gray: #F7F7F7;
    --color-darkgray: #60616D;
    --color-carbon : #1A1818;
    --color-black: #000;
    --color-red: #BB1F11;
    --color-text-gray: #5E5F6D;
    --color-green: #46E32C;

    /* fonts */
    --font-family-main: "Onest", sans-serif;
    --font-size-10: max(10px, 1rem);
    --font-size-11: max(11px, 1.1rem);
    --font-size-12: max(12px, 1.2rem);
    --font-size-13: max(13px, 1.3rem);
    --font-size-14: max(14px, 1.4rem);
    --font-size-15: max(15px, 1.5rem);
    --font-size-16: max(16px, 1.6rem);
    --font-size-18: max(16px, 1.8rem);
    --font-size-20: max(17px, 2rem);
    --font-size-22: max(18px, 2.2rem);
    --font-size-24: max(24px, 2.4rem);
    --font-size-32: max(28px, 3.2rem);
    --font-size-38: max(34px, 3.8rem);
    --font-size-44: max(34px, 4.4rem);
    --font-size-48: max(36px, 4.8rem);
    --font-size-50: max(35px, 5rem);
    --font-size-52: max(42px, 5.2rem);
    --font-size-72: max(50px, 7.2rem);
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    font-family: var(--font-family-main);
    
}

@media(min-width: 2048px) {
    :root {
        font-size: 85%;
    }
}

@media(min-width: 3840px) {
    :root {
        font-size: 140%;
    }
}


/* colors */
.color-white {
    color: var(--color-white);
}
.color-silver {
    color: var(--color-silver);
}
.color-black {
    color: var(--color-black);
}
.color-gray {
    color: var(--color-gray);
}
.color-darkgray {
    color: var(--color-darkgray);
}
.color-red {
    color: var(--color-red);
}
.color-text-gray {
    color: var(--color-text-gray);
}
.color-carbon {
    color: var(--color-carbon);
}

/* backgrounds */
.background-white {
    background-color: var(--color-white);
}
.background-black {
    background-color: var(--color-black);
}
.background-gray {
    background-color: var(--color-gray);
}
.background-lightgray {
    background-color: var(--color-lightgray);
}
.background-red {
    background-color: var(--color-red);
}
.background-darkgray {
    background-color: var(--color-darkgray);
}

/* fonts */
.font-size-10 {
    font-size: var(--font-size-10);
}
.font-size-11 {
    font-size: var(--font-size-11);
}
.font-size-12 {
    font-size: var(--font-size-12);
}
.font-size-13 {
    font-size: var(--font-size-13);
}
.font-size-14 {
    font-size: var(--font-size-14);
}
.font-size-15 {
    font-size: var(--font-size-15);
}
.font-size-16 {
    font-size: var(--font-size-16);
}
.font-size-18 {
    font-size: var(--font-size-18);
}
.font-size-20 {
    font-size: var(--font-size-20);
}
.font-size-22 {
    font-size: var(--font-size-22);
}
.font-size-24 {
    font-size: var(--font-size-24);
}
.font-size-32 {
    font-size: var(--font-size-32);
}
.font-size-38 {
    font-size: var(--font-size-38);
}
.font-size-44 {
    font-size: var(--font-size-44);
}
.font-size-48 {
    font-size: var(--font-size-48);
}
.font-size-50 {
    font-size: var(--font-size-50);
}
.font-size-52 {
    font-size: var(--font-size-52);
}
.font-size-72 {
    font-size: var(--font-size-72);
}

.font-weight-light {
    font-weight: var(--font-weight-light);
}

.font-weight-regular {
    font-weight: var(--font-weight-regular);
}

.font-weight-medium {
    font-weight: var(--font-weight-medium);
}

.font-weight-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-weight-bold {
    font-weight: var(--font-weight-bold);
}

.font-weight-extrabold {
    font-weight: var(--font-weight-extrabold);
}

.cont {
    width: var(--global-width);
    max-width: 96%;
}
@media screen and (max-width: 768px) {
    .cont {
        width: 86%;
    }
}
a {
    text-decoration: none;
}

/* Gutenberg custom colors */

.has-black-color { color: var(--color-black) !important; }
.has-gray-color { color: var(--color-text-gray) !important; }
.has-white-color { color: var(--color-white) !important; }
.has-red-color { color: var(--color-red) !important; }
.has-lightgray-color { color: var(--color-gray) !important; }

.has-black-background-color { background-color: var(--color-black) !important; }
.has-gray-background-color { background-color: var(--color-text-gray) !important; }
.has-white-background-color { background-color: var(--color-white) !important; }
.has-red-background-color { background-color: var(--color-red) !important; }
.has-lightgray-background-color { background-color: var(--color-gray) !important; }