/*
 * Gridism
 * A simple, responsive, and handy CSS grid by @cobyism
 * https://github.com/cobyism/gridism
 *
 * Customized by Randy for the Alveos framework
 *
 */

img { max-width: 100%; height: auto; margin: 0; display: block; }

/* Preserve some sanity */
.grid, .unit { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* Set up some rules to govern the grid */
.grid { display: block; clear: both; }
.grid .unit { float: left; width: 100%; }

/* Wrapping at a maximum width is optional */
body .grid { max-widt1h: 1240px; margin: 0 auto; padding: 0 0px;  }

/* Width classes also have shorthand versions numbered as fractions
 * For example: for a grid unit 1/3 (one third) of the parent width,
 * simply apply class="w-1-3" to the element. */
.grid .whole,          	.grid .w-1-1 { width: 100%; }
.grid .half,          	.grid .w-1-2 { width: 50%; }
.grid .one-third,     	.grid .w-1-3 { width: 33.3332%; }
.grid .one-quarter,    	.grid .w-1-4 { width: 25%; }
.grid .one-sixth,		.grid .w-1-6 { width: 16.6667%; }
.grid .one-eight,		.grid .w-1-8 { width: 12.5%; }
.grid .one-twelfth,		.grid .w-1-12 { width: 8.3332%; }

.grid .two-thirds,     	.grid .w-2-3 { width: 66.6665%; }
.grid .three-quarters, 	.grid .w-3-4 { width: 75%; }
.grid .two-quarters,	.grid .w-2-4 { width: 50%; }

/*
.grid .one-fifth,      	.grid .w-1-5 { width: 20%; }
.grid .two-fifths,     .grid .w-2-5 { width: 40%; }
.grid .three-fifths,   .grid .w-3-5 { width: 60%; }
.grid .four-fifths,    .grid .w-4-5 { width: 80%; }
*/
/*
.grid .golden-small,   .grid .w-g-s { width: 38.2716%; } /* Golden section: smaller piece 
.grid .golden-large,   .grid .w-g-l { width: 61.7283%; } /* Golden section: larger piece 
*/

/* Clearfix after every .grid */
.grid { *zoom: 1; }
.grid:before, .grid:after { display: table; content: ""; line-height: 0; }
.grid:after { clear: both; }

/* Responsive Stuff for Smartphones */
@media screen and (max-width: 320px) {

	/* Stack anything that isn’t full-width on smaller screens */
	.grid .unit { width: 100% !important; }
	
	.grid .whole,          	.grid .w-1-1 { width: 100% !important;  }
	.grid .half,          	.grid .w-1-2 { width: 100% !important;  }
	.grid .one-third,     	.grid .w-1-3 { width: 100% !important;  }
	.grid .one-quarter,    	.grid .w-1-4 { width: 100% !important;   }
	.grid .one-sixth,		.grid .w-1-6 { width: 50% !important;  }
	.grid .one-eight,		.grid .w-1-8 { width: 50% !important;  }
	.grid .one-twelfth,		.grid .w-1-12 { width: 25% !important;  }
	
	.grid .two-thirds,     	.grid .w-2-3 { width: 100% !important; }
	.grid .three-quarters, 	.grid .w-3-4 { width: 100% !important; }
	.grid .two-quarters,	.grid .w-2-4 { width: 100% !important; }
	
	/* Sometimes, you just want to be different on small screens */
	.center-on-mobiles { text-align: center !important; }
	.hide-on-mobiles { display: none !important; }

}

/* Responsive Stuff for Tablets */
@media screen and (min-width: 321px) and (max-width: 768px) {

	/* Stack anything that isn’t full-width on smaller screens */
	.grid .unit { width: 100% !important; }
  
	.grid .whole,          	.grid .w-1-1 { width: 100% !important;  }
	.grid .half,          	.grid .w-1-2 { width: 100% !important;  }
	.grid .one-third,     	.grid .w-1-3 { width: 100% !important;  }
	.grid .one-quarter,    	.grid .w-1-4 { width: 50% !important;   }
	.grid .one-sixth,		.grid .w-1-6 { width: 33.3332% !important;  }
	.grid .one-eight,		.grid .w-1-8 { width: 25% !important;  }
	.grid .one-twelfth,		.grid .w-1-12 { width: 25% !important;  }
	
	.grid .two-thirds,     	.grid .w-2-3 { width: 100% !important; }
	.grid .three-quarters, 	.grid .w-3-4 { width: 50% !important; }
	.grid .two-quarters,	.grid .w-2-4 { width: 100% !important; }
	
}