/*======================
  = Common CSS for PWD =
  ======================*/
/* Pop an Image up when hovered */
.popImage {position:relative;margin:0;padding:0;border:none;perspective:250px;}
.popImage div {text-align:center;box-shadow:0px 0px rgba(0,0,0,0);}
.popImage:hover div,.popImage:active div {
  background-color:rgba(0,0,0,0.5);
  box-shadow:0px 0px 10px rgba(0,0,0,0.8);
  border-radius:5px;
}
.popImageNormal:hover div, .popImageNormal:active div {transform:translate3d(0px,0px,150px);}
.popImageLeft:hover div,.popImageLeft:active div {transform:translate3d(0px,0px,120px) translateX(50%);}
.popImageRight:hover div,.popImageRight:active div {transform:translate3d(0px,0px,120px) translateX(-50%);}
.popImage svg {position:absolute;}
.popImage svg text {display:none;}
.popImage:hover div svg text, .popImage:active div svg text {display:block;}

/* Creates a shimmer-of-light background across the text of an element */
.pwd_hiliteChar {
	background-image: linear-gradient(
		to left,
		#34fa38 0%,
		#34fa38 49%,
		#ffffff 55%,
		#34fa38 56%,
		#34fa38 100%
	);
	background-size: auto auto;
	background-clip: border-box;
	background-size: 300% auto;
	color: #fff;
	background-clip: text;
	text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: pwd_textclip 5s linear infinite;
	display: inline-block;
	background-position: 300% center;
}
@keyframes pwd_textclip {
   	100% {background-position: 0% center;}
}