.avatar-animation { animation: animationFramesAvatar ease 0.7s 1; }

@keyframes animationFramesAvatar {
  0% { transform:  rotate(0deg) scaleX(1) scaleY(1); }
  15% { transform:  rotate(-5deg); }
  30% { transform:  rotate(3deg); }
  45% { transform:  rotate(-3deg); }
  60% { transform:  rotate(2deg); }
  75% { transform:  rotate(-1deg); }
  100% { transform:  rotate(0deg); }
}


#models-wrapper { position: relative; top: 0; overflow-y: hidden; overflow-x: hidden; padding: 0; }
#models-wrapper #models-block { margin: 10px 0 10px 10px; height: 100px; position: relative; }

#models-block .sex0,
#models-block .sex1,
#models-block .sex2 { position: absolute; top: 0; left: 0; background: url(../pic/models/man.png) no-repeat; height: 100px; width: 37px; background-size: 100% 100%; }

#models-block .sex0 { background-image: url(../pic/models/nosex.png); }
#models-block .sex1 { background-image: url(../pic/models/man.png); }
#models-block .sex2 { background-image: url(../pic/models/woman.png); }

#models-block > div > div { position: absolute;
/* -webkit-mask-size: contain; */
 -webkit-mask-size: 100% 33%;

 -webkit-mask-repeat: no-repeat; width: 100%; height: 100%; }

/* ------- hairtype ------- */
#models-block .hairtype1 { -webkit-mask-image: url(../pic/models/hair1.svg); transform: scale(1, 1) translate(0%, 11%); }
#models-block .hairtype2 { -webkit-mask-image: url(../pic/models/hair2.svg); transform: scale(1.17, 1.5) translate(0.5%, 21.2%); }
#models-block .hairtype3 { -webkit-mask-image: url(../pic/models/hair3.svg); transform: scale(1.4, 2) translate(2.1%, 30.4%); }
#models-block .hairtype4 { -webkit-mask-image: url(../pic/models/hair4.svg); transform: scale(1.13, 1.56) translate(-2.3%, 21.3%); }
#models-block .hairtype5 { -webkit-mask-image: url(../pic/models/hair5.svg); transform: scale(1.1, 1.6) translate(-0.5%, 27.9%); }
#models-block .hairtype6 { -webkit-mask-image: url(../pic/models/hair6.svg); transform: scale(1.2, 1.65) translate(0.5%, 24%); }
#models-block .hairtype7 { -webkit-mask-image: url(../pic/models/hair7.svg); transform: scale(1.0, 1) translate(0%, 14%); }
#models-block .hairtype8 { -webkit-mask-image: url(../pic/models/hair8.svg); transform: scale(1.35, 1.41) translate(1%, 22.5%); }
#models-block .hairtype9 { -webkit-mask-image: url(../pic/models/hair9.svg); transform: scale(1.05, 1.5) translate(-2.5%, 25%); }
#models-block .hairtype10 { -webkit-mask-image: url(../pic/models/hair10.svg); transform: scale(1.1, 1.7) translate(-1.5%, 27.5%); }
#models-block .hairtype11 { -webkit-mask-image: url(../pic/models/hair11.svg); transform: scale(1.2, 1.68) translate(3%, 27.9%); }
#models-block .hairtype12 { -webkit-mask-image: url(../pic/models/hair12.svg); transform: scale(1.0, 1.63) translate(0.5%, 22.9%); }
#models-block .hairtype13 { -webkit-mask-image: url(../pic/models/hair13.svg); transform: scale(1.0, 1.5) translate(-1%, 18%); }
#models-block .hairtype14 { -webkit-mask-image: url(../pic/models/hair14.svg); transform: scale(1, 1.1) translate(0.2%, 14.5%); }
#models-block .hairtype15 { -webkit-mask-image: url(../pic/models/hair15.svg); transform: scale(1.07, 1.66) translate(1.2%, 29.2%); }
#models-block .hairtype16 { -webkit-mask-image: url(../pic/models/hair16.svg); transform: scale(1.1, 1.05) translate(0.5%, 14%); }
#models-block .hairtype17 { -webkit-mask-image: url(../pic/models/hair17.svg); transform: scale(.95, .88) translate(0%, 13%); }
#models-block .hairtype18 { -webkit-mask-image: url(../pic/models/hair18.svg); transform: scale(1.1, 2.5) translate(-2.5%, 34%); }
#models-block .hairtype19 { -webkit-mask-image: url(../pic/models/hair19.svg); transform: scale(1.0, 1.0) translate(0%, 13%); }
#models-block .hairtype20 { -webkit-mask-image: url(../pic/models/hair20.svg); transform: scale(1.1, 2) translate(2.6%, 30%); }
#models-block .hairtype21 { -webkit-mask-image: url(../pic/models/hair21.svg); transform: scale(1.0, 1.4) translate(0%, 24.3%); }
#models-block .hairtype22 { -webkit-mask-image: url(../pic/models/hair22.svg); transform: scale(1.0, 1.3) translate(0%, 18.4%); }
#models-block .hairtype23 { -webkit-mask-image: url(../pic/models/hair23.svg); transform: scale(1.05, 1.2) translate(-4%, 19%); }
#models-block .hairtype24 { -webkit-mask-image: url(../pic/models/hair24.svg); transform: scale(1.23, 2.55) translate(-0.7%, 35.9%); }
#models-block .hairtype25 { -webkit-mask-image: url(../pic/models/hair25.svg); transform: scale(1.20, 1.45) translate(-1.5%, 26.8%); }
#models-block .hairtype26 { -webkit-mask-image: url(../pic/models/hair26.svg); transform: scale(1.0, 1.1) translate(1.5%, 13.5%); }
#models-block .hairtype27 { -webkit-mask-image: url(../pic/models/hair27.svg); transform: scale(1.06, 1.3) translate(3.7%, 19.6%); }
#models-block .hairtype28 { -webkit-mask-image: url(../pic/models/hair28.svg); transform: scale(1.15, 1.57) translate(-4.2%, 21.6%); }
#models-block .hairtype29 { -webkit-mask-image: url(../pic/models/hair29.svg); transform: scale(1.3, 1.5) translate(-1%, 23.5%); }
#models-block .hairtype30 { -webkit-mask-image: url(../pic/models/hair30.svg); transform: scale(1.48, 1.75) translate(0.5%, 26.6%); }
#models-block .hairtype31 { -webkit-mask-image: url(../pic/models/hair31.svg); transform: scale(1.12, 1.1) translate(3%, 12.6%); }
#models-block .hairtype32 { -webkit-mask-image: url(../pic/models/hair32.svg); transform: scale(1.0, 1.1) translate(0%, 13%); }
#models-block .hairtype33 { -webkit-mask-image: url(../pic/models/hair33.svg); transform: scale(.9, 1.27) translate(-1.6%, 22.5%); }
#models-block .hairtype34 { -webkit-mask-image: url(../pic/models/hair34.svg); transform: scale(1.2, 2) translate(1.9%, 30.3%); }
#models-block .hairtype35 { -webkit-mask-image: url(../pic/models/hair35.svg); transform: scale(1.05, 1.5) translate(0%, 26.9%); }
#models-block .hairtype36 { -webkit-mask-image: url(../pic/models/hair36.svg); transform: scale(1.15, 1.5) translate(0.5%, 22.6%); }
#models-block .hairtype37 { -webkit-mask-image: url(../pic/models/hair37.svg); transform: scale(1.18, 2) translate(-0.1%, 30.2%); }
#models-block .hairtype38 { -webkit-mask-image: url(../pic/models/hair38.svg); transform: scale(1.2, 1.8) translate(2.4%, 27.5%); }
#models-block .hairtype39 { -webkit-mask-image: url(../pic/models/hair39.svg); transform: scale(1.08, 1.35) translate(-0.5%, 17.7%); }

/* ------- beard ------- */
#models-block .beard1 { -webkit-mask-image: url(../pic/models/beard1.svg); transform: scale(.83, .6) translate(1%, 33%); }
#models-block .beard2 { -webkit-mask-image: url(../pic/models/beard2.svg); transform: scale(.9, 1.3) translate(1%, 34%); }

/* ------- shoes ------- */
#models-block .shoes1 { -webkit-mask-image: url(../pic/models/shoes1.svg); transform: scale(0.69, .2) translate(-1%, 263%); background-color: #6a7db1;  }
#models-block .shoes2 { -webkit-mask-image: url(../pic/models/shoes2.svg); transform: scale(.72, .21) translate(0%, 249%); background-color: #ad679e; }
#models-block .shoes3 { -webkit-mask-image: url(../pic/models/shoes3.svg); transform: scale(.68, .35) translate(-2%, 157%); background-color: #6c789a; }
#models-block .shoes4 { -webkit-mask-image: url(../pic/models/shoes4.svg); transform: scale(.72, .4) translate(-1%, 143%); background-color: #d89f37; }
#models-block .shoes5 { -webkit-mask-image: url(../pic/models/shoes5.svg); transform: scale(0.75, .4) translate(0%, 141%); background-color: #9a4c85; }
#models-block .shoes6 { -webkit-mask-image: url(../pic/models/shoes6.svg); transform: scale(.7, .25) translate(-1%, 220%); background-color: #ca1f1f; }
#models-block .shoes7 { -webkit-mask-image: url(../pic/models/shoes7.svg); transform: scale(.7, .2) translate(-1%, 260%); background-color: #9c7f60; }
#models-block .shoes8 { -webkit-mask-image: url(../pic/models/shoes7.svg); transform: scale(.7, .2) translate(-1%, 260%); background-color: #615757; }
#models-block .shoes9 { -webkit-mask-image: url(../pic/models/shoes8.svg); transform: scale(.7, 0.25) translate(-1%, 216%); background-color: #3fb123; }
#models-block .shoes10 { -webkit-mask-image: url(../pic/models/shoes9.svg); transform: scale(.7, 0.3) translate(0%, 181%); background-color: #656565; }
#models-block .shoes11 { -webkit-mask-image: url(../pic/models/shoes10.svg); transform: scale(0.9, 1.7) translate(9%, 74%); background-color: #3988b5; }
#models-block .shoes12 { -webkit-mask-image: url(../pic/models/shoes11.svg); transform: scale(.59, .35) translate(4%, 159%); background-color: #2484e6; }
#models-block .shoes13 { -webkit-mask-image: url(../pic/models/shoes11.svg); transform: scale(.59, .35) translate(4%, 159%); background-color: #ce2929; }
#models-block .shoes14 { -webkit-mask-image: url(../pic/models/shoes13.svg); transform: scale(.65, .3) translate(5%, 179%); background-color: #ce2929; }
#models-block .shoes15 { -webkit-mask-image: url(../pic/models/shoes14.svg); transform: scale(.6, .3) translate(4%, 179%); background-color: #d42ca8; }
#models-block .shoes16 { -webkit-mask-image: url(../pic/models/shoes15.svg); transform: scale(.68, .27) translate(-0.9%, 199%); background-color: #39a22d; }
#models-block .shoes17 { -webkit-mask-image: url(../pic/models/shoes15.svg); transform: scale(.7, .3) translate(0%, 180%); background-color: #5589e6; }
#models-block .shoes18 { -webkit-mask-image: url(../pic/models/shoes17.svg); transform: scale(.7, .25) translate(0%, 215%); background-color: #b77600; }
#models-block .shoes19 { -webkit-mask-image: url(../pic/models/shoes18.svg); transform: scale(.7, .3) translate(11%, 180%); background-color: #1b61ff; }
#models-block .shoes20 { -webkit-mask-image: url(../pic/models/shoes19.svg); transform: scale(.53, .15) translate(0%, 346%); background-color: #000; }
#models-block .shoes21 { -webkit-mask-image: url(../pic/models/shoes20.svg); transform: scale(.75, .2) translate(0%, 264%); background-color: #2bea89; }

/* ------- outerwear ------- */
#models-block .outerwear1 { -webkit-mask-image: url(../pic/models/outerwear1.svg); transform: scale(0.8, 0.8) translate(0%, 55%); background-color: #5591ff; }
#models-block .outerwear2 { -webkit-mask-image: url(../pic/models/outerwear2.svg); transform: scale(0.75, 0.8) translate(1%, 57.5%); background-color: #d84e94; }
#models-block .outerwear3 { -webkit-mask-image: url(../pic/models/outerwear3.svg); transform: scale(0.75, 0.8) translate(0.5%, 57%); background-color: #cad065; }
#models-block .outerwear4 { -webkit-mask-image: url(../pic/models/outerwear3.svg); transform: scale(0.75, 0.8) translate(0.5%, 57%); background-color: #d0a065; }
#models-block .outerwear5 { -webkit-mask-image: url(../pic/models/outerwear3.svg); transform: scale(0.75, 0.7) translate(0.5%, 58%); background-color: #65d081; }
#models-block .outerwear6 { -webkit-mask-image: url(../pic/models/outerwear3.svg); transform: scale(0.75, 0.7) translate(0.5%, 58%); background-color: #5a5a5a; }
#models-block .outerwear7 { -webkit-mask-image: url(../pic/models/outerwear3.svg); transform: scale(0.75, 0.7) translate(0.5%, 58%); background-color: #9e8bad; }
#models-block .outerwear8 { -webkit-mask-image: url(../pic/models/outerwear4.svg); transform: scale(0.7, 0.8) translate(0%, 59%); background-color: #fff; }
#models-block .outerwear9 { -webkit-mask-image: url(../pic/models/outerwear5.svg); transform: scale(0.82, 0.82) translate(0%, 55%); background-color: #967b7b; }
#models-block .outerwear10 { -webkit-mask-image: url(../pic/models/outerwear6.svg); transform: scale(0.77, 0.8) translate(-0.5%, 59%); background-color: #fff; }
#models-block .outerwear11 { -webkit-mask-image: url(../pic/models/outerwear7.svg); transform: scale(0.7, 0.8) translate(0.5%, 58%); background-color: #ff4444; }
#models-block .outerwear12 { -webkit-mask-image: url(../pic/models/outerwear8.svg); transform: scale(0.78, 0.8) translate(1%, 58%); background-color: #4ee0ab; }
#models-block .outerwear13 { -webkit-mask-image: url(../pic/models/outerwear9.svg); transform: scale(0.78, 0.8) translate(-1%, 57.5%); background-color: #7985a5; }
#models-block .outerwear14 { -webkit-mask-image: url(../pic/models/outerwear10.svg); transform: scale(0.48, 0.55) translate(2%, 72%); background-color: #e83f6e; }
#models-block .outerwear15 { -webkit-mask-image: url(../pic/models/outerwear11.svg); transform: scale(0.78, 0.7) translate(1%, 60%); background-color: #a96dea; }
#models-block .outerwear16 { -webkit-mask-image: url(../pic/models/outerwear12.svg); transform: scale(0.5, 0.75) translate(0%, 63%); background-color: #f74242; }
#models-block .outerwear17 { -webkit-mask-image: url(../pic/models/outerwear13.svg); transform: scale(0.68, 0.8) translate(1%, 59%); background-color: #27b5e0; }
#models-block .outerwear18 { -webkit-mask-image: url(../pic/models/outerwear14.svg); transform: scale(0.82, 0.7) translate(0%, 58%); background-color: #f15ba7; }
#models-block .outerwear19 { -webkit-mask-image: url(../pic/models/outerwear15.svg); transform: scale(0.8, 0.8) translate(0%, 55%); background-color: #ffffff; }
#models-block .outerwear20 { -webkit-mask-image: url(../pic/models/outerwear16.svg); transform: scale(0.76, 0.8) translate(0%, 59%); background-color: #65c4da; }
#models-block .outerwear21 { -webkit-mask-image: url(../pic/models/outerwear17.svg); transform: scale(0.79, 0.8) translate(1%, 56%); background-color: #8a68c1; }
#models-block .outerwear22 { -webkit-mask-image: url(../pic/models/outerwear18.svg); transform: scale(0.79, 0.8) translate(0%, 57%); background-color: #e02323; }
#models-block .outerwear23 { -webkit-mask-image: url(../pic/models/outerwear19.svg); transform: scale(0.79, 0.7) translate(-1%, 59%); background-color: #b37e58; }
#models-block .outerwear24 { -webkit-mask-image: url(../pic/models/outerwear20.svg); transform: scale(0.79, 0.8) translate(1%, 58%); background-color: #a5a5a5; }
#models-block .outerwear25 { -webkit-mask-image: url(../pic/models/outerwear20.svg); transform: scale(0.79, 0.8) translate(1%, 58%); background-color: #de42a0; }
#models-block .outerwear26 { -webkit-mask-image: url(../pic/models/outerwear22.svg); transform: scale(0.5, 0.65) translate(1%, 61%); background-color: #f36969; }
#models-block .outerwear27 { -webkit-mask-image: url(../pic/models/outerwear23.svg); transform: scale(0.48, 0.85) translate(1%, 58.5%); background-color: #f33030; }
#models-block .outerwear28 { -webkit-mask-image: url(../pic/models/outerwear24.svg); transform: scale(0.8, 0.8) translate(0%, 58%); background-color: #ef71d4; }

/* ------- underwear ------- */
#models-block .underwear1 { -webkit-mask-image: url(../pic/models/underwear1.svg); transform: scale(0.44, .4) translate(0%, 114%); background-color: #636363;  }
#models-block .underwear2 { -webkit-mask-image: url(../pic/models/underwear2.svg); transform: scale(.45, .5) translate(-2%, 98%); background-color: #8eabec; }
#models-block .underwear3 { -webkit-mask-image: url(../pic/models/underwear3.svg); transform: scale(.46, .45) translate(0%, 106%); background-color: #58595a; }
#models-block .underwear4 { -webkit-mask-image: url(../pic/models/underwear4.svg); transform: scale(.48, .4) translate(-1%, 111%); background-color: #3461c7; }
#models-block .underwear5 { -webkit-mask-image: url(../pic/models/underwear5.svg); transform: scale(.43, .55) translate(0%, 96%); background-color: #c5dfff; }
#models-block .underwear6 { -webkit-mask-image: url(../pic/models/underwear6.svg); transform: scale(.47, .4) translate(-2%, 111%); background-color: #b3a075; }
#models-block .underwear7 { -webkit-mask-image: url(../pic/models/underwear7.svg); transform: scale(.48, .7) translate(0%, 84%); background-color: #e0ac37; }
#models-block .underwear8 { -webkit-mask-image: url(../pic/models/underwear8.svg); transform: scale(.48, .4) translate(0%, 112%); background-color: #e48456; }
#models-block .underwear9 { -webkit-mask-image: url(../pic/models/underwear9.svg); transform: scale(.48, 0.7) translate(-1%, 84%); background-color: #6c6c79; }
#models-block .underwear10 { -webkit-mask-image: url(../pic/models/underwear9.svg); transform: scale(.48, 0.7) translate(-1%, 84%); background-color: #c5dfff; }
#models-block .underwear11 { -webkit-mask-image: url(../pic/models/underwear10.svg); transform: scale(.5, .56) translate(5%, 94%); background-color: #51bb55; }
#models-block .underwear12 { -webkit-mask-image: url(../pic/models/underwear11.svg); transform: scale(.43, .5) translate(1.5%, 76%); background-color: #e05edc; }
#models-block .underwear13 { -webkit-mask-image: url(../pic/models/underwear12.svg); transform: scale(.43, .55) translate(0%, 97%); background-color: #53c5c0; }

/* ------- pants ------- */
#models-block .pants1 { -webkit-mask-image: url(../pic/models/pants1.svg); transform: scale(.6, 1.3) translate(-1%, 54.5%); background-color: #3c3c3c; }
#models-block .pants2 { -webkit-mask-image: url(../pic/models/pants2.svg); transform: scale(.6, .65) translate(0%, 62%); background-color: #ef0c0c; }
#models-block .pants3 { -webkit-mask-image: url(../pic/models/pants3.svg); transform: scale(.43, .66) translate(0%, 61%); background-color: #b17ec5; }

/* ------- glasses ------- */
#models-block .glasses1 { -webkit-mask-image: url(../pic/models/glasses1.svg); transform: scale(0.95, .35) translate(0%, 3%); background-color: #3c3c3c; }
#models-block .glasses2 { -webkit-mask-image: url(../pic/models/glasses2.svg); transform: scale(1.2, 1.1) translate(0%, 17%); background-color: #e26820; }
#models-block .glasses3 { -webkit-mask-image: url(../pic/models/glasses3.svg); transform: scale(0.9, .4) translate(1%, 2%); background-color: #677d9e; }
#models-block .glasses4 { -webkit-mask-image: url(../pic/models/glasses4.svg); transform: scale(0.88, 0.8) translate(-7%, 27.5%); background-color: #5086ff; }
#models-block .glasses5 { -webkit-mask-image: url(../pic/models/glasses5.svg); transform: scale(0.85, .4) translate(-1%, 5%); background-color: #5d5d5d; }
#models-block .glasses6 { -webkit-mask-image: url(../pic/models/glasses6.svg); transform: scale(0.8, .35) translate(-2%, 3%); background-color: #4a4a4a; }
#models-block .glasses7 { -webkit-mask-image: url(../pic/models/glasses7.svg); transform: scale(0.79, 0.3) translate(-1%, -3%); background-color: #131313; }
#models-block .glasses8 { -webkit-mask-image: url(../pic/models/glasses8.svg); transform: scale(0.8, .35) translate(-1%, 3%); background-color: #bb8080; }
#models-block .glasses9 { -webkit-mask-image: url(../pic/models/glasses9.svg); transform: scale(0.87, .85) translate(-1%, 32%); background-color: #985d33; }
#models-block .glasses10 { -webkit-mask-image: url(../pic/models/glasses10.svg); transform: scale(0.95, 0.35) translate(0%, 2%); background-color: #c37373; }
#models-block .glasses11 { -webkit-mask-image: url(../pic/models/glasses10.svg); transform: scale(0.95, 0.35) translate(0%, 2%); background-color: #9d6da0; }
#models-block .glasses12 { -webkit-mask-image: url(../pic/models/glasses12.svg); transform: scale(0.92, 1.3) translate(0%, 22.7%); background-color: #65aaff; }
#models-block .glasses13 { -webkit-mask-image: url(../pic/models/glasses13.svg); transform: scale(0.92, 1.4) translate(0%, 23.5%); background-color: #737373; }

/* ------- hats ------- */
#models-block .hats1 { -webkit-mask-image: url(../pic/models/hats1.svg); transform: scale(1.32, 0.8) translate(-0.2%, 1.5%); background-color: #88573f; }
#models-block .hats2 { -webkit-mask-image: url(../pic/models/hats1.svg); transform: scale(1.32, 0.8) translate(-0.2%, 1.5%); background-color: #4e4e4e; }
#models-block .hats3 { -webkit-mask-image: url(../pic/models/hats1.svg); transform: scale(1.32, 0.8) translate(-0.2%, 1.5%); background-color: #eeeeee; }
#models-block .hats4 { -webkit-mask-image: url(../pic/models/hats1.svg); transform: scale(1.32, 0.8) translate(-0.2%, 1.5%); background-color: #b36969; }
#models-block .hats5 { -webkit-mask-image: url(../pic/models/hats1.svg); transform: scale(1.32, 0.8) translate(-0.2%, 1.5%); background-color: #73c3ac; }
#models-block .hats6 { -webkit-mask-image: url(../pic/models/hats1.svg); transform: scale(1.32, 0.8) translate(-0.2%, 1.5%); background-color: #7fa1d2; }
#models-block .hats7 { -webkit-mask-image: url(../pic/models/hats2.svg); transform: scale(1.15, 0.9) translate(-0.9%, 12.1%); background-color: #6b6b6b; }
#models-block .hats8 { -webkit-mask-image: url(../pic/models/hats3.svg); transform: scale(1.08, 1.1) translate(10%, 4.5%); background-color: #ca4242; }
#models-block .hats9 { -webkit-mask-image: url(../pic/models/hats4.svg); transform: scale(.84, 2) translate(-2%, 31%); background-color: #e65151; }
#models-block .hats10 { -webkit-mask-image: url(../pic/models/hats5.svg); transform: scale(1.15, 1.14) translate(-2.6%, 13.5%); background-color: #cc3119; }
#models-block .hats11 { -webkit-mask-image: url(../pic/models/hats6.svg); transform: scale(1.13, 1.4) translate(-1%, 13.5%); background-color: #b18d58; }
#models-block .hats12 { -webkit-mask-image: url(../pic/models/hats7.svg); transform: scale(1.08, 0.45) translate(-0.4%, -30.7%); background-color: #e24ca6; }
#models-block .hats13 { -webkit-mask-image: url(../pic/models/hats8.svg); transform: scale(1, 0.5) translate(-1%, -30%); background-color: #e42f2f; }
#models-block .hats14 { -webkit-mask-image: url(../pic/models/hats9.svg); transform: scale(0.95, 0.8) translate(-0.6%, -14%); background-color: #ff1f1f; }
#models-block .hats15 { -webkit-mask-image: url(../pic/models/hats9.svg); transform: scale(0.95, 0.8) translate(-0.6%, -14%); background-color: #fff; }
#models-block .hats16 { -webkit-mask-image: url(../pic/models/hats11.svg); transform: scale(.8, 0.6) translate(0%, -20%); background-color: #f32828; }

/* ------- decoration ------- */
#models-block .decoration1 { -webkit-mask-image: url(../pic/models/decoration1.svg); transform: scale(.9, 2.5) translate(-97%, 37%); background-color: #52d7ff; }
#models-block .decoration2 { -webkit-mask-image: url(../pic/models/decoration2.svg); transform: scale(.3, 2.4) translate(215%, 37%); background-color: #f3b938; }
#models-block .decoration3 { -webkit-mask-image: url(../pic/models/decoration3.svg); transform: scale(3, 3.5) translate(65%, 37.4%); background-color: #ff2020; }
#models-block .decoration4 { -webkit-mask-image: url(../pic/models/decoration3.svg); transform: scale(3, 3.5) translate(65%, 37.4%); background-color: #fff; }
#models-block .decoration5 { -webkit-mask-image: url(../pic/models/decoration3.svg); transform: scale(3, 3.5) translate(65%, 37.4%); background-color: #000; }
#models-block .decoration6 { -webkit-mask-image: url(../pic/models/decoration3.svg); transform: scale(3, 3.5) translate(65%, 37.4%); background-color: #71bd1e; }
#models-block .decoration7 { -webkit-mask-image: url(../pic/models/decoration3.svg); transform: scale(1.4, 1.4) translate(76%, 45%); background-color: #ff2020; }
#models-block .decoration8 { -webkit-mask-image: url(../pic/models/decoration3.svg); transform: scale(1.4, 1.4) translate(76%, 45%); background-color: #ff9b05; }


/* ----- avatar options ----- */

#id_avt_options { width: 378px; }
#appearance-avatar { margin: 7px 0 0 0; padding: 9px 0 0 0; border-radius: 3px; height: 464px; overflow-y: auto; }
#appearance-avatar .td { text-align: left; padding: 0 0 8px 0px;  }
#appearance-avatar .td.left { width: 51%; padding: 0 0 0 8px; }
#appearance-avatar .td.center { text-align: center !important; position: relative; }
#appearance-avatar select { margin: 0 10px 0 0; }

#appearance-avatar select,
#appearance-avatar option { background-color: #303030; color: #c0c0c0; }

#appearance-avatar select:hover { border: 1px solid #7face4; }
#appearance-avatar input[type="checkbox"] { margin: 3px 0 0 0; }
#appearance-avatar label { font: inherit; }


/* ------- grid ------- */
.grid-wrapper { position: absolute; width: 100%; height: 100%; left: 0; bottom: -17px; perspective: 200px; }
.grid { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 125%; margin-top: -18px; transform: rotateX(60deg); }
.line { position: absolute; background: rgba(119, 119, 119, 0.35); backface-visibility: hidden; }
.vertical .line { top: 0; left: 0; bottom: 0; width: 2px; background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(123, 123, 123, 0.35)); }

.horizontal .line { top: 0; left: 0; right: 0; height: 2px; z-index: 2; }

.vertical .line:nth-child(1) { left: 10%; }
.vertical .line:nth-child(2) { left: 20%; }
.vertical .line:nth-child(3) { left: 30%; }
.vertical .line:nth-child(4) { left: 40%; }
.vertical .line:nth-child(5) { left: 50%; }
.vertical .line:nth-child(6) { left: 60%; }
.vertical .line:nth-child(7) { left: 70%; }
.vertical .line:nth-child(8) { left: 80%; }
.vertical .line:nth-child(9) { left: 90%; }
.vertical .line:nth-child(10) { left: 100%; margin-left: -1px; }

.horizontal .line:nth-child(1) { top: 10%; opacity: 0.2; }
.horizontal .line:nth-child(2) { top: 20%; opacity: 0.3; }
.horizontal .line:nth-child(3) { top: 30%; opacity: 0.4; }
.horizontal .line:nth-child(4) { top: 40%; opacity: 0.5; }
.horizontal .line:nth-child(5) { top: 50%; opacity: 0.6; }
.horizontal .line:nth-child(6) { top: 60%; opacity: 0.7; }
.horizontal .line:nth-child(7) { top: 70%; opacity: 0.8; }
.horizontal .line:nth-child(8) { top: 80%; opacity: 0.9; }
.horizontal .line:nth-child(9) { top: 90%; opacity: 0.95; }
.horizontal .line:nth-child(10) { top: 100%; margin-top: -1px; opacity: 1; }
.horizontal .line:nth-child(11) { opacity: 0.05; }

/* -- dot animation --- */

/*
.dot { position: absolute; background: #868686; width: 1px; height: 1px; top: 100%; border-radius: 2px; box-shadow: 0 0 1px #fff; 
  backface-visibility: hidden; }

.dot:nth-child(1) { left: 10%; animation: moveDot 5s infinite; }
.dot:nth-child(2) { left: 20%; animation: moveDot 20s infinite; }
.dot:nth-child(3) { left: 30%; animation: moveDot 15s infinite; }
.dot:nth-child(4) { left: 50%; animation: moveDot 30s infinite; }
.dot:nth-child(5) { left: 60%; animation: moveDot 12s infinite; }
.dot:nth-child(6) { left: 80%; animation: moveDot 6s infinite; }
.dot:nth-child(7) { left: 90%; animation: moveDot 8s infinite; }

@keyframes moveDot { 0% { top: 100%; opacity:1; } 100% { top: 0%; opacity: 0; }}
*/

/* -------------------- */



/* ----- cloud --------*/

.avtcloud { height: 16px; border: 1px solid #858688; top: 59px; left: 0; background-color: rgba(56, 82, 115, 0.65) !important;  border-radius: 2px; text-align: center; font: normal 14px/14px Tahoma; padding: 2px 5px; overflow: hidden; white-space: nowrap; display: none; }

.avtcloud::first-letter { text-transform: uppercase; }

/* ------- tree ------- */

.tree-block { position: absolute; height: 100%; width: 100%; top: 0; }
.tree-block .treewrap { position: absolute; top: 0; }

.tree { -webkit-mask-image: url(../pic/models/tree.svg); width: 100%; height: 100%; transform: scale(1, 1) translate(-2px, -127px); background-color: #ccb77c; position: absolute; top: 0; left: 0; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; }

.tree.invis { -webkit-mask-image: 'none'; background: 'none'; }
.treewrap.invis { left: -1000px; z-index: 8000; }
.fruits.invis { display: none; }

.fruits { width: 48px; height: 48px; transform: scale(1, 1) translate(0px, 0px); position: absolute; background-repeat: no-repeat !important; z-index: 100; }
/*
.cart { -webkit-mask-image: url(../pic/models/cart.svg); background-color: rgb(182, 192, 204); }
*/

#models-block .cart { /*background: url(../pic/models/cart.svg) no-repeat; background-size: contain; */ position: absolute; top: 0; left: 0; height: 100px; width: 105px; z-index: 9000;  }
#models-block .cart img { height: 100%;}

.shake { animation: animationShake ease 0.7s 1; }
.shake.hats7 { animation: animationShakeHats2 ease 0.7s 1; } /* headPhones - 7 */

@keyframes animationShake {
  0% { transform:  rotate(0deg) scaleX(1) scaleY(1); }
  15% { transform:  rotate(-1deg); }
  30% { transform:  rotate(.7deg); }
  45% { transform:  rotate(-.7deg); }
  60% { transform:  rotate(.3deg); }
  75% { transform:  rotate(-.1deg); }
  100% { transform:  rotate(0deg); }
}

@keyframes animationShakeHats2 {
  0% { transform:  rotate(0deg) scale(1.15, 0.9) translate(-0.9%, 12.1%); }
  15% { transform:  rotate(-1deg) scale(1.15, 0.9) translate(-0.9%, 12.1%); }
  30% { transform:  rotate(.7deg) scale(1.15, 0.9) translate(-0.9%, 12.1%); }
  45% { transform:  rotate(-.7deg) scale(1.15, 0.9) translate(-0.9%, 12.1%);}
  60% { transform:  rotate(.3deg) scale(1.15, 0.9) translate(-0.9%, 12.1%); }
  75% { transform:  rotate(-.1deg) scale(1.15, 0.9) translate(-0.9%, 12.1%); }
  100% { transform:  rotate(0deg) scale(1.15, 0.9) translate(-0.9%, 12.1%); }
}

.orange { background: url(../pic/models/orange.svg); }
.grapes { background: url(../pic/models/grapes.svg); }
.green { background: url(../pic/models/green.svg) }
.cherry { background: url(../pic/models/cherry.svg); }
.pear { background: url(../pic/models/pear.svg); }
.apple { background: url(../pic/models/apple.svg); }
.strawberry { background: url(../pic/models/strawberry.svg); }
.lemon { background: url(../pic/models/lemon.svg); }
.melon { background: url(../pic/models/melon.svg); }
.peach { background: url(../pic/models/peach.svg); }
.tomato { background: url(../pic/models/tomato.svg); }
.flower { background: url(../pic/models/flower.svg); width: 128px; height: 128px; }

#avatar-slider-scale-world.slider,
#avatar-slider-scale-body-width.slider,
#avatar-slider-scale-body-height.slider { width: 152px; margin: 9px 0 0 0; }

#id_avt_options .ui-slider-handle { top: -10px; }
#id_avt_options .slider { height: 9px; border-radius: 1px; }
#id_avt_options .slider:hover { border: 1px solid #7face4; }

#avtoptions { margin: 0 0 0 4px !important; }

.fruits.dropped { animation: dropanimation 1.5s linear forwards; }

@keyframes dropanimation {
 0.000% {transform: translate(1px, 21.000%)}
 4.545% {transform: translate(2px, 58.500%)}
 9.091% {transform: translate(3px, 146.000%)}
 9.545% {transform: translate(4px, 150.000%)}
 13.636% {transform: translate(5px, 92.400%)}
 18.182% {transform: translate(6px, 75.900%)}
 22.727% {transform: translate(7px, 109.400%)}
 25.455% {transform: translate(8px, 150.000%)}
 27.273% {transform: translate(9px, 127.520%)}
 31.818% {transform: translate(10px, 106.320%)}
 36.364% {transform: translate(11px, 135.120%)}
 37.727% {transform: translate(12px, 150.000%)}
 40.909% {transform: translate(13px, 125.563%)}
 45.455% {transform: translate(14px, 133.153%)}
 47.273% {transform: translate(15px, 150.000%)}
 50.000% {transform: translate(16px, 134.362%)}
 54.545% {transform: translate(17px, 148.299%)}
 55.000% {transform: translate(18px, 150.000%)}
 59.091% {transform: translate(19px, 138.745%)}
 61.818% {transform: translate(20px, 150.000%)}
 63.636% {transform: translate(21px, 141.102%)}
 67.727% {transform: translate(22px, 150.000%)}
 68.182% {transform: translate(23px, 147.532%)}
 72.727% {transform: translate(23px, 150.000%)}
 77.273% {transform: translate(23px, 150.000%)}
 81.818% {transform: translate(23px, 150.000%)}
 86.364% {transform: translate(23px, 150.000%)}
 90.909% {transform: translate(23px, 150.000%)}
 95.455% {transform: translate(23px, 150.000%)}
 100.000% {transform: translate(23px, 150.000%)}
}

#id_avt_options span.ui-slider-tip { top: 0; left: -26px; }

#id_avt_options span.ui-slider-tip:before,
#id_avt_options span.ui-slider-tip:after { left: 119%; bottom: 5px; border-top-color: transparent; }

#id_avt_options span.ui-slider-tip:before { border-left-color: #555; margin-left: -6px; }
#id_avt_options span.ui-slider-tip:after { border-left-color: #000; margin-left: -7px; }

#avtoptions.none { display: none !important; }

#canvas-bg { transition: opacity .3s ease-in-out; opacity: 0; }
.fluid-animate { opacity: 1 !important; }