/**
 * Defaults and Resets
 */
html {font-size: 62.5%; -webkit-text-size-adjust: none;}

html, body {margin: 0; padding: 0; background: #fff;}

body {font-family: 'Lato', Arial, Verdana, Sans-Serif; font-size: 17px; line-height: 24px; color: #3f3f3f;}

form {margin: 0; padding: 0;}

img {border: 0;}

td {vertical-align: top;}

p {margin: 0 0 30px 0;}

h1 {margin: 0 0 20px 0; font-size: 36px; line-height: normal;}
h2 {margin: 0 0 15px 0; font-size: 22px;}
h3 {margin: 0 0 20px 0; font-size: 17px;}

a {color: #04549a;}
a:hover {color: #000;}

/**
 * General
 */
.clearBoth, .clear {clear: both; height: 0px; font-size: 1px; line-height: 0px; display: block;}
.clearfix {zoom: 1;}
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.hidden {height: 1px; left: -10000px; overflow: hidden; position: absolute; top: auto; width: 1px;}

a#skip,
a#skip:hover,
a#skip:visited {position: absolute; left: 0px; top: -500px; width: 1px; height: 1px; overflow: hidden;} 

a#skip:active,
a#skip:focus {position: static; width: auto; height: auto;}

nav ul {margin: 0; padding: 0; list-style-type: none;}

.box-sizing {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

/**
 * Layout
 */
#master {min-width: 320px;}

#header > div {min-height: 115px; position: relative; overflow: visible; padding: 30px 20px 15px 20px;}
#header #logo {position: absolute; top: 30px; left: -50px; max-width: 302px; display: block;}
#header #logo img {display: block; width: 100%; max-width: 100%;}
#header #toggle-menu {position: absolute; top: 20px; right: 20px; display: none; width: 58px; height: 42px; background: url(../images/menu.png) no-repeat center center; font-size: 1px; line-height: 1px; text-indent: -10000px;}
#header #nav {position: absolute; top: 88px; right: 20px; font-size: 16px; line-height: normal;}
#header #nav li {float: left; margin: 0 0 0 60px; position: relative;}
#header #nav li.on:after {position: absolute; content: ""; width: 10px; height: 10px; border-radius: 50%; background: #75a966; top: -20px; left: 50%; margin-left: -5px;}
#header #nav a {color: #2a5e8b; text-decoration: none;}
#header #nav a:hover {color: #000;}
#header #nav .close {display: none;}

#hero {height: 290px; overflow: hidden; position: relative; text-align: center;}
#hero .photo {position: absolute; top: 0; left: 0; width: 100%;}
#hero .photo img {display: block; width: 100%; min-width: 1230px; min-height: 600px;}
#hero .dots {max-width: 1130px; margin: 0 auto; position: relative; padding: 0 20px;}
#hero .dots img {display: block; width: 100%; max-width: 464px; float: right;}

#footer {text-align: center; font-size: 13px; line-height: 18px; color: #476a95; border-top: 1px solid #e0e3ec;}
#footer .tagline {font-size: 17px; color: #000; font-style: italic;}
#footer a {color: #476a95; text-decoration: none;}
#footer a:hover {color: #000;}
#footer span {margin: 0 5px;}

.section > div {max-width: 980px; margin: 0 auto; overflow: hidden; padding: 30px 20px;}

.section.blue {background: #40638a; color: #fff; font-size: 18px;}
.section.blue a {color: #fff;}
.section.blue a:hover {color: #000;}

.section.call-to-action {background: #6e8d56; color: #fff; font-size: 22px; text-align: center;}
.section.call-to-action > div {padding: 20px;}
.section.call-to-action a {color: #fff;}
.section.call-to-action a:hover {color: #000;}

/**
 * Miscellaneous
 */
#pageslide {display: none; position: absolute; position: fixed; top: 0; height: 100%; z-index: 999999; width: 200px; padding: 0; background-color: #333; color: #FFF; -webkit-box-shadow: inset 0 0 5px 5px #222; -moz-shadow: inset 0 0 5px 5px #222; box-shadow: inset 0 0 5px 5px #222;}
#pageslide #nav {font-size: 14px;}
#pageslide #nav li {border-bottom: 1px solid #5C5C5C;}
#pageslide #nav a {padding: 10px 20px; color: #fff; font-weight: bold; display: block; text-decoration: none;}
#pageslide #nav li a:hover {background: #6a6a6a;}

.columns {overflow: hidden;}
.columns .col {float: left; padding: 0 70px 0 0; width: 50%;}
.columns .col > div {}
.columns.three-wide .col {width: 33.33%; padding-right: 60px;}

.columns.services .col > div {background: url(../images/services-icon.png) no-repeat center bottom; min-height: 340px; padding-bottom: 125px;}
.columns.services .staffing > div {background-image: url(../images/staffing-icon.png);}
.columns.services .support > div {background-image: url(../images/support-icon.png);}

.flex-right .left {float: left; width: 210px;}
.flex-right .right {float: right; width: 100%; margin-left: -210px; position: relative;}
.flex-right .right > div {margin-left: 210px;}

form .flex-right .left {width: 110px;}
form .flex-right .right {margin-left: -110px;}
form .flex-right .right > div {margin-left: 110px;}

.profile .left img {border-radius: 50%;}

.intro {font-size: 20px; line-height: 26px;}

.contact-info p {margin: 0 0 10px 0;}
.contact-info a[href^="mailto"] {text-transform: uppercase;}

/**
 * Forms
 */
form.form {width: 100%;}
form.form .row {padding: 0 0 5px 0;}
form.form .label {float: left; width: 90px;}
form.form .field {float: left; width: 190px;}

input[type="text"],
input[type="email"],
select,
textarea {font-family: Arial, Verdana, Sans-Serif; font-size: 12px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-width: 0; padding: 10px;}

form .row {margin: 0 0 5px 0;}
form .submit input[type="submit"] {float: right;}

input[type="submit"] {cursor: pointer; -webkit-appearance: none; border-radius: 0; background: #a1abc5; font-family: 'Lato', Arial, Verdana, Sans-Serif; font-weight: bold; font-size: 18px; padding: 8px 25px; border-radius: 20px; border-width: 0;}
input[type="submit"]:hover {background: #7a92ad;}

@media only screen and (max-width: 75em) { /* 1200px */
}

@media only screen and (max-width: 71.875em) { /* 1150px */

	#header #logo {left: 20px;}
}

@media only screen and (max-width: 68.75em) { /* 1100px */
}

@media only screen and (max-width: 65.625em) { /* 1050px */
}

@media only screen and (max-width: 62.5em) { /* 1000px */
}

@media only screen and (max-width: 59.375em) { /* 950px */
}

@media only screen and (max-width: 56.25em) { /* 900px */
}

@media only screen and (max-width: 53.125em) { /* 850px */
}

@media only screen and (max-width: 50em) { /* 800px */

	#header > div {min-height: 1px;}
	#header #logo {position: relative; top: auto; left: auto;}
	#header #nav {display: none;}
	#header #toggle-menu {display: block;}

	.columns .col,
	.columns.three-wide .col {float: none; width: 100%; padding: 0; margin: 0 0 20px 0;}
	
	.columns.services .col > div {min-height: 125px; padding: 0 0 0 145px; background-position: left top; margin: 0 0 40px 0;}
	
	.flex-right .left,
	.flex-right .right,
	form .flex-right .left,
	form .flex-right .right  {float: none; width: 100%; margin: 0;}
	.flex-right .right > div,
	form .flex-right .right > div {margin: 0;}	
	
	.profile .left {float: left; margin: 0 20px 20px 0; width: 180px; padding: 0;}
	
}

@media only screen and (max-width: 46.875em) { /* 750px */
}

@media only screen and (max-width: 43.75em) { /* 700px */

}

@media only screen and (max-width: 40.625em) { /* 650px */
}

@media only screen and (max-width: 37.5em) { /* 600px */
}

@media only screen and (max-width: 34.375em) { /* 550px */
}

@media only screen and (max-width: 31.25em) { /* 500px */

	#header #logo {width: 60%;}
	
	.columns.services .col > div {min-height: 1px; padding: 125px 0 0 0; background-position: center top;}
	
	.profile .left {float: none; width: 100%;}
	
}

@media only screen and (max-width: 28.125em) { /* 450px */
}

@media only screen and (max-width: 25em) { /* 400px */
}

@media only screen and (max-width: 21.875em) { /* 350px */
}

@media only screen and (max-width: 18.75em) { /* 300px */
}