.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] {
    float: left;
    padding: 0 15px 15px 0;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}
.row.flex{
    display: flex;
    flex-direction: row;
}
.row.flex .col-1 {flex: 1;}
.row.flex .col-2 {flex: 2;}
.row.flex .col-3 {flex: 3;}
.row.flex .col-4 {flex: 4;}
.row.flex .col-5 {flex: 5;}
.row.flex .col-6 {flex: 6;}
.row.flex .col-7 {flex: 7;}
.row.flex .col-8 {flex: 8;}
.row.flex .col-9 {flex: 9;}
.row.flex .col-10 {flex: 10;}
.row.flex .col-11 {flex: 11;}
.row.flex .col-12 {flex: 12;}

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

[class*="col-"].content-right{
    padding-right: 40px !important;
    text-align: right;
}
@media screen and (max-width: 768px){
    [class*="col-"] {
        padding: 15px;
    }
    .row.has-flip{
        padding-bottom: 15em;
    }
    .row.snap-when-small .col-8,
    .row.snap-when-small .col-7,
    .row.snap-when-small .col-6,
    .row.snap-when-small .col-5, 
    .row.snap-when-small .col-4,
    .row.snap-when-small .col-3 {
        width: 100%;
    }
    .row.flex.snap-when-small{
        flex-direction: column;
    }
    .row.snap-when-small .col-6.snap-max-70{
        width: 80%;
    }
    .row.snap-when-small .col-6.flip-to-bottom{
        position: absolute;
        bottom: 0;
    }

    .row.flip{
        display: flex;
        flex-direction: column;
    }
    .row .first-when-small{
        order: -1;
    }
}
@media screen and (max-width: 425px){
    .row.has-flip{
        padding-bottom: 10em;
    }
}
@media screen and (max-width: 320px){
    .row.has-flip{
        padding-bottom: 7em;
    }
}

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