/**
 * Gridpak Beta LESS
 *
 * Generator - http://gridpak.com/
 * Created by @erskinedesign
 */

/* Reusable column setup */
.mixin-col {
     border:0px solid rgba(0,0,0,0);
     float:left;
     -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
     box-sizing:border-box;
     -moz-background-clip:padding-box !important;
     -webkit-background-clip:padding-box !important;
     background-clip:padding-box !important;
}
.col {
     .mixin-col;
}

.mixin-span(@num, @gutter_pc, @gutter_px, @padding, @max_columns) {
    @one_col: (100% - (@gutter_pc * (@max_columns - 1))) / @max_columns;
    width:(@one_col * @num) + (@gutter_pc * (@num - 1));
    border-left-width:@gutter_px;
    padding:@padding;
    margin-left:@gutter_pc;
}
.mixin-span_first {
    margin-left:0;
    clear:left;
}

.row {
	clear:both;
}
 
 

    /* 1. 1 Column Grid 0px - 319px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    100%
    
    ----------------------------------------------------------------------------- */	
    
	@media screen and (min-width: 0px) and (max-width: 550px) {
        
        .col {
            margin-left:0%;
            padding:0 4%;
        }
        
        /* --- Gridpak variables ---*/ 
        @max_columns: 1;
        @padding: 0 4%;
        @gutter_px: 0;
        @gutter_pc: 0%;
        

        
        .row .col:first-child {
            .mixin-span_first;
        }
        
        
        /*
        Add your semantic classnames in alongside their corresponding spans here. e.g.
        
        .span_3,
        .my_semantic_class_name {
            ...
        }
        
        */
        .span_1 {
            .mixin-span_first;
            width:100%;
        }

    }

    /* 2. 2 Column Grid 320px - 479px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    49.0%
    Span 2:    100%
    
    ----------------------------------------------------------------------------- */	
    
	@media screen and (min-width: 551px) and (max-width: 768px) {
        
        .col {
            margin-left:0%;
            padding:0 1%;
        }
        
        /* --- Gridpak variables ---*/ 
        @max_columns: 2;
        @padding: 0 1%;
        @gutter_px: 0;
        @gutter_pc: 2%;
        

        
        .row .col:first-child {
            .mixin-span_first;
        }
				
				.row .col.last {
					.mixin-span_first;
				}
        
				.row .col:nth-child(odd){
					.mixin-span_first;
				}
        
        .span_1 {
            .mixin-span(1, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        .span_2 {
            .mixin-span_first;
            width:100%;
        }
        
    }

    /* 3. 3 Column Grid 480px - 1199px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    32.0%
    Span 2:    66.0%
    Span 3:    100%
    
	span half: 45%
    ----------------------------------------------------------------------------- */	
    
	@media screen and (min-width: 769px) and (max-width: 1199px) {
        
        .col {
            margin-left:2%;
            padding:0 1%;
        }
        
        /* --- Gridpak variables ---*/ 
        @max_columns: 3;
        @padding: 0 1%;
        @gutter_px: 0;
        @gutter_pc: 2%;
        

        
        .row .col:first-child {
            .mixin-span_first;
        }
				
				.row .col:nth-child(4n+4){
					.mixin-span_first;
				}
        
        .span_1 {
            .mixin-span(1, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        .span_2 {
            .mixin-span(2, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        .span_3 {
            .mixin-span_first;
            width:100%;
        }
		
				.span_half {
					width: 49%;
				}
				
				
    }

    /* 4. 3 Column Grid 1200px - Infinity 
    ----------------------------------------------------------------------------- 
    
    Span 1:    32.0%
    Span 2:    66.0%
    Span 3:    100%
    
	.span_half 45%
    ----------------------------------------------------------------------------- */	
    
	@media screen and (min-width: 1200px) {
        
        .col {
            margin-left:2%;
            padding:0 1%;
        }
        
        /* --- Gridpak variables ---*/ 
        @max_columns: 3;
        @padding: 0 1%;
        @gutter_px: 0;
        @gutter_pc: 2%;
        

        
        .row .col:first-child {
            .mixin-span_first;
        }
        
				.row .col:nth-child(4n+4){
					.mixin-span_first;
				}
        
        .span_1 {
            .mixin-span(1, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        .span_2 {
            .mixin-span(2, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        .span_3 {
            .mixin-span_first;
            width:100%;
        }
		
				.span_half {
					width: 49%;
				}
    }