* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { font-size: 10px; }
body { font-size: 16px; line-height: 1.25; font-family: Arial, sans-serif; color: #000000 }
h1 { font-size: 3.2rem; }
h2 { font-size: 2.4rem; }
h3,h4,h5,h6 { font-size: 1.0rem; }
table { font-size: inherit; line-height: inherit; font-weight: inherit; font-family: inherit; }
.flex {
    display: flex; flex-wrap: nowrap;
    &.wrap {
        flex-wrap: wrap;
    }
    &.col {
        flex-direction: column;
        &.v-top { justify-content: flex-start; }
        &.v-center { justify-content: center; }
        &.v-bottom { justify-content: flex-end; }
        &.v-between { justify-content: space-between; }
        &.h-left { align-items: flex-start; }
        &.h-center { align-items: center; }
        &.h-right { align-items: flex-end; }
    }
    &.row {
        flex-direction: row;
        &.v-top { align-items: flex-start; }
        &.v-center { align-items: center; }
        &.v-bottom { align-items: flex-end; }
        &.h-left { justify-content: flex-start; }
        &.h-center { justify-content: center; }
        &.h-right { justify-content: flex-end; }
        &.h-between { justify-content: space-between; }
    }
}
.h-100 { height: 100%; }
.h-auto { height: auto; }
.w-100 { width: 100%; }
.w-auto { width: auto; }
.clip-triangle-top-left { clip-path: polygon(-1px -1px, 100% -1px, -1px 100%); }
.bg-fill { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; }
img.fit { width: 100%; height: 100%; object-fit: contain; }
img.fill { width: 100%; height: 100%; object-fit: cover; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
ul.no-style { list-style-type: none; }