/* Avatar Design */

.avatar-basic{
    stroke:#151210;
    stroke-width:8;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
	transition:all 0.2s;
}

.avatar-container.loading {
	visibility:hidden;
}

.gold {
    fill:#FF9700;
}

.white {
    fill:#FFFFFF;
}

.blue{
    fill:#76CAD4;
}

.gray {
    fill:#BDC2C8;
}

.dark-gray {
    fill:#727272;
}

.black {
    fill:#151210;
}

.white-highlight {
    opacity:0.38;
    fill:#FFFFFF;
}

.nose-and-cheek {
    opacity:0.35;
    fill:#ff001f; 
    mix-blend-mode: multiply;
}

.shadow {
    opacity:0.10;
    fill: .492626;
    mix-blend-mode: multiply;
}

.nofill {
    fill: none;
}

.PROFILE-AVATAR .UPPER-ARM {
    opacity: 0;
}

 .LEFT-ZEN-HAND, 
 .RIGHT-ZEN-HAND, 
 .SUITCASE, 
 .LEFT-ZEN-HAND, 
 .RIGHT-ZEN-HAND, 
 .LEFT-HAND-POINTING, 
 .RIGHT-HAND-POINTING,
 .SAD-OPEN-MOUTH,
 .SAD-MOUTH,
 .ANGRY-MOUTH,
 .ANGRY-EYES,
 .SAD-TEARY-EYES,
 .LEFT-HAND-PROFILE,
 .RIGHT-HAND-PROFILE,
 .TALKING-SHAPE-1,
 .TALKING-SHAPE-2,
 .TALKING-SHAPE-3,
 .FLAT-MOUTH,
 .CLOSED-EYES,
 .OPEN-MOUTH,
 .PROFILE-MORPH-SKIRT,
 .MORPH-SKIRT,
 .PROFILE-SUITCASE,
 .HEADSET,
.PROFILE-AVATAR,
.BACK-AVATAR {
    display: none;
}

.walking .avatar .FRONT-AVATAR .RIGHT-HAND-PROFILE, .walking .avatar .FRONT-AVATAR .LEFT-HAND-PROFILE {
    display: block;
}

.walking .avatar .FRONT-AVATAR .RIGHT-HAND, .walking .avatar .FRONT-AVATAR .LEFT-HAND {
    display: none;
}

.sitting .avatar .PROFILE-AVATAR .LEFT-HAND-PROFILE {
    display: block;
}

.sitting .avatar .PROFILE-AVATAR .LEFT-HAND, 
.sitting .avatar .PROFILE-AVATAR .THUMB, .sitting .avatar .RIGHT-LEG, .sitting .avatar .BACK-LEG  {
    display: none;
}

.back .avatar .BACK-AVATAR {
    display: block;
}

.back .avatar .FRONT-AVATAR {
    display: none;
}


.profile-right .avatar .PROFILE-AVATAR {
    display: block;
}

.profile-left .avatar .FRONT-AVATAR {
    display: none;
}

.profile-left .avatar .PROFILE-AVATAR {
    display: block;
    transform: scaleX(-1) translateX(-100%);

}

.profile-right .avatar .FRONT-AVATAR {
    display: none;
}

/* 
.walking .avatar  .PANTS {
    opacity: 50%;
} */


.suitcase .avatar  .SUITCASE {
    display: block;
}

.suitcase .avatar  .LEFT-FOREARM, .suitcase .avatar  .LEFT-HAND, .suitcase .avatar  .LEFT-HAND-PROFILE, .suitcase .avatar  .PROFILE-FULL-ARM {
    display: none;
}

.headset .avatar  .HEADSET {
    display: block;
}

/* tests with VERY VERY rough animation */
.talking[data-animation="talking()"]  .TALKING-SHAPE-1 {
    opacity:0;
}

[data-animation="talking()"]  .TALKING-SHAPE-1 {
    display:inline !important;
    opacity: 1;
    transition:opacity 0.15s;
}

[data-animation="talking()"]  .TALKING-SHAPE-3 {
    display:inline !important;
    transition:all 0.15s;
    opacity:0;
}

[data-animation="talking()"]  .SMILE {
    opacity:0;
}

.talking[data-animation="talking()"]  .TALKING-SHAPE-3 {
    opacity:1;
}

/* We'll need to revisit  this one to make sure that flickering is minimised but that any "3D" animations still work */

[data-animation="talking()"], [data-animation="talking()"] * {
    backface-visibility: hidden;
}


/* Skin Colour */

#avatar-container.PALE .SKINTONE, #avatar-mascot.PALE .SKINTONE, button.PALE {
    fill:#fbdcbf;
    background-color:#fbdcbf;
}

#avatar-container.LIGHT .SKINTONE, button.LIGHT {
    fill:#f6c4a1;
    background-color:#f6c4a1;
}

#avatar-container.OLIVE .SKINTONE, button.OLIVE {
    fill:#d69665;
    background-color:#d69665;
}

#avatar-container.GOLDEN .SKINTONE, button.GOLDEN {
    fill:#b1754d;
    background-color:#b1754d;
}

#avatar-container.TAN .SKINTONE, button.TAN {
    fill:#8b5435;
    background-color:#8b5435;
}

#avatar-container.BROWN .SKINTONE, button.BROWN {
    fill:#6d3519;
    background-color:#6d3519;
}

#avatar-container.DARK .SKINTONE, button.DARK {
    fill:#572714;
    background-color:#572714;
}




/* Outfit Colours */

#avatar-container.DARK-GREEN .OUTFIT-COLOUR, button.DARK-GREEN {
    fill:#00524a;
    background-color:#00524a;
}

#avatar-container.BLUE .OUTFIT-COLOUR, button.BLUE {
    fill:#008081;
    background-color:#008081;
}

#avatar-container.PALE-GREEN .OUTFIT-COLOUR, button.PALE-GREEN {
    fill:#92bea7;
    background-color:#92bea7;
}

#avatar-container.PINK .OUTFIT-COLOUR, button.PINK, #avatar-mascot.PINK .OUTFIT-COLOUR {
    fill:#ff6968;
    background-color:#ff6968;
}

#avatar-container.RED .OUTFIT-COLOUR, button.RED {
    fill:#ba4343;
    background-color:#ba4343;
}

#avatar-container.LIGHT-BLUE .OUTFIT-COLOUR, button.LIGHT-BLUE {
    fill:#2087a2;
    background-color:#2087a2;
}

#avatar-container.ORANGE .OUTFIT-COLOUR, button.ORANGE {
    fill:#cb5b34;
    background-color:#cb5b34;
}

#avatar-container.YELLOW .OUTFIT-COLOUR, button.YELLOW {
    fill:#fad08c;
    background-color:#fad08c;
}

#avatar-container.DARK-BLUE .OUTFIT-COLOUR, button.DARK-BLUE {
    fill:#304c84;
    background-color:#304c84;

}

#avatar-container.LIME .OUTFIT-COLOUR, button.LIME {
    fill:#8bd989;
    background-color:#8bd989;

}

#avatar-container.LAVENDAR .OUTFIT-COLOUR, button.LAVENDAR {
    fill:#caa1e3;
    background-color:#caa1e3;

}


/* Hair Colours */



#avatar-container.VERMILLION .HAIR-COLOUR, button.VERMILLION {
    fill: #be493a;
    background-color: #be493a;
}

#avatar-container.GINGER .HAIR-COLOUR, button.GINGER {
    fill: #e65f32;
    background-color: #e65f32;
}

#avatar-container.STRAWBERRY .HAIR-COLOUR, button.STRAWBERRY {
    fill: #f59a76;
    background-color: #f59a76;
}

#avatar-container.PLATINUM .HAIR-COLOUR, button.PLATINUM {
    fill: #ffe7c5;
    background-color: #ffe7c5;
}

#avatar-container.BLOND .HAIR-COLOUR, button.BLOND {
    fill: #ffd894;
    background-color: #ffd894;
}

#avatar-container.DARK-BLOND .HAIR-COLOUR, button.DARK-BLOND {
    fill: #db9654;
    background-color: #db9654;
}

#avatar-container.LIGHT-BROWN .HAIR-COLOUR, button.LIGHT-BROWN {
    fill: #a8663b;
    background-color: #a8663b;
}

#avatar-container.MEDIUM-BROWN .HAIR-COLOUR, button.MEDIUM-BROWN, #avatar-mascot.MEDIUM-BROWN .HAIR-COLOUR {
    fill: #703e1f;
    background-color: #703e1f;
}

#avatar-container.CHOCOLATE .HAIR-COLOUR, button.CHOCOLATE {
    fill: #511410;
    background-color: #511410;
}


#avatar-container.DARK-BROWN .HAIR-COLOUR, button.DARK-BROWN {
    fill: #3c1e18;
    background-color: #3c1e18;
}


#avatar-container.RAVEN .HAIR-COLOUR, button.RAVEN {
    fill: #24243c;
    background-color: #24243c;
}

#avatar-container.BLACK .HAIR-COLOUR, button.BLACK {
    fill: #212026;
    background-color: #212026;
}

#avatar-container.DARK-GREY .HAIR-COLOUR, button.DARK-GREY {
    fill: #6a5a58;
    background-color: #6a5a58;
}

#avatar-container.GREY .HAIR-COLOUR, button.GREY {
    fill: #cecece;
    background-color: #cecece;
}

#avatar-container.WHITE .HAIR-COLOUR, button.WHITE {
    fill: #fffafa;
    background-color: #fffafa;
}




#avatar-container.NO-EARRINGS .LEFT-EARRING, 
#avatar-container.NO-EARRINGS .RIGHT-EARRING, 
#avatar-container.NO-EARRINGS .LEFT-HIGHLIGHT, 
#avatar-container.NO-EARRINGS .RIGHT-HIGHLIGHT,
#avatar-container.NO-EARRINGS .BACK-RIGHT-EARRING, 
#avatar-container.NO-EARRINGS .BACK-RIGHT-HIGHLIGHT, 
#avatar-container.NO-EARRINGS .BACK-RIGHT-EARRING,
#avatar-container.NO-EARRINGS .BACK-RIGHT-HIGHLIGHT,
#avatar-container.NO-EARRINGS .EARRING,
#avatar-container.NO-EARRINGS .RIGHT-EAR .HIGHLIGHT  {
    display:none
}

.avatar-puppet {
	position: relative;
}

.hold-sign .avatar .RIGHT-ARM {
	transform: rotate(142deg) scaleX(-1) !important;
    transform-origin: 74% 43% !important;
}

img.stop {
	display:none;
    position: absolute;
	width: 89%;
    left: -23%;
}

.avatar-container:not(.sitting) g.AIRPLANE-CHAIR {
	display:none;
}

.breathing-avatar .PROFILE-AVATAR {
	display:none !important;
}

.breathing-avatar .FRONT-AVATAR {
	display:block !important;
}

.breathing-avatar .FRONT-AVATAR g.LEFT-ARM {
	transform:matrix(-0.99654, -0.08313, 0.08313, -0.99654, 1218.51, 1397.71);
}

.breathing-avatar .FRONT-AVATAR g.RIGHT-ARM {
	transform:matrix(-0.99999, 0.0041, -0.0041, -0.99999, 726.844, 1364.34)
}
.avatar-illustration-container {
	margin:0px !important;
}

.avatar-background {
	box-sizing: border-box;
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    bottom: 0;
    z-index: 100;
}

.avatar-puppet.shaking-head .SMILE {
	display:none;
}

.avatar-puppet.shaking-head .FLAT-MOUTH {
	display:block;
}

.avatar-puppet.shaking-head .LEFT-ARM {
    transform-origin: 61% 56% !important;
	transform:scaleY(-1) rotate(30deg) !important;
}

.avatar-puppet.shaking-head .RIGHT-ARM {
    transform-origin: 62% 61% !important;
	transform:scaleY(-1) rotate(-32deg) !important;
}


.sitting .PROFILE-AVATAR {
	transform: matrix(1,0,0,1,0,100) !important;
}

.sitting .LEFT-LEG {
	transform: matrix(0.08716,-0.99619,0.99619,0.08716,-337.01714,1223.87887) !important;
}

.sitting .LEFT-SHOE {
	transform: 	matrix(0.93969,0.34202,-0.34202,0.93969,424.56914,-96.2418) !important;
}

.sitting .SKIRT {
	transform:matrix(0.34202,-0.93969,0.93969,0.34202,-483.67601,1032.81229) !important;
}

.sitting .FULL-ARM {
	transform:matrix(0.5,-0.86603,0.86603,0.5,-338.26206,772.1018) !important;
}

.sitting .LEFT-ARM {
	transform:matrix(1,0,0,1,0,0) !important;
}

.sitting .LEFT-HAND-PROFILE {
	transform:matrix(-0.98481,0.17365,0.17365,0.98481,921.33177,-88.67107) !important;
}

.sitting .UPPER-BODY {
	transform: 	matrix(0.99619,-0.08716,0.08716,0.99619,-68.50102,28.68821) !important;
}

.sitting .LOWER-LEG {
	transform:matrix(-0.08716,0.99619,-0.99619,-0.08716,1486.35264,573.72719) !important;
}

.walking .SKIRT.PANTS > .OUTFIT-COLOUR {
    display: none !important;
}

.sitting .SKIRT.PANTS > .LOWER-LEG.OUTFIT-COLOUR {
    display: none !important;
}