#svgglyph {
position: absolute;
top: 53vh;
left: 50vw;
margin: 0;
transform: translateZ(-300px) scale(1); }

/* Opacity settings for crystal surface shapes */

#glyfrtmid > use , #glyfrtbot > use {
opacity: 0.3; }

g[id*='glybck'] > use {
opacity: 0.6; }

/* Global Animation Settings, linear rotation for crystal side shapes */

#glyphanim g * { animation-duration: 3s;
animation-iteration-count: infinite;
animation-play-state: running; }

#glyphanim > g > * { animation-timing-function: linear; }

/* Transform Origins for proper rotation centering */
#glybcktop *, #glyfrttop * { transform-origin: 17.1655px 0 0; }
#glybckmid *, #glyfrtmid * { transform-origin: 20px 0 0; }
#glybckbot *, #glyfrtbot * { transform-origin: 17.3125px 52.906px 0; }


/* webkit-old: #glybcktop *, #glyfrttop * { webkit-transform-origin: 50% 0 0; }
#glybckmid *, #glyfrtmid * { webkit-transform-origin: 50% 50% 0; }
#glybckbot *, #glyfrtbot * { webkit-transform-origin: 50% 100% 0; }*/


/* Animation delays for crystal surface shape placements */

.glyanmdly1 { animation-delay: -0.5s; }
.glyanmdly2 { animation-delay: -1s;   }
.glyanmdly3 { animation-delay: -1.5s; }
.glyanmdly4 { animation-delay: -2s;   }
.glyanmdly5 { animation-delay: -2.5s; }

/* Animation for Back Half of the Glyph */

#glybcktop > * { animation-name: glyanmtop1; }
@keyframes glyanmtop1 {
0%   {         transform: rotateY( 90deg) rotateX(37.758deg) ; fill: #036; }
100% {         transform: rotateY(270deg) rotateX(37.758deg) ; fill: #012; } }

#glyfrttop > * { animation-name: glyanmtop2; }
@keyframes glyanmtop2 {
0%   {         transform: rotateY(270deg) rotateX(37.758deg) ; fill:#008; opacity: 0.3; }
80%,90% { opacity: 0.5; }
85%  { fill:#ddf; opacity:0.9; }
100% {         transform: rotateY( 90deg) rotateX(37.758deg) ; fill:#bbf; opacity: 0.3; } }

#glybckmid > * { animation-name: glyanmmid1; }
@keyframes glyanmmid1 {
0%   {         transform: rotateY( 90deg) translateZ(34.641px) ; fill: #036; }
100% {         transform: rotateY(270deg) translateZ(34.641px) ; fill: #012; } }

/* Animation for Front Half of the Glyph */

#glyfrtmid > * { animation-name: glyanmmid2; }
@keyframes glyanmmid2 {
0%   {         transform: rotateY(270deg) translateZ(34.641px) ; fill:#008; }
100% {         transform: rotateY( 90deg) translateZ(34.641px) ; fill:#88f; } }

#glybckbot > * { animation-name: glyanmbot1; }
@keyframes glyanmbot1 {
0%   {         transform: rotateY( 90deg) rotateX(-49.106deg) ; fill: #036; }
100% {         transform: rotateY(270deg) rotateX(-49.106deg) ; fill: #012; } }

#glyfrtbot > * { animation-name: glyanmbot2; }
@keyframes glyanmbot2 {
0%   {         transform: rotateY(270deg) rotateX(-49.106deg) ; fill:#006; }
100% {         transform: rotateY( 90deg) rotateX(-49.106deg) ; fill:#66b; } }

/* Shine Reflection Sub-Animation */

.glyshnanm {
animation-name: glyanmshn;
animation-timing-function: ease-in; }
@keyframes glyanmshn { 
  0%   { transform: translateY( 90px); opacity: 0.5; }
  100% { transform: translateY(-140px); opacity: 0.8; } }