html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
img { max-width: 100%; border: 0; }
audio, canvas, iframe, img, svg, video { vertical-align: middle; } /* Remove gaps between elements */
nav ul, nav ol { list-style-type: none; padding: 0; margin: 0; } /* Remove bullets from lists in nav */
textarea { resize: vertical; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }


html {
  background-color: #333;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(0,0,0, .3) 35px, rgba(0,0,0, .3) 70px);
  /* More gradient patterns can be found at http://lea.verou.me/css3patterns/ */
}
body {
  color: #FFF;
  font-size: 14px;
  font-family: 'Monda', serif;
  margin: 0 15px;
}
a {
  color: #fcb802;
}
h1, h2 {
  font-family: 'Bree Serif', sans-serif;
  text-transform: uppercase;
  font-size: 1.35em;
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
}
.module {
  padding: 20px;
  margin: 20px 10px 0;
  background: rgba(15, 15, 15, 0.5);
  border: 1px solid #b08101;
  box-shadow: 0 0 3px #000;
}
.slideshow {
  padding: 0;
}
.page-header {
  margin: 0 -15px;
  position: relative;
  border: 0;
  text-align: center;
}
.page-header .content-wrapper {
  padding: 0 10px;
}
.page-header .logo {
  vertical-align: middle;
  display: inline-block;
  width: 25%;
  min-width: 100px; /* optional, can remove if we don't want to bother with it */
}
.page-header .details {
  display: inline-block;
  text-align: left;
  line-height: 16px;
  vertical-align: middle;
  margin: 10px;
}
.page-header .details img {
  display: block;
}
.page-header a {
  text-decoration: none;
}
.page-header nav {
  clear: both;
  text-align: center;
  margin: 10px 0 0;
}
.page-header nav ul {
  padding: 0;
  margin: 0;
}
.page-header nav li {
  display: inline-block;
  margin: 0 4px;
}
.page-header nav li a {
  display: block;
  color: #FFF;
  font-family: 'Bree Serif', sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 1.25em;
  font-weight: 700;
  clear: both;
  opacity: .56;
}
.page-header nav li a:hover,
.page-header nav li a.active {
  opacity: 1;
}
.shows {
  background-color: #FFF;
  color: #999;
  box-shadow: 0 0 3px #000;
  margin: 0 -15px 0;
  padding: 10px;
}
.shows h1 {
  background: #e39401;
  padding: 15px;
  margin: -10px -10px 10px;
  color: #000;
  text-align: center;
}
.shows ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.shows ul li a {
  display: block;
  text-decoration: none;
  color: #999;
  position: relative;
  z-index: 1;
  clear: both;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.shows ul li p {
  margin: .6em 0;
}
.shows ul li .info {
  overflow: hidden;
}
.shows ul li a:before, .shows ul li a:after {
  display: table;
  content: "";
}
.shows ul li a:after {
  clear: both;
}
.shows ul li h3 {
  color: #222;
  margin: 0;
  margin-top: -.3em;
  text-transform: none;
}
.shows ul li p:first-of-type {
  margin-top: 0;
}
.shows ul li img {
  float: left;
  width: 30%;
  margin-right: 20px;
  margin-bottom: 0;
  border: 2px solid #999;
}
.shows ul li a:before {
  content: '›';
  display: block;
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 10px;
  margin-top: -30px;
  font-family: sans-serif;
  color: #CCC;
  font-size: 48px;
  font-weight: normal;
  line-height: 48px;
}
.tout h2 {
  color: #fcb802;
  text-align: center;
  margin-bottom: 20px;
}
.tout table {
  width: 100%;
  margin: 0 auto;
}
.tout table td {
  padding: 2px 0;
}
.tout table .date {
  color: #999;
  padding-left: 20px;
  text-align: right;
}
.happy-hour {
  background: rgba(116, 58, 1, 0.5);
  text-align: center;
}
.happy-hour p {
  margin-bottom: 0;
}

#email-signup {
  border: 0;
  background-color: transparent;
  box-shadow: none;
  text-align: center;
  padding: 0 0 20px;
}
#email-signup p {
  color: #BBB;
  line-height: 1.5;
  margin: 5px;
}
#email-signup input {
  display: block;
  background-color: #000;
  border: 1px solid #888;
  padding: 3px 5px;
  margin: 8px auto;
  width: 15em;
  max-width: 100%;
  text-align: center;
}
.button {
  display: inline-block;
  color: #FFF;
  text-transform: uppercase;
  padding: 5px 15px 6px;
  background-color: #e39401;
  border-radius: 25px;
  border: 0;
}

.band {
  background: rgba(36, 36, 36, 100);
}
.band .title span {
  color: #F8B800;
  white-space: nowrap;
}
.band .title h1 {
  margin: 0 0 0.5em;
}
.band-info .left {
  display: inline-block;
  float: left;
  width: 50%;
  text-align: center;
  margin: 20px 20px 0 0;
}
.band-info .photo {
  border: 1px solid #b08101;
}
.band-info .right {
  display: inline-block;
  float: left;
  width: calc(50% - 20px);
  height: 100%;
  margin-top: 20px;
  text-align: center;
}
.band-info .right p {
  margin: 0;
  font-size: 1.14em;
  text-align: left;
}
.band-info .right p:nth-child(2) {
  text-align: center;
  margin: 1em 0;
  font-size: 1em;
}
footer {
  padding: 20px 10px;
  line-height: 1.4;
  overflow: hidden;
}
footer .social {
  list-style: none;
  float: right;
}
footer .social li {
  display: inline-block;;
}
footer .social li a {
  display: block;
}
footer .social i {
  background-image: url(../img/social-icon-sprite.svg);
  height: 35px;
  width: 35px;
  display: inline-block;
  text-indent: -9999px;
  margin-left: 6px;
  -webkit-transition: all .1s ease;
  transition: all .1s ease;
}
footer .social i:hover,
footer .social i:focus {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
footer .twitter {
  background-position: -35px 0;
}
footer .rss {
  background-position: -70px 0;
}
footer .copyright {
  float: left;
}
footer .copyright .name {
  font-family: 'Bree Serif', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  color: #e39401;
  margin: 0;
}
footer .rights {
  font-family: sans-serif;
  color: #999;
  font-size: 12px;
  margin: 0;
}


.content-wrapper {
  margin: auto;
}





/* ==========================================================================
   Media Queries
   ========================================================================== */

   @media (max-width: 479px) {
    .shows ul li a {
      padding-right: 30px;
    }
    .page-header .nav-shows {
      display: none;
    }
    .slideshow {
      display: none;
    }
    .slideshow .slide {
      display: none;
    }
    .band {
      border: none;
      margin: 0 -15px 0;
      box-shadow: none;
    }
    .page-header nav li.shows ul {
      display: none;
    }
    .shows h1 {
      margin: -10px 0 10px;
    }
    .shows ul li .description {
      display: none;
    }
    .tout {
      max-width: 360px;
      margin: 20px auto;
    }
    .shows {
      border: 0;
      padding: 10px 0 0;
    }
    .band-info .left, .band-info .right {
      width: 100%;
    }
    .band .title p {
      font-family: 'Bree Serif', sans-serif;
      font-size: 1.14em;
      margin-bottom: 0.25em;
      margin-top: 0.25em;
    }
  }
  @media (min-width: 480px) {
    .content-wrapper {
      max-width: 600px;
    }
    .page-header {
      border-color: #b08101;
      border-style: solid;
      border-width: 0 0 1px 0;
      box-shadow: 0 0 3px #000;
    }
    .page-header nav li {
      margin: 0 15px;
    }
    .slideshow {
      position: relative;
      border: 1px solid #b08101;
      box-shadow: 0 0 3px #000;
    }
    .slideshow .slide {
      position: relative;
    }
    .slideshow .slide .photo {
      padding-top: 59%;
      background-size: cover;
      -ms-behavior: url(/js/vendor/background-size-polyfill/backgroundsize.min.htc);
    }
    .slideshow .slide .overlay {
      position: absolute;
      background: rgba(0, 0, 0, 0.5);
      z-index: 100;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 20px;
      border-top: 1px solid #7e5c01;
      font-size: 1.1em;
      padding-right: 120px;
    }
    .slideshow .slide .overlay strong {
      display: block;
      font-family: 'Bree Serif', sans-serif;
      font-size: 1.3em;
      text-transform: uppercase;
      color: #fcb802;
      margin-right: 15px;
      margin-bottom: 5px;
    }
    .slideshow .slide .overlay span {
      white-space: nowrap;
      color: #ffffff;
    }
    .slideshow .flex-control-nav {
      bottom: 20px;
      right: 20px;
      width: auto;
      z-index: 100;
    }
    .slideshow .flex-control-nav li a {
      background: #fcb802;
    }
    .slideshow .flex-control-nav li a.flex-active {
      background: #FFF;
    }
    .shows {
      margin: 20px 10px 0;
      border-width: 2px;
      padding: 10px;
    }
    .shows h1 {
      padding: 10px;
    }
    .shows ul li {
      float: left;
      width: 50%;
    }
    .shows ul li:nth-child(3) {
      clear: left;
    }
    .shows ul li a {
      border: none;
    }
    .shows ul li img {
      float: none;
      width: auto;
      margin-right: 0;
      margin-bottom: 15px;
    }
    .shows ul li a:before {
      content: '';
    }
    .band .title {
      position: relative;
      z-index: 100;
      left: 0;
      right: 0;
      top: 0;
      padding: 0 20px 10px;
      margin: 0 -20px 0;
      border-bottom: 1px solid #b08101;
      font-size: 1.1em;
    }
    .band .title h1 {
      font-size: 1.3em;
    }
    .band .title p {
      font-family: 'Bree Serif', sans-serif;
      font-size: 1em;
      margin-bottom: 0.25em;
      margin-top: 0.25em;
    }
    footer .copyright {
      margin-top: 16px;
    }
    footer .copyright p {
      display: inline-block;
    }
    footer .rights {
      margin-left: 10px;
    }
  }
  @media (min-width: 480px) and (max-width: 739px) {
    .tout {
      float: left;
      width: calc(50% - 20px);
      min-height: 200px;
    }
    .band-info .left, .band-info .right {
      width: 100%;
    }
  }
  @media (min-width: 740px) {
    .content-wrapper {
      max-width: 800px;
    }
    body {
      margin-top: 30px;
    }
    .icon {
      background-image: url(../img/nav-icon-sprite.svg);
      height: 45px;
      width: 43px;
      display: inline-block;
    }
    .nav-shows .icon {
      background-position: 0 0;
    }
    .nav-menu .icon {
      background-position: 0 -45px;
    }
    .nav-directions .icon {
      background-position: 0 -90px;
    }
    .nav-photos .icon {
      background-position: 0 -135px;
    }
    .page-header {
      border-top-width: 1px;
      margin-top: 20px;
      margin-bottom: 30px;
    }
    .page-header .details {
      margin: 10px;
    }
    .page-header .company-info {
      margin: 0;
      width: auto;
      float: left;
    }
    .page-header .logo {
      margin-top: -45px;
      margin-bottom: -45px;
      width: 150px;
      height: 150px;
    }
    .page-header nav {
      float: right;
      clear: none;
      margin: 0;
    }
    .page-header nav li {
      margin: 0 0 0 25px;
    }
    .page-header nav li a .icon {
      display: block;
      margin: 0 auto;
    }
    .slideshow .slide .overlay {
      font-size: 20px;
    }
    .band .title h1 {
      font-size: 26px;
    }
    .band .title p {
      font-size: 1.3em;
    }
    .slideshow .slide .overlay strong {
      display: inline;
      margin-bottom: 0px;
    }
    aside {
      float: left;
      width: calc(33% - 10px);
    }
    footer {
      clear: both;
    }
  }
  @media (min-width: 740px) and (max-width: 1023px) {
    .shows {
      float: right;
      width: calc(67% - 10px);
    }
  }
  @media (min-width: 1024px) {
    body, .content-wrapper {
      max-width: 1280px;
      margin: 10px auto;
    }
    body {
      padding: 0 15px;
    }
    .page-header {
      float: left;
      width: calc(25% - 20px);
      margin: 20px 10px 0;
      border-width: 1px;
      padding-bottom: 0;
    }
    .page-header .company-info {
      float: none;
    }
    .page-header .content-wrapper {
      padding: 0;
    }
    .page-header .logo {
      margin-bottom: 0;
    }
    .page-header .details {
      text-align: center;
      margin: 10px;
      float: none;
    }
    .page-header .details div {
      display: inline-block;
      margin: 0 2px;
      white-space: nowrap;
    }
    .page-header nav {
      text-align: center;
      float: none;
      margin: 10px auto 0;
    }
    .page-header nav ul {
      text-align: left;
      display: inline-block;
    }
    .page-header nav li {
      float: none;
      margin: 0;
      display: block;
    }
    .page-header nav li a {
      line-height: 55px;
      overflow: hidden; 
    }
    .page-header nav li a .icon {
      display: inline-block;
      vertical-align: middle;
      margin: 0 10px 0 0;
    }
    .shows ul li {
      width: 25%;
    }
    .shows ul li:nth-child(3) {
      clear: none;
    }
    main {
      float: right;
      width: 75%;
    }
    aside {
      width: 25%;
    }
  }