
<style type="text/css">


body, h1, h2, h3, h4, h5, h6 {
    /*font-family: Helvetica-light, "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;*/
      font-family: 'Roboto', sans-serif;

      font-weight: 400; 
}


/* AL PAGE TITLE */

.subheader {

  font-family: 'Roboto Condensed', sans-serif;
  font-size: 24px;

  text-transform: uppercase;
  font-weight: 900 ;
  line-height: 23px;
  color: #000;
}

.subheader  a:hover {color:#111;}



a {
    background-color: transparent;
    color: #999;
    text-decoration: none;
    cursor: pointer;
}





.centerbox img {

    display: block;
    margin-left: auto;
    margin-right: auto;
}

.centerbox p {
  /*font-weight: 400;*/
/*  font-weight: bold;*/

  /*font-family: 'Roboto', sans-serif;

  line-height: 110%;
  font-size: 12px;
  color: #000;*/
  
}






.projtitle { 
      font-family: 'Roboto', sans-serif;
     font-weight: bold;
    /* text-decoration: uppercase;*/
  /*  font-style: italic;*/
    /*font-style: oblique;*/
  }


.projtitlesub  {
   font-family: 'Roboto', sans-serif;
  /* text-decoration: uppercase;*/
  font-weight: 400;
  line-height: 110%;
  font-size: 12px;
  color: #000;
      margin-bottom: 6px;
}


.projnartxt {

  /*margin: 40px 0 40px 0;*/
   font-family: 'Roboto', sans-serif;
  font-weight: 400;
  line-height: 110%;
  font-size: 12px;
/*  color: #666;*/
color:#9e9e9e;
  /*line-height: 14px;*/
}





 .flasher { margin-top: 60px;}


.callout.primary {
	color:#888;
	}


/* adjusts header h3?  */
.callout.primary a {
    background-color: transparent;
    color: #000;
    text-decoration: uppercase;
    cursor: pointer;
}



.callout.primary {
  /*  background-color: #F1F1F1;*/
    background-color: #fff;
}


.callout.large {
    padding: 0.35rem;
}



.callout {
    margin: 0 0 1rem;
    padding: 1rem;
    border: 0px ;
    border-radius: 0;
    position: relative;
    background-color: #fff;
}



.desaturate {
    filter: grayscale(100%); /* Standard CSS */
    -webkit-filter: grayscale(100%); /* CSS for Webkit Browsers */
    filter: url(/elements/grayscale.svg#desaturate); /* Firefox 4-34 */
    filter: gray;  /* Internet Explorer IE6-9 */
    -webkit-filter: grayscale(1); /* Old WebKit Browsers */
}

.desaturate:hover {
    filter: grayscale(0%);
    filter: none;
    -webkit-filter: grayscale(0); /* Old WebKit */
}




#navboxcolor div{ flex-wrap: wrap; margin: auto 0; overflow: hidden;  max-width: 1000px; max-height: auto;
}


#navbox div{ flex-wrap: wrap; margin: auto 0; overflow: hidden;  max-width: 1000px; max-height: auto;
}



#navboxcolor img {width: 10%; height: auto; 
  
}

#navbox img {width: 10%; height: auto; /* margin-left: 0; margin-top: 0;margin-right: 0; padding: 0;*/
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
        filter: gray; /* IE6-9 */
        -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */


 }

 @media (max-width: 480px) {
    

    #navbox  img {
      width: 25%;
    }

 }


#navbox img:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

 


/* over ride row grid to 1000px */
.row {
    max-width: 64.5rem; 
 

}


</style>