<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 745 572">
<defs>
<style>
.cls-1,.cls-2,.cls-28,.cls-29,.cls-3,.cls-30,.cls-37,.cls-38,.cls-39,.cls-40,.cls-42,.cls-43,.cls-44,.cls-45,.cls-46,.cls-55,.cls-58,.cls-60,.cls-69,.cls-70,.cls-71,.cls-72,.cls-73{fill:none;}.cls-2,.cls-3{stroke:#576a87;stroke-width:13.91px;}.cls-2,.cls-28,.cls-29,.cls-30,.cls-39,.cls-42,.cls-43,.cls-44,.cls-45,.cls-55,.cls-60,.cls-69,.cls-70,.cls-71,.cls-72{stroke-linecap:round;}.cls-2,.cls-28,.cls-29,.cls-3,.cls-30,.cls-37,.cls-38,.cls-39,.cls-40,.cls-42,.cls-43,.cls-45,.cls-46,.cls-55,.cls-58,.cls-60,.cls-69,.cls-70,.cls-71,.cls-72,.cls-73{stroke-miterlimit:10;}.cls-4{fill:#f9a819;}.cls-5{fill:#aa5d52;}.cls-6{fill:#64bdff;}.cls-7{fill:#f42f2f;}.cls-8{fill:#eaeaea;}.cls-9{fill:#d8d8d8;}.cls-10{fill:#f2f2f2;}.cls-11{fill:#9e69b7;}.cls-12{opacity:0.05;}.cls-13{fill:#75d85d;}.cls-14{fill:#fff;}.cls-15{fill:#204a8c;}.cls-16{fill:#4580e2;}.cls-17{fill:#2e58aa;}.man-circle{clip-path:url(#clip-path);}.cls-19{fill:#eaafa9;}.cls-20{fill:#606060;}.cls-21{fill:#333;}.cls-22{fill:#d8bf8b;}.cls-23{fill:#b59661;}.cls-24{fill:#75d353;}.cls-25{fill:#ffe9e9;}.cls-26{fill:#ffc1b0;}.cls-27{fill:#dd8783;}.cls-28,.cls-29{stroke:#eaafa9;}.cls-28{stroke-width:11.68px;}.cls-29,.cls-30{stroke-width:5.84px;}.cls-30{stroke:#fccac8;}.cls-31{fill:#fec337;}.woman-circle{clip-path:url(#clip-path-2);}.cls-33{fill:#303030;}.cls-34{fill:#9e5447;}.cls-35{fill:#c0a0ea;}.cls-36{fill:#ff69ad;}.cls-37,.cls-38{stroke:#c61414;}.cls-37{stroke-width:2.93px;}.cls-38{stroke-width:2.53px;}.cls-39,.cls-60{stroke:#aa5d52;}.cls-39{stroke-width:10.98px;}.cls-40{stroke:#fcc846;stroke-width:1.83px;}.cls-41{fill:#683631;}.cls-42,.cls-70{stroke:#303030;}.cls-42,.cls-43{stroke-width:2.2px;}.cls-43,.cls-69,.cls-72{stroke:#683631;}.cls-44{stroke:#e8e8e8;stroke-linejoin:round;stroke-width:3.02px;}.cls-45{stroke:#64bcf2;stroke-width:2.01px;}.cls-46{stroke:#d8d8d8;stroke-width:3.11px;}.cls-47{fill:#916a50;}.cls-48{fill:#a87b5d;}.cls-49{fill:#545454;}.cls-50{fill:#3d3c3f;}.cls-51{fill:#ffd664;}.cls-52{fill:#f7f7f7;}.cls-53{fill:#e5e5e5;}.cls-54{fill:#947bff;}.cls-55,.cls-58{stroke:#fff;}.cls-55{stroke-width:7.67px;}.cls-56{fill:#ea5334;}.cls-57{fill:#fc8738;}.cls-58{stroke-width:4.26px;}.cls-59{fill:#22d1af;}.cls-60{stroke-width:20px;}.cls-61{fill:#8c463f;}.cls-62{fill:#1a1a1a;}.cls-63{fill:#f76c66;}.cls-64{fill:#e6e7e8;}.cls-65{fill:#e8e8e8;}.cls-66{fill:#41352e;}.cls-67{fill:#7c489b;}.cls-68{fill:#d9dddd;}.cls-69{stroke-width:4px;}.cls-70{stroke-width:3px;}.cls-71{stroke:#e5e5e5;opacity:0.5;}.cls-71,.cls-72,.cls-73{stroke-width:2px;}.cls-72{opacity:0.2;}.cls-73{stroke:#565656;}
</style>
<clipPath id="clip-path">
<circle class="cls-1" cx="231.79" cy="240.58" r="68.17" />
</clipPath>
<clipPath id="clip-path-2">
<circle class="cls-1" cx="522.15" cy="213.44" r="76.45" />
</clipPath>
</defs>
<title>
hero-image
</title>
<path class="cls-2" d="M427.13,497.46l-11.41-90.07a14.94,14.94,0,0,0-14.51-12.71l-68.71-1.21a14.92,14.92,0,0,0-14.95,12.25l-13.78,89.62" />
<line class="cls-3" x1="328.07" y1="348.82" x2="327.42" y2="385.9" />
<line class="cls-3" x1="410.01" y1="350.26" x2="409.36" y2="387.34" />
<rect class="cls-4" x="294.5" y="377.35" width="145.15" height="24.96" rx="12.48" transform="translate(6.92 -6.41) rotate(1.01)" />
<path class="cls-4" d="M403.65,256l-68.71-1.21A14.92,14.92,0,0,0,320,267.05L306.21,342.5a14.93,14.93,0,0,0,14.43,17.62l93.9,1.66a14.93,14.93,0,0,0,15-17.16l-11.41-75.9A14.94,14.94,0,0,0,403.65,256Z" />
<rect class="cls-5" x="324.31" y="415.07" width="16.59" height="82.29" />
<path class="cls-6" d="M343.88,480.52H321.33V390.23a26.36,26.36,0,0,1,26.36-26.35h50.47v22.54H347.69a3.81,3.81,0,0,0-3.81,3.81Z" />
<path class="cls-7" d="M303.63,497.1h39a3,3,0,0,1,2.95,3v15.33a2.76,2.76,0,0,1-2.75,2.76H303.62v-21Z" />
<path class="cls-8" d="M286,513c1.62-6.16,6-15.68,17.64-15.89v21H290A4.1,4.1,0,0,1,286,513Z" />
<rect class="cls-9" x="283.15" y="513.58" width="64.61" height="5.44" rx="2.72" transform="translate(631.01 1032.55) rotate(179.99)" />
<path class="cls-10" d="M312.91,497.1h9.4a2.31,2.31,0,0,1,2.31,2.31v6.28a0,0,0,0,1,0,0h-14a0,0,0,0,1,0,0v-6.28A2.31,2.31,0,0,1,312.91,497.1Z" transform="translate(635.3 1002.73) rotate(179.99)" />
<rect class="cls-5" x="396" y="415.15" width="16.59" height="82.29" transform="translate(808.67 912.51) rotate(179.99)" />
<path class="cls-6" d="M415.56,480.6H393V390.31a3.82,3.82,0,0,0-3.81-3.81H338.74V364h50.47a26.34,26.34,0,0,1,26.35,26.35Z" />
<path class="cls-7" d="M433.27,497.18h-39a3,3,0,0,0-2.95,2.95v15.32A2.74,2.74,0,0,0,394,518.2h39.23v-21Z" />
<path class="cls-8" d="M450.92,513.08c-1.62-6.16-6-15.68-17.64-15.89v21h13.67A4.1,4.1,0,0,0,450.92,513.08Z" />
<rect class="cls-9" x="389.14" y="513.66" width="64.61" height="5.44" rx="2.72" />
<path class="cls-10" d="M412.28,497.17h14a0,0,0,0,1,0,0v6.28a2.31,2.31,0,0,1-2.31,2.31h-9.4a2.31,2.31,0,0,1-2.31-2.31v-6.28A0,0,0,0,1,412.28,497.17Z" />
<path class="cls-11" d="M384.09,243.32H349.24A17.64,17.64,0,0,0,331.59,261l3,29.5A247.9,247.9,0,0,1,332,358.51l-.45,2.52a2.82,2.82,0,0,0,2.82,2.82h64.5a2.82,2.82,0,0,0,2.82-2.82h0a247.71,247.71,0,0,1-2.91-73.17l2.93-26.9A17.66,17.66,0,0,0,384.09,243.32Z" />
<path class="cls-5" d="M357.79,231.08h17.75a0,0,0,0,1,0,0v14.28a8.87,8.87,0,0,1-8.87,8.87h0a8.87,8.87,0,0,1-8.87-8.87V231.08A0,0,0,0,1,357.79,231.08Z" />
<rect class="cls-5" x="345.77" y="243.32" width="41.78" height="17.53" rx="8.76" />
<ellipse class="cls-12" cx="366.45" cy="533.18" rx="245.5" ry="18" />
<rect class="cls-13" x="128.95" y="124.1" width="78.88" height="78.88" rx="7.2" />
<path class="cls-14" d="M180.77,152.51l-11.16-5.6.33,21.63a11.23,11.23,0,0,0-12,.25,5.94,5.94,0,0,0-2.7,4.89c.05,3.72,4,6.57,8.94,6.49a11.87,11.87,0,0,0,3-.44c3.4-1,5.74-3.41,5.7-6.32l-.33-21.8,6.91,3.47a1.44,1.44,0,1,0,1.29-2.57Z" />
<path class="cls-15" d="M215.83,390.9l-24.67-6.38-38,146.72a2.47,2.47,0,0,0,2.37,3.08l21.18.17a2.47,2.47,0,0,0,2.4-1.85Z" />
<path class="cls-15" d="M518.06,391.08l24.67-6.39,38,146.73a2.46,2.46,0,0,1-2.37,3.08l-21.18.16a2.45,2.45,0,0,1-2.4-1.84Z" />
<rect class="cls-16" x="124.95" y="340.65" width="486" height="21.84" rx="10.92" />
<path class="cls-17" d="M155,362.49H580.92a0,0,0,0,1,0,0v32.76a4.55,4.55,0,0,1-4.55,4.55H159.54a4.55,4.55,0,0,1-4.55-4.55V362.49A0,0,0,0,1,155,362.49Z" />
<rect class="cls-15" x="154.99" y="362.49" width="425.93" height="12.74" />
<g class="man-circle">
<circle class="cls-6" cx="231.79" cy="240.58" r="68.17" />
<path class="cls-19" d="M192.57,321.54h-.22a6.28,6.28,0,0,1-5.7-6.82c5-55.53,28.81-59.08,31.51-59.3l1,12.52a1.68,1.68,0,0,0,.26,0c-.16,0-16.28,3.33-20.29,47.93A6.27,6.27,0,0,1,192.57,321.54Z" />
<path class="cls-19" d="M203.18,312.57a2.5,2.5,0,0,1-1.53-.63l-4.28-3.79a2.51,2.51,0,1,1,3.33-3.76l4.28,3.78a2.52,2.52,0,0,1-1.8,4.4Z" />
<path class="cls-20" d="M239.54,182.62a17.63,17.63,0,0,0-18.11,9.75H219a9.11,9.11,0,0,0-9.11,9.11v6.24h11.48a17.64,17.64,0,1,0,18.18-25.1Z" />
<path class="cls-21" d="M218.67,250.07h25.7a10.48,10.48,0,0,1,10.48,10.48v56.38a1.67,1.67,0,0,1-1.67,1.67h-43.3a1.67,1.67,0,0,1-1.67-1.67V260.55A10.48,10.48,0,0,1,218.67,250.07Z" />
<rect class="cls-22" x="209.99" y="318.6" width="43.22" height="74.27" />
<path class="cls-23" d="M210.06,331.55V329.1a10.51,10.51,0,0,0,10.5-10.5H223A13,13,0,0,1,210.06,331.55Z" />
<path class="cls-23" d="M253.13,331.55a13,13,0,0,1-12.94-12.95h2.45a10.51,10.51,0,0,0,10.49,10.5Z" />
<rect class="cls-23" x="230.37" y="332.84" width="2.45" height="60.04" />
<rect class="cls-23" x="227.41" y="331.2" width="8.37" height="2.45" />
<path class="cls-24" d="M204.45,392.88h25.91v11.39a1.72,1.72,0,0,1-1.71,1.71H204.21V392.89Z" />
<path class="cls-8" d="M193.22,402.79c1-3.83,3.75-9.77,11-9.9V406H195.7A2.55,2.55,0,0,1,193.22,402.79Z" />
<rect class="cls-9" x="191.46" y="403.15" width="40.24" height="3.39" rx="1.69" transform="translate(423.16 809.69) rotate(-180)" />
<path class="cls-10" d="M211.07,392.88h8.39a1.44,1.44,0,0,1,1.44,1.44v3.91a0,0,0,0,1,0,0H209.63a0,0,0,0,1,0,0v-3.91a1.44,1.44,0,0,1,1.44-1.44Z" transform="translate(430.53 791.12) rotate(-180)" />
<path class="cls-24" d="M258.73,392.88H232.82v11.39a1.72,1.72,0,0,0,1.72,1.71H259V392.89Z" />
<path class="cls-8" d="M270,402.79c-1-3.83-3.75-9.77-11-9.9V406h8.52A2.55,2.55,0,0,0,270,402.79Z" />
<rect class="cls-9" x="231.48" y="403.15" width="40.24" height="3.39" rx="1.69" />
<path class="cls-10" d="M242.28,392.88h11.27a0,0,0,0,1,0,0v3.91a1.44,1.44,0,0,1-1.44,1.44h-8.39a1.44,1.44,0,0,1-1.44-1.44v-3.91A0,0,0,0,1,242.28,392.88Z" />
<path class="cls-21" d="M199.26,253.81h19.26A10.89,10.89,0,0,1,229.4,264.7v0a10.89,10.89,0,0,1-10.89,10.89H199.26a1.67,1.67,0,0,1-1.67-1.67V255.49a1.67,1.67,0,0,1,1.67-1.67Z" transform="translate(-126.3 251.03) rotate(-48.81)" />
<path class="cls-21" d="M235.48,253.81h19.26a10.89,10.89,0,0,1,10.89,10.89v0a10.89,10.89,0,0,1-10.89,10.89H235.48a1.67,1.67,0,0,1-1.67-1.67V255.49a1.67,1.67,0,0,1,1.67-1.67Z" transform="translate(214.98 626.93) rotate(-131.19)" />
<path class="cls-19" d="M226.42,245.84h10.86a0,0,0,0,1,0,0v8.74a5.43,5.43,0,0,1-5.43,5.43h0a5.43,5.43,0,0,1-5.43-5.43v-8.74a0,0,0,0,1,0,0Z" />
<path class="cls-10" d="M225.2,247.76l-4.52,12.18a1.67,1.67,0,0,0,1.93,2.22l9.28-2.06Z" />
<path class="cls-10" d="M238.52,247.76,243,260a1.68,1.68,0,0,1-1.94,2.21l-9.3-2.06Z" />
<circle class="cls-19" cx="254.61" cy="223.75" r="7.01" />
<circle class="cls-19" cx="209.88" cy="223.75" r="7.01" />
<circle class="cls-25" cx="231.94" cy="268.07" r="1.93" />
<circle class="cls-25" cx="231.94" cy="277.34" r="1.93" />
<circle class="cls-25" cx="231.94" cy="268.07" r="1.93" />
<path class="cls-26" d="M210.21,206.72v24.65a21.72,21.72,0,0,0,21.73,21.72h0a21.72,21.72,0,0,0,21.73-21.72V206.72Z" />
<path class="cls-20" d="M217.68,217.76a1.19,1.19,0,0,1-.37-.06,1.07,1.07,0,0,1-.63-1.37,5.26,5.26,0,0,1,6.78-3.12,1.06,1.06,0,0,1,.63,1.37,1.07,1.07,0,0,1-1.37.63,3.13,3.13,0,0,0-4,1.86A1.06,1.06,0,0,1,217.68,217.76Z" />
<path class="cls-20" d="M246.07,217.76a1.06,1.06,0,0,1-1-.69,3.14,3.14,0,0,0-4-1.86,1.07,1.07,0,0,1-1.37-.63,1.05,1.05,0,0,1,.63-1.37,5.28,5.28,0,0,1,6.78,3.12,1.07,1.07,0,0,1-.63,1.37A1.19,1.19,0,0,1,246.07,217.76Z" />
<path class="cls-20" d="M243.79,232.22h0a1.46,1.46,0,0,0-1.47-1.45H222.05a1.45,1.45,0,0,0-1.46,1.45h0a1.46,1.46,0,0,1-1.47,1.45h-9.24v1.17a21.78,21.78,0,0,0,21.9,21.67h0a21.78,21.78,0,0,0,21.89-21.67v-1.17h-8.42A1.45,1.45,0,0,1,243.79,232.22Z" />
<path class="cls-27" d="M234.74,229.31h-5a1.18,1.18,0,0,1,0-2.36h5a1.18,1.18,0,0,1,0,2.36Z" />
<rect class="cls-20" x="209.92" y="204.21" width="3.61" height="31.32" />
<rect class="cls-20" x="250.06" y="204.21" width="3.61" height="31.32" />
<g class="man-left-arm">
<line class="cls-28" x1="262.39" y1="289.23" x2="262.39" y2="258.68" />
<rect class="cls-19" x="254.44" y="245.65" width="16.04" height="16.04" rx="3.38" />
<line class="cls-29" x1="259.71" y1="250.42" x2="259.71" y2="240.87" />
<line class="cls-30" x1="270.78" y1="248.56" x2="261.23" y2="248.56" />
<line class="cls-30" x1="270.78" y1="254.39" x2="261.23" y2="254.39" />
<line class="cls-30" x1="270.78" y1="260.24" x2="261.23" y2="260.24" />
<line class="cls-28" x1="262.39" y1="289.23" x2="262.39" y2="258.68" />
<rect class="cls-19" x="254.44" y="245.65" width="16.04" height="16.04" rx="3.38" />
<line class="cls-29" x1="259.71" y1="250.42" x2="259.71" y2="240.87" />
<line class="cls-30" x1="270.78" y1="248.56" x2="261.23" y2="248.56" />
<line class="cls-30" x1="270.78" y1="254.39" x2="261.23" y2="254.39" />
<line class="cls-30" x1="270.78" y1="260.24" x2="261.23" y2="260.24" />
</g>
<g class="man-eyes-closed">
<path class="cls-27" d="M225.34,222.61a.88.88,0,0,1-.85-.68,2.2,2.2,0,0,0-4.29,0,.86.86,0,1,1-1.68-.38,3.93,3.93,0,0,1,7.66,0,.86.86,0,0,1-.65,1Z" />
<path class="cls-27" d="M244.21,222.61a.86.86,0,0,1-.84-.68,2.2,2.2,0,0,0-4.29,0,.87.87,0,0,1-1.69-.38,3.93,3.93,0,0,1,7.66,0,.86.86,0,0,1-.65,1Z" />
</g>
<g class="man-eyes-open">
<circle class="cls-33" cx="222.31" cy="220.72" r="2.23" />
<circle class="cls-33" cx="241.27" cy="220.72" r="2.23" />
</g>
<g class="man-mouth-open">
<path class="cls-66" d="M225.74,235.6H239.9a0,0,0,0,1,0,0V239a6.1,6.1,0,0,1-6.1,6.1h-6.12a1.94,1.94,0,0,1-1.94-1.94V235.6A0,0,0,0,1,225.74,235.6Z" />
<rect class="cls-64" x="225.45" y="235.53" width="14.74" height="3.65" />
<path class="cls-63" d="M239.11,242a4,4,0,0,0-6.87,2.79,2.83,2.83,0,0,0,0,.29h1.55A6.11,6.11,0,0,0,239.11,242Z" />
</g>
<g class="man-mouth-closed">
<path class="cls-70" d="M238.94,239.1a9.13,9.13,0,0,1-12.9,0" />
</g>
</g>
<circle class="cls-31" cx="522.15" cy="342.53" r="41.96" />
<path class="cls-14" d="M533.82,335.16h0a7,7,0,0,0-9.85,0L522.15,337l-1.81-1.81a7,7,0,0,0-9.86,0h0a7,7,0,0,0,0,9.85l1.82,1.82h0l9.27,9.27a.82.82,0,0,0,1.17,0l9.27-9.27,1.81-1.82A7,7,0,0,0,533.82,335.16Z" />
<g class="woman-circle">
<rect class="cls-31" x="410.85" y="104.5" width="222.6" height="201.73" />
<circle class="cls-33" cx="508.73" cy="203.37" r="10.16" />
<rect class="cls-5" x="506.16" y="323.52" width="13.77" height="14.36" transform="translate(1026.09 661.41) rotate(-180)" />
<rect class="cls-34" x="528.86" y="323.52" width="13.77" height="14.36" />
<rect class="cls-35" x="506.16" y="310.96" width="13.77" height="14.36" transform="translate(1026.09 636.27) rotate(-180)" />
<rect class="cls-35" x="528.86" y="310.96" width="13.77" height="14.36" />
<path class="cls-7" d="M549.18,311.23H499.65a3.66,3.66,0,0,1-3.66-3.66l3.19-42.67L496,231.12a28.43,28.43,0,0,1,28.42-28.43h0a28.43,28.43,0,0,1,28.43,28.43l-2.53,33.78,2.53,42.67A3.66,3.66,0,0,1,549.18,311.23Z" />
<path class="cls-34" d="M555.61,347.69H530.48a1.62,1.62,0,0,1-1.62-1.62v-8.8H549.4a7.84,7.84,0,0,1,7.84,7.85v.95A1.62,1.62,0,0,1,555.61,347.69Z" />
<rect class="cls-36" x="524.97" y="344.4" width="34.01" height="3.29" rx="1.65" />
<path class="cls-36" d="M548.73,346.82a1.68,1.68,0,0,1-.69-.15,1.63,1.63,0,0,1-.78-2.16,10.29,10.29,0,0,1,8.46-5.89,1.63,1.63,0,1,1,.28,3.24,7.35,7.35,0,0,0-2,.45,7.05,7.05,0,0,0-3.84,3.58A1.61,1.61,0,0,1,548.73,346.82Z" />
<line class="cls-37" x1="506.08" y1="240.98" x2="542.3" y2="240.98" />
<line class="cls-38" x1="504.19" y1="282.87" x2="504.19" y2="302.63" />
<line class="cls-38" x1="514.43" y1="282.87" x2="514.43" y2="302.63" />
<line class="cls-38" x1="524.67" y1="282.87" x2="524.67" y2="302.63" />
<line class="cls-38" x1="534.91" y1="282.87" x2="534.91" y2="302.63" />
<line class="cls-38" x1="545.15" y1="282.87" x2="545.15" y2="302.63" />
<path class="cls-5" d="M493.3,347.69h25.13a1.62,1.62,0,0,0,1.63-1.62v-8.8H499.52a7.84,7.84,0,0,0-7.84,7.85v.95A1.62,1.62,0,0,0,493.3,347.69Z" />
<rect class="cls-36" x="489.94" y="344.4" width="34.01" height="3.29" rx="1.65" transform="translate(1013.88 692.1) rotate(-180)" />
<path class="cls-36" d="M500.19,346.82a1.72,1.72,0,0,0,.69-.15,1.63,1.63,0,0,0,.78-2.16,10.3,10.3,0,0,0-5.61-5.23,10,10,0,0,0-2.86-.66,1.63,1.63,0,0,0-.27,3.24,7.35,7.35,0,0,1,2,.45,7,7,0,0,1,3.83,3.58A1.63,1.63,0,0,0,500.19,346.82Z" />
<path class="cls-39" d="M502,222.52l-15.54,16.32a4.69,4.69,0,0,0-.11,6.35l10.8,12.15a4.14,4.14,0,0,1,.45,4.88L496,264.9" />
<path class="cls-7" d="M493,211.63h19.27a10.89,10.89,0,0,1,10.89,10.89v0a10.89,10.89,0,0,1-10.89,10.89H493a1.68,1.68,0,0,1-1.68-1.68V213.3A1.68,1.68,0,0,1,493,211.63Z" transform="translate(-17.86 398.82) rotate(-42.25)" />
<path class="cls-40" d="M502,185.8a2.79,2.79,0,1,0,2.78,2.79" />
<path class="cls-40" d="M546.61,185.8a2.79,2.79,0,1,1-2.78,2.79" />
<path class="cls-39" d="M547.16,222.52l15.54,16.32a4.68,4.68,0,0,1,.11,6.35L552,257.34a4.11,4.11,0,0,0-.45,4.88l1.61,2.68" />
<path class="cls-7" d="M527.68,211.63H547a10.89,10.89,0,0,1,10.89,10.89v0A10.89,10.89,0,0,1,547,233.42H527.68a1.68,1.68,0,0,1-1.68-1.68V213.3a1.68,1.68,0,0,1,1.68-1.68Z" transform="translate(793.5 751.59) rotate(-137.75)" />
<path class="cls-5" d="M524.41,223c9.2,0,17-5.13,19.64-12.21a26.61,26.61,0,0,0-19.64-8.16h0a26.6,26.6,0,0,0-19.63,8.16C507.43,217.82,515.21,223,524.41,223Z" />
<path class="cls-33" d="M500.89,180.14v-9.67A23.5,23.5,0,0,1,524.39,147h0a23.5,23.5,0,0,1,23.51,23.51v9.67" />
<circle class="cls-34" cx="545.15" cy="182.18" r="6.42" />
<circle class="cls-34" cx="504.19" cy="182.18" r="6.42" />
<path class="cls-34" d="M515,192.5h18.68a0,0,0,0,1,0,0v15a9.34,9.34,0,0,1-9.34,9.34h0a9.34,9.34,0,0,1-9.34-9.34v-15A0,0,0,0,1,515,192.5Z" />
<path class="cls-5" d="M508.05,167.58h32.48a3.66,3.66,0,0,1,3.66,3.66V188a19.9,19.9,0,0,1-19.9,19.9h0A19.9,19.9,0,0,1,504.4,188V171.24A3.66,3.66,0,0,1,508.05,167.58Z" />
<path class="cls-41" d="M527.47,190.28h-7a1.08,1.08,0,0,1,0-2.16h7a1.08,1.08,0,0,1,0,2.16Z" />
<circle class="cls-33" cx="514.32" cy="181.55" r="2.02" />
<circle class="cls-33" cx="533.65" cy="181.55" r="2.02" />
<g class="mug-steam">
<path class="cls-71" d="M549.07,242.43a3.73,3.73,0,0,0,1.56-5.84c-2.63-4-1.47-8.14.87-9.46" />
<path class="cls-71" d="M555.24,242.43a3.73,3.73,0,0,0,1.56-5.84c-2.63-4-1.47-8.14.87-9.46" />
</g>
<path class="cls-72" d="M536.92,184.54a4.13,4.13,0,0,1-5.82,0" />
<path class="cls-72" d="M517.27,184.54a4.13,4.13,0,0,1-5.82,0" />
<line class="cls-73" x1="514.36" y1="167.58" x2="514.36" y2="163.07" />
<line class="cls-73" x1="517.8" y1="167.58" x2="517.8" y2="163.07" />
<path class="cls-42" d="M509.31,177.59s1.9-2.24,6-1.92" />
<path class="cls-42" d="M538.45,177.59s-1.9-2.24-6-1.92" />
<path class="cls-43" d="M514.43,195.91a11.38,11.38,0,0,0,8.43,3.73" />
<polyline class="cls-44" points="537.01 205.39 523.98 223.72 511.78 205.39" />
<rect class="cls-14" x="517.45" y="221.78" width="13.07" height="16.72" rx="3.02" />
<line class="cls-45" x1="521.05" y1="226.75" x2="526.91" y2="226.75" />
<line class="cls-45" x1="522.37" y1="231.24" x2="525.59" y2="231.24" />
<path class="cls-46" d="M560.16,249.72H563a2.89,2.89,0,0,1,2.89,2.89v0a2.89,2.89,0,0,1-2.89,2.89h-2.89a0,0,0,0,1,0,0v-5.77A0,0,0,0,1,560.16,249.72Z" />
<path class="cls-8" d="M544.6,245.53H560.8a1,1,0,0,1,1,1v9.69a3.49,3.49,0,0,1-3.49,3.49H547.11a3.49,3.49,0,0,1-3.49-3.49v-9.69A1,1,0,0,1,544.6,245.53Z" />
<path class="cls-47" d="M462.87,354.68l-7.15-.09a.87.87,0,0,1-.85-.87V271.88l8.87.11v81.83A.86.86,0,0,1,462.87,354.68Z" />
<path class="cls-47" d="M564.12,354.68l-7.14-.09a.87.87,0,0,1-.85-.87V271.88L565,272v81.83A.87.87,0,0,1,564.12,354.68Z" />
<rect class="cls-48" x="448.47" y="259.83" width="124.29" height="12.06" rx="1.69" />
<path class="cls-49" d="M463.48,216.47h49.59a4.41,4.41,0,0,1,4.41,4.41V255a0,0,0,0,1,0,0H459.07a0,0,0,0,1,0,0V220.87A4.41,4.41,0,0,1,463.48,216.47Z" />
<path class="cls-50" d="M520.8,252.83H497.09a1.1,1.1,0,0,0-1.1,1.1h0a1.11,1.11,0,0,1-1.11,1.11H481.66a1.11,1.11,0,0,1-1.1-1.11h0a1.11,1.11,0,0,0-1.1-1.1H455.19a.8.8,0,0,0-.8.81v3.6a2.19,2.19,0,0,0,2.2,2.2H519.4a2.2,2.2,0,0,0,2.21-2.2v-3.6A.81.81,0,0,0,520.8,252.83Z" />
<circle class="cls-51" cx="488.55" cy="219.25" r="0.78" />
<rect class="cls-51" x="482.08" y="250.44" width="11.38" height="1.44" rx="0.72" />
<g class="laptop-screen">
<rect class="cls-52" x="463.74" y="222.6" width="49.13" height="25.37" />
<g class="sidebar">
<rect class="cls-53" x="463.74" y="222.6" width="11.96" height="25.37" />
</g>
<g class="paragraphs">
<rect class="cls-53" x="495.2" y="229.63" width="15.41" height="3.37" />
<rect class="cls-53" x="495.2" y="235.71" width="15.41" height="3.37" />
<rect class="cls-53" x="495.2" y="241.78" width="15.41" height="3.37" />
</g>
<rect class="cls-31" x="463.74" y="222.6" width="49.13" height="4.39" />
<g class="pie-chart">
<path class="cls-31" d="M486,237.32v-6.1a.3.3,0,0,0-.3-.29,6.47,6.47,0,1,0,6.76,6.69l-.29-.3Z" />
</g>
</g>
</g>
<circle class="cls-54" cx="490.85" cy="79.77" r="39.79" />
<path class="cls-55" d="M502.48,72.18l-15,15a.59.59,0,0,1-.85,0l-7.4-7.4" />
<rect class="cls-56" x="140.9" y="317.12" width="70.05" height="70.05" rx="5.7" />
<rect class="cls-14" x="161.18" y="337.83" width="11.99" height="11.99" rx="1.74" />
<rect class="cls-14" x="178.69" y="337.83" width="11.99" height="11.99" rx="1.74" />
<rect class="cls-14" x="161.18" y="354.48" width="11.99" height="11.99" rx="1.74" />
<rect class="cls-14" x="178.69" y="354.48" width="11.99" height="11.99" rx="1.74" />
<circle class="cls-57" cx="640.68" cy="277.56" r="40.5" />
<circle class="cls-14" cx="629.68" cy="266.9" r="7.46" />
<circle class="cls-14" cx="629.68" cy="288.22" r="7.46" />
<circle class="cls-14" cx="651.67" cy="266.9" r="7.46" />
<circle class="cls-14" cx="651.67" cy="288.22" r="7.46" />
<line class="cls-58" x1="629.72" y1="266.17" x2="629.72" y2="289.08" />
<line class="cls-58" x1="651.7" y1="266.43" x2="651.7" y2="289.35" />
<line class="cls-58" x1="629.25" y1="288.68" x2="652.17" y2="288.68" />
<line class="cls-58" x1="629.25" y1="266.83" x2="652.17" y2="266.83" />
<circle class="cls-59" cx="142.59" cy="261.41" r="34.23" />
<path class="cls-14" d="M146.32,247.72a2.7,2.7,0,0,1,3.8-.18l2.15,2a2.7,2.7,0,0,1,.18,3.81l-2.31,2.53-6.09-5.63Zm-11.15,23.57-5.49,1.21a.36.36,0,0,1-.44-.41l.75-5.58a4.37,4.37,0,0,1,.92-2l10.55-11.63,6.09,5.64L137.06,270.2A4.1,4.1,0,0,1,135.17,271.29ZM156.81,273H140.23l5.35-6h11.23Z" />
<circle class="cls-16" cx="266.45" cy="107.45" r="35.27" />
<path class="cls-14" d="M274.15,98.54a8,8,0,1,1-8-8A8,8,0,0,1,274.15,98.54Z" />
<path class="cls-14" d="M254,121.15v-4.1a7.29,7.29,0,0,1,7.29-7.29h9.73a7.29,7.29,0,0,1,7.29,7.29v4.1a3.2,3.2,0,0,1-3.2,3.2H257.23A3.19,3.19,0,0,1,254,121.15Z" />
<g class="main-body">
<path class="cls-60" d="M338.8,277.85,314,311.66a6.53,6.53,0,0,0,5.52,10h58.35L396,327.4" />
<path class="cls-11" d="M320.23,251h34.94a19.75,19.75,0,0,1,19.75,19.75v0a19.75,19.75,0,0,1-19.75,19.75H320.23a3,3,0,0,1-3-3V254a3,3,0,0,1,3-3Z" transform="translate(-69.64 412.96) rotate(-56.93)" />
<path class="cls-60" d="M394.87,277.56l27.75,34.55a6.54,6.54,0,0,1-5.53,10l-61.29-.74-18.1,5.72" />
<path class="cls-11" d="M388.11,241.41h0a20,20,0,0,1,20,20v32.47a3.75,3.75,0,0,1-3.75,3.75H371.83a3.75,3.75,0,0,1-3.75-3.75V261.44A20,20,0,0,1,388.11,241.41Z" transform="translate(-82.31 314.1) rotate(-40.19)" />
</g>
<g class="main-head">
<circle class="cls-33" cx="421.93" cy="147.87" r="17.39" />
<circle class="cls-33" cx="387.46" cy="118.89" r="17.39" />
<circle class="cls-33" cx="412.63" cy="124.2" r="30.06" />
<circle class="cls-11" cx="391.43" cy="147.87" r="21.35" />
<path class="cls-33" d="M367.12,125.14h0a44.72,44.72,0,0,1,44.72,44.72v24.77a0,0,0,0,1,0,0H322.4a0,0,0,0,1,0,0V169.86a44.72,44.72,0,0,1,44.72-44.72Z" />
<circle class="cls-61" cx="328.45" cy="194.62" r="12.2" />
<circle class="cls-61" cx="404.89" cy="194.64" r="12.2" />
<path class="cls-5" d="M328.46,172.34v28.53a38.23,38.23,0,0,0,38.21,38.23h0a38.23,38.23,0,0,0,38.23-38.21V172.36l-19.76-18.57Z" />
<path class="cls-33" d="M343.07,185.46a1.93,1.93,0,0,1-.61-3.76l9.26-3.09a1.93,1.93,0,1,1,1.22,3.66l-9.26,3.09A2.16,2.16,0,0,1,343.07,185.46Z" />
<path class="cls-33" d="M390.28,185.3a1.81,1.81,0,0,1-.61-.1l-9.26-3.09a1.93,1.93,0,0,1,1.22-3.66l9.26,3.09a1.93,1.93,0,0,1-.61,3.76Z" />
<path class="cls-41" d="M358.23,197a1.93,1.93,0,0,1-1.88-1.51,4.91,4.91,0,0,0-9.58,0,1.93,1.93,0,1,1-3.77-.85,8.77,8.77,0,0,1,17.11,0,1.92,1.92,0,0,1-1.46,2.3A2,2,0,0,1,358.23,197Z" />
<path class="cls-41" d="M388.4,197a1.93,1.93,0,0,1-1.88-1.5,4.91,4.91,0,0,0-9.58,0,1.93,1.93,0,0,1-3.77-.85,8.78,8.78,0,0,1,17.12,0,2,2,0,0,1-1.46,2.31A2.15,2.15,0,0,1,388.4,197Z" />
<path class="cls-62" d="M378.05,216.43a2.16,2.16,0,0,1,2.16,2.48,13.77,13.77,0,0,1-27.09,0,2.15,2.15,0,0,1,2.16-2.47Z" />
<path class="cls-63" d="M369.21,224.73c-3.09,1-5.24,3.11-5.39,5.16a14.06,14.06,0,0,0,2.85.31,13.74,13.74,0,0,0,9.91-4.23C375.3,224.35,372.31,223.77,369.21,224.73Z" />
<path class="cls-64" d="M378.05,216.36H355.28a2.14,2.14,0,0,0-2.16,2.44,13.25,13.25,0,0,0,.64,2.28h25.82a13.48,13.48,0,0,0,.63-2.28A2.14,2.14,0,0,0,378.05,216.36Z" />
<path class="cls-33" d="M385.15,140.56,322.8,164.74c.1.42.21.83.34,1.23,3.63,11,20.95,15.09,38.71,9.21s29.2-19.51,25.57-30.47A13.23,13.23,0,0,0,385.15,140.56Z" />
<path class="cls-33" d="M411.58,172.08l-28.22-22.86c-.17.16-.34.32-.49.49-4.19,4.67-1.46,13.95,6.1,20.73s17.08,8.49,21.27,3.83A7.38,7.38,0,0,0,411.58,172.08Z" />
<path class="cls-33" d="M322.42,178.71h6a0,0,0,0,1,0,0v34.41a3,3,0,0,1-3,3h0a3,3,0,0,1-3-3V178.71A0,0,0,0,1,322.42,178.71Z" />
<path class="cls-33" d="M404.9,178.72h7a0,0,0,0,1,0,0v33.91a3.48,3.48,0,0,1-3.48,3.48h0a3.48,3.48,0,0,1-3.48-3.48V178.72A0,0,0,0,1,404.9,178.72Z" />
<path class="cls-41" d="M374.37,209.05H360.1a2.21,2.21,0,0,1,0-4.42h14.27a2.21,2.21,0,0,1,0,4.42Z" />
<path class="cls-5" d="M357.79,231.08h17.75a0,0,0,0,1,0,0v14.28a8.87,8.87,0,0,1-8.87,8.87h0a8.87,8.87,0,0,1-8.87-8.87V231.08A0,0,0,0,1,357.79,231.08Z" />
<path class="cls-33" d="M367.12,125.14h0a44.72,44.72,0,0,1,44.72,44.72v24.77a0,0,0,0,1,0,0H322.4a0,0,0,0,1,0,0V169.86a44.72,44.72,0,0,1,44.72-44.72Z" />
<circle class="cls-61" cx="328.45" cy="194.62" r="12.2" />
<circle class="cls-61" cx="404.89" cy="194.64" r="12.2" />
<path class="cls-5" d="M328.46,172.34v28.53a38.23,38.23,0,0,0,38.21,38.23h0a38.23,38.23,0,0,0,38.23-38.21V172.36l-19.76-18.57Z" />
<path class="cls-33" d="M342.4,184.3a1.94,1.94,0,0,1-1.48-1.71,1.92,1.92,0,0,1,1.75-2.09l9.72-.87a1.93,1.93,0,1,1,.34,3.84l-9.72.87A2,2,0,0,1,342.4,184.3Z" />
<path class="cls-33" d="M390.91,184.24a2.14,2.14,0,0,1-.62,0l-9.7-1.06a1.93,1.93,0,0,1,.41-3.83l9.71,1.06a1.93,1.93,0,0,1,.2,3.8Z" />
<path class="cls-33" d="M385.15,140.56,322.8,164.74c.1.42.21.83.34,1.23,3.63,11,20.95,15.09,38.71,9.21s29.2-19.51,25.57-30.47A13.23,13.23,0,0,0,385.15,140.56Z" />
<path class="cls-33" d="M411.58,172.08l-28.22-22.86c-.17.16-.34.32-.49.49-4.19,4.67-1.46,13.95,6.1,20.73s17.08,8.49,21.27,3.83A7.38,7.38,0,0,0,411.58,172.08Z" />
<path class="cls-33" d="M322.42,178.71h6a0,0,0,0,1,0,0v34.41a3,3,0,0,1-3,3h0a3,3,0,0,1-3-3V178.71A0,0,0,0,1,322.42,178.71Z" />
<path class="cls-33" d="M404.9,178.72h7a0,0,0,0,1,0,0v33.91a3.48,3.48,0,0,1-3.48,3.48h0a3.48,3.48,0,0,1-3.48-3.48V178.72A0,0,0,0,1,404.9,178.72Z" />
<path class="cls-41" d="M374.37,209.05H360.1a2.21,2.21,0,0,1,0-4.42h14.27a2.21,2.21,0,0,1,0,4.42Z" />
<circle class="cls-65" cx="414.99" cy="189.54" r="3.42" />
<g class="main-mouth-open">
<path class="cls-66" d="M376.19,232a97.1,97.1,0,0,1-12.77.64c-2.27,0-4-1.63-3.89-3.46.25-4.29.54-8.58.84-12.87A80.54,80.54,0,0,0,384.43,214q.74,2.79,1.49,5.58C387.57,225.12,383.34,231.13,376.19,232Z" />
<path class="cls-64" d="M386.52,219.81a87.39,87.39,0,0,1-27.1,2.53c.11-1.45.21-2.89.33-4.34a2,2,0,0,1,2-1.79,80.93,80.93,0,0,0,21.26-2,1.93,1.93,0,0,1,2.32,1.37C385.75,217,386.13,218.41,386.52,219.81Z" />
<path class="cls-63" d="M385.77,225a9.17,9.17,0,0,0-5.89-1c-4.1.7-7.27,4-7,7.76a4.33,4.33,0,0,0,.08.5c1.08-.09,2.15-.2,3.23-.32C381,231.44,384.57,228.51,385.77,225Z" />
</g>
<g class="main-mouth-closed">
<path class="cls-69" d="M382.67,220.94a21.21,21.21,0,0,1-16.61,4.46" />
</g>
<g class="main-eyes-open">
<circle class="cls-33" cx="349.51" cy="194.64" r="3.87" />
<circle class="cls-33" cx="384.96" cy="194.64" r="3.87" />
</g>
<g class="main-eyes-closed" >
<path class="cls-69" d="M344.23,195.73a7.47,7.47,0,0,1,10.55,0" />
<path class="cls-69" d="M379.68,195.73a7.47,7.47,0,0,1,10.55,0" />
</g>
</g>
<rect class="cls-5" x="345.77" y="243.32" width="41.78" height="17.53" rx="8.76" />
<rect class="cls-67" x="346.11" y="289.53" width="42.24" height="8.86" rx="4.43" />
<rect class="cls-68" x="311.83" y="263.17" width="112.25" height="78.9" rx="6.85" />
<rect class="cls-14" x="357.13" y="289.89" width="22.2" height="25.5" />
<path class="cls-16" d="M373.44,299.06l-4.16,1.24a4.37,4.37,0,0,1-2.63,0l-4.18-1.25h0l-.05,0a.09.09,0,0,0,0,.08l0,5.3a.16.16,0,0,0,.13.15l5.11,1.54a1.29,1.29,0,0,0,.73,0l5.16-1.56a.14.14,0,0,0,.11-.15v-5.26a.11.11,0,0,0,0-.09A.11.11,0,0,0,373.44,299.06Z" />
<path class="cls-16" d="M361.61,313a.79.79,0,0,1-.3-.05l-2.43-.71a1,1,0,0,1-.72-1V296.78a2.44,2.44,0,0,1,2.43-2.44,2.26,2.26,0,0,1,.69.1l6.45,1.91H368a.45.45,0,0,0,.18,0l6.38-1.9a2.46,2.46,0,0,1,.76-.12,2.49,2.49,0,0,1,2.48,2.51v9.29a2,2,0,0,1-1.44,1.92L369,310.26a3.78,3.78,0,0,1-1.06.16,3.91,3.91,0,0,1-1.07-.16L362.6,309v3a1,1,0,0,1-.41.81A1,1,0,0,1,361.61,313Zm21.23-25.94-11.74-3.49a11,11,0,0,0-6.29,0l-11.74,3.49a6.32,6.32,0,0,0-4.43,6v19a6.33,6.33,0,0,0,4.43,6l11.74,3.49a11,11,0,0,0,6.29,0l11.74-3.49a6.33,6.33,0,0,0,4.43-6v-19A6.32,6.32,0,0,0,382.84,287.06Z" />
</svg>/*
shorthand
animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction]
[animation-fill-mode];
*/
.main-eyes-closed{
visibility: hidden;
animation-name: show-main-closed-eyes-animation;
animation-delay: 1s;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
/* visibility property will make things visible on transition frames,
added extra steps to circumvent this*/
@keyframes show-main-closed-eyes-animation{
0% {visibility: hidden;}
30% {visibility: hidden;}
31% {visibility: visible;}
34% {visibility: visible;}
35% {visibility: hidden;}
50% {visibility: hidden;}
51% {visibility: visible;}
54% {visibility: visible;}
55% {visibility: hidden;}
100%{visibility: hidden;}
}
.main-eyes-open{
animation-name: show-main-open-eyes-animation;
animation-delay: 1s;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes show-main-open-eyes-animation{
0% {visibility: visible;}
30% {visibility: hidden;}
35% {visibility: hidden;}
36% {visibility: visible;}
50% {visibility: hidden;}
55% {visibility: hidden;}
100%{visibility: visible;}
}
.main-mouth-closed{
visibility: hidden;
animation-name: main-open-mouth-animation;
animation-delay: 1s;
animation-duration: 17s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes main-open-mouth-animation{
0% {visibility: hidden;}
50% {visibility: hidden;}
51% {visibility: visible;}
94% {visibility: visible;}
95% {visibility: hidden;}
100%{visibility: hidden;}
}
.main-mouth-open{
animation-name: main-close-mouth-animation;
animation-delay: 1s;
animation-duration: 17s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes main-close-mouth-animation{
0% {visibility: visible;}
50% {visibility: hidden;}
95% {visibility: hidden;}
100%{visibility: visible;}
}
.main-body{
animation-name: bobbing-animation;
animation-delay: 1s;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.main-head{
animation-name: bobbing-animation;
animation-delay: 1.4s;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes bobbing-animation{
0% {transform: translate(0px, 0px);
animation-timing-function:ease-in-out }
50% {transform: translate(0px, -2px);
animation-timing-function:ease-in-out }
100% {transform: translate(0px, 0px);
animation-timing-function:ease-in-out }
}
/*********************Left person************************/
.man-eyes-closed{
visibility: hidden;
}
.man-eyes-open{
visibility: visible;
}
.man-mouth-open{
visibility: hidden;
}
.man-mouth-closed{
visibility: visible;
}
.man-circle:hover > .man-eyes-closed{
animation-name: show-eyes-closed-animation;
animation-delay: 0s;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes show-eyes-closed-animation{
0% {visibility: visible;}
25% {visibility: visible;}
50% {visibility: hidden;}
100%{visibility: hidden;}
}
.man-circle:hover > .man-eyes-open{
animation-name: show-eyes-open-animation;
animation-delay: 0s;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes show-eyes-open-animation{
0% {visibility: visible;}
0.5% {visibility: hidden;}
50% {visibility: hidden;}
100%{visibility: visible;}
}
.man-circle:hover > .man-mouth-open{
visibility: hidden;
animation-name: show-mouth-open-animation;
animation-delay: 0s;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes show-mouth-open-animation{
0% {visibility: visible;}
50% {visibility: hidden;}
95% {visibility: hidden;}
100%{visibility: visible;}
}
.man-circle:hover > .man-mouth-closed{
animation-name: show-mouth-closed-animation;
animation-delay: 0s;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
/* closed mouth appears from 51% to 95% */
@keyframes show-mouth-closed-animation{
0% {visibility: hidden;}
50% {visibility: hidden;}
51% {visibility: visible;}
94% {visibility: visible;}
95% {visibility: hidden;}
100%{visibility: hidden;}
}
.man-circle:hover > .man-left-arm{
animation-name: thumbs-up-animation;
animation-delay: 0s;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes thumbs-up-animation{
0% {
transform: translate(0px, 0px);
animation-timing-function: linear
}
/* hand extention animation starts at %5 */
5% {
transform: scale(1.1) translate(-21.5px,-28px);
animation-timing-function: linear
}
10% {
transform: scale(1.05) translate(-11px, -15px);
animation-timing-function: linear
}
15% {
transform: scale(1.1) translate(-21.5px,-28px);
animation-timing-function: linear
}
50% {
transform: scale(1.1) translate(-21.5px,-28px);
animation-timing-function: linear
}
60% {
transform: translate(0px, 0px);
animation-timing-function: linear
}
100% {
transform: translate(0px, 0px);
animation-timing-function: linear
}
}
/*********************Right person***********************/
.woman-circle:hover > .mug-steam {
animation-name: mug-steam-animation;
animation-delay: 0s;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes mug-steam-animation {
0% {
transform: translate(0px, 3px);
opacity: 1;
}
50% {
transform: translate(0px, -10px);
opacity: .1;
}
80% {
opacity: 0;
transform: translate(0px, -10px);
}
100% {
opacity: 0;
transform: translate(0px, -10px);
}
}
.woman-circle:hover > .mug-steam > .cls-72{
animation-name: steam-animation;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes steam-animation {
0% {
transform: translate(0px, 0px);
opacity: 1;
}
20% {
transform: translate(0px, -20px);
opacity: .5;
}
40% {
transform: translate(0px, -20px);
opacity: .25;
}
60% {
transform: translate(0px, -20px);
opacity: .1;
}
80% {
transform: translate(0px, -20px);
opacity: .05;
}
100% {
transform: translate(0px, -20px);
opacity: 0;
}
}
.laptop-screen {
clip-path: inset(0 0 0 0);
}
.woman-circle:hover > .laptop-screen > .sidebar {
animation-name: sidebar-animation;
animation-delay: 0s;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes sidebar-animation {
0% {
transform: translate(-20px, 0px);
}
10% {
transform: translate(0px, 0px);
}
100% {
transform: translate(0px, 0px);
}
}
.woman-circle:hover > .laptop-screen > .paragraphs {
animation-name: paragraphs-animation;
animation-delay: 0s;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes paragraphs-animation {
0% {
transform: translate(0px, -30px);
}
10% {
transform: translate(0px, -30px);
}
20% {
transform: translate(0px, 0px);
}
}
.woman-circle:hover > .laptop-screen > .pie-chart {
animation-name: pie-chart-animation;
animation-delay: 0s;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes pie-chart-animation {
0% {
transform: translate(0px, 20px);
}
25% {
transform: translate(0px, 20px);
}
35% {
transform: translate(0px, 0px);
}
100% {
transform: translate(0px, 0px);
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.