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