/*
Responsive 4 column grid system framework.

*/
body {
        min-width: 960px;
}

/* =Containers
--------------------------------------------------------------------------------*/
.container_4
{
        margin-left: auto;
        margin-right: auto;
		width: 100%;
		max-width: 1400px;
}

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_third {
        display: inline;
        float: left;
		margin-left: 2%;
        margin-right: 2%;
}

 .grid_1.no_r_mar,
.grid_2.no_r_mar,
.grid_3.no_r_mar,
.grid_4.no_r_mar {
        margin-left: 2%;
        margin-right: 0;
}
.grid_1.no_l_mar,
.grid_2.no_l_mar,
.grid_3.no_l_mar,
.grid_4.no_l_mar {
        margin-left: 0;
        margin-right: 2%;
}

.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3 {
        position: relative;
}

/* =Grid >> Children (Alpha ~ First, Omega ~ Last)
--------------------------------------------------------------------------------*/
.alpha {margin-left: 0;}
.omega {margin-right: 0;}

/* =Grid >> 4 Columns
--------------------------------------------------------------------------------*/
 .grid_1 {
     width:21.0%;
 }
 .grid_2 {
     width:46.0%;
 }
 .grid_3 {
     width:71.0%;
 }
 .grid_4 {
     /* margin-left:0; */
     width:96%;
 }

.grid_third {
    width:29.3%;
 }


.half-content {
	float: left;
	width: 48%;
	margin-right: 1%;
	margin-left: 1%;
}


/* =Prefix Extra Space >> 4 Columns
--------------------------------------------------------------------------------*/
.prefix_1 {padding-left: 25%;}
.prefix_2 {padding-left: 50%;}
.prefix_3 {padding-left: 75%;}

/* =Suffix Extra Space >> 4 Columns
--------------------------------------------------------------------------------*/
.suffix_1 {padding-right: 25%;}
.suffix_2 {padding-right: 50%;}
.suffix_3 {padding-right: 75%;}


/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
        clear: both;
        display: block;
        overflow: hidden;
        visibility: hidden;
        width: 0;
        height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
.clearfix:after {
        content: "\0020";
        display: block;
        overflow: hidden;
        visibility: hidden;
        width: 0;
        height: 0;
}
.clearfix:after {
        clear: both;
}
/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/
.clearfix {
        zoom: 1;
}


/* 1. 4 Column Grid 0px - 479px 
 ----------------------------------------------------------------------------- 
 
 Span 1:    22.75%
 Span 2:    48.5%
 Span 3:    74.25%
 Span 4:    100%
 
 ----------------------------------------------------------------------------- */

 @media screen and (min-width: 0px) and (max-width: 479px) {
     
     
	
 }

 /* 2. 4 Column Grid 480px - 779px 
 ----------------------------------------------------------------------------- 
 
 Span 1:    22.75%
 Span 2:    48.5%
 Span 3:    74.25%
 Span 4:    100%
 
 ----------------------------------------------------------------------------- */

 @media screen and (min-width: 480px) and (max-width: 779px) {
    
     
 }

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

 @media screen and (min-width: 780px) and (max-width: 1039px) {
     
 
     
 }

 /* 4. 4 Column Grid 
 ----------------------------------------------------------------------------- 
 
 
 ----------------------------------------------------------------------------- */

 @media only screen and (max-width: 1640px) {
     .container_4
	{
	        margin-left: 10%;
	        margin-right: 10%;
			width: 80%;
	}

 }