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

/* Reusable column setup */
.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;
}



    /* 1. 1 Column Grid 0px - 319px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 0px) and (max-width: 319px) {
        
        .col {
            margin-left:0.5%;
        	padding:0;
        }
        
        .row .col:first-child {
            margin-left:0;
        }
        
        
        /*
        Add your semantic classnames in alongside their corresponding spans here. e.g.
        
        .span_3,
        .my_semantic_class_name {
            ...
        }
        */
        
        .span_1 {
            margin-left:0;
            width:100%;
        }
    }

    /* 2. 4 Column Grid 320px - 479px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    24.625%
    Span 2:    49.75%
    Span 3:    74.875%
    Span 4:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 320px) and (max-width: 479px) {
        .col {
            margin-left:0.5%;
        	padding:0 0.5%;
        }
        
        .row .col:first-child {
            margin-left:0;
        }
        
        
        
        .span_1 {
            width:24.625%;
        }
        .span_2 {
            width:49.75%;
        }
        .span_3 {
            width:74.875%;
        }
        .span_4 {
            margin-left:0;
            width:100%;
        }
    }

    /* 3. 6 Column Grid 480px - 759px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    16.25%
    Span 2:    33.0%
    Span 3:    49.75%
    Span 4:    66.5%
    Span 5:    83.25%
    Span 6:    100%
    
    -----------------------------------------------------------------------------*/

    @media screen and (min-width: 480px) and (max-width: 759px) {
        
        .col {
            margin-left:0.5%;
        	padding:0 0.5%;
        }
        
        .row .col:first-child {
            margin-left:0;
        }
        

        .span_1 {
            width:7.875%;
        }
        .span_2 {
            width:16.25%;
        }
        .span_3 {
            width:24.625%;
        }
        .span_4 {
            width:33.0%;
        }
        .span_5 {
            width:41.375%;
        }
        .span_6 {
            width:49.75%;
        }
        .span_7 {
            width:58.125%;
        }
        .span_8 {
            width:66.5%;
        }
        .span_9 {
            width:74.875%;
        }
        .span_10 {
            width:83.25%;
        }
        .span_11 {
            width:91.625%;
        }
        .span_12 {
            margin-left:0;
            width:100%;
        }
        /*        
        
        .span_1 {
            width:16.25%;
        }
        .span_2 {
            width:33.0%;
        }
        .span_3 {
            width:49.75%;
        }
        .span_4 {
            width:66.5%;
        }
        .span_5 {
            width:83.25%;
        }
        .span_6 {
            margin-left:0;
            width:100%;
        } */
    } 

    /* 4. 12 Column Grid 760px - 959px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    7.875%
    Span 2:    16.25%
    Span 3:    24.625%
    Span 4:    33.0%
    Span 5:    41.375%
    Span 6:    49.75%
    Span 7:    58.125%
    Span 8:    66.5%
    Span 9:    74.875%
    Span 10:    83.25%
    Span 11:    91.625%
    Span 12:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 760px) and (max-width: 959px) {
        
        .col {
            margin-left:0.5%;
        	padding:0 0.5%;
        }
        
        .row .col:first-child {
            margin-left:0;
        }
        
        
        
        .span_1 {
            width:7.875%;
        }
        .span_2 {
            width:16.25%;
        }
        .span_3 {
            width:24.625%;
        }
        .span_4 {
            width:33.0%;
        }
        .span_5 {
            width:41.375%;
        }
        .span_6 {
            width:49.75%;
        }
        .span_7 {
            width:58.125%;
        }
        .span_8 {
            width:66.5%;
        }
        .span_9 {
            width:74.875%;
        }
        .span_10 {
            width:83.25%;
        }
        .span_11 {
            width:91.625%;
        }
        .span_12 {
            margin-left:0;
            width:100%;
        }
    }

    /* 5. 12 Column Grid 960px - 1119px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    7.875%
    Span 2:    16.25%
    Span 3:    24.625%
    Span 4:    33.0%
    Span 5:    41.375%
    Span 6:    49.75%
    Span 7:    58.125%
    Span 8:    66.5%
    Span 9:    74.875%
    Span 10:    83.25%
    Span 11:    91.625%
    Span 12:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 960px) and (max-width: 1119px) {
        
        .col {
            margin-left:0.5%;
        	padding:0 0.5%;
        }
        
        .row .col:first-child {
            margin-left:0;
        }
        
        
        
        .span_1 {
            width:7.875%;
        }
        .span_2 {
            width:16.25%;
        }
        .span_3 {
            width:24.625%;
        }
        .span_4 {
            width:33.0%;
        }
        .span_5 {
            width:41.375%;
        }
        .span_6 {
            width:49.75%;
        }
        .span_7 {
            width:58.125%;
        }
        .span_8 {
            width:66.5%;
        }
        .span_9 {
            width:74.875%;
        }
        .span_10 {
            width:83.25%;
        }
        .span_11 {
            width:91.625%;
        }
        .span_12 {
            margin-left:0;
            width:100%;
        }
    }

    /* 6. 12 Column Grid 1120px - Infinity 
    ----------------------------------------------------------------------------- 
    
    Span 1:    7.875%
    Span 2:    16.25%
    Span 3:    24.625%
    Span 4:    33.0%
    Span 5:    41.375%
    Span 6:    49.75%
    Span 7:    58.125%
    Span 8:    66.5%
    Span 9:    74.875%
    Span 10:    83.25%
    Span 11:    91.625%
    Span 12:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 1120px) {
        
        .col {
            margin-left:0.5%;
        	padding:0;
        }
        
        .row .col:first-child {
            margin-left:0;
        }
        
        
        
        .span_1 {
            width:7.875%;
        }
        .span_2 {
            width:16.25%;
        }
        .span_3 {
            width:24.625%;
        }
        .span_4 {
            width:33.0%;
        }
        .span_5 {
            width:41.375%;
        }
        .span_6 {
            width:49.75%;
        }
        .span_7 {
            width:58.125%;
        }
        .span_8 {
            width:66.5%;
        }
        .span_9 {
            width:74.875%;
        }
        .span_10 {
            width:83.25%;
        }
        .span_11 {
            width:91.625%;
        }
        .span_12 {
            margin-left:0;
            width:100%;
        }
    }