.beer-card-grid {
	width: 99%;
	margin: auto;
	max-width: 1200px;
	display: grid;
	grid-template-columns: repeat(auto-fill, 325px);
	grid-gap: 2rem;
	justify-content: center;
	padding: 20px;
}

/* outer element */
.beer-card-form {
  /* set width 2.5 */
	width: 325px;
  /* set height 3.5 */
	height: 525px;
  /* set if you want underneith card to have
  a different color than the page background */
	/*background-color: green;*/
}

.beer-card-form:focus {
	outline: none;
}

/* boarder radius for outer card */
.beer-card-form, .beer-card-content, .beer-card-front, .beer-card-back {
  border-radius: 8px;
}

/*  */
.beer-card-content {
  /* set margin if needed */

	width: 100%;
	height: 100%;
	/*box-shadow: 2px 2px 8px 1px gray;*/
  /* flip to front speed */
	transition: transform 1s;
  transform-style: preserve-3d;
}

/* size and position of card front and back */
.beer-card-front, .beer-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  /* for centering the .beer-card-front-inner .beer-card-back-inner */
  display: grid;
}

/* background color for card front */
.beer-card-front {
  /* set if you want card front to have
  a different color than the page background */
  background: #fff;
	box-shadow: 2px 2px 8px 1px #666;
}

.beer-card-back {
	box-shadow: 2px 2px 8px 1px #444;
}

.on-tap .beer-card-front {
	background: #4C9BD5;
}

/*  */
.beer-card-front-inner {
	border: medium solid #4C9BD5;
  /* This will need to get adjusted */
	background-size: 90%;
	background-repeat: no-repeat;
	background-position: bottom;
}

.on-tap .beer-card-front-inner {
	border: medium solid #fff;
}




.beer-card-back-bottom {
	display: grid;
	grid-template-columns: 10fr 1fr 1fr;
	position: absolute;
	bottom: 1rem;
}


ul.beer-serving-sizes, ul.beer-serving-prices {
  display: inline;
  list-style-type: none;
  text-align: right;
  margin: 1rem;
  margin-top: 1.5rem;
  padding: 0;
}

/*
ul.beer-serving-sizes {
  grid-column-start: 2;
}

ul.beer-serving-prices {
  grid-column-start: 3;
}
*/





/*  */
.beer-card-front-inner, .beer-card-back-inner {
  border-radius: 10px;
	width: 93%;
	height: 95%;
	margin: auto;
	align-items: center;
  position: relative;
}

/*  */
.beer-card-back {
  /* set if you want card back to have
  a different color than the page background */
  background-color: #fff;
  /* set if you want card back to have
  a  background image */
  /* text color for the back of the card */
  color: black;
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg) translateZ(1px);
}



.beer-card-form:hover .beer-card-content, .beer-card-form:active .beer-card-content {
	transform: rotateY( 180deg ) ;

  transition: transform 1s;
}





/* HORIZONTAL RULE */

/*  */
.horizontal-rule {
  width: 100%;
  height: 1px;
  background-color: #4C9BD5;;
  margin-top: .6rem;
}



/* media queries */

@media (pointer:fine) {
	.beer-card-form:hover .beer-card-content {
		transform: rotateY( 180deg ) ;
 	 	/* flip to back speed */
 	 	transition: transform 1s;
	}
}

@media (pointer:coarse) {
	.img-anchor:focus .beer-card-content {
		transform: rotateY( 180deg ) ;
 	 	/* flip to back speed */
 	 	transition: transform 1s;
	}
}

@media screen and (min-width:1179px){
	.non-beer-content {grid-column: span 3; }
}

@media screen and (min-width:755px) {
	.on-tap-link {display: none;}
}


/* styles for test page only */

.beer-card-form:last-child {
  margin-bottom: 4rem;
}