@charset utf-8;
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,600);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700,600);
@import url(https://fonts.googleapis.com/css?family=Alegreya:400,700,400italic);
body, html {
background: #BBBDCE;
height: 100%;
font-size:100%;
font-family: 'Source Sans Pro', sans-serif;
margin:0;
padding:0}

/*///////////////////////////// Masthead section ////////////////////////////////*/ 

.wrapper {
	background: url(../imgs/pngs/bodyBg.png) no-repeat top center #D7D7E1;
	max-width: 64em;
	margin: 0 auto; }

	.header {
			height: 160px;
	}
		.header .logoContainer {
		max-width: 1004px;
		margin: 0 auto; 
		background: #152731;
		opacity:0.9;
		padding: 0}
			.header .logoContainer .logo {
			width: 50%;
			height: 120px;
			padding-top: 40px;
			float: left;
			display: inline} 			
			.header .logoContainer .logo #mainLogo {
			width: 100%}
			.header .logoContainer .logo #responsiveLogo {
			width: 65%;
			display: none !important }
			.header .logoContainer .logo #responsiveLogo320 {
			width: 100%;
			display: none !important }
			 .header .logoContainer .headerInfo {
			width: 50%;
			display: inline;
			float:right;
			vertical-align:top}				
			.header .logoContainer .address {			 
			display: inline;
			float:right;
			text-align: right;
			padding: 0 20px 0 20px;
			margin-top: 16px;
			border-left: 1px solid #eee;
			vertical-align:top}
			.header .logoContainer .address p {
			font: 1em/1.2 'Source Sans Pro', sans-serif;
			color: #666}	

			.header .logoContainer .contacts {		 
			display: inline;
			float: right;
			text-align: left;
			margin: 20px 40px 0 0;
			
			vertical-align:top}			
			.header .logoContainer .contacts a:link {
			color: #666;
			text-decoration: none}
			.header .logoContainer .contacts a:visited {
			color: #666;
			text-decoration:none}
			 .header .logoContainer .contacts a:hover,a:active,a:focus {
			color: #FC0;
			text-decoration:none}
				.header .logoContainer .contacts .email {
				width: 100%;
				padding: 0 0 12px 0}
				.header .logoContainer .contacts #email{		 
			    display: none}	
				.header .logoContainer .contacts .phone1 {
				width: 100%;
				padding: 0 0 12px 0}	
				.header .logoContainer .contacts .phone2 {
				width: 100%;
				padding: 0 0 12px 0}					
				.header .logoContainer .contacts .social {
				width: 100%}					
	 .menu {
	float: left;
	background: #152731;
	width: 100%}
	 .textBox {/*/////// wrapper for textbox over slideshow///////*/ 
	max-width: 984px;
	margin: 290px auto; 
	background: #152731;
	opacity:0.9;
	padding: 10px 20px 20px}	
	 .textBox h1 {
	font: 300 2.2em/1.2 'Source Sans Pro', sans-serif;
	margin: 0 0 0 0;
	padding: 0;
	color: #fff}	
	 .textBox h2 {
	font: 300 1.6em/1.2 'Source Sans Pro', sans-serif;
	color: #fff;
	padding: 0;
	margin: 0 0 0 0 }
		
#etabs {display: none}		
		
.tab {/* ---------- begin menu tabs ------------ */
					display: inline-block; 
					margin: 0 2px -1px 0;
					zoom:1; 
					*display:inline; 
					background: #fff; 
					-webkit-border-radius:  4px 4px 0px 0px;
					-moz-border-radius:  4px 4px 0px 0px;
					border-radius: 4px 4px 0px 0px}
					.tab a { 
					font: 300 1em/1.2 'Source Sans Pro', sans-serif;
					color: #666;
					line-height: 1.6em; 
					display: block; 
					padding: 0 14px; 
					outline: none;  
					text-decoration: none}
					.tab a:hover { text-decoration: none }
					.tab.active { 
					font: 400 1em/1.2 'Source Sans Pro', sans-serif;
					background: #fff; 
					padding-top: 0; 
					position: relative; 
					top: 0px; 
					-webkit-border-radius:  4px 4px 0px 4px;
					-moz-border-radius:  4px 4px 0px 4px;
					border-radius: 4px 4px 0px 0px}
					.tab a.active { 
					font-weight: bold; 
					color: #333;
					text-decoration:none}
					.tab-container ul .etabs {  
					margin: 0; padding: 0; } 
					.tab-container .panel-container {
					width: 42.5em;
					min-height: 615px;
					background: #fff; 
					padding: 16px 10px 10px 10px; 					
					-webkit-border-radius:  0px 4px 4px 4px;
					-moz-border-radius:  0px 4px 4px 4px;
					border-radius: 0px 4px 4px 4px }
					.tab-container .panel-container .homeContent img{
						width: 100%}	
					.tab-container .panel-container .contactContent img{
						width: 100%}
					 				
					.tab-container .panel-container .border {
						border: 1px solid #eee;
						border-radius: 4px;
						padding: 10px/* ---------- end menu tabs------------ */}
						
		
		
/*///////////////////////////// footer section ////////////////////////////////*/ 

footer {
max-width: 64em;
margin: 0 auto;
clear: both;
background: #152731}
	footer .innerWrapper {
	height: 200px;
	margin: 0 auto;
	padding: 2em 1em}
	footer .innerWrapper a:link {
	color: #ccc;
	text-decoration: none}
	footer .innerWrapper a:visited {
	color: #ccc;
	text-decoration:none}
	footer .innerWrapper a:hover,a:active,a:focus {
	color: #F90;
	text-decoration:none}
	footer .innerWrapper h2 {
	font: 300 1.6em/1.2 Georgia, "Times New Roman", Times, serif;
	margin-top: 0;
	color: #fff}
	footer .innerWrapper p {
	font: 300 1em/2.0 Georgia, "Times New Roman", Times, serif;
	color: #fff}
		footer .innerWrapper .footerLeft{
		width: 50%;
		display: inline;
		float: left}	
		footer .innerWrapper .footerRight{
		width: 50%;
		display: inline;
		float: right;
		text-align: right}	
	
/*///////////////////////////// Main Content ////////////////////////////////*/ 	
	.content {
	max-width: 64em;
	margin: 0 auto;
	color: #333; }
			.content a:link {
			color: #666;
			text-decoration: none}
			.content a:visited {
			color: #666;
			text-decoration:none}
			 .content a:hover,a:active,a:focus {
			color: #FC0;
			text-decoration:none}	
	
.content .fadein {
    position: relative;
    width: 100%;
	height: 270px;
    clear:left } 	
.content .fadein img {
     position: absolute;
     left: 0;
     top: 0;        
	 max-width: 100%;  
}	
.content .leftCol {
		position: relative;
		float: left;
		max-width: 99.6%;
		margin-left: .5em;
		z-index:100}
.leftCol dl {
font: 400 .9em/1.6  'Open Sans', sans-serif;
margin-top: 20px;
width: 80%}
.leftCol dl dt:before {
content: "\00BB\0020";
color: #F90}
.leftCol dl dt {
font: 600 1em/1.1 'Open Sans', sans-serif;
margin-bottom: 6px;
color: #333}
.leftCol dl dd {
font: 300 1em/1.6 'Open Sans', sans-serif;
margin: 0 0 16px 14px}	
.leftCol .turboContent dl {
font: 400 1em/1.6  'Open Sans', sans-serif;
width: 100%;
margin-top: 20px;}
.leftCol .turboContent dl dt:before {
content: normal}
.leftCol .turboContent dl dd {
font: 300 .9em/1.4 'Open Sans', sans-serif;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
margin: 0 10px 10px 0}
.leftCol .turboContent dl dd p {
clear: both}
.leftCol h1 {
font: 400 1.6em/1.1 'Open Sans', sans-serif;
margin: 0 0 10px 0;
color: #9F2F2F}
.leftCol h2 {
font: 400 1.3em/1.1 'Open Sans', sans-serif;
margin: 0 0 10px 0;
color: #223F5C}	
.leftCol h3 {
font: 400 1em/1.4 'Open Sans', sans-serif;
margin: 0 0 10px 0;
color: #3C556F}	
.leftCol p {
font: .9em/1.4 'Open Sans', sans-serif;
margin: 0 0 6px 0;
color: #333}

.content .rightCol {
		position: relative;
	    width: 18.2em;	
		float: right;
		background: #fff; 
		border-radius: 4px;
		margin:  25px .5em 0 0;
		z-index: 100}
			
.content .rightCol img{				
		max-width: 100%}			
.content .turbosmart {
	    width: 18.2em;	
		float: right;
		text-align: center; 
		margin:  12px .5em 0 0 }

.logos {
	 float: left;
	 max-width: 100%;
	 background: #eee;
	 margin-top: 10px
}
.logos img{
	 max-width: 100%
}    




/*///////////////////////////// Responsive css ////////////////////////////////*/ 	

@media screen and (max-width: 768px) {
		.header {
	height: 220px} 
		.header .logoContainer .logo  {
		width: 100%;
		height: 100px;
		padding-top: 10px;
		text-align: center}
			.header .logoContainer .logo #mainLogo {
			width: 100%;
			display: none !important }
			.header .logoContainer .logo #responsiveLogo {
			width: 80%;
			margin: 0 auto;
			display: inherit !important }
			.header .logoContainer .logo #responsiveLogo320 {
			width: 100%;
			display: none !important }	
			 .header .logoContainer .headerInfo {
				 width: 100%;
				 float: left}				
			.header .logoContainer .address {	
			display: none}
.header .logoContainer .contacts {		 
			float: left;
			width: 100%;
			padding: 0;
			margin: 30px 0 0 0;
			text-align: center}	
				.header .logoContainer .contacts .social {
				width: 100%;}	
				.header .logoContainer .contacts .email {
				width: 100%;
				padding: 0 0 8px 0}	
				.header .logoContainer .contacts .phone2 {
				width: 100%;
				padding: 0 0 8px 0}	
				.header .logoContainer .contacts .phone2 {
				width: 100%;
				padding: 0 0 8px 0}					
			 			
.content .fadein {
	height: 206px}
.content .leftCol {
	width: 99%}	
.tab-container .panel-container {
	width: 96.6%}

.content .rightCol {
	display: none}	
 	
}




	
@media screen and (max-width: 600px) {
	.header {
		height: 200px}
			.header .logoContainer .logo  {		
		height: 90px}
			.header .logoContainer .logo #responsiveLogo {
			width: 80%}	
.content .fadein {
	height: 160px}
.content .leftCol {
	width: 98.8%}	
 
.header .logoContainer .contacts {		 
			margin:  14px 0 0 0}	

		
}



@media screen and (max-width: 480px) {
	.header {
		height: 160px}
			.header .logoContainer .logo  {		
		height: 90px}	

.header .logoContainer .contacts {		 
			margin-top:  -14px}						
.content .fadein {
	height: 120px}
.content .leftCol {
	width: 97.5%} 

 
.leftCol p {
font-size: .9em}
.tab a { 
padding: 0 12px}

}


@media screen and (max-width: 320px) {
	.header {
		height: 140px}
			.header .logoContainer .logo  {		
		height: 70px;
		margin-top: 14px}		
			.header .logoContainer .logo #responsiveLogo {
			width: 98%}		
 .header .logoContainer .contacts {		 
			display: none}	
.etabs {display: none}
#etabs {display: inherit}
.tab-container .panel-container {
	width: 94.8%}	
.tab a { 
padding: 4px 20px}
 
.content .leftCol {
		margin-top: -40px;
		max-width: 99%;
		margin-left: 0}
.leftCol h1 {
font: 400 1.8em/1.1 'Alegreya', serif}		
.leftCol dl dt {
font: 700 1.1em/1.1 'Alegreya', serif;
margin-bottom: 4px}	
 	
	footer .innerWrapper h2 {
	font: 300 1.2em/1.2 Georgia, "Times New Roman", Times, serif}	
.content .fadein {
	display: none}
		footer .innerWrapper .footerLeft {
		width: 100%;
		float: left; 
		text-align: left}	
		footer .innerWrapper .footerRight{
		width: 100%;	
		float: left;	 
		text-align: left}	 

}