/* 
================================================================================
    GRIDBASE.css - Universal Base Stylesheet
    Last Update: Dec 2025
    Author: Midobi
================================================================================

HOW TO USE THIS FILE (FOR WEB DEVELOPERS)
-------------------------------------------------
This is a utility-first CSS framework. Combine classes to build layouts quickly.
ALL sizing uses rem (1rem = 16px). Use 0.25rem increments.

================================================================================
QUICK REFERENCE - MOST COMMON PATTERNS
================================================================================

1. CENTERED CONTAINER WITH MAX-WIDTH:
   <div class="boxbox">...</div>
   - boxbox: max 1400px, centered (scales down responsively)
   - box1000: max 1000px, centered

2. FLEXBOX LAYOUTS:
   <div class="flex gap center">...</div>
   - flex: display flex
   - col: flex-direction column
   - wrap: flex-wrap wrap
   - center: align-items center (vertical centering in row)
   - justcenter: justify-content center (horizontal centering in row)
   - between: justify-content space-between
   - gap: 2rem gap (also: gapmini=1rem, gapmicro=0.5rem, gap2=4rem, gap3=6rem)

3. AUTO-RESPONSIVE GRID (No media queries needed!):
   <div class="autogrid gap">...</div>
   - Columns auto-adjust based on container width
   - Default min-col: 18rem
   - Use autogrid-xs/sm/md/lg/xl for different min widths

4. MANUAL COLUMN WIDTHS (with gap compensation):
   Use with "flex gap" parent:
   - half / halfgap / halfgap2: 50% width (2 columns)
   - third / thirdgap / thirdgap2: 33.33% width (3 columns)
   - quarter / quartergap / quartergap2: 25% width (4 columns)
   - fifth / fifthgap / fifthgap2: 20% width (5 columns)
   
   The "gap" suffix matches the parent's gap class:
   - halfgap = works with "gap" (2rem)
   - halfgap2 = works with "gap2" (4rem)
   - halfgap3 = works with "gap3" (6rem)
   - halfgapmini = works with "gapmini" (1rem)
   - halfgapmicro = works with "gapmicro" (0.5rem)

5. RESPONSIVE BREAKPOINTS:
   Hide at breakpoint:
   - hide400, hide600, hide800, hide1000, hide1200, hide1400
   
   Stack to column at breakpoint:
   - flexcol400, flexcol600, flexcol800, flexcol1000, flexcol1200, flexcol1400
   
   Stack to column-reverse at breakpoint:
   - flexcolrev400, flexcolrev600, flexcolrev800, flexcolrev1000, flexcolrev1200, flexcolrev1400

6. PADDING:
   - pad: 3rem all sides
   - padhalf: 2rem all sides
   - padmini: 0.5rem all sides
   - padside: 3rem left/right only
   - padtop: 3rem top/bottom only
   - padonlytop / padonlybot: 3rem one side only
   - pad2 / padside2 / padtop2: 6rem variants

7. SPACING CHILDREN (vertical):
   - spacer: 2rem margin-bottom between children
   - spacersmall: 1rem
   - spacermini: 0.5rem
   - spacerbig: 3rem

8. SPACING CHILDREN (horizontal):
   - sider: 2rem margin-right between children
   - sidersmall: 1rem
   - sidermini: 0.5rem
   - siderbig: 3rem

9. COMMON UTILITIES:
   - rel: position relative
   - absfull: position absolute, full width/height
   - hidden: display none
   - inactive: opacity 0.25, no pointer events
   - noscroll: overflow hidden (apply to body)
   - centertext: text-align center
   - nowrap: white-space nowrap
   - grow: flex-grow 1 (fill remaining space)
   - noshrink / nosh: flex-shrink 0

10. VISUAL:
    - rounded / roundedmini / rounded2: border-radius (1rem / 0.5rem / 2rem)
    - shadow / shadowmini / shadow2 / shadow3: box-shadow
    - imgrounded / imgshadow: apply to parent, affects child img

11. TRANSITIONS:
    - quicktrans: 0.25s
    - trans: 0.5s
    - slowtrans: 1s

12. Z-INDEX:
    - z1 through z9

13. TEXT SIZES:
    - hugetext: 2rem
    - bigtext: 1.5rem (scales down responsively)
    - midtext: 1.25rem (scales down responsively)
    - disclaimer: 0.8rem italic

14. PAGE SIZING:
    - fullpage: min-height 100vh, width 100%
    - halfpage: min-height 50vh, width 100%
    - fillheight: height 100%

15. BACKGROUNDS:
    - bgcover: background-size cover, centered
    - bgcontain: background-size contain, centered, no-repeat

16. ICON FONTS:
    - la-main, la-brands, la-solid: Line Awesome icons
    - fa-main, fa-brands, fa-solid: Font Awesome icons

17. SCROLL ANIMATIONS (requires JS):
    - SCAfadeleft, SCAfaderight, SCAfadeup, SCAfadedown, SCAzoomin
    - Add "scrollme" class when element enters viewport

================================================================================
EXAMPLE LAYOUTS
================================================================================

TWO-COLUMN WITH GAP (responsive):
<div class="flex gap2 flexcol1000">
    <div class="halfgap2">Column 1</div>
    <div class="halfgap2">Column 2</div>
</div>

THREE-COLUMN CARD GRID (auto-responsive):
<div class="autogrid autogrid-sm gap">
    <div class="rounded shadow pad">Card 1</div>
    <div class="rounded shadow pad">Card 2</div>
    <div class="rounded shadow pad">Card 3</div>
</div>

CENTERED HERO SECTION:
<div class="fullpage flex col center justcenter pad bgcover">
    <h1 class="hugetext centertext">Welcome</h1>
</div>

HEADER WITH LOGO AND NAV:
<div class="flex between center padside">
    <div class="logo">Logo</div>
    <nav class="flex gapmini">...</nav>
</div>

================================================================================
*/

/* #region CSS Variables */
:root {
    /* Status Colors */
    --error-red: #E74C3C;
    --success-green: #2ECC71;
    --warning-yellow: #F1C40F;

    /* Spacing Scale */
    --sp-micro: 0.5rem;
    --sp-mini: 1rem;
    --sp-1: 2rem;
    --sp-2: 3rem;
    --sp-3: 4rem;
    --sp-4: 6rem;

    /* Easing */
    --ease: cubic-bezier(.9, 0, .1, 1);
}
/* #endregion */

/* #region Reset & Globals */
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
}

body {
    font-size: 16px;
    line-height: 1.5;
    min-height: 100vh;
    min-height: 100dvh;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    padding-bottom: 0.06em;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

input, button {
    border: 0;
}

a {
    text-decoration: none;
}

p a {
    word-break: break-word;
}

a, button {
    transition: all 0.3s;
    display: inline-block;
    cursor: pointer;
}

button {
    background-color: transparent;
}

ul, ol {
    margin-left: 2rem;
}

ul li:not(:last-of-type), ol li:not(:last-of-type) {
    margin-bottom: 1rem;
}

sup {
    line-height: 0;
    font-size: 0.75rem !important;
}

table {
    border-collapse: collapse;
}
/* #endregion */

/* #region Utility Classes */
.hidden {
    display: none !important;
}

.inactive {
    opacity: 0.25 !important;
    pointer-events: none !important;
}

.noscroll {
    overflow: hidden;
}

.fillheight {
    height: 100%;
}

.fullpage {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
}

.halfpage {
    min-height: 50vh;
    min-height: 50dvh;
    width: 100%;
}

.centertext {
    text-align: center;
}

.lefttext {
    text-align: left;
}

.righttext {
    text-align: right;
}

.nowrap {
    white-space: nowrap;
}

.pointer, .mainlink, .fancybox {
    cursor: pointer;
}

.rel {
    position: relative;
}

.absfull {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.inlineblock {
    display: inline-block;
}

.block {
    display: block;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}
/* #endregion */

/* #region Containers */
.boxbox {
    max-width: 1400px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.box1200 {
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.box1000, .newsbox {
    max-width: 1000px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.box800 {
    max-width: 800px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.box600 {
    max-width: 600px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 1500px) {
    .boxbox { max-width: 94vw; }
}

@media only screen and (max-width: 800px) {
    .boxbox { max-width: 90vw; }
}
/* #endregion */

/* #region Text Sizes */
.hugetext {
    font-size: 2rem;
}

.bigtext {
    font-size: 1.5rem;
}

.midtext {
    font-size: 1.25rem;
}

.smalltext {
    font-size: 0.875rem;
}

.disclaimer {
    font-size: 0.8rem;
    font-style: italic;
}

@media only screen and (max-width: 1500px) {
    .bigtext { font-size: 1.25rem; }
    .midtext { font-size: 1rem; }
}

@media only screen and (max-width: 800px) {
    .bigtext { font-size: 1rem; }
}
/* #endregion */

/* #region Flexbox */
.flex, .projflex {
    display: flex;
}

.inflex {
    display: inline-flex;
}

.wrap {
    flex-wrap: wrap;
}

.col {
    flex-direction: column;
}

.rowrev {
    flex-direction: row-reverse;
}

.colrev {
    flex-direction: column-reverse;
}

.center {
    align-items: center;
}

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

.alignend {
    align-items: flex-end;
}

.selfstart {
    align-self: flex-start;
}

.selfcenter {
    align-self: center;
}

.selfend {
    align-self: flex-end;
}

.justcenter, .middle {
    justify-content: center;
}

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

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

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

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

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

.grow {
    flex-grow: 1;
    min-width: 0;
}

.nosh, .noshrink {
    flex-shrink: 0;
}
/* #endregion */

/* #region Gaps */
.gapmicro { gap: 0.5rem; }
.gapmini { gap: 1rem; }
.gap { gap: 2rem; }
.gap2 { gap: 4rem; }
.gap3 { gap: 6rem; }

.rowgapmicro { row-gap: 0.5rem; }
.rowgapmini { row-gap: 1rem; }
.rowgap { row-gap: 2rem; }
.rowgap2 { row-gap: 4rem; }
.rowgap3 { row-gap: 6rem; }

.colgapmicro { column-gap: 0.5rem; }
.colgapmini { column-gap: 1rem; }
.colgap { column-gap: 2rem; }
.colgap2 { column-gap: 4rem; }
.colgap3 { column-gap: 6rem; }
/* #endregion */

/* #region Padding */
.padmicro { padding: 0.25rem; }
.padmini { padding: 0.5rem; }
.padhalf { padding: 2rem; }
.pad { padding: 3rem; }
.pad2 { padding: 6rem; }

.padsidemicro { padding-left: 0.25rem; padding-right: 0.25rem; }
.padsidemini { padding-left: 0.5rem; padding-right: 0.5rem; }
.padsidehalf { padding-left: 2rem; padding-right: 2rem; }
.padside { padding-left: 3rem; padding-right: 3rem; }
.padside2 { padding-left: 6rem; padding-right: 6rem; }

.padtopmicro { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.padtopmini { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.padtophalf { padding-top: 2rem; padding-bottom: 2rem; }
.padtop { padding-top: 3rem; padding-bottom: 3rem; }
.padtop2 { padding-top: 6rem; padding-bottom: 6rem; }

.padonlytop { padding-top: 3rem; }
.padonlytop2 { padding-top: 6rem; }
.padonlybot { padding-bottom: 3rem; }
.padonlybot2 { padding-bottom: 6rem; }
.padonlyleft { padding-left: 3rem; }
.padonlyright { padding-right: 3rem; }

@media only screen and (max-width: 1000px) {
    .pad { padding: 2rem; }
    .padside { padding-left: 2rem; padding-right: 2rem; }
}
/* #endregion */

/* #region Margin */
.marginauto { margin: auto; }
.margincenter { margin-left: auto; margin-right: auto; }

.mt0 { margin-top: 0; }
.mt1 { margin-top: 1rem; }
.mt2 { margin-top: 2rem; }
.mt3 { margin-top: 3rem; }
.mt4 { margin-top: 4rem; }

.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: 1rem; }
.mb2 { margin-bottom: 2rem; }
.mb3 { margin-bottom: 3rem; }
.mb4 { margin-bottom: 4rem; }

.ml0 { margin-left: 0; }
.ml1 { margin-left: 1rem; }
.ml2 { margin-left: 2rem; }

.mr0 { margin-right: 0; }
.mr1 { margin-right: 1rem; }
.mr2 { margin-right: 2rem; }
/* #endregion */

/* #region Sizing - Manual Columns */
.w100 { width: 100%; }
.w50 { width: 50%; }
.w25 { width: 25%; }

.half { width: calc(100% / 2); }
.halfgap { width: calc((100% - 2rem) / 2); }
.halfgap2 { width: calc((100% - 4rem) / 2); }
.halfgap3 { width: calc((100% - 6rem) / 2); }
.halfgapmini { width: calc((100% - 1rem) / 2); }
.halfgapmicro { width: calc((100% - 0.5rem) / 2); }

.third { width: calc(100% / 3); }
.thirdgap { width: calc((100% - 4rem) / 3); }
.thirdgap2 { width: calc((100% - 8rem) / 3); }
.thirdgap3 { width: calc((100% - 12rem) / 3); }
.thirdgapmini { width: calc((100% - 2rem) / 3); }
.thirdgapmicro { width: calc((100% - 1rem) / 3); }

.twothird { width: calc(200% / 3); }
.twothirdgap { width: calc((200% + 2rem) / 3); }
.twothirdgap2 { width: calc((200% + 4rem) / 3); }

.quarter { width: calc(100% / 4); }
.quartergap { width: calc((100% - 6rem) / 4); }
.quartergap2 { width: calc((100% - 12rem) / 4); }
.quartergap3 { width: calc((100% - 18rem) / 4); }
.quartergapmini { width: calc((100% - 3rem) / 4); }
.quartergapmicro { width: calc((100% - 1.5rem) / 4); }

.fifth { width: calc(100% / 5); }
.fifthgap { width: calc((100% - 8rem) / 5); }
.fifthgap2 { width: calc((100% - 16rem) / 5); }
.fifthgap3 { width: calc((100% - 24rem) / 5); }
.fifthgapmini { width: calc((100% - 4rem) / 5); }
.fifthgapmicro { width: calc((100% - 2rem) / 5); }
/* #endregion */

/* #region Auto Grid - Container Responsive */
.autogrid {
    display: grid;
    gap: var(--gap, 2rem);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min-col, 18rem), 100%), 1fr));
}

.autogrid-xs { --min-col: 10rem; }
.autogrid-sm { --min-col: 14rem; }
.autogrid-md { --min-col: 18rem; }
.autogrid-lg { --min-col: 22rem; }
.autogrid-xl { --min-col: 28rem; }

.autogrid.gapmicro { --gap: 0.5rem; }
.autogrid.gapmini { --gap: 1rem; }
.autogrid.gap { --gap: 2rem; }
.autogrid.gap2 { --gap: 4rem; }
.autogrid.gap3 { --gap: 6rem; }
/* #endregion */

/* #region Spacer - Vertical Child Spacing */
.spacermicro > *:not(:last-child) { margin-bottom: 0.25rem; }
.spacermini > *:not(:last-child) { margin-bottom: 0.5rem; }
.spacersmall > *:not(:last-child) { margin-bottom: 1rem; }
.spacer > *:not(:last-child) { margin-bottom: 2rem; }
.spacerbig > *:not(:last-child) { margin-bottom: 3rem; }
.spacermax > *:not(:last-child) { margin-bottom: 4rem; }
/* #endregion */

/* #region Sider - Horizontal Child Spacing */
.sidermicro > *:not(:last-child) { margin-right: 0.25rem; }
.sidermini > *:not(:last-child) { margin-right: 0.5rem; }
.sidersmall > *:not(:last-child) { margin-right: 1rem; }
.sider > *:not(:last-child) { margin-right: 2rem; }
.siderbig > *:not(:last-child) { margin-right: 3rem; }
.sidermax > *:not(:last-child) { margin-right: 6rem; }
/* #endregion */

/* #region Border Radius */
.roundedmicro { border-radius: 0.25rem; }
.roundedmini { border-radius: 0.5rem; }
.rounded { border-radius: 1rem; }
.rounded2 { border-radius: 2rem; }
.roundedfull { border-radius: 50%; }

.imgroundedmini img { border-radius: 0.5rem; }
.imgrounded img { border-radius: 1rem; }
.imgrounded2 img { border-radius: 2rem; }
/* #endregion */

/* #region Shadows */
.shadowmini { box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1); }
.shadow { box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1); }
.shadow2 { box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1); }
.shadow3 { box-shadow: 0 0 3rem rgba(0, 0, 0, 0.1); }

.imgshadowmini img { box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1); }
.imgshadow img { box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1); }
.imgshadow2 img { box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1); }
.imgshadow3 img { box-shadow: 0 0 3rem rgba(0, 0, 0, 0.1); }
/* #endregion */

/* #region Transitions */
.quicktrans { transition: all 0.25s var(--ease); }
.trans { transition: all 0.5s var(--ease); }
.slowtrans { transition: all 1s var(--ease); }
/* #endregion */

/* #region Z-Index */
.z1 { z-index: 1; }
.z2 { z-index: 2; }
.z3 { z-index: 3; }
.z4 { z-index: 4; }
.z5 { z-index: 5; }
.z6 { z-index: 6; }
.z7 { z-index: 7; }
.z8 { z-index: 8; }
.z9 { z-index: 9; }
.z10 { z-index: 10; }
.z100 { z-index: 100; }
.z1000 { z-index: 1000; }
/* #endregion */

/* #region Backgrounds */
.bgcover {
    background-size: cover;
    background-position: center;
}

.bgcontain {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.bgfixed {
    background-attachment: fixed;
}
/* #endregion */

/* #region Icon Fonts */
@font-face {
    font-family: 'la-main';
    src: url('https://www.midobi.com/mods/fonts/line/la-regular-400.woff');
}

@font-face {
    font-family: 'la-brands';
    src: url('https://www.midobi.com/mods/fonts/line/la-brands-400.woff');
}

@font-face {
    font-family: 'la-solid';
    src: url('https://www.midobi.com/mods/fonts/line/la-solid-900.woff');
}

@font-face {
    font-family: 'fa-main';
    src: url('https://www.midobi.com/mods/fonts/awesome/fa-regular-400.woff');
}

@font-face {
    font-family: 'fa-brands';
    src: url('https://www.midobi.com/mods/fonts/awesome/fa-brands-400.woff');
}

@font-face {
    font-family: 'fa-solid';
    src: url('https://www.midobi.com/mods/fonts/awesome/fa-solid-900.woff');
}

.la-main, .la-brands, .la-solid,
.fa-main, .fa-brands, .fa-solid {
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 400;
}

.la-main { font-family: 'la-main' !important; }
.la-brands { font-family: 'la-brands' !important; }
.la-solid { font-family: 'la-solid' !important; }
.fa-main { font-family: 'fa-main' !important; }
.fa-brands { font-family: 'fa-brands' !important; }
.fa-solid { font-family: 'fa-solid' !important; }
/* #endregion */

/* #region Form Utilities */
.disableform * {
    opacity: 0.25 !important;
    pointer-events: none !important;
}

.firstnameform {
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    pointer-events: none !important;
    padding: 0 !important;
    opacity: 0.01 !important;
}
/* #endregion */

/* #region Fancybox */
.fancybutton {
    cursor: pointer;
    transition: all 0.2s;
}

.fancybutton:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

.fancybox-button--zoom {
    display: none !important;
}
/* #endregion */

/* #region Scroll Animations */
.slowscroll {
    position: relative;
}

.scrollwrap {
    overflow: hidden;
    position: relative;
}

.scrollme {
    transition: all 1s var(--ease) !important;
    position: relative;
    transform: translate(0, 0) !important;
}

.SCAfadeleft {
    transform: translateX(3rem) !important;
    opacity: 0 !important;
}

.SCAfaderight {
    transform: translateX(-3rem) !important;
    opacity: 0 !important;
}

.SCAfadeup {
    transform: translateY(3rem) !important;
    opacity: 0 !important;
}

.SCAfadedown {
    transform: translateY(-3rem) !important;
    opacity: 0 !important;
}

.SCAzoomin {
    transform: scale(1.2) !important;
    opacity: 0 !important;
}

.inlinespan {
    display: inline-block;
}
/* #endregion */

/* #region PDF Embed */
.pdfembed {
    aspect-ratio: 16/9;
}

@media (orientation: portrait) {
    .pdfembed {
        aspect-ratio: 1 / 1;
    }
}
/* #endregion */

/* #region Popup / Modal States */
.popped {
    opacity: 1 !important;
    pointer-events: all !important;
}
/* #endregion */

/* #region Responsive Hides */
@media (max-width: 1400px) { .hide1400 { display: none !important; } }
@media (max-width: 1200px) { .hide1200 { display: none !important; } }
@media (max-width: 1000px) { .hide1000 { display: none !important; } }
@media (max-width: 800px) { .hide800 { display: none !important; } }
@media (max-width: 600px) { .hide600 { display: none !important; } }
@media (max-width: 400px) { .hide400 { display: none !important; } }

@media (min-width: 1401px) { .show1400 { display: none !important; } }
@media (min-width: 1201px) { .show1200 { display: none !important; } }
@media (min-width: 1001px) { .show1000 { display: none !important; } }
@media (min-width: 801px) { .show800 { display: none !important; } }
@media (min-width: 601px) { .show600 { display: none !important; } }
@media (min-width: 401px) { .show400 { display: none !important; } }
/* #endregion */

/* #region Responsive Flex Column */
@media only screen and (max-width: 1400px) {
    .flexcol1400 { flex-direction: column; }
    .flexcol1400 > * { width: 100%; }
}

@media only screen and (max-width: 1200px) {
    .flexcol1200 { flex-direction: column; }
    .flexcol1200 > * { width: 100%; }
}

@media only screen and (max-width: 1000px) {
    .flexcol1000, .col1000 { flex-direction: column; }
    .flexcol1000 > *, .col1000 > * { width: 100%; }
}

@media only screen and (max-width: 800px) {
    .flexcol800 { flex-direction: column; }
    .flexcol800 > * { width: 100%; }
}

@media only screen and (max-width: 600px) {
    .flexcol600 { flex-direction: column; }
    .flexcol600 > * { width: 100%; }
}

@media only screen and (max-width: 400px) {
    .flexcol400 { flex-direction: column; }
    .flexcol400 > * { width: 100%; }
}
/* #endregion */

/* #region Responsive Flex Column Reverse */
@media only screen and (max-width: 1400px) {
    .flexcolrev1400 { flex-direction: column-reverse; }
    .flexcolrev1400 > * { width: 100%; }
}

@media only screen and (max-width: 1200px) {
    .flexcolrev1200 { flex-direction: column-reverse; }
    .flexcolrev1200 > * { width: 100%; }
}

@media only screen and (max-width: 1000px) {
    .flexcolrev1000, .colrev1000 { flex-direction: column-reverse; }
    .flexcolrev1000 > *, .colrev1000 > * { width: 100%; }
}

@media only screen and (max-width: 800px) {
    .flexcolrev800 { flex-direction: column-reverse; }
    .flexcolrev800 > * { width: 100%; }
}

@media only screen and (max-width: 600px) {
    .flexcolrev600 { flex-direction: column-reverse; }
    .flexcolrev600 > * { width: 100%; }
}

@media only screen and (max-width: 400px) {
    .flexcolrev400 { flex-direction: column-reverse; }
    .flexcolrev400 > * { width: 100%; }
}
/* #endregion */

/* #region Responsive Half Columns */
@media only screen and (max-width: 1400px) {
    .halfcol1400 > * { width: calc((100% - 4rem) / 2); }
}

@media only screen and (max-width: 1000px) {
    .halfcol1000 > * { width: calc((100% - 4rem) / 2); }
}

@media only screen and (max-width: 800px) {
    .halfcol800 > * { width: calc((100% - 4rem) / 2); }
}
/* #endregion */