@charset "UTF-8";
/* CSS Document */
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, menu, time, mark, audio, video {
  font-family: 'Roboto', sans-serif !important;
}
h1 {
  color: #003c71;
  /* font-size: 72px; */
  font-weight: 400;
  line-height: 1.2;
}
h2 {
  color: #003c71;
}
h3 {
  color: #6E6E6E !important;
}
p, ul li, ol li, input, a {
  color: #6E6E6E;
  font-size: 15px;
  font-weight: 400 !important;
  line-height: 1.5;
}
strong {
  font-weight: 700 !important;
}
.small {
  color: #888888 !important;
  font-size: 12px !important;
  line-height: 15px !important;
}
.copyright {
  font-size: 12px;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #6E6E6E !important;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #6E6E6E !important;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #6E6E6E !important;
}
:-moz-placeholder { /* Firefox 18- */
  color: #6E6E6E !important;
}
#site-footer {
  background-color: #444650 !important;
  border-top: 1px solid #cccccc;
}
#site-footer p {
  color: #eeeeee !important;
  font-size: 12px;
}
#site-footer a {
  color: #eeeeee !important;
  font-size: 12px;
}
#site-footer a:hover {
  color: #ffffff !important;
}
.jumbotron {
  background-image: url("../images/bg-hero.jpg");
  background-position: center left;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0px;
}
.form-group {
  margin-bottom: 0px !important;
}
/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/* --------------------- Small Devices --------------------- */
/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
@media only screen and (min-device-width : 320px) and (max-device-width : 479px) {
  .jumbotron {
    background-position: top left;
  }
  /* This class is used so that logos appear side by side on small devices and don't overlap each other */
  .logo {
    max-width: 140px;
  }
  h1 {
    font-size: 2.5em;
    line-height: 1.25;
  }
  h2 {
    font-size: 20px;
    line-height: 1.75;
  }
  h3 {
    margin-top: 40px;
    font-size: 1.25em;
    line-height: 1.5;
  }
  .lead {
    font-size: 16px;
    line-height: 1.75;
  }
  .longurl {
    word-wrap: break-word;
    max-width: 300px;
  }
  p, ul li, ol li, input, a {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
  }
  /* This class is used when a partner has two logos that need to display in the header - usually one logo is the partner's company logo and the other is the software logo. For mobile devices, only the software logo should be used. This is a pretty uncommon class to use. */
  .extra-logo {
    display: none !important;
  }
}
/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* --------------------- Tablet and Desktop --------------------- */
/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (min-device-width : 480px) and (max-device-width:959px) {
  .jumbotron {
    background-position: top left;
  }
  /* On small devices this makes it so you can't see the form background */
  .whiteopac {
    background-color: rgba(255, 255, 255, 0) !important;
  }
  /* since you can't see the form background on small and medium devices the text in the form area has to be inverted so it shows */
  form h2, form p, form p.small {
    color: white !important;
  }
}
@media only screen and (min-device-width : 960px) {
  h2 {
    font-size: 2em !important;
  }
  h3 {
    font-size: 1.5em !important;
    line-height: 1.5;
  }
  .whiteopac {
    background-color: rgba(255, 255, 255, 0.85) !important;
  }
}