@charset utf-8;
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700';

body, html {
	background: url(../imgs/jpgs/bodyBg.jpg) repeat-x #fff;
	height: 100%;
	font-size:100%;
	font-family: 'Source Sans Pro', sans-serif;
	margin:0;
	padding:0}
	
a:link {
	color: #543C6E;
	text-decoration: underline}
a:visited {
	color: #543C6E;
	text-decoration:underline}
a:hover,a:active,a:focus {
	color: #254E89;
	text-decoration:underline}
article {
	padding: 6% 0 0}	
footer {
	height: 14em;
	margin: 6% auto 0;
	padding: 2em 1em;
	border-top: solid 1px #19355D;
	clear: both}
footer address{
	width: 49.8%;
	display: inline-block;
	vertical-align: top}
footer address a:link {
	color: #271D34;
	text-decoration: none}
footer address a:visited {
	color: #271D34;
	text-decoration:none}
footer address a:hover,a:active,a:focus {
	color: #254E89;
	text-decoration:none}
footer .boxLeft {
	width: 100%;
	display: inline-block}
footer .boxLeft img {
	max-width: 38%;
	float: left;
	margin-right: 3%}
footer address .boxRight {
	margin: 0;
	clear: both;
	text-align: right}
footer h2 {
	font: 400 1.6em/1.2 "Source Sans Pro",sans-serif;
	margin: 0 0 3% 0;
	color: #271D34}
footer i {
	font-size: 1.6em}
footer p {
	font: 1em/1.4 'Source Sans Pro', sans-serif;
	margin: 0 0 1% 0;
	color: #271D34}


h1 {
	font: 600 2.6em/1.1 'Source Sans Pro', sans-serif;
	margin: 0 0 0 0;
	color: #fff;
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000}
h2 {
	font: 600 1.8em/1.2 "Source Sans Pro",sans-serif;
	margin: 0px 0px 8px;
	color: #271D34}
h3 {
	font: 400 1.6em/1.4 'Source Sans Pro', sans-serif;
	margin: 0 0 8px 0;
	color: #271D34}	
h4 {
	font: 400 1.2em/1.4 'Source Sans Pro', sans-serif;
	margin: 0 0 8px 0;
	color: #271D34}		
hr {	
	height: 1px;
	margin: 4% 0;
	border: none;
	background: #CAD9F0}	
p {
	font: 1em/1.6 'Source Sans Pro', sans-serif;
	margin: 0 0 10px 0;
	color: #333}
section {
	max-width: 64em;
	margin: 0 auto;
	background: #FFF;}

/*///////////////////////////// Masthead ////////////////////////////////*/ 
.wrapper {
	max-width: 64em;
	margin: 0 auto;
	-webkit-box-shadow: 0 0 12px 0 #0D1B31;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow:  0 0 12px 0 #0D1B31;  /* Firefox 3.5 - 3.6 */
	box-shadow:  0 0 12px 0 #0D1B31;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */}
	header {
		display: inline-block;
		border-bottom: 1px solid #19355D; 		
		overflow: auto;
		width: 98%;
		margin: 0;
		padding: 0 1%}
		.headLeft {
			display: inline-block;
			width: 52%;
			padding: 0;
			vertical-align: top;
			margin: 5% 0 5%}
		.headLeft img {
			max-width: 100%}
		.headLeft .logoResponsive {
			display: none}
		.headLeft .logoResponsive320 {
			display: none}										
		.headRight {
			display: inline-block;
			width: 47%;
			height: 96px;
			vertical-align: top;
			text-align: right;
			margin: 4% 0 0 0}
		.headRight address {
			font-size: 1.1em;	
			width: 100%;	 
			display: inline-block;
			float: right;
			text-align: right}							
			address a:link {
				color: #271D34;
				text-decoration: none}
			address a:visited {
				color: #271D34;
				text-decoration:none}
			address a:hover,a:active,a:focus {
				color: #254E89;
				text-decoration:none}
			.email {
				width: 100%;
				padding: 0 0 12px 0}
			.phone {
				width: 100%;
				padding: 0 0 12px 0}			
			.social {
				width: 100%;
				font-size: 1.6em}
			
		
/*///////////////////////////// Main Content ////////////////////////////////*/ 	
	#backstretch { /*Background slideshow image*/  
		background: #fff; 	 
		max-width:100%;
		height: 23em}
		.textBox {
			width: 56%;
			padding: 15% 0 0 3%}				
	.tab-container {
			background: #fff;
			position: relative}
		.tab {
			display: inline-block; 
			margin: 0;
			*display:inline}
		.tab a { 
			font: 400 .9em/1.2 'Open Sans', sans-serif;
			color: #fff;
			display: block; 
			padding: 10px 32px;
			outline: none;  
			text-decoration: none}
		.tab a:hover { 
			background: #254E89;				
			text-decoration: none }
		.tab.active { 
			font: 400 1em/1.2 'Open Sans', sans-serif;
			background: #254E89;
			padding: 0;
			margin: 0; 
			position: relative; 
			top: 0} 
		.tab a.active { 
			color: #fff;
			text-decoration:none}
			.tab-container ul { 
				max-width: 100%; 
				margin: 0; 
				padding: 0}
			.tab-container .etabs { 
				width: 100%;
				background: #19355D;
				border-top: solid 1px #fff;
				margin: 0; 
				padding: 0}
			.tab-container .etabs i { margin-right: 8px}				
			.tab-container #etabs { 
				display: none}	 				
			
		.leftCol {
			background: none;
			display: inline-block;
			width: 58%;
			margin: 0 0 0 4%;
			vertical-align: top}
		.leftCol img {
			max-width: 48%;
			float: left;
			border: 1px solid #CAD9F0;
			padding: 1%;
			margin: 1% 3% 0 0}				
		.panel-container {
			background:#FFF;
			padding: 0px}
			.panel-container .testimonial {
				border-bottom: 1px solid #CAD9F0;
				border-radius: 4px;
				padding: 2% 2% 1%;
				margin: 2% 0}
			.panel-container #testimonial {
				font: 400 1.2em/1.6  'Source Sans Pro', sans-serif ;
				font-style:italic !important;
				border: 1px solid #CAD9F0;
				border-radius: 4px;
				padding: 2% 8% 1%;
				color:#5C7DAF;
				margin: 6% 0}	
			.panel-container #testimonial p {
				color: #5C7DAF}								
			.bulletsContainer {
				overflow: auto;
				padding: 0;
				margin: 3% 3% 1%}				
				 dl {
					font: 400 1em/1.6  'Source Sans Pro', sans-serif;
					margin: 0}
					dl i {
						color: #390;
						margin-right: 6px}
					dl dt {
						margin-bottom: 16px;
						padding: 0;
						color: #333}
				.bulletsContainer .bullets{
					width: 100%;
					display: inline-block;
					vertical-align: top}						
				.bulletsContainer .leftBullets{
					width: 49%;
					display: inline-block;
					vertical-align: top}
				.bulletsContainer .rightBullets{
					width: 50%;
					display: inline-block;
					vertical-align: top}
				.responsivebulletsContainer {display: none}
																					 
		.rightCol {
			background: #fff;
			display: inline-block;
			width: 320px;
			border: 1px solid #CAD9F0;
			border-radius: 3px;
			margin: 3% 0 0 3%;
			padding-top: 10px;
			vertical-align: top}

	.contactUs {display: none}			
	.responsiveContactForm {
		display: none}	
 

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

@media screen and (max-width: 768px) {
article {padding: 5% 2%}

footer {height: 22em}			
footer address{	width: 100%}		
footer address .boxRight {
	margin: 0% 0 0 0;
	text-align: left;
	display: inline-block}
footer .boxLeft img {
	max-width: 24%;
	float: right;
	margin-right: 0}
			
h1 {font: 700 2.2em/1.1 "Open Sans",sans-serif}

.headLeft {
	width: 94%;
	text-align: center;
	padding: 0;
	margin: 5% 3%}
.headLeft img{
max-width: 100%}
.headLeft .logoNormal {display: none}				
.headLeft .logoResponsive {display: inline-block}	
.headLeft .logoResponsive320 {display: none}			
.headRight {
	width: 100%;
	padding: 0;
	margin: 0}	
.headRight address {
	font-size: 1em;
	display: inline-block;
	text-align: center}
					
.tab-container .etabs { display: none} 
.tab-container #etabs {	display: block}	
.tab-container #etabs {
	width: 100%;
	background: #19355D;
	display: inline-block; 
	border-top: solid 1px #fff;
	text-align: center}			
.tab a {
	font-size: 1.2em;
	padding: 10px 2em}
		
.leftCol {
	width: 100%;
	margin: 0;
	padding: 0}
	
.textBox {width: 66%}	

.panel-container {border-radius: 0}
							 			
.rightCol {display: none}
.rightCol img {display: none} 	

#pjCF_container_2 {padding: 0 6% !important}
.pjCF-form label.cf-heading {
	font-weight: bold;
	color: #222}									
	
.contactUs {
width: 92%;
padding: 3% 4%;
background: #19355D;
height: 24px;
clear: both;
display: inline-block}
.contactUs h3 {
font: 700 1.1em/1.3 'Open Sans', sans-serif;
width: 80%;
float: left;			 
color: #fff}
			 						
.responsiveContactForm {
width: 100%;		 
display: inline-block;
border-top: 1px solid #CAD9F0; 
background: #EEE;
padding: 3% 0;
margin: 0;
float: left}		}

@media screen and (max-width: 600px) {

	
h1 {font: 700 2em/1.1 "Open Sans",sans-serif}
h2 {font: 600 1.5em/1.2 "Open Sans",sans-serif}

.headLeft {	margin: 5% 3% 4%}

#backstretch  {height: 19.4em} 
	.textBox {
		width: 68%;
		padding: 16% 0 0 5%}	

#pjCF_container_2 {
	padding: 0px 4% !important}	
				
.tab.active {background: none} 
.tab a {
	padding: 13px 1.8em;
	font-size: 1.1em}
		
.bulletsContainer {
	overflow: auto;
	border: 1px solid #eee;
	border-radius: 4px;
	padding: 4% 2% 2%;
	margin: 2% 0}	
		
.responsiveContactForm {margin: 8px 0} }

@media screen and (max-width: 480px) {

p {
	font: .6em/1.6 'Source Sans Pro', sans-serif;
	margin: 0 0 10px 0;
	color: #333}
h1 {font: 700 1.8em/1.1 "Open Sans",sans-serif}
h2 {font: 600 1.6em/1.2 "Open Sans",sans-serif}	 
.headLeft img {width: 100%}
#backstretch  {height: 17em}
	.textBox {width: 84%}

.panel-container .bulletsContainer{display: none}
.responsivebulletsContainer {
	display: inline-block;
	margin: 0;
	padding: 2% 21%;
	text-align: left}

.tab a {
padding: 13px 36%;
font-size: 1.1em} }


@media screen and (max-width: 320px) {
footer {height: 27em}	
.headLeft img {max-width: 80%}
.headLeft .logoNormal {display: none}				
.headLeft .logoResponsive {display: none}	
.headLeft .logoResponsive320 {display: inline-block}	
h1 {font: 400 1.6em/1.0 'Open Sans', sans-serif}
h2 {font: 600 1.8em/1.2 "Open Sans",sans-serif} 	
p {	font-size: 1em}
 
#backstretch  {height: 14em}
	.textBox {width: 74%} 							
 		.leftCol img {
			max-width: 96%;
			margin-bottom: 3%}
.panel-container .bulletsContainer{display: none}

.responsivebulletsContainer {
	display: inline-block;
	margin: 0;
	padding: 2% 3%;
	text-align: left} }