@font-face{
  font-family:'FontAwesome';
  src:url('../fonts/fontawesome-webfont.eot?v=4.0.1');
  src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.1') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.0.1') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.0.1') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.0.1#fontawesomeregular') format('svg');
  font-weight:normal;
  font-style:normal
}
.fa {
  display:inline-block;
  font-family:FontAwesome;
  font-style:normal;
  font-weight:normal;
  line-height:1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}
.fa-angle-up:before{content:"\f106"}
.fa-angle-down:before{content:"\f107"}

.metanav-toggle {
  color: #fff;
  float: right;
  padding: 9px 1.5em 0 0;
  text-align: center;
}
.metanav-toggle .fa {
  font-size: 1.3em;
  position: relative;
  top: .05em;
}
.metanav-toggle:hover { cursor:pointer; }
#metanav,
.metanav-box {
  clear: both;
  background: linear-gradient(to bottom, #303030 50%, #444 100%) #303030;
  background-color: #303030;
  margin: 0;
}
#metanav {
  display: none;
  padding: 6px 0;
}
#metanav li {
  display: block;
}
#metanav li.last {
  border: none;
}
#metanav a {
  display: block;
  color: #fff;
  padding: 0 1em;
  font-size: 15px;
  line-height: 27px;
}

@media only screen and (max-width: 324px) {
  .top-nav.with-search .wrapper {
    height: 96px !important;
  }
}

@media only screen and (min-width: 480px) {
  .metanav-toggle {
    float: right;
    position: relative;
    padding: 8px 1.75em 0 0;
    top: 0;
  }
}

@media only screen and (min-width: 768px) {
  #metanav {
    text-align: right;
    padding: 0 2em 0 0;
  }
  #metanav li {
    display: inline-block;
    border-right: solid 1px black;
  }
  #metanav a {
    padding: .5em 1em;
    font-size: .8em;
    line-height: 1.2;
  }
}