/* Flexbox */

.flexBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: stretch;
}

.flexItem {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
}

/* */

.flexBoxNowrap {
    flex-wrap: nowrap;
}

/* Horizontal */

.flexBoxStartH {
    justify-content: flex-start;
}

.flexBoxCenterH {
    justify-content: center;
}

.flexBoxEndH {
    justify-content: flex-end;
}

/* Vertical */

.flexBoxStartV {
    align-items: start;
}

.flexBoxCenterV {
    align-items: center;
}

.flexBoxEndV {
    align-items: flex-end;
}

/* */

.flexItem2columnas {
    flex: 0 1 50% !important;
}

.flexItem3columnas {
    flex: 0 1 33.3%;
}

.flexItem4columnas {
    flex: 0 1 25%;
}

.flexItem6columnas {
    flex: 0 1 16.6%;
}

/* */

.flexItem10pc {
    flex: 0 1 10%;
}

.flexItem20pc {
    flex: 0 1 20%;
}

.flexItem30pc {
    flex: 0 1 30%;
}

.flexItem40pc {
    flex: 0 1 40%;
}

.flexItem50pc {
    flex: 0 1 50%;
}

.flexItem60pc {
    flex: 0 1 60%;
}

.flexItem70pc {
    flex: 0 1 70%;
}

.flexItem80pc {
    flex: 0 1 80%;
}

.flexItem90pc {
    flex: 0 1 90%;
}

.flexItem100pc {
    flex: 0 1 100% !important;
}

/* */

.with10pc {
    width: 10%;
}

.with20pc {
    width: 20%;
}

.with30pc {
    width: 30%;
}

.with40pc {
    width: 40%;
}

.with50pc {
    width: 50%;
}

.with60pc {
    width: 60%;
}

.with70pc {
    width: 70%;
}

.with80pc {
    width: 80%;
}

.with90pc {
    width: 90%;
}

.with100pc {
    width: 100%;
}

/* Div tables */

.divTable {
    display: table;
}

.divTableHeading {
    display: table-header-group;
}

.divTableBody {
    display: table-row-group;
}

.divTableRow {
    display: table-row;
}

.divTableCell,
.divTableHead {
    display: table-cell;
    vertical-align: top;
}

.divTableFoot {
    display: table-footer-group;
}

/* Grid */

article {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: 100%;
    height: 100%;
}

section {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

section:last-child {
    padding: 4vw;
    overflow: auto;
}

@media all and (max-width: 780px) {
    article {
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: 1fr;
    }

    section:first-child {
        height: 30vh;
    }

    section:last-child {
        height: 70vh;
    }
}