.btn-hover 	{ display:inline-block;  padding-bottom:5px; cursor:pointer;}

	.basic-0 		{ background: linear-gradient(currentColor 0 0) 0 100% /var(--d, 0) 3px no-repeat;}
	.basic-0:hover 	{ --d: 100%;}

	.basic-1 		{ background: linear-gradient(#fff 0 0) 0 100% /var(--d, 0) 3px no-repeat; transition:0.5s;}
	.basic-1:hover  { --d: 100%;}

	.basic-2 		{ background: linear-gradient(currentColor 0 0) 100% 100% /var(--d, 0) 3px no-repeat; transition:0.5s;}
	.basic-2:hover  { --d: 100%;}

	.basic-3 		{ background: linear-gradient(currentColor 0 0) bottom /var(--d, 0) 3px no-repeat; transition:0.5s;}
	.basic-3:hover  { --d: 100%;}

	.basic-4 		{ background: linear-gradient(currentColor 0 0) var(--p, 0) 100% /var(--d, 0) 3px no-repeat; transition: 0.3s, background-position 0s 0.3s;}
	.basic-4:hover  { --d: 100%;
	  				  --p: 100%;}

	.basic-5 		{ background: linear-gradient(currentColor 0 0) var(--p, 100%) 100% /var(--d, 0) 3px no-repeat; transition: 0.3s, background-position 0s 0.3s;}
	.basic-5:hover  { --d: 100%;
					  --p: 0%;}

	.basic-6 		{ background: linear-gradient(currentColor 0 0) bottom /var(--d, 20%) 3px no-repeat; transition:0.5s;}
	.basic-6:hover  { --d: 80%;}




	/* • For publication template only
    ------------------------------------------------------------------------- */
	.news-item:hover .basic-4    { --d: 100%;
	  				 							     --p: 100%;}
	.news-item .fa    	{ padding-right:8px; }


	/* • For Milestone template only
    ------------------------------------------------------------------------- */
	#body.milestones li[class] { color:rgba(0, 46, 109, 1);}
	#body.milestones .basic-1:hover  { --d: 80%;}