@charset "UTF-8";

/* ============================================================
     SiteUP! (c) J. Alejandro Ceballos Z.
       Name: siteup-base.css - Build 2503
    License: MIT - https://tldrlegal.com/license/mit-license
             --------------------------------------------------
   Based on: https://html.spec.whatwg.org/multipage/rendering.html
             https://siteuptools.org
   ============================================================ */

/*
    Scale used: 0.125, 0.25, 0.375, 0.625, 1.0, 1.625, 2.625, 4.35, 6.975
                em for data blocks , rem for text elements
    Breakpoints:
            < 360px         (N)ano              Watches, devices
        360px - 479px       (T)iny              Old mobiles, mobile portait
        480px - 767px       (S)mall             Mobile landscape, tablet portait
        768px - 1023px      (M)edium            Tablet landscape, small desktop
        1024px - 1919px     (L)arge             Medium desktop, large desktop
            1920px <=       (W)ide              Extralarge desktops, wide screends
    Practical breakpoints:
        360px - 767px       practical-(S)mall   Mobiles
        768px - 1279px      practical-(M)edium  Tablets
        1280px <=           practical-(L)arge   Desktops
    On media:
        Set default for Tiny, modify for medium and wide
*/

/* ============================================================ [ Non-replaced elements */

/* ------------------------------------------------------------ [ page

    Default:
        html, body { display: block; }
*/
html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Open Sans', sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.625;
    font-size: 100%;
}

/* ------------------------------------------------------------ [ flow content

    Default:
        address, blockquote, center, dialog, div, figure, figcaption, footer, form,
        header, hr, legend, listing, main, p, plaintext, pre, search, xmp { display: block; }
        blockquote, figure, listing, p, plaintext, pre, xmp { margin-block: 1em; }
        blockquote, figure { margin-inline: 40px; }
        address { font-style: italic; }
        listing, plaintext, pre, xmp { font-family: monospace; white-space: pre; }
*/
div {
    margin: 0;
    padding: 0;
}

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

listing,
plaintext,
pre,
xmp {
    font-family: ui-monospace, 'Source Code Pro', Menlo, Consolas, monospace;
    overflow: auto;
}

p {
    line-height: 1.625;
    text-indent: 0;
    orphans: 3;
    widows: 3;
}

code,
kbd {
    margin: 1.625rem
}

blockquote {
    margin-left: 1.625rem;
    padding-left: 0.625rem;
    border-left: 1px solid #999;
}

figcaption {
    font-weight: 400;
}

/* ------------------------------------------------------------ [ phrase content

    Default:
        cite, dfn, em, i, var { font-style: italic; }
        b, strong { font-weight: bolder; }
        code, kbd, samp, tt { font-family: monospace; }
        big { font-size: larger; }
        small { font-size: smaller; }
        sub { vertical-align: sub; }
        sup { vertical-align: super; }
        sub, sup { line-height: normal; font-size: smaller; }
        :link { color: #0000EE; }
        :visited { color: #551A8B; }
        :link:active, :visited:active { color: #FF0000; }
        :link, :visited { text-decoration: underline; cursor: pointer; }
        :focus-visible { outline: auto; }
        mark { background: yellow; color: black; }
        abbr[title], acronym[title] { text-decoration: dotted underline; }
        ins, u { text-decoration: underline; }
        del, s, strike { text-decoration: line-through; }
        q::before { content: open-quote; }
        q::after { content: close-quote; }
        br { display-outside: newline; }
        nobr { white-space: nowrap; }
        wbr { display-outside: break-opportunity; }
        nobr wbr { white-space: normal; }
*/
abbr,
acronym {
    font-family: source-sans-pro, Montserrat, Oxygen, Ubuntu, 'Helvetica Neue', sans-serif;
    cursor: help;
}

code,
kbd,
samp,
tt {
    font-family: 'Nimbus Mono PS', 'Courier New', monospace;
}

em,
i {
    font-style: italic;
}

strong,
b {
    font-weight: 700;
}

big,
.big {
    font-size: larger;
}

small,
.small {
    font-size: smaller;
}

cite {
    font-style: italic;
    word-wrap: break-word;
    white-space: pre;
}

sub,
sup {
    font-size: 0.625rem;
    vertical-align: baseline;
}

sup {
    vertical-align: super;
}

sub {
    vertical-align: sub;
}

.text-bold {
    font-weight: bold;
}

.text-italic {
    font-style: italic;
}

.text-kbd {
    font-family: monospace;
}

.text-under {
    text-decoration: underline;
}

.text-stroke {
    text-decoration: line-through;
}

.text-blink {
    text-decoration: blink;
}

.text-lower {
    text-transform: lowercase;
}

.text-upper {
    text-transform: uppercase;
}

.text-capital {
    text-transform: capitalize;
}

.text-caps {
    font-variant: small-caps;
}

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

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

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

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

.font-tiny {
    font-size: 0.375rem;
}

.font-small {
    font-size: 0.625rem;
}

.font-medium {
    font-size: 1.625rem;
}

.font-large {
    font-size: 2.625rem;
}

.font-wide {
    font-size: 4.35rem;
}

a,
:link {
    font-family: source-sans-pro, Montserrat, Oxygen, Ubuntu, 'Helvetica Neue', sans-serif;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
}

:link:active,
:visited:active {
    text-decoration: dotted;
}

:link,
:visited {
    text-decoration: none;
}

:focus-visible {
    outline: auto;
}

br.clear {
    clear: both;
}

.br-no:before,
.br-no:after {
    display: block;
    content: "";
}

.br-no:after {
    clear: both;
}

/* ------------------------------------------------------------ [ section and headers

    Default:
        article, aside, h1, h2, h3, h4, h5, h6, hgroup, nav, section { display: block; }
        h1 { margin-block: 0.67em; font-size: 2.00em; font-weight: bold; }
        h2 { margin-block: 0.83em; font-size: 1.50em; font-weight: bold; }
        h3 { margin-block: 1.00em; font-size: 1.17em; font-weight: bold; }
        h4 { margin-block: 1.33em; font-size: 1.00em; font-weight: bold; }
        h5 { margin-block: 1.67em; font-size: 0.83em; font-weight: bold; }
        h6 { margin-block: 2.33em; font-size: 0.67em; font-weight: bold; }
*/
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: source-sans-pro, Montserrat, Oxygen, Ubuntu, 'Helvetica Neue', sans-serif;
    font-weight: 500;
    color: #222;
}

h1 {
    margin-block: 0.375rem;
    font-size: 4.25rem;
}

h2 {
    margin-block: 0.625rem;
    font-size: 2.625rem;
}

h3 {
    margin-block: 1.0rem;
    font-size: 1.625rem;
}

h4 {
    margin-block: 1.625rem;
    font-size: 1.0rem;
}

h5 {
    margin-block: 2.625rem;
    font-size: 0.625rem;
}

h6 {
    margin-block: 4.25rem;
    font-size: 0.375rem;
}

/* ------------------------------------------------------------ [ lists

    Default:
        dir, dd, dl, dt, menu, ol, ul { display: block; }
        li { display: list-item; text-align: match-parent; }
        dir, dl, menu, ol, ul { margin-block: 1em; }
        :is(dir, dl, menu, ol, ul) :is(dir, dl, menu, ol, ul) { margin-block: 0;  }
        dd { margin-inline-start: 40px; }
        dir, menu, ol, ul { padding-inline-start: 40px; }
        ol, ul, menu { counter-reset: list-item; }
        ol { list-style-type: decimal; }
        dir, menu, ul { list-style-type: disc; }
        :is(dir, menu, ol, ul) :is(dir, menu, ul) { list-style-type: circle; }
        :is(dir, menu, ol, ul) :is(dir, menu, ol, ul) :is(dir, menu, ul) { list-style-type: square; }
*/
ul,
ol,
dl {
    line-height: 1.625;
}

dd,
dl,
dt,
ol,
ul {
    margin-block: 1.125rem;
    list-style-position: outside;
    padding-inline-start: 1.0rem;
}

:is(dd, dl, dt, ol, ul):is(dd, dl, dt, ol, ul) {
    margin-block: 0.125rem;
}

dt {
    margin-bottom: 0.25rem;
    font-family: source-sans-pro, Montserrat, Oxygen, Ubuntu, 'Helvetica Neue', sans-serif;
    font-weight: 400;
}

li {
    margin-bottom: 0.375rem;
}

dd {
    margin-bottom: 0.625rem;
}

.list-inline {
    list-style: none;
}

.list-inline>li {
    display: inline-block;
    padding: 0 0.125rem 0 0.125rem;
}

.list-nobullet {
    list-style: none;
}

.list-nobullet>li {
    list-style: none;
}

/* ------------------------------------------------------------ [ forms and buttons

    Default:
        margin:0.325rem; padding:0.125rem;  margin-right(spacer):0.875rem
        form { margin-block-end: 1em; }
        input, button { display: inline-block; }
        input, select, button, textarea {
            letter-spacing: initial;
            word-spacing: initial;
            line-height: initial;
            text-transform: initial;
            text-indent: initial;
            text-shadow: initial;
            appearance: auto;
            }
        input:not([type=image i], [type=range i], [type=checkbox i], [type=radio i]) {
            overflow: clip !important;
            overflow-clip-margin: 0 !important;
            }
        input, select, textarea { text-align: initial; }
        :autofill { field-sizing: fixed !important; }
        input[type=hidden i], input[type=file i], input[type=image i] { appearance: none; }
        input:is([type=radio i], [type=checkbox i], [type=reset i], [type=button i], [type=submit i],
            [type=color i], [type=search i]), select, button { box-sizing: border-box; }
        textarea { white-space: pre-wrap; }
        fieldset {
            display: block;
            margin-inline: 2px;
            border: groove 2px ThreeDFace;
            padding-block: 0.35em 0.625em;
            padding-inline: 0.75em;
            min-inline-size: min-content;
            }
        legend { padding-inline: 2px; }
*/
form {
    margin-block: 1.125rem;
}

/* button */
[type='submit'],
[type='reset'],
button,
.button {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    padding: 0.625rem;
    vertical-align: middle;
    line-height: 1.125;
    border-radius: 0.625rem;
    text-transform: capitalize;
    font-weight: 400;
}

/* details and summary */

/* input text entry widget: text, telephone, url, email, password */
[type='text'],
[type='tel'],
[type='url'],
[type='email'],
[type='password'] {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 1.625rem;
    padding: 0.125rem;
    margin-right: 0.875rem;
    line-height: 1.125;
    border-radius: 0.375em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* input domain specific widget: date, month, week, time, local date and time, number */
[type='date'],
[type='month'],
[type='week'],
[type='time'],
[type='datetime-local'],
[type='number'] {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 1.625rem;
    padding: 0.125rem;
    line-height: 1.125;
    border-radius: 0.125em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* input control: range, color, meter, progress */

/* checkbox and radio */
[type='checkbox'],
[type='radio'] {
    margin: 0.625rem;
}

[type='checkbox']:readonly,
[type='radio']:readonly {
    cursor: not-allowed;
}

[type='checkbox']+label,
[type='radio']+label {
    vertical-align: baseline;
    margin-right: 0.625rem;
}

/* file upload*/
[type='file'] {
    margin: 0.625em;
}

/* select */
select {
    height: 6.975rem;
}

select:not([multiple]) {
    height: 2.625rem;
}

optgroup,
option {
    height: 1.625rem;
}

select,
optgroup,
option {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 0.125rem;
}

optgroup {
    margin: 0.375rem;
}

option:checked {
    font-weight: 400;
}

/* textarea */
textarea {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 4.35rem;
    min-height: 2.625rem;
    padding: 0.125rem;
    margin-right: 1rem;
    line-height: 1.125;
    border-radius: 0.125em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* other*/
input:disabled,
textarea:disabled,
fieldset[disabled] {
    opacity: 0.8;
    cursor: not-allowed;
}

label {
    display: block;
    margin: 0.375rem 0;
    font-variant: small-caps;
}

[type='checkbox']+label,
[type='radio']+label {
    display: inline-block;
}

::placeholder,
::-ms-input-placeholder,
::-webkit-input-placeholder,
::-moz-placeholder {
    color: #999;
}

fieldset {
    margin: 1.625em;
}

legend {
    font-size: 0.625rem;
}

/* ------------------------------------------------------------ [ hr

    Default:
        hr {
            color: gray;
            border-style: inset;
            border-width: 1px;
            margin-block: 0.5em;
            margin-inline: auto;
            overflow: hidden;
            }
*/
hr {
    clear: both;
    height: 0;
    width: 86%;
    margin-left: auto;
    margin-right: auto;
    border: 0;
    border-style: inset;
    border-bottom: #999 1px solid;
}

/* ============================================================ [ Replaced elements (audio, canvas, embed, iframe, img, input, object, video) */

/* ------------------------------------------------------------ [ embed

    Default:
        iframe { border: 2px inset; }
        video { object-fit: contain; }
*/
iframe {
    border: 1px #ccc solid;
}

/* ------------------------------------------------------------ [ images
*/
img {
    display: inline-block;
    vertical-align: baseline;
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic;
    page-break-inside: avoid;
}

a img {
    border: 0;
}

figure {
    margin-block: 0.625rem;
    margin-inline: 1.625rem
}

/* ============================================================ [ Structure */

/* ------------------------------------------------------------ [ tables and div.tablealike

    Default:
        table { display: table; }
        caption { display: table-caption; }
        colgroup, colgroup[hidden] { display: table-column-group; }
        col, col[hidden] { display: table-column; }
        thead, thead[hidden] { display: table-header-group; }
        tbody, tbody[hidden] { display: table-row-group; }
        tfoot, tfoot[hidden] { display: table-footer-group; }
        tr, tr[hidden] { display: table-row; }
        td, th { display: table-cell; }
        table {
            box-sizing: border-box;
            border-spacing: 2px;
            border-collapse: separate;
            text-indent: initial;
            }
        td, th { padding: 1px; }
        td[nowrap], th[nowrap] { white-space: nowrap; }
        table[border] { border-style: outset; }
        :is(table, thead, tbody, tfoot, tr) > form { display: none !important; }
*/

/* div class as table */
.caption {
    display: table-caption;
}

.table {
    display: table;
}

.thead {
    display: table-header-group;
}

.tbody {
    display: table-row-group;
}

.tfoot {
    display: table-footer-group;
}

.tr {
    display: table-row;
}

.th,
.td {
    display: table-cell;
}

/* appereance */
table,
.table {
    margin: 0.625rem;
    border-collapse: separate;
    border-spacing: 0.625em;
}

.table-h thead>tr,
.table-h .thead>.tr {
    border-bottom: 1px solid #666;
}

.table-v tr>th:first,
.table-v .tr>.th:first {
    border-right: 1px solid #666;
    text-align: right;
}

th,
.th,
td,
.td {
    padding: 0.375rem;
    vertical-align: top;
}

th,
.th {
    font-weight: 500;
    color: #222;
}

table tfoot>tr,
.table .tfoot>.tr {
    border-top: 1px solid #666;
}

/* style */
.table-nopad th,
.table-nopad .th,
.table-nopad td,
.table-nopad .td {
    padding: 0;
}

.table-pad th,
.table-pad .th,
.table-pad td,
.table-pad .td {
    padding: 0.625rem;
}

/* ------------------------------------------------------------ [ row column
*/
.row {
    margin: 0;
    padding: 0;
    width: 100%;
}

.row:before,
.row:after {
    display: block;
    /*table*/
    content: "";
}

.row:after {
    clear: both;
}

/*  t:97.76%, s:90.83%, (86.78%), m:81.67%, l:76.97%, w:72.11%*/

/*  row-sec set the area to the px lower breakpoint
    row-mgn set a specific em area around, that changes on brekpoints too
    row-fix similar to row-mgn, but without breakpoints or upper and bottom margin
    row-auto sets a global % of area
         */
.row-sec {
    margin-left: auto;
    margin-right: auto;
    width: 86.78%;
}

.row-autotiny {
    margin-left: auto;
    margin-right: auto;
    width: 97.76%;
}

.row-autosmall {
    margin-left: auto;
    margin-right: auto;
    width: 90.83%;
}

.row-auto {
    margin-left: auto;
    margin-right: auto;
    width: 86.78%;
}

.row-automedium {
    margin-left: auto;
    margin-right: auto;
    width: 81.67%;
}

.row-autolarge {
    margin-left: auto;
    margin-right: auto;
    width: 76.97%;
}

.row-autowide {
    margin-left: auto;
    margin-right: auto;
    width: 72.11%;
}

.row-mgntiny {
    margin: 0.625em 1.0em;
}

.row-mgnsmall {
    margin: 1.0em 1.625em;
}

.row-mgn {
    margin: 1.625em 2.625em;
}

.row-mgnmedium {
    margin: 2.625em 4.35em;
}

.row-mgnlarge {
    margin: 4.35em 6.975em;
}

.row-mgnwide {
    margin: 6.975em 11.325em;
}

.row-fixtiny {
    margin: 0 1.0em;
}

.row-fixsmall {
    margin: 0 1.625em;
}

.row-fix {
    margin: 0 2.625em;
}

.row-fixmedium {
    margin: 0 4.35em;
}

.row-fixlarge {
    margin: 0 6.975em;
}

.row-fixwide {
    margin: 0 11.325em;
}

.row-equal {
    display: flex;
}

.col {
    min-height: 100%;
    float: left;
    margin: 0;
    padding: 0;
}

.row-equal>.col {
    align-items: stretch;
}

.row-pad>.col {
    padding: 0.625em;
}

/* base12 */
.col-1 {
    width: 8.3333333%;
}

.col-2 {
    width: 16.6666666%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.3333333%;
}

.col-5 {
    width: 41.6666666%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.3333333%;
}

.col-8 {
    width: 66.6666666%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.3333333%;
}

.col-11 {
    width: 91.6666666%;
}

.col-push1 {
    left: 8.3333333%;
    right: auto;
    position: relative;
}

.col-push2 {
    left: 16.6666666%;
    right: auto;
    position: relative;
}

.col-push3 {
    left: 25%;
    right: auto;
    position: relative;
}

.col-push4 {
    left: 33.3333333%;
    right: auto;
    position: relative;
}

.col-push5 {
    left: 41.6666666%;
    right: auto;
    position: relative;
}

.col-push6 {
    left: 50%;
    right: auto;
    position: relative;
}

.col-push7 {
    left: 58.3333333%;
    right: auto;
    position: relative;
}

.col-push8 {
    left: 66.6666666%;
    right: auto;
    position: relative;
}

.col-push9 {
    left: 75%;
    right: auto;
    position: relative;
}

.col-push10 {
    left: 83.3333333%;
    right: auto;
    position: relative;
}

.col-push11 {
    left: 91.6666666%;
    right: auto;
    position: relative;
}

.col-pull1 {
    right: 8.3333333%;
    left: auto;
    position: relative;
}

.col-pull2 {
    right: 16.6666666%;
    left: auto;
    position: relative;
}

.col-pull3 {
    right: 25%;
    left: auto;
    position: relative;
}

.col-pull4 {
    right: 33.3333333%;
    left: auto;
    position: relative;
}

.col-pull5 {
    right: 41.6666666%;
    left: auto;
    position: relative;
}

.col-pull6 {
    right: 50%;
    left: auto;
    position: relative;
}

.col-pull7 {
    right: 58.3333333%;
    left: auto;
    position: relative;
}

.col-pull8 {
    right: 66.6666666%;
    left: auto;
    position: relative;
}

.col-pull9 {
    right: 75%;
    left: auto;
    position: relative;
}

.col-pull10 {
    right: 83.3333333%;
    left: auto;
    position: relative;
}

.col-pull11 {
    right: 91.6666666%;
    left: auto;
    position: relative;
}

.col-off1 {
    margin-left: 8.3333333%;
}

.col-off2 {
    margin-left: 16.6666666%;
}

.col-off3 {
    margin-left: 25%;
}

.col-off4 {
    margin-left: 33.3333333%;
}

.col-off5 {
    margin-left: 41.6666666%;
}

.col-off6 {
    margin-left: 50%;
}

.col-off7 {
    margin-left: 58.3333333%;
}

.col-off8 {
    margin-left: 66.6666666%;
}

.col-off9 {
    margin-left: 75%;
}

.col-off10 {
    margin-left: 83.3333333%;
}

.col-off11 {
    margin-left: 91.6666666%;
}

.col-nooff {
    margin-left: 0;
}

/* base5 */
.col-1of5 {
    width: 20%;
}

.col-2of5 {
    width: 40%;
}

.col-3of5 {
    width: 60%;
}

.col-4of5 {
    width: 80%;
}

.col-push1of5 {
    left: 20%;
    right: auto;
    position: relative;
}

.col-push2of5 {
    left: 40%;
    right: auto;
    position: relative;
}

.col-push3of5 {
    left: 60%;
    right: auto;
    position: relative;
}

.col-push4of5 {
    left: 80%;
    right: auto;
    position: relative;
}

.col-pull1of5 {
    right: 20%;
    left: auto;
    position: relative;
}

.col-pull2of5 {
    right: 40%;
    left: auto;
    position: relative;
}

.col-pull3of5 {
    right: 60%;
    left: auto;
    position: relative;
}

.col-pull4of5 {
    right: 80%;
    left: auto;
    position: relative;
}

.col-off1of5 {
    margin-left: 20%;
}

.col-off2of5 {
    margin-left: 40%;
}

.col-off3of5 {
    margin-left: 60%;
}

.col-off4of5 {
    margin-left: 80%;
}

/* base7 */
.col-1of7 {
    width: 14.2857142%;
}

.col-2of7 {
    width: 28.5714285%;
}

.col-3of7 {
    width: 42.8571428%;
}

.col-4of7 {
    width: 57.1428571%;
}

.col-5of7 {
    width: 71.4285714%;
}

.col-6of7 {
    width: 85.7142857%;
}

.col-push1of7 {
    left: 14.2857142%;
    right: auto;
    position: relative;
}

.col-push2of7 {
    left: 28.5714285%;
    right: auto;
    position: relative;
}

.col-push3of7 {
    left: 42.8571428%;
    right: auto;
    position: relative;
}

.col-push4of7 {
    left: 57.1428571%;
    right: auto;
    position: relative;
}

.col-push5of7 {
    left: 71.4285714%;
    right: auto;
    position: relative;
}

.col-push6of7 {
    left: 85.7142857%;
    right: auto;
    position: relative;
}

.col-pull1of7 {
    right: 14.2857142%;
    left: auto;
    position: relative;
}

.col-pull2of7 {
    right: 28.5714285%;
    left: auto;
    position: relative;
}

.col-pull3of7 {
    right: 42.8571428%;
    left: auto;
    position: relative;
}

.col-pull4of7 {
    right: 57.1428571%;
    left: auto;
    position: relative;
}

.col-pull5of7 {
    right: 71.4285714%;
    left: auto;
    position: relative;
}

.col-pull6of7 {
    right: 85.7142857%;
    left: auto;
    position: relative;
}

.col-off1of7 {
    margin-left: 14.2857142%;
}

.col-off2of7 {
    margin-left: 28.5714285%;
}

.col-off3of7 {
    margin-left: 42.8571428%;
}

.col-off4of7 {
    margin-left: 57.1428571%;
}

.col-off5of7 {
    margin-left: 71.4285714%;
}

.col-off6of7 {
    margin-left: 85.7142857%;
}

/* ------------------------------------------------------------ [ grid.cell (config for 12)
*/
.grid {
    display: grid;
}

.grid-inline,
.grid-collapsed {
    display: inline-grid;
}

.grid-1 {
    grid-template-columns: auto;
}

.grid-2 {
    grid-template-columns: auto auto;
}

.grid-3 {
    grid-template-columns: auto auto auto;
}

.grid-4 {
    grid-template-columns: auto auto auto auto;
}

.grid-5 {
    grid-template-columns: auto auto auto auto auto;
}

.grid-6 {
    grid-template-columns: auto auto auto auto auto auto;
}

.grid-7 {
    grid-template-columns: auto auto auto auto auto auto auto;
}

.grid-8 {
    grid-template-columns: auto auto auto auto auto auto auto auto;
}

.grid-9 {
    grid-template-columns: auto auto auto auto auto auto auto auto auto;
}

.grid-10 {
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
}

.grid-11 {
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto;
}

.grid-12 {
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
}

.grid-nogap {
    grid-gap: none;
}

.grid-gaptiny {
    grid-gap: 0.25em;
}

.grid-gapsmall {
    grid-gap: 0.375em;
}

.grid-gapmedium {
    grid-gap: 0.625em;
}

.grid-gap {
    grid-gap: 1.0em;
}

.grid-gaplarge {
    grid-gap: 1.625em;
}

.grid-gapwide {
    grid-gap: 2.625em;
}

.grid-center,
.grid-centerx {
    justify-content: center;
}

.grid-justify,
.grid-justifyx {
    justify-content: space-around;
}

.grid-spaced,
.grid-spacedx {
    justify-content: space-evenly;
}

.grid-extreme,
.grid-extremex {
    justify-content: space-between;
}

.grid-center,
.grid-centery {
    align-content: center;
}

.grid-justify,
.grid-justifyy {
    align-content: space-around;
}

.grid-spaced,
.grid-spacedy {
    align-content: space-evenly;
}

.grid-extreme,
.grid-extremey {
    align-content: space-between;
}

.grid-top {
    align-content: start;
}

.grid-right {
    justify-content: end;
}

.grid-bottom {
    align-content: end;
}

.grid-left {
    justify-content: start;
}

.grid>.cell,
.grid-inline>.cell,
.grid-collapsed>.cell {
    padding: 0.625rem;
}

.grid-nopad>.cell {
    padding: 0;
}

.cell-colspan2 {
    grid-column: span 2;
}

.cell-colspan3 {
    grid-column: span 3;
}

.cell-colspan4 {
    grid-column: span 4;
}

.cell-colspan5 {
    grid-column: span 5;
}

.cell-colspan6 {
    grid-column: span 6;
}

.cell-colspan7 {
    grid-column: span 7;
}

.cell-colspan8 {
    grid-column: span 8;
}

.cell-colspan9 {
    grid-column: span 9;
}

.cell-colspan10 {
    grid-column: span 10;
}

.cell-colspan11 {
    grid-column: span 11;
}

.cell-colspan12 {
    grid-column: span 12;
}

.cell-rowspan2 {
    grid-row: span 2;
}

.cell-rowspan3 {
    grid-row: span 3;
}

.cell-rowspan4 {
    grid-row: span 4;
}

.cell-rowspan5 {
    grid-row: span 5;
}

.cell-rowspan6 {
    grid-row: span 6;
}

.cell-rowspan7 {
    grid-row: span 7;
}

.cell-rowspan8 {
    grid-row: span 8;
}

.cell-rowspan9 {
    grid-row: span 9;
}

.cell-rowspan10 {
    grid-row: span 10;
}

.cell-rowspan11 {
    grid-row: span 11;
}

.cell-rowspan12 {
    grid-row: span 12;
}

/* ------------------------------------------------------------ [ flex (dynamic grid)
*/
.flex {
    display: flex;
}

.flex-row {
    flex-flow: row;
}

.flex-column {
    flex-flow: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-start {
    justify-content: flex-start;
}

.flex-center {
    justify-content: center;
}

.flex-end {
    justify-content: flex-end;
}

.flex-around {
    justify-content: space-around;
}

.flex-justify {
    justify-content: space-between;
}

.flex-alternate {
    justify-content: space-evenly;
}

.flex-middle {
    align-items: center;
}

.flex-stretch {
    align-items: stretch;
}

.flex-grow {
    flex-grow: 1;
}

.flex-nogrow {
    flex-grow: 0;
}

.flex-shrink {
    flex-shrink: 1;
}

.flex-noshrink {
    flex-shrink: 0;
}

/* ------------------------------------------------------------ [ margin, padding and containers
*/
.mgn {
    margin: 1.625em;
}

.mgn-top {
    margin-top: 1.625em;
}

.mgn-right {
    margin-right: 1.625em;
}

.mgn-bottom {
    margin-bottom: 1.625em;
}

.mgn-left {
    margin-left: 1.625em;
}

.mgn-tiny {
    margin: 0.375em;
}

.mgn-small {
    margin: 0.625em;
}

.mgn-medium {
    margin: 1.0em;
}

.mgn-large {
    margin: 2.625em;
}

.mgn-wide {
    margin: 4.35em;
}

.mgn-auto {
    margin: 6.25%;
}

.mgn-no,
.container-no {
    margin: 0;
}

.mgn-notop,
.container-notop {
    margin-top: 0;
}

.mgn-noright,
.container-noright {
    margin-right: 0;
}

.mgn-nobottom,
.container-nobottom {
    margin-bottom: 0;
}

.mgn-noleft,
.container-noleft {
    margin-left: 0;
}

.mgn-noblock {
    margin-block: 0;
}

.pad {
    padding: 1.625em;
}

.pad-top {
    padding-top: 1.625em;
}

.pad-right {
    padding-right: 1.625em;
}

.pad-bottom {
    padding-bottom: 1.625em;
}

.pad-left {
    padding-left: 1.625em;
}

.pad-tiny {
    padding: 0.375em;
}

.pad-small {
    padding: 0.625em;
}

.pad-medium {
    padding: 1.0em;
}

.pad-large {
    padding: 2.625em;
}

.pad-wide {
    padding: 4.35em;
}

.pad-auto {
    padding: 6.25%;
}

.pad-no,
.container-no {
    padding: 0;
}

.pad-notop,
.container-notop {
    padding-top: 0;
}

.pad-noright,
.container-noright {
    padding-right: 0;
}

.pad-nobottom,
.container-nobottom {
    padding-bottom: 0;
}

.pad-noleft,
.container-noleft {
    padding-left: 0;
}

.container {
    margin: 5.0%;
    padding: 5.0%;
}

.container-center {
    margin: 5.0% auto;
    padding: 5.0%;
}

.container-tiny {
    margin: 0.625%;
    padding: 0.625%;
}

.container-small {
    margin: 1.875%;
    padding: 1.875%;
}

.container-medium {
    margin: 3.125%;
    padding: 3.125%;
}

.container-large {
    margin: 8.125%;
    padding: 8.125%;
}

.container-wide {
    margin: 13.125%;
    padding: 13.125%;
}

/* ------------------------------------------------------------ [ position and dimension
*/
.left {
    float: left;
}

.right {
    float: right;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

.top {
    vertical-align: top;
}

.middle {
    vertical-align: middle;
}

.bottom {
    vertical-align: bottom;
}

.size-10w {
    width: 10%;
}

.size-20w {
    width: 20%;
}

.size-25w {
    width: 25%;
}

.size-30w {
    width: 30%;
}

.size-33w {
    width: 33.3333333333333333333333%;
}

.size-40w {
    width: 40%;
}

.size-50x,
.size-half,
.size-halfw {
    width: 50%;
}

.size-60w {
    width: 60%;
}

.size-66w {
    width: 66.6666666666666666666666%;
}

.size-70w {
    width: 70%;
}

.size-75w {
    width: 75%;
}

.size-80w {
    width: 80%;
}

.size-90w {
    width: 90%;
}

.size-100w,
.size-full,
.size-fullw {
    width: 100%;
}

.size-10h {
    height: 10%;
}

.size-20h {
    height: 20%;
}

.size-25h {
    height: 25%;
}

.size-30h {
    height: 30%;
}

.size-33h {
    height: 33.3333333333333333333333%;
}

.size-40h {
    height: 40%;
}

.size-50x,
.size-half,
.size-halfw {
    height: 50%;
}

.size-60h {
    height: 60%;
}

.size-66h {
    height: 66.6666666666666666666666%;
}

.size-70h {
    height: 70%;
}

.size-75h {
    height: 75%;
}

.size-80h {
    height: 80%;
}

.size-90h {
    height: 90%;
}

.size-100h,
.size-full,
.size-fullh {
    height: 100%;
}

/* view units vh (dvh, lvh, svh) /  vw (dvw, lvw, svw)  */
.size-fullv,
.size-fullvw {
    width: 100svw;
}

.size-fullv,
.size-fullvh {
    height: 100svh;
}

.size-halfv,
.size-halfvw {
    width: 50svw;
}

.size-halfv,
.size-halfvh {
    height: 50svh;
}

/* ============================================================ [ Effects */

/* ------------------------------------------------------------ [ border, round
*/
.round-no {
    border-radius: 0;
}

.round-tiny {
    border-radius: 0.125em;
}

.round-small {
    border-radius: 0.25em;
}

.round-medium {
    border-radius: 0.375em;
}

.round {
    border-radius: 0.625em;
}

.round-large {
    border-radius: 1.0em;
}

.round-wide {
    border-radius: 1.625em;
}

.round-quarter {
    border-radius: 12.5%;
}

.round-half {
    border-radius: 25%;
}

.round-full {
    border-radius: 50%;
}

.round-topleft {
    border-top-left-radius: 0.625em;
}

.round-topright {
    border-top-right-radius: 0.625em;
}

.round-bottomleft {
    border-bottom-left-radius: 0.625em;
}

.round-bottomright {
    border-bottom-right-radius: 0.625em;
}

.border-no {
    border: 0;
}

.border-tiny {
    border: 1px #666 solid;
}

.border {
    border: 0.125em #666 solid;
}

.border-small {
    border: 0.25em #666 solid;
}

.border-medium {
    border: 0.375em #666 solid;
}

.border-large {
    border: 0.625em #666 solid;
}

.border-wide {
    border: 1.0em #666 solid;
}

.border-top {
    border-top: 0.125em #666 solid;
}

.border-right {
    border-right: 0.125em #666 solid;
}

.border-bottom {
    border-bottom: 0.125em #666 solid;
}

.border-left {
    border-left: 0.125em #666 solid;
}

/* ------------------------------------------------------------ [ visibility
*/
.show {
    display: block;
}

.hide {
    display: none;
}

@media (orientation:landscape) {
    .show-h {
        display: block;
    }

    .hide-h {
        display: none;
    }

}

@media (orientation:portrait) {
    .show-v {
        display: block;
    }

    .hide-v {
        display: none;
    }

}

/* ------------------------------------------------------------ [ notification
*/
.bkg-critical {
    background-color: #914;
}

.bkg-danger {
    background-color: #d02;
}

.bkg-alert {
    background-color: #f73;
}

.bkg-warning {
    background-color: #fc2;
}

.bkg-success {
    background-color: #0b2;
}

.bkg-inform {
    background-color: #05e;
}

.bkg-note {
    background-color: #ccc;
}

.text-critical {
    color: #914;
}

.text-danger {
    color: #d02;
}

.text-alert {
    color: #f73;
}

.text-warning {
    color: #fc2;
}

.text-success {
    color: #0b2;
}

.text-inform {
    color: #05e;
}

.border-critical {
    border-color: #914;
}

.border-danger {
    border-color: #d02;
}

.border-alert {
    border-color: #f73;
}

.border-warning {
    border-color: #fc2;
}

.border-success {
    border-color: #0b2;
}

.border-inform {
    border-color: #05e;
}

.bkg-note {
    color: #ccc;
}

.note {
    color: #999;
}

.error {
    border: 0.2em solid #900;
}