@charset 'utf-8';

.books-available	{
	position:	absolute;
	top:		calc(var(--menubar-height) + var(--titlecard-height) + var(--trend-border-width));
	left:		0;
	width:		var(--trend-container-width);
	height:		var(--trending-title-height);
	clear:		both;
	float:		left;
	text-align:	center;
	font-size:	var(--trending-title-font-size);
	line-height:	calc(var(--trending-title-height) + .5vw);
	text-shadow:	2px 2px gray;
	vertical-align: middle;
 	border:		var(--trend-border-width) solid gray;
	border-radius:	var(--trending-bradius);
	background-image:	linear-gradient(270deg,
				rgba(250,128,114,.75) 0%,  /* Salmon  */
		 		rgba(191,52,117,1) 50%,  
				rgba(250,128,114,.75) 100%);
}
.trending-main-container {
	position: 	absolute;
	top:		calc(var(--menubar-height) + var(--titlecard-height) + var(--trending-title-height) + calc(var(--trend-border-width) * 3));
	left:		0;
	width:		100%;
	height:		calc(var(--trend-container-height) * var(--num-trend-containers));
	clear:		both;
	float:		left;
	pointer-events: none;
}
.tm-container		{
	position:	relative;
	width:		inherit;
	height:		var(--trend-container-height);
	border-top:	2px solid black;
	border-bottom:	2px solid black;
	overflow:	hidden;
}
.tm-container > img	{
	position:	absolute;
	top:		0;
	left:		0;
	width:		100%;
	height:		auto; /*var(--trend-bookimage-height); */
	object-fit:	cover;
	filter:		blur(0.5vw);
	-webkit-filter:	blur(0.5vw);
	opacity:	0.4;
	pointer-events: auto;
	transition:	transform 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0s,
			opacity   0.5s cubic-bezier(0.65, 0, 0.35, 1) 0s;
}
.tm-container:hover > img {
	opacity:	0.2;
	transform:	scaleX(1.3);
}
.trending-image-container {
	position:	absolute;
	top:		1vw;
	left:		25%;
	clear:		both;
	float:		left;
	width:		auto;
	height:		var(--trend-bookimage-height);
	margin-top:	10%;
	background:	white;
	overflow:	hidden;
	border: 	2px solid black;
	transition:	all 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0s;
}
.trending-image-container > img {
	width:		auto;
	height:		var(--trend-bookimage-height);
	opacity:	0.8;
	pointer-events: auto;
	transition:	transform 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0s,
			opacity   0.5s cubic-bezier(0.65, 0, 0.35, 1) 0s;
}
.tm-container > .tic-special	{
	top:		.5vw;
}
.trending-description {
	position:	absolute;
	top:		0;
	left:		80%;
	opacity:	0;
	text-align:	left;
	padding-right:	5vw;
	transition:	all 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0s;
}
.trending-description > p.basics	{
	font-size:	4vw;
	margin-left:	2%;
	margin-bottom:	0;
	vertical-align: middle;
}
.trending-description > p.pitch		{
	font-size:	2vw;
	margin-top:	1vw;
	margin-left:	2%;
	vertical-align: middle;
        text-align:	justify;
}
.trending-description > p.pitch  a:link {
	color:		 yellow;
	text-decoration: none;
}
.trend-count-container			{
	position:	absolute;
	top:		0;
	left:		4vw;
	transition:	all 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0s;
}
.count-container > h1			{
	font-size:	1.5vw;
	transition:	all 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0s;
}
.tm-container:hover > .trending-image-container {
	left:		5%;
}
.tm-container:hover   h1		{
	opacity:	0;
}
.tm-container:hover > .count-container	{
	left:		1vw;
}

.tm-container:hover > .trending-description {
	left:		30%;
	opacity:	1;
}