/* ==========================================================================
   Main Grid CSS 
   ========================================================================== */

/*
 *  Controls the responsive grid for the site.  
 *  
 *  Grid CSS modified from grid packaged with HTML5 Kickstart
 *  https://github.com/joshuagatcke/HTML-KickStart/blob/master/css/kickstart-grid.css
 *  
 *  @about
 *		Columns : 12 
 *		Gutter %: 20%
 *		MaxWidth: 1280px
 *
 */
 
.grid{
max-width:1220px;
margin:0 auto;
padding:0 2em; /*padding:0 .7em;*/
}

.grid.flex{
width:100%;
max-width:100%;
padding:0 2%;
padding:1em;
}

.row{
display:block;
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;
}

/* 
 * 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:1px dotted #ccc;
}

#js-breakviewer { 
	position: absolute;
	margin: 0;
	padding: 0;
	height: 1px;	
}

#js-breakviewer li {
	margin: 0;
	padding: 0;	
	list-style:none;
}

/*  
   Responsive Grid Media Queries - 1280, 1024, 768, 480
   ========================================================================== */
   
/*   
 *  @about
 *		5000-1024: desktop (default grid)
 *		1024-768: big tablet 
 *		768-480: little tablet
 *		480-less: phone landscape & smaller
 *
 */  
  
@media all and (min-width: 1024px) and (max-width: 5000px) {
	
	.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;}
	.hide-mini-tablet  { display:block; } 	
	.hide-single-column { display:block }
	
	.hide-lt-desktop { display:block; }	
	.show-lt-desktop { display:none; }	
	
	/* These elements are checked by js to determine responsive state */
	#js-break-1 { display:block; }
	
	#js-break-2,
	#js-break-3,
	#js-break-4 { display:none; }
	
}

@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;}
	.hide-mini-tablet  { display:block} 
	.hide-single-column { display:block }
	
	.hide-lt-desktop { display:none; }
	.show-lt-desktop { display:block; }	
	
	/* These elements are checked by js to determine responsive state */
	#js-break-2 { display:block; }
	
	#js-break-1,
	#js-break-3,
	#js-break-4 { display:none; }	
	
}


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

	.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;}
	.hide-mini-tablet  { display:none } 
	.one-row-center-text { text-align: center !important; }
	.hide-single-column { display:none }
	
	.hide-lt-desktop { display:none !important; }
	.show-lt-desktop { display:block; }
	
	/* These elements are checked by js to determine responsive state */
	#js-break-3 { display:block; }
	
	#js-break-1,
	#js-break-2,
	#js-break-4 { display:none; }		
	
}

@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;}
	.hide-mini-tablet  { display:none }
	.one-row-center-text { text-align: center !important; }	
	.hide-single-column { display:none }
	
	.hide-lt-desktop { display:none !important; }
	.show-lt-desktop { display:block; }
	
	/* These elements are checked by js to determine responsive state */
	#js-break-4 { display:block; }
	
	#js-break-1,
	#js-break-2,
	#js-break-3 { display:none; }		
	
}