/* &==> Mobile first approach */

/* extra small devices (phones) */

.xsm-100{
width: 100%;
}
.xsm-50{
    width: 50%;
}
.xsm-33{
    width:33%;
}
.xsm-25{
    width:25%;
}
.xsm-20{
    width: 20%;
}

/* small devices (portrate tablets and larg phones) */

@media screen and (min-width:600px) {
    .sm-100{
width: 100%;
}
.sm-50{
    width: 50%;
}
.sm-33{
    width:33%;
}
.sm-25{
    width:25%;
}
.sm-20{
    width: 20%;
}
}

/* medium devices land scapes tablets */

@media screen and (min-width:768px) {
    .md-100{
width: 100%;
}
.md-50{
    width: 50%;
}
.md-33{
    width:33%;
}
.md-25{
    width:25%;
}
.md-20{
    width: 20%;
}
}

/* large scereen (laptops and desktops) */

@media screen and (min-width:992px) {
    .lg-100{
width: 100%;
}
.lg-50{
    width: 50%;
}
.lg-33{
    width:33%;
}
.lg-25{
    width:25%;
}
.lg-20{
    width: 20%;
}
}
/* Extera large screens (large laptops and desktops) */
@media screen and (min-width: 1200px){
    .xlg-100{
width: 100%;
}
.xlg-50{
    width: 50%;
}
.xlg-33{
    width:33%;
}
.xlg-25{
    width:25%;
}
.xlg-20{
    width: 20%;
}
}