.grid(@device-type, @breakpoint1:0, @breakpoint2:0, @total) {                    
        .grid-loop(@total, @i: 1) when (@i <= @total){                                              
            @width:  (@i * 100% / @total);             
            .gridmq(@breakpoint1, @breakpoint2, @device-type, @i, @total, @width);
            
            .grid-loop(@total, (@i + 1));
        }                      
        .grid-loop(@total, 1);    
}

.hidden(@device-type, @max-width) {
    .@{prefix}-hidden-@{device-type} {
        @media only screen and (max-width: @max-width) {
            display:none;
        }
    }    
}
 
.@{prefix}-hidden {
    display: none!important;
}

.@{prefix}-row {
    box-sizing: border-box;
    display: block;
    width: 100%;
    &:after {
        clear:both;
        display:block;
        content:"";
    }
}

.@{prefix}-clearfix {
    &:after {   
        clear:both;
        content: "";
        display:block;
        height:0;
    }
}

/* GRID */
.grid(no-stack, 0, @phone, 12);

.grid(small-phone, @small-phone, @phone, 1);

.grid(phone, @phone, @tablet, 1);
.grid(phone, @phone, @tablet, 12);
.grid(phone, @phone, @tablet, 24);

.grid(tablet, @tablet, @desktop ,1 );
.grid(tablet, @tablet, @desktop, 12 );
.grid(tablet, @tablet, @desktop, 24 );

.grid(desktop, @desktop, @wide, 1 );
.grid(desktop, @desktop, @wide, 12 );
.grid(desktop, @desktop, @wide, 24 );


.grid(wide, @wide, 9000, 1 );
.grid(wide, @wide, 9000, 12 );
.grid(wide, @wide, 9000, 24 );

.hidden(desktop, @desktop);
.hidden(tablet, @tablet);
.hidden(phone, @phone);

.@{prefix}-left {
    float: left;
}

.mobile-align(phone, @phone, left);
.mobile-align(phone, @phone, right);
.mobile-align(phone, @phone, center);

.mobile-align(tablet, @tablet, left);
.mobile-align(tablet, @tablet, right);
.mobile-align(tablet, @tablet, center);