/* ------------------------------------------------------------------ Flexs columning */
.flexRow {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    justify-content: left;
}

.mBottom {
    margin-bottom: var(--f);
}

.mTop {
    margin-top: var(--f);
}

.flexColumn {
    display: flex;
    flex-flow: column;
    /* align-items: center; */
    justify-content: start;
    width: 100%;
}

.flexValign {
    align-items: center;
}

.flexCenter {
    justify-content: center;
}

.flexRight {
    justify-content: end;
}


.end {
    align-items: flex-end;
}

.spaceBetween {
    justify-content: space-between;
}

.vStretch {
    align-items: stretch;
}

.vCenter {
    align-items: center;
}

.noWrap {
    flex-wrap: nowrap;
}

.rowGap {
    row-gap: calc(1 * var(--m) - var(--fix));
}

.rowDoubleGap {
    row-gap: calc(2 * var(--m) - var(--fix));
}

.rowBigGap {
    row-gap: calc(10 * var(--m) - var(--fix));
}

.columnGap {
    column-gap: calc(var(--m) - var(--fix));
}

.column1 {
    width: var(--column1);
}

.column2 {
    width: var(--column2);
}

.column3 {
    width: var(--column3);
}

.column4 {
    width: var(--column4);
}

.column6 {
    width: var(--column6);
}

.column8 {
    width: var(--column8);
}

.column9 {
    width: var(--column9);
}

.column10 {
    width: var(--column10);
}

.column11 {
    width: var(--column11);
}

.column12 {
    width: var(--column12);
}

.columnCover {
    width: 100vw;
}


@media screen and (orientation: portrait) {


    .rcolumn1 {
        width: var(--column1);
    }

    .rcolumn2 {
        width: var(--column2);
    }

    .rcolumn3 {
        width: var(--column3);
    }

    .rcolumn4 {
        width: var(--column4);
    }

    .rcolumn6 {
        width: var(--column6);
    }

    .rcolumn8 {
        width: var(--column8);
    }

    .rcolumn9 {
        width: var(--column9);
    }

    .rcolumn10 {
        width: var(--column10);
    }

    .rcolumn11 {
        width: var(--column11);
    }

    .rcolumn12 {
        width: var(--column12);
    }

}