.hub-link-wrapper {background-position: right 0px center; background-repeat: no-repeat; margin-bottom: 1em; background-size: auto 50px;}
.hub-link-wrapper:hover, .hub-link-wrapper:focus {background-position: right -110px center; animation: slideWrapBackground 0.35s linear;}
@keyframes slideWrapBackground {
  from { background-position: right 0px center; }
  to { background-position: right -110px center; }
}

.hub-link {display: block; background-position: right -420px center;  background-repeat: no-repeat; overflow: hidden; font-size: clamp(20px, 4.0vw, 50px); line-height: 1.2; text-decoration: none;  background-size: auto 50px;}
.hub-link:hover, .hub-link:focus {display: block; background-position: right 0px center;  background-repeat: no-repeat; animation: slideIconBackground 0.35s linear;}
@keyframes slideIconBackground {
  from { background-position: right -420px center; }
  to { background-position: right 0px center; }
}

.hub-blue:hover, .hub-blue:focus {color: #7580ed;}
.hub-green:hover, .hub-green:focus {color: #83d580;}
.hub-pink:hover, .hub-pink:focus {color: #ff99ff;}
.hub-orange:hover, .hub-orange:focus {color: #ff9545;}

.hub-link-text {display: block; padding-right: 321px;}

@media screen and (max-width: 1000px) {
	.hub-link-wrapper {background-size: auto 40px;}
	.hub-link {background-size: auto 40px;}
}

@media screen and (max-width: 780px) {
	.hub-link-wrapper {background-size: auto 30px;}
	.hub-link {background-size: auto 30px;}
}