/* CSS Document */

body{
	background-color: #222;
	color: #333;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 400;
	margin: 0;
}

a, a:link, a:visited, a:active{
	color: #00456B;
	text-decoration: none;
}

a:hover{
	color: #627742;
	text-decoration: underline;
}

h1{
	color: #00456B;
	clear: both;
	font-size: 40px;
	margin: 0 0 20px 0;
	padding: 0;
	line-height: 100%;
	padding: 0;
	}
	
h2{
	color: #00456B;
	clear: both;
	font-size: 20px;
	font-weight: 400;
	margin: 0 0 20px 0;
	padding: 0;
	line-height: 100%;
	padding: 0;
	}
	
h3{
	color: #00456B;
	clear: both;
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 20px 0;
	padding: 0;
	line-height: 100%;
	padding: 0;
	}
	
img{
	border: 0;
	height: auto;
	max-width: 100%;
	}
	
p{
	line-height: 160%;
	font-weight: 400;
	margin: 0 0 20px 0;
	padding: 0;
	}
	
p.error-msg{
	background-color: #FF9494;
	color: #F00;
	padding: 7px;
	}
	
.clr{
	clear: both;
	}

#outerWrapper{
	background-color: #FFF;
	width: 100%;
	}

#topRow{
	border-top: 7px solid #607A3E;
	margin: 0;
	padding: 0;
	text-align: center;
	width: 100%;
	}
	
#topRow img{
	max-width: 530px;
	}	

#navRow{
	background-color: #00456B;
	}
	
#navCtr{
	margin: 0 auto 0 auto;
	max-width: 1200px;
	text-align: center;
	}
	
#navCtr ul{
	color: #FFF;
	display: inline-block;
	position: relative;
	margin: 0;
	}
	
 @media screen and (max-width: 850px){
	 #navCtr ul{
		display: none; 
	 }
 }
	
#navCtr ul li a{
	color: #FFF;
	display: block;
	padding: 23px 40px 23px 40px;
	}
	
#navCtr ul li{
	float: left;
	font-size: 14px;
	font-weight: 600;
	line-height: 100%;
	list-style-type: none;
	text-transform: uppercase;
	}
	
#navCtr ul li div.dropdown-menu{
	display: none;
	}
	
#navCtr ul li:hover div.dropdown-menu{
	background-color: #00456B;
	display: block;
	position: absolute;
	padding: 10px 0 20px 0;
	text-align: left;
	}
	
#navCtr ul li div {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}

#navCtr ul li:hover div {
  visibility: visible;
  opacity: 1;
}
	
#navCtr ul li:hover div a{
	display: block;
	padding: 10px 40px 10px 40px;
	width: 140px;
	}

#headerRow{
	background-color: #EEEEEE;
	padding: 35px 0 35px 0;
	}
	
#headerCtr{
	margin: 0 auto 0 auto;
	max-width: 1200px;
	}
	
@media screen and (max-width: 1250px){
	#headerCtr{
	padding: 0 2% 0 2%;
	width: 96%;
	}
}
	
#headerCtr h1{
	color: #00456B;
	font-size: 40px;
	font-weight: 300;
	margin: 0 auto 0 auto;
	max-width: 1200px;
}
	
#contentRow{
	min-height: 400px;
	padding: 40px 0 40px 0;
	width: 100%;
	}
	
#contentCtr{
	margin: 0 auto 0 auto;
	max-width: 1200px;
	}
	
@media screen and (max-width: 1250px){
	#contentCtr{
	padding: 0 2% 0 2%;
	width: 96%;
	}
}

#contentCtr ul{
	margin: 0 0 20px 0;
	}
	
#contentCtr  ul li{
	list-style-image: url('../_graphics/bullet.png');
	margin: 0;
	padding: 0 0 10px 0;
	}
	
#mapEmbed{
	position: relative;
	}
	
#mapCover{
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 2;
	}
	
#mapCover a{
	display: block;
	height: 100%;
	width: 100%;
	}
	
	
#footerRow{
	background-color: #333333;
	margin: 0;
	padding: 30px 0 20px 0;
	}

#footerRow a{
	color: #FFF;
	}
	
#footerRow p{
	color: #FFF;
	font-size: 14px;
	text-align: center;
	}
	
#footerCtr{
	margin: 0 auto 0 auto;
	max-width: 600px;
	}
	
div.footerContent{
	float: left;
	font-size: 14px;
	text-align: center;
	width: 50%;
	}
	
div.footerContent h2{
	color: #999;
	font-size: 17px;
	font-weight: 400;
	margin: 20px;
	}

#footerRow2{
	background-color: #222;
	margin: 0;
	padding: 30px 0 400px 0;
	}
	
@media screen and (max-width: 610px){
	#footerRow2{
		padding-bottom: 30px;
	}	
}
	
#footerRow2 p{
	color: #FFF;
	font-size: 13px;
	font-weight: 300;
	text-align: center;
	}
	
#footerRow2 p.webcreative{
	color: #999;
	margin: 60px 0 0 0;
	}

form{
	clear: both;
	display: block;
	margin: 0 0 20px 0;
	}
	
input[type="text"], input[type="password"]{
	border: 1px solid #9A9A9A;
	color: #333;
	display: block;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 300;
	padding: 5px 1% 5px 1%;
	-webkit-transition: border 0.5s linear;
	-moz-transition: border 0.5s linear;
	-ms-transition: border 0.5s linear;
	-o-transition: border 0.5s linear;
	transition: border 0.5s linear;
}

input[type="text"]:hover, input[type="password"]:hover{
	border: 1px solid #0F2753;
}

input[type="submit"]{
	background-color: #00456B;
	border: 1px solid #00456B;
	color: #FFF;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 400;
	margin: 0;
	min-height: 15px;
	-webkit-transition: background 0.5s linear;
	-moz-transition: background 0.5s linear;
	-ms-transition: background 0.5s linear;
	-o-transition: background 0.5s linear;
	transition: background 0.5s linear;
}

label{
	display: block;
	font-size: 14px;
	margin: 0 0 10px 0;
	}

select{
	-webkit-appearance: menulist;
	border: 1px solid #9A9A9A;
	color: #333;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 300;
	margin: 0 6px 0 0;
	padding: 4px;
	width: 100%;
}	

textarea{
	border: 1px solid #9A9A9A;
	color: #333;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 300;
	height: 100px;
	margin: 0 6px 0 0;
	padding: 5px 1% 5px 1%;
	-webkit-transition: border 0.5s linear;
	-moz-transition: border 0.5s linear;
	-ms-transition: border 0.5s linear;
	-o-transition: border 0.5s linear;
	transition: border 0.5s linear;
}

#contactForm label{
	display: inline-block;
	width: 20%;
	}
	
#contactForm input[type="text"]{
	border: 1px solid #80ABBE;
	display: inline-block;
	margin-bottom: 10px;
	width: 68%;
	}
	
#contactForm input[type="text"]:hover{
	border: 1px solid #333;
}
	
#contactForm textarea{
	border: 1px solid #80ABBE;
	display: inline-block;
	margin-bottom: 10px;
	width: 68%;
	vertical-align:top;
	}
	
#contactForm textarea:hover{
	border: 1px solid #333;
}
	
#contactForm input[type="submit"]{
	background-color: #00456B;
	padding-bottom: 5px;
	padding-top: 5px;
	width: 70%;
}

#contactForm input[type="submit"]:hover{
	border: 1px solid #333;
	background-color: #333;
}

#contactForm div.lt{
	float: left;
	width: 20%;
	}
	
#contactForm div.rt{
	float: left;
	width: 68%;
	}

.parallax-window {
	background-color:#39C;
    min-height: 400px;
    background: transparent;
}

#hmBannerTextRow{
	background-color: #333;
	padding-bottom: 35px;
	padding-top: 35px; 
	}
	
#hmBannerTextRowCtr{
	letter-spacing: -.3px;
	max-width: 1200px;
	margin: 0 auto 0 auto;
	text-align: center;
	}


@media screen and (max-width: 1250px){
	#hmBannerTextRowCtr{
		padding: 0 2% 0 2%;
		width: 96%;
	}
}

	
#hmBannerTextRowCtr p{
	color: #FFF;
	font-size: 19px;
	font-weight: 600;
	line-height: 120%;
	margin: 0;
	padding: 0;
	}
	
@media screen and (max-width: 850px){
	#hmBannerTextRowCtr p{
	font-size: 17px;
	font-weight: 600;
	line-height: 120%;
	}
}

.hm-text h1{
	color: #00456B;
	font-size: 25px;
	font-weight: 600px;
	letter-spacing: -.3px;
	text-align: center;
	text-transform: uppercase;
	}
	
.hm-text p{
	font-size: 16px;
	line-height: 140%;
	margin-bottom: 40px;
	text-align: center;
	}
	
@media screen and (max-width: 850px){
	.hm-text p{
	font-size: 15px;
	margin-bottom: 40px;
	text-align: center;
	}
}

div.hm-icon{
	float: left;
	margin: 0 1% 0 1%;
	text-align: center;
	width: 14%;
	}
	
div.hm-icon:hover img{
	opacity: .8;
	}
	
.hm-icon a:hover{
	text-decoration: none;
	}


.hm-icon a:hover span{
	background-color: #00456B;
	color: #FFF;
	text-decoration: none;
	}

.hm-icon a span{
	color: #00456B;
	display: block;
	font-size: 16px;
	font-weight: 600;
	line-height: 100%;
	margin-top: 0;
	padding: 5px;
	}
	
@media screen and (max-width: 1000px){
	div.hm-icon{
		margin: 0 7% 0 7%;
		min-height: 200px;
		width: 19%;
		}
		
	.hm-icon a span{
		font-size: 15px;
		}
}

@media screen and (max-width: 450px){
	div.hm-icon{
		margin: 0 5% 0 5%;
		min-height: 150px;
		width: 40%;
		}
		
	div.hm-icon img{
		width: 60%;
		}
}
	
#hmBanner{
	max-height: 700px;
	overflow: hidden;
}

#hmBanner img{
	margin-top: -250px;
}
	
@media screen and (max-width: 2000px){
	#hmBanner{
		max-height: 550px;
	}
	
	#hmBanner img{
		margin-top: -300px;
	}
}

@media screen and (max-width: 1800px){
	#hmBanner{
		max-height: 500px;
	}
}

@media screen and (max-width: 1600px){
	#hmBanner{
		max-height: 450px;
	}
	
	#hmBanner img{
		margin-top: -250px;
	}
}

@media screen and (max-width: 1400px){
	#hmBanner{
		max-height: 400px;
	}
	
	#hmBanner img{
		margin-top: -200px;
	}
}

@media screen and (max-width: 1200px){
	#hmBanner{
		max-height: 400px;
	}
	
	#hmBanner img{
		margin-top: -125px;
	}
}

@media screen and (max-width: 850px){
	#hmBanner{
		display: none;
	}
	
}
	
img.ri
{
	position: absolute;
	max-width: 80%;
	top: 10%;
	left: 10%;
	border-radius: 3px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.9);
}

img.ri:empty
{
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

@media screen and (orientation: portrait) {
  img.ri { max-width: 90%; }
}

@media screen and (orientation: landscape) {
  img.ri { max-height: 90%; }
}

 /* Dropdown Button */
.dropbtn {
	display: none;
}
 
 @media screen and (max-width: 850px){
.dropbtn {
    background-color: #00456B;
	border: none;
	color: white;
	cursor: pointer;
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 100%;
	padding: 23px;
	text-align: center;
	text-transform: uppercase;
}
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #00456B;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
	width: 100%;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #00456B;
    min-width: 160px;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: #FFF;
    padding: 0 0 12px 0;
	font-size: 12px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
	background-color: #00456B;
	text-decoration: underline;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
	display:block;
}

div.leftCol{
	float: left;
	margin: 0 5% 0 0;
	width: 61%;
	}
	
@media screen and (max-width: 850px){
	div.leftCol{
		float: none;
		width: 100%;
	}
}
	
div.rightCol{
	float: left;
	margin: 0;
	width: 34%;
	}
	
@media screen and (max-width: 850px){
	div.rightCol{
		display: none;
	}
}
	
div.contact-panel{
	background-color: #F1F1F1;
	margin: 0 0 20px 0;
	padding: 35px 0 20px 0;
	}
	
div.contact-image{
	float: left;
	padding: 0 5% 0 5%;
	width: 15%;
	}
	
div.contact-text{
	float: left;
	padding: 0 5% 0 0;
	width: 70%;
	}
	
img.portrait-right{
	float: right;
	margin: 0 0 20px 20px;
	}
	
@media screen and (max-width: 400px){
	img.portrait-right{
		width: 50%;
	}
}