/*
Utility classes

Expand on these later. For padding and margin, a general convention of .{m|p}*-{0-5} works well.

m = margin
p = padding
t = top
r = right
b = bottom
l = left
x = left and right
y = top and bottom
a = all
0 = 0
1 = 0.25rem
2 = 0.5rem
3 = 1rem
4 = 1.5rem
5 = 2rem

Examples: .ma-3, .px-2, etc.
See below for specifics

Note: wait till we implement SCSS to write all these - it's far easier than doing it manually.
*/

.ma-0 {
    margin: 0;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 1rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mr-3 {
    margin-right: 1rem;
}

.mr-4 {
    margin-right: 1.5rem;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
   margin-bottom: 1rem;
}

.ml-3 {
    margin-left: 1rem;
}

.ml-4 {
    margin-left: 1.5rem;
}

.mt-0 {
    margin-top: 0;
}

.mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.my-3 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.pb-2 {
    padding-bottom: 0.5rem;
}

.pl-0 {
    padding-left: 0;
}

.px-0 {
    padding-left: 0;
    padding-right: 0;
}

.content-box * {
    box-sizing: content-box;
}

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

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

.flex-wrap {
    flex-wrap: wrap;
}

.flex-v-center {
    align-items: center;
}

.flex-h-center {
    justify-content: center;
}

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

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

.flex-1 {
    flex: 1 1 0;
}

.flex-2 {
    flex: 2 1 0;
}

.clear {
    clear: both;
}

.pointer {
    cursor: pointer;
}

.text-large {
    font-size: 16px;
}

@media (max-width: 640px) {
    .flex-col-sm {
        display: flex;
        flex-direction: column;
    }
}