/*-------------------------*/
/*        Grid Column      */
/*-------------------------*/
* {
    /*box-sizing: border-box;   ->>width =object's width + padding +border width*/
}



.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    float: left;
    /* padding: 15px; */
    /*border: 1px solid red;*/
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}


@media only screen and (min-width: 320px)  {
    /* For Mobile S : ms */
    .col-ms-1 {width: 8.33%;}
    .col-ms-2 {width: 16.66%;}
    .col-ms-3 {width: 25%;}
    .col-ms-4 {width: 33.33%;}
    .col-ms-5 {width: 41.66%;}
    .col-ms-6 {width: 50%;}
    .col-ms-7 {width: 58.33%;}
    .col-ms-8 {width: 66.66%;}
    .col-ms-9 {width: 75%;}
    .col-ms-10 {width: 83.33%;}
    .col-ms-11 {width: 91.66%;}
    .col-ms-12 {width: 100%;}
}
@media only screen and (min-width: 375px)  {
     /* For Mobile M : mm */
    .col-mm-1 {width: 8.33%;}
    .col-mm-2 {width: 16.66%;}
    .col-mm-3 {width: 25%;}
    .col-mm-4 {width: 33.33%;}
    .col-mm-5 {width: 41.66%;}
    .col-mm-6 {width: 50%;}
    .col-mm-7 {width: 58.33%;}
    .col-mm-8 {width: 66.66%;}
    .col-mm-9 {width: 75%;}
    .col-mm-10 {width: 83.33%;}
    .col-mm-11 {width: 91.66%;}
    .col-mm-12 {width: 100%;}
}
@media only screen and (min-width: 425px) {
    /* For Mobile L : ml */
    .col-ml-1 {width: 8.33%;}
    .col-ml-2 {width: 16.66%;}
    .col-ml-3 {width: 25%;}
    .col-ml-4 {width: 33.33%;}
    .col-ml-5 {width: 41.66%;}
    .col-ml-6 {width: 50%;}
    .col-ml-7 {width: 58.33%;}
    .col-ml-8 {width: 66.66%;}
    .col-ml-9 {width: 75%;}
    .col-ml-10 {width: 83.33%;}
    .col-ml-11 {width: 91.66%;}
    .col-ml-12 {width: 100%;}
}

@media only screen and (min-width: 640px) {
    /* For Tablet widht 640: tm */
    .col-tm-1 {width: 8.33%;}
    .col-tm-2 {width: 16.66%;}
    .col-tm-3 {width: 25%;}
    .col-tm-4 {width: 33.33%;}
    .col-tm-5 {width: 41.66%;}
    .col-tm-6 {width: 50%;}
    .col-tm-7 {width: 58.33%;}
    .col-tm-8 {width: 66.66%;}
    .col-tm-9 {width: 75%;}
    .col-tm-10 {width: 83.33%;}
    .col-tm-11 {width: 91.66%;}
    .col-tm-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For Tablet: t,tl */
    .col-t-1,.col-tl-1  {width: 8.33%;}
    .col-t-2,.col-tl-2   {width: 16.66%;}
    .col-t-3,.col-tl-3   {width: 25%;}
    .col-t-4,.col-tl-4   {width: 33.33%;}
    .col-t-5,.col-tl-5   {width: 41.66%;}
    .col-t-6,.col-tl-6   {width: 50%;}
    .col-t-7,.col-tl-7   {width: 58.33%;}
    .col-t-8,.col-tl-8   {width: 66.66%;}
    .col-t-9,.col-tl-9   {width: 75%;}
    .col-t-10,.col-tl-10   {width: 83.33%;}
    .col-t-11,.col-tl-11  {width: 91.66%;}
    .col-t-12,.col-tl-12   {width: 100%;}
}
@media only screen and (min-width: 1024px) {
    /* For Laptop: ls */
    .col-ls-1 {width: 8.33%;}
    .col-ls-2 {width: 16.66%;}
    .col-ls-3 {width: 25%;}
    .col-ls-4 {width: 33.33%;}
    .col-ls-5 {width: 41.66%;}
    .col-ls-6 {width: 50%;}
    .col-ls-7 {width: 58.33%;}
    .col-ls-8 {width: 66.66%;}
    .col-ls-9 {width: 75%;}
    .col-ls-10 {width: 83.33%;}
    .col-ls-11 {width: 91.66%;}
    .col-ls-12 {width: 100%;}
}
@media only screen and (min-width: 1280px) {
    /* For Laptop  width 1280 px : lm*/
    .col-1,.col-lm-1 {width: 8.33%;}
    .col-2,.col-lm-2 {width: 16.66%;}
    .col-3,.col-lm-3 {width: 25%;}
    .col-4,.col-lm-4 {width: 33.33%;}
    .col-5,.col-lm-5 {width: 41.66%;}
    .col-6,.col-lm-6 {width: 50%;}
    .col-7,.col-lm-7 {width: 58.33%;}
    .col-8,.col-lm-8 {width: 66.66%;}
    .col-9,.col-lm-9 {width: 75%;}
    .col-10,.col-lm-10 {width: 83.33%;}
    .col-11,.col-lm-11 {width: 91.66%;}
    .col-12,.col-lm-12 {width: 100%;}
}
@media only screen and (min-width: 1440px) {
    /* For Laptop L: ll */
    .col-ll-1 {width: 8.33%;}
    .col-ll-2 {width: 16.66%;}
    .col-ll-3 {width: 25%;}
    .col-ll-4 {width: 33.33%;}
    .col-ll-5 {width: 41.66%;}
    .col-ll-6 {width: 50%;}
    .col-ll-7 {width: 58.33%;}
    .col-ll-8 {width: 66.66%;}
    .col-ll-9 {width: 75%;}
    .col-ll-10 {width: 83.33%;}
    .col-ll-11 {width: 91.66%;}
    .col-ll-12 {width: 100%;}

}