/*!
 * Gridpak Beta CSS
 *
 * Generator - http://gridpak.com/
 * Created by @erskinedesign
 */
 
.row {
	margin-left:-24px;
	margin-left:-1.5rem;
}

/* Reusable column setup */
.col {
    border:0px solid transparent;
	border-left-width: 24px;
	border-left-width: 1.5rem;
    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;
}

/* IE8 Grid - All widths */
	
	    .row {
            margin-left:-24px;
        }
        .col {
            border-left-width:24px;
        	padding:0 0%;
        }
        
        
        
        
        .ie8 .span_1_ie8 {
            width:8.33333333333%;
        }
        .ie8 .span_2_ie8 {
            width:16.6666666667%;
        }
        .ie8 .span_3_ie8 {
            width:25.0%;
        }
        .ie8 .span_4_ie8 {
            width:33.3333333333%;
        }
        .ie8 .span_5_ie8 {
            width:41.6666666667%;
        }
        .ie8 .span_6_ie8 {
            width:50.0%;
        }
        .ie8 .span_7_ie8 {
            width:58.3333333333%;
        }
        .ie8 .span_8_ie8 {
            width:66.6666666667%;
        }
        .ie8 .span_9_ie8 {
            width:75.0%;
        }
        .ie8 .span_10_ie8 {
            width:83.3333333333%;
        }
        .ie8 .span_11_ie8 {
            width:91.6666666667%;
        }
        .ie8 .span_12_ie8 {
            margin-left:0;
            width:100%;
        }


    /* 1. vpalpha - 12 Column Grid 0px - 479px
    ----------------------------------------------------------------------------- 
    
    Span 1:    8.33333333333%
    Span 2:    16.6666666667%
    Span 3:    25.0%
    Span 4:    33.3333333333%
    Span 5:    41.6666666667%
    Span 6:    50.0%
    Span 7:    58.3333333333%
    Span 8:    66.6666666667%
    Span 9:    75.0%
    Span 10:    83.3333333333%
    Span 11:    91.6666666667%
    Span 12:    100%
    
    ----------------------------------------------------------------------------- */
		
	
    @media screen and (min-width: 0) {
        
        .row {
            margin-left:-24px;
        }
        .col {
            border-left-width:24px;
        	padding:0 0%;
        }
        
        
        
        /*
        Add your semantic classnames in alongside their corresponding spans here. e.g.
        
        .span_3,
        .my_semantic_class_name {
            ...
        }
        */
        
        .span_1_vpalpha {
            width:8.33333333333%;
        }
        .span_2_vpalpha {
            width:16.6666666667%;
        }
        .span_3_vpalpha {
            width:25.0%;
        }
        .span_4_vpalpha {
            width:33.3333333333%;
        }
        .span_5_vpalpha {
            width:41.6666666667%;
        }
        .span_6_vpalpha {
            width:50.0%;
        }
        .span_7_vpalpha {
            width:58.3333333333%;
        }
        .span_8_vpalpha {
            width:66.6666666667%;
        }
        .span_9_vpalpha {
            width:75.0%;
        }
        .span_10_vpalpha {
            width:83.3333333333%;
        }
        .span_11_vpalpha {
            width:91.6666666667%;
        }
        .span_12_vpalpha {
            margin-left:0;
            width:100%;
        }
    }

    /* 2. vpbeta - 12 Column Grid 480px - 639px
    ----------------------------------------------------------------------------- 
    
    Span 1:    8.33333333333%
    Span 2:    16.6666666667%
    Span 3:    25.0%
    Span 4:    33.3333333333%
    Span 5:    41.6666666667%
    Span 6:    50.0%
    Span 7:    58.3333333333%
    Span 8:    66.6666666667%
    Span 9:    75.0%
    Span 10:    83.3333333333%
    Span 11:    91.6666666667%
    Span 12:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 30em) {
        
        .row {
            margin-left:-24px;
        }
        .col {
            border-left-width:24px;
        	padding:0 0%;
        }
        
        
        
        
        .span_1_vpbeta {
            width:8.33333333333%;
        }
        .span_2_vpbeta {
            width:16.6666666667%;
        }
        .span_3_vpbeta {
            width:25.0%;
        }
        .span_4_vpbeta {
            width:33.3333333333%;
        }
        .span_5_vpbeta {
            width:41.6666666667%;
        }
        .span_6_vpbeta {
            width:50.0%;
        }
        .span_7_vpbeta {
            width:58.3333333333%;
        }
        .span_8_vpbeta {
            width:66.6666666667%;
        }
        .span_9_vpbeta {
            width:75.0%;
        }
        .span_10_vpbeta {
            width:83.3333333333%;
        }
        .span_11_vpbeta {
            width:91.6666666667%;
        }
        .span_12_vpbeta {
            margin-left:0;
            width:100%;
        }
    }

    /* 3. vpgamma - 12 Column Grid 640px - 959px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    8.33333333333%
    Span 2:    16.6666666667%
    Span 3:    25.0%
    Span 4:    33.3333333333%
    Span 5:    41.6666666667%
    Span 6:    50.0%
    Span 7:    58.3333333333%
    Span 8:    66.6666666667%
    Span 9:    75.0%
    Span 10:    83.3333333333%
    Span 11:    91.6666666667%
    Span 12:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 40em) {
        
        .row {
            margin-left:-24px;
        }
        .col {
            border-left-width:24px;
        	padding:0 0%;
        }
        
        
        
        
        .span_1_vpgamma {
            width:8.33333333333%;
        }
        .span_2_vpgamma {
            width:16.6666666667%;
        }
        .span_3_vpgamma {
            width:25.0%;
        }
        .span_4_vpgamma {
            width:33.3333333333%;
        }
        .span_5_vpgamma {
            width:41.6666666667%;
        }
        .span_6_vpgamma {
            width:50.0%;
        }
        .span_7_vpgamma {
            width:58.3333333333%;
        }
        .span_8_vpgamma {
            width:66.6666666667%;
        }
        .span_9_vpgamma {
            width:75.0%;
        }
        .span_10_vpgamma {
            width:83.3333333333%;
        }
        .span_11_vpgamma {
            width:91.6666666667%;
        }
        .span_12_vpgamma {
            margin-left:0;
            width:100%;
        }
    }

    /* 4. vpdelta - 12 Column Grid 960px - Infinity 
    ----------------------------------------------------------------------------- 
    
    Span 1:    8.33333333333%
    Span 2:    16.6666666667%
    Span 3:    25.0%
    Span 4:    33.3333333333%
    Span 5:    41.6666666667%
    Span 6:    50.0%
    Span 7:    58.3333333333%
    Span 8:    66.6666666667%
    Span 9:    75.0%
    Span 10:    83.3333333333%
    Span 11:    91.6666666667%
    Span 12:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 60em) {
        
        .row {
            margin-left:-24px;
        }
        .col {
            border-left-width:24px;
        	padding:0 0%;
        }
        
        
        
        
        .span_1_vpdelta {
            width:8.33333333333%;
        }
        .span_2_vpdelta {
            width:16.6666666667%;
        }
        .span_3_vpdelta {
            width:25.0%;
        }
        .span_4_vpdelta {
            width:33.3333333333%;
        }
        .span_5_vpdelta {
            width:41.6666666667%;
        }
        .span_6_vpdelta {
            width:50.0%;
        }
        .span_7_vpdelta {
            width:58.3333333333%;
        }
        .span_8_vpdelta {
            width:66.6666666667%;
        }
        .span_9_vpdelta {
            width:75.0%;
        }
        .span_10_vpdelta {
            width:83.3333333333%;
        }
        .span_11_vpdelta {
            width:91.6666666667%;
        }
        .span_12_vpdelta {
            margin-left:0;
            width:100%;
        }
    }