/*
###########################################################################
    Grid system   - xs s m l xl
###########################################################################
*/

/* XS Size = < 340  */
.col-xs-12 {
    width: 100%;
}
.col-xs-10 {
    width: 83.333%;
}
.col-xs-9 {
    width: 75%;
}
.col-xs-8 {
    width: 66.664%;
}
.col-xs-7 {
    width: 58.33%;
}
.col-xs-6 {
    width: 50%;
}
.col-xs-5 {
        width: 41.554%;
 }
.col-xs-4 {
    width: 33.332%;
}
.col-xs-3 {
    width: 25%;
}
.col-xs-2 {
    width: 16.666%;
}
.col-xs-1 {
    width: 8.333%;
}
.col-xs-0 {
        width: 0;
        overflow: hidden;
}

@media (min-width: 640px) {
    .col-s-12 {
        width: 100%;
    }
    .col-s-10 {
        width: 83.333%;
    }
    .col-s-9{
        width: 75%;
    }
    .col-s-8{
        width: 66.664%;
    }
    .col-s-7 {
        width: 58.33%;
    }
    .col-s-6 {
        width: 50%;
    }
    .col-s-5 {
        width: 41.554%;
    }
    .col-s-4 {
        width: 33.332%;
    }
    .col-s-3 {
        width: 25%;
    }
    .col-s-2 {
        width: 16.666%;
    }
    .col-s-1 {
        width: 8.333%;
    }
    .col-s-0 {
        width: 0;
        overflow: hidden;
    }
}
@media (min-width: 768px) {
    .col-m-12{
        width: 100%;
    }
    .col-m-10 {
        width: 83.333%;
    }
    .col-m-9{
        width: 75%;
    }
    .col-m-8{
        width: 66.664%;
    }
    .col-m-7 {
        width: 58.33%;
    }
    .col-m-6 {
        width: 50%;
    }
    .col-m-5 {
        width: 41.554%;
    }
    .col-m-4 {
        width: 33.332%;
    }
    .col-m-3 {
        width: 25%;
    }
    .col-m-2 {
        width: 16.666%;
    }
    .col-m-1 {
        width: 8.333%;
    }
    .col-m-0 {
        width: 0;
        overflow: hidden;
    }
}
@media (min-width: 1024px) {
    .col-l-12 {
        width: 100%;
    }
    .col-l-10 {
        width: 83.333%;
    }
    .col-l-9 {
        width: 75%;
    }
    .col-l-8 {
        width: 66.664%;
    }
    .col-l-7 {
        width: 58.33%;
    }
    .col-l-6 {
        width: 50%;
    }
    .col-l-5 {
        width: 41.554%;
    }
    .col-l-4 {
        width: 33.332%;
    }
    .col-l-3 {
        width: 25%;
    }
    .col-l-2 {
        width: 16.666%;
    }
    .col-l-1 {
        width: 8.333%;
    }
    .col-l-0 {
        width: 0;
        overflow: hidden;
    }
}
@media (min-width:1240px) {
    .col-xl-12 {
        width: 100%;
    }
    .col-xl-10 {
        width: 83.333%;
    }
    .col-xl-9 {
        width: 75%;
    }
    .col-xl-8 {
        width: 66.664%;
    }
    .col-xl-7 {
        width: 58.33%;
    }
    .col-xl-6 {
        width: 50%;
    }
    .col-xl-5 {
        width: 41.554%;
    }
    .col-xl-4 {
        width: 32%;
    }
    .col-xl-3 {
        width: 25%;
    }
    .col-xl-2 {
        width: 16.666%;
    }
    .col-xl-1 {
        width: 8.333%;
    }
    .col-xl-0 {
        width: 0;
        overflow: hidden;
    }
}