/* Class styling for flex row of items that will collapse into a column with responsive sizing, this should be paired */

.flexrow-wrap {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.flexrow-wrapreverse {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.flex-1 {
    width: 8.3%;
}

.flex-2 {
    width: 16.6%;
}

.flex-3 {
    width: 25%;
}

.flex-4 {
    width: 33.3%;
}

.flex-5 {
    width: 41.6%;
}

.flex-6 {
    width: 50%;
}

.flex-7 {
    width: 58.3%;
}

.flex-8 {
    width: 66.6%;
}

.flex-9 {
    width: 75%;
}

.flex-10 {
    width: 83.3%;
}

.flex-11 {
    width: 91.6%;
}

.flex-12 {
    width: 100%;
}

@media (max-width: 768px) {
    .flex-1, .flex-2, .flex-3, .flex-4, .flex-5, .flex-6, .flex-7, .flex-8, .flex-9, .flex-10, .flex-11, .flex-12 {
        width: 100%;
    }
}