.row{
    margin-left:-0.5rem;
    margin-right:-0.5rem;
    margin-bottom:1rem;
    &.row-flex{
        flex-wrap:wrap;
    }
    &::after{
        display:block;
        content:"";
        clear:both;
    }
    .col {
        float:left;
        width:100%;
        padding-left:0.5rem;
        padding-right:0.5rem;
        box-sizing:border-box;
    }
}

@media screen and (max-width:599px){
    .row .col {
        &.s12{width:100%;}
        &.s11{width:91.66666666667%;}
        &.s10{width:83.3333333333%;}
        &.s9{width:75%;}
        &.s8{width:66.66666666667%;}
        &.s7{width:58.3333333333%;}
        &.s6{width:50%;}
        &.s5{width:41.6666666667%;}
        &.s4{width:33.3333333333%;}
        &.s3{width:25%;}
        &.s2{width:16.66666666667%;}
        &.s1{width:8.3333333333%;}
    }
}

@media screen and (max-width:500px){
    .row .col {
        &.xs12{width:100%;}
        &.xs11{width:91.66666666667%;}
        &.xs10{width:83.3333333333%;}
        &.xs9{width:75%;}
        &.xs8{width:66.66666666667%;}
        &.xs7{width:58.3333333333%;}
        &.xs6{width:50%;}
        &.xs5{width:41.6666666667%;}
        &.xs4{width:33.3333333333%;}
        &.xs3{width:25%;}
        &.xs2{width:16.66666666667%;}
        &.xs1{width:8.3333333333%;}
    }
}

@media screen and (min-width:600px){
    .row .col {
        &.m12{width:100%;}
        &.m11{width:91.66666666667%;}
        &.m10{width:83.3333333333%;}
        &.m9{width:75%;}
        &.m8{width:66.66666666667%;}
        &.m7{width:58.3333333333%;}
        &.m6{width:50%;}
        &.m5{width:41.6666666667%;}
        &.m4{width:33.3333333333%;}
        &.m3{width:25%;}
        &.m2{width:16.66666666667%;}
        &.m1{width:8.3333333333%;}
    }
}

@media screen and (min-width:993px){
    .row .col{
        &.l12{width:100%;}
        &.l11{width:91.66666666667%;}
        &.l10{width:83.3333333333%;}
        &.l9{width:75%;}
        &.l8{width:66.66666666667%;}
        &.l7{width:58.3333333333%;}
        &.l6{width:50%;}
        &.l5{width:41.6666666667%;}
        &.l4{width:33.3333333333%;}
        &.l3{width:25%;}
        &.l2{width:16.66666666667%;}
        &.l1{width:8.3333333333%;}
        &.push-l4{left:33.33333333%;}
        &.push-l5{left:41.6666666667%;}
        &.push-l6{left:50%;}
        
        &.pull-l6{right:50%;}
        &.pull-l7{right:66.6666666667%;}
        &.pull-l8{right:58.3333333333%;}
    }
}

@media screen and (min-width:1201px){
    .row .col{
        &.xl12{width:100%;}
        &.xl11{width:91.66666666667%;}
        &.xl10{width:83.3333333333%;}
        &.xl9{width:75%;}
        &.xl8{width:66.66666666667%;}
        &.xl7{width:58.3333333333%;}
        &.xl6{width:50%;}
        &.xl5{width:41.6666666667%;}
        &.xl4{width:33.3333333333%;}
        &.xl3{width:25%;}
        &.xl20{width:20%;}
        &.xl2{width:16.66666666667%;}
        &.xl1{width:8.3333333333%;}
    }
}