@layer reset {


    :root {
        --textFont: 'bilo', sans-serif;
        --titleFont: 'Messapia', sans-serif;
        /* Colors */
        --white: #fff;
        --black: #000;


        --heritage-brick: #9C5E42;
        --chestnut: #A18765;
        --canvas-weave: #BCB094;
        --dove: #E7E2D8;
        --lace: #F7F5F2;
        --steel-loom: #D1D2CD;
        --pressed-fern: #94A385;
        --canopy-green: #464F3C;
        --deep-moss: #393839;
        --tab: #E8E2D7;

        --bodyBackground: var(--deep-moss, #393839);

        --border: var(--border-stroke) solid var(--canvas-weave);



        /* ANIMATIONS VARIABLES */
        --anim-duration: 1s;
        --anim-delay: 0.5s;
    }

    @media only screen and (min-width : 961px) {
        :root {
            --border-stroke: 2px;
        }
    }


    @media only screen and (min-width : 0) and (max-width : 960px) {
        :root {
                --border-stroke: .1rem;
            }
    }

    /* @end */


    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    font,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    main,
    article,
    aside,
    figure,
    footer,
    header,
    nav,
    section,
    details,
    summary,
    figcaption {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        vertical-align: baseline;
        background: transparent;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    :where(#wrapper),
    :where(#wrapper):is(div,
        span,
        applet,
        object,
        iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote,
        pre,
        a,
        abbr,
        acronym,
        address,
        big,
        cite,
        code,
        del,
        dfn,
        em,
        font,
        img,
        ins,
        kbd,
        q,
        s,
        samp,
        small,
        strike,
        strong,
        sub,
        sup,
        tt,
        var,
        b,
        u,
        i,
        center,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        fieldset,
        form,
        label,
        legend,
        table,
        caption,
        tbody,
        tfoot,
        thead,
        tr,
        th,
        td,
        main,
        article,
        aside,
        figure,
        footer,
        header,
        nav,
        section,
        details,
        summary,
        figcaption) {
        font-size: 100%;
    }

    sup {
        font-size: 0.6em;
        line-height: 1em;
        vertical-align: super;
    }

    sub {
        font-size: 0.6em;
        line-height: 1em;
        vertical-align: sub;
    }

    main,
    article,
    aside,
    figure,
    footer,
    header,
    nav,
    section,
    details,
    summary,
    figcaption {
        display: block;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    textarea,
    select,
    input,
    option,
    button {
        background: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        border: none;
        padding: 0;
    }

    option {
        font-size: inherit;
    }

    ::placeholder {
        transition: opacity 0.3s linear;
    }

    :focus::placeholder {
        opacity: 0;
    }

    select::-ms-expand,
    ::-ms-clear {
        display: none;
    }

    /* X en campos */

    html {
        background: var(--bodyBackground);
        font: 62.5% var(--textFont, 'Arial');
        line-height: 1;
        margin: 0px;
        padding: 0px;
        -webkit-font-smoothing: antialiased;
    }

    ol,
    ul {
        list-style: none;
    }

    ol li {
        list-style: decimal inside none;
    }

    blockquote,
    q {
        quotes: none;
    }

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: "";
        content: none;
    }

    *::after,
    *::before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    /* remember to define focus styles! */
    :focus {
        outline: 0;
        border: 0px none;
    }

    /* remember to highlight inserts somehow! */
    ins {
        text-decoration: none;
    }

    del {
        text-decoration: line-through;
    }

    /* tables still need 'cellspacing="0"' in the markup */
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    a {
        text-decoration: none;
        color: var(--bsp-blue);
        display: inline-block;
    }

    * {
        -webkit-tap-highlight-color: transparent;
    }

    @media only screen and (min-width : 961px) and (max-width : 1727px) {
        html {
            font-size: calc(5px + (10 - 5) * ((100vw - 961px) / (1727 - 961)));
        }
    }

    @media only screen and (min-width : 0) and (max-width : 429px) {
        html {
            font-size: calc(7px + (10 - 7) * ((100vw - 300px) / (429 - 300)));
        }
    }
}