.bg-image {
	background-image: url('../pics/title.png');
	background-position: center top;
	background-repeat: repeat-x;
}
.bg-squares-white {
	background-image: url('../pics/square_bkg_white.png');
}
.bg-squares-black {
	background-image: url('../pics/square_bkg_black.png');
}
.bg-squares-dark {
	background-image: url('../pics/square_bkg_dark.png');
}
.bg-transparent-card {
	background: rgba(24, 41, 50, 0.8);
	border: 1px solid rgba(24, 41, 50, 0.9);
}
.bg-transparent-yellow {
	background: rgba(255, 255, 204, 0.7);
}
.bg-indigo {
	background-color: var(--indigo);
}
.text-truewhite {
	color: #ffffff !important;
}
#pg-scheme-svg {
	position:relative;
	display: block;
}
#pg-scheme-svg svg {
	width: 100%;
	height: auto;
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
	background: rgba(255, 255, 204, 0.7);
}

#pg-scheme-svg svg:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}
svg g a:hover *{
	opacity:0.7;
	cursor:pointer;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   #pg-scheme-svg {
	height: 0;
	padding-bottom:50%;
	overflow:visible;
	position: relative;
}
   #pg-scheme-svg svg  {
	top:0;
	position: absolute;
}
}
.sprite{
  --w: 150px;     /* single-frame width  */
  --h: 250px;     /* single-frame height */
  --frames: 8;   /* number of frames    */
  --dur: 1s;

  width: var(--w);
  height: var(--h);

  background-image: url("../pics/working.png");
  background-repeat: no-repeat;

  /* Put steps() on timing-function explicitly so it can’t get lost */
  animation-name: play;
  animation-duration: var(--dur);
  animation-timing-function: steps(var(--frames), end);
  animation-iteration-count: infinite;
}

@keyframes play{
  from { background-position: 0 0; }
  to   { background-position: calc(-1 * var(--w) * var(--frames)) 0; }
}