/* ----- STYLESHEET FOR THE GREAT AMERICAN BEER BRAWL ----- */
.self-clear:after {
  content: '';
  display: table;
  clear: both; }

#full-bodied-beer {
  background: white; }

#foamy-head {
  position: relative;
  margin-bottom: 4em;
  padding: 12% 4% 4%; }
  #foamy-head .block-attribution {
    display: inline;
    position: relative;
    padding: 2px 8px 4px;
    background-color: rgba(255, 255, 255, 0.9);
    bottom: -2.5em;
    margin: 0;
    position: absolute;
    right: 2.5%; }
  #foamy-head h1 {
    font-family: "brandon-grotesque", "effra", "Avenir", "Helvetica Neue", "Helvetica", Arial, sans-serif;
    text-transform: uppercase;
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: -1;
    font-size: 16px; }
  #foamy-head #label-wrap {
    position: relative;
    display: block; }
  #foamy-head #header-label {
    display: block;
    position: relative;
    z-index: 50; }
  #foamy-head .nav-share {
    margin-top: 4%; }
  #foamy-head .intro {
    position: relative;
    padding: 1.2em;
    max-width: 600px;
    background: rgba(255, 255, 255, 0.7);
    text-align: left;
    font-size: 1em;
    margin: 4% auto 2%; }
  @media screen and (min-width: 480px) {
    #foamy-head {
      margin-bottom: 4.5em;
      padding: 6% 4% 4%; }
      #foamy-head .intro {
        font-size: 1.1em;
        padding: 1.5em;
        box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.2); } }
  @media screen and (min-width: 768px) {
    #foamy-head .intro {
      font-size: 1.2em; } }
  @media screen and (min-width: 972px) {
    #foamy-head {
      padding: 0; }
      #foamy-head .center-h {
        position: relative;
        max-width: 1310px;
        min-height: 600px;
        margin: 0 auto; } }
    @media screen and (min-width: 972px) and (min-width: 1464px) {
      #foamy-head .center-h {
        min-height: 700px;
        max-width: 1400px; } }
  @media screen and (min-width: 972px) {
      #foamy-head .center-v {
        position: absolute;
        left: 0;
        top: 50%;
        padding: 1.2%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%); }
      #foamy-head #label-wrap {
        padding: 1.2%;
        margin-right: 550px; }
      #foamy-head .intro-wrap {
        position: absolute;
        width: 550px;
        padding: 1.2%;
        top: 50%;
        right: 1.2%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%); }
      #foamy-head .nav-share {
        margin-top: 0.5em; }
      #foamy-head .intro {
        margin: 0 auto; } }
  @media screen and (min-width: 972px) and (max-width: 1200px) {
    #foamy-head #label-wrap {
      margin-right: 450px; }
    #foamy-head .intro-wrap {
      width: 450px; }
    #foamy-head .intro {
      font-size: 1.1em; } }

.logo-se.top-logo {
  position: absolute;
  top: 0;
  left: 1.2%;
  margin-top: 1.2%;
  background-size: contain;
  z-index: 100; }
  @media screen and (max-width: 479px) {
    .logo-se.top-logo {
      width: 65px; } }

.content-main {
  margin: 0 auto; }
  .content-main h2 {
    text-transform: uppercase;
    text-align: center;
    padding: 0 5%;
    margin: 1em auto;
    max-width: 30em;
    font-size: 1.5em; }
    @media screen and (min-width: 480px) {
      .content-main h2 {
        font-size: 1.8em; } }
    @media screen and (min-width: 768px) {
      .content-main h2 {
        font-size: 2em; } }

#city-link-block-wrap {
  margin: 0 0 3.5em;
  padding: 0 2.5%; }

#city-link-block {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  max-width: 700px; }
  #city-link-block .city-link {
    display: block;
    padding: 2.5%; }
    #city-link-block .city-link .link-image-wrap {
      overflow: hidden;
      margin: 1em 0; }
      #city-link-block .city-link .link-image-wrap img {
        display: block; }
  @media screen and (min-width: 480px) {
    #city-link-block .city-link {
      padding: 2% 0.75%; }
      #city-link-block .city-link .link-image-wrap {
        float: left;
        margin: 0 14px 14px 0; }
        #city-link-block .city-link .link-image-wrap img {
          height: 150px; }
      #city-link-block .city-link p {
        margin-left: 214px;
        font-size: 1.1em; } }
  @media screen and (min-width: 972px) {
    #city-link-block {
      max-width: 800px; }
      #city-link-block .city-link .link-image-wrap {
        margin: 0 20px 12px 0; }
        #city-link-block .city-link .link-image-wrap img {
          height: 200px;
          -webkit-transition-duration: 0.2s;
          -moz-transition-duration: 0.2s;
          transition-duration: 0.2s; }
        #city-link-block .city-link .link-image-wrap:hover img {
          -webkit-transform: scale(1.05);
          -moz-transform: scale(1.05);
          -ms-transform: scale(1.05);
          -o-transform: scale(1.05);
          transform: scale(1.05); }
      #city-link-block .city-link p {
        margin-left: 0; } }

#voting-data-wrap {
  text-align: center;
  padding: 6% 2.5% 7%;
  margin: 5em 0 3em;
  background-color: #DDD; }
  #voting-data-wrap #voting-data-inner-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2.5%; }
  #voting-data-wrap #voting-wrap h2 {
    font-size: 2em;
    margin: 0 auto; }
  #voting-data-wrap .nav-share {
    margin-bottom: 1.1em; }
  #voting-data-wrap #data-wrap {
    max-width: 600px;
    margin: 12% auto 0.5em; }
    #voting-data-wrap #data-wrap #data-inner-wrap {
      padding: 0.2% 3.9% 2.6%;
      background: white;
      box-shadow: 0 0 4px #666;
      border-radius: 12px; }
    #voting-data-wrap #data-wrap #bar-graph {
      position: relative;
      display: inline-block;
      font-size: 0; }
      #voting-data-wrap #data-wrap #bar-graph .beer-glass-wrap {
        display: inline-block;
        vertical-align: bottom;
        width: 25%;
        padding: 0 0.4%; }
        #voting-data-wrap #data-wrap #bar-graph .beer-glass-wrap .beer-glass {
          width: 100%;
          height: auto; }
        #voting-data-wrap #data-wrap #bar-graph .beer-glass-wrap span {
          display: block;
          font-size: 15px;
          margin-left: -1px;
          white-space: nowrap; }
  @media screen and (max-width: 340px) {
    #voting-data-wrap #data-wrap #bar-graph .beer-glass-wrap span {
      font-size: 13.5px; } }
  @media screen and (min-width: 480px) {
    #voting-data-wrap {
      margin-bottom: 4em;
      padding: 4% 2.5% 5%; }
      #voting-data-wrap #voting-wrap h2 {
        font-size: 2.5em; }
      #voting-data-wrap #data-wrap #bar-graph .beer-glass-wrap span {
        font-size: 16px; } }
  @media screen and (min-width: 768px) {
    #voting-data-wrap {
      direction: rtl; }
      #voting-data-wrap #voting-data-inner-wrap {
        padding: 0; }
      #voting-data-wrap #voting-wrap {
        display: inline-block;
        margin: 0 1.25%;
        vertical-align: bottom;
        direction: ltr; }
        #voting-data-wrap #voting-wrap h2 {
          font-size: 3em; }
      #voting-data-wrap #data-wrap {
        display: inline-block;
        vertical-align: bottom;
        margin: 0.7em 1.25% 0;
        width: 50%;
        max-width: none;
        min-height: 584.4px;
        direction: ltr; } }