.sprite3DContainer
{
position:relative;
width: 100%;
height: 150px;
perspective: 450px;
display:none;
}
.sprite3DImg
{
position: absolute;
transform-style: preserve-3d;
backface-visibility: hidden;
bottom:0;
filter: drop-shadow(2px 4px 6px black);
-webkit-filter: drop-shadow(2px 4px 6px black);
-ms-filter: drop-shadow(2px 4px 6px black);
-moz-filter: drop-shadow(2px 4px 6px black);
-o-filter: drop-shadow(2px 4px 6px black);
pointer-events: none;
left: 0;
right: 0;
margin: auto;
}
.sprite3DImgPastelColor
{
filter: hue-rotate(0deg) saturate(50%) brightness(4.8);
-webkit-filter: hue-rotate(0deg) saturate(50%) brightness(4.8);
-ms-filter: hue-rotate(0deg) saturate(50%) brightness(4.8);
-moz-filter: hue-rotate(0deg) saturate(50%) brightness(4.8);
-o-filter: hue-rotate(0deg) saturate(50%) brightness(4.8);
}
.sprite3DImgFrontFace
{
}
.sprite3DImgBackface
{
transform : rotateY(-180deg);
}
.sprite3DImgForeground
{
width: 200px;
z-index: 1;
}
.sprite3DImgBackground
{
z-index: 0;
width: unset;
}
@media screen and (max-width: 845px){ 
.sprite3DImgBackground
{
width: 300px;
}
}
.sprite3DTextContainer
{
width: 165px;
height: 100px;
color:white;
backface-visibility:hidden;
margin:auto;
position: absolute;
bottom: 0;
right: 0;
left: 0;
}
.sprite3DAvatarName
{
padding: 15px 5px 0px 50px;
text-align: center;
}
.sprite3DAvatarTitle
{
bottom: 20px;
position: absolute;
text-align: center;
width: 100%;
line-height: 12px;
}
@media screen and (max-width: 1199px){ 
.sprite3DTextContainer
{
width:135px;
height:85px;
}
.sprite3DAvatarTitle
{
bottom: 15px;
}
}
@media screen and (max-width: 991px){ 
.sprite3DTextContainer
{
width:105px;
height:65px;
}
.sprite3DAvatarName
{
padding: 10px 5px 0 30px;
}
.sprite3DAvatarTitle
{
font-size: 12px;
BOTTOM:10px;
}
}
@media screen and (max-width: 769px){ 
.sprite3DTextContainer
{
width:125px;
height:75px;
}
.sprite3DAvatarTitle
{
font-size: 14px;
}
}
@media screen and (max-width: 768px){ 
.sprite3DTextContainer
{
width:250px;
height:150px;
}
.sprite3DAvatarName
{
padding: 35px 5px 0 60px;
font-size: 20px;
}
.sprite3DAvatarTitle
{
bottom:30px;
font-size: 20px;
}
}