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

	.row-fluid { 
		position: relative; 
		width: 1000px; 
		margin: 0 auto; margin-top:10px;
	}
	
	.row .row { 
		width: auto; 
		margin: 0;
	 }

 	.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: 1000px; 
		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) {
		.main_banner{ height: 440px;}
		/*.wrapperin{ width:100%;}*/
		.menu { float:right;}
		.logo { float:left;}
		#trueHeader{height:80px;}
		.row-fluid { width: 1000px; margin-top:10px; }
	
		.span1 { 
			width: 70px;  
			margin-left: 30px; 
		}
		
		.span2 { 
			width: 70px; 
			margin-left: 30px; 
		}
		
		.span3 { 
			width: 170px; 
			margin-left: 30px; 
		}
		
		.span4 { 
			width: 370px; 
			margin-left: 30px; 
		}
		
		.span5 { 
			width: 370px; 
			margin-left: 30px; 
		}
		
		.span6 { 
			width: 470px; 
			margin-left: 30px; 
		}
		
		.span7 { 
			width: 570px; 
			margin-left: 30px; 
		}
		
		.span8 { 
			width: 570px; 
			margin-left: 30px; 
		}
		
		.span9 { 
			width: 770px; 
			margin-left: 30px; 
		}
		
		.span10 { 
			width: 870px;
			margin-left: 30px;
		}
		
		.span11 { 
			width: 970px; 
			margin-left: 30px; 
		}
		
		.span12 { 
			width: 1000px;
			margin-left: 30px; 
		}
	}
 
/* ==========================================================================
   #Tablet (Portrait)
   ========================================================================== */

	@media (min-width: 768px) and (max-width: 979px) {
		.main_banner{height: auto; margin-top:140px;}
		.menu { float:left; clear:both}
		.logo { float:none}
		#trueHeader{height:150px;}
		.wrapper {width: 97%;margin: 10px auto;padding-top: 0px;padding: 5px;}
		.iconbox {width: 97%;float: left;text-align: center;position: relative;padding: 5px;}
		.maincon1 {width: 97%;float: left;padding: 5px;}
		.maincon2 {width: 97%;float: left;padding: 5px;}
		.bluebox h1{ font-size:15px;}
		.btnblue {background: #1cc6da;color: #FFFFFF;border: 0px;cursor: pointer;padding: 5px 5px;font-size:12px;}
		.wrapperin{ width:100%;}
		
		.row-fluid { width: 705px; margin-top:10px; }
	
		.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; 
		}
	}

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

	@media (max-width: 767px) {

		.row-fluid { width: auto; margin-top:10px; }
		.main_banner{height: auto; margin-top:140px;}
		.menu { float:left; clear:both}
		.logo { float:none}
		#trueHeader{height:150px;}
		.wrapper {width: 97%;margin: 10px auto;padding-top: 0px;padding: 5px;}
		.iconbox {width: 97%;float: left;text-align: center;position: relative;padding: 5px;}
		.maincon1 {width: 97%;float: left;padding: 5px;}
		.maincon2 {width: 97%;float: left;padding: 5px;}
		.bluebox h1{ font-size:15px;}
		.btnblue {background: #1cc6da;color: #FFFFFF;border: 0px;cursor: pointer;padding: 5px 5px;font-size:12px;}
		.wrapperin{ width:100%;}
		
		.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;
		}
		
		.span4{ margin-left:20px !important;}
	}
	
	@media screen and (max-width: 600px) {
		.main_banner{height: auto; margin-top:160px;}
		.menu { float:left; clear:both}
		.logo { float:none}
		#trueHeader{height:150px;}
		.wrapper {width: 97%;margin: 10px auto;padding-top: 0px;padding: 5px;}
		.iconbox {width: 97%;float: left;text-align: center;position: relative;padding: 5px;}
		.maincon1 {width: 97%;float: left;padding: 5px;}
		.maincon2 {width: 97%;float: left;padding: 5px;}
		.bluebox h1{ font-size:15px;}
		.btnblue {background: #1cc6da;color: #FFFFFF;border: 0px;cursor: pointer;padding: 5px 5px;font-size:12px;}
		.wrapperin{ width:100%;}
	}