/**
 * Name: grid.css
 *
 *	T.O.C
 *	
 *	#Base Grid
 *	#Responsive Images and embeds
 *	#Clearing
 * #ResponsiveFormInputs
 */
 

/* ==========================================================================
   #Base Grid
   ========================================================================== */

	.row-fluid, .row {
	    width: 100%;
	    margin: 0px auto;
	    *zoom: 1;
	  }
	  .row-fluid:before, .row:before,
	  .row-fluid:after, .row:after {
	    display: table;
	    content: "";
	    line-height: 0;
	  }
	  .row-fluid:after, .row:after {
	    clear: both;
	  }
	  .row-fluid [class*="span"], .row [class*="span"]{
	    display: block;
	    width: 100%;
	    min-height: 30px;
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
	    float: left;
	    margin-left: 2.564102564102564%;
	    *margin-left: 2.5109110747408616%;
	  }
	  .row-fluid [class*="span"]:first-child, .row [class*="span"]:first-child{
	    margin-left: 0;
	  }
	  .row-fluid .span12, .row .span12{
	    width: 100%;
	    *width: 99.94680851063829%;
	  }
	  .row-fluid .span11, .row .span11 {
	    width: 91.45299145299145%;
	    *width: 91.39979996362974%;
	  }
	  .row-fluid .span10, .row .span10 {
	    width: 82.90598290598291%;
	    *width: 82.8527914166212%;
	  }
	  .row-fluid .span9, .row .span9 {
	    width: 74.35897435897436%;
	    *width: 74.30578286961265%;
	  }
	  .row-fluid .span8, .row .span8 {
	    width: 65.81196581196582%;
	    *width: 65.75877432260411%;
	  }
	  .row-fluid .span7, .row .span7 {
	    width: 57.26495726495726%;
	    *width: 57.21176577559556%;
	  }
	  .row-fluid .span6, .row .span6 {
	    width: 48.717948717948715%;
	    *width: 48.664757228587014%;
	  }
	  .row-fluid .span5, .row .span5 {
	    width: 40.17094017094017%;
	    *width: 40.11774868157847%;
	  }
	  .row-fluid .span4, .row .span4 {
	    width: 31.623931623931625%;
	    *width: 31.570740134569924%;
	  }
	  .row-fluid .span3, .row .span3 {
	    width: 23.076923076923076%;
	    *width: 23.023731587561375%;
	  }
	  .row-fluid .span2, .row .span2 {
	    width: 14.52991452991453%;
	    *width: 14.476723040552828%;
	  }
	  .row-fluid .span1, .row .span1 {
	    width: 5.982905982905983%;
	    *width: 5.929714493544281%;
	  } 	

	@media (min-width: 1661px) {

		.row-fluid, .row{
		    width: 100%;
		    max-width:70vw;
		    margin: 0px auto;
		    *zoom: 1;
	  	}
	}
	@media (max-width: 1660px) {

		.row-fluid, .row {
		    width: 100%;
		    max-width:85vw;
		    margin: 0px auto;
		    *zoom: 1;
	  	}
	}

   .visible-phone { display: none !important; }
	.visible-tablet { display: none !important; }
	.hidden-desktop { display: none !important; }
	.visible-desktop { display: inherit !important; } 

/* ==========================================================================
   #Tablet (Portrait)
   ========================================================================== */

	@media (max-width: 1280px) {

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


/* ==========================================================================
   #Mobile (Portrait and Landscape )
   ========================================================================== */

	@media (max-width: 979px) {

		.row-fluid, .row {
		    width: 100%;
		    max-width:90vw;
		    margin: 0px auto;
		    *zoom: 1;

	  	}		
		.row-fluid{
			padding:0px 1rem;
			box-sizing: border-box;
			margin:0px auto;
		}
		.row-fluid [class*="span"], .row [class*="span"]{
			float: none;
	    	margin-left: 0;
	     	width: 100%;
	  }
		.row { width: auto; }

		.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; }


	}
	@media screen and (max-width:320px){
		.row-fluid{
			padding:0px .5rem;
			box-sizing: border-box;
			margin:0px auto;
		}
	}
	
/* ==========================================================================
   #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,
	.row-fluid: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;
	} 
	
/* ==========================================================================
   #ResponsiveFormInputs
   ========================================================================== */
	
	/**
	 * 1. Reset float inherited from .span*	
 	 * 2. Reset margin-left inherited from .span*
 	 */
	 
	input.span1,
	textarea.span1,
	select.span1,
	input.span2,
	textarea.span2,
	select.span2,
	input.span3,
	textarea.span3,
	select.span3,
	input.span4,
	textarea.span4,
	select.span4,
	input.span5,
	textarea.span5,
	select.span5,
	input.span6,
	textarea.span6,
	select.span6,
	input.span7,
	textarea.span7,
	select.span7,
	input.span8,
	textarea.span8,
	select.span8,
	input.span9,
	textarea.span9,
	select.span9,
	input.span10,
	textarea.span10,
	select.span10,
	input.span11,
	textarea.span11,
	select.span11,
	input.span12,
	textarea.span12,
	select.span12 {
		float: none; 	/* 1 */
		margin-left: 0; /* 2 */
	}