/*! BEER MAP STYLES
 * 	authored by: @ambienttraffic
 *  modified on: 1/7/2014
 */
body {
  background-color: #262937;
  color: #d6ddda;
}
a {
  color: #fd4436;
}
a:hover {
  color: #fe7368;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "abril-fatface", "jubilat", Georgia, serif;
  font-weight: 400;
  color: #e2e9e9;
}
.ad-300x250 {
  display: block;
}
.ad-300x250 > div {
  margin: 0 auto;
  width: 300px;
}
.se-smile {
  background: transparent url(http://static.seriouseats.com/1/live/pages/magazine/se-smile-large.png) top left no-repeat;
  background-size: 100%;
  display: inline-block;
  width: 30px;
  height: 25px;
  margin: 0 6px 0 6px;
}
#button-to-top.affix a {
  background-color: #fd4436;
  background-color: rgba(253, 68, 54, 0.85);
}
#button-to-top.affix a:hover {
  background-color: #fe7368;
  background: rgba(254, 115, 104, 0.85);
}
.nav a,
.navbar-brand,
.share-bar a {
  color: #7a808a;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.navbar-brand:hover,
.share-bar a:hover {
  color: #fd4436;
}
.navbar-nav {
  font-family: "abril-fatface", "jubilat", Georgia, serif;
  background: #262937;
  width: 100%;
}
.navbar-fixed-top .navbar-nav {
  background: #262937;
  background: rgba(59, 63, 85, 0.85);
}
.navbar-fixed-top .navbar-nav a {
  color: #fcfcf5;
}
.navbar-fixed-top .navbar-nav .active a {
  color: #262937;
  background-color: #f5f1e6;
}
.state {
  display: block;
  padding-bottom: 10px;
}
.state a {
  text-decoration: none;
}
.state h2 {
  font-size: 1.75em;
  line-height: 1.125em;
  margin: 0 0 6px 0;
}
.state a h2,
.state a:link h2,
.state a:visited h2 {
  color: #e2e9e9;
}
.state a:hover h2 {
  color: #ffffff;
}
.state h3 {
  font-weight: 600;
  font-family: "omnes-pro", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  color: #7a808a;
  font-size: 0.875em;
  padding-bottom: 6px;
  border-bottom: 1px dotted #48495b;
}
.state a h4 {
  color: #fd4436;
  font-style: italic;
  font-size: 1.25em;
}
.state a:hover h4 {
  color: #fe7368;
}
.state .icon-external-link {
  color: #fd4436;
  font-size: 60%;
  margin-left: 8px;
}
.state a:hover .icon-external-link {
  color: #fe7368;
}
.state .photo-credit {
  margin-top: 8px;
  display: block;
  font-size: 0.75em;
  font-style: italic;
  color: #7a808a;
}
.photo-credit a:link,
.photo-credit a:visited {
  color: #7a808a;
}
.photo-credit a:hover {
  color: #7a808a;
}
.state .photo {
  margin-bottom: 12px;
}
#svg-map .state {
  fill: #f5f1e6;
  stroke: #ded5d4;
  background-color: #f5f1e6;
  -webkit-transition: fill 200ms linear;
  transition: fill 200ms linear;
}
#svg-map .state.active {
  stroke: #ffffff;
  fill: #fd4436;
}
#svg-map .state:hover {
  stroke: #ffffff;
  fill: #fd4436;
  cursor: pointer;
}
#svg-map .state {
  box-shadow: none;
  background: transparent;
  z-index: 90;
}
#svg-map .state:before,
#svg-map .state:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
#svg-map .state:after {
  clear: both;
}
.map-view .state h3 {
  margin-top: 0;
}
.map {
  position: relative;
}
#states,
#more-posts {
  clear: both;
  max-width: 90%;
  margin: 0 auto;
}
.map-view {
  padding: 2em 0;
  position: relative;
}
#list .photo img {
  max-width: 100%;
}
footer.footer {
  clear: both;
}
@media (min-width: 1500px) {
  .lead-in {
    font-size: 1.75em;
  }
  #list .photo img {
    min-height: 220px;
    width: 400px;
  }
  .list-view .state {
    width: 21%;
    margin-right: 0.5%;
    margin-left: 0.5%;
  }
}
@media (min-width: 992px) {
  .map {
    padding-top: 1em;
    width: 65%;
  }
  #list {
    max-height: 500px;
    height: 500px;
    overflow-y: scroll;
    padding-bottom: 10px;
    padding-top: 20px;
  }
  #list .photo {
    padding: 0 0.75em 0.5em 0;
    float: left;
  }
  #list .photo img {
    margin: 0 auto;
    display: block;
    max-width: 150px;
  }
  #list .wrapper {
    padding-right: 15px;
  }
  .list-view {
    padding-top: 60px;
  }
  .list-view .state {
    width: 29%;
    margin-right: 0.5%;
    margin-left: 0.5%;
  }
  .map-view #list {
    float: right;
    right: 0px;
    width: 30%;
    border-top: 1px solid #48495b;
    border-bottom: 1px solid #48495b;
  }
  .map-view .state h3 {
    margin-left: 160px;
  }
}
@media (min-width: 480px) and (max-width: 991px) {
  .intro {
    font-size: 1.125em;
  }
  .intro p {
    line-height: 1.5em;
  }
  .lead-in {
    font-size: 1.25em;
  }
  .states-container {
    max-width: 440px;
  }
  .list-view .photo {
    float: left;
  }
  .list-view img {
    width: 175px;
    margin: 0 10px 0 0;
  }
  .nav {
    font-size: 0.75em;
  }
  .nav a {
    padding: 12px;
  }
}
@media (max-width: 991px) {
  #list {
    height: 255px;
    overflow-y: scroll;
    border-top: 1px solid #48495b;
    border-bottom: 1px solid #48495b;
    margin-bottom: 15px;
    padding: 1em;
  }
  .state .photo {
    width: 25%;
    margin: 15px 0 15px 15px;
    float: right;
  }
  .state h3,
  .state h2 {
    margin-right: 28%;
  }
  .collection.isotope .module {
    margin-bottom: 0.5em;
  }
  .collection.isotope .module .metadata {
    border-radius: 0;
  }
}
@media (max-width: 767px) {
  #intro-view {
    padding-top: 120px;
  }
  #intro-view .share-bar {
    margin-top: 20px;
  }
  .intro {
    font-size: 1.125em;
  }
  .intro p {
    line-height: 1.5em;
  }
  .lead-in {
    font-size: 1.25em;
  }
  .list-view .state {
    margin-bottom: 5px;
  }
  .collection .module {
    border: 0;
  }
  .collection .module img {
    max-width: none !important;
    width: 100%;
  }
  .nav {
    font-size: 0.75em;
  }
  .nav a {
    padding: 9px;
  }
}
.page-header {
  border-bottom: 1px solid #48495b;
}
header h1 {
  font-size: 2.5em;
  width: 100%;
  padding-top: 0;
  margin-top: 0;
}
header h1 span {
  display: block;
  font-size: 50%;
  font-style: italic;
  color: #7a808a;
}
a.navbar-brand {
  display: block;
  float: none;
  padding-left: 0;
}
#about {
  padding-bottom: 1.5em;
  border-bottom: 1px solid #48495b;
}
.callout {
  color: #fd4436;
  font: italic 1.75em "abril-fatface", "jubilat", Georgia, serif;
}
.signature {
  font-family: "abril-fatface", "jubilat", Georgia, serif;
  padding: 1em;
  text-align: right;
  font-style: italic;
  font-size: 1.125em;
  color: #fd4436;
}
.share-bar {
  padding: 0.5em 0 0.5em 0;
  max-width: 90%;
  margin: 0 auto;
}
.share-bar h6 {
  color: #7a808a;
}
.share-bar a {
  margin: 0 5px;
}
.share-bar {
  padding: 1em;
  text-align: center;
  border-bottom: 1px dotted #48495b;
  border-top: 1px dotted #48495b;
  margin-top: 2.5em;
}
.eagle {
  width: 100%;
  height: 240px;
  display: block;
  background: transparent url('http://static.seriouseats.com/1/live/maps/best-beers-usa-craft-beer-in-every-state/assets/eagle.png') top left no-repeat;
  background-size: 100%;
}
#map-view aside {
  font-family: "abril-fatface", "jubilat", Georgia, serif;
  font-style: italic;
  font-size: 1.75em;
  line-height: 1.25em;
  color: #fd4436;
}
#map-view aside .wrapper {
  background: #ffffff;
  border: 10px solid #fd4436;
  display: block;
  border-radius: 140px;
  max-width: 250px;
}
.note {
  clear: both;
  text-align: center;
  margin: 0 auto;
}
#comments-promo {
  clear: both;
  background: #faf9f6;
  padding: 0.5em 0 1.5em 0;
}
#comments-promo h3 {
  color: #262937;
}
#comments-promo i.icon-comment {
  margin-right: 8px;
}
#comments-promo p {
  color: #3e3d3b;
  font-size: 1.25em;
  font-style: normal;
}
.content-main i {
  color: #fe8a82;
}
.content-main a:hover i {
  color: #fd4436;
}
.collection .module figure {
  background-color: #1e1f24;
}
.collection.isotope .module .metadata {
  background: rgba(27, 28, 31, 0.5);
  border-color: #1e1f24;
}
.collection.isotope .module .metadata footer {
  border-top: 0;
}
.collection.isotope .module h4 a:link {
  color: #e2e9e9;
  font-weight: 400;
  line-height: 1.275em;
}
.collection.isotope .module h4 a:hover {
  color: #fd4436;
}
@media (min-width: 992px) {
  .hero-image {
    display: block;
    width: 60%;
    margin-top: 10%;
    position: absolute;
    right: -5%;
    top: 15%;
    -ms-transform: rotate(270deg);
    /* IE 9 */
    -webkit-transform: rotate(270deg) scaleX(-1);
    -ms-filter: "FlipH";
    filter: FlipH;
    transform: rotate(270deg) scaleX(-1);
  }
  .hero-image img {
    max-width: 100%;
  }
  #about,
  .page-header,
  .navbar-brand {
    margin-right: 45%;
    margin-left: 5%;
  }
  .page-header {
    margin-top: 0;
  }
  .intro p {
    margin: 0 auto 1.5em auto;
  }
  .intro p.callout {
    margin: 1em 1.5em;
  }
  #states,
  #map-view,
  #more-posts {
    padding-top: 4em;
  }
  #about {
    padding-top: 1.5em;
  }
  #map-view aside {
    float: right;
    width: 30%;
  }
}
@media (min-width: 1200px) {
  .hero-image {
    max-width: 800px;
    margin-top: 100px;
  }
  .hero-image img {
    max-height: 42%;
  }
}
@media (max-width: 991px) {
  .hero-image {
    display: block;
    width: 100%;
    float: right;
    margin: 1em 0 2em 0;
  }
  .hero-image img {
    max-width: 65%;
    margin: 0 auto;
    display: block;
  }
  #about,
  .page-header,
  .navbar-brand {
    margin: 0 auto;
    max-width: 65%;
  }
  .page-header {
    margin-top: 0;
  }
  .intro p {
    margin: 0 auto 1.5em auto;
  }
  .intro p.callout {
    margin: 1.5em auto;
  }
  .nav > li {
    display: inline-block;
  }
  .nav {
    margin-top: 0;
    padding-left: 15px;
  }
  #map-view aside .wrapper {
    max-width: 175px;
  }
  #map-view aside .eagle {
    height: 150px;
  }
  #map-view aside {
    padding: 5% 10%;
    font-size: 1.5em;
  }
  #map-view aside p {
    float: left;
    margin-left: 185px;
    padding-top: 40px;
  }
}
@media (max-width: 991px) {
  .hero-image img {
    max-width: 80%;
  }
  #about,
  .page-header,
  .navbar-brand {
    max-width: 80%;
  }
  .callout {
    font-size: 1.25em;
  }
  header h1 {
    font-size: 1.875em;
  }
  #about {
    border-bottom: 0;
  }
  .content-main {
    margin-top: 60px;
  }
}
@media (max-width: 767px) {
  .hero-image img {
    max-width: 90%;
  }
  #about,
  .page-header,
  .navbar-brand {
    max-width: 90%;
  }
}
@media (max-width: 479px) {
  #map-view aside .wrapper {
    max-width: 125px;
    border-width: 3px;
  }
  #map-view aside .eagle {
    height: 125px;
  }
  #map-view aside p {
    margin-left: 135px;
    padding-top: 10px;
  }
}