.heads {
  /*background-color: #eee;*/
}

@media (max-width: 768px) {
  .unicorn-container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-left: 1em;
    padding-right: 1em;
  }
}
@media (min-width: 768px) {
  .unicorn-container {
      width: 100%;
      margin-right: auto;
      margin-left: auto;
      padding-left: 10em;
      padding-right: 5em;
  }
  .unicorn-container p {
    max-width: 620px;
    margin-right: auto;
    margin-left: auto;
  }
}

.unicorn-container p {
  text-align: center;
  color: #191c1f;
/*
  color: rgb(25,28,31);
  font-family: 'Charter-Roman', 'Charter', serif; font-size: 30px;
*/
  font-family: 'Charter-Roman', 'Charter', serif; font-size: 1.5em;
}

@media (max-width: 768px) {
  .beer-container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-left: 1em;
    padding-right: 1em;
  }
}
@media (min-width: 768px) {
  .beer-container {
      width: 100%;
      margin-right: auto;
      margin-left: auto;
      padding-left: 2em;
      padding-right: 5em;
  }
  .beer-container h2 {
    margin-left: 6.5em;
  }
  .beer-container p {
    max-width: 620px;
    margin-left: 1em;
  }
}

.beer-container h2 {
  text-align: left;
  color: #4d4d4d;
  margin-bottom: 2em;
/*
  font-family:'Charter-Bold', 'Charter', serif;font-weight:700;font-size:48px;;
*/
  font-family:'Charter-Bold', 'Charter', serif;
  font-weight: 700;
  font-size: 3em;
}

.beer-container .info h3 {
  font-family:'Charter-Roman', 'Charter', serif;
  font-size: 30px;
  color: #4d4d4d;
  text-decoration: underline;
}
.beer-container .info strong {
  font-family: 'Charter-Roman', 'Charter', serif;
  font-size:24px;
  color: #4d4d4d;
}

.beer-container .info {
  font-family: 'Charter-Roman', 'Charter', serif;
  font-size:24px;
  color: #8c8c8c;
  max-width: 16em;
}
.beer-container .info ul {
  list-style-type: none;
}
.beer-container .info li {
  margin-left: -1.5em;
  margin-padding: 0;
}

/*
@media (min-width: 860px) {
.beer-container .tmp {
  text-align: right;
}
.beer-container .info {
  display: inline-block;
  height: 10em;
  max-width: 15em;
  text-align: left;
}
}
*/
/*
  float: right;
  float: right;
@media (max-width: 850px) {
.beer-container .facts {
}
.beer-container .dates {
}
}
*/

/*

.beer-container .tmp {
  float: right;
}
.beer-container .tmp {
}
*/
/*
.beer-container .info {
  float: left;
}

@media (min-width: 992px) {
  .beer-container .facts {
    margin-left: 100px;
  }
}
@media (min-width: 1200px) {
  .beer-container .facts {
    margin-left: 35%;
  }
}
@media (min-width: 1350px) {
  .beer-container .facts {
    margin-left: 40%;
  }
}
.beer-container .dates {
}
*/

.beer-container figure {
  max-width: 20em;
}
@media (max-width: 640px) {
  .beer-container figure {
    margin-left: auto;
    margin-right: auto;
  }
  .beer-container figure img {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}
@media (min-width: 640px) {
  .beer-container figure {
  /*
    border: 2px black solid;
    min-width: 20%;
    max-width: 25%;
    margin-top: -5em;
  */
    float: right;
    overflow: hidden;
    display: inline-block;
    margin-right: 20%;
    /*
    display: inline-block;
    text-align: right;
    */
  }
}

.beer-container figure::after {
    content: "";
    height: 0;
    clear: both;
    display: block;
}
/*
*/

.listlogo {
  max-height: 10em;
  max-width: 10em;
}

.beer-header {
  text-align: left;
  color: #4d4d4d;
  margin-bottom: 2em;
/*
  font-family:'Charter-Bold', 'Charter', serif;font-weight:700;font-size:48px;;
*/
  font-family:'Charter-Bold', 'Charter', serif;
  font-weight: 700;
  font-size: 3em;
}

.beerlogos {
  display: flex;
  flex-wrap: wrap;
}

.beerlist {
  min-width: 15em;
  max-height: 25em;
  max-width: 15em;
/*
*/
  padding: 1em;
  text-align: center;
  margin-left: 5em;
}

.beerlogo img {
  width: 6em;
  height: 6em;
}

.beerlist a {
  font-family:'Charter-Roman', 'Charter', serif;
  font-size: 1.87em;
  color: #cccccc;
}

@media (max-width: 800px) {
  .derp {
    align: center;
    margin-bottom: -5em;
  }
}
@media (min-width: 800px) {
  .derp {
    align: center;
    margin-bottom: -5em;
  }
}

.heads a {
  text-decoration: none;
}
.heads a:visited {
  text-decoration: none;
}
.heads a:hover {
  text-decoration: none;
}

.beerlist a:visited {
  font-family:'Charter-Roman', 'Charter', serif;
  font-size: 1.87em;
  color: #cccccc;
}

.beerlist a:hover {
  font-family:'Charter-Roman', 'Charter', serif;
  font-size: 1.87em;
  color: black;
}

.beer-container figure img {
  max-width: 20em;
  max-height: 30em;
/*
  min-width: 15em;
  max-width: 25em;
*/
}

.info {
  padding-right: 1em;
}
.rightbound {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
/*
.tmpf > div {
  width: 15em;
  width: 15em;
  margin: 10px;
}
  */
/*
  margin-left: 1em;
*/
/*
@media (min-width: 1000px) {
  .beer-container .facts {
    float: left;
    margin-left: 200px;
  }
  .beer-container .dates {
    float: left;
    margin-left: 1em;
  }
}
@media (min-width: 1400px) {
  .beer-container .facts {
    float: left;
    margin-left: 500px;
  }
  .beer-container .dates {
    float: left;
    margin-left: 1em;
  }
}
@media (min-width: 1470px) {
  .beer-container .facts {
    float: left;
    margin-left: 600px;
  }
  .beer-container .dates {
    float: left;
    margin-left: 1em;
  }
}
*/
/*
.beer-container h3 {
  float: left;
}
.beer-container ul {
  float: left;
}
*/

.beer-container p {
  text-align: left;
/*
  text-align: center;
  font-family: 'Charter-Roman', 'Charter', serif; font-size: 30px;
  color: rgb(25,28,31);
*/
  color: #8c8c8c;
  font-family: 'Charter-Roman', 'Charter', serif; font-size: 1.25em;
}

.beer-container::after {
  content: "";
  clear: both;
  display: table;
}

img.unicorn {
  float: right;
  margin-top: 0.5em;
  margin-right: 1em;
  width: 8%;
}

img.lines1 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 4em;
  z-index: 5;
  pointer-events: none;
}

img.unicorntext {
  position: relative;
  margin-top: 0.5em;
  margin-left: 4em;
  margin-bottom: -1.4em;
  width: 40%;
  pointer-events: none;
  z-index: 5;
}


h1, .h1 .unicorn {
  font-size: 5vw;
}

span.unicorn {
  padding-left: 1.0em;
}

span.unicorn-brewery {
  padding-left: 0.5em;
  vertical-align: bottom;
  height: 1em;
}

h2, .hw {
  color: #a6a6a6;
/*
  font-family: 'STSongti-TC-Regular', 'Songti TC'; font-size: 96px;
*/
  font-family: 'STSongti-TC-Regular', 'Songti TC'; font-size: 5em;
}

.menu-row {
  display: flex;
  flex-wrap: wrap;
  background-color: #eee;
}

.menu-item {
  padding: 0.75em;
  margin-left: 0.5em;
  margin-right: 0.75em;
}

.space-xsmall {
  margin-top: 0.75em;
}

.space-small {
  margin-top: 1em;
}

.space-big {
  margin-top: 2em;
}

.space-large {
  margin-top: 5em;
}

img {
  max-width: 95%;
}

a {
  color: black;
}

a:hover {
  color: black;
}

a:visited {
  color: black;
}

.mainNavBar {
  z-index: 20;
}

nav a {
  color: black !important;
  font-size: 1.5em !important;
}

nav {
  /*height: 2.5em;*/
  border-bottom: solid 0.2em #aaa;
}

.navbar {
  padding-left: 10em;
  padding-top: 0em;
  padding-bottom: 0em;
  background-color: #eee;
  min-height: 0.5em;
}
@media (max-width: 768px) {
  .navbar {
     padding-left: 8em;
  }
}
.navbar-brand {
  padding-top: 1.5em;
  height: 0.5em;
  line-height: 0.5em;
}
.navbar-toggle {
  margin-top: 0em;
  padding: 0px 0px !important;
}

.border-md-right {
  max-height: 3em;
}
@media (min-width: 768px) {
  .border-md-right {
    border-left: 0;
    border-right: 0.3em solid transparent;
    border-image: url(../img/border1.svg) 10% stretch;
  }
}

@media (min-width: 768px) {
  .navbar-nav > li > a {
    padding-top: 0em;
    padding-bottom: 0em;
    line-height: 1em;
  }
}

.navbar-item {
  padding-left: 1em;
  padding-right: 1em;
}
.navpad {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}


img[src*="#small"] {
   max-width:400px;
   max-height:400px;
   margin-top: -0.75em;
   margin-bottom: 2em;
}

footer {
  padding: 1.25em;
  /*
  background-color: #eee;
  */
  min-height: 7em;
  background-color: #ccccccff;
}

.downtext {
  margin-top: 0.6em;
  color: #666666;
  /*
  color: rgb(102,102,102);
  font-family:'Charter-Bold', 'Charter', serif; font-weight: 700;font-size: 24px;
  */
  font-family:'Charter-Bold', 'Charter', serif; font-weight: 700;font-size: 1.5em;
}

li {
  color: #8c8c8c;
  font-family: 'Charter-Roman', 'Charter', serif; font-size: 1.25em;
}