/*in this css define the width of the grid for all devices, Don' t modify these rules*/

/*1200 Grid*/
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8,
	.grid_9, .grid_10, .grid_11, .grid_12 {
	margin: 10px;
	float: left;
	display: inline;
}
.grid_center {
  margin: 170px auto 0 auto;
  float: none;
  display: block;
}

.grid_1 {
	width: 80px;
}

.grid_2 {
	width: 180px;
}

.grid_3 {
	width: 280px;
}

.grid_4 {
	width: 380px;
}

.grid_5 {
	width: 480px;
}

.grid_6 {
	width: 580px;
}

.grid_7 {
	width: 680px;
}

.grid_8 {
	width: 780px;
}

.grid_9 {
	width: 880px;
}

.grid_10 {
	width: 980px;
}

.grid_11 {
	width: 1080px;
}

.grid_12 {
	width: 1180px;
}

/* 960 Grid */
@media only screen and (min-width: 960px) and (max-width: 1199px) {
	.grid_1 {
		width: 60px;
	}
	.grid_2 {
		width: 140px;
	}
	.grid_3 {
		width: 220px;
	}
	.grid_4 {
		width: 300px;
	}
	.grid_5 {
		width: 380px;
	}
	.grid_6 {
		width: 460px;
	}
	.grid_7 {
		width: 540px;
	}
	.grid_8 {
		width: 620px;
	}
	.grid_9 {
		width: 700px;
	}
	.grid_10 {
		width: 780px;
	}
	.grid_11 {
		width: 860px;
	}
	.grid_12 {
		width: 940px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	.grid_1 {
		width: 42px;
	}
	.grid_2 {
		width: 104px;
	}
	.grid_3 {
		width: 166px;
	}
	.grid_4 {
		width: 228px;
	}
	.grid_5 {
		width: 290px;
	}
	.grid_6 {
		width: 352px;
	}
	.grid_7 {
		width: 414px;
	}
	.grid_8 {
		width: 476px;
	}
	.grid_9 {
		width: 538px;
	}
	.grid_10 {
		width: 600px;
	}
	.grid_11 {
		width: 662px;
	}
	.grid_12 {
		width: 724px;
	}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
	.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: 440px;
	}
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
	.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: 280px;
	}
}