/*!
 * 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. 2 Column Grid 0px - 419px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    49.0%
    Span 2:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 0px) and (max-width: 419px) {
        
        .col {
            margin:0 2%;
        	padding:0 1.5%;
        }
        
        .row .col:first-child {
            margin-left:0;
        }
        
        
        
        .span_1,
		.box1,
		.box2,
		.box3,
		.box4,
		.left-img, 
		#container li  {
            width:49.0%;
        }
        .span_2,
		#nav,
		#logo {
            margin-left:0;
            width:100%;
        }
    }

    /* 2. 2 Column Grid 420px - 599px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    49.0%
    Span 2:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 420px) and (max-width: 599px) {
        
        .col {
          	margin:0 2%;
        	padding:0 1.5%;
        }
        
        .row .col:first-child {
            margin-left:0;
        }
        
        
        
        .span_1,
		.box1,
		.box2,
		.box3,
		.box4,
		.left-img, 
		#container li {
            width:49.0%;
        }
        .span_2,
		#nav,
		#logo
		{
            margin-left:0;
            width:100%;
        }
    }

    /* 3. 4 Column Grid 600px - 799px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    23.5%
    Span 2:    49.0%
    Span 3:    74.5%
    Span 4:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 600px) and (max-width: 799px) {
        
        .col {
            margin:0 1.5%;
        	padding:0 1.5%;
        }
        
		
		
        .row .col:first-child {
            margin-left:0;
        }
        
        
        
        .span_1
		{
            width:23.5%;
        }
        .span_2,
		.box1,
		.box2,
		.box3,
		.box4,
		.left-img,
		#container li {
            width:49.0%;
        }
        .span_3 {
            width:74.5%;
        }
        .span_4,
		.wrapper,
		.main-content,
		#nav
		 {
            margin-left:0;
            width:100%;
        }
	
	
	
    }

    /* 4. 6 Column Grid 800px - 1279px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    15.0%
    Span 2:    32.0%
    Span 3:    49.0%
    Span 4:    66.0%
    Span 5:    83.0%
    Span 6:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 800px) and (max-width: 1279px) {
        
        .col {
            margin-left:2%;
        	padding:0 1.5%;
        }
        
        .row .col:first-child {
            margin-left:0;
        }
        
		.span_1, 
		#nav ul li,
		 .box1,
		 .box2,
		 .box3,
		 .box4,
		 .left-img,
		 #container li  {
			width:23.5%;	
			padding:0;
		}
		
        .span_2,
		#logo {
			float:left;
            width:32.0%;
        }
        .span_3 {
            width:49.0%;
        }
        .span_4,
		#nav,
		.main-content,
		#footerbox {
			float:right;
            width:66.0%;
        }
        .span_5 {
            width:83.0%;
        }
        .span_6,
		.wrapper,
		#content {
            margin-left:0;
            width:100%;
        }
    }

    /* 5. 6 Column Grid 1280px - Infinity 
    ----------------------------------------------------------------------------- 
    
    Span 1:    15.0%
    Span 2:    32.0%
    Span 3:    49.0%
    Span 4:    66.0%
    Span 5:    83.0%
    Span 6:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 1280px) {
        
        .col {
            margin-left:2%;
        	padding:0 1.5%;
        }
        
        .row .col:first-child {
            margin-left:0;
        }
		
		
        .span_1, 
		#nav ul li,
		 .box1,
		 .box2,
		 .box3,
		 .box4,
		 .left-img, 
		 #container li {		  
			width:23.5%;	
			padding:0;
		}
        
        
        
        .span_2,
		#logo
		{
			float:left;
            width:32.0%;
        }
        .span_3 {
            width:49.0%;
        }
		
		
		.main-content {
			width:65%;
			float:right;	
		}
		
		
        .span_4,
		#nav,
		#footerbox
		 {
			float:right;
            width:66.0%;
        }
        .span_5 {
			float:right;
            width:83.0%;
        }
        .span_6,
		.wrapper,
		#content,
		#container {
            margin:0 auto;
            width:100%;
        }
    }