/* ==========================================================================
   Grid
   ========================================================================== */

.container{
	width:320px;
	margin: 0 auto;
	clear:both;
	float:none;
}

.container .grid_1,
.container .grid_2,
.container .grid_3,
.container .grid_4,
.container .grid_1a,
.container .grid_2a,
.container .grid_3a{
	display: inline;
	float: left;
	margin:0 12px;
	width:296px;
}

.container .grid_h{
	width: 40% !important;
	margin: 0 5% !important;
	display: inline;
	float: left;
}

@media only screen and (min-width: 320px) {}

@media only screen and (min-width: 480px) {

	.container{
		width:480px;
	}
	.container .grid_1,
	.container .grid_2,
	.container .grid_3,
	.container .grid_4,
	.container .grid_1a,
	.container .grid_2a,
	.container .grid_3a{
		width:456px;
	}

}

@media only screen and (min-width: 800px) {

	.container{
		width:800px;
	}
	.container .grid_1{width:176px;}
	.container .grid_2{width:376px;}
	.container .grid_3{width:576px;}
	.container .grid_4{width:776px;}

	.container .grid_1a{width:240px;}
	.container .grid_2a{width:504px;}
	.container .grid_3a{width:776px;}

	.container .grid_h{
		width: 23% !important;
		margin: 0 1% !important;
		display: inline;
		float: left;
	}

}

@media only screen and (min-width: 960px) {

	.container{
		width:960px;
	}
	.container .grid_1{width:216px;}
	.container .grid_2{width:456px;}
	.container .grid_3{width:696px;}
	.container .grid_4{width:936px;}

	.container .grid_1a{width:296px;}
	.container .grid_2a{width:616px;}
	.container .grid_3a{width:936px;}

}

@media only screen and (min-width: 1280px){

	.container{
		width:1280px;
	}
	.container .grid_1{width:296px;}
	.container .grid_2{width:616px;}
	.container .grid_3{width:936px;}
	.container .grid_4{width:1256px;}

	.container .grid_1a{width:400px;}
	.container .grid_2a{width:824px;}
	.container .grid_3a{width:1256px;}

}