/* 
* Amazium V1.3
* Copyright 2012, Mike Ballan
* www.amazium.co.uk
*/


/***** Screen 1200px *****/

.row 								{margin: 0 auto; width: 1200px; overflow: hidden;}
.row .row 					{margin: 0 -20px 0 -20px; width: auto; display: inline-block;}

.grid_1							{width: 60px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_2 						{width: 160px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_3 						{width: 220px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_4 						{width: 360px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_5 						{width: 460px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}		
.grid_6 						{width: 680px; overflow: hidden; float: left; display: inline;}
.grid_7 						{width: 780px; overflow: hidden; float: left; display: inline;}
.grid_8 						{width: 760px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_9							{width: 860px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_10						{width: 960px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_11						{width: 1060px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_12						{width: 1160px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}

.offset_1						{margin-left: 120px;}
.offset_2						{margin-left: 220px;}
.offset_3 					{margin-left: 320px;}
.offset_4 					{margin-left: 420px;}
.offset_5 					{margin-left: 520px;}
.offset_6 					{margin-left: 620px;}
.offset_7 					{margin-left: 720px;}
.offset_8 					{margin-left: 820px;}
.offset_9						{margin-left: 920px;}
.offset_10					{margin-left: 1020px;}
.offset_11					{margin-left: 1120px;}

.show-phone 				{display: none !important;}
.show-tablet 				{display: none !important;}
.show-screen				{display: inherit;}

.hide-phone					{display: inherit !important;}
.hide-tablet				{display: inherit !important;}
.hide-screen				{display: none !important;}




/***** Screen Bigger than 960px *****/
/****@media only screen and (min-width: 1200px) {

.row 								{margin: 0 auto; width: 1200px; overflow: hidden;}
.row .row 					{margin: 0 -20px 0 -20px; width: auto; display: inline-block;}

.grid_1							{width: 60px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_2 						{width: 160px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_3 						{width: 260px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_4 						{width: 360px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_5 						{width: 460px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}		
.grid_6 						{width: 560px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_7 						{width: 660px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_8 						{width: 760px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_9							{width: 860px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_10						{width: 960px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_11						{width: 1060px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_12						{width: 1160px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}

.offset_1						{margin-left: 120px;}
.offset_2						{margin-left: 220px;}
.offset_3 					{margin-left: 320px;}
.offset_4 					{margin-left: 420px;}
.offset_5 					{margin-left: 520px;}
.offset_6 					{margin-left: 620px;}
.offset_7 					{margin-left: 720px;}
.offset_8 					{margin-left: 820px;}
.offset_9						{margin-left: 920px;}
.offset_10					{margin-left: 1020px;}
.offset_11					{margin-left: 1120px;}

.show-phone 				{display: none !important;}
.show-tablet 				{display: none !important;}
.show-screen				{display: inherit;}

.hide-phone					{display: inherit !important;}
.hide-tablet				{display: inherit !important;}
.hide-screen				{display: none !important;}

}



/***** Tablet (Smaller than 959px) *****/
/****@media only screen and (min-width:  768px) and (max-width:  959px) {

.row 								{margin: 0 auto; width: 768px; overflow: hidden;}
.row .row 					{margin: 0 -14px 0 -14px; width: auto; display: inline-block;}
		
.grid_1							{width: 36px; margin: 0 14px 0 14px; overflow: hidden; float: left; display: inline;}
.grid_2 						{width: 100px; margin: 0 14px 0 14px; overflow: hidden; float: left; display: inline;}
.grid_3 						{width: 164px; margin: 0 14px 0 14px; overflow: hidden; float: left; display: inline;}
.grid_4 						{width: 228px; margin: 0 14px 0 14px; overflow: hidden; float: left; display: inline;}
.grid_5 						{width: 292px; margin: 0 14px 0 14px; overflow: hidden; float: left; display: inline;}		
.grid_6 						{width: 356px; margin: 0 14px 0 14px; overflow: hidden; float: left; display: inline;}
.grid_7 						{width: 420px; margin: 0 14px 0 14px; overflow: hidden; float: left; display: inline;}
.grid_8 						{width: 484px; margin: 0 14px 0 14px; overflow: hidden; float: left; display: inline;}
.grid_9							{width: 548px; margin: 0 14px 0 14px; overflow: hidden; float: left; display: inline;}
.grid_10						{width: 612px; margin: 0 14px 0 14px; overflow: hidden; float: left; display: inline;}
.grid_11						{width: 676px; margin: 0 14px 0 14px; overflow: hidden; float: left; display: inline;}
.grid_12						{width: 740px; margin: 0 14px 0 14px; overflow: hidden; float: left; display: inline;}
		
.offset_1						{margin-left: 78px;}
.offset_2						{margin-left: 142px;}
.offset_3 					{margin-left: 206px;}
.offset_4 					{margin-left: 270px;}
.offset_5 					{margin-left: 334px;}
.offset_6 					{margin-left: 398px;}
.offset_7 					{margin-left: 462px;}
.offset_8 					{margin-left: 526px;}
.offset_9						{margin-left: 590px;}
.offset_10					{margin-left: 654px;}
.offset_11					{margin-left: 718px;}
	
.show-phone 				{display: none !important;}
.show-tablet 				{display: inherit !important;}
.show-screen				{display: none !important;}
	
.hide-phone					{display: inherit !important;}
.hide-tablet				{display: none !important;}
.hide-screen				{display: inherit !important;}
	
}



/***** Phone (portrait 300px) *****/
@media only screen and (max-width:  767px) {

.row 								{margin: 0 auto; width: 320px; overflow: hidden;}
.row .row 					{margin: 0; width: auto; display: inline-block;}
		
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12						{width: 320px; margin: 10px 0 0 0; overflow: hidden; float: left; display: inline;}

.offset_1,
.offset_2,
.offset_3,
.offset_4,
.offset_5,
.offset_6,
.offset_7,
.offset_8,
.offset_9,
.offset_10,
.offset_11					{margin-left: 0;}

.show-phone 				{display: inherit !important;}
.show-tablet 				{display: none !important;}
.show-screen				{display: none !important;}
	
.hide-phone					{display: none !important;}
.hide-tablet				{display: inherit !important;}
.hide-screen				{display: inherit !important;}
			
}	 




/***** Phone (landscape 420px) *****/
/****@media only screen and (min-width:  480px) and (max-width:  767px) {

.row 								{margin: 0 auto; width: 456px; overflow: hidden;}
.row .row 					{margin: 0; width: auto; display: inline-block;}
	
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12						{width: 456px; margin: 10px 0 0 0; overflow: hidden; float: left; display: inline;}

.show-phone 				{display: inherit !important;}
.show-tablet 				{display: none !important;}
.show-screen				{display: none !important;}
	
.hide-phone					{display: none !important;}
.hide-tablet				{display: inherit !important;}
.hide-screen				{display: inherit !important;}

}



/***** Clean up *****/

.container:after 		{content: "\0020"; display: block; height: 0; clear: both; visibility: hidden;} 
.clearfix:before,
.clearfix:after,
.row:before,
.row:after 					{content: "\0020"; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;}
.row:after,
.clearfix:after 		{clear: both;}
.row, 
.clearfix 					{zoom: 1;}
.clear 							{clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;}