.subnav {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  background-color: #cccccc;
  color: #737373;
  font-size: 14px;
  height: 60px;
  line-height: 60px; }
  .subnav .container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 1180px; }
    .subnav .container:after {
      clear: both;
      content: " ";
      display: block; }
  .subnav .item {
    float: left;
    padding: 0; }
    .subnav .item.active, .subnav .item.active a {
      color: #FFF; }
  .subnav .icon {
    fill: #737373;
    vertical-align: middle; }
  .subnav a {
    color: #737373;
    display: block;
    position: relative;
    text-decoration: none; }
    .subnav a:hover {
      color: #FFF;
      text-decoration: none; }
      .subnav a:hover .icon {
        fill: #FFF; }

.subnav-title, .subnav-breadcrumbs, .subnav-items {
  list-style-type: none;
  margin: 0;
  padding: 0; }

.subnav-title, .subnav-breadcrumbs {
  font-family: "Roboto Slab", "Museo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  color: #737373;
  float: left;
  font-size: 20px;
  height: 60px;
  line-height: 60px; }

.subnav-breadcrumbs .item {
  padding-right: 26px;
  position: relative; }
  .subnav-breadcrumbs .item:after {
    bottom: 1px;
    content: "|";
    font-weight: 400;
    position: absolute;
    right: 10px; }
  .subnav-breadcrumbs .item:last-of-type:after {
    content: ""; }

.subnav-items {
  float: right; }
  .subnav-items .item {
    padding: 0 20px; }
    .subnav-items .item:last-of-type {
      padding-right: 10px; }
    .subnav-items .item.active a:after {
      background-color: #FFF;
      bottom: 0;
      content: "";
      height: 5px;
      left: 0;
      position: absolute;
      right: 0; }
    .subnav-items .item.help a:after {
      background-color: transparent; }
    .subnav-items .item.external {
      font-style: italic; }