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

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

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



    /* Responsiville framework icon font. */

    @font-face {
        font-family: "Responsiville Icons";
        src: url("../fonts/font/responsiville.eot?14661597");
        src: url("../fonts/font/responsiville.eot?14661597#iefix") format("embedded-opentype"),
             url("../fonts/font/responsiville.woff2?14661597") format("woff2"),
             url("../fonts/font/responsiville.woff?14661597") format("woff"),
             url("../fonts/font/responsiville.ttf?14661597") format("truetype"),
             url("../fonts/font/responsiville.svg?14661597#responsiville")  format("svg");
        font-weight: normal;
        font-style: normal;
    }



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

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



    :root {
        --font-scale              : 1.2;     /* How the headings font size scales up. */
        --root-font-size          : 10px;    /* The root element, ie HTML, font size. */
        --base-font-size          : 1.6rem;  /* The body element base font size. */
        --base-line-height        : 1.5;     /* The default line height of all elements. */
        --text-line-height        : 1.75;    /* The line height of block text elements. */
        --heading-line-height     : 1.2;     /* The line height of heading elements. */
        
        --text-rhythm             : 3rem;    /* Vertical margins between text elements. */
        --grid-gutter             : 1rem;    /* Paddings between columns, the grid gutters. */
        --vertical-rhythm         : 5rem;    /* Vertical margins between major grid sections. */
        
        --panel-width             : 1024px;  /* The max width of the panel element. */

        --color-text              : #646464; /* The colour of the text.*/
        --color-text-selection    : #fafafa; /* The colour of the selected text.*/
        --color-text-selection-bg : #646464; /* The colour of the selected text background.*/
    }

    

    /* Some useful default colours. */

    :root {
        --color-red          : rgb(255,   0,   0);
        --color-green        : rgb(  0, 255,   0);
        --color-blue         : rgb(  0,   0, 255);

        --color-white        : rgb(255, 255, 255);
        --color-gray-light-x : rgb(250, 250, 250);
        --color-gray-light   : rgb(240, 240, 240);
        --color-gray         : rgb(220, 220, 220);
        --color-gray-dark    : rgb(100, 100, 100);
        --color-black        : rgb(  0,   0,   0);
    }