@charset utf-8;
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,600);
@import url(http://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: url(../imgs/jpgs/bodyBg.jpg) repeat-x #eee;
	height: 100%;
	font-size:100%;
	font-family: 'Source Sans Pro', sans-serif;
	margin:0;
	padding:0}	
a:link {
	color: #3D5A87;
	text-decoration: underline}
a:visited {
	color: #3D5A87;
	text-decoration:underline}
a:hover,a:active,a:focus {
	color: #FC0;
	text-decoration:underline}

article {
	width: 100%;
	padding: 0;
	display: inline-block}
dl { margin: 0}
dl dt {
	font: 400 1em/1.1 'Source Sans Pro', sans-serif;
	margin-bottom: 16px;
	padding: 0;
	color: #333}
dl i {
	margin-right: 3%;
	color: #390}
footer {
	height: 200px;
	margin: 0 auto;
	padding: 2em 1em;
	border-top: solid 1px #3D5A87;
	clear: both}
footer address a:link {
	color: #3D5A87;
	text-decoration: none}
footer address a:visited {
	color: #3D5A87;
	text-decoration:none}
footer address a:hover,a:active,a:focus {
	color: #F90;
	text-decoration:none}
footer address .icon {
	float: right;
	margin: 0;
	clear: both}
footer h2 {
	font: 400 1.6em/1.2 "Source Sans Pro",sans-serif;
	margin: 0 0 16px 0;
	color: #3D5A87}
footer p {
	font: .9em/1.4 'Source Sans Pro', sans-serif;
	margin: 0 0 16px 0;
	color: #3D5A87}
footer address{
	width: 49%;
	display: inline-block}
footer img{
	width: 60%;
	display: inline-block;
	float: right}	
footer .social {
	font-size: 1.6em;
	margin-bottom: 10px}

h1 {
	font: 700 2.2em/1.1 'Source Sans Pro', sans-serif;
	text-transform: uppercase;
	width: 100%;
	margin: 0 0 1% 0;
	color: #222}
h2 {
	font: 600 1.8em/1.2 "Source Sans Pro",sans-serif;
	text-transform: uppercase;	
	margin: 0px 0px 3% 0;
	color: #222}
h3 {
	font: 400 1.3em/1.4 'Source Sans Pro', sans-serif;
	text-transform: uppercase;
	margin: 0 0 8px 0;
	color: #222}
h4 {
	font: 300 1.1em/1.4 'Source Sans Pro', sans-serif;
	margin: 3% 0 8px 0;
	color: #222}
		
header {
	width: 97%;
	display: inline-block;
	height: 196px;
	padding: 0 16px}
	header address {
		font-size: 1.1em;	
		width: 100%;	 
		display: inline-block;
		float: right;
		text-align: right}	
		header address a:link {
			color: #3D5A87;
			text-decoration: none}
		header address a:visited {
			color: #3D5A87;
			text-decoration:none}
		header address a:hover,a:active,a:focus {
			color: #F90;
			text-decoration:none}				
p {
	font: 1em/1.8 '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 #111A26;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow:  0 0 12px 0 #111A26;  /* Firefox 3.5 - 3.6 */
	box-shadow:  0 0 12px 0 #111A26;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */}

	.headLeft {
		display: inline-block; 
		width: 50%;
		padding: 0;
		margin-top: 4%}
			#mainLogo {
			width: 80%}
			#responsiveLogo {
			width: 65%;
			display: none !important }
					
	.headRight {
		display: inline-block; 
		width: 49%;
		text-align: right;
		margin-top: 4%;
		padding: 0}
			.email {
				display: inline-block;
				width: 100%;
				padding: 0 0 4% 0}
			.phone {
				display: inline-block;				
				width: 100%;
				padding: 0 0 4% 0}			
			.social {
				display: inline-block;				
				width: 100%;
				font-size: 1.6em}
				.twitter {margin: 0 3%}			
		
/*///////////////////////////// Main Content ////////////////////////////////*/ 	
	
	#backstretch { /*Background slideshow image*/  
		background: #fff; 
		border-top: 3px solid #3D5A87; 
		max-width:100%;
		height: 400px}
						
	.tab-container {
		position: relative}
			.etabs { 
				background: #3D5A87;
				border-top: 2px solid #3577A8;
				border-bottom: 2px solid #3577A8;	
				margin: 0; 
				padding-left: 20px}
			#etabs { 
				display: none}
				.tab {
					display: inline-block; 
					margin: 0;				
					height: 36px;
					*display:inline-block}
				.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: #3577A8;				
					text-decoration: none }
				.tab.active { 
					font: 400 1em/1.2 'Open Sans', sans-serif;
					background: #3577A8;
					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}
			
	.content {
		display: inline-block;
		background: #fff;
		width: 96%;
		margin: 2%}	
		.panel-container {
			background:#FFF;
			padding: 0px}
			.box {
				width: 96%;
				background:url(../imgs/pngs/boxBg.png) no-repeat #eee;
				display: inline-block;
				border-radius: 4px;
				border: 1px solid #ccc;
				margin: 0;
				padding: 20px}
				.bullets {
					width: 70%;
					display: inline-block;
					margin: 0;
					padding: 2% 0 0 0;
					vertical-align: top}
				.bulletsResponsive {display: none}	
				.clientsImg img {max-width: 100%}				
				.leftCircleImg {
					display: inline-block;
					margin: 0 4% 0 0;
					padding: 0 0 1% 0;
					max-width: 226px}
				.topCircleImg {
					display: inline-block;
					margin: 0 0 3% 0;
					padding: 0;
					max-width: 200px}	
				.topCircleImg img{
					max-width: 90%}	
				.pageCopy {
					width: 70%;
					display: inline-block;
					margin: 0;
					padding: 2% 0 0 0;
					vertical-align: top}					
				.careersForm{
					width: 94%;
					display: inline-block;
					background: #fff;
					padding: 3%;
					border-radius: 4px;
					border: 1px solid #eee;
					-webkit-box-shadow: 0 0 6px 0 #111A26;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
					-moz-box-shadow:  0 0 6px 0 #111A26;  /* Firefox 3.5 - 3.6 */
					box-shadow:  0 0 6px 0 #111A26;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */}
				.bulletsResponsive {display: none}
					 .leftBullets{
						background: #fff;
						border: 1px solid #ccc; 
						border-radius: 4px;
						padding: 2% 3%;
						margin-right: 2%;
						width: 28%;
						vertical-align: top;
						display: inline-block}
					 .rightBullets{
						background: #fff;					
						border: 1px solid #ccc; 
						border-radius: 4px;
						padding: 2% 3%;
						margin: 0;
						width: 56%;
						vertical-align: top;
						display: inline-block}

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

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

article {padding: 0}	
header {
	width: 100%;
	padding: 0;
	height: 310px;
}		
.headLeft {
	width: 100%;
	text-align: center;
	padding: 0;
	/* margin-top: 36px; */
}
.headLeft img{
	width: 50%}
			#mainLogo {display: none !important }
			#responsiveLogo {
			width: 50%;
			margin: 0 auto;
			display: inherit !important }				
.headRight {
	width: 100%;
	/* height: 76px; */
	padding: 0px 0 0 0;
}	
.headRight address {
	font-size: 1em;
	width: 100%;
	display: inline-block;
	text-align: center;
}				

#backstretch {
	background: #fff;
	border-top: 3px solid #3D5A87;
	max-width: 100%;
	height: 340px;
}
.content {
	width: 100%;
	margin: 0}
.panel-container {border-radius: 0}							 			
.box {
	width: 94.5%;
	border-radius: 0}			
.leftCircleImg {
	padding: 0 0 1% 0;

}
.pageCopy {
	width: 63%;
	padding: 0}
.bullets {
	width: 59%;
	border: 1px solid #ccc; 
	border-radius: 4px;
	padding: 2%;
	margin-top: 3%;
	background: #fff;
}	
.leftBullets {
	background: none;
	border: 0; 
	border-radius: 0;
	padding: 0; 
	margin-right: 8%;
	width: 38%;
	display: inline-block;
} 
.rightBullets {
	background: none;
	border: 0;
	border-radius: 0; 
	padding: 0;
	margin: 0;
	width: 53%;
	display: inline-block;
}
.topCircleImg {max-width: 164px}
.topCircleImg img {max-width: 80%}  }








@media screen and (max-width: 600px) {
	
article {padding: 0}
footer {height: 300px} 
footer address {
	width: 100%;
	text-align: center;
	display: inline-block}	
footer img {
	width: 40%;
	display: inline-block;
	float: none }	
header {
	width: 100%;
	padding: 0;
	height: 280px}		
.headLeft {
	width: 100%;
	text-align: center;
	padding: 0}
.headLeft img{
	width: 50%}
	#mainLogo {display: none !important }
	#responsiveLogo {
	width: 60%;
	margin: 0 auto;
	display: inherit !important }
		
.headRight {
	width: 100%;
	padding: 0px 0 0 0}	
.headRight address {
	font-size: 1em;
	width: 100%;
	display: inline-block;
	text-align: center}				

#backstretch {
	background: #fff;
	border-top: 3px solid #3D5A87;
	max-width: 100%;
	height: 340px}
.tab a {
	padding: 8px 42px;
	font-size: 1.1em;}	
.etabs { 
	display: none !important} 	
#etabs {
	display: inherit;
	background: #3D5A87;
	border-top: 2px solid #3577A8;
	border-bottom: 2px solid #3577A8;
	text-align: center;	
	margin: 0; 
	padding: 0}
.content {
	width: 100%;
	margin: 0}
.panel-container {
	text-align: center;
	border-radius: 0}							 			
.box {
	width: 92.9%;
	border-radius: 0}		
.leftCircleImg {
	padding: 0 0 1% 0}
.pageCopy {
	width: 100%;
	padding: 0}
.bullets {
	width: 96%;
	text-align: left;
	border: 1px solid #ccc; 
	border-radius: 4px;
	padding: 2%;
	margin-top: 3%;
	background: #fff}	
.leftBullets {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0 8% 0 6%;
	width: 34%;
	display: inline-block} 
.rightBullets {
	background: none;
	border: 0;
	border-radius: 0; 
	padding: 0;
	margin: 0;
	width: 46%;
	display: inline-block}
.topCircleImg {max-width: 164px}
.topCircleImg img {max-width: 80%}
#last {display: none !important}  }

@media screen and (max-width: 480px) {
h1 {font-size: 1.8em}
h2 {font-size: 1.4em}	
header {
	width: 100%;
	padding: 0;
	height: 240px}
#backstretch {height: 270px}	
.tab a {
	padding: 8px 24px;
	font-size: 1.1em}	
.box {
	width: 90%}
.bullets {display: none !important} 	
.bulletsResponsive {
	display: inherit;
	width: 100%;
	border: 1px solid #ccc; 
	border-radius: 4px;
	padding: 6% 0;
	margin-top: 3%;
	background: #fff}
#third {display: none !important}  
#last {display: none !important}  		 }


@media screen and (max-width: 320px) {
header {height: 240px}	
.headLeft {	margin: 6% 0}
#responsiveLogo {width: 94%}
.box {width: 85%}
	
}

[id^=pjWrapper] .form-control {
    height: 58px!important;
    border-radius: 0px!important;
}
#pjCF_container_1 .pjCF-button {
    background-color: #f90!important;
    border-radius: 0!important;
    border: 0!important;
    color: #fff!important;
    width: 12rem!important;
    padding: 14px 0!important;
}