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

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 (max-width: 1024px) {
	.hide-htablet{
		display: none !important;
	}
	.show-htablet{
		display: block !important;
	}
}

/* Vertical Tablet Show / Hide Classes */
@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 (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;		
}