body {
  font-family: 'Raleway', sans-serif;
  font-weight: 700; }

h2 {
  color: #00315c;
  font-size: 33px;
  line-height: 44px;
  width: 900px;
  display: block;
  padding: 60px 0 30px;
  margin: 0 auto;
  box-sizing: border-box; }

p {
  font-size: 20px;
  font-weight: 500;
  line-height: 34px;
  display: block;
  width: 750px;
  margin: 0 auto; }

.w800 {
  width: 800px;
  margin: 0 auto; }

nav {
  text-align: center;
  height: 110px; }
  nav a {
    font-size: 20px;
    text-transform: uppercase;
    color: #00315c;
    text-decoration: none;
    padding: 0 20px;
    line-height: 110px;
    cursor: pointer; }

#hero-outter {
  background-color: #00315c; }

#hero {
  height: auto;
  background-image: url(../img/hero-large.jpg);
  background-position: center center;
  background-size: cover; }
  #hero img {
    height: auto;
    width: 45%;
    margin: 0 auto;
    display: block;
    padding-top: 120px;
    padding-bottom: 120px; }

#suc {
  font-size: 22px;
  color: #00315c;
  background: #c3e0ed;
  padding: 20px; }

#sub-head {
  background: #c3e0ed;
  text-align: center; }
  #sub-head h2 {
    padding-bottom: 60px; }

#about {
  text-align: center;
  padding: 100px 0; }
  #about img {
    width: 800px;
    height: auto;
    margin: 0 auto 60px; }

#partners {
  padding: 100px 0;
  background-color: #dbdbdb;
  text-align: center; }
  #partners img {
    float: left;
    padding-right: 50px;
    width: 190px;
    height: auto; }
  #partners h2 {
    margin: 0;
    padding: 0;
    padding-top: 10px;
    width: auto; }
  #partners img.part {
    float: none;
    padding-right: 0;
    display: inline-block;
    padding: 60px 30px 0;
    width: auto; }

#work-with-us {
  padding: 100px 0;
  text-align: center; }
  #work-with-us h2 {
    text-transform: uppercase; }
  #work-with-us form .row {
    width: 600px;
    display: block;
    margin: 0 auto 10px; }
  #work-with-us form input {
    padding: 12px; }
  #work-with-us form .f1 input {
    width: 49%;
    display: block;
    box-sizing: border-box;
    float: left; }
  #work-with-us form input.fn {
    margin-right: 1%; }
  #work-with-us form input.ln {
    margin-left: 1%; }
  #work-with-us form .f2 input {
    width: 100%;
    display: inline-block;
    box-sizing: border-box; }
  #work-with-us form .f3 span.lbl {
    width: 51%;
    display: block;
    float: left;
    padding: 0;
    border: 0;
    text-align: left;
    padding-left: 12px;
    box-sizing: border-box;
    font-size: 18px;
    line-height: 48px;
    color: #00315c; }
  #work-with-us form .f3 span.phn {
    width: 49%;
    display: block;
    float: left;
    box-sizing: border-box;
    text-align: right; }
  #work-with-us form .f3 input {
    width: 30%;
    display: block;
    box-sizing: border-box;
    float: left;
    margin: 0; }
  #work-with-us form .f3 span.symbol {
    width: 5%;
    display: block;
    box-sizing: border-box;
    float: left;
    margin: 0;
    text-align: center;
    line-height: 48px; }
  #work-with-us form .f4 input {
    width: 49%;
    display: block;
    box-sizing: border-box;
    float: left; }
  #work-with-us form input.zp {
    margin-right: 1%; }
  #work-with-us form input.sbmt {
    margin-left: 1%;
    padding: 12px;
    background: #00315c;
    border: 1px solid #00315c;
    color: #fff;
    text-transform: uppercase;
    box-sizing: border-box; }

footer {
  background: #00315c; }
  footer img {
    width: 200px;
    height: auto;
    margin: 20px auto 0;
    display: block;
    padding-bottom: 100px; }
  footer nav {
    text-align: center;
    height: 110px; }
    footer nav a {
      font-size: 20px;
      text-transform: uppercase;
      color: #ffffff;
      text-decoration: none;
      padding: 0 20px;
      line-height: 110px;
      cursor: pointer; }

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@-moz-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
.fade-in {
  opacity: 0;
  /* make things invisible upon start */
  -webkit-animation: fadeIn ease-in 1;
  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;
  -webkit-animation-fill-mode: forwards;
  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s; }

.fade-in.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s; }

.fade-in.two {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  animation-delay: 1.2s; }

nav#mobile {
  display: none; }

@media only screen and (max-width: 900px) {
  body {
    font-family: 'Raleway', sans-serif;
    font-weight: 700; }

  h2 {
    color: #00315c;
    font-size: 23px;
    line-height: 32px;
    width: 90%;
    display: block;
    padding: 60px 0 30px;
    margin: 0 auto;
    box-sizing: border-box; }

  p {
    font-size: 20px;
    font-weight: 500;
    line-height: 34px;
    display: block;
    width: 75%;
    margin: 0 auto; }

  .w800 {
    width: 90%;
    margin: 0 auto; }

  nav {
    text-align: center;
    height: 110px; }
    nav a {
      font-size: 20px;
      text-transform: uppercase;
      color: #00315c;
      text-decoration: none;
      padding: 0 20px;
      line-height: 110px;
      cursor: pointer; }

  #hero-outter {
    background-color: #00315c; }

  #hero {
    height: auto;
    background-image: url(../img/hero-large.jpg);
    background-position: center center;
    background-size: cover; }
    #hero img {
      height: auto;
      width: 70%;
      margin: 0 auto;
      display: block;
      padding-top: 150px;
      padding-bottom: 50px; }

  #sub-head {
    background: #c3e0ed;
    text-align: center; }
    #sub-head h2 {
      padding-bottom: 60px; }

  #about {
    text-align: center;
    padding: 60px 0; }
    #about img {
      width: 90%;
      height: auto;
      margin: 0 auto 60px; }

  #partners {
    padding: 60px 0;
    background-color: #dbdbdb;
    text-align: center; }
    #partners img {
      float: none;
      padding-right: 0;
      margin: 0 auto;
      margin-bottom: 30px; }
    #partners h2 {
      margin: 0;
      padding: 0;
      padding-top: 10px;
      width: auto; }
    #partners img.part {
      float: none;
      padding-right: 0;
      display: inline-block;
      padding: 60px 30px 0; }

  #work-with-us {
    padding: 60px 0;
    text-align: center; }
    #work-with-us h2 {
      text-transform: uppercase; }
    #work-with-us form .row {
      width: 80%;
      display: block;
      margin: 0 auto 10px; }
    #work-with-us form input {
      padding: 12px; }
    #work-with-us form .f1 input {
      width: 100%;
      display: block;
      box-sizing: border-box;
      float: none; }
    #work-with-us form input.fn {
      margin-right: 0%;
      margin-bottom: 10px; }
    #work-with-us form input.ln {
      margin-left: 0%; }
    #work-with-us form .f2 input {
      width: 100%;
      display: inline-block;
      box-sizing: border-box;
      margin-bottom: 0; }
    #work-with-us form .f3 span.lbl {
      width: 100%;
      display: block;
      float: none;
      padding: 0;
      border: 0;
      text-align: center;
      padding-left: 0px;
      box-sizing: border-box;
      font-size: 14px;
      line-height: 48px;
      color: #00315c; }
    #work-with-us form .f3 span.phn {
      width: 100%;
      display: block;
      float: left;
      box-sizing: border-box;
      text-align: right; }
    #work-with-us form .f3 input {
      width: 30%;
      display: block;
      box-sizing: border-box;
      float: left;
      margin: 0; }
    #work-with-us form .f3 span.symbol {
      width: 5%;
      display: block;
      box-sizing: border-box;
      float: left;
      margin: 0;
      text-align: center;
      line-height: 48px; }
    #work-with-us form .f4 input {
      width: 49%;
      display: block;
      box-sizing: border-box;
      float: left; }
    #work-with-us form input.zp {
      margin-right: 1%; }
    #work-with-us form input.sbmt {
      margin-left: 1%;
      padding: 12px;
      background: #00315c;
      border: 1px solid #00315c;
      color: #fff;
      text-transform: uppercase;
      box-sizing: border-box; }

  footer {
    background: #00315c; }
    footer img {
      width: 200px;
      height: auto;
      margin: 20px auto 0;
      display: block;
      padding-bottom: 100px; }
    footer nav {
      text-align: center;
      height: 110px;
      padding-top: 30px; }
      footer nav a {
        font-size: 20px;
        text-transform: uppercase;
        color: #ffffff;
        text-decoration: none;
        padding: 0 20px;
        line-height: 30px;
        cursor: pointer;
        display: block; }

  nav#top {
    display: none; }

  nav#mobile {
    background-color: rgba(0, 19, 36, 0.85);
    box-shadow: 0;
    height: auto;
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 8675309; }

  /*
  Top black bar that holds the toggle button
  */
  nav#mobile #toggle-bar {
    background: #00315c;
    line-height: 110px;
    height: 110px; }

  /*
  Toggle button #1 ("Menu")
  */
  nav#mobile strong a {
    margin-left: 0px;
    border: 0px solid #fff;
    padding: 0px;
    color: #fff;
    text-decoration: none;
    font-size: 28px; }

  /*
  Toggle button #2 ("Navicon")
  */
  nav#mobile .navicon {
    float: right;
    height: 6px;
    width: 15px;
    margin: 35px 20px 20px;
    border-top: 18px double #fff;
    border-bottom: 6px solid #fff;
    font-size: 0; }

  /*
  The dropdown menu
  */
  nav#mobile ul {
    clear: both;
    list-style: none;
    margin: 0;
    padding: 0; }

  nav#mobile ul li {
    clear: both;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #c3e0ed; }

  nav#mobile ul li a {
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    z-index: 9; }

  nav#mobile ul ul {
    font-size: small; }

  nav#mobile ul ul li {
    margin-left: 30px; }

  nav#mobile ul ul a {
    background-color: #F4E9D8;
    padding-left: 8px; }

  nav#mobile ul ul a:before {
    content: "2192";
    padding-right: 8px; }

  nav#mobile #logo-res {
    padding-top: 0px;
    height: 60px;
    float: left;
    padding: 20px; } }