@media only screen { 

  body {
/*    background: url('../img/projects/mehanaDetentionSystemCoverFlip.png') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;*/
  }

  * {
    color: black;

  }

  .content {
    /*background: rgba(0,0,0,0.2);*/
  }

  .content h1, h2, h3, h4, h5 {
    color: black;
    font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  }

    .content h1 {
      margin-top: 25px;
    }

    .content .row:first-of-type h5 {
      margin-top: -10px;
      margin-bottom: 10px;
    }

  .daGrid {
    text-align: center;
    margin: 20px 0px;
  }

    .daGrid h5 {
      border-bottom: 1px solid black;
       min-height: 50px;
       
    }

  .garbContain {
    padding: 0px 2px;
    font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  }

  .child {
    display: inline-block;
    width: 150px;
    height: 150px;
  }


  img {
    border: 2px solid #D3D3D3;
  }

} /* Define mobile styles */

@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */

@media only screen and (min-width: 40.063em) {

  .content h1 {
    margin-top: 50px;
  }

  .garbContain {
    padding: 0px 20px;
  }

  .child {
    width: 200px;
    height: 200px;
  }

} /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

@media only screen and (min-width: 64.063em) {
  .top-bar {
    background: #C29A50 !important;
    height: 85px;
  }
    .top-bar.expanded .title-area {
      background: #C29A50;
    }
    .top-bar-section li {
      /* second layer */
      background: #C29A50 !important;
    }
    .top-bar-section li:not(.has-form) a:not(.button) {
      /* first layer */
      background: #C29A50 !important; /*#C29A50 */
      font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
      font-size: 18px;
      padding: 20px;
    }
    .top-bar h1 {
      font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
            padding:20px;
    }
    .top-bar.expanded .toggle-topbar a {
      color: #FFFFFF !important;
    }
    .top-bar .name h1 {
      font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
      font-size: 23px;
    } 

    .intro {
      /*background: rgba(0,0,0,0.2);*/
    }
} /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */