body {
    margin: 0;
    padding: 0;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 20px;
  }

  header nav {
    text-align: right;
    background: rgba(122,102,57,0.9);
    color: white;
    font-size: .7em;
    position: fixed;
    width: 100%;
  }
  header nav a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    padding:1em 1.2em;
    margin: 3.5em 0 0;
    -webkit-transition: all .3s ease-in;
  }
  .small {
    padding: 1em 1.2em;
    margin: 0;
  }
  header nav a:hover {
    text-decoration: underline;
  }

  .active {
    background: rgba(255,255,255,0.3);
  }

  .sectionBG {  
    background-image:  url('images/office2.jpg');
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    text-align: center;
  }
  .sectionBG.use-cases {
  }
  .sectionBG.analytics {
    background-image: url('images/canyon.jpg');
  }
  .sectionBG.experience {
    background-image: url('images/court.jpg');
  }
  .sectionBG h2, #bail-bonds h2, .sectionBG h3 {
    color: white;
    font-weight: normal;    
    font-size: 1.5em;
    padding: 2em 0;
    margin: 0;
    text-shadow: 0 0 10px black;
    background: rgba(0,0,0,0.6);
  }
  #bail-bonds h2 {
    padding: 4.5em 0 0;
  }
  #bail-bonds a {
    color:#fff; 
    text-decoration:none;
  }
  .sectionBG h3 {
    font-size:.75em; 
    padding:0 0 4em;
  }

  .info {
    background: #f4f2ec url('images/bg_texture.jpg') repeat;
    color: #777;
    padding: 1em 7%;
  }

  .info a {
    color:#777; 
    text-decoration:none;
  }

  .button, input[type="submit"] {
    text-align: center;
    cursor: pointer;
  }
  .button a, input[type="submit"] {
    display: inline-block;
    padding: 1em 1.5em;
    color: #FFFAF0;
    border-radius: 8px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .15em;
    word-spacing: .25em;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    background: #be6610;
    font-size: .75em;
    margin: 20px 0;
  }
  .button a:hover, input:hover[type="submit"] {
    color: #FFFAF0;
    background: #be6610;
  }

  input[type="submit"] {
    font-size: .75em;
    border: 0;
    -webkit-appearance: none;
  }

  input[type="text"], select {
    border-radius:3px; 
    box-shadow: none; 
    border: 2px solid #ddd; 
    padding: 10px; 
    font-size:0.8em;
    width: 100%;
  }


  .button a {
    display: none;
  }
  
  .button a.call {
    display: block;
  }

  form ul {
    padding: 0; 
    margin: 0 0 20px;
  }
  form li {
    list-style: none; 
    padding: 5px 0; 
  }
  label {
    display: none; 
  }

  footer.info {
    color: #FFF;
    background: #1f1f1f;
    padding: 0 auto;
    text-align: center;
  }

  footer ul {
    margin:0 auto 70px; 
    padding:0; display: 
    block; 
    width: 320px;
  }
  footer li {
    font-weight: bold; 
    display: block; 
    float: left; 
    list-style: none; 
    margin: 0 30px 0 0;
  }
  footer ul ul {
    width:auto;
  }
  footer li li {
    border-top:1px solid #fff; 
    font-weight: normal; 
    padding: 10px; 
    margin:0;
  }

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

  footer a:hover, footer a:active {
    text-decoration: underline;
  }

  nav img {
    z-index: 1000;
    height: 2.5em;
    position: absolute;
    left: 10px;
    top: 10px;
    transition: all 0.5s linear;
    width:95%;
  }

  .move {
    top: -60px;
  }

  nav span {
    display: none;
    position: absolute;
    left: 10px;
    top: 10px;
    font-weight: bold;
    transition: all 0.5s ease-in;
  }

  .movetext {
    top: -35px;
  }

  img.social {
    z-index:auto; 
    height:auto; 
    position: relative; 
    left: auto; 
    top: 5px; 
    margin: 0 5px;
  }

  .cf:before,
  .cf:after {
      content: " "; /* 1 */
      display: table; /* 2 */
  }

  .cf:after {
      clear: both;
  }
@media screen and (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ 
  header nav a {    
    padding:1em;
  }
  .small {padding:1em; margin:0;}
}
@media screen and (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media screen and (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media screen and (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ 
  header nav {
    font-size:1em;
  }
  header nav a {
    padding: 2em 1em .5em;
    margin:0;
  }
  nav img {
    left: 40px;
    width:auto;
  }
  nav span {
    display: inline-block;
    left:10px;
  }
  .small {
    padding: .5em 1em;
    margin: auto;
  }
  .info {
    padding: 3em 20%;
  }
  .button a, input[type="submit"] {
    border: 2px solid #be6610;
    border-radius: 5px;
    padding: .75em 1.5em; 
    transition: all 0.3s ease-in-out;
    background: transparent;
    font-size: 1em;
    margin: auto;
    color: #be6610;
  }
   input[type="text"], select {
    width: auto;
    padding: 5px;
  }
  .sectionBG h2, #bail-bonds h2, .sectionBG h3 {
    font-size:3em;
    padding: 3em 0;
  }
  #bail-bonds h2 {
    padding: 3em 0 0;
  }
  .sectionBG h3 {
    font-size:1.4em;
    padding:0 0 4em;
  }
  .button a {
    display: inline-block;
  }
  
  .button a.call {
    display: none;
  }
  form li { 
    padding: 5px 0; 
    float: left; 
    width: 500px;
  }
  label {
    display: block; 
    width: 220px; 
    float: left; 
    font-weight:bold;
  }
  footer ul {
    margin:0 auto 50px; 
    width: 830px;
  }
  ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: transparent;
  }
  ::-moz-placeholder { /* Firefox 19+ */
    color: transparent;
  }
  :-ms-input-placeholder { /* IE 10+ */
    color: transparent;
  }
  :-moz-placeholder { /* Firefox 18- */
    color: transparent;
  }
}
@media screen and (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media screen and (min-width:1281px) { /* hi-res laptops and desktops */ }