.row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.col {
    padding: 10px 0 10px 0;

}

.col.s12 {
    width: 100%;
}

.col.s8 {
    width: 66%;
}

.col.s6 {
    width: 50%;
}

.col.s4 {
    width: 33%;
}

.col.s3 {
    width: 25%;
}

.sLeftAlign {
    text-align: left;
}
.sCenterAlign {
    text-align: center;
}
.sRightAlign {
    text-align: right;
}

@media screen and (max-width: 601px) {
    .sHide {
        display: none;
    }   
}

@media screen and (min-width: 601px)
{
    .col.m12 {
        width: 100%;
    }
    
    .col.m8 {
        width: 66%;
    }

    .col.m6 {
        width: 50%;
    }
    
    .col.m4 {
        width: 33%;
    }
    
    .col.m3 {
        width: 25%;
    }
    .mLeftAlign {
        text-align: left;
    }
    .mCenterAlign {
        text-align: center;
    }
    .mRightAlign {
        text-align: right;
    }
}

@media screen and (max-width: 993px) {
    .mHide {
        display: none;
    }   
}

@media screen and (min-width: 993px)
{
    .col.l12 {
        width: 100%;
    }
    
    .col.l8 {
        width: 66%;
    }

    .col.l6 {
        width: 50%;
    }
    
    .col.l4 {
        width: 33%;
    }
    
    .col.l3 {
        width: 25%;
    }
    .lLeftAlign {
        text-align: left;
    }
    .lCenterAlign {
        text-align: center;
    }
    .lRightAlign {
        text-align: right;
    }
}