﻿
/* Responsive Style sheet */
/*  SECTIONS  ============================================================================= */

.section { clear: both; padding: 0; margin: 0; } 

/*  GROUPING  ============================================================================= */
.group:before,
.group:after { content:""; display:table; } 
.group:after { clear:both; }
.group { zoom:1; /* For IE 6/7 (trigger hasLayout) */}

/*  GRID COLUMN SETUP   ==================================================================== */

.col { display: block; float:left; margin: 1% 0 1% 1.6%; }
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { margin: 1% 0 1% 0; } 
}

/*  GRID OF One   ============================================================================= */
.span-1-1 {width:100%;}

.span-2-2 { width: 100%; }
.span-1-2 { width: 49.2%; }

.span-3-3 { width: 100%; } 
.span-2-3 { width: 66.1%; }  
.span-1-3 { width: 32.2%; }

.span-4-4 { width: 100%; }
.span-3-4 { width: 74.6%; }
.span-2-4 { width: 49.2%; }
.span-1-4 { width: 23.8%; }
	
.span-5-5 { width: 100%; }
.span-4-5 { width: 79.68%; }
.span-3-5 { width: 59.36%; }
.span-2-5 { width: 39.04%; }
.span-1-5 { width: 18.72%; }

.span-6-6 { width: 100%; }
.span-5-6 { width: 83.06%; }
.span-4-6 { width: 66.13%; }
.span-3-6 { width: 49.2%; }
.span-2-6 { width: 32.26%; }
.span-1-6 { width: 15.33%; }

.span-7-7 { width: 100%; }
.span-6-7 { width: 85.48%; }
.span-5-7 { width: 70.97%; }
.span-4-7 { width: 56.45%; }
.span-3-7 { width: 41.92%; }
.span-2-7 { width: 27.42%; }
.span-1-7 { width: 12.91%; }

.span-8-8 { width: 100%; }
.span-7-8 { width: 87.3%; }
.span-6-8 { width: 74.6%; }
.span-5-8 { width: 61.9%; }
.span-4-8 { width: 49.2%; }
.span-3-8 { width: 36.5%; }
.span-2-8 { width: 23.8%; }
.span-1-8 { width: 11.1%; }

.span-9-9 { width: 100%; }
.span-8-9 { width: 88.71%; }
.span-7-9 { width: 77.42%; }
.span-6-9 { width: 66.13%; }
.span-5-9 { width: 54.84%; }
.span-4-9 { width: 43.55%; }
.span-3-9 { width: 32.26%; }
.span-2-9 { width: 20.97%; }
.span-1-9 { width: 9.68%; }

.span-10-10 { width: 100%; }
.span-9-10 { width: 89.84%; }
.span-8-10 { width: 79.68%; }
.span-7-10 { width: 69.52%; }
.span-6-10 { width: 59.36%; }
.span-5-10 { width: 49.2%; }
.span-4-10 { width: 39.04%;  }
.span-3-10 { width: 28.88%; }
.span-2-10 { width: 18.72%; }
.span-1-10 { width: 8.56%; }

.span-11-11 { width: 100%; }
.span-10-11 { width: 90.7%; }
.span-9-11 { width: 81.47%; }
.span-8-11 { width: 72.24%; }
.span-7-11 { width: 63.01%; }
.span-6-11 { width: 53.78%; }
.span-5-11 { width: 44.55%; }
.span-4-11 { width: 35.32%; }
.span-3-11 { width: 26.09%; }
.span-2-11 { width: 16.86%; }
.span-1-11 { width: 7.63%; }

.span-12-12 { width: 100%; }
.span-11-12 { width: 91.46%; }
.span-10-12 { width: 83%; }
.span-9-12 { width: 74.54%; }
.span-8-12 { width: 66.08%; }
.span-7-12 { width: 57.62%; }
.span-6-12 { width: 49.16%; }
.span-5-12 { width: 40.7%; }
.span-4-12 { width: 32.24%; }
.span-3-12 { width: 23.78%; }
.span-2-12 { width: 15.32%; }
.span-1-12 { width: 6.86%; }

/* fixed rows */
.fx-span-1-1 {width:100%;}
   
.fx-span-2-2 { width: 100%; }
.fx-span-1-2 { width: 49.2%; }
   
.fx-span-3-3 { width: 100%; } 
.fx-span-2-3 { width: 66.1%; }  
.fx-span-1-3 { width: 32.2%; }
   
.fx-span-4-4 { width: 100%; }
.fx-span-3-4 { width: 74.6%; }
.fx-span-2-4 { width: 49.2%; }
.fx-span-1-4 { width: 23.8%; }
   
.fx-span-5-5 { width: 100%; }
.fx-span-4-5 { width: 79.68%; }
.fx-span-3-5 { width: 59.36%; }
.fx-span-2-5 { width: 39.04%; }
.fx-span-1-5 { width: 18.72%; }
   
.fx-span-6-6 { width: 100%; }
.fx-span-5-6 { width: 83.06%; }
.fx-span-4-6 { width: 66.13%; }
.fx-span-3-6 { width: 49.2%; }
.fx-span-2-6 { width: 32.26%; }
.fx-span-1-6 { width: 15.33%; }
   
.fx-span-7-7 { width: 100%; }
.fx-span-6-7 { width: 85.48%; }
.fx-span-5-7 { width: 70.97%; }
.fx-span-4-7 { width: 56.45%; }
.fx-span-3-7 { width: 41.92%; }
.fx-span-2-7 { width: 27.42%; }
.fx-span-1-7 { width: 12.91%; }
   
.fx-span-8-8 { width: 100%; }
.fx-span-7-8 { width: 87.3%; }
.fx-span-6-8 { width: 74.6%; }
.fx-span-5-8 { width: 61.9%; }
.fx-span-4-8 { width: 49.2%; }
.fx-span-3-8 { width: 36.5%; }
.fx-span-2-8 { width: 23.8%; }
.fx-span-1-8 { width: 11.1%; }
   
.fx-span-9-9 { width: 100%; }
.fx-span-8-9 { width: 88.71%; }
.fx-span-7-9 { width: 77.42%; }
.fx-span-6-9 { width: 66.13%; }
.fx-span-5-9 { width: 54.84%; }
.fx-span-4-9 { width: 43.55%; }
.fx-span-3-9 { width: 32.26%; }
.fx-span-2-9 { width: 20.97%; }
.fx-span-1-9 { width: 9.68%; }
   
.fx-span-10-10 { width: 100%; }
.fx-span-9-10 { width: 89.84%; }
.fx-span-8-10 { width: 79.68%; }
.fx-span-7-10 { width: 69.52%; }
.fx-span-6-10 { width: 59.36%; }
.fx-span-5-10 { width: 49.2%; }
.fx-span-4-10 { width: 39.04%;  }
.fx-span-3-10 { width: 28.88%; }
.fx-span-2-10 { width: 18.72%; }
.fx-span-1-10 { width: 8.56%; }
   
.fx-span-11-11 { width: 100%; }
.fx-span-10-11 { width: 90.7%; }
.fx-span-9-11 { width: 81.47%; }
.fx-span-8-11 { width: 72.24%; }
.fx-span-7-11 { width: 63.01%; }
.fx-span-6-11 { width: 53.78%; }
.fx-span-5-11 { width: 44.55%; }
.fx-span-4-11 { width: 35.32%; }
.fx-span-3-11 { width: 26.09%; }
.fx-span-2-11 { width: 16.86%; }
.fx-span-1-11 { width: 7.63%; }
   
.fx-span-12-12 { width: 100%; }
.fx-span-11-12 { width: 91.46%; }
.fx-span-10-12 { width: 83%; }
.fx-span-9-12 { width: 74.54%; }
.fx-span-8-12 { width: 66.08%; }
.fx-span-7-12 { width: 57.62%; }
.fx-span-6-12 { width: 49.16%; }
.fx-span-5-12 { width: 40.7%; }
.fx-span-4-12 { width: 32.24%; }
.fx-span-3-12 { width: 23.78%; }
.fx-span-2-12 { width: 15.32%; }
.fx-span-1-12 { width: 6.86%; }

@media only screen and (max-width: 480px){
	.span-1-1  {width:100%;}

	.span-2-2 { width: 100%; }
	.span-1-2 { width: 100%; }

	.span-3-3 { width: 100%; }
	.span-2-3 { width: 100%; }
	.span-1-3 { width: 100%; }

	.span-4-4 { width: 100%; }
	.span-3-4 { width: 100%; }
	.span-2-4 { width: 100%; }
	.span-1-4 { width: 100%; }

	.span-5-5 { width: 100%; }
	.span-4-5 { width: 100%; }
	.span-3-5 { width: 100%; }
	.span-2-5 { width: 100%; }
	.span-1-5 { width: 100%; }

	.span-6-6 { width: 100%; }
	.span-5-6 { width: 100%; }
	.span-4-6 { width: 100%; }
	.span-3-6 { width: 100%; }
	.span-2-6 { width: 100%; }
	.span-1-6 { width: 100%; }

	.span-7-7 { width: 100%; }
	.span-6-7 { width: 100%; }
	.span-5-7 { width: 100%; }
	.span-4-7 { width: 100%; }
	.span-3-7 { width: 100%; }
	.span-2-7 { width: 100%; }
	.span-1-7 { width: 100%; }

	.span-8-8 { width: 100%; }
	.span-7-8 { width: 100%; }
	.span-6-8 { width: 100%; }
	.span-5-8 { width: 100%; }
	.span-4-8 { width: 100%; }
	.span-3-8 { width: 100%; }
	.span-2-8 { width: 100%; }
	.span-1-8 { width: 100%; }

	.span-9-9 { width: 100%; }
	.span-8-9 { width: 100%; }
	.span-7-9 { width: 100%; }
	.span-6-9 { width: 100%; }
	.span-5-9 { width: 100%; }
	.span-4-9 { width: 100%; }
	.span-3-9 { width: 100%; }
	.span-2-9 { width: 100%; }
	.span-1-9 { width: 100%; }

	.span-10-10 { width: 100%; }
	.span-9-10 { width: 100%; }
	.span-8-10 { width: 100%; }
	.span-7-10 { width: 100%; }
	.span-6-10 { width: 100%; }
	.span-5-10 { width: 100%; }
	.span-4-10 { width: 100%; }
	.span-3-10 { width: 100%; }
	.span-2-10 { width: 100%; }
	.span-1-10 { width: 100%; }

	.span-11-11 { width: 100%; }
	.span-10-11 { width: 100%; }
	.span-9-11 { width: 100%; }
	.span-8-11 { width: 100%; }
	.span-7-11 { width: 100%; }
	.span-6-11 { width: 100%; }
	.span-5-11 { width: 100%; }
	.span-4-11 { width: 100%; }
	.span-3-11 { width: 100%; }
	.span-2-11 { width: 100%; }
	.span-1-11 { width: 100%; }

	.span-12-12 { width: 100%; }
	.span-11-12 { width: 100%; }
	.span-10-12 { width: 100%; }
	.span-9-12 { width: 100%; }
	.span-8-12 { width: 100%; }
	.span-7-12 { width: 100%; }
	.span-6-12 { width: 100%; }
	.span-5-12 { width: 100%; }
	.span-4-12 { width: 100%; }
	.span-3-12 { width: 100%; }
	.span-2-12 { width: 100%; }
	.span-1-12 { width: 100%; }

	
}

