/**
 *	Name: grid.css
 *
 *	T.O.C
 *	
 *	=Base Grid
 *	=Large Display
 *	=Tablet (Portrait)
 *	=Mobile (Portrait and Landscape )
 *	=Portrait and landscape
 *	=Landscape
 *	=Align
 *	=Responsive Images and Embeds
 *	=Clearing
 * 
 */
 

/* ========================================================================== */
/* Base Grid
/* ========================================================================== */
.row
{ 
	position: relative; 
	width: 940px; 
	margin: 0 auto;
}

.row .row
{ 
	width: auto; 
	margin: 0;
}

.row .row-sub
{ 
	width: auto; 
	margin: 0px 0px 15px 0px;
	overflow: hidden;
}

.row .row-sub p:last-child
{ 
	margin: 0px 0px 0px 0px;
}

.span1, 
.span2, 
.span3, 
.span4, 
.span5, 
.span6, 
.span7, 
.span8, 
.span9, 
.span10, 
.span11, 
.span12
{
	float: left;
}

.span1
{ 
	width: 60px;  
	margin-left: 20px; 
}

.span2
{ 
	width: 140px; 
	margin-left: 20px; 
}

.span3
{ 
	width: 220px; 
	margin-left: 20px; 
}

.span4
{ 
	width: 300px;
	margin-left: 20px; 
}

.span5
{ 
	width: 380px; 
	margin-left: 20px; 
}

.span6
{ 
	width: 460px; 
	margin-left: 20px; 
}

.span7
{ 
	width: 540px; 
	margin-left: 20px; 
}

.span8
{ 
	width: 620px; 
	margin-left: 20px; 
}

.span9
{ 
	width: 700px; 
	margin-left: 20px; 
}

.span10
{ 
	width: 780px; 
	margin-left: 20px; 
}

.span11
{ 
	width: 860px; 
	margin-left: 20px; 
}

.span12
{ 
	width: 940px; 
	margin-left: 20px; 
}

.span1:first-child, 
.span2:first-child, 
.span3:first-child, 
.span4:first-child, 
.span5:first-child, 
.span6:first-child, 
.span7:first-child, 
.span8:first-child, 
.span9:first-child, 
.span10:first-child, 
.span11:first-child, 
.span12:first-child
{
	margin-left: 0;
}

.visible-phone
{
	display: none !important;
}

.visible-tablet
{
	display: none !important;
}

.hidden-desktop
{
	display: none !important;
}

.visible-desktop
{
	display: inherit !important;
} 

/* ========================================================================== */
/* Large Display
/* ========================================================================== */

@media (min-width: 1400px)
{
	.row
	{
		width: 1170px;
	}

	.span1
	{ 
		width: 70px;  
		margin-left: 30px; 
	}
	
	.span2
	{ 
		width: 170px; 
		margin-left: 30px; 
	}
	
	.span3
	{ 
		width: 270px; 
		margin-left: 30px; 
	}
	
	.span4
	{ 
		width: 370px; 
		margin-left: 30px; 
	}
	
	.span5
	{ 
		width: 470px; 
		margin-left: 30px; 
	}
	
	.span6
	{ 
		width: 570px; 
		margin-left: 30px; 
	}
	
	.span7
	{ 
		width: 670px; 
		margin-left: 30px; 
	}
	
	.span8
	{ 
		width: 770px; 
		margin-left: 30px; 
	}
	
	.span9
	{ 
		width: 870px; 
		margin-left: 30px; 
	}
	
	.span10
	{ 
		width: 970px;
		margin-left: 30px;
	}
	
	.span11
	{ 
		width: 1070px; 
		margin-left: 30px; 
	}
	
	.span12
	{ 
		width: 1170px;
		margin-left: 30px; 
	}
	
}
 
/* ========================================================================== */
/* Tablet (Portrait)
/* ========================================================================== */
@media (min-width: 768px) and (max-width: 979px) {
	
	.row
	{
		width: 705px; 
	}

	.span1
	{ 
		width: 45px;  
		margin-left: 15px; 
	}
	
	.span2
	{ 
		width: 105px; 
		margin-left: 15px; 
	}
	
	.span3
	{ 
		width: 165px; 
		margin-left: 15px; 
	}
	
	.span4
	{ 
		width: 225px; 
		margin-left: 15px; 
	}
	
	.span5
	{ 
		width: 285px; 
		margin-left: 15px; 
	}
	
	.span6
	{ 
		width: 345px; 
		margin-left: 15px; 
	}
	
	.span7
	{ 
		width: 405px; 
		margin-left: 15px; 
	}
	
	.span8
	{ 
		width: 465px; 
		margin-left: 15px; 
	}
	
	.span9
	{ 
		width: 525px; 
		margin-left: 15px; 
	}
	
	.span10
	{ 
		width: 585px;
		margin-left: 15px; 
	}
	
	.span11
	{ 
		width: 645px; 
		margin-left: 15px; 
	}
	
	.span12
	{ 
		width: 705px;
		margin-left: 15px; 
	}
	
	.hidden-desktop
	{
		display: inherit !important;
	} 
	
	.visible-desktop
	{
		display: none !important;
	}
	
	.visible-tablet
	{
		display: inherit !important;
	} 
	
	.hidden-tablet
	{
		display: none !important;	
	}
	
}

/* ========================================================================== */
/* Mobile (Portrait and Landscape )
/* ========================================================================== */
/* Portrait and landscape
/* ========================================================================== */
@media (max-width: 767px)
{
	.row
	{
		width: auto;
	}
	
	.row
	{
		padding: 0 20px;
	}
	
	.row .row
	{ 
		width: auto; 
		padding: 0; 
		margin: 0; 
	}	
	
	.span1,
	.span2,
	.span3,
	.span4,
	.span5,
	.span6,
	.span7,
	.span8,
	.span9,
	.span10,
	.span11,
	.span12
	{ 
		float: none;
		display: block;
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		margin-left: 0;
	}
	
	.hidden-desktop { display: inherit !important; }
	.visible-desktop { display: none !important; }
	.visible-phone { display: inherit !important; }
	.hidden-phone { display: none !important; }
}

/* ========================================================================== */
/* Landscape
/* ========================================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px)
{
	.row
	{
		padding: 0 40px;
	}
	
}	
	
/* ========================================================================== */
/* Align
/* ========================================================================== */
.float-left
{
	float: left;
}

.float-right
{
	float: right;
}

/* ========================================================================== */
/* Responsive Images and Embeds
/* ========================================================================== */
.responsive-img
{ 
	max-width: 100%; 
	height: auto; 
}

/**
 * 1. 16/9 ratio
 */
 
.responsive-embed
{
	position: relative;
	overflow: hidden;
	height: 0;
	padding: 0;
	padding-bottom: 56.25%; /* 1 */	
	margin-bottom: 20px;
}

.responsive-embed iframe,
.responsive-embed object,
.responsive-embed embed
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ========================================================================== */
/* Clearing
/* ========================================================================== */
/* Automatically Clear Fix rows */
.row:after
{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

/*
 * Clear Fix hack
 * Usage:  add  class="fixed"  to div's that have floated elements in them
*/
 
.fixed:after
{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

/* 
 * Clear content
 * Usage:  <br class="clear"> 
*/	
 
.clear
{
		clear: both;
		display: block;
		overflow: hidden;
		visibility: hidden;
		width: 0;
		height: 0;
}