/** grids and columns**/
.row::after {
    clear: both;
}

.col {
    float: left;
}

.col.s12 {
    width: 100%;
}
.col.s11 {
    width: calc((100%/12) * 11);
}
.col.s10 {
    width: calc((100%/12) * 10);
}

.col.s9 {
    width: calc((100%/12) * 9);
}

.col.s8 {
    width: calc((100%/12) * 8);
}

.col.s7 {
    width: calc((100%/12) * 7);
}

.col.s6 {
    width: calc((100%/12) * 6);
}

.col.s5 {
    width: calc((100%/12) * 5);
}

.col.s4 {
    width: calc((100%/12) * 4);
}

.col.s3 {
    width: calc((100%/12) * 3);
}

.col.s2 {
    width: calc((100%/12) * 2);
}

.col.s1 {
    width: calc(100%/12);
}

@media (min-width: 400px) {
    .col.sm12 {
        width: 100%;
    }
    .col.sm11 {
        width: calc((100%/12) * 11);
    }
    .col.sm10 {
        width: calc((100%/12) * 10);
    }
    
    .col.sm9 {
        width: calc((100%/12) * 9);
    }
    
    .col.sm8 {
        width: calc((100%/12) * 8);
    }
    
    .col.sm7 {
        width: calc((100%/12) * 7);
    }
    
    .col.sm6 {
        width: calc((100%/12) * 6);
    }
    
    .col.sm5 {
        width: calc((100%/12) * 5);
    }
    
    .col.sm4 {
        width: calc((100%/12) * 4);
    }
    
    .col.sm3 {
        width: calc((100%/12) * 3);
    }
    
    .col.sm2 {
        width: calc((100%/12) * 2);
    }
    
    .col.sm1 {
        width: calc(100%/12);
    }
}

@media (min-width: 500px) {
    .col.m12 {
        width: 100%;
    }
    .col.m11 {
        width: calc((100%/12) * 11);
    }
    .col.m10 {
        width: calc((100%/12) * 10);
    }
    
    .col.m9 {
        width: calc((100%/12) * 9);
    }
    
    .col.m8 {
        width: calc((100%/12) * 8);
    }
    
    .col.m7 {
        width: calc((100%/12) * 7);
    }
    
    .col.m6 {
        width: calc((100%/12) * 6);
    }
    
    .col.m5 {
        width: calc((100%/12) * 5);
    }
    
    .col.m4 {
        width: calc((100%/12) * 4);
    }
    
    .col.m3 {
        width: calc((100%/12) * 3);
    }
    
    .col.m2 {
        width: calc((100%/12) * 2);
    }
    
    .col.m1 {
        width: calc(100%/12);
    }
}

@media (min-width: 750px) {
    .col.l12 {
        width: 100%;
    }
    .col.l11 {
        width: calc((100%/12) * 11);
    }
    .col.l10 {
        width: calc((100%/12) * 10);
    }
    
    .col.l9 {
        width: calc((100%/12) * 9);
    }
    
    .col.l8 {
        width: calc((100%/12) * 8);
    }
    
    .col.l7 {
        width: calc((100%/12) * 7);
    }
    
    .col.l6 {
        width: calc((100%/12) * 6);
    }
    
    .col.l5 {
        width: calc((100%/12) * 5);
    }
    
    .col.l4 {
        width: calc((100%/12) * 4);
    }
    
    .col.l3 {
        width: calc((100%/12) * 3);
    }
    
    .col.l2 {
        width: calc((100%/12) * 2);
    }
    
    .col.l1 {
        width: calc(100%/12);
    }
}