/**
* MAIN COLUMNS
*/
.flex-grid {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
}

.flex-grid .col {
    flex: 1;
}

.flex-grid-thirds {
    display: flex;
    justify-content: space-between;
}

.flex-grid .col-1-2 {
    width: 49%;
}
.flex-grid .col-1-3 {
    width: 32%;
}

@media (max-width: 400px) {
    .flex-grid,
    .flex-grid-thirds {
        display: block;
    }
    .flex-grid [class^='col'],
    .flex-grid [class*=' col']{
        width: 100%;
        margin: 0 0 10px 0;
    }
}

.flex-grid {
    margin: 0 0 20px 0;
}

.col {
    padding: 20px;
}

/**
* HELPER CLASSES
*/
.align-top {
    align-self:flex-start;
}
.align-bottom {
     align-self:flex-end;
 }
.align-center{
    align-self:center;
}
.fixed-width {
    -ms-flex-negative:0;
    flex-shrink:0;
}

@supports (display:grid) {
    .align-top {
        align-self:start;
    }
    .align-bottom {
        align-self:end;
    }
}