[data-bargraphs] .bar {
  width: 100%;
  height: 40px;
  position: absolute;
  bottom: 0;
  transform-style: preserve-3d;
  transform: translateZ(0) rotateY(-20deg);
  pointer-events: none;
  transition: height 1s ease-in-out;
}
[data-bargraphs] .bar.score {
	left: -90px;
	bottom: 20px;
}
[data-bargraphs] .bar.qqq {
	left: 90px;
	height: 45px;
}
[data-bargraphs] .bar-face {
  position: absolute;
  font-size: 11px;
  font-weight: bold;
  color: white;
  text-align: center;
  height: 100%;
  width: 100%;
  outline: 1px solid transparent;
}

[data-bargraphs] .bar-face-front  { 
	background: #000AD2;
	transform: rotateY(  0deg) translateZ( 75px);
	overflow: hidden;
}
[data-bargraphs] .bar-face-right  {
	left: -100%;
	background: #0008A8;
	transform: rotateY( 90deg) translateZ(225px);
}
[data-bargraphs] .bar-face-back   {
	background: #000BEE;
	transform: rotateY(180deg) translateZ( 75px);
}
[data-bargraphs] .bar-face-left   {
	left: 100%;
	background: #000BEE;
	transform: rotateY(-90deg) translateZ(225px);
}

[data-bargraphs] .score .bar-face-front  { 
	background: #EEEEEE;
	transform: rotateY(  0deg) translateZ( 75px);
	overflow: hidden;
}
[data-bargraphs] .score .bar-face-right  {
	left: -100%;
	background: #CCCCCC;
	transform: rotateY( 90deg) translateZ(225px);
}
[data-bargraphs] .score .bar-face-back   {
	background: #FFFFFF;
	transform: rotateY(180deg) translateZ( 75px);
}
[data-bargraphs] .score .bar-face-left   {
	left: 100%;
	background: #FFFFFF;
	transform: rotateY(-90deg) translateZ(225px);
}


[data-bargraphs] .bar-face-front > * {
	font-family: sans-serif;
	font-weight: bold;
	color: #FFF;
	line-height: 0px;
	margin-top: 18px;
	transition: opacity 0.6s;
	opacity: 0;
	font-size: 20px;
	font-family: "Graphik-Medium", sans-serif;
  font-weight: normal;
  letter-spacing: 2px;
  margin-bottom: 20px;
}
[data-bargraphs] .score .bar-face-front > * {
	color: #000000;
	margin-top: 15px;
}
[data-bargraphs] .bar.score.show-txt .bar-face-front > *, 
[data-bargraphs] .bar.qqq.show-txt .bar-face-front > * {
	opacity: 1;
}

[data-bargraphs].too-small .score .bar-face-front {
  overflow: visible;
}
[data-bargraphs].too-small .score .bar-face-front h2 {
  text-shadow: white 0 0 12px;
}
[data-bargraphs].too-small .score .bar-face-front h1 {
  text-shadow: white 0 0 12px;
}