@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Cardo);
@import url(https://fonts.googleapis.com/css?family=Poppins:400,500,600,300);

body {
  background: #000;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #333;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cardo', serif;
  font-weight: 400;
  color: #333;
}

h1 {
  letter-spacing: -1px;
}

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

div#wrapper {
  background: #FFF;
}

.navArea {
  margin: 0;
  padding: 0;
  background: #FFFFFF url(../img/bg_blueGradLine.jpg) bottom repeat-x;
}

ul#mainNav {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: right;
}

ul#mainNav li {
  display: inline;
  font-size: 1.5em;
  font-weight: 300;
}

ul#mainNav li a {
  text-decoration: none;
  padding: .2em .5em;
  color: #069;
}

ul#mainNav li a:hover {
  color: #39C;
}

.button {
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: #FFF;
}

.hero {
  padding: 120px 5px;
  background: #FFF url(../img/bg_hero_oyster.jpg) center no-repeat;
}

.hero h1, .projects h1, .application h1 {
  margin: 0;
  padding: 0;
  line-height: 100%;
  font-size: 60px;
}

.hero h3 {
  margin: 0;
  padding: 10px 110px 20px 110px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 20px;
}

.hero .button {
  font-size: 30px;
}

.projects {
  padding: 60px 5px;
  background: #F7F7F7;
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}

.projects h3 {
  margin: 0;
  padding: 10px 0px 30px 0px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 20px;
}

.projects ul li {
  padding-bottom: 50px;
}

.projects .button {
  font-size: 24px;
}

.greyBordered {
  background: #F7F7F7;
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}

.application {
  background: #718da6 url(../img/bg_longisland.jpg) fixed center no-repeat;
  color: #FFF;
}

.application h2, .application h3, .application h4, .application h5, .application h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  color: #FFF;
  line-height: 130%;
}

.application h1 {
  color: #FFF;
}

.application h3 {
  margin: 0;
  padding: 30px 0px 30px 0px;
  font-size: 20px;
}

.application .button {
  font-size: 2em;
}

.info {
  background: #004565;
  color: #FFF;
}

.info h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  color: #FFF;
}

.teamBG {
  background: url(../img/bg_team.jpg) center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.teamBG h1, .teamBG h2, .teamBG h3, .teamBG h4, .teamBG h5, .teamBG h6 {
  color: #FFF;
}

footer {
  padding: 20px 5px 40px 5px;
  background: #000;
  font-family: 'Cardo', serif;
  font-size: 12px;
  font-weight: 300;
  color: #999;
}

footer a {
  color: #999;
  text-decoration: none;
}

.pad20 {
  padding: 20px 0px;
}

.pad30 {
  padding: 30px 0px;
}

.pad40 {
  padding: 40px 0px;
}

.pad5 {
  padding: 50px 0px;
}

.pad60 {
  padding: 60px 0px;
}

.text12 {
  font-size: 12px;
}

.text16 {
  font-size: 1.15;
}

.text18 {
  font-size: 1.275em;
}

.text19 {
  font-size: 1.385em;
}

.text20 {
  font-size: 1.5em;
}

/* max-width 640px, mobile-only styles, use when QAing mobile issues */

@media only screen and (max-width: 40em) {
.navArea {
  display: none;
}
.hero {
  padding: 30px 5px;
  background: #FFF;
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}
.hero h1, .projects h1, .application h1 {
  margin: 0;
  padding: 0;
  line-height: 100%;
  font-size: 2.5em;
}
.hero h3 {
  margin: 0;
  padding: 10px 20px 20px 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 1.2em;
}
.hero .button, .projects .button {
  font-size: 1.5em;
}
.projects h3 {
  margin: 0;
  padding: 10px 0px;
  font-family: 'Poppins', sans-serif;
  font-size: 1.2em;
}
.application {
  background-color: #718da6;
  background-image: none;
}
.info {
  background-image: none;
}
}