.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}


.ebookproduct{
	box-sizing: border-box;
	width:  100%;
	display:  flex;
	flex-wrap:  wrap;
	margin:  1rem 0;
	border: 1px solid lightgray;
	padding:  2rem;
    font-size: .8em;
    font-family: arial, sans-serif;
    background: #f3f3f3;
}
.ebookproduct:hover {
  background: #f7f7f7;
}
.ebookproductimage{
	width: 100%;
}
.ebookproductimage img{
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 10px 8px rgba(0, 0, 0, 0.12);
	width:  100%;
	object-fit: cover;
}
.ebookproducttext{
	position:  relative;
	width: 100%;
	padding:0 0 0 0;
	margin-top: 20px;
}
.ebookproducttext h2{
	margin-top: 0px;
	padding-top: 0px;
}
.ebookproductaction{
	width: 100%;
}
.ebookproductaction a.ebk{
	display: block;
	width: 100%;
	padding: .5rem;
	margin: 1rem 0 0;
	text-align: center;
  	font-weight: bold;
  	text-decoration: none;
  	color: #f3f3f3;
  	background: #333;
}
.ebookproductaction a.ebk:hover,.ebookproductaction a.ebk:focus{
  opacity:0.8;
}

@media screen and (min-width:30em) {
  article .ebookproductimage{
    width: 40%;
  }
  article .ebookproducttext{
    width: 50%;
    padding:0 0 0 2rem;
    margin-top: 0px;
  }
}