/* ==========================================================================
   =Base grid
   ========================================================================== */

	.container ,
	.container-fluid {
		position: relative;
		margin-right: auto;
		margin-left: auto;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
	}

	.container {
		padding-right: 15px;
		padding-left: 15px;
	}

	.row {
		position: relative;
		margin-right: -15px;
		margin-left: -15px;
	}

	/**
 	 * Automatically Clear Fix rows
 	 */
	 
	.row:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}	
	
	.span1, 
	.span2, 
	.span3, 
	.span4, 
	.span5, 
	.span6, 
	.span7, 
	.span8, 
	.span9, 
	.span10, 
	.span11, 
	.span12 {
		min-height: 1px;
		padding-right: 15px;
		padding-left: 15px;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
	}

	@media (min-width: 768px) {

		.span1, 
		.span2, 
		.span3, 
		.span4, 
		.span5, 
		.span6, 
		.span7, 
		.span8, 
		.span9, 
		.span10, 
		.span11, 
		.span12 {
			float: left;
		}
		
		.span12 { width: 100%; }
		.span11 { width: 91.66666667%; }
		.span10 { width: 83.33333333%; }
		.span9  { width: 75%; }
		.span8  { width: 66.66666667%; }
		.span7  { width: 58.33333333%; }
		.span6  { width: 50%; }
		.span5  { width: 41.66666667%; }
		.span4  { width: 33.33333333%; }
		.span3  { width: 25%; }
		.span2  { width: 16.66666667%; }
		.span1  { width: 8.33333333%;  }
		
		.offset12 { margin-left: 100%; }
		.offset11 { margin-left: 91.66666667%; }
		.offset10 { margin-left: 83.33333333%; }
		.offset9  { margin-left: 75%; }
		.offset8  { margin-left: 66.66666667%; }
		.offset7  { margin-left: 58.33333333%; }
		.offset6  { margin-left: 50%; }
		.offset5  { margin-left: 41.66666667%; }
		.offset4  { margin-left: 33.33333333%; }
		.offset3  { margin-left: 25%; }
		.offset2  { margin-left: 16.66666667%; }
		.offset1  { margin-left: 8.33333333%; }
		.offset0  { margin-left: 0%; }

	}

	.visible-phone,
	.visible-tablet,
	.visible-desktop,
	.visible-desktop-large {
		display: none !important;
	}

	.visible-phone-block,
	.visible-phone-inline,
	.visible-phone-inline-block,
	.visible-tablet-block,
	.visible-tablet-inline,
	.visible-tablet-inline-block,
	.visible-desktop-block,
	.visible-desktop-inline,
	.visible-desktop-inline-block,
	.visible-desktop-large-block,
	.visible-desktop-large-inline,
	.visible-desktop-large-inline-block {
		display: none !important;
	}
		
/* ==========================================================================
   =Extra small devices: Phones (< 768px)
   ========================================================================== */

/* =Portrait and landscape
   ========================================================================== */
   
	@media (max-width: 767px) {
		
		.container { width: auto; }
		
		.span1, 
		.span2, 
		.span3, 
		.span4, 
		.span5, 
		.span6, 
		.span7, 
		.span8, 
		.span9, 
		.span10, 
		.span11, 
		.span12 {
			width: 100%;
		}
		
		.visible-phone { display: block !important; }
		table.visible-phone { display: table; }
		tr.visible-phone { display: table-row !important; }
		th.visible-phone,
		td.visible-phone { display: table-cell !important; }

		.visible-phone-block { display: block !important; }
		.visible-phone-inline { display: inline !important; }
		.visible-phone-inline-block { display: inline-block !important; }

		.hidden-phone { display: none !important; }
		
	}
	
/* =Landscape
   ========================================================================== */
	
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		
		
		
	}	

/* ==========================================================================
   =Small devices: Tablets (>= 768px)
   ========================================================================== */

	@media (min-width: 768px) and (max-width: 991px) {
		
		.container {	width: 750px; }

		.visible-tablet { display: block !important; }
		table.visible-tablet { display: table; }
		tr.visible-tablet { display: table-row !important; }
		th.visible-tablet,
		td.visible-tablet { display: table-cell !important; }

		.visible-tablet-block { display: block !important; }
		.visible-tablet-inline { display: inline !important; }
		.visible-tablet-inline-block { display: inline-block !important; }

		.hidden-tablet { display: none !important; }
		
	}
	
/* ==========================================================================
   =Medium devices: Desktops (>= 992px )
   ========================================================================== */
   
	@media (min-width: 992px) and (max-width: 1199px) {
		
		.container { width: 970px; }
		
		.visible-desktop { display: block !important; }
		table.visible-desktop { display: table; }
		tr.visible-desktop { display: table-row !important; }
		th.visible-desktop,
		td.visible-desktop { display: table-cell !important; }

		.visible-desktop-block { display: block !important; }
		.visible-desktop-inline { display: inline !important; }
		.visible-desktop-inline-block { display: inline-block !important; }

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

/* ==========================================================================
   =Large devices: Desktops (>= 1200px )
   ========================================================================== */

	@media (min-width: 1200px) {
	
		.container { width: 1170px; }
		
		.visible-desktop-large { display: block !important; }
		table.visible-desktop-large { display: table; }
		tr.visible-desktop-large { display: table-row !important; }
		th.visible-desktop-large,
		td.visible-desktop-large { display: table-cell !important; }

		.visible-desktop-large-block { display: block !important; }
		.visible-desktop-large-inline { display: inline !important; }
		.visible-desktop-large-inline-block { display: inline-block !important; }

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

/* ==========================================================================
   =Clearing
   ========================================================================== */

	/**
 	 * 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;
	}