.content {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  max-width: 1200px;
  margin-bottom:50px;
}

.bookcard {
  color: inherit;
  perspective: 1200px;
  margin: 2em 1em;
  position: relative;
  height: 336px;
  width: 192px;
  
}
.front img{
	height:296px;
	box-shadow: 0 20px 20px -10px rgba(0, 0, 0, 0.6);}
.front,
.back {
  height: 85%;
  width: 100%;
  display: flex;
  position: absolute;
  color:#FFF;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: ease-in-out 600ms;
  box-shadow: 0px 13px 20px 0px rgba(0, 0, 0, 0.6);
  background: linear-gradient(to bottom, #000, #666);
  

}


.Binfo{ position:relative; display:flex;width: 90%; text-align:center; margin:auto auto; padding:2%; font-size:1.2em; flex-direction:column}
.binfo li{line-height:25px;}
.bookcard:hover .front {
  transform: rotateY(180deg);
}
.bookcard:nth-child(even):hover .front {
  transform: rotateY(-180deg);
}

.back {
  transform: rotateY(-180deg);
  font-size:.8em;
  
}
.back ul{
  list-style:none;
  width:100%;
  text-align:center;
  line-height:1.2em;}
  
.bookcard:hover .back {
  transform: rotateY(0deg);
}
.bookcard:nth-child(even) .back {
  transform: rotateY(180deg);
}
.bookcard:nth-child(even):hover .back {
  transform: rotateY(0deg);
}


.buttonlink {
  transform: translateZ(40px);
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  font-weight: bold;
  color:#FF0;
  padding: 0.4em;
  border-radius: 5px;
  font: inherit;
  font-size:11px;
  background: linear-gradient(135deg, #666, #000);
  border: none;
  transform-style: preserve-3d;
  transition: 300ms ease;
  margin:20 0 auto;
  
}
.buttonlink:before {
  transition: 300ms ease;
  position: absolute;
  display: block;
  content: "";
  transform: translateZ(-40px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  border-radius: 0px;
  left: 10px;
  top: 10px;
  box-shadow: 0 0 15px 11px #666;
  background-color: #666;
}
.buttonlink:hover {
  transform: translateZ(55px);
}
.buttonlink:hover:before {
  transform: translateZ(-55px);
}
.buttonlink:active {
  transform: translateZ(20px);
}
.button:active:before {
  transform: translateZ(-20px);
  top: 12px;
}

.bookcard .shoplink{margin-top:300px}