

	/* hover effect (Name/blue bg highlight)
	============================================================================= */
	.tr-item .name::before 		 {  transform: scaleX(0);
	  						 transform-origin: bottom right;}

	.tr-item:hover .name::before {  transform: scaleX(1);
	  						 transform-origin: bottom left; cursor:pointer;}

	.tr-item .name::before 	{ content:" "; display:block; position:absolute; top:0; right:0; bottom:0; left:0; inset: 0 0 0 0;
							  background: hsl(200 100% 80%); z-index: -1;
	  							   transition: transform .3s ease;}

	.tr-item .name 		{ position:relative; font-size:1.6rem; line-height:1; padding-top:8px; padding-bottom:8px; margin:0;}

	.tr-item:hover img  { 	transform: scale(1.08);
				   -webkit-box-shadow: 7px 7px 0px 0px rgba(50, 50, 50, 0.08);
				      -moz-box-shadow: 7px 7px 0px 0px rgba(50, 50, 50, 0.08);
				           box-shadow: 7px 7px 0px 0px rgba(50, 50, 50, 0.08);}


	.tr-item.no-effect:hover .name::before {  transform:none;
	  						 transform-origin: none; cursor:default;}


	/* hover effect (line)
	============================================================================= */
	.linelist,
	#body.section a.link-detail h3.linelist-h3  				{ display:inline-block; text-decoration:none; }
	
	.linelist::after,
	#body.section a.link-detail h3.linelist-h3::after  		{ content:''; display:block; width:0; height:5px; background:#333; transition: width .3s; }
	
	.linelist:hover::after,
	#body.section a.link-detail:hover h3.linelist-h3::after  	{ width: 100%; transition: width .3s;}

