/******************************************************************

     ██████╗ ██████╗ ██╗      ██████╗ ██╗   ██╗██████╗ ███████╗
    ██╔════╝██╔═══██╗██║     ██╔═══██╗██║   ██║██╔══██╗██╔════╝
    ██║     ██║   ██║██║     ██║   ██║██║   ██║██████╔╝███████╗
    ██║     ██║   ██║██║     ██║   ██║██║   ██║██╔══██╗╚════██║
    ╚██████╗╚██████╔╝███████╗╚██████╔╝╚██████╔╝██║  ██║███████║
     ╚═════╝ ╚═════╝ ╚══════╝ ╚═════╝  ╚═════╝ ╚═╝  ╚═╝╚══════╝

 ******************************************************************/



    .responsiville {
        --nvm-red                    : 202,  28,  37;
        --nvm-orange                 : 236, 185, 123;
        --nvm-green                  : 183, 191,  29;
        --nvm-blue                   :  12, 155, 212;
        --nvm-white                  : 255, 255, 255;
        --nvm-gray-1                 : 240, 240, 240;
        --nvm-gray-2                 : 210, 210, 210;
        --nvm-gray-3                 : 180, 180, 180;
        --nvm-gray-4                 : 150, 150, 150;
        --nvm-gray-5                 : 120, 122, 122;
        --nvm-gray-6                 :  92,  92,  92;
        --nvm-gray-7                 :  62,  62,  62;
        --nvm-gray-8                 :  31,  31,  31;
        --nvm-gray-9                 :  15,  15,  15;
        --nvm-black                  :   0,   0,   0;

        --ks-primary-black           : rgb( 26, 26, 26 );
        --ks-primary-gray            : rgb( 33, 37, 41 );
        --ks-primary-white           : rgb( 254, 253, 249 );

        --nvm-color-red              : rgb(var(--nvm-red));
        --nvm-color-orange           : rgb(var(--nvm-orange));
        --nvm-color-green            : rgb(var(--nvm-green));
        --nvm-color-blue             : rgb(var(--nvm-blue));
        --nvm-color-white            : rgb(var(--nvm-white));
        --nvm-color-gray-1           : rgb(var(--nvm-gray-1));
        --nvm-color-gray-2           : rgb(var(--nvm-gray-2));
        --nvm-color-gray-3           : rgb(var(--nvm-gray-3));
        --nvm-color-gray-4           : rgb(var(--nvm-gray-4));
        --nvm-color-gray-5           : rgb(var(--nvm-gray-5));
        --nvm-color-gray-6           : rgb(var(--nvm-gray-6));
        --nvm-color-gray-7           : rgb(var(--nvm-gray-7));
        --nvm-color-gray-8           : rgb(var(--nvm-gray-8));
        --nvm-color-gray-9           : rgb(var(--nvm-gray-9));
        --nvm-color-black            : rgb(var(--nvm-black));

        --ks-color-primary-black     : rgb(var(--ks-primary-black));
        --ks-color-primary-gray      : rgb(var(--ks-primary-gray));
        --ks-color-primary-white     : rgb(var(--ks-primary-white));

        --nvm-color-text             : var(--ks-primary-black); 
        --nvm-color-text-link        : var(--ks-primary-black); 
        --nvm-color-text-selection   : var(--ks-primary-white); 
        --nvm-color-text-selection-bg: var(--ks-primary-black); 
    }



/***************************************************************************

    ██╗   ██╗ █████╗ ██████╗ ██╗ █████╗ ██████╗ ██╗     ███████╗███████╗
    ██║   ██║██╔══██╗██╔══██╗██║██╔══██╗██╔══██╗██║     ██╔════╝██╔════╝
    ██║   ██║███████║██████╔╝██║███████║██████╔╝██║     █████╗  ███████╗
    ╚██╗ ██╔╝██╔══██║██╔══██╗██║██╔══██║██╔══██╗██║     ██╔══╝  ╚════██║
     ╚████╔╝ ██║  ██║██║  ██║██║██║  ██║██████╔╝███████╗███████╗███████║
      ╚═══╝  ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝╚═╝  ╚═╝╚═════╝ ╚══════╝╚══════╝╚══════╝
                                                                        
 ****************************************************************************/


   
    .responsiville {
        --nvm-panel-wide-width   : 2500px; /* The width of the panel element */
        --nvm-panel-normal-width : 1280px; /* The width of the panel element */
        --nvm-panel-narrow-width : 1024px; /* The width of the narrow panel element */
        --nvm-panel-small-width  :  768px; /* The width of the very narrow panel element */
    }

    .small {
        --ks-main-space-M        : 30px;   /* ... */
        --ks-horizontal-space-A  : 22.5px;   /* ... */
        --ks-vertical-space-E    : 35px;   /* ... */
        --ks-horizontal-space-B  : 88px;   /* ... */
        --ks-horizontal-space-C  : 88px;   /* ... */
        --ks-vertical-space-D    : 22px;   /* ... */
        --ks-vertical-space-F    : 30px;   /* ... */
        
        --nvm-base-font-size     : 14px;   /* The body element base font size */
        --nvm-base-line-height   : 1.5;    /* The default line height of all elements */
        --nvm-text-line-height   : 1.5;    /* The default line height of text elements */
        --nvm-heading-line-height: 1.2;    /* The line height of heading elements */

        --nvm-text-rhythm        : var( --ks-vertical-space-D );   /* Vertical margins between text elements */
        --nvm-grid-gutter        : var( --ks-main-space-M );       /* Paddings between columns, the grid gutters */
        --nvm-grid-rhythm        : var( --ks-main-space-M );       /* Vertical margins between major grid sections */
    }

    .tablet {
        --ks-main-space-M        : 55px;   /* ... */
        --ks-horizontal-space-A  : 22.5px; /* ... */
        --ks-vertical-space-E    : 45px;   /* ... */
        --ks-horizontal-space-B  : 88px;   /* ... */
        --ks-horizontal-space-C  : 88px;   /* ... */
        --ks-vertical-space-D    : 22px;   /* ... */
        --ks-vertical-space-F    : 30px;   /* ... */

        --nvm-base-font-size     : 14px;   /* The body element base font size */
        --nvm-base-line-height   : 1.5;    /* The default line height of all elements */
        --nvm-text-line-height   : 1.5;    /* The default line height of text elements */
        --nvm-heading-line-height: 1.2;    /* The line height of heading elements */

        --nvm-text-rhythm        : var( --ks-vertical-space-D );   /* Vertical margins between text elements */
        --nvm-grid-gutter        : var( --ks-main-space-M );       /* Paddings between columns, the grid gutters */
        --nvm-grid-rhythm        : var( --ks-main-space-M );       /* Vertical margins between major grid sections */
    }

    .laptop {
        --ks-main-space-M        : 55px;   /* ... */
        --ks-horizontal-space-A  : 22.5px; /* ... */
        --ks-vertical-space-E    : 45px;   /* ... */
        --ks-horizontal-space-B  : 88px;   /* ... */
        --ks-horizontal-space-C  : 88px;   /* ... */
        --ks-vertical-space-D    : 22px;   /* ... */
        --ks-vertical-space-F    : 30px;   /* ... */

        --nvm-base-font-size     : 14px;   /* The body element base font size */
        --nvm-base-line-height   : 1.5;    /* The default line height of all elements */
        --nvm-text-line-height   : 1.5;    /* The default line height of text elements */
        --nvm-heading-line-height: 1.2;    /* The line height of heading elements */

        --nvm-text-rhythm        : var( --ks-vertical-space-D );   /* Vertical margins between text elements */
        --nvm-grid-gutter        : var( --ks-main-space-M );       /* Paddings between columns, the grid gutters */
        --nvm-grid-rhythm        : var( --ks-main-space-M );       /* Vertical margins between major grid sections */
    }

    .large {
        --ks-main-space-M        : 55px;   /* ... */
        --ks-horizontal-space-A  : 22.5px; /* ... */
        --ks-vertical-space-E    : 45px;   /* ... */
        --ks-horizontal-space-B  : 88px;   /* ... */
        --ks-horizontal-space-C  : 0;      /* ... */
        --ks-vertical-space-D    : 22px;   /* ... */
        --ks-vertical-space-F    : 30px;   /* ... */

        --nvm-base-font-size     : 14px;   /* The body element base font size */
        --nvm-base-line-height   : 1.5;    /* The default line height of all elements */
        --nvm-text-line-height   : 1.5;    /* The default line height of text elements */
        --nvm-heading-line-height: 1.2;    /* The line height of heading elements */

        --nvm-text-rhythm        : var( --ks-vertical-space-D );   /* Vertical margins between text elements */
        --nvm-grid-gutter        : var( --ks-main-space-M );       /* Paddings between columns, the grid gutters */
        --nvm-grid-rhythm        : var( --ks-main-space-M );       /* Vertical margins between major grid sections */
    }

    .xlarge {
        --ks-main-space-M        : 55px;   /* ... */
        --ks-horizontal-space-A  : 22.5px; /* ... */
        --ks-vertical-space-E    : 45px;   /* ... */
        --ks-horizontal-space-B  : 88px;   /* ... */
        --ks-horizontal-space-C  : 0;      /* ... */
        --ks-vertical-space-D    : 22px;   /* ... */
        --ks-vertical-space-F    : 30px;   /* ... */

        --nvm-base-font-size     : 14px;   /* The body element base font size */
        --nvm-base-line-height   : 1.5;    /* The default line height of all elements */
        --nvm-text-line-height   : 1.5;    /* The default line height of text elements */
        --nvm-heading-line-height: 1.2;    /* The line height of heading elements */

        --nvm-text-rhythm        : var( --ks-vertical-space-D );   /* Vertical margins between text elements */
        --nvm-grid-gutter        : var( --ks-main-space-M );       /* Paddings between columns, the grid gutters */
        --nvm-grid-rhythm        : var( --ks-main-space-M );       /* Vertical margins between major grid sections */
    }



 /***************************************************

    ███████╗ ██████╗ ███╗   ██╗████████╗███████╗
    ██╔════╝██╔═══██╗████╗  ██║╚══██╔══╝██╔════╝
    █████╗  ██║   ██║██╔██╗ ██║   ██║   ███████╗
    ██╔══╝  ██║   ██║██║╚██╗██║   ██║   ╚════██║
    ██║     ╚██████╔╝██║ ╚████║   ██║   ███████║
    ╚═╝      ╚═════╝ ╚═╝  ╚═══╝   ╚═╝   ╚══════╝
                                                
 ***************************************************/



    .responsiville {
        --nvm-font-serif                :  Baskerville, Georgia, serif;
        --nvm-font-sans-serif-roboto    : 'Roboto', Arial, sans-serif;
        --nvm-font-sans-serif-barlow    : 'Barlow Condensed', 'Roboto Condensed', sans-serif;
        --nvm-font-sans-serif-roboto-c  : 'Roboto Condensed', Arial, sans-serif;
        --nvm-font-sans-serif           : 'Segoe UI', Arial, sans-serif;
        --nvm-font-display              : Constantia, Impact, sans-serif;
        --nvm-font-monospace            : Consolas, 'Courier New', monospace;
        --nvm-font-icons                : 'Responsiville icons';
    }



/******************************************************************

    ██╗     ███████╗███╗   ██╗ ██████╗████████╗██╗  ██╗███████╗
    ██║     ██╔════╝████╗  ██║██╔════╝╚══██╔══╝██║  ██║██╔════╝
    ██║     █████╗  ██╔██╗ ██║██║  ███╗  ██║   ███████║███████╗
    ██║     ██╔══╝  ██║╚██╗██║██║   ██║  ██║   ██╔══██║╚════██║
    ███████╗███████╗██║ ╚████║╚██████╔╝  ██║   ██║  ██║███████║
    ╚══════╝╚══════╝╚═╝  ╚═══╝ ╚═════╝   ╚═╝   ╚═╝  ╚═╝╚══════╝
                                                            
 ******************************************************************/



    .responsiville {
        --nvm-length-small   : calc(0.5*var(--nvm-grid-rhythm));
        --nvm-length-medium  : calc(1.0*var(--nvm-grid-rhythm));
        --nvm-length-normal  : calc(1.5*var(--nvm-grid-rhythm));
        --nvm-length-large   : calc(2.0*var(--nvm-grid-rhythm));
        --nvm-length-xlarge  : calc(2.5*var(--nvm-grid-rhythm));
        --nvm-length-xxlarge : calc(4*var(--nvm-grid-rhythm));
        --nvm-length-xxxlarge: calc(6*var(--nvm-grid-rhythm));

        /* K-Studio specific. */
        --ks-3M              : calc(3*var(--ks-main-space-M));
        --ks-4M              : calc(4*var(--ks-main-space-M));
    }