html {font-size:62.5%; /* for REM use */ }
html, body, #wrapper { height: 100%; /* for page transitions */ }
body {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;;
	font-weight: 300;
	font-size: 13px;
	line-height: 1.5;
	color:#444;
	background: #333;
}
a {color:#444; text-decoration:none;}
a:hover {color: #444; text-decoration:none;}
a:focus, a:hover, a:active {outline:0;}
abbr[title], abbr[data-original-title] {border-color: #eee;}


#nav {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	z-index: 100;
}
	.vmenu {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		height: 100%;
		margin: 0;
		padding: 0;
		list-style-type: none;
		overflow: visible;
		background: #f7f7f7;
	}
	
		.vmenu li a {
			display: block;
			text-indent: -500em;
			height: 5em;
			width: 5em;
			line-height: 5em;
			text-align: center;
			color: #999;
			position: relative;
			border-bottom: 1px solid #eaeaea;
			border-bottom: 1px solid rgba(0,0,0,0.05);
			-webkit-transition: background 0.1s ease-in-out;
			-moz-transition: background 0.1s ease-in-out;
			transition: background 0.1s ease-in-out;
			
		}
		.vmenu li.active a,
		.vmenu li a:hover {color: #fff;}
	
		.vmenu li a:before {
			speak: none;
			font-style: normal;
			font-weight: normal;
			text-indent: 0em;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 2em;
		}
		.tooltip {white-space: nowrap; font-size: 1.3em;  max-height: 66px; overflow: hidden; }
			.tooltip.right {margin-left: 0; padding: 0 0;}
			.tooltip.right .tooltip-arrow {border-right-color: #fff;  display: none;}
			.tooltip-inner {color: #333; background-color: #fff;
				max-width: 200px;
				padding: 0 1em;
				text-align: left;
				-webkit-border-radius: 0;
				-moz-border-radius: 0;
				border-radius: 0;
				line-height: 4em;
			}

#section1 {width: 100%; height: 100%;}
.tab-content, .tab-pane {background: #222;}
.tab-content>.active {overflow: auto;}

#section1, .link1.active a, .link1 a:hover, #section3, .link3.active a, .link3 a:hover, .link5 a:hover {background: #333;}
#section2, .link2.active a, .link2 a:hover, #section4, .link4.active a, .link4 a:hover {background: #c66632;}

.container-fluid {padding: 4em 8em; margin: 0 auto;color: #eee;}

	.tab-pane h2 {font-size: 2em; margin: 0 0 20px;}
	.stitle {display: none;}
	.tab-pane h3 {font-weight: 200;}
		.tab-pane .stitle span {display: inline-block; padding: 5px 15px; background: #333;}
	.tab-pane h1 {margin-top: -7px;}
			.tab-pane h1 small {color: #ccc; font-size: 60%;}
		
	.tab-pane h4 {font-size: 1.5em; line-height: 60px; font-weight: 200; margin: 10px 0;}
	.tab-pane a {color: #fff; color: rgba(255, 255, 255, .75); border-bottom: 1px dashed #fff; border-bottom: 1px dashed rgba(255, 255, 255, .75);}
		.tab-pane a strong {font-weight: 200}
	
	p {font-size: 1.2em;}
	#section2 .span8 {margin-bottom: 4em;}

#section3 .span1 {text-align: center; margin-bottom: 30px;}
#section3 .span7 p {font-size: 1.4em;}

.footer {
	width: 100%; height: 5em; line-height: 7.2em;
	background: #eee url('../img/logo.png') no-repeat 10px center;
	display: block; position: fixed; z-index: 1001; left: 0;bottom: 0;
	background-size: 112px 46px;
}
.copyright {margin-left: 11em;}
.footer a {margin-right: 2em;}

#maplink {cursor: pointer;}
#map {color: #333;}
#map_canvas {height: 400px}
/*.google-map-canvas,
.google-map-canvas * { .box-sizing(content-box); }
.google-map-canvas img { max-width: none; }*/
.sarainkimg {border: 5px solid #fff;}

@media screen and (max-width: 1199px) {
	.vmenu {font-size: 70%;}
	.tab-pane h3 {font-size: 20px;}
	.tab-pane h1 {font-size: 30px;}
	.icon-3x {font-size: 2em;}
}

@media screen and (min-width: 1200px) {
	.container-fluid {width: 1024px; padding: 6em 8em;}
	.tab-pane h1 {margin-top: -34px;}
	.tab-pane h2 {font-size: 3em; margin: 0 0 1em;}
	.tab-pane h4 {font-size: 2em; line-height: 80px; margin: 15px 0;}
	.tab-pane .stitle span {padding: 8px 18px}
	p {font-size: 1.4em; margin: 0 0 20px;}
	#section3 .span7 p {font-size: 1.6em;}
}
@media (max-width: 979px) and (min-width: 768px) {
	.tab-pane h1 small {font-size: 50%;}
	.tab-pane h4 {font-size: 1.3em;}
}

@media (max-width: 767px) {
	body {padding: 0;}
	.container-fluid {padding: 4em 4em 4em 6em;}
	.tab-pane h4 {font-size: 1.1em; line-height: 1.3em;}
	#banner {display: none;}
	p {font-size: 1em;}
	#section3 .span1 {text-align: left; margin-bottom: 10px; margin-top: 15px;}
	#section3 .span7 p {font-size: 1.1em;}
	.footer {height: 3em; line-height: 3em; background-size: 73px 30px;}
}
@media (max-width: 480px) {
	.container-fluid {padding: 1em 4em 4em 6em;}
	/*body {-webkit-font-smoothing: subpixel-antialiased;}*/
	#section1 {height: 100%;}
	/*#maplink {display: block;}*/
	.tab-content {height: 100%;}
}
@media (max-width: 320px) {
	p, #section3 .span7 p {font-size: 1.2em; font-weight: normal;}
}