/***************************

 GRID SYSTEM

 ***************************/

/* Splits Up The Page Horizontally & Clears Itself */
.row {
	clear: both;
	padding: 0px;
	margin: 0;
}
.row:before, .row:after {
	content: "";
	display: table;
}
.row:after {
	clear: both;
}

/* Divides The Row Into Columns */
.col {
	display: block;
	float: left;
	margin: 0% 0 0 1.6%;
}

.col:first-child {
	margin-left: 0;
}

.col:before, .col:after {
	content: " ";
	display: table;
}

.col:after {
	clear: both;
}

/*  Remove margins as all go full width at 480 pixels */
@media only screen and (max-width: 480px) {
	.row {
		margin-left: 0;
		margin-right: 0;
	}
	.col {
		margin: 1% 0 1% 0%;
	}
}

/* GRID OF TWO */
.grid2-2 {
	width: 100%;
}
.grid1-2 {
	width: 49.2%;
}

/* GRID OF THREE */
.grid3-3 {
	width: 100%;
}
.grid2-3 {
	width: 66.13%;
}
.grid1-3 {
	width: 32.26%;
}

/* GRID OF FOUR */
.grid4-4 {
	width: 100%;
}
.grid3-4 {
	width: 74.6%;
}
.grid2-4 {
	width: 49.2%;
}
.grid1-4 {
	width: 23.8%;
}

/* GRID OF FIVE */
.grid5-5 {
	width: 100%;
}
.grid4-5 {
	width: 79.68%;
}
.grid3-5 {
	width: 59.36%;
}
.grid2-5 {
	width: 39.04%;
}
.grid1-5 {
	width: 18.72%;
}

/* GRID OF SIX */
.grid6-6 {
	width: 100%;
}
.grid5-6 {
	width: 83.06%;
}
.grid4-6 {
	width: 66.13%;
}
.grid3-6 {
	width: 49.2%;
}
.grid2-6 {
	width: 32.26%;
}
.grid1-6 {
	width: 15.33%;
}

/* GRID OF SEVEN */
.grid7-7 {
	width: 100%;
}
.grid6-7 {
	width: 85.48%;
}
.grid5-7 {
	width: 70.97%;
}
.grid4-7 {
	width: 56.45%;
}
.grid3-7 {
	width: 41.94%;
}
.grid2-7 {
	width: 27.42%;
}
.grid1-7 {
	width: 12.91%;
}

/* GRID OF EIGHT */
.grid8-8 {
	width: 100%;
}
.grid7-8 {
	width: 87.3%;
}
.grid6-8 {
	width: 74.6%;
}
.grid5-8 {
	width: 61.9%;
}
.grid4-8 {
	width: 49.2%;
}
.grid3-8 {
	width: 36.5%;
}
.grid2-8 {
	width: 23.8%;
}
.grid1-8 {
	width: 11.1%;
}

/* GRID OF NINE */
.grid9-9 {
	width: 100%;
}
.grid8-9 {
	width: 88.71%;
}
.grid7-9 {
	width: 77.42%;
}
.grid6-9 {
	width: 66.13%;
}
.grid5-9 {
	width: 54.84%;
}
.grid4-9 {
	width: 43.55%;
}
.grid3-9 {
	width: 32.26%;
}
.grid2-9 {
	width: 20.97%;
}
.grid1-9 {
	width: 9.68%;
}

/* GRID OF TEN */
.grid10-10 {
	width: 100%;
}
.grid9-10 {
	width: 89.84%;
}
.grid8-10 {
	width: 79.68%;
}
.grid7-10 {
	width: 69.52%;
}
.grid6-10 {
	width: 59.36%;
}
.grid5-10 {
	width: 49.2%;
}
.grid4-10 {
	width: 39.04%;
}
.grid3-10 {
	width: 28.88%;
}
.grid2-10 {
	width: 18.72%;
}
.grid1-10 {
	width: 8.56%;
}

/* GRID OF ELEVEN */
.grid11-11 {
	width: 100%;
}
.grid10-11 {
	width: 90.76%;
}
.grid9-11 {
	width: 81.52%;
}
.grid8-11 {
	width: 72.29%;
}
.grid7-11 {
	width: 63.05%;
}
.grid6-11 {
	width: 53.81%;
}
.grid5-11 {
	width: 44.58%;
}
.grid4-11 {
	width: 35.34%;
}
.grid3-11 {
	width: 26.1%;
}
.grid2-11 {
	width: 16.87%;
}
.grid1-11 {
	width: 7.63%;
}

/*  GRID OF TWELVE */
.grid12-12 {
	width: 100%;
}
.grid11-12 {
	width: 91.53%;
}
.grid10-12 {
	width: 83.06%;
}
.grid9-12 {
	width: 74.6%;
}
.grid8-12 {
	width: 66.13%;
}
.grid7-12 {
	width: 57.66%;
}
.grid6-12 {
	width: 49.2%;
}
.grid5-12 {
	width: 40.73%;
}
.grid4-12 {
	width: 32.26%;
}
.grid3-12 {
	width: 23.8%;
}
.grid2-12 {
	width: 15.33%;
}
.grid1-12 {
	width: 6.86%;
}

/*  Go Full Width At Less Than 480 Pixels */
@media (max-width: 480px) {
	div[class*='grid'] {
		width: 100%;
		margin-right: 0px;
		margin-left: 0px;
	}

	.respond {
		width: 100%;
		margin-right: 0px;
		margin-left: 0px;
	}

	.respond-half {
		width: 49%;
		margin-left: 2%;
		margin-right: 0;
	}

	.respond-half:first-child {
		margin-left: 0;
	}
}

/* Responsive Media Container */
.embed-responsive {
	position: relative;
	padding-bottom: 56.25%; /* 16/9 ratio */
	height: 0;
	overflow: hidden;
}
.embed-responsive iframe, .embed-responsive object, .embed-responsive embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Horizontal Tablet Show / Hide Classes */
@media only screen and (min-width: 1025px) {
	.hide-htablet {
		display: block !important;
	}
	.show-htablet {
		display: none !important;
	}
}

@media only screen and (max-width: 1024px) {
	.hide-htablet {
		display: none !important;
	}
	.show-htablet {
		display: block !important;
	}
}

/* Vertical Tablet Show / Hide Classes */
@media only screen and (min-width: 769px) {
	.hide-vtablet {
		display: block !important;
	}
	.show-vtablet {
		display: none !important;
	}
}

@media only screen and (max-width: 768px) {
	.hide-vtablet {
		display: none !important;
	}
	.show-vtablet {
		display: block !important;
	}

}

/* Mobile Show / Hide Classes */
@media only screen and (min-width: 481px) {
	.hide-mobile {
		display: block !important;
	}
	.show-mobile {
		display: none !important;
	}
}

@media only screen and (max-width: 480px) {
	.hide-mobile {
		display: none !important;
	}
	.show-mobile {
		display: block !important;
	}
}

/* Reponsive Images */
img {
	/* Ensure images don't scale beyond their parents */
	max-width: 100%;
	/* Part 1: Set a maxium relative to the parent */
	width: auto\9;
	/* IE7-8 need help adjusting responsive images */
	height: auto;
	/* Part 2: Scale the height according to the width, otherwise you get stretching */
	vertical-align: middle;
	border: 0;
	-ms-interpolation-mode: bicubic;
}

/* Make image not responsive */
img.not-responsive {
	max-width: none;
}