/*
simple grid by http://thisisdallas.github.io/Simple-Grid/
*/

*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	margin: 0px auto;
}

[class*='col-'] {
	float: left;
	padding-right: 20px;
}

[class*='col-']:last-of-type {
	padding-right: 0px;
}

.grid {
	max-width: 95%;
	overflow: visible;
}

.grid:after {
	content: "";
	display: table;
	clear: both;
}

.grid-pad {
	padding: 20px 0 0px 20px;
}

.grid-pad > [class*='col-']:last-of-type {
	padding-right: 20px;
}

.push-right {
	float: right;
}

/*----------- Content Columns -------------*/

.col-1-1,
.col-2-3, .col-8-12,
.col-1-2, .col-6-12,
.col-1-3, .col-4-12,
.col-1-4, .col-3-12,
.col-1-5,
.col-1-6,
.col-1-7,
.col-1-8,
.col-1-9,
.col-1-10,
.col-1-11,

/* Layout Columns */
col-11-12,
.col-10-12,
.col-9-12,
.col-5-12,
.col-7-12 {
	width: 100%;
}

.col-1-12 {
	max-width: 20%;
}	

.col-2-12 {
	max-width: 80%;
}


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

.grid {
	max-width: 95%;
	max-width: 1024px;
	margin: 0 auto;
}

.col-1-1 { 
	max-width: 100%; /*1 column*/
}

.col-1-4 { 
	max-width: 50%; /*2 columns*/
}	

.col-1-2 {
	max-width: 50%; /*2 columns*/
}

.col-1-3 {
	max-width: 50%; /*2 columns*/
}


.col-4-12 {
	max-width: 90%; /*  2/3 of width */
}

.col-9-12 {
	max-width: 90%; /*  1/3 of width */
}

.col-8-12 {
	max-width: 75%;  /*  3/4 of width */
}

.col-3-12 {
	max-width: 75%;  /*  3/4 of width */
}
}

@media only screen and (min-width: 720px) {
.col-4-12 {
	max-width: 50%; /*  2/3 of width */
}

.col-9-12 {
	max-width: 50%; /*  1/3 of width */
}

.col-1-12 {
	max-width: 8 %;
}	

.col-2-12 {
	max-width: 25.33 %;
}

}


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

.grid {
	max-width: 95%;
	max-width: 1024px;
	margin: 0 auto;
}

.col-1-1 { 
	max-width: 100%; /*1 column*/
}

.col-1-4 { 
	max-width: 25%; /*4 columns*/
}	

.col-1-2 {
	max-width: 50%; /*2 columns*/
}

.col-1-3 {
	max-width: 33.33%; /*3 columns*/
}


.col-4-12 {
	max-width: 66.66%; /*  2/3 of width */
}

.col-9-12 {
	max-width: 33.33%; /*  1/3 of width */
}

.col-8-12 {
	max-width: 75%;  /*  3/4 of width */
}

.col-3-12 {
	max-width: 25%;  /*  1/4 of width */
}

.col-1-12 {
	max-width: 8 %;
}	

.col-2-12 {
	max-width: 25.33 %;
}

}