/**
 * @author Nevma, http://www.nevma.gr, info@nevma.gr
 * 
 * @license http://www.gnu.org/licenses/gpl-3.0.en.html GPLv3
 */



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

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

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



    :root,
    .small {
        --font-icons: 'Responsiville icons';
        --font-serif: Baskerville, Georgia, serif;
        --font-sans-serif: 'Helvetica', Arial, sans-serif;
        --font-monospace: Consolas, 'Courier New', monospace;
    }



    html {
        width: 100%;
        min-width: 100%;
        box-sizing: border-box;
        font-size: var(--root-font-size);
    }

    body {
        width: 100%;
        min-width: 100%;
        font-family: var(--font-sans-serif);
        font-size: var(--base-font-size);
        color: var(--color-text);
    }



    *, *:before, *:after {
        box-sizing: inherit;
        line-height: inherit;
        border-width: 0;
        border-color: currentColor;
        border-style: solid;
        outline-width: 0;
        outline-style: dotted;
    }

    * {
        margin: 0;
        padding: 0;

        font-weight: normal;
        font-style: normal;
        text-decoration: none;

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    *:focus,
    *:active {
        outline: none;
    }



    ::selection {
        background: var(--color-text-selection-bg);
        color: var(--color-text-selection);
    }

    ::-moz-selection {
        background: var(--color-text-selection-bg);
        color: var(--color-text-selection);
    }



    @-ms-viewport {
        width: device-width;
    }



    main {
        display: block;
    }



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

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



    a {
        transition-property: opacity, color, background;
        transition-duration: 0.2s;
        transition-timing-function: linear;
        display: inline-block;
    }

    a:hover {
        opacity: 0.75;
    }

    b, strong {
        font-weight: bold;
        text-decoration: none;
    }

    i, em {
        font-style: italic;
        text-decoration: none;
    }

    del {
        text-decoration: line-through;
    }

    code {
        display: inline-block;
        font-size: inherit;
        font-family: var(--font-monospace);
    }

    p code {
        margin: 0 0.5rem;
    }

    sup, sub {
        font-size: 75%;
        vertical-align: baseline;
        position: relative;
    }

    sup {
        top: -0.6rem;
    }

    sub {
        top: 0.4rem;
    }

    .amp {
        display: inline-block;
        margin: 0 0.1rem 0 0.2rem;
        font-size: 150%;
        font-style: italic;
        font-family: var(--font-serif);
        opacity: 0.7;
    }

    p.oldie:first-letter {
        font-family: var(--font-serif);
        font-size: 10rem;
        line-height: 1rem;
        font-weight: 700;
        float: left;
        margin: 0.75rem 1rem 0 0;
    }

    p.fancy:first-line {
        font-weight: 700;
    }

    .smaller {
        font-size: 75%;
    }

    .bigger {
        font-size: 125%;
    }



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

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



    img, figure, figure a, object, embed, video {
        max-width: 100%;
        height: auto !important;
        vertical-align: middle;
        -ms-interpolation-mode: bicubic; 
    }

    figcaption {
        text-align: center;
        padding-top: 0.75rem;
        font-size: 85%;
    }

    video {
        display: block;
        width: 100%;
    }

    .video-wrapper, 
    .iframe-wrapper {
        position: relative;
        height: 0;
    }

    .video-wrapper.ratio-16x7,
    .iframe-wrapper.ratio-16x7 {
        padding-bottom: 43.75%;
    }

    .video-wrapper.ratio-16x9,
    .iframe-wrapper.ratio-16x9 {
        padding-bottom: 56.25%;
    }

    .video-wrapper.ratio-4x3,
    .iframe-wrapper.ratio-4x3 {
        padding-bottom: 75%;
    }

    .video-wrapper.ratio-1x1,
    .video-wrapper.ratio-square,
    .iframe-wrapper.ratio-1x1,
    .iframe-wrapper.ratio-square {
        padding-bottom: 100%;
    }

    .video-wrapper iframe,
    .iframe-wrapper iframe,
    .video-wrapper embed,
    .iframe-wrapper embed,
    .video-wrapper object,
    .iframe-wrapper object {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }



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

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

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



    html {
        font-size: 10px;
    }

    body {
        font-size: var(--base-font-size);
        line-height: var(--base-line-height);
    }

    .text {
        line-height: var(--text-line-height);
    }

    h1, h2, h3, h4, h5, h6 {
        line-height: var(--heading-line-height);
    }



    /* Vertical text rhythm is accomplised by setting a top margin to the second of each set of sibling elements. */
    
    .text > * + * {
        margin-top: var(--text-rhythm);
    }

    /* Small exception in top margin of heading elements. */

    .text > h1 + *,
    .text > h2 + *,
    .text > h3 + *,
    .text > h4 + *,
    .text > h5 + *,
    .text > h6 + * {
        margin-top: calc(0.333*var(--text-rhythm));
    }



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

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



    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-serif);
        font-weight: normal;
    }

    h1 {
        font-size: calc(var(--base-font-size)*var(--font-scale)*var(--font-scale)*var(--font-scale)*var(--font-scale)*var(--font-scale)*var(--font-scale));
    }

    h2 {
        font-size: calc(var(--base-font-size)*var(--font-scale)*var(--font-scale)*var(--font-scale)*var(--font-scale)*var(--font-scale));
    }

    h3 {
        font-size: calc(var(--base-font-size)*var(--font-scale)*var(--font-scale)*var(--font-scale)*var(--font-scale));
    }

    h4, h5, h6 {
        font-size: calc(var(--base-font-size)*var(--font-scale)*var(--font-scale)*var(--font-scale));
    }



    .text blockquote {
        padding-left: 8rem;
        padding-right: 6rem;
        position: relative;
    }

        .text blockquote::before {
            content: "\201C";
            position: absolute;
            top: -1.5rem;
            left: 1.5rem;
            font-size: 9rem;
            line-height: 1;
            font-family: var(--font-serif);
        }

    blockquote.modern {
        margin-left: 1.5rem;
        padding-left: 2rem;
        border-left: 1rem solid var(--color-responsiville-gray);
    }

        blockquote.modern::before {
            content: "";
            display: none;
        }

    blockquote.citation {
        margin-left: 0;
        padding: 4rem 4rem 3.5rem 4rem;
        border: 0.1rem solid var(--color-responsiville-gray);
        box-shadow: inset 0 0 2rem -1rem var(--color-responsiville-gray);
    }

        blockquote.citation::before {
            content: "";
            display: none;
        }

    blockquote.frame {
        margin: 4.7rem 0.7rem;
        padding: 2rem 2.5rem;
        border: 0.7rem double var(--color-responsiville-gray);
        outline: 0.7rem double var(--color-responsiville-gray);
    }

        blockquote.frame::before {
            content: "";
            display: none;
        }

    blockquote.shout {
        font-size: 250%;
        line-height: 1.25;
        font-family: var(--font-serif);
    }

        blockquote.shout::before {
            top: -3rem;
            font-size: 12rem;
        }



    pre {
        font-family: inherit;
        font-size: inherit;
        max-width: 100%;
        overflow: auto;
    }



    hr { 
        position: relative;
        height: 0.1rem;
        border-bottom-width: 0.1rem;
        line-height: 0;
        font-size: 0;
        padding: 0;
        clear: both;
    }



    .text-center {
        text-align: center;
    }

    .text-justify {
        text-align: justify;
    }

    .text-left {
        text-align: left;
    }

    .text-right {
        text-align: right;
    }



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

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


    ul li {
        list-style-type: none;
    }

    .text ul, 
    .text ol, 
    .text dl {
        padding-left: 6rem;
        padding-right: 3rem;
    }

        .text ul ul, .text ul ol, .text ul dl, 
        .text ol ul, .text ol ol, .text ol dl, 
        .text dl ul, .text dl ol, .text dl dl { 
            margin-top: 1rem;
            margin-bottom: 0;
            padding-left: 3rem;
            padding-right: 3rem;
        }

    .text ul li, 
    .text ol li,
    .text dl dd {
        padding-left: calc(var(--text-rhythm)/4);
        padding-bottom: calc(var(--text-rhythm)/4);
        list-style-type: inherit;
    }

    .text dl dt {
        padding-left: 1rem;
        padding-bottom: 0;
    }

    .text dt {
        position: relative;
    }

    .text dt::before {
        content: "\2192";
        position: absolute;
        top: 0;
        left: -2.25rem;
        font-size: 75%;
    }

    .text dfn {
        font-weight: bold;
    }



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

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



    .navigation li {
        float: left;
    }

    .navigation.vertical li {
        float: none;
        display: block;
    }

        .navigation a {
            display: block;
            border-style: solid;
        }   



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

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



    table {
        width: 100%;
        border-width: 0.1rem;
        border-collapse: collapse;
    }

    caption {
        caption-side: top;
        padding: 1rem;
        position: relative;
        background: var(--color-responsiville-gray-light-x);
    }

    caption.bottom {
        caption-side: bottom;
    }

    td, th {
        border-left-width: 0.1rem;
        border-top-width: 0.1rem;
        padding: 1rem;
        vertical-align: top;
    }

    thead th,
    thead td,
    tfoot td, 
    tfoot th {
        background: var(--color-responsiville-gray);
        font-weight: bold;
    }

    tbody tr:nth-child(odd) td,
    tbody tr:nth-child(odd) th {
        background: var(--color-responsiville-gray-light-x);
    }

    tbody tr:nth-child(odd):hover td,
    tbody tr:nth-child(odd):hover th {
        background: none;
    }

    tbody tr:hover,
    tbody tr:hover {
        background: var(--color-responsiville-gray);
    }

    thead:first-child tr:first-child td,
    thead:first-child tr:first-child th,
    tbody:first-child tr:first-child td,
    tbody:first-child tr:first-child th {
        border-top-width: 0;
    }

    td:first-child,
    th:first-child {
        border-left-width: 0;
    }

    table.vertical td,
    table.vertical th {
        border-top-width: 0;
    }

    table.horizontal td,
    table.horizontal th {
        border-left-width: 0;
    }

    table.clean,
    table.clean td,
    table.clean th,
    table.clean caption {
        border-width: 0;
    }

    table.vanilla,
    table.vanilla tr,
    table.vanilla thead td,
    table.vanilla thead th,
    table.vanilla tbody td,
    table.vanilla tbody th,
    table.vanilla tfoot td,
    table.vanilla tfoot th,
    table.vanilla caption {
        border-width: 0;
        background: none;
    }

    table.vanilla th {
        padding: 1rem;
        font-size: 100%;
        font-weight: inherit;
    }

    table.liner thead td,
    table.liner thead th,
    table.liner tbody td,
    table.liner tbody th,
    table.liner tfoot td,
    table.liner tfoot th,
    table.liner caption {
        background: none;
    }

    table.top td,
    table.top th,
    tr.top td,
    tr.top th,
    td.top,
    th.top {
        vertical-align: top;
    }


    table.middle td,
    table.middle th,
    tr.middle td,
    tr.middle th,
    td.middle,
    th.middle {
        vertical-align: middle;
    }


    table.bottom td,
    table.bottom th,
    tr.bottom td,
    tr.bottom th,
    td.bottom,
    th.bottom {
        vertical-align: bottom;
    }



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

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



    input, 
    textarea,
    select {
        border-width: 0.1rem;
        padding: 0 1em;
        height: 3em;
        line-height: 3em;
        font-size: inherit;
        font-family: inherit;
        color: inherit;
        border-color: currentColor;
        border-radius: 0.2rem;
    }

    textarea {
        height: unset;
    }



    /* Selects in all but Internet Explorer. */

    @supports (-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none) {

        select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEABAMAAACuXLVVAAAAFVBMVEUAAABkZGRkZGRkZGRkZGRkZGRkZGT2B6oaAAAABnRSTlMAAQQkQMX4ly5wAAACXUlEQVR42u3U201DQQyEYZNe0gEFWIgaUsER/ZfAAyGcy97tsSU0fwMefdKuCGOMMcYYY4wxxhhjjDHGGGOMMcaye/9M7UPuX6mp3B6Z9zeRXAIVSSXYRHIJVCSVYHu+xDQCfQ7IIthen1ESgb4G5BBsu/84hUB3AzII9gApBHoYEE9wBEgg0NOAaIIzQDiBXgbEElwBggm0MCCSoAQQSqDFAXEEZYBAAq0MiCKoAYQRaHVADEEdIIhAGwMiCFoAIQTaHIAnaAMEEGhnAJqgBwAn6AGgCfoAYII+AJZgBABKMAKAJBgDABKMAeAIRgFgBKMAKIJxABDBOACGYAYAQjADgCCYAwAQzAH4E8wCuBPMAngTzAM4E8wD+BKsALgSrAB4EqwBOBKsAfgRrAK4EawCeBGsAzgRrAP4EFgAXAgsAB4ENgAHAhuAncAKYCawAlgJ7ABGAjuAjcADwETgAWAh8AEwEPgArBN4ASwTeAGsEvgBLBL4AawReAIsEXgCrBD4AiwQ+ALME3gDTBN4A8wS+ANMEvgDzBEgAKYIEAAzBBiACQIMwDgBCmCYAAUwSoADGCTAAYwRIAGGCJAAIwRYgAECLECfAA3QJUAD9AjwAB0CPECbIAKgSRAB0CKIAWgQxADUCaIAqgRRADWCOIAKQRxAmSASoEgQCVAiiAUoEMQCXAmiAS4E0QBngniAE0E8wJEgA+BAkAGwJ8gB2BHkAPwRZAG8CLIAfgnyAJ4EeQA/BJkAIvdcAJHbIxdA5J4LIPKWfJ8xxhhjjDHGGGOMMcYYY4wxxhhj/6BvKWrE9J1FGooAAAAASUVORK5CYII=);
            background-size: auto 0.75em;
            background-position: calc(100% - 0.75em) 50%;
            background-repeat: no-repeat;
            background-color: var(--color-responsiville-white);
            padding-right: 2em !important;
        }

    }



    option {
        padding: 0;
        margin: 0;
        line-height: inherit;
    }

    .input-large {
        font-size: 110%;
        padding: 0 2em;
        height: 3.5em;
        line-height: 3.5em;
    }

    .input-medium {
        font-size: 90%;
        padding: 0 1em;
        height: 2.5em;
        line-height: 2.5em;
    }

    .input-small {
        font-size: 80%;
        padding: 0 0.6em;
        height: 2em;
        line-height: 2em;
    }

    input[type="radio"],
    input[type="checkbox"] {
        height: auto;
    }

    input, 
    select,
    button {
        vertical-align: middle;
    }

    input[type="radio"],
    input[type="checkbox"] {
        vertical-align: baseline;
    }

    input:disabled {
        background: var(--color-responsiville-gray);
    }

    input:invalid {
        background: repeating-linear-gradient(-45deg, var(--color-responsiville-gray-light-x) 0, var(--color-responsiville-gray-light) 1rem);
    }

    label,
    select,
    input[type="radio"],
    input[type="checkbox"],
    input[type="file"],
    input[type="color"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="range"] {
        cursor: hand;
        cursor: pointer;
    }

    input:focus, 
    textarea:focus,
    select:focus {
        box-shadow: 0 0 1rem -0.5rem currentColor;
    }

    input[type="radio"],
    input[type="checkbox"] {
        border: none;
        padding: 0;
        box-shadow: none;
    }

    input[type="file"] {
        border-width: 0; 
        box-shadow: none; 
        padding-left: 0; 
        padding-right: 0;
        background: none;
    }

    input[type="file"]:focus {
        border-width: 0; 
        box-shadow: none;
    }

    input[type="color"] {
        background: none;
        border-width: 0;
        box-shadow: none;
        padding: 2.25rem 0;
    }

    @-moz-document url-prefix() { 
        input[type="range"] {
            padding-top: 2.5rem;
        }
    }

    ::-webkit-color-swatch-wrapper {
        padding: 0;
        height: 2rem;
        position: relative;
        top: -1rem;
    }

    input[type="range"] {
        border-width: 0; 
        box-shadow: none; 
        padding-left: 0; 
        padding-right: 0;
        background: none;
        position: relative;
    }

    [type="search"] {
        -moz-appearance: textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

    :-ms-input-placeholder {
        color: var(--color-responsiville-gray-dark);
    }
    ::-ms-input-placeholder {
        color: var(--color-responsiville-gray-dark);
    }
    ::-webkit-input-placeholder {
        color: var(--color-responsiville-gray-dark);
    }
    ::placeholder {
        color: var(--color-responsiville-gray-dark);
    }
    :placeholder-shown {
        color: var(--color-responsiville-gray-dark);
    }

    ::-webkit-validation-bubble-message {
        padding: 2rem;
    }

    

    /* Make them all block level to fit inside a grid. */

    input, 
    textarea,
    select,
    label {
        display: block;
        width: 100%;
    }

    input[type="radio"],
    input[type="checkbox"] {
        display: inline-block;
        width: auto;
    }

    textarea {
        resize: vertical;
    }

    meter {
        width: 100%;
    }

    progress {
        width: 100%;
    }



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

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

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



    button,
    .button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"] {
        display: inline-block;
        vertical-align: middle;
        width: auto;
        text-align: center;
        padding: 0 1.5em;
        height: 3em;
        line-height: 3em;
        border: none;
        outline: none;
        text-decoration: none;
        cursor: hand;
        cursor: pointer;
        font-size: inherit;
        font-family: inherit;
        font-weight: normal;
        color: var(--color-responsiville-gray-dark);
        background: var(--color-responsiville-gray);
        transition-property: opacity, color, background;
        transition-duration: 0.2s;
        transition-timing-function: linear;
    }

    input[type="button"],
    input[type="reset"],
    input[type="submit"] {
        -webkit-appearance: none;
        appearance: none;
    }

    button:hover,
    .button:hover,
    input[type="button"]:hover,
    input[type="reset"]:hover,
    input[type="submit"]:hover {
        color: var(--color-responsiville-gray-light-x);
        background: var(--color-responsiville-gray-dark);
    }

    button:active,
    .button:active,
    input[type="button"]:active,
    input[type="reset"]:active,
    input[type="submit"]:active {
        outline: none;
    }

    button::-moz-focus-inner,
    .button::-moz-focus-inner,
    input[type="reset"]::-moz-focus-inner,
    input[type="button"]::-moz-focus-inner,
    input[type="submit"]::-moz-focus-inner {
        outline: none;
        border-width: 0;
    }

    .button-large {
        font-size: 110%;
        padding: 0 2.5em;
        height: 3.5em;
        line-height: 3.5em;
    }

    .button-medium {
        font-size: 90%;
        padding: 0 1em;
        height: 2.5em;
        line-height: 2.5em;
    }

    .button-small {
        font-size: 80%;
        padding: 0 0.6em;
        height: 2em;
        line-height: 2em;
    }