:root {
    --neon-flex-margin: 10px;
    --neon-flex-margin-reduce: -10px;
}

.neon-flex {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-left: calc( -1 * var(--neon-flex-margin) );
    margin-right: calc( -1 * var(--neon-flex-margin) );
}

.neon-flex-column {
    flex-direction: column;
    flex-wrap: nowrap;
}

.neon-justify-self {
    justify-self: auto;
}

.neon-justify-self-start {
    justify-self: start;
}

.neon-justify-self-end {
    justify-self: end;
}

.neon-justify-self-center {
    justify-self: center;
}

.neon-justify-self-stretch {
    justify-self: stretch;
}

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

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

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

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

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

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

.neon-align-self,
.neon-align-self-start {
    align-self: start;
}

.neon-align-self-end {
    align-self: end;
}

.neon-align-self-center {
    align-self: center;
}

.neon-align-self-baseline {
    align-self: baseline;
}

.neon-align-self-stretch {
    align-self: stretch;
}

.neon-align-content,
.neon-align-content-start {
    align-content: flex-start;
}

.neon-align-content-end {
    align-content: flex-end;
}

.neon-align-content-center {
    align-content: center;
}

.neon-align-content-between {
    align-content: space-between;
}

.neon-align-content-around {
    align-content: space-around;
}

.neon-align-content-stretch {
    align-content: stretch;
}

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

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

.neon-align-items-center {
    align-items: center;
}

.neon-align-items-baseline {
    align-items: baseline;
}

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

.neon-col-1,
.neon-col-2,
.neon-col-3,
.neon-col-4,
.neon-col-5,
.neon-col-6,
.neon-col-7,
.neon-col-8,
.neon-col-9,
.neon-col-10,
.neon-col-11,
.neon-col-12,
.neon-col-md-1,
.neon-col-md-2,
.neon-col-md-3,
.neon-col-md-4,
.neon-col-md-5,
.neon-col-md-6,
.neon-col-md-7,
.neon-col-md-8,
.neon-col-md-9,
.neon-col-md-10,
.neon-col-md-11,
.neon-col-md-12,
.neon-col-lg-1,
.neon-col-lg-2,
.neon-col-lg-3,
.neon-col-lg-4,
.neon-col-lg-5,
.neon-col-lg-6,
.neon-col-lg-7,
.neon-col-lg-8,
.neon-col-lg-9,
.neon-col-lg-10,
.neon-col-lg-11,
.neon-col-lg-12 {
    box-sizing: border-box;
    margin: var(--neon-flex-margin);
    flex: 0 0 auto;
}

@media (max-width: 500px) {
    .neon-col-md-1,
    .neon-col-md-2,
    .neon-col-md-3,
    .neon-col-md-4,
    .neon-col-md-5,
    .neon-col-md-6,
    .neon-col-md-7,
    .neon-col-md-8,
    .neon-col-md-9,
    .neon-col-md-10,
    .neon-col-md-11,
    .neon-col-md-12 {
        flex-basis: calc(100% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-1 {
        flex-basis: calc(8.33% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-2 {
        flex-basis: calc(16.66% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-3 {
        flex-basis: calc(25% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-4 {
        flex-basis: calc(33.33% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-5 {
        flex-basis: calc(41.66% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-6 {
        flex-basis: calc(50% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-7 {
        flex-basis: calc(58.33% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-8 {
        flex-basis: calc(66.66% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-9 {
        flex-basis: calc(75% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-10 {
        flex-basis: calc(83.33% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-11 {
        flex-basis: calc(91.66% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-12 {
        flex-basis: calc(100% - calc(var(--neon-flex-margin) * 2));
    }
}

@media (min-width: 768px) {
    .neon-col-md-1 {
        flex-basis: calc(8.33% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-md-2 {
        flex-basis: calc(16.66% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-md-3 {
        flex-basis: calc(25% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-md-4 {
        flex-basis: calc(33.33% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-md-5 {
        flex-basis: calc(41.66% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-md-6 {
        flex-basis: calc(50% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-md-7 {
        flex-basis: calc(58.33% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-md-8 {
        flex-basis: calc(66.66% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-md-9 {
        flex-basis: calc(75% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-md-10 {
        flex-basis: calc(83.33% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-md-11 {
        flex-basis: calc(91.66% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-md-12 {
        flex-basis: calc(100% - calc(var(--neon-flex-margin) * 2));
    }

}

@media (min-width: 992px) {
    .neon-col-lg-1 {
        flex-basis: calc(8.33% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-lg-2 {
        flex-basis: calc(16.66% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-lg-3 {
        flex-basis: calc(25% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-lg-4 {
        flex-basis: calc(33.33% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-lg-5 {
        flex-basis: calc(41.66% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-lg-6 {
        flex-basis: calc(50% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-lg-7 {
        flex-basis: calc(58.33% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-lg-8 {
        flex-basis: calc(66.66% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-lg-9 {
        flex-basis: calc(75% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-lg-10 {
        flex-basis: calc(83.33% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-lg-11 {
        flex-basis: calc(91.66% - calc(var(--neon-flex-margin) * 2));
    }

    .neon-col-lg-12 {
        flex-basis: calc(100% - calc(var(--neon-flex-margin) * 2));
    }
}