@import url(http://fonts.googleapis.com/css?family=Bitter:400,400italic|Montserrat:700,400);
@font-face {
  font-family: "montserrat-loc";
  font-weight: 500;
  font-style: normal;
  src: url(./fonts/montserrat-500.ttf) format("truetype"); }

@font-face {
  font-family: "montserrat-loc";
  font-weight: 700;
  font-style: normal;
  src: url(./fonts/montserrat-700.ttf) format("truetype"); }

@font-face {
  font-family: "bitter-loc";
  font-weight: 300;
  font-style: normal;
  src: url(./fonts/bitter-300.ttf) format("truetype"); }

@font-face {
  font-family: "bitter-loc";
  font-weight: 300;
  font-style: normal;
  src: url(./fonts/bitter-300-italic.ttf) format("truetype"); }

@font-face {
  font-family: "bitter-loc";
  font-weight: 500;
  font-style: normal;
  src: url(./fonts/bitter-500.ttf) format("truetype"); }

.sans-stack {
  font-family: "proxima-nova", sans-serif; }

.sans-alt {
  font-family: "Montserrat", "montserrat-loc", serif; }

.serif-stack {
  font-family: "Bitter", "bitter-loc", serif; }

html {
  -webkit-font-smoothing: antialiased; }

body {
  background-image: url(../img/lightpaperfibers.png); }

p {
  font-family: "Bitter", "bitter-loc", serif; }

a {
  -webkit-transition: color .1s ease-in-out;
  -moz-transition: color .1s ease-in-out;
  -ms-transition: color .1s ease-in-out;
  -o-transition: color .1s ease-in-out;
  transition: color .1s ease-in-out; }

.add-left {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 20px; }

.add-right {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-right: 20px; }

@media (max-width: 767px) {
  .add-left, .add-right { padding: 0; }
}

.no-margin {
  margin:0;
}

.no-padding {
  padding:0;
}

.header-top {
  padding: 24px 0 12px 0; }
  .header-top .img-logo {
    display: inline-block;
    margin-right: 24px; }
  .header-top .when-and-where {
    display: inline-block;
    font-family: "Bitter", "bitter-loc", serif;
    vertical-align: bottom; }

.header-top-container {
  position: relative; }

.hsu-branding {
  width: 100%;
  /* Linear Gradient */
  background: #62c362; /* Old browsers */
  background: -moz-linear-gradient(top,  #62c362 0%, #51a351 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#62c362), color-stop(100%,#51a351)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #62c362 0%,#51a351 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #62c362 0%,#51a351 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #62c362 0%,#51a351 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #62c362 0%,#51a351 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#62c362', endColorstr='#51a351',GradientType=0 ); /* IE6-9 */
  box-shadow: inset 0 -2px 8px rgba(0,0,0,0.1);
  z-index: 9999;
  outline: 1px solid rgba(0,0,0,0.2); }
  .hsu-branding img {
    margin: 9px 0; }

.facebook-prominent {
  color: white;
  -webkit-transition: background 0.08s ease-in-out;
  -moz-transition: background 0.08s ease-in-out;
  -ms-transition: background 0.08s ease-in-out;
  -o-transition: background 0.08s ease-in-out;
  transition: background 0.08s ease-in-out;
  width: 108px;
  height: 36px;
  padding: 8px 12px 12px;
  background: #3b5998;
  position: absolute;
  top: 0;
  right: 0;
  box-shadow: 0 5px 6px -3px #888888; }
  .facebook-prominent p {
    padding: 0;
    margin: 0; }
  .facebook-prominent:hover {
    background: #4c70ba;
    color: white;
    text-decoration: none; }
  .facebook-prominent .facebook-word {
    font-family: "proxima-nova", sans-serif;
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 1.4em; }
  @media (max-width: 480px) {
    .facebook-prominent {
      text-align: right;
      font-size: .9em;
      padding: 4px 8px 12px;
      width: 94px;
      height: 32px; } }

nav {
  font-family: "Montserrat", "montserrat-loc", serif; }
  nav ul {
    height: 28px;
    padding: 0;
    margin: 0;
    background: #51a351;
    text-align: justify; }
    nav ul li {
      height: 28px;
      line-height: 28px;
      display: inline-block;
      margin: 0 12px;
      padding: 0 8px;
      font-size: 1em;
      cursor: default;
      -webkit-transition: background 0.1s ease-in-out;
      -moz-transition: background 0.1s ease-in-out;
      -ms-transition: background 0.1s ease-in-out;
      -o-transition: background 0.1s ease-in-out;
      transition: background 0.1s ease-in-out; }
      nav ul li:hover {
        background: rgba(255, 255, 255, 0.5); }
      nav ul li a {
        color: white; }
        nav ul li a:hover {
          color: inherit;
          text-decoration: none; }
        nav ul li a:before {
          content: "/ ";
          opacity: 0.5; }
        nav ul li a:after {
          content: " /";
          opacity: 0.5; }
    nav ul span.stretcher {
      width: 100%;
      display: inline-block; }

.ribbon {
  position: relative;
  background: #51a351;
  color: #fff;
  padding: 0;
  margin: 12px auto 20px; }
  .ribbon:before, .ribbon:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -6px;
    border: 12px solid #62c362;
    z-index: -1; }
  .ribbon:before {
    left: -26px;
    border-right-width: 1.5em;
    border-left-color: transparent; }
  .ribbon:after {
    right: -26px;
    border-left-width: 1.5em;
    border-right-color: transparent; }
  .ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: darkgreen transparent transparent transparent;
    bottom: -6px; }
  .ribbon .ribbon-content:before {
    left: 0;
    border-width: 7px 0 0 7px; }
  .ribbon .ribbon-content:after {
    right: 0;
    border-width: 7px 7px 0 0; }

.elevator-main {
  font-weight: 500; }
  .elevator-main strong {
    color: #51a351; }

.elevator-main.heavyset {
  font-weight: 700; }

.elevator-detail {
  font-family: "Bitter", "bitter-loc", serif;
  font-size: 1.05em;
  line-height: 1.5em;
  color: #444; }

footer {
  width: 100%;
  padding-top: 18px;
  background: #333;
  color: white;
  font-family: "Montserrat", "montserrat-loc", serif;
  font-size: 1em;
  margin: 24px 0 0 0; }
  footer ul, footer ul li {
    list-style-type: none;
    padding: 0;
    margin: 0; }
    footer ul a, footer ul li a {
      color: white; }
      footer ul a:hover, footer ul li a:hover {
        color: #fdfdfd; }

/* Large desktop */
/* Portrait tablet to landscape and desktop */
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
  nav ul {
    padding: 0 8px;
    border-left: 8px solid #62c362;
    border-right: 8px solid #62c362; }
    nav ul li {
      padding: 0 4px;
      margin: 0; }
      nav ul li a:before, nav ul li a:after {
        content: ''; }

  .ribbon {
    margin: 12px auto 12px; }
    .ribbon:before, .ribbon:after {
      display: none; }
    .ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
      display: none; }

  footer {
    margin: 12px 0 0 0; } }
@media (max-width: 501px) {
  .header-top {
    text-align: center; } }
/* Landscape phones and down */
@media (max-width: 480px) {
  nav ul {
    padding: 0;
    height: 56px;
    text-align: center; }
    nav ul li {
      padding: 0 8px;
      margin: 0 12px; }
    nav ul .nav-break {
      display: inherit !important; }

  .elevator-main {
    font-size: 28px;
    line-height: 34px; } }
/* Portrait phones and down */
@media (max-width: 340px) {
  nav ul {
    height: 140px; }
    nav ul li {
      display: block;
      padding: 0 8px;
      margin: 0 12px; }
      nav ul li a:before {
        content: '/ '; }
      nav ul li a:after {
        content: ' /'; }
    nav ul .nav-break {
      display: none !important; }

  .elevator-main {
    font-size: 24px;
    line-height: 30px; } }