/* COLORS + FONTS */
.refrigerator {
  font-family: "refrigerator-deluxe", sans-serif;
}
.slab {
  font-family: "adelle", serif;
}
.serif {
  font-family: "freight-text-pro", serif;
}
.default-transition {
  transition: all 0.3s ease-out;
}
body,
html {
  background: white;
}
/* STATIC BORDER  + SIDEBAR */
.border {
  position: fixed;
  background: white;
  z-index: 99999;
  box-sizing: border-box;
  width: 110%;
  height: 110%;
}
.top {
  top: -2px;
  height: 22px;
}
.right {
  right: 0;
  width: 20px;
}
.left {
  left: 0;
  width: 20px;
}
.bottom {
  bottom: 0;
  height: 20px;
}
#sidebar {
  position: fixed;
  left: 0;
  height: 100%;
  width: 20%;
  background: white;
  z-index: 999;
  min-width: 265px;
}
#sidebar .logo {
  width: 80%;
  height: 280px;
  margin: 30px 10%;
  background: url(../images/logo-full.png);
  background-image: url(../images/logo.svg), none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  transition: all 0.3s ease-out;
}
#sidebar a.site:hover .logo {
  opacity: 0.8;
}
#sidebar .sidemenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#sidebar .sidemenu ul li {
  width: 100%;
  font-family: "adelle", serif;
  text-transform: uppercase;
  font-size: 0.95em;
  letter-spacing: 0.04em;
}
#sidebar .sidemenu ul li a {
  display: block;
  padding: 10px  0  10px 15%;
  color: #627e8a;
  text-decoration: none;
  transition: all 0.3s ease-out;
}
#sidebar .sidemenu ul li a:hover {
  padding-left: 18%;
  color: #c6a77f;
}
#sidebar .contact {
  position: absolute;
  bottom: 40px;
  margin-left: 15%;
  font-size: 1.15em;
  line-height: 1.25em;
  color: #627e8a;
  font-family: "refrigerator-deluxe", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
#sidebar .contact a {
  text-decoration: none;
  font-weight: bold;
  color: #627e8a;
  margin-top: 5px;
  display: inline-block;
}
#sidebar .contact a:hover {
  color: #c6a77f;
}
#sidebar .contact .social ul {
  list-style: none;
  text-align: center;
  margin: 3px 0 0;
  padding: 0;
  font-size: 1.1em;
}
#sidebar .contact .social ul li {
  float: left;
  padding-right: 5px;
  cursor: pointer;
}
/*PAGE STRUCTURE */
#fullpage {
  float: left;
  margin-left: 265px;
}
#welcome {
  background: #dfe7eb;
  position: relative;
  background: url(../images/welcome-bg.jpg) no-repeat center center;
  background-size: cover;
  height: 100vh;
  width: 100%;
  float: left;
  min-height: 720px;
}
#welcome .intro {
  z-index: 9;
  position: relative;
  top: 50%;
  transform: translateY(-55%);
  float: left;
  text-align: left;
  width: 82%;
  margin: 0 10% 0 8%;
}
#welcome .intro h2 {
  text-transform: uppercase;
  color: #173441;
  font-size: 7.25em;
  letter-spacing: -0.025em;
  font-family: "refrigerator-deluxe", sans-serif;
  margin: 0;
  line-height: 0.9em;
}
#welcome .intro h3 {
  text-transform: uppercase;
  color: #627e8a;
  font-size: 3.25em;
  position: relative;
  letter-spacing: -0.015em;
  font-family: "refrigerator-deluxe", sans-serif;
  margin: 0;
  line-height: 0.9em;
}
#welcome .intro h3 br {
  display: none;
}
#welcome .intro h3 sup {
  font-size: 0.45em;
  margin-left: -7px;
  top: -10px;
  font-weight: normal;
  position: absolute;
}
#welcome .intro h3 .for {
  display: inline-block;
  width: 30px;
  background: url(../images/for-catch_pale-blue.png) no-repeat center center;
  background-size: cover;
  height: 50px;
  text-indent: -9999px;
  margin-right: 5px;
  transform: translateY(-1px);
}
#welcome .intro h1 {
  border: solid 2px #173441;
  display: inline-block;
  font-family: "adelle", serif;
  text-transform: uppercase;
  color: #173441;
  font-weight: normal;
  font-size: 0.85em;
  letter-spacing: 0.025em;
  margin-top: 15px;
}
#welcome .intro h1 .rev {
  background: #173441;
  color: white;
  padding: 9px 25px;
  display: inline-block;
  letter-spacing: 0.05em;
}
#welcome .intro h1 .secondary {
  padding: 0 21px 0 17px;
}
#welcome .intro h1 .extra {
  position: absolute;
  width: 0;
  height: 0;
  text-indent: -9999px;
}
#welcome .intro p {
  color: #173441;
  font-size: 1.25em;
  line-height: 1.75em;
  letter-spacing: 0.015em;
  font-family: "freight-text-pro", serif;
  width: 90%;
  padding-top: 15px;
  max-width: 675px;
}
#welcome .intro .cta {
  font-size: 0.9em;
  letter-spacing: 0.05em;
  font-family: "adelle", serif;
  text-transform: uppercase;
  margin-top: 45px;
}
#welcome .intro .cta a {
  background: #c6a77f;
  border-radius: 4px;
  color: white;
  font-weight: 500;
  padding: 14px 25px 13px;
  transition: all 0.3s ease-out;
  text-decoration: none;
  margin-right: 15px;
  border: solid 1px rgba(0, 0, 0, 0.15);
}
#welcome .intro .cta a i {
  margin-left: 3px;
}
#welcome .intro .cta a:hover {
  background: #627e8a;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}
#mission {
  background: url(../images/mission-bg.jpg) no-repeat center center;
  background-size: cover;
  height: 100vh;
  width: 100%;
  float: left;
}
#mission .mission {
  z-index: 9;
  position: relative;
  top: 50%;
  transform: translateY(-55%);
  float: left;
  text-align: left;
  width: 82%;
  margin: 0 10% 0 8%;
}
#mission .mission h2 {
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  letter-spacing: -0.015em;
  font-size: 5em;
  margin: 0;
  font-family: "refrigerator-deluxe", sans-serif;
}
#mission .mission h2 sup {
  font-size: 0.4em;
  margin-left: -10px;
  top: 10px;
  font-weight: normal;
  position: absolute;
}
#mission .mission h2 .for {
  display: inline-block;
  width: 40px;
  background: url(../images/for-catch_sand.png) no-repeat center center;
  background-size: contain;
  height: 65px;
  text-indent: -9999px;
  margin-right: 10px;
  transform: translateY(15px);
}
#mission .mission h2 br.mobile {
  display: none;
}
#mission .mission h3 {
  border: solid 2px white;
  color: white;
  mix-blend-mode: soft-light;
  display: inline-block;
  padding: 7px 20px 6px;
  font-family: "adelle", serif;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 0.85em;
  letter-spacing: 0.05em;
  opacity: 0.4;
  position: relative;
}
#mission .mission p {
  color: white;
  font-size: 1.1em;
  letter-spacing: 0.025em;
  line-height: 1.85em;
  width: 95%;
  font-family: "freight-text-pro", serif;
  max-width: 675px;
}
#menu {
  background: url(../images/mission-bg.jpg) no-repeat center center;
  background-size: cover;
  height: 100vh;
  width: 100%;
  float: left;
}
#menu .mission {
  z-index: 9;
  position: relative;
  top: 50%;
  transform: translateY(-55%);
  float: left;
  text-align: left;
  width: 82%;
  margin: 0 10% 0 8%;
}
#menu .mission h2 {
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  letter-spacing: -0.015em;
  font-size: 5em;
  margin: 0;
  font-family: "refrigerator-deluxe", sans-serif;
}
#menu .mission h2 sup {
  font-size: 0.4em;
  margin-left: -10px;
  top: 10px;
  font-weight: normal;
  position: absolute;
}
#menu .mission h2 .for {
  display: inline-block;
  width: 40px;
  background: url(../images/for-catch_sand.png) no-repeat center center;
  background-size: contain;
  height: 65px;
  text-indent: -9999px;
  margin-right: 10px;
  transform: translateY(15px);
}
#menu .mission h2 br.mobile {
  display: none;
}
#menu .mission h3 {
  border: solid 2px white;
  color: white;
  mix-blend-mode: soft-light;
  display: inline-block;
  padding: 7px 20px 6px;
  font-family: "adelle", serif;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 0.85em;
  letter-spacing: 0.05em;
  opacity: 0.4;
  position: relative;
}
#menu .mission p {
  color: white;
  font-size: 1.1em;
  letter-spacing: 0.025em;
  line-height: 1.85em;
  width: 95%;
  font-family: "freight-text-pro", serif;
  max-width: 675px;
}
#community {
  background: url(../images/mission-bg.jpg) no-repeat center center;
  background-size: cover;
  height: 100vh;
  width: 100%;
  float: left;
}
#community .mission {
  z-index: 9;
  position: relative;
  top: 50%;
  transform: translateY(-55%);
  float: left;
  text-align: left;
  width: 82%;
  margin: 0 10% 0 8%;
}
#community .mission h2 {
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  letter-spacing: -0.015em;
  font-size: 5em;
  margin: 0;
  font-family: "refrigerator-deluxe", sans-serif;
}
#community .mission h2 sup {
  font-size: 0.4em;
  margin-left: -10px;
  top: 10px;
  font-weight: normal;
  position: absolute;
}
#community .mission h2 .for {
  display: inline-block;
  width: 40px;
  background: url(../images/for-catch_sand.png) no-repeat center center;
  background-size: contain;
  height: 65px;
  text-indent: -9999px;
  margin-right: 10px;
  transform: translateY(15px);
}
#community .mission h2 br.mobile {
  display: none;
}
#community .mission h3 {
  border: solid 2px white;
  color: white;
  mix-blend-mode: soft-light;
  display: inline-block;
  padding: 7px 20px 6px;
  font-family: "adelle", serif;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 0.85em;
  letter-spacing: 0.05em;
  opacity: 0.4;
  position: relative;
}
#community .mission p {
  color: white;
  font-size: 1.1em;
  letter-spacing: 0.025em;
  line-height: 1.85em;
  width: 95%;
  font-family: "freight-text-pro", serif;
  max-width: 675px;
}
#beers {
  background: url(../images/beers-bg.jpg) no-repeat center center;
  background-size: cover;
  height: 100vh;
  width: 100%;
  float: left;
}
#beers .beers {
  z-index: 9;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  float: left;
  text-align: left;
  width: 86%;
  margin: 0 6% 0 8%;
}
#beers .beers h2 {
  color: #173441;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  letter-spacing: -0.015em;
  font-size: 5em;
  margin: 0;
  font-family: "refrigerator-deluxe", sans-serif;
}
#beers .beers h3 {
  border: solid 2px #627e8a;
  color: #627e8a;
  text-align: center;
  display: inline-block;
  margin: 0 auto;
  padding: 7px 20px 6px;
  font-family: "adelle", serif;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 0.85em;
  letter-spacing: 0.05em;
}
#beers .beers p {
  color: white;
  font-size: 1.1em;
  letter-spacing: 0.025em;
  line-height: 1.85em;
  width: 95%;
  font-family: "freight-text-pro", serif;
}
#beers .beers ul.brew-list {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}
#beers .beers ul.brew-list li {
  float: left;
  width: 23%;
  margin: 0 2% 20px 0;
  padding: 30px 0 0;
  min-height: 200px;
  text-align: center;
  box-shadow: inset 5px 5px 0 #ffffff, inset -5px -5px 0 #ffffff;
  background: rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease-out;
  overflow: hidden;
  position: relative;
}
#beers .beers ul.brew-list li a {
  text-decoration: none !important;
}
#beers .beers ul.brew-list li .logo {
  width: 50%;
  margin: 0 auto 5px;
  z-index: 999;
  position: relative;
  max-width: 125px;
}
#beers .beers ul.brew-list li .logo .icon {
  width: 90%;
  margin: 0 auto;
  position: relative;
  z-index: 999;
}
#beers .beers ul.brew-list li .logo .icon path.welcome,
#beers .beers ul.brew-list li .logo .icon path.kerfuffle,
#beers .beers ul.brew-list li .logo .icon path.preacher,
#beers .beers ul.brew-list li .logo .icon path.bats,
#beers .beers ul.brew-list li .logo .icon polygon.bats,
#beers .beers ul.brew-list li .logo .icon path.fellowship,
#beers .beers ul.brew-list li .logo .icon path.wayne,
#beers .beers ul.brew-list li .logo .icon path.keith {
  fill: white;
  transition: fill 0.4s ease-in;
}
#beers .beers ul.brew-list li .logo .circle {
  position: absolute;
  top: -3%;
  left: -1%;
  border-radius: 50%;
  background: white;
  display: block;
  width: 102%;
  height: 106%;
  transition: opacity 0.4s ease-in;
  z-index: 0;
  opacity: 0;
}
#beers .beers ul.brew-list li h4 {
  color: #173441;
  text-transform: uppercase;
  font-size: 1.65em;
  letter-spacing: -0.015em;
  font-family: "refrigerator-deluxe", sans-serif;
  padding: 0;
  width: 84%;
  margin: 0 8% 3px;
  line-height: 0.95em;
}
#beers .beers ul.brew-list li h5 {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75em;
  font-weight: 300;
  color: #627e8a;
  font-family: "adelle", serif;
  padding: 0;
  width: 84%;
  margin: 0 8%;
}
#beers .beers ul.brew-list li .link {
  display: inline-block;
  position: absolute;
  top: 250px;
  padding: 6px 0 5px;
  z-index: 99;
  color: white;
  text-align: center;
  border: solid 2px white;
  text-transform: uppercase;
  font-family: "adelle", serif;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75em;
  letter-spacing: 0.05em;
  min-width: 50%;
  transition: all 0.6s ease-out;
}
#beers .beers ul.brew-list li .link i {
  margin-left: 2px;
}
#beers .beers ul.brew-list li .link:hover {
  background: white;
  color: #c4b380;
}
#beers .beers ul.brew-list li .cover {
  background: #58869c;
  -ms-transform: skewY(-10deg);
  -webkit-transform: skewY(-10deg);
  transform: skewY(-10deg);
  display: block;
  height: 500px;
  position: absolute;
  top: 260px;
  width: 100%;
  left: 0;
  transition: all 0.6s ease-out;
  z-index: 0;
}
#beers .beers ul.brew-list li:hover {
  background: white;
  cursor: pointer;
}
#beers .beers ul.brew-list li:hover .logo .icon path.welcome {
  fill: #c4b380;
}
#beers .beers ul.brew-list li:hover .logo .icon path.kerfuffle {
  fill: #c160a5;
}
#beers .beers ul.brew-list li:hover .logo .icon path.preacher {
  fill: #a1b64a;
}
#beers .beers ul.brew-list li:hover .logo .icon path.bats {
  fill: #5d3411;
}
#beers .beers ul.brew-list li:hover .logo .icon polygon.bats {
  fill: #5d3411;
}
#beers .beers ul.brew-list li:hover .logo .icon path.fellowship {
  fill: #49170f;
}
#beers .beers ul.brew-list li:hover .logo .icon path.wayne {
  fill: #2c3840;
}
#beers .beers ul.brew-list li:hover .logo .icon path.keith {
  fill: #753745;
}
#beers .beers ul.brew-list li:hover .logo .circle {
  opacity: 1.0;
}
#beers .beers ul.brew-list li:hover .link {
  top: 162px;
}
#beers .beers ul.brew-list li:hover .cover {
  top: 90px;
}
#beers .beers ul.brew-list li.kerfuffle .logo {
  width: 53%;
  margin: 0 23.5% 5px;
}
#beers .beers ul.brew-list li.kerfuffle .logo .icon {
  width: 92%;
  margin: 0 4%;
}
#beers .beers ul.brew-list li.kerfuffle .logo .circle {
  width: 91%;
  left: 5%;
  top: -3%;
}
#beers .beers ul.brew-list li.kerfuffle .link:hover {
  color: #c160a5;
}
#beers .beers ul.brew-list li.kerfuffle .cover {
  background: #c160a5;
}
#beers .beers ul.brew-list li.keith h4 {
  margin-top: -8px;
}
#beers .beers ul.brew-list li.keith .logo {
  width: 53%;
  margin: 0 23.5% 5px;
  top: -10px;
}
#beers .beers ul.brew-list li.keith .logo .icon {
  width: 92%;
  margin: 0 4%;
}
#beers .beers ul.brew-list li.keith .logo .circle {
  width: 96.5%;
  left: 2%;
  top: -3%;
}
#beers .beers ul.brew-list li.keith .link:hover {
  color: #3b606a;
}
#beers .beers ul.brew-list li.keith .cover {
  background: #3b606a;
}
#beers .beers ul.brew-list li.preacher .logo {
  width: 50%;
  margin: 0 25% 5px;
}
#beers .beers ul.brew-list li.preacher .logo .icon {
  width: 86%;
  margin: 0 7%;
}
#beers .beers ul.brew-list li.preacher .logo .circle {
  width: 99%;
  left: 0.5%;
}
#beers .beers ul.brew-list li.preacher .link:hover {
  color: #a1b64a;
}
#beers .beers ul.brew-list li.preacher .cover {
  background: #a1b64a;
}
#beers .beers ul.brew-list li.bats .logo {
  width: 50%;
  margin: 0 25% 5px;
}
#beers .beers ul.brew-list li.bats .logo .icon {
  width: 99%;
  margin: 0 0 0 4%;
  left: 6%;
}
#beers .beers ul.brew-list li.bats .logo .circle {
  width: 95%;
  left: 2.5%;
}
#beers .beers ul.brew-list li.bats .link:hover {
  color: #5d3411;
}
#beers .beers ul.brew-list li.bats .cover {
  background: #5d3411;
}
#beers .beers ul.brew-list li.fellowship h4 {
  margin-top: -8px;
}
#beers .beers ul.brew-list li.fellowship .logo {
  width: 50%;
  margin: 0 25% 5px;
  top: -10px;
}
#beers .beers ul.brew-list li.fellowship .logo .icon {
  width: 85%;
  margin: 0 7%;
}
#beers .beers ul.brew-list li.fellowship .logo .circle {
  width: 99%;
  left: 0%;
}
#beers .beers ul.brew-list li.fellowship .link:hover {
  color: #49170f;
}
#beers .beers ul.brew-list li.fellowship .cover {
  background: #49170f;
}
#beers .beers ul.brew-list li.wayne h4 {
  margin-top: -8px;
}
#beers .beers ul.brew-list li.wayne h4 .sub {
  font-weight: normal;
  font-size: 0.8em;
  letter-spacing: 0.025em;
}
#beers .beers ul.brew-list li.wayne .logo {
  width: 50%;
  margin: 0 25% 5px;
  top: -10px;
}
#beers .beers ul.brew-list li.wayne .logo .icon {
  width: 85%;
  margin: 0 7%;
}
#beers .beers ul.brew-list li.wayne .logo .circle {
  width: 98.5%;
  left: 0;
  top: -3.5%;
}
#beers .beers ul.brew-list li.wayne .link:hover {
  color: #2c3840;
}
#beers .beers ul.brew-list li.wayne .cover {
  background: #2c3840;
}
/*Brew Popup Styles */
#welcome-popup,
#kerfuffle-popup,
#keith-popup,
#preacher-popup,
#bats-popup,
#fellowship-popup,
#wayne-popup {
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.45);
}
.details {
  width: 40%;
  background: white;
  margin: 0 30%;
  overflow: hidden;
  min-height: 500px;
  position: relative;
}
.details .icon-bg {
  position: absolute;
  width: 80%;
  display: block;
  height: 100%;
  right: -25%;
  opacity: 0.6;
  bottom: -50%;
  z-index: 0;
}
.details .icon-bg path,
.details .icon-bg polygon {
  fill: #efefef;
}
.details .brew-content {
  padding: 50px 10px 70px;
}
.details .brew-content .full-logo {
  width: 80%;
  margin: 0 10%;
  position: relative;
  z-index: 999;
}
.details .brew-content .description {
  width: 74%;
  margin: 0 13%;
  position: relative;
  z-index: 999;
  text-align: center;
}
.details .brew-content .description p {
  color: #173441;
  font-size: 1.05em;
  line-height: 1.6em;
  letter-spacing: 0.015em;
  font-family: "freight-text-pro", serif;
  margin: 40px 0 45px;
}
.details .brew-content .description .stats {
  width: 80%;
  margin: 0 10%;
  border: solid 2px;
  font-family: "adelle", serif;
  letter-spacing: 0.025em;
}
.details .brew-content .description .stats span {
  display: inline-block;
  width: 50%;
  text-align: center;
  padding: 5px 0;
}
#welcome-popup.details .brew-content .description p {
  color: #58869c;
}
#welcome-popup.details .brew-content .description .stats {
  border-color: #c4b380;
}
#welcome-popup.details .brew-content .description .stats span.abv {
  background: #c4b380;
  color: white;
}
#welcome-popup.details .brew-content .description .stats span.ibu {
  background: white;
  color: #58869c;
}
#kerfuffle-popup.details .brew-content .full-logo {
  width: 66%;
  margin: 0 17%;
}
#kerfuffle-popup.details .brew-content .description p {
  color: #58869c;
}
#kerfuffle-popup.details .brew-content .description .stats {
  border-color: #c160a5;
}
#kerfuffle-popup.details .brew-content .description .stats span.abv {
  background: #c160a5;
  color: white;
}
#kerfuffle-popup.details .brew-content .description .stats span.ibu {
  background: white;
  color: #58869c;
}
#keith-popup.details .brew-content .full-logo {
  width: 70%;
  margin: 10px 15% 0;
}
#keith-popup.details .brew-content .description p {
  color: #3b5f6a;
}
#keith-popup.details .brew-content .description .stats {
  border-color: #753744;
}
#keith-popup.details .brew-content .description .stats span.abv {
  background: #753744;
  color: white;
}
#keith-popup.details .brew-content .description .stats span.ibu {
  background: white;
  color: #3b5f6a;
}
#preacher-popup.details .brew-content .full-logo {
  width: 70%;
  margin: 0 15%;
}
#preacher-popup.details .brew-content .description p {
  color: #3b5f6a;
}
#preacher-popup.details .brew-content .description .stats {
  border-color: #a0b64a;
}
#preacher-popup.details .brew-content .description .stats span.abv {
  background: #a0b64a;
  color: white;
}
#preacher-popup.details .brew-content .description .stats span.ibu {
  background: white;
  color: #2f4e47;
}
#bats-popup.details .brew-content .full-logo {
  width: 70%;
  margin: 10px 15% 0;
}
#bats-popup.details .brew-content .description p {
  color: #5d3411;
}
#bats-popup.details .brew-content .description .stats {
  border-color: #5d3411;
}
#bats-popup.details .brew-content .description .stats span.abv {
  background: #5d3411;
  color: white;
}
#bats-popup.details .brew-content .description .stats span.ibu {
  background: white;
  color: #5d3411;
}
#fellowship-popup.details .brew-content .full-logo {
  width: 70%;
  margin: 0 14% 0 16%;
}
#fellowship-popup.details .brew-content .description p {
  color: #48160f;
}
#fellowship-popup.details .brew-content .description .stats {
  border-color: #d7c59d;
}
#fellowship-popup.details .brew-content .description .stats span.abv {
  background: #d7c59d;
  color: white;
}
#fellowship-popup.details .brew-content .description .stats span.ibu {
  background: white;
  color: #48160f;
}
#wayne-popup.details .brew-content .full-logo {
  width: 70%;
  margin: 10px 12% 0 18%;
}
#wayne-popup.details .brew-content .description p {
  color: #2c3840;
}
#wayne-popup.details .brew-content .description .stats {
  border-color: #2c3840;
}
#wayne-popup.details .brew-content .description .stats span.abv {
  background: #2c3840;
  color: white;
}
#wayne-popup.details .brew-content .description .stats span.ibu {
  background: white;
  color: #703131;
}
#connect {
  background: url(../images/connect-bg_2.jpg) no-repeat center center;
  background-size: cover;
  height: 100vh;
  width: 100%;
  float: left;
}
#connect .connect {
  z-index: 9;
  position: relative;
  top: 50%;
  transform: translateY(-55%);
  float: left;
  text-align: left;
  width: 82%;
  margin: 0 10% 0 8%;
}
#connect .connect h2 {
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  letter-spacing: -0.015em;
  font-size: 5em;
  margin: 0;
  font-family: "refrigerator-deluxe", sans-serif;
}
#connect .connect h3 {
  border: solid 2px white;
  color: white;
  mix-blend-mode: soft-light;
  display: inline-block;
  padding: 7px 20px 6px;
  font-family: "adelle", serif;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 0.85em;
  letter-spacing: 0.05em;
  opacity: 0.4;
  position: relative;
  margin-left: 3px;
}
#connect .connect p {
  color: #627e8a;
  font-size: 1.15em;
  letter-spacing: 0.025em;
  line-height: 1.65em;
  width: 95%;
  font-family: "freight-text-pro", serif;
  max-width: 670px;
}
#connect .connect .mobile-email-signup {
  display: none;
}
#connect .connect .mobile-email-signup a {
  display: inline-block;
  width: 100%;
  background: #c6a77f;
  border: none;
  border-radius: 4px;
  max-width: 100%;
  padding: 10px 0;
  color: white;
  font-family: "refrigerator-deluxe", sans-serif;
  font-size: 1.75em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  margin-top: 25px;
}
#connect .connect .mobile-email-signup a:hover {
  background: #173441;
  cursor: pointer;
}
#connect .connect .email-signup {
  margin-top: 40px;
  max-width: 650px;
}
#connect .connect .email-signup #mc_embed_signup {
  background: transparent;
}
#connect .connect .email-signup #mc_embed_signup form#mc-embedded-subscribe-form {
  margin: 0;
  padding: 0;
}
#connect .connect .email-signup #mc_embed_signup div.mce_inline_error {
  background-color: transparent;
  color: #c6a77f;
  margin-top: 10px;
}
#connect .connect .email-signup #mc_embed_signup .mc-field-group {
  float: left;
  width: 39%;
  margin-right: 12%;
  clear: none;
}
#connect .connect .email-signup #mc_embed_signup .mc-field-group label {
  float: left;
}
#connect .connect .email-signup #mc_embed_signup .mc-field-group input {
  float: left;
  clear: both;
  color: #627e8a;
  letter-spacing: 0.025em;
  width: 100%;
  font-family: "freight-text-pro", serif;
  font-size: 1.1em;
  padding: 10px 8%;
  border-radius: 4px;
  box-shadow: none;
  border: solid 1px white;
}
#connect .connect .email-signup #mc_embed_signup input[type="submit"] {
  display: block;
  width: 100%;
  background: #c6a77f;
  border: none;
  border-radius: 4px;
  padding: 10px 0 40px;
  max-width: 628px;
  color: white;
  font-family: "refrigerator-deluxe", sans-serif;
  font-size: 2.0em;
  text-transform: uppercase;
  transition: all 0.3s ease-out;
}
#connect .connect .email-signup #mc_embed_signup input[type="submit"]:hover {
  background: #627e8a;
  cursor: pointer;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
#connect .connect .email-signup #mc_embed_signup input[placeholder],
#connect .connect .email-signup #mc_embed_signup [placeholder],
#connect .connect .email-signup #mc_embed_signup *[placeholder] {
  color: #627e8a;
}
#connect .connect .email-signup #mc_embed_signup .email {
  width: 100%;
  margin-right: 0;
}
#connect .connect .email-signup #mc_embed_signup .email input {
  padding: 10px 3%;
  max-width: 587px;
}
#connect .connect .email-signup #mc_embed_signup .lname {
  margin-right: 0;
  margin-bottom: 0;
}
#connect .connect .social-links {
  width: 628px;
  margin: 40px 0 0;
  float: left;
}
#connect .connect .social-links ul {
  width: 100%;
  list-style: none;
  width: 210px;
  margin: auto;
  padding: 0;
}
#connect .connect .social-links ul li {
  width: 25%;
  float: left;
  text-align: center;
  font-size: 2.5em;
}
#connect .connect .social-links ul li a {
  color: #627e8a;
  transition: all 0.3s ease-out;
}
#connect .connect .social-links ul li a:hover {
  color: white;
}
/* INTERIOR STYLES */
/* NEWS */
#news article.main {
  height: auto;
  padding: 0;
  min-height: 0;
  float: left;
  width: 100%;
}
#news article.main .header {
  width: 100%;
  position: relative;
  float: left;
  height: 300px;
}
#news article.main .header h3 {
  border: solid 2px #627e8a;
  color: #627e8a;
  text-align: center;
  display: inline-block;
  margin: 0 auto;
  padding: 7px 20px 6px;
  font-family: "adelle", serif;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 0.85em;
  letter-spacing: 0.05em;
  position: absolute;
  left: 10%;
  top: 40px;
  z-index: 999;
}
#news article.main .header h1 {
  position: absolute;
  color: white;
  font-family: "refrigerator-deluxe", sans-serif;
  text-transform: uppercase;
  font-size: 5.5em;
  bottom: 25px;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.45);
  width: 75%;
  min-width: 440px;
  margin: 0 0 0 10%;
  padding: 0;
  line-height: 0.9em;
  z-index: 999;
}
#news article.main .header .image {
  height: 300px;
  background-repeat: no-repeat;
  background-size: contain;
  background-attachment: fixed;
}
#news article.main .header .overlay {
  position: absolute;
  top: 0;
  height: 300px;
  width: 80%;
  z-index: 0;
  background: -moz-linear-gradient(left, #173441 0%, rgba(23, 52, 65, 0) 100%);
  background: -webkit-linear-gradient(left, #173441 0%, rgba(23, 52, 65, 0) 100%);
  background: linear-gradient(to right, #173441 0%, rgba(23, 52, 65, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#173441', endColorstr='#00173441', GradientType=1);
}
#news article.main .article-meta {
  width: 80%;
  float: left;
  position: relative;
  padding: 0 10%;
  background: #eaeaeb;
  border-bottom: solid 1px rgba(0, 0, 0, 0.08);
}
#news article.main .article-meta .dateline {
  float: left;
  width: 50%;
  padding: 12px 0 10px;
  font-family: "refrigerator-deluxe", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.9em;
  font-weight: bold;
}
#news article.main .article-meta .share {
  width: 50%;
  float: right;
  padding: 10px 0 0;
}
#news article.main .article-meta .share .facebook,
#news article.main .article-meta .share .twitter {
  float: right;
}
#news article.main .article-meta .share .twitter {
  margin-right: 15px;
}
#news article.main .content {
  width: 80%;
  float: left;
  position: relative;
  padding: 40px 10% 120px;
  background: #f7f7f7;
}
#news article.main .content h2 {
  color: #627e8a;
  font-family: "adelle", serif;
  font-weight: normal;
  font-size: 2em;
}
#news article.main .content h2 a,
#news article.main .content h2 a:visited {
  color: #173441;
  text-decoration: none;
  transition: all 0.3s ease-out;
}
#news article.main .content h2 a:hover,
#news article.main .content h2 a:visited:hover {
  color: #c6a77f;
}
#news article.main .content h3 {
  color: #c6a77f;
  font-family: "refrigerator-deluxe", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 2.25em;
  margin-top: 50px;
}
#news article.main .content h4 {
  color: #173441;
  font-family: "adelle", serif;
  font-weight: bold;
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 1.4em;
}
#news article.main .content h5 {
  font-family: "adelle", serif;
  color: #627e8a;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
  padding: 0 0 8px;
  font-weight: 300;
  font-size: 0.9em;
}
#news article.main .content p {
  font-family: "freight-text-pro", serif;
  font-size: 1.25em;
  line-height: 1.7em;
  color: #173441;
  margin: 1.75em auto;
}
#news article.main .content p a,
#news article.main .content p a:visited {
  color: #c6a77f;
  text-decoration: none;
  transition: all 0.3s ease-out;
}
#news article.main .content p a:hover,
#news article.main .content p a:visited:hover {
  color: #627e8a;
}
#news article.main .content p.sub {
  margin-top: 0.25em;
  line-height: 1.5em;
}
#news article.main .content .tank {
  width: 100%;
  float: left;
  min-height: 275px;
  margin-bottom: 20px;
}
#news article.main .content .tank .photo {
  float: left;
  width: 20%;
  border-radius: 8px;
  overflow: hidden;
  border: solid 10px white;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  max-height: 215px;
}
#news article.main .content .tank .photo img {
  width: 100%;
  height: auto;
  float: left;
  max-width: 270px;
}
#news article.main .content .tank .descrip {
  float: left;
  margin-left: 5%;
  width: 70%;
}
#news article.main .content .tank .descrip h3 {
  margin-top: 5px;
  padding-top: 0;
}
#news #connect {
  height: auto;
  padding: 90px 0 150px;
  min-height: 0;
}
#news #connect .connect {
  clear: both;
  position: relative;
  transform: translateY(0);
  top: 0;
  width: 80%;
  margin: 0 10%;
}
#news #connect .connect .email-signup #mc_embed_signup .mc-field-group {
  margin-bottom: 25px;
}
#news #connect .connect .email-signup #mc_embed_signup input[type="submit"] {
  padding: 10px 0;
  min-height: 50px;
}
/*MEMBERSHIP*/
#membership section.main {
  height: auto;
  padding: 0;
  min-height: 0;
  float: left;
  width: 100%;
  background: #f7f7f7;
}
#membership section.main .header {
  width: 100%;
  position: relative;
  float: left;
  height: 300px;
}
#membership section.main .header h3 {
  border: solid 2px rgba(255, 255, 255, 0.6);
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  display: inline-block;
  margin: 0 auto;
  padding: 7px 20px 6px;
  font-family: "adelle", serif;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 0.85em;
  letter-spacing: 0.05em;
  position: absolute;
  left: 10%;
  top: 40px;
  z-index: 999;
}
#membership section.main .header h1 {
  position: absolute;
  color: white;
  font-family: "refrigerator-deluxe", sans-serif;
  text-transform: uppercase;
  font-size: 5.5em;
  bottom: 25px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.65);
  width: 75%;
  max-width: 600px;
  margin: 0 0 0 10%;
  padding: 0;
  line-height: 0.9em;
  z-index: 999;
}
#membership section.main .header .image {
  height: 300px;
  background-repeat: no-repeat;
  background-size: contain;
  background-attachment: fixed;
  background-position: left top;
}
#membership section.main .header .overlay {
  position: absolute;
  top: 0;
  height: 300px;
  width: 70%;
  z-index: 0;
  background: -moz-linear-gradient(left, #b89162 0%, rgba(184, 145, 98, 0) 100%);
  background: -webkit-linear-gradient(left, #b89162 0%, rgba(184, 145, 98, 0) 100%);
  background: linear-gradient(to right, #b89162 0%, rgba(184, 145, 98, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b89162', endColorstr='#00b89162', GradientType=1);
}
#membership section.main .article-meta {
  width: 80%;
  float: left;
  position: relative;
  padding: 0 10%;
  background: #eaeaeb;
  border-bottom: solid 1px rgba(0, 0, 0, 0.08);
  border-top: solid 1px white;
}
#membership section.main .article-meta .share {
  width: 50%;
  float: right;
  padding: 10px 0 4px;
}
#membership section.main .article-meta .share .facebook,
#membership section.main .article-meta .share .twitter {
  float: right;
}
#membership section.main .article-meta .share .twitter {
  margin-right: 15px;
}
#membership section.main .content {
  width: 80%;
  float: left;
  position: relative;
  padding: 30px 10% 120px;
  max-width: 1160px;
}
#membership section.main .content h2 {
  color: #173441;
  font-family: "adelle", serif;
  font-weight: normal;
  font-size: 2em;
}
#membership section.main .content h3 {
  color: #627e8a;
  font-family: "refrigerator-deluxe", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 2em;
  margin-top: 40px;
  line-height: 1em;
}
#membership section.main .content h4 {
  color: #173441;
  font-family: "adelle", serif;
  font-weight: bold;
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 1.4em;
}
#membership section.main .content p {
  font-family: "freight-text-pro", serif;
  font-size: 1.25em;
  line-height: 1.7em;
  color: #173441;
  margin: 1.75em auto;
  opacity: 0.8;
}
#membership section.main .content p.sub {
  margin-top: 0.25em;
  line-height: 1.5em;
}
#membership section.main .content ul {
  font-family: "adelle", serif;
  font-size: 1.0em;
  margin: 0 0 0 20px;
  padding: 0;
  color: #173441;
  font-weight: normal;
  letter-spacing: 0.025em;
  list-style: none;
}
#membership section.main .content ul li {
  margin: 15px 0;
  position: relative;
  padding-left: 20px;
}
#membership section.main .content ul li i {
  color: #627e8a;
  margin: 2px 3px 0 0;
  position: absolute;
  left: 0;
}
#membership section.main .content .features {
  width: 45%;
  float: left;
}
#membership section.main .content .features a.cta {
  display: inline-block;
  background: #c6a77f;
  font-family: "adelle", serif;
  text-align: center;
  padding: 18px 13% 16px;
  text-transform: uppercase;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  margin: 18px 0 0 20px;
  letter-spacing: 0.025em;
  max-width: 315px;
  box-sizing: border-box;
  transition: all 0.3s ease-out;
}
#membership section.main .content .features a.cta:hover {
  background: #627e8a;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}
#membership section.main .content .features a.cta i {
  margin-left: 3px;
}
#membership section.main .content .item-photo {
  width: 50%;
  margin-right: 5%;
  float: right;
  position: relative;
  height: auto;
  margin-top: 35px;
}
#membership section.main .content .item-photo img {
  padding: 0 5%;
}
#membership section.main .content .footnote {
  width: 95%;
  margin: 10px 0 0 0;
  float: right;
  text-align: right;
  font-size: 0.75em;
  font-family: "freight-text-pro", serif;
  color: #627e8a;
  clear: both;
  opacity: 0.8;
  letter-spacing: 0.015em;
}
#membership section.main .content .pullout {
  border: solid 4px #c6a77f;
  float: left;
  background: white;
  padding: 0 5%;
  margin-top: 60px;
  border-radius: 12px;
}
#membership section.main .content .pullout h3 {
  margin: 10px 0;
  padding: 0;
  float: left;
  width: 20%;
  font-size: 5.75em;
  color: #627e8a;
  letter-spacing: -0.025em;
}
#membership section.main .content .pullout p {
  float: right;
  width: 75%;
  font-family: "freight-text-pro", serif;
  color: #173441;
  font-size: 1.1em;
  line-height: 1.45em;
  margin-top: 15px;
  margin-bottom: 25px;
  letter-spacing: 0.015em;
  opacity: 1;
}
#membership section.main .content .pullout p b,
#membership section.main .content .pullout p strong {
  color: #c6a77f;
}
#membership section.main .content .upgrades {
  float: left;
  margin-top: 45px;
}
#membership section.main .content .upgrades h4 {
  color: #173441;
  letter-spacing: 0.025em;
  font-size: 1.75em;
  font-weight: normal;
  margin-bottom: 10px;
}
#membership section.main .content .upgrades p {
  opacity: 0.8;
}
#membership section.main .content .upgrades ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#membership section.main .content .upgrades ul li.item {
  float: left;
  width: 47%;
  border: solid 1px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  background: white;
  position: relative;
  margin-bottom: 25px;
  padding: 20px 5% 30px;
  box-sizing: border-box;
}
#membership section.main .content .upgrades ul li.item .contents h5 {
  font-size: 1.75em;
  letter-spacing: 0.025em;
  color: #173441;
  font-family: "freight-text-pro", serif;
  font-weight: bold;
  margin: 0 0 5px;
  padding: 0;
}
#membership section.main .content .upgrades ul li.item .contents .item-meta {
  font-family: "refrigerator-deluxe", sans-serif;
}
#membership section.main .content .upgrades ul li.item .contents .item-meta .price {
  text-transform: uppercase;
  color: #c6a77f;
  font-size: 2em;
}
#membership section.main .content .upgrades ul li.item .contents .item-meta .quantity {
  color: #627e8a;
  text-transform: uppercase;
  font-size: 1.1em;
  letter-spacing: 0.025em;
  margin-left: 5px;
  opacity: 0.75;
}
#membership section.main .content .upgrades ul li.item .contents p.sub {
  font-size: 0.95em;
  margin: 1.1em auto 1.25em;
  opacity: 0.9;
}
#membership section.main .content .upgrades ul li.item .contents .cta {
  color: white;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 0.05em;
  text-align: center;
}
#membership section.main .content .upgrades ul li.item .contents .cta a {
  color: white;
  font-weight: 500;
  background: #c6a77f;
  border-radius: 4px;
  padding: 14px 0 13px;
  transition: all 0.3s ease-out;
}
#membership section.main .content .upgrades ul li.item .contents .cta a:hover {
  background: #627e8a;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}
#membership section.main .content .upgrades ul li.item .contents .cta a i {
  color: white;
  position: relative;
  margin-left: 3px;
}
#membership section.main .content .upgrades ul li.item a {
  text-decoration: none;
  display: block;
}
#membership section.main .content .upgrades ul li.right {
  float: right;
}
#membership section.main .content .upgrades ul li.full {
  width: 100%;
}
#membership section.main .content .upgrades ul li.full .contents {
  width: 50%;
  float: left;
  padding: 30px 0;
}
#membership section.main .content .upgrades ul li.business .contents {
  padding-bottom: 20px;
}
#membership section.main .content .upgrades ul li.business .image {
  width: 40%;
  float: right;
  background: url(../images/join-feature-2023.png) no-repeat;
  background-position: center bottom;
  background-size: contain;
  display: block;
  min-height: 350px;
}
#membership section.main .content .upgrades ul li.business .footnote {
  width: 100%;
  float: left;
  text-align: center;
  opacity: 1;
  font-size: 0.85em;
  line-height: 1.6em;
}
#membership section.main .content .upgrades ul li.business .footnote a {
  display: inline;
  padding: 0;
  margin: 0;
  font-weight: bold;
  color: #173441;
}
#membership section.main .content .upgrades ul li.business .footnote a:hover {
  color: #c6a77f;
}
#membership section.main .content .upgrades ul li.top-tier .contents {
  width: 100%;
}
#membership section.main .content .upgrades ul li.top-tier .contents h6 {
  display: inline-block;
  width: 100%;
  text-transform: uppercase;
  font-size: 1.25em;
  margin-bottom: 5px;
  margin-top: 0;
  font-family: "refrigerator-deluxe", sans-serif;
  color: #627e8a;
}
#membership section.main .content .upgrades ul li.top-tier .contents .details {
  margin: 0;
  width: 100%;
  min-height: 0;
}
#membership section.main .content .upgrades ul li.top-tier .contents .details .sub {
  width: 50%;
  float: left;
  font-size: 0.85em;
  margin: 1.1em auto 1.25em;
  opacity: 0.9;
  color: #173441;
  line-height: 1.75em;
}
#membership section.main .content .upgrades ul li.top-tier .contents .details .sec {
  width: 40%;
  float: right;
}
#membership section.main .content .upgrades ul li.top-tier .contents .details .sec ul {
  border: solid 1px #627e8a;
  border-color: #627e8a !important;
  width: 80%;
}
#membership section.main .content .upgrades ul li.top-tier .contents .details .sec ul li {
  border-bottom: solid 1px #627e8a;
  margin: 0;
  padding: 6px 30px;
}
#membership section.main .content .upgrades ul li.top-tier .contents .details .sec ul li i {
  color: #173441 !important;
  margin-left: 15px;
}
#membership section.main .content .upgrades ul li.top-tier .contents .details .sec ul li:last-child {
  border-bottom: none;
}
#membership section.main .content .upgrades ul li.top-tier .contents .cta {
  width: 50%;
}
#membership section.main .content .upgrades ul li.top-tier .footnote {
  width: 100%;
  float: left;
  text-align: center;
  opacity: 1;
  font-size: 0.85em;
  line-height: 1.6em;
}
#membership section.main .content .upgrades ul li.top-tier .footnote a {
  display: inline;
  padding: 0;
  margin: 0;
  font-weight: bold;
  color: #173441;
}
#membership section.main .content .upgrades ul li.top-tier .footnote a:hover {
  color: #c6a77f;
}
#membership section.main .content .upgrades ul li.brewer {
  position: relative;
  overflow: hidden;
}
#membership section.main .content .upgrades ul li.brewer .contents {
  z-index: 99;
  position: relative;
  padding-bottom: 15px;
}
#membership section.main .content .upgrades ul li.brewer .contents .details {
  background: transparent;
}
#membership section.main .content .upgrades ul li.brewer .cta,
#membership section.main .content .upgrades ul li.brewer .footnote {
  position: relative;
  z-index: 99;
}
#membership section.main .content .upgrades ul li.brewer .footnote {
  width: 50%;
}
#membership section.main .content .upgrades ul li.brewer .cta {
  margin-top: 10px;
}
#membership section.main .content .upgrades ul li.brewer .background {
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
}
#membership section.main .content .upgrades ul li.brewer .background .cover {
  width: 100%;
  height: 100%;
  z-index: 9;
  position: absolute;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+40,ffffff+100&0.9+40,0+100 */
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.95) 40%, rgba(255, 255, 255, 0) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.95) 40%, rgba(255, 255, 255, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 40%, rgba(255, 255, 255, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6ffffff', endColorstr='#00ffffff', GradientType=1);
  /* IE6-9 */
}
#membership section.main .content .upgrades ul li.brewer .background img {
  width: auto;
  height: 100%;
  position: absolute;
  z-index: 0;
  right: 0;
}
#membership section.main .content .footer .feature-img {
  width: 100%;
  margin-top: 40px;
  float: left;
  border-bottom: solid 1px rgba(0, 0, 0, 0.2);
}
#membership section.main .content .footer .feature-img img {
  width: 80%;
  margin: 0 10% -4px;
  height: auto;
}
#membership section.main .content .footer .footnotes {
  width: 90%;
  margin: 45px 5% 0;
  float: left;
  clear: both;
  color: #627e8a;
  font-size: 0.725em;
  line-height: 1.5em;
}
#membership section.main .content .footer .footnotes a {
  color: #173441;
  text-decoration: none;
}
#membership section.main .content .footer .footnotes a:hover {
  color: #c6a77f;
}
#membership #connect {
  height: auto;
  padding: 90px 0 150px;
  min-height: 0;
}
#membership #connect .connect {
  clear: both;
  position: relative;
  transform: translateY(0);
  top: 0;
  width: 80%;
  margin: 0 10%;
}
#membership #connect .connect .email-signup #mc_embed_signup .mc-field-group {
  margin-bottom: 25px;
}
#membership #connect .connect .email-signup #mc_embed_signup input[type="submit"] {
  padding: 10px 0;
  min-height: 50px;
}
/* RESPONSIVE STYLES */
@media (max-width: 1200px) {
  #sidebar {
    min-width: 255px;
  }
  #sidebar .logo {
    height: 245px;
    margin-top: 15px;
  }
  #sidebar a.site:hover .logo {
    margin-top: 15px;
  }
  #fullpage {
    margin-left: 255px;
  }
  #welcome .intro h2 {
    font-size: 5.8em;
  }
  #welcome .intro p {
    width: 100%;
    font-size: 1.15em;
  }
  #mission .mission h2 {
    font-size: 4.2em;
  }
  #mission .mission p {
    width: 100%;
  }
  #beers .beers h2 {
    font-size: 4em;
  }
  #beers .beers ul.brew-list {
    margin-bottom: 25px;
  }
  #beers .beers ul.brew-list li {
    min-height: 165px;
  }
  #beers .beers ul.brew-list li h4 {
    font-size: 1.55em;
  }
  #beers .beers ul.brew-list li h5 {
    letter-spacing: 0.025em;
  }
  #connect .connect h2 {
    font-size: 4em;
  }
  #connect .connect p {
    margin-top: 15px;
    font-size: 1.05em;
    line-height: 1.5em;
  }
  #connect .connect .email-signup #mc_embed_signup .lname {
    width: 42%;
  }
  #connect .connect .email-signup #mc_embed_signup .fname {
    width: 42%;
  }
  #connect .connect .email-signup #mc_embed_signup .email input {
    max-width: none;
    width: 100%;
    padding: 10px 2%;
  }
  #connect .connect .email-signup #mc_embed_signup input[type="submit"] {
    max-width: none;
    width: 100%;
  }
  .details {
    width: 60%;
    margin: 0 20%;
  }
}
@media (max-height: 705px) and (min-width: 1025px) {
  #sidebar {
    min-width: 200px;
  }
  #sidebar .logo {
    height: 220px;
  }
  #sidebar .sidemenu ul li a {
    padding: 5px  0  5px 15%;
  }
}
@media (max-width: 1147px) {
  #membership section.main .content .upgrades ul li.item {
    min-height: 325px;
  }
  #membership section.main .content .upgrades ul li.business .footnote br {
    display: none;
  }
  #membership section.main .content .pullout p {
    width: 70%;
  }
}
@media (max-width: 1025px) {
  #sidebar {
    min-width: 200px;
  }
  #sidebar .logo {
    height: 195px;
  }
  #fullpage {
    margin-left: 190px;
  }
  #welcome {
    width: 100%;
  }
  #welcome .intro h3 {
    margin-bottom: 10px;
    font-size: 3em;
  }
  #welcome .intro h2 {
    font-size: 6.8em;
    line-height: 0.85em;
  }
  #welcome .intro h1 {
    margin-top: 25px;
    font-size: 0.8em;
  }
  #welcome .intro h1 .rev {
    padding: 9px 15px;
  }
  #welcome .intro p {
    font-size: 1.05em;
    width: 95%;
  }
  #welcome .intro .cta {
    margin-top: 30px;
  }
  #welcome .intro .cta a {
    display: block;
    text-align: center;
    margin-top: 20px;
  }
  #mission {
    width: 100%;
  }
  #mission .mission h2 {
    line-height: 0.9em;
    font-size: 5em;
    margin-bottom: 15px;
  }
  #mission .mission h2 .for {
    height: 46px;
  }
  #mission .mission h2 sup {
    top: 54px;
  }
  #mission .mission h2 br.mobile {
    display: inline;
  }
  #mission .mission p {
    width: 95%;
    font-size: 1.0em;
  }
  #beers {
    width: 100%;
  }
  #beers .beers h2 {
    width: 95%;
    line-height: 0.9em;
    font-size: 3.5em;
  }
  #beers .beers h3 {
    margin-bottom: 15px;
  }
  #beers .beers ul.brew-list li {
    width: 45%;
    margin-right: 5%;
    min-height: 0;
    position: relative;
    padding: 16px 0 13px;
  }
  #beers .beers ul.brew-list li .logo {
    position: absolute;
    left: 0 !important;
    top: -25% !important;
    z-index: 0;
    margin: 0 !important;
    opacity: 0.6;
  }
  #beers .beers ul.brew-list li h4,
  #beers .beers ul.brew-list li h5 {
    position: relative;
    z-index: 999;
  }
  #beers .beers ul.brew-list li h4 {
    margin-top: 0 !important;
  }
  #beers .beers ul.brew-list li .cover {
    display: none;
  }
  #connect {
    width: 100%;
  }
  #connect .connect {
    width: 80%;
  }
  #connect .connect h3 {
    margin-left: 0;
  }
  #connect .connect h2 {
    line-height: 0.9em;
    font-size: 5em;
    margin-bottom: 15px;
  }
  #connect .connect .social-links {
    width: 100%;
  }
  #connect .connect p {
    width: 100%;
  }
  .details {
    width: 50%;
    margin: 0 25%;
  }
  #news article.main .header .image {
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
  }
  #membership section.main .header .image {
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
  }
  #membership section.main .content .features {
    width: 100%;
    margin-bottom: 35px;
  }
  #membership section.main .content .features a.cta {
    max-width: none;
  }
  #membership section.main .content .item-photo {
    width: 100%;
    height: auto;
    margin-top: 15px;
    margin-right: 0;
  }
  #membership section.main .content .item-photo img {
    position: relative;
    margin-bottom: -4px;
  }
  #membership section.main .content .item-photo .footnote {
    text-align: center;
  }
  #membership section.main .content .item-photo .footnote br {
    display: none;
  }
  #membership section.main .content .pullout {
    padding: 3px 10% 20px;
  }
  #membership section.main .content .pullout h3 {
    width: 100%;
    text-align: center;
    font-size: 4.5em;
  }
  #membership section.main .content .pullout p {
    width: 100%;
    text-align: center;
    margin-top: 0;
  }
  #membership section.main .content .upgrades ul li.full .contents {
    width: 100%;
  }
  #membership section.main .content .upgrades ul li.business .image {
    width: 100%;
  }
  #membership section.main .content .upgrades ul li.top-tier .contents {
    padding-bottom: 15px;
  }
  #membership section.main .content .upgrades ul li.top-tier .contents .details .sub,
  #membership section.main .content .upgrades ul li.top-tier .contents .details .sec {
    width: 100%;
  }
  #membership section.main .content .upgrades ul li.top-tier .contents .details .sec ul {
    width: 100%;
    border: none;
  }
  #membership section.main .content .upgrades ul li.top-tier .contents .details .sec ul li {
    float: left;
    width: 32%;
    box-sizing: border-box;
    font-size: 0.9em;
    border: none;
  }
  #membership section.main .content .upgrades ul li.top-tier .contents .cta {
    width: 100%;
    margin-top: 35px;
  }
  #membership section.main .content .upgrades ul li.brewer .contents .cta {
    margin-top: 10px;
  }
  #membership section.main .content .upgrades ul li.brewer .background .cover {
    background: rgba(255, 255, 255, 0.92);
  }
  #membership section.main .content .upgrades ul li.brewer .footnote {
    width: 100%;
  }
}
@media (max-width: 830px) {
  #membership section.main .content {
    padding: 30px 6% 120px;
  }
  #news article.main .content .tank .photo {
    width: 100%;
    position: relative;
    height: 225px;
    margin-bottom: 15px;
  }
  #news article.main .content .tank .photo img {
    width: 100%;
    max-width: 100%;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
  }
  #news article.main .content .tank .descrip {
    width: 100%;
    margin: 0;
  }
}
@media (max-width: 769px) {
  #beers .beers ul.brew-list li {
    width: 95%;
  }
  .details {
    width: 70%;
    margin: 0 15%;
  }
}
@media (max-width: 767px) {
  #sidebar {
    height: 440px;
    width: 100%;
    position: relative;
    float: left;
  }
  #sidebar .logo {
    margin-bottom: 30px;
    height: 235px;
  }
  #sidebar a.site:hover .logo {
    margin-bottom: 60px;
  }
  #sidebar .contact {
    position: relative;
    float: left;
    width: 100%;
    margin: 70px 0 0;
    padding: 0;
    text-align: center;
  }
  #sidebar .contact a {
    display: block;
  }
  #sidebar .contact .social {
    text-align: center;
    width: 100%;
  }
  #sidebar .contact .social ul {
    display: inline-block;
  }
  #sidebar .sidemenu {
    display: block;
  }
  #sidebar .sidemenu ul {
    width: 90%;
    margin: 0 5%;
  }
  #sidebar .sidemenu ul li {
    width: 40%;
    margin: 0 5%;
    float: left;
    text-align: center;
  }
  #sidebar .sidemenu ul li a {
    border: solid 1px #627e8a;
    border-radius: 4px;
    padding: 10px 10px 9px;
  }
  #sidebar .sidemenu ul li:nth-child(1) {
    display: none;
  }
  #sidebar .sidemenu ul li:nth-child(2) {
    display: none;
  }
  #sidebar .sidemenu ul li:nth-child(5) {
    display: none;
  }
  #fullpage {
    float: left;
    margin-left: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    margin-top: 130px;
  }
  #welcome {
    height: auto;
    padding: 60px 0 80px;
    min-height: 0;
  }
  #welcome .intro {
    transform: translateY(0);
    top: 0;
    width: 80%;
    margin: 0 10%;
  }
  #welcome .intro h3 br {
    display: inline;
  }
  #welcome .intro h3 .for {
    transform: translateY(0);
    height: 40px;
    background-size: 150%;
  }
  #welcome .intro h3 sup {
    top: 41px;
  }
  #welcome .intro h2 {
    font-size: 3.5em;
    margin-top: 20px;
  }
  #welcome .intro h1 {
    width: 98%;
  }
  #welcome .intro h1 .rev {
    width: 100%;
    padding: 9px 0;
    text-align: center;
    letter-spacing: 0.025em;
  }
  #welcome .intro h1 .secondary {
    width: 100%;
    text-align: center;
    padding: 8px 0;
    display: inline-block;
  }
  #welcome .intro p {
    width: 100%;
    font-weight: 500;
    font-size: 1em;
  }
  #mission {
    height: auto;
    padding: 60px 0 80px;
    min-height: 0;
  }
  #mission .mission {
    transform: translateY(0);
    top: 0;
    width: 80%;
    margin: 0 10%;
  }
  #mission .mission h2 {
    font-size: 2.75em;
  }
  #mission .mission h2 .for {
    height: 32px;
    transform: translate(-5px, 0);
  }
  #mission .mission h2 sup {
    top: 28px;
    margin-left: -5px;
  }
  #mission .mission h3 {
    font-size: 0.75em;
    margin-bottom: 20px;
  }
  #mission .mission p {
    font-size: 0.95em;
    line-height: 1.65em;
    width: 100%;
  }
  #beers {
    height: auto;
    padding: 60px 0 80px;
    min-height: 0;
  }
  #beers .beers {
    transform: translateY(0);
    top: 0;
    width: 78%;
    margin: 0 11%;
  }
  #beers .beers h2 {
    font-size: 2.75em;
  }
  #beers .beers h3 {
    font-size: 0.75em;
    margin-bottom: 20px;
  }
  #beers .beers ul.brew-list li {
    width: 100%;
    margin-right: 0;
  }
  #beers .beers ul.brew-list li h4 {
    font-size: 1.35em;
  }
  #connect {
    height: auto;
    padding: 60px 0 120px;
    min-height: 0;
  }
  #connect .connect {
    transform: translateY(0);
    top: 0;
    width: 80%;
    margin: 0 10%;
  }
  #connect .connect h3 {
    font-size: 0.75em;
    margin-bottom: 20px;
  }
  #connect .connect h2 {
    font-size: 2.75em;
  }
  #connect .connect p {
    font-size: 0.95em;
    line-height: 1.65em;
    width: 100%;
  }
  #connect .connect .email-signup #mc_embed_signup .fname,
  #connect .connect .email-signup #mc_embed_signup .lname {
    width: 84%;
  }
  #connect .connect .email-signup #mc_embed_signup .email {
    width: 84%;
  }
  #connect .connect .email-signup #mc_embed_signup .email input {
    padding: 10px 8%;
  }
  #connect .connect .email-signup #mc_embed_signup input[type="submit"] {
    width: 98%;
    padding: 10px 8% 40px;
  }
  .details .brew-content {
    padding: 40px 10px 50px;
  }
  .details .brew-content .description {
    width: 80%;
    margin: 0 10%;
  }
  .details .brew-content .description p {
    font-size: 0.85em;
    line-height: 1.4em;
    margin: 30px 0 35px;
  }
  .details .brew-content .description .stats .abv {
    width: 100%;
  }
  .details .brew-content .description .stats .ibu {
    width: 100%;
  }
  #news article.main .header h1 {
    min-width: 0;
    font-size: 3.5em;
  }
  #news article.main .article-meta {
    padding-bottom: 10px;
  }
  #news article.main .article-meta .dateline {
    width: 100%;
    text-align: center;
  }
  #news article.main .article-meta .share {
    width: 175px;
    margin: 0 auto;
    float: none;
    text-align: center;
  }
  #news article.main .content h2 {
    font-size: 1.5em;
  }
  #news article.main .content h3 {
    font-size: 1.75em;
  }
  #news article.main .content h4 {
    font-size: 1.25em;
  }
  #news article.main .content p {
    font-size: 1.1em;
  }
  #membership section.main .header h1 {
    min-width: 0;
    font-size: 3.25em;
    letter-spacing: -0.025em;
  }
  #membership section.main .article-meta .share {
    width: 175px;
    margin: 0 auto;
    float: none;
    text-align: center;
  }
  #membership section.main .content {
    padding: 30px 10% 120px;
  }
  #membership section.main .content h2 {
    font-size: 1.25em;
  }
  #membership section.main .content h3 {
    font-size: 1.75em;
    line-height: 1.0em;
  }
  #membership section.main .content h4 {
    font-size: 1.25em;
  }
  #membership section.main .content p {
    font-size: 1.1em;
  }
  #membership section.main .content ul {
    margin: 0;
  }
  #membership section.main .content ul li {
    font-size: 0.95em;
    letter-spacing: -0.025em;
  }
  #membership section.main .content .pullout h3 {
    font-size: 3.5em;
    letter-spacing: 0.05em;
  }
  #membership section.main .content .pullout p {
    font-size: 0.95em;
  }
  #membership section.main .content .features a.cta {
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    display: block;
    letter-spacing: -0.015em;
    font-weight: 600;
  }
  #membership section.main .content .item-photo {
    margin-right: 5%;
  }
  #membership section.main .content .item-photo img {
    width: 100%;
    height: auto;
  }
  #membership section.main .content .upgrades ul li.item {
    width: 100%;
    min-height: 0;
    padding: 15px 10% 20px;
    letter-spacing: normal;
  }
  #membership section.main .content .upgrades ul li.item .contents h5 {
    line-height: 1.1em;
    margin-bottom: 10px;
  }
  #membership section.main .content .upgrades ul li.item .contents .cta a {
    letter-spacing: -0.015em;
    font-weight: 600;
    font-size: 0.85;
  }
  #membership section.main .content .upgrades ul li.business .image {
    min-height: 180px;
  }
  #membership section.main .content .upgrades ul li.top-tier .contents .details .sec ul li {
    width: 100%;
  }
  #membership section.main .content .upgrades ul li.brewer .background {
    display: none;
  }
}