:root {
    /***************************************
     * Colors
     ****************************************/
    --twc-color-bg:#f8f8f8; /* content background */
    --twc-color-text:#7b7b7b; /* body text */

    --twc-color-primary:#ea7b34;
    --twc-color-primary-highlight:#ea7b34;
    --twc-color-on-primary:#fff;

    --twc-color-error:#f00; /* for error, alert, warning */
    --twc-color-black:#000;
    --twc-color-dark-gray:#4b4640;
    --twc-color-white:#fff;
    --twc-color-placeholder:rgba(0, 0, 0, .5);


    /***************************************
    * Font sizes and families
    ****************************************/
    /* Relative font sizes (use text to identify) */
    --twc-size-body:var(--twc-size-18);
    --twc-size-h1:var(--twc-size-60);
    --twc-size-h2:var(--twc-size-40);
    --twc-size-h3:var(--twc-size-26);
    --twc-size-h4:var(--twc-size-20);
    --twc-size-h5:var(--twc-size-18);
    --twc-size-h6:var(--twc-size-16);

    /* Absolute font sizes (use exact number to identify) */
    --twc-size-60:60px;
    --twc-size-40:40px;
    --twc-size-26:26px;
    --twc-size-20:20px;
    --twc-size-18:18px;
    --twc-size-16:16px;
    --twc-size-15:15px;


    /* Fonts */
    --twc-font-icomoon:"icomoon", fantasy;
    --twc-font-primary:"Manrope", sans-serif;


    /***************************************
    * Spacings
    ****************************************/
    /* Relative spacing (vertical) - change based on design */
    --twc-spacing-default:var(--twc-spacing-100);
    --twc-spacing-heading:var(--twc-spacing-20);

    /* Absolute spacing (vertical) - for system UI */
    --twc-spacing-150:150px;
    --twc-spacing-120:120px;
    --twc-spacing-100:100px;
    --twc-spacing-90:90px;
    --twc-spacing-75:75px;
    --twc-spacing-45:45px;
    --twc-spacing-40:40px;
    --twc-spacing-30:30px;
    --twc-spacing-25:25px;
    --twc-spacing-20:20px;
    --twc-spacing-15:15px;
    --twc-spacing-10:10px;

    /***************************************
    * Container & side paddings
    ****************************************/
    /* Gap, width (horizontal) */
    --twc-100vw:calc(100vw - 17px); /* this variable will be updated by updateCSSVariables() */
    --twc-gap-vc-column:20px; /* vc column */
    --twc-gap-container:40px; /* container paddings */
    --twc-gap-side:calc((var(--twc-100vw) - var(--twc-container)) * 0.5);

    /* Container */
    --twc-container:1280px;

    /* Spacing-left */
    --twc-spacing-left:108px;

    /***************************************
    * Miscellaneous
    ****************************************/
    /* Header */
    --twc-header-height:140px;
    --twc-header-height-sticky:100px;

    /* Transition */
    --twc-transition:all .3s ease;
    --twc-transition-slow:all .6s ease;
}


/***************************************
* Global Variables Responsive
****************************************/
@media only screen and (max-width:1180px) {
    :root {
        /* Header */
        --twc-header-height:70px;
        --twc-header-height-sticky:70px;

        /* Absolute font sizes */
        --twc-size-60:50px;

        /* Absolute spacing */
        --twc-spacing-150:120px;
        --twc-spacing-120:100px;
        --twc-spacing-100:90px;
        --twc-spacing-90:80px;

        /* Spacing-left */
        --twc-spacing-left:var(--twc-gap-container);
    }
}
@media only screen and (max-width:1024px) {
    :root {
        /* Gutter (horizontal) */
        --twc-gap-container:20px;

        /* Absolute font sizes */
        --twc-size-60:40px;
        --twc-size-40:35px;
        --twc-size-26:24px;

        /* Absolute spacing */
        --twc-spacing-150:100px;
        --twc-spacing-120:90px;
        --twc-spacing-100:75px;
        --twc-spacing-90:70px;
        --twc-spacing-75:65px;
    }
}
@media only screen and (max-width:768px) {
    :root {
        /* Absolute font sizes */
        --twc-size-60:40px;
        --twc-size-40:30px;
        --twc-size-26:22px;

        /* Absolute spacing */
        --twc-spacing-150:80px;
        --twc-spacing-120:70px;
        --twc-spacing-100:55px;
        --twc-spacing-90:50px;
        --twc-spacing-75:45px;
    }
}
@media only screen and (max-width:480px) {
    :root {
        /* Absolute font sizes */
        --twc-size-60:32px;
        --twc-size-40:25px;
        --twc-size-26:20px;
        --twc-size-20:18px;
        --twc-size-18:16px;

        /* Absolute spacing */
        --twc-spacing-150:55px;
        --twc-spacing-120:50px;
        --twc-spacing-100:45px;
        --twc-spacing-90:45px;
        --twc-spacing-75:40px;
        --twc-spacing-45:35px;
        --twc-spacing-40:35px;

        /* Spacing-left */
        --twc-spacing-left:0px;
    }
}