/* Cemah Framework Grid
 * Version 2
 * Copyright © 2014 Cemah Creative LLC
 *
 * Flex Supported: IE 11+, Chrome 21+, Firefox 29+, Safari 6.1+
 * Static Supported: IE 8 - 10, Chrome < 21, Firefox < 29, Safari < 6.1
 */

.wrapper {
	position: relative;
}

.section {
	position: relative;
	margin: 0 auto;
	width: 100%;
}

.row {
	position: relative;
}

/* Flex Grid – uses flexbox layout */ 
html.flex-grid .section {
	max-width: 1250px; 
	padding: 2% 2%;
}

html.flex-grid .row {
	display: -webkit-flex;
	display: flex;
}

html.flex-grid .row > .cell {
	-webkit-flex-basis: 100%;
	flex-basis: 100%;
	padding: 0 2.0833333%;
	position: relative;
}

html.flex-grid .row .row > .cell:first-child { padding-left: 0  }
html.flex-grid .row .row > .cell:last-child  { padding-right: 0 }

html.flex-grid .cell[cell-max="1"]	{ -webkit-flex-basis: 4.166666%;  flex-basis: 4.166666%; 	}
html.flex-grid .cell[cell-max="2"]	{ -webkit-flex-basis: 8.333333%;  flex-basis: 8.333333%; 	}
html.flex-grid .cell[cell-max="3"]	{ -webkit-flex-basis: 12.5%;	  flex-basis: 12.5%; 		}
html.flex-grid .cell[cell-max="4"]	{ -webkit-flex-basis: 16.666666%; flex-basis: 16.666666%;	}
html.flex-grid .cell[cell-max="1/5"]{ -webkit-flex-basis: 20%;		  flex-basis: 20%;			}
html.flex-grid .cell[cell-max="5"]	{ -webkit-flex-basis: 20.833333%; flex-basis: 20.833333%;	}
html.flex-grid .cell[cell-max="6"]	{ -webkit-flex-basis: 25%;		  flex-basis: 25%;			}
html.flex-grid .cell[cell-max="7"]	{ -webkit-flex-basis: 29.166666%; flex-basis: 29.166666%;	}
html.flex-grid .cell[cell-max="8"]	{ -webkit-flex-basis: 33.333333%; flex-basis: 33.333333%;	}
html.flex-grid .cell[cell-max="9"]	{ -webkit-flex-basis: 37.5%;	  flex-basis: 37.5%;		}
html.flex-grid .cell[cell-max="10"]	{ -webkit-flex-basis: 41.666666%; flex-basis: 41.666666%;	}
html.flex-grid .cell[cell-max="11"]	{ -webkit-flex-basis: 45.833333%; flex-basis: 45.833333%;	}
html.flex-grid .cell[cell-max="12"]	{ -webkit-flex-basis: 50%;		  flex-basis: 50%;			}
html.flex-grid .cell[cell-max="13"]	{ -webkit-flex-basis: 54.166666%; flex-basis: 54.166666%;	}
html.flex-grid .cell[cell-max="14"]	{ -webkit-flex-basis: 58.333333%; flex-basis: 58.333333%;	}
html.flex-grid .cell[cell-max="15"]	{ -webkit-flex-basis: 62.5%;	  flex-basis: 62.5%;		}
html.flex-grid .cell[cell-max="16"]	{ -webkit-flex-basis: 66.666666%; flex-basis: 66.666666%;	}
html.flex-grid .cell[cell-max="17"]	{ -webkit-flex-basis: 70.833333%; flex-basis: 70.833333%;	}
html.flex-grid .cell[cell-max="18"]	{ -webkit-flex-basis: 75%;		  flex-basis: 75%;			}
html.flex-grid .cell[cell-max="19"]	{ -webkit-flex-basis: 79.166666%; flex-basis: 79.166666%;	}
html.flex-grid .cell[cell-max="20"]	{ -webkit-flex-basis: 83.333333%; flex-basis: 83.333333%;	}
html.flex-grid .cell[cell-max="21"]	{ -webkit-flex-basis: 87.5%;	  flex-basis: 87.5%;		}
html.flex-grid .cell[cell-max="22"]	{ -webkit-flex-basis: 91.666666%; flex-basis: 91.666666%;	}
html.flex-grid .cell[cell-max="23"]	{ -webkit-flex-basis: 95.833333%; flex-basis: 95.833333%;	}
html.flex-grid .cell[cell-max="24"]	{ -webkit-flex-basis: 100%;		  flex-basis: 100%;			}

html.flex-grid .cell[cell-min="1"]	{ min-width: 50px	}
html.flex-grid .cell[cell-min="2"]	{ min-width: 100px	}
html.flex-grid .cell[cell-min="3"]	{ min-width: 150px	}
html.flex-grid .cell[cell-min="4"]	{ min-width: 200px	}
html.flex-grid .cell[cell-min="1/5"]{ min-width: 240px	}
html.flex-grid .cell[cell-min="5"]	{ min-width: 250px	}
html.flex-grid .cell[cell-min="6"]	{ min-width: 300px	}
html.flex-grid .cell[cell-min="7"]	{ min-width: 350px	}
html.flex-grid .cell[cell-min="8"]	{ min-width: 400px	}
html.flex-grid .cell[cell-min="9"]	{ min-width: 450px	}
html.flex-grid .cell[cell-min="10"]	{ min-width: 500px	}
html.flex-grid .cell[cell-min="11"]	{ min-width: 550px	}
html.flex-grid .cell[cell-min="12"]	{ min-width: 600px	}
html.flex-grid .cell[cell-min="13"]	{ min-width: 650px	}
html.flex-grid .cell[cell-min="14"]	{ min-width: 700px	}
html.flex-grid .cell[cell-min="15"]	{ min-width: 750px	}
html.flex-grid .cell[cell-min="16"]	{ min-width: 800px	}
html.flex-grid .cell[cell-min="17"]	{ min-width: 850px	}
html.flex-grid .cell[cell-min="18"]	{ min-width: 900px	}
html.flex-grid .cell[cell-min="19"]	{ min-width: 950px	}
html.flex-grid .cell[cell-min="20"]	{ min-width: 1000px	}
html.flex-grid .cell[cell-min="21"]	{ min-width: 1050px	}
html.flex-grid .cell[cell-min="22"]	{ min-width: 1100px }
html.flex-grid .cell[cell-min="23"]	{ min-width: 1150px	}
html.flex-grid .cell[cell-min="24"]	{ min-width: 1200px	}


/* Static Grid – uses table layout */ 
html.static-grid .wrapper {
	min-width: 1000px;
}

html.static-grid .section {
	width: 1000px; 
	padding: 20px;
}

html.static-grid .row {
	display: table;
	position: relative;
}

html.static-grid .row > .cell {
	display: table-cell;
	vertical-align: top;
	padding: 0 20px;
}

html.static-grid .row .row > .cell:first-child { padding-left: 0  }
html.static-grid .row .row > .cell:last-child  { padding-right: 0 }

html.static-grid .cell[cell-max="1"]	{ width: 40px  }
html.static-grid .cell[cell-max="2"]	{ width: 80px  }
html.static-grid .cell[cell-max="3"]	{ width: 120px }
html.static-grid .cell[cell-max="4"]	{ width: 160px }
html.static-grid .cell[cell-max="1/5"]	{ width: 192px }
html.static-grid .cell[cell-max="5"]	{ width: 200px }
html.static-grid .cell[cell-max="6"]	{ width: 240px }
html.static-grid .cell[cell-max="7"]	{ width: 280px }
html.static-grid .cell[cell-max="8"]	{ width: 320px }
html.static-grid .cell[cell-max="9"]	{ width: 360px }
html.static-grid .cell[cell-max="10"]	{ width: 400px }
html.static-grid .cell[cell-max="11"]	{ width: 440px }
html.static-grid .cell[cell-max="12"]	{ width: 480px }
html.static-grid .cell[cell-max="13"]	{ width: 520px }
html.static-grid .cell[cell-max="14"]	{ width: 560px }
html.static-grid .cell[cell-max="15"]	{ width: 600px }
html.static-grid .cell[cell-max="16"]	{ width: 640px }
html.static-grid .cell[cell-max="17"]	{ width: 680px } 
html.static-grid .cell[cell-max="18"]	{ width: 720px }
html.static-grid .cell[cell-max="19"]	{ width: 760px }
html.static-grid .cell[cell-max="20"]	{ width: 800px }
html.static-grid .cell[cell-max="21"]	{ width: 840px } 
html.static-grid .cell[cell-max="22"]	{ width: 880px }
html.static-grid .cell[cell-max="23"]	{ width: 920px }
html.static-grid .cell[cell-max="24"]	{ width: 960px } 


@media screen and (min-width: 1249px) {
	html.flex-grid .section {
		padding: 25px;
	}
	html.flex-grid .row > .cell {
		padding: 0 25px;
	}
}

@media screen and (max-width: 1200px) {
	html.flex-grid .row[row-collapse="1200"] {
		display: block;
	}

	html.flex-grid .row[row-collapse="1200"] > .cell {
		width: 100%;
		min-width: 0;	
		padding-top: 4.166666%;
	}

	html.flex-grid *[hide-below="1200"] {
		display: none !important;
	}
}

@media screen and (max-width: 1150px) {
	html.flex-grid .row[row-collapse="1150"] {
		display: block;
	}

	html.flex-grid .row[row-collapse="1150"] > .cell {
		width: 100%;
		min-width: 0;	
		padding-top: 4.166666%;
	}

	html.flex-grid *[hide-below="1150"] {
		display: none !important;
	}
}

@media screen and (max-width: 1100px) {
	html.flex-grid .row[row-collapse="1100"] {
		display: block;
	}

	html.flex-grid .row[row-collapse="1100"] > .cell {
		width: 100%;
		min-width: 0;	
		padding-top: 4.166666%;
	}

	html.flex-grid *[hide-below="1100"] {
		display: none !important;
	}
}

@media screen and (max-width: 1050px) {
	html.flex-grid .row[row-collapse="1050"] {
		display: block;
	}

	html.flex-grid .row[row-collapse="1050"] > .cell {
		width: 100%;
		min-width: 0;	
		padding-top: 4.166666%;
	}

	html.flex-grid *[hide-below="1050"] {
		display: none !important;
	}
}

@media screen and (max-width: 1000px) {
	html.flex-grid .row[row-collapse="1000"] {
		display: block;
	}

	html.flex-grid .row[row-collapse="1000"] > .cell {
		width: 100%;
		min-width: 0;	
		padding-top: 4.166666%;
	}

	html.flex-grid *[hide-below="1000"] {
		display: none !important;
	}

}

@media screen and (max-width: 950px) {
	html.flex-grid .row[row-collapse="950"] {
		display: block;
	}

	html.flex-grid .row[row-collapse="950"] > .cell {
		width: 100%;
		min-width: 0;	
		padding-top: 4.166666%;
	}

	html.flex-grid *[hide-below="950"] {
		display: none !important;
	}
}

@media screen and (max-width: 900px) {
	html.flex-grid .row[row-collapse="900"] {
		display: block;
	}

	html.flex-grid .row[row-collapse="900"] > .cell {
		width: 100%;
		min-width: 0;	
		padding-top: 4.166666%;
	}

	html.flex-grid *[hide-below="900"] {
		display: none !important;
	}
}

@media screen and (max-width: 850px) {
	html.flex-grid .row[row-collapse="850"] {
		display: block;
	}

	html.flex-grid .row[row-collapse="850"] > .cell {
		width: 100%;
		min-width: 0;	
		padding-top: 4.166666%;
	}

	html.flex-grid *[hide-below="850"] {
		display: none !important;
	}
}

@media screen and (max-width: 800px) {
	html.flex-grid .row[row-collapse="800"] {
		display: block;
	}

	html.flex-grid .row[row-collapse="800"] > .cell {
		width: 100%;
		min-width: 0;	
		padding-top: 4.166666%;
	}

	html.flex-grid *[hide-below="800"] {
		display: none !important;
	}
}

@media screen and (max-width: 767px) {
	html.flex-grid .row[row-collapse="768"] {
		display: block;
	}

	html.flex-grid .row[row-collapse="768"] > .cell {
		width: 100%;
		min-width: 0;	
		padding-top: 4.166666%;
	}

	html.flex-grid *[hide-below="768"] {
		display: none !important;
	}

}

@media screen and (max-width: 750px) {
	html.flex-grid .row[row-collapse="750"] {
		display: block;
	}

	html.flex-grid .row[row-collapse="750"] > .cell {
		width: 100%;
		min-width: 0;	
		padding-top: 4.166666%;
	}

	html.flex-grid .row[row-collapse="750"] > .cell:first-child {
		padding-top: 0;
	}

	html.flex-grid *[hide-below="750"] {
		display: none !important;
	}
}

@media screen and (max-width: 700px) {
	html.flex-grid .row[row-collapse="700"] {
		display: block;
	}

	html.flex-grid .row[row-collapse="700"] > .cell {
		width: 100%;
		min-width: 0;	
		padding-top: 4.166666%;
	}

	html.flex-grid *[hide-below="700"] {
		display: none !important;
	}
}

@media screen and (max-width: 650px) {
	html.flex-grid .row[row-collapse="650"] {
		display: block;
	}

	html.flex-grid .row[row-collapse="650"] > .cell {
		width: 100%;
		min-width: 0;	
		padding-top: 4.166666%;
	}

	html.flex-grid *[hide-below="650"] {
		display: none !important;
	}
}

@media screen and (max-width: 600px) {
	html.flex-grid .row[row-collapse="600"] {
		display: block;
	}

	html.flex-grid .row[row-collapse="600"] > .cell {
		width: 100%;
		min-width: 0;	
		padding-top: 4.166666%;
	}

	html.flex-grid *[hide-below="600"] {
		display: none !important;
	}
}

@media screen and (max-width: 550px) {
	html.flex-grid .row[row-collapse="550"] {
		display: block;
	}

	html.flex-grid .row[row-collapse="550"] > .cell {
		width: 100%;
		min-width: 0;	
		padding-top: 4.166666%;
	}

	html.flex-grid *[hide-below="550"] {
		display: none !important;
	}
}

@media screen and (max-width: 500px) {
	html.flex-grid .row[row-collapse="500"] {
		display: block;
	}

	html.flex-grid .row[row-collapse="500"] > .cell {
		width: 100%;
		min-width: 0;	
		padding-top: 4.166666%;
	}

	html.flex-grid *[hide-below="500"] {
		display: none !important;
	}

	html.flex-grid .section {
		padding: 10px 5px;
	}

	html.flex-grid .row > .cell {
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 20px !important;
	}

	html.flex-grid .row > .cell:first-child {
		padding-top: 0 !important;
	}
}

@media screen and (max-width: 450px) {
	html.flex-grid .row[row-collapse="450"] {
		display: block;
	}

	html.flex-grid .row[row-collapse="450"] > .cell {
		width: 100%;
		min-width: 0;	
		padding-top: 4.166666%;
	}

	html.flex-grid *[hide-below="450"] {
		display: none !important;
	}
}

@media screen and (max-width: 400px) {
	html.flex-grid .row[row-collapse="400"] {
		display: block;
	}

	html.flex-grid .row[row-collapse="400"] > .cell {
		width: 100%;
		min-width: 0;	
		padding-top: 4.166666%;
	}

	html.flex-grid *[hide-below="400"] {
		display: none !important;
	}
}