.face,.face *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent !important;outline:none !important}.face{max-width:700px;width:50%;position:relative;cursor:pointer}.face .expression{width:100%;padding-bottom:112.866817%}.face .expression div{position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position:left top;background-size:100% 100%}.face .expression div img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.face .expression .mouth .mouthbg{-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;mask-mode:alpha}.face .expression .mouth .mouthbg img{display:none}.face .expression .mouth .mouthbg.neutral img{display:block}.face .expression .mouth .mouthbg.neutral.jj{clip-path:polygon(47% 0, 47% 100%, 58.5% 100%, 58.5% 30%)}.face .expression .mouth .mouthbg.neutral.greg{clip-path:polygon(49.5% 0, 49% 100%, 63.5% 100%, 63% 30%)}.face .expression .mouth .mouthbg.smile img{display:block}.face .expression .mouth .mouthbg.smile.jj{clip-path:polygon(46.5% 0, 46.5% 100%, 59.5% 100%, 59.5% 30%);top:-2%}.face .expression .mouth .mouthbg.smile.greg{clip-path:polygon(49.5% 0, 49% 100%, 64.5% 100%, 63% 30%)}.face .expression .mouth .mouthbg.angled-down img{display:block}.face .expression .mouth .mouthbg.angled-down.jj{clip-path:polygon(50.5% 0, 44% 100%, 57.5% 100%, 58.5% 30%)}.face .expression .mouth .mouthbg.angled-down.greg{clip-path:polygon(52% 0, 49% 100%, 62.5% 100%, 63% 30%)}.face .expression .mouth .mouthbg.pursed img{display:block}.face .expression .mouth .mouthbg.pursed.jj{clip-path:polygon(48% 0, 46% 100%, 58.5% 100%, 58.5% 30%)}.face .expression .mouth .mouthbg.pursed.greg{clip-path:polygon(50% 0, 50% 100%, 62.5% 100%, 63% 30%)}.face .expression .mouth .mouthbg.teeth-bared img{display:block}.face .expression .mouth .mouthbg.teeth-bared.jj{clip-path:polygon(47% 0, 47% 100%, 58.5% 100%, 58.5% 30%)}.face .expression .mouth .mouthbg.teeth-bared.greg{clip-path:polygon(51.5% 0, 51% 100%, 63.5% 100%, 63% 30%)}.face .expression .mouth .jaw{-webkit-transition:top 0.25s;-moz-transition:top 0.25s;-o-transition:top 0.25s;transition:top 0.25s}.face .expression .eyes{container-type:inline-size;pointer-events:none}.face .expression .eyes .eyesocket,.face .expression .eyes .eyelightssocket{-webkit-mask-image:url("../img/expressions/jj/eye-bg.png");mask-image:url("../img/expressions/jj/eye-bg.png");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;mask-mode:alpha}.face .expression .eyes .eyesocket.eyelightssocket,.face .expression .eyes .eyelightssocket.eyelightssocket{margin-top:0.95%}.face .expression .eyes .eyesocket.eyelightssocket .eyelights,.face .expression .eyes .eyelightssocket.eyelightssocket .eyelights{margin-top:-0.95%}.face .expression .eyes .eyeballs,.face .expression .eyes .eyelights{-webkit-transition:left 0.1s,top 0.1s;-moz-transition:left 0.1s,top 0.1s;-o-transition:left 0.1s,top 0.1s;transition:left 0.1s,top 0.1s;animation-direction:forwards;animation-iteration-count:infinite;animation-timing-function:linear;animation-play-state:running;animation-fill-mode:forwards;animation-timing-function:ease;animation-duration:2s}.face .expression .eyes .eyeballs.side-glance,.face .expression .eyes .eyeballs.double-take,.face .expression .eyes .eyelights.side-glance,.face .expression .eyes .eyelights.double-take{animation-name:eyes-side-glance}.face .expression .eyes .eyeballs.side-glance.eyelights,.face .expression .eyes .eyeballs.double-take.eyelights,.face .expression .eyes .eyelights.side-glance.eyelights,.face .expression .eyes .eyelights.double-take.eyelights{animation-name:eyes-side-glance-eyelights}.face .expression .eyes .eyeballs.side-glance.double-take,.face .expression .eyes .eyeballs.double-take.double-take,.face .expression .eyes .eyelights.side-glance.double-take,.face .expression .eyes .eyelights.double-take.double-take{animation-duration:1.6s;animation-iteration-count:2}.face .expression .eyes .eyeballs.up-gazes,.face .expression .eyes .eyeballs.down-gazes,.face .expression .eyes .eyeballs.side-to-side,.face .expression .eyes .eyelights.up-gazes,.face .expression .eyes .eyelights.down-gazes,.face .expression .eyes .eyelights.side-to-side{animation-name:eyes-back-and-forth;animation-duration:4s}.face .expression .eyes .eyeballs.up-gazes.eyelights,.face .expression .eyes .eyeballs.down-gazes.eyelights,.face .expression .eyes .eyeballs.side-to-side.eyelights,.face .expression .eyes .eyelights.up-gazes.eyelights,.face .expression .eyes .eyelights.down-gazes.eyelights,.face .expression .eyes .eyelights.side-to-side.eyelights{animation-name:eyes-back-and-forth-eyelights}@keyframes eyes-side-glance{30%{left:0}40%{left:1%}70%{left:1%}80%{left:0}}@keyframes eyes-side-glance-eyelights{30%{left:0}40%{left:.4%}70%{left:.4%}80%{left:0}}@keyframes eyes-back-and-forth{20%{left:0}25%{left:1%}45%{left:1%}50%{left:0%}70%{left:0%}75%{left:-1%}95%{left:-1%}100%{left:0}}@keyframes eyes-back-and-forth-eyelights{20%{left:0}25%{left:.4%}45%{left:.4%}50%{left:0%}70%{left:0%}75%{left:-.4%}95%{left:-.4%}100%{left:0}}