/*
	99Lime.com HTML KickStart by Joshua Gatcke
	kickstart-grids.css
	
	DO NOT EDIT THIS FILE unless you know what you are doing. 
*/
/*---------------------------------
	GRID/COLUMNS
-----------------------------------
	tinyfluidgrid.com
	& girlfriendnyc.com
	with changes by 99Lime
-----------------------------------*/
 /*
 & Columns : 12 
 & Gutter %: 20% 
 & MaxWidth: 1280px

 
.grid {
	max-width:1220px;
	margin:0 auto;
	padding:0 .5em; /* 0 2em 
}
*/

.grid.flex {
	width: 100%;
	max-width: 1200px; /* 100% */
	padding: 0; /* 0 .5% */
	margin: 0 auto;
}

.row {
	display:block;
	overflow:hidden;
	clear:both;
}

*[class*="col_"].alpha {margin-left:0;}
*[class*="col_"].omega {margin-right:0;}
 
.col_1  { width: 6.6666666666667%; }
.col_2  { width: 15%; }
.col_3  { width: 23.333333333333%; }
.col_4  { width: 31.666666666667%; }
.col_5  { width: 40%; }
.col_6  { width: 48.333333333333%; }
.col_7  { width: 56.666666666667%; }
.col_8  { width: 65%; }
.col_9  { width: 73.333333333333%; }
.col_10 { width: 81.666666666667%; }
.col_11 { width: 90%; }
.col_12 { width: 98.333333333333%; }

*[class*="col_"]{
	margin-left: 0.83333333333333%;
	margin-right: 0.83333333333333%;
	margin-top:0.5em;
	margin-bottom:0.5em;
	float: left;
	display: block;
}

.grid img {
	max-width: 100%;
	height:auto;
}

.clear {
	clear:both;
	display:block;
	overflow:hidden;
	visibility:hidden;
	width:0;
	height:0
}
	
.clearfix:after {
	clear:both;
	content:' ';
	display:block;
	font-size:0;
	line-height:0;
	visibility:hidden;
	width:0;
	height:0
}
	
* html .clearfix, *:first-child+html .clearfix { zoom:1 }

/* Viewable Grids 
	To view your grids, add the class .visible to any grid container.
	This will add a background color so you can see the layout of your grids. 
*/
*[class*="col_"].visible{
	background:#eee;
	border: none;
}


/*---------------------------------
	Responsive Grid Media Queries - 1280, 1024, 768, 480
	1280-1024 	- desktop (default grid)
	1024-768 	- tablet landscape
	768-480 	- tablet 
	480-less 	- phone landscape & smaller
-----------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) {
	
	.grid *[class*="col_"]{}
	.grid{max-width: 1024px;}
	.show-desktop	{display:block;}
	.hide-desktop	{display:none;}
	.show-tablet	{display:none;}
	.hide-tablet	{display:block;}
	.show-phone		{display:none;}
	.hide-phone		{display:block;}
	
}

@media all and (min-width: 768px) and (max-width: 1024px) {
	
	.grid *[class*="col_"]{}
	.grid{max-width: 768px;}
	.show-desktop	{display:none;}
	.hide-desktop	{display:block;}
	.show-tablet	{display:block;}
	.hide-tablet	{display:none;}
	.show-phone		{display:none;}
	.hide-phone		{display:block;}
	
}


@media all and (min-width: 480px) and (max-width: 767px) {

	.grid *[class*="col_"] {
		float:none;
		width:auto;
		clear:both;
		display:block;
	}
	
	/* columns inside of columns */
	.grid *[class*="col_"] [class*="col_"]{
		margin-left:0;
		margin-right:0;
		width:100%;
	}
	
	.grid           {max-width: 480px;}
	.show-desktop	{display:none;}
	.hide-desktop	{display:block;}
	.show-tablet	{display:block;}
	.hide-tablet	{display:none;}
	.show-phone		{display:none;}
	.hide-phone		{display:block;}
	
}

@media all and (max-width: 480px) { 
	
	.grid *[class*="col_"] {
		float:none;
		width:auto;
		clear:both;
		display:block;
	}
	
	/* columns inside of columns */
	.grid *[class*="col_"] [class*="col_"] {
		margin-left:0;
		margin-right:0;
		width:100%;
	}
	
	.grid           {max-width: 100%;/*320*/}
	.show-desktop	{display:none;}
	.hide-desktop	{display:block;}
	.show-tablet	{display:none;}
	.hide-tablet	{display:block;}
	.show-phone		{display:block;}
	.hide-phone		{display:none;}
	
}