:root {
    /***************************************
     * Colors
     ****************************************/
    --vii-color-bg:#fff; /* content background */
    --vii-color-text:var(--vii-color-dark-black); /* body text */
    --vii-color-heading:var(--vii-color-dark-black);
    --vii-color-permalink:var(--vii-color-dark-black);
    --vii-color-permalink-highlight:var(--vii-color-primary);

    --vii-color-primary:#f1c400;
    --vii-color-primary-highlight:#f1c400;
    --vii-color-on-primary:var(--vii-color-dark-black);

    --vii-color-error:var(--vii-color-red-pink); /* for error, alert, warning */
    --vii-color-red-pink:#de313e;
    --vii-color-gray:#e1e1e1;
    --vii-color-white:#fff;
    --vii-color-dark-black:#141414;
    --vii-color-dark-gray:#666;
    --vii-color-light-yellow:#f7f3f1;
    --vii-color-placeholder:#1d1b1b80;


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

    /* Absolute font sizes (use exact number to identify) */
    --vii-size-64:64px;
    --vii-size-50:50px;
    --vii-size-40:40px;
    --vii-size-30:30px;
    --vii-size-24:24px;
    --vii-size-20:20px;
    --vii-size-18:18px;
    --vii-size-16:16px;
    --vii-size-14:14px;


    /* Fonts */
    --vii-font-icomoon:"icomoon", fantasy;
    --vii-font-primary:"Basis Grotesque Pro", san-serif;
    --vii-font-secondary:"SVN-Recoleta", serif; /* for headings */


    /***************************************
    * Spacings
    ****************************************/
    /* Relative spacing (vertical) - change based on design */
    --vii-spacing-default:var(--vii-spacing-70);
    --vii-spacing-heading:var(--vii-spacing-25);

    /* Absolute spacing (vertical) - for system UI */
    --vii-spacing-120:120px;
    --vii-spacing-70:70px;
    --vii-spacing-60:60px;
    --vii-spacing-45:45px;
    --vii-spacing-35:35px;
    --vii-spacing-30:30px;
    --vii-spacing-25:25px;
    --vii-spacing-20:20px;
    --vii-spacing-15:15px;
    --vii-spacing-10:10px;


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

    /* Container */
    --vii-container:1248px;


    /***************************************
    * Miscellaneous
    ****************************************/
    /* Box shadow */
    --vii-box-shadow:5px 5px 0 var(--vii-color-dark-black);
    --vii-box-shadow-hover:7px 7px 0 var(--vii-color-dark-black);

    /* Header */
    --vii-logo-height:32px;
    --vii-header-padding:15px var(--vii-gap-container);
    --vii-header-height:70px;
    --vii-header-height-sticky:var(--vii-header-height);

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


/***************************************
* Global Variables Responsive
****************************************/
@media only screen and (max-width:1024px) {
    :root {
        /* Header */
        --vii-logo-height:28px;
        --vii-header-padding:10px var(--vii-gap-container);
        --vii-header-height:60px;

        /* Gutter (horizontal) */
        --vii-gap-container:20px;

        /* Absolute font sizes */
        --vii-size-64:42px;
        --vii-size-50:35px;
        --vii-size-40:30px;
        --vii-size-30:26px;
        --vii-size-24:22px;
        --vii-size-20:18px;
        --vii-size-18:17px;
        --vii-size-16:15px;
        --vii-size-14:13px;

        /* Absolute spacing (vertical) - for system UI */
        --vii-spacing-120:60px;
        --vii-spacing-70:50px;
        --vii-spacing-60:40px;
        --vii-spacing-45:35px;
        --vii-spacing-35:32px;
        --vii-spacing-30:24px;
        --vii-spacing-25:22px;
        --vii-spacing-20:18px;
        --vii-spacing-15:14px;
        --vii-spacing-10:8px;

        /* Box shadow */
        --vii-box-shadow:3px 3px 0 var(--vii-color-dark-black);
        --vii-box-shadow-hover:5px 5px 0 var(--vii-color-dark-black);
    }
}
@media only screen and (max-width:1024px) {
    :root {
        /* Absolute font sizes */
        --vii-size-64:35px;
        --vii-size-50:32px;
        --vii-size-40:28px;
        --vii-size-30:24px;
    }
}