h1 { font-size:3em; text-align:center; margin:-5% auto 0 auto; padding:0; letter-spacing:.1em; text-indent:.2em}
@media (max-width:600px){
h1 { font-size:2.5em; letter-spacing:0em; text-indent:.1em}}
h1 span { display:inline-block; animation:float .2s ease-in-out infinite; }
 @keyframes float {
  0%,100%{ transform:none; }
  33%{ transform:translateY(-1px) rotate(-2deg); }
  66%{ transform:translateY(1px) rotate(2deg); }
}
h1:hover span { animation:bounce .6s; }
@keyframes bounce {
  0%,100%{ transform:translate(0); }
  25%{ transform:rotateX(20deg) translateY(2px) rotate(-3deg); }
  50%{ transform:translateY(-20px) rotate(3deg) scale(1.1);  }
}

span:nth-child(4n) { color:#9AC365; text-shadow:1px 1px #394411, 2px 2px #394411, 3px 3px #394411, 4px 4px #394411; }
span:nth-child(4n-1) {color:#6D919F; text-shadow:1px 1px #00004F, 2px 2px #00004F, 3px 3px #00004F, 4px 4px #00004F; }
span:nth-child(4n-2) {color:#EDBE01; text-shadow:1px 1px #730000, 2px 2px #730000, 3px 3px #730000, 4px 4px #730000;}
span:nth-child(4n-3) { color:#D6816F; text-shadow:1px 1px #710000, 2px 2px #710000, 3px 3px #710000, 4px 4px #710000;   }

h1 span:nth-child(2){ animation-delay:.05s; }
h1 span:nth-child(3){ animation-delay:.1s; }
h1 span:nth-child(4){ animation-delay:.15s; }
h1 span:nth-child(5){ animation-delay:.2s; }
h1 span:nth-child(6){ animation-delay:.25s; }
h1 span:nth-child(7){ animation-delay:.3s; }
h1 span:nth-child(8){ animation-delay:.35s; }
h1 span:nth-child(9){ animation-delay:.4s; }
h1 span:nth-child(10){ animation-delay:.45s; }
h1 span:nth-child(11){ animation-delay:.5s; }
h1 span:nth-child(12){ animation-delay:.55s; }
h1 span:nth-child(13){ animation-delay:.6s; }
h1 span:nth-child(14){ animation-delay:.65s; }
/**/
.shop{
	color:#FFF;
	width:40%;
	margin:3% auto;
	background:-webkit-linear-gradient(90deg, #C95A43 30%,#CD6650 70%, #D6816F  88%);
	padding:1% 1%; 
	text-align:center; 
	border-radius:50em; 
	display:block;
	box-shadow:#D6816F 2px 2px 5px;
	font-size:1.2em;
	font-weight:bolder;
	z-index:52;
	position:relative}
.shop:hover{ transform: scale(.9)}
@media (max-width:600px){
.shop{	width:70%;}}
	
.content {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  max-width: 1000px;
  margin-bottom:100px;
}

.bookcard {
  color: inherit;
  perspective: 1000px;
  margin: 1.5rem;
  position: relative;
  height: 280px;
  width: 160px;
  
}
.bookcard h4{
	color:#000;
	font-weight:bold;
	font-size:16px;
	}
.front img{
	height:240px;
	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: -webkit-linear-gradient(90deg, #8B4100 10%, #AB951D 60%);

}


.Binfo{width: 95%; float:left; margin:0 0 0 -20; text-align:center;}
.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:14px;
}
.back ul{
  list-style:none;
  line-height:22px;}
  
.bookcard:hover .back {
  transform: rotateY(0deg);
}
.bookcard:nth-child(even) .back {
  transform: rotateY(180deg);
}
.bookcard:nth-child(even):hover .back {
  transform: rotateY(0deg);
}
.button2{
	cursor:pointer;
	color:#0FF;
	border:#0FF 1px solid;
	border-radius: 8px;
	padding:2px 5px;
	margin:2% auto;
	font-size:9px;
	display:block;
	padding:2% 3%;
	background:rgba(255,255,255,0);
	cursor:pointer;}
.button2:hover {
  transform: scale(1.2);
}	

.button {
  cursor:pointer;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  color:#000;
  padding:0.4em;
  border-radius:5px;
  background:#FFF;
  border:#888 1px medium;
  font-size:11px;
  transform-style: preserve-3d;
  transition: 300ms ease;
  margin: auto;
  
}
.button:before {
  transition: 300ms ease;
  position: absolute;
  display: block;
  content: "";
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  border-radius: 0px;
  left: 10px;
  top: 10px;
}
.button:hover {
  transform: translateZ(55px);
}
.button:hover:before {
  transform: translateZ(-55px);
}
.button:active {
  transform: translateZ(20px);
}
.button:active:before {
  transform: translateZ(-20px);
  top: 12px;
}
.booktag1{
	color:#03C;
	border: #03C 1px solid;
	border-radius: 8px;
	padding:2px 5px;
	margin:1px;
	font-size:9px;
	display:inline-block;
	}
.booktag2{
	color:#3F6;
	border:#3F6 1px solid;
	border-radius: 8px;
	padding:2px 5px;
	margin:1px;
	font-size:9px;
	display:inline-block;
	}
.booktag3{
	color:#606;
	border:#606 1px solid;
	border-radius: 8px;
	padding:2px 5px;
	margin:1px;
	font-size:9px;
	display:inline-block;
	}
.booktag4{
	color:#314968;
	border:#314968 1px solid;
	border-radius: 8px;
	padding:2px 5px;
	margin:1px;
	font-size:9px;
	display:inline-block;
	}
.infotag{
	position:absolute;
	top:255px;
	z-index:50;
	}