cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html lang="pl">

<head>
    <title>Animation SVG</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS Styles -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- Google font -->
    <link href="https://fonts.googleapis.com/css?family=VT323|Open+Sans:300,400,600,700" rel="stylesheet">
</head>

<body>
    <div class="container">
        <svg version="1.1" id="Ilustration" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1979.9 1080" style="enable-background:new 0 0 1979.9 1080;" xml:space="preserve" class="svg-image">
            <g id="background">
                <g id="white_wall">
                    <polygon id="the_wall" class="st0" points="1509.7,1040.3 511.2,1014 608.2,276 1959.8,9.8 " />
                    <polygon id="window" class="st1" points="1555.1,682.1 1027,616 1045.1,254 1710.6,134.4 " />
                    <path id="trees" class="st2" d="M1029.8,585c0,0,10.5-54.9,84.3-56.7s107.8,74.7,107.8,74.7s62.1-25.3,114.5-12.5
            c27.3,6.7,66.5,24.5,82,46.5c54.5-26.7,119.5-26.1,155.5-21l-18.8,66.1L1027,616L1029.8,585z" />
                    <polygon id="window_bar" class="st3" points="1324.9,178.1 1265.9,658.8 1293.1,661.3 1363.7,165.4" />
                    <polygon id="white_wall_shadow" class="st3" points="1045.1,254 1025,618.1 1010.7,613 1015.8,262.1 586.9,411.3 604.1,276.7
            1955.7,10.5 1736.2,515.1 1710.6,134.4" />
                </g>
                <polygon id="purple_wall" class="st4" points="18,168.9 198.5,1036.9 441.9,1021.1 663.2,998.8 604.2,276.4" />
                <polygon id="purple_wall_shadow" class="st5" points="614.4,401.7 99.8,560.6 18,168.9 604.2,276.4" />
                <g id="clock">
                    <ellipse id="shadow_clock" transform="matrix(6.816390e-02 -0.9977 0.9977 6.816390e-02 369.6182 1222.0718)" class="st6" cx="839" cy="413.2" rx="58.4" ry="52.7" />
                    <ellipse id="clock_base" transform="matrix(6.816390e-02 -0.9977 0.9977 6.816390e-02 368.862 1230.5776)" class="st7" cx="843.2" cy="417.8" rx="58.9" ry="47.8" />
                    <polyline id="clock_hands" class="st8" points="844.5,383.4 843.2,417.8 859.5,433.1" />
                </g>
                <g id="callendar">
                    <polygon id="callendar_paper_back" class="st9" points="300.7,555.6 161.7,557.1 181.5,705.1 189.1,704.3 189.7,707.7 202.6,710.9
            322,697.1       " />
                    <polygon id="callendar_dark_bar" class="st10" points="303.5,578.8 165.7,586.9 161.7,557.1 300.7,555.6" />
                    <polygon id="callendar_paper" class="st3" points="161.7,557.1 300.7,555.6 329.8,699.5 202.6,710.9" />
                    <polygon id="callendar_dark_bar_2" class="st10" points="305.4,578.7 168.3,583.1 161.7,557.1 300.7,555.6" />
                    <g id="callendar_lines">
                        <line class="st11" x1="180.6" y1="570.3" x2="259.2" y2="568.4" />
                        <polygon class="st12" points="308.9,680.8 220.7,689.4 200.6,608.3 288.9,604.6 " />
                        <line class="st12" x1="197.5" y1="599.8" x2="256" y2="597.9" />
                        <line class="st12" x1="217.3" y1="607.5" x2="237.8" y2="687.3" />
                        <line class="st12" x1="237.8" y1="606.4" x2="257.4" y2="685" />
                        <line class="st12" x1="259.2" y1="607" x2="276.9" y2="684.5" />
                        <line class="st12" x1="273.1" y1="606.4" x2="290.8" y2="683.9" />
                        <line class="st12" x1="205.2" y1="626.9" x2="293.3" y2="621.3" />
                        <line class="st12" x1="209.2" y1="643.1" x2="297" y2="635.3" />
                        <line class="st12" x1="213.6" y1="658.6" x2="301.3" y2="650.9" />
                        <line class="st12" x1="215.4" y1="674.2" x2="303.1" y2="666.4" />
                    </g>
                </g>
            </g>
            <g id="red_armchair">
                <path id="red_armchair_back" class="st13" d="M678.3,875.3l-83.4-136.5L409.2,471.4c-40.2,31.1-83.1,92.1-32.4,245.3s139.5,260.2,139.5,260.2
        l237.9,44.2l131.9,3.4l108-152.9L678.3,875.3z" />
                <path id="red_armchair_highlight" class="st14" d="M460.1,444.4c-99.9,24.7-103.8,116.8-81.1,190.8c22.7,74,29.9,127.3,63.6,114.1
        c79-31,103.8,105.2,103.8,105.2l289.4-62.3c0,0-43.4-157.7-100.5-123.3s-57.8-22.1-76.6-88.3S583.7,413.9,460.1,444.4z" />
                <path id="interviewer_shadow" class="st13" d="M544.6,489.3c-8.7-23.1-58.7-26.3-87.4-6.1c-14.4,10.2-39.8,49.2-21.6,77.9
        c6.1,9.7,35.5,46.5,35.5,46.5s-29.4,26.1-30.5,47c-4,79.3,37,28.1,80.9,124.3c17.5,38.3,37,32.5,37,32.5l66.4-12.2L544.6,489.3z" />
            </g>
            <g id="table">
                <g id="table_construction">
                    <polygon class="st15" points="1512.9,983.3 1212.5,967.9 1100.6,806.9 1425.7,732.8 1458.4,745.1" />
                    <g>
                        <path id="SVGID_1_" class="st15" d="M1369.3,786.5l1.5-29.5c0,0-294-32.6-335.3-24c-133.8,28-426,89.6-497.9,107.3
                c-0.5,0.1-0.9,0.2-1.4,0.4h-0.1c-75.4,17.6-35.7,174.5-35.7,174.5l313.3,7.5c1-19.3,5.8-62.3,36.2-73.9L1369.3,786.5z" />
                    </g>
                    <g>
                        <g>
                            <path id="SVGID_3_" class="st16" d="M1427.2,732.7l-373.1-22.2c-8-1.2-16.2-0.9-24.1,0.7c-72.4,15.2-450.9,94.7-515.9,110.7
                    c-0.5,0.1-0.9,0.2-1.4,0.4h-0.1c-75.4,17.6-12.2,192.9-12.2,192.9l276.3,6.7c0,0,1-73,49.7-91.5l601.5-191.5
                    C1431.3,737.8,1430.7,732.9,1427.2,732.7z" />
                        </g>
                        <g>
                            <clipPath id="SVGID_4_">
                                <use xlink:href="#SVGID_3_" style="overflow:visible;" />
                            </clipPath>
                            <polygon class="st17" points="429.6,875.6 822.4,989.7 777,1022.4 500.5,1015.2" />
                        </g>
                    </g>
                </g>
                <g id="shadows">
                    <g id="shadow_legs">
                        <polygon class="st18" points="912.4,736.7 875.6,744.2 1022.2,734 977.2,723.1 " />
                        <polygon class="st18" points="1067.2,713.5 1036.2,716.5 1030.2,733.3 1085.3,730 " />
                    </g>
                    <polygon id="shadow_hand" class="st18" points="1035.2,829.9 1028.3,866.1 1073.1,853.8 1056.9,812" />
                </g>
                <g id="stuff_on_table">
                    <g id="phone">
                        <path id="shadow_phone" class="st18" d="M923.9,749.7c0,0-7.1,0.8-8.5,5.8c0,0-4.7,21.5-4.7,24.2s-4.2,9,11.5,11.3
                c12.7,1.9,36.6,2.8,46.7,3.5c2.5,0.2,10.3-0.1,12.5-1.2l27.2-6L923.9,749.7z" />
                        <path class="st19" d="M1005.2,789.5l-79-7.8c-4.5-0.4-7.7-3.1-7.3-7.6l3.2-22.1c0.4-4.5,4.1-5.6,8.5-5.2l75.5,5
                c4.5,0.4,6.4,2.5,6,7l0.7,23.2C1012.4,786.5,1009.7,789.9,1005.2,789.5z" />
                        <polygon class="st10" points="934.1,749.2 931.4,776 1005.9,782.7 1005,753.8 " />
                        <path class="st19" d="M949.4,785.4l-14-1.3c-0.8-0.1-1.4-0.8-1.3-1.6l0,0c0.1-0.8,0.8-1.4,1.6-1.3l14,1.3
                c0.8,0.1,1.4,0.8,1.3,1.6l0,0C950.9,784.9,950.2,785.5,949.4,785.4z" />
                        <circle class="st20" cx="927" cy="761.8" r="3.8" />
                    </g>
                    <g id="papers">
                        <polygon id="paper_bottom" class="st19" points="800.4,779.8 879.2,767.1 951.8,838.8 866.2,857 " />
                        <polygon id="paper_top" class="st1" points="810.4,786.2 885.7,764 971.6,826 890.7,854.4 " />
                    </g>
                    <g id="pen">
                        <path id="shadow_pen" class="st18" d="M693.7,807.6c0,0-23.6,5.2-20,8.2s33.7,4.9,45.5,3.1s48.6-5.7,48.6-5.7L693.7,807.6z" />
                        <path class="st21" d="M716.5,816h-22.1c-2.1,0-3.9-1.7-3.9-3.9v-1.4c0-2.1,1.7-3.9,3.9-3.9h22.1c2.1,0,3.9,1.7,3.9,3.9v1.4
                C720.3,814.3,718.6,816,716.5,816z" />
                        <path class="st21" d="M767.8,813.2h-49.9c-1.7,0-3.1-1.4-3.1-3.1l0,0c0-1.7,1.4-3.1,3.1-3.1h49.9c1.7,0,3.1,1.4,3.1,3.1l0,0
                C770.9,811.8,769.5,813.2,767.8,813.2z" />
                        <path class="st19" d="M768.2,807l10.2,2.9v0.9l-10.6,2.3C767.8,813.2,767.1,807.8,768.2,807" />
                    </g>
                </g>
            </g>
            <g id="interviewer">
                <g id="legs">
                    <path id="leg2" class="st22" d="M990.2,679.5l-99.7,12.2c-20.2,2.5-38.3,13.6-49.6,30.4l-22.5,34l177.2-36.7L990.2,679.5z" />
                    <path id="leg1" class="st22" d="M1076.5,658.3l-99.7,12.5c-20.2,2.5-38.2,13.7-49.5,30.6L904.8,735l177.2-36.8L1076.5,658.3z" />
                    <path id="highlight" class="st23" d="M827.2,742.4c0,0,24.5-35.1,73.6-39.5s77.1-9.5,77.1-9.5l5.5-13.3c0,0-99.3,3.5-126.3,23.1
            C844.5,712.3,827.2,742.4,827.2,742.4z" />
                </g>
                <g id="shoes">
                    <g id="shoe_2">
                        <path class="st10" d="M1116.1,603.7c-19.1,19.1-60.9,95.7-56.2,111.9c2.1,7,7.1,10.9,15.7,13.9c13.2,4.5,32.2-17.9,42.5-31.9
                c16.9-23,39.3-57.4,40.6-71.9C1158.3,582.2,1130.1,589.8,1116.1,603.7z" />
                        <path class="st21" d="M1144.4,593.6c-8.7-2.3-24.4-7.3-37.4,9.8c-13.1,17.1-31,49.3-37,52.3s-27.4,32.8-27.5,40.2
                s17.6,26,22.7,29.2c5.1,3.2,10.6,5,10.6,5s-9.1-11.6-6.8-23.7s28.4-62,38.7-74.6c10.3-12.6,18.3-29.6,37.5-37.3" />
                        <path class="st24" d="M1087.7,634.3c0,0-2.5-1.6-3.8-0.8c-12.4,8.2-6.2,18.9-2.1,23.6" />
                        <path class="st25" d="M1110.9,699.1l-24.6-14.2c-2.4-1.4-3.2-4.4-1.8-6.8l0.8-1.5c1.4-2.4,4.4-3.2,6.8-1.8l24.6,14.2
                c2.4,1.4,3.2,4.4,1.8,6.8l-0.8,1.5C1116.3,699.7,1113.3,700.5,1110.9,699.1z" />
                        <path class="st25" d="M1133.9,656.6l-24.6-14.2c-2.4-1.4-3.2-4.4-1.8-6.8l0.8-1.5c1.4-2.4,4.4-3.2,6.8-1.8l24.6,14.2
                c2.4,1.4,3.2,4.4,1.8,6.8l-0.8,1.5C1139.3,657.2,1136.2,658,1133.9,656.6z" />
                    </g>
                    <g id="shoe_1">
                        <path class="st10" d="M1011.4,607.4c-14.6,22.4-13.8,111.8-3.4,124.8c4.5,5.7,13.4,6.5,21.9,5.6c13.1-1.4,17.5-29.7,20.9-47.1
                c5.4-28.6,8.9-63.1,6.6-84.1c-1.2-10.7-6.3-17.8-11-20.1C1031.9,579.3,1020.7,593.2,1011.4,607.4z" />
                        <path class="st21" d="M1032.1,581.9c-10.3,0.1-28.3,3.4-33.8,24.9s-4.5,63.1-25,68.2c-6.6,1.6-1.6,38.3,1.8,45.2
                c3.4,6.9,29.6,16.2,36.4,16.9s12.6,1.1,12.6,1.1s-4-1.6-7.4-13.8c-3.4-12.3-6.7-148.3,29.8-137.9
                C1046.5,586.5,1041.5,581.9,1032.1,581.9z" />
                        <path class="st24" d="M990,645.5c0,0-0.5-0.1-1-0.1c0,0-6.4,22.9,6.3,26.3" />
                        <path class="st24" d="M996.2,623.8c0,0-4.1-0.4-5.1,1.4c0,0-4.8,21.1,7.9,24.5" />
                        <path class="st25" d="M1048.6,640.9l-29.1-6.1c-2.7-0.6-4.5-3.5-4-6.5l0.3-1.8c0.5-3,3.1-5,5.8-4.5l29.1,6.1
                c2.7,0.6,4.5,3.5,4,6.5l-0.3,1.8C1053.9,639.4,1051.3,641.4,1048.6,640.9z" />
                        <path class="st25" d="M1043,701.9l-30.4-6.3c-2.8-0.6-4.6-3.6-4.1-6.7l0.3-1.6c0.5-3.1,3.2-5.2,5.9-4.6l30.4,6.3
                c2.8,0.6,4.6,3.6,4.1,6.7l-0.3,1.6C1048.4,700.5,1045.7,702.5,1043,701.9z" />
                    </g>
                </g>
                <g id="arm_with_mug">
                    <path id="biceps" class="st26" d="M782.8,698.4l-30.5-32.1C716.4,623,662.5,604,662.5,604s-22.7,70.1,29.8,88.1
            c68.4,23.3,85.7,14.6,89.2,13.9S784.3,702.1,782.8,698.4z" />
                    <g id="forehand_mug">
                        <g id="coffee_mug">
                            <g>
                                <g>
                                    <path id="SVGID_5_" class="st16" d="M715.6,535.6c14.9-0.2,25.4,3.2,26,9.1c0.6,5.8,5.5,58.7-23,58.7c-18.8,0-17,0-17,0
                            s-21,1.9-17.5-55.8C684.6,540.2,697.3,535.8,715.6,535.6z" />
                                </g>
                                <g id="coffee_mug_shadows">
                                    <defs>
                                        <path id="SVGID_6_" d="M715.6,535.6c14.9-0.2,25.4,3.2,26,9.1c0.6,5.8,5.5,58.7-23,58.7c-18.8,0-17,0-17,0s-21,1.9-17.5-55.8
                                C684.6,540.2,697.3,535.8,715.6,535.6z" />
                                    </defs>
                                    <clipPath id="SVGID_8_">
                                        <use xlink:href="#SVGID_6_" style="overflow:visible;" />
                                    </clipPath>
                                    <path class="st27" d="M682.5,547.9c0.2,9.1,18.2,11.7,26.8,12c14.5,0.6,24-1.5,25.8-2.9c-0.1,4.5-2.8,41.7-14.2,46.9
                            c-11.5,5.2-29.8,2.6-29.8,2.6l-11.7-34.8L682.5,547.9z" />
                                    <clipPath id="SVGID_12_">
                                        <use xlink:href="#SVGID_6_" style="overflow:visible;" />
                                    </clipPath>
                                    <path class="st28" d="M688.4,548.7c0,0-4.5,38.6,8.9,53.9c13.4,15.2,7.3,4.3,7.3,4.3s-10.5-8-9.8-51.6
                            C697.2,541.4,688.4,548.7,688.4,548.7z" />
                                </g>
                            </g>
                            <g id="mug_top">
                                <g>
                                    <ellipse id="SVGID_7_" class="st15" cx="713.4" cy="546.2" rx="24.7" ry="8.6" />
                                </g>
                                <g>
                                    <clipPath id="SVGID_15_">
                                        <use xlink:href="#SVGID_7_" style="overflow:visible;" />
                                    </clipPath>
                                    <ellipse id="coffee" class="st29" cx="714.4" cy="553.7" rx="24.7" ry="8.6" />
                                </g>
                            </g>
                            <path id="handle" class="st30" d="M740.6,553c11.7-1.9,16.2-2.8,15.6,16s-8.7,24.3-23.4,22" />
                            <g id="smoke">
                                <path id="smoke1" class="st31" d="M718.8,539.6c-3.3-11,1.2-13.7,2.2-23.5s-6.8-20.7-7.3-21.3c-0.5-0.7,13.8,7,15,14.8
                        C729.8,517.4,721.2,523.1,718.8,539.6z" />
                                <path id="smoke2" class="st31" d="M706.7,547.8c-3.3-11,0.4-10.9,1.4-20.7s-2.8-22.8-6.6-24.1c7.5,2.1,11.9,15.6,13,23.4
                        C715.7,534.2,709.1,531.3,706.7,547.8z" />
                            </g>
                        </g>
                        <path id="forehand" class="st26" d="M774.1,596.8c0.6-7.2-6.5-36.4-7.4-43.3s-17.7,1.5-21.2,2.6s-4.8,21.5-2.5,28.9
                s11.2,16.7,11.2,16.7c2.3,18.7-8.3,39.1,2.1,78.4c10.3,39.1,26.2,18.3,26.2,18.3C782.7,690.1,773.5,603.9,774.1,596.8z" />
                    </g>
                </g>
                <g id="body">
                    <path class="st32" d="M542.5,614.5c0,0,85.2-26.6,111-15.6c40.9,17.5,109.7,162.6,135.1,163.2c-36.3,8.2-110.3,25.7-159.7,36.3
            c-29.2,6.3-66.8-56.5-66.8-56.5l-15.6-61.3L542.5,614.5z" />
                    <path id="shadow" class="st33" d="M555.7,667.9c0,0,24.4,89.9,110.5,122.5l-62.7,13.4c-45.8-8.3-54.9-53.7-54.9-53.7L555.7,667.9z
            " />
                </g>
                <g id="arm_biceps">
                    <defs>
                        <path id="SVGID_16_" d="M558.6,657.1c-0.2-8.8-5.5-47.3-5.5-47.3c-35.9,17-75.4,36.8-56.2,102.3c18.6,63.3,34.5,102.5,60.2,96.2
                l8.5-17.2C576,734.4,558.8,665.9,558.6,657.1z" />
                    </defs>
                    <use xlink:href="#SVGID_16_" style="overflow:visible;fill:#FCCEA4;" />
                    <clipPath id="SVGID_17_">
                        <use xlink:href="#SVGID_16_" style="overflow:visible;" />
                    </clipPath>
                    <path id="shadow_biceps" class="st34" d="M565.5,647.7c-10.3,5.6-46.9,13.6-45.6,30.8S525.5,727,530,767c1.7,14.5,10.8,57.3,24.7,61.6
            c10.4,3.2-12.3,2.8-12.3,2.8l-62.1-116.1l16.6-78l57.3-35.6L565.5,647.7z" />
                </g>
                <g id="shoulder">
                    <g>
                        <path id="shoulder_base" class="st32" d="M554.6,604.7c-4.2-8.1-47.2,11.1-59.5,45.9c-12.3,34.7-4,51.9-4,51.9s59-24.4,77.1-6
                C575.4,703.9,569.8,634,554.6,604.7z" />
                    </g>
                    <g>
                        <clipPath id="SVGID_19_">
                            <use xlink:href="#shoulder_base" style="overflow:visible;" />
                        </clipPath>
                        <path id="shadow_shoulder" class="st35" d="M566.5,635.9c0,0-41.3-15.5-54.4,14.8c-7.8,18.1-8.1,38.7-8.1,38.7l-24.6,14.1l-0.7-39
                l54.4-68.4l25,3.6L566.5,635.9z" />
                    </g>
                </g>
                <g id="neck">
                    <path class="st33" d="M551.7,574.3c0,0-31.2-6.1-31.7,35.8c-0.4,33.1,43.3,24.4,58.8,28.4c65,16.8,81.9,10.1,74-21.4
            c-6.7-26.7,1.9-29.2,1.9-29.2L551.7,574.3z" />
                    <g id="lace2">
                        <path class="st36" d="M608.1,636.6c0,0-6.3,12.9-3,26.2s0.7,19.6,0.7,19.6" />
                        <path class="st10" d="M610,677.6c-0.3,3.6-2.2,6.4-4.3,6.3c-2.1-0.1-3.6-3.1-3.3-6.7c0.3-3.6,2.2-6.4,4.3-6.3
                C608.8,671,610.3,674,610,677.6z" />
                        <path class="st37" d="M609.3,683.3c0.3,1.7-1.2,3.3-3.3,3.6c-2.1,0.2-4-1-4.3-2.7s1.2-3.3,3.3-3.6
                C607.1,680.4,609,681.6,609.3,683.3z" />
                    </g>
                    <g id="lace">
                        <path class="st36" d="M645.5,639.2c0,0,15.1,2.6,15,16.3s3.9,19.2,3.9,19.2" />
                        <path class="st10" d="M659.2,671.1c1.1,3.4,3.6,5.7,5.6,5.1s2.8-3.8,1.7-7.3s-3.6-5.7-5.6-5.1S658.1,667.7,659.2,671.1z" />
                        <path class="st37" d="M661.2,676.5c0.1,1.8,1.9,3,4,2.7s3.7-1.9,3.5-3.7c-0.1-1.8-1.9-3-4-2.7
                C662.7,673.1,661.1,674.7,661.2,676.5z" />
                    </g>
                </g>
                <g id="head">
                    <g id="head_base">
                        <g>
                            <path id="SVGID_11_" class="st26" d="M533.3,484.3c-11.9-4.7-13.4,9.1-12.6,15.7s8,20.6,23.8,18.2c6.1,12.6,18.8,59.6,13.4,67.8
                    c-5.4,8.2,85.3,15.7,85.3,15.7l8.7-62.3c0,0,7.7-0.7,9.2-13.4c0.7-5.8-3.8-9-3.8-9s-1.8-20,11.2-25.6
                    c3.4-22.5,6.9-30.4-0.9-44.3c-7.9-14.1-87.5-30.8-87.5-30.8l-26.5,42.3l-23.4,21.6" />
                        </g>
                        <g>
                            <clipPath id="SVGID_21_">
                                <use xlink:href="#SVGID_11_" style="overflow:visible;" />
                            </clipPath>
                            <path id="shadow_head" class="st38" d="M549.8,479.6l53.7-57.5l1.6,12.5l-6.4,37.8c0,0-29.7,14-9.8,58.1
                    c8.7,19.4,5.9,63.6,5.9,63.6l-52.3,0.1l-41.3-89.9l4.9-32.6l20.4,4.4L549.8,479.6z" />
                        </g>
                    </g>
                    <g id="eyes">
                        <path class="st39" d="M625.8,501.6c-0.5,3.2-3.1,3.9-6.7,3.4c-3.5-0.5-6.5-2.1-6.1-5.3c0.5-3.2,3.7-5.4,7.2-4.9
                C623.8,495.3,626.3,498.3,625.8,501.6z" />
                        <path class="st39" d="M657.1,506.1c-0.6,3.1-2.6,3.7-4.8,3.3c-2.2-0.4-3.8-1.5-3.2-4.6s3-5.4,5.2-5
                C656.5,500.1,657.7,502.9,657.1,506.1z" />
                    </g>
                    <g id="eyebrows">
                        <path class="st10" d="M599.8,476.2c0.4,1.9,4.9-2.1,16.3-0.5c9.6,1.4,9.4,2.7,14,5.9c4.6,3.2,8-0.8,7.6-6s-8.2-8.3-21.3-9.6
                C599.7,464.3,598.6,469.9,599.8,476.2z" />
                        <path class="st10" d="M650.2,485.6c0,0-0.5-10.5,11.7-6.5c5.6,1.8,8.1,4,8.1,4c1.6,3.5,1,9.6-3,9.3c-4.1-0.3-0.4-3.6-9-4.2
                C652.3,487.8,650.2,489.9,650.2,485.6z" />
                    </g>
                    <g id="hair">
                        <g>
                            <path id="hair_base" class="st10" d="M536.9,411.1c0,0,2.6,9.3,4.4,7s-3.7-29.2,81-38.9c35.6-4.1,58.2,2.4,78.4,9.3
                    c3.2,7.7,16,50.3-30.1,64.7c-11-11.1-26.5-15.5-46.9-17c-22.4-1.6-38.1,5.6-44,31.9c-22,18.7-20.3,23-20.3,23s-6,53.9,26.3,68
                    c17.2-24.1,22.1-29.6,39.3-27.8c9.5,6.3,26.9,8.3,26.9,8.3c7.5,6.1,5.6,14.2,5.1,26.8c-0.4,9.4,7.5,25,10.2,35.3
                    s-22.4,38.8-63.1,13.1c-31.1-19.7-47.5-34.6-54.1-42.6c0,0-1.5-25.1-2.5-44c-7-22.3-9.7-41.5-9.7-41.5s-4.5-0.8-6.7-2.8
                    c-8.4-17.7-5-23.9-7-32.4l6.5,3.5C530.5,454.7,527.6,429.1,536.9,411.1z" />
                        </g>
                        <g id="hair_highlight">
                            <clipPath id="SVGID_23_">
                                <use xlink:href="#hair_base" style="overflow:visible;" />
                            </clipPath>
                            <path class="st40" d="M700.6,388.5c0,0-13.8,57.8-30.1,64.7s47.7,1.7,47.7,1.7L708,388.6L700.6,388.5z" />
                            <clipPath id="SVGID_25_">
                                <use xlink:href="#hair_base" style="overflow:visible;" />
                            </clipPath>
                            <path class="st41" d="M649.1,538.4c0,0,8.3,16.2-5.6,30.5c-1.4,1.4,14.3,23.1,8.8,38.6c-5.2,14.8-23.6,23.2-23.6,23.2l53.5-7.4
                    l-3.7-61l-22-26.2L649.1,538.4z" />
                        </g>
                    </g>
                    <path id="mouth" class="st39" d="M644.7,557.9c-0.8-0.6-2.8,0.8-11.1,0.3c-7-0.4-6.3-1.5-10.4-2.6c-4.1-1-5.3,0.3-3.6,2.1
            c1.8,1.8,5.1,4.4,16.5,3.8C647.3,560.8,647.3,560,644.7,557.9z" />
                </g>
                <g id="forehand_and_paper">
                    <g id="paper">
                        <path class="st42" d="M757.1,650.6c0.5,0.2,21.6,3.4,22.1,3.6c22.4,9.8,25.3,9.2,25.3,9.2c-34.2,26.7-69.8,78.8-75.4,94.7
                l-77.4-9.9l12.8-19c0,0,34.7-50.6,41.3-57.3l5.3-4c0,0,15-10,21.5-12.1C737.7,654.1,757.1,650.6,757.1,650.6z" />
                        <path class="st19" d="M779.8,654.3c0,0-15.9-6.7-38-2.3c-15.2,3.1-36.7,20.6-36.7,20.6s36.3-29,47.9-8.2
                C759.4,650.9,771.5,653,779.8,654.3z" />
                    </g>
                    <path id="hand_paper" class="st26" d="M558.1,809.5c37.4-9.1,62-43.7,73.3-53c6.7-5.5,16-12.6,22.9-18.6c22.6-1,42-6.6,42-6.6
            s6.7-6.7,3.8-12.1c-1.3-2.4,2.3-7.2,3.9-11.3c2.1-5.3-0.3-10.6,3.4-15.6c6.1-8.3-10.9-6.4-31.6,1.2c-20.7,7.5-24.8,21.4-24.8,21.4
            c-59.7,31-77.2,31.7-94.8,50.3c-6.6,7-6,11.7-12.7,24.8C536.8,803.1,544.7,808.8,558.1,809.5z" />
                </g>
            </g>
            <g id="ginger_dude">
                <g id="ginger">
                    <g id="ginger_head">
                        <path id="ginger_head_base" class="st26" d="M1241.1,460.5c0,0-12.4,20.4-10.7,35.7c1.7,15.3,1.1,45.5,1.1,45.5s-14.1,19.2-13.6,22.1
                c0.6,2.8,9.1,11.9,9.1,11.9s4.2,37.2,7,40.6c2.8,3.4,24.1,13.2,24.1,13.2l1.1,21.5c0,0,51.2,17.3,89.4-3.4
                c-0.6-22.7,0-135.3,0-135.3l-76.4-25.5L1241.1,460.5z" />
                        <path id="eye" class="st39" d="M1232.6,523.1c2.4,0,3.2,3.1,3.2,7.4c0,4.3-0.8,8.3-3.3,8.3s-4.4-3.5-4.4-7.9
                C1228.2,526.6,1230.2,523.1,1232.6,523.1z" />
                        <g id="ginger_hair">
                            <path class="st43" d="M1380.7,576l10.6-70.5l-0.8-66l-93.1-20.1c0,0-8.5,10.6-17,11.6c-7.8,1-39.6-8.8-44.6-10.3
                    c-1.5,9.3-0.3,21.5,1.2,37.4c0.8,8.6,23.2,20.1,23.2,20.1l-10.8,51.2c29.8-8,20.1,20.3,9.6,40.1c0.5,51.5,40.4,53.7,53.4,54.3
                    c13.3,0.8,44.7-2.4,44.7-2.4C1357.6,615.7,1379.5,583.5,1380.7,576z" />
                            <path id="ginger_hair_highlight" class="st22" d="M1280.4,431c8.5-1.1,17.5-9.6,17.5-9.6s76.2,34.6,83.8,27c3.9,24.3-3.5,134.1-3.5,134.1
                    c13.6-22.7,27.5-126.2,27.5-126.2s-6.7-6.9-4.1-15.2c2.5-8.3-20.8-25.2-20.8-25.2l-6.4,6.9c-5.3,7.5-97.3-21.8-97.3-21.8
                    s-3.8,12.2-7.1,14.5c-7,4.8-24.6,3.3-24.6,3.3s-9.5,0.2-9.7,1.9C1240.8,422.3,1272.6,432,1280.4,431z" />
                        </g>
                        <path id="ginger_eyebrow" class="st43" d="M1242.5,502.6l-10.8-4.3c-2.6-1-3.9-4-2.8-6.6l0,0c1-2.6,0.6-5.2,3.2-4.2l14.2,5.6
                c2.6,1,2.9,6.5,1.9,9l0,0C1247.1,504.8,1245,503.6,1242.5,502.6z" />
                    </g>
                    <g id="suit">
                        <path id="leg" class="st44" d="M1132.7,905.5l61.9-6.2l92.1,27.2l-164.5,103.8l-55.2-1c0,0,1.1-11.9,33.6-99.6
                C1103.7,921.2,1123.6,906.4,1132.7,905.5z" />
                        <path id="base" class="st25" d="M1409.5,870.7l8.9-187.9c0,0-44.9-35.9-76.2-35.9l-82.9,4c-8.8,1.9-14.5,3.3-32.2,10.6
                c-8.6,3.6-48.3,25.6-48,34.9l17.5,193.8l5.6,74.3c0,31.3,86.1,66.8,117.4,66.8l4.2-8.8l43.8,12.1c0,0,22.7-31.4,22.7-62.7
                l-12.6-81.8l22.9,1.2L1409.5,870.7z" />
                        <path id="white_collar" class="st42" d="M1359.2,651.7l-105,13.6c0,0-1.8-22,2.8-26.6c51.2,19.1,91.2-2.3,91.2-2.3
                L1359.2,651.7z" />
                        <path id="collar" class="st10" d="M1248.6,649.7c-6.3,2-19,7.8-27.7,11.9c-4.3,2-4,8.3,0.5,9.9c9.9,3.5,24,5.6,25.9,6.2
                c45.2,15.2,105-2.3,127.8-10.2c4.1-1.4,5-6.8,1.6-9.5l-18.4-14.3c-0.8-0.7-2-0.7-2.9-0.2c-9.2,5-58.7,29.7-104.7,6.4
                C1250,649.6,1249.2,649.5,1248.6,649.7z" />
                        <polygon id="back_shadow" class="st44" points="1328.2,916.8 1323.7,990.8 1340.3,994.5" />
                        <g id="arm">
                            <path id="hand" class="st26" d="M1100.5,800.9c-25.7-9.8-49.5-5.6-64.4,12s-9.5,25.1-2.6,21.3c6.9-3.7,16.4-9.2,16.4-9.2
                    l27.8,24.9l37.7-30.4L1100.5,800.9z" />
                            <path id="white_shirt" class="st42" d="M1119.6,816.3c-4.3-6-12.1-12.8-12.1-12.8s-51.1,7.2-37.8,44.6
                    c12.8,18.9,30.2,24.9,30.2,24.9L1119.6,816.3z" />
                            <path id="suit_arm" class="st25" d="M1247.5,856.6l-127-47.9c0,0-45.2,2.1-38.9,54c14.8,31.2,167.1,53.4,167.1,53.4L1247.5,856.6z" />
                            <g id="buttons">
                                <circle class="st39" cx="1096.4" cy="857.1" r="5.5" />
                                <circle class="st39" cx="1118" cy="868.2" r="5.5" />
                            </g>
                        </g>
                        <polygon id="arm_shadow" class="st44" points="1242,745.6 1248.6,916.1 1260.2,907.4" />
                    </g>
                </g>
            </g>
            <g id="black_armchair">
                <path id="black_armchair_highlight" class="st21" d="M1505.6,1040.9L1736.2,515c0,0-9.8-11.8-89.3-12.5c-173.1-1.6-266.6,417-293.7,447.3
        c-70.6,79.2-223.3-117.4-263.7,78.4" />
                <path id="dark" class="st44" d="M1662.6,544.7c-173.1,0-287.7,380.6-312.3,413c-73.5,96.8-244.5-108.4-274.1,71.6l429.4,11.6
        l212.2-486.7C1717.8,554.3,1697.3,544.7,1662.6,544.7z" />
            </g>
            <g id="fly">
                <path id="wing_2" class="st9" d="M299.6,388.5c0,0,5-19.3-11.8-26.2C271,355.5,288.3,385.4,299.6,388.5z" />
                <ellipse id="fly_base" class="st45" cx="299.5" cy="388.5" rx="10.5" ry="9.9" />
                <ellipse id="fly_head" class="st45" cx="310" cy="388.5" rx="5" ry="7" />
                <path id="wing_1" class="st9" d="M303,388.5c0,0-5-19.3,11.8-26.2C331.6,355.5,314.4,385.4,303,388.5z" />
                <g id="fly_legs
">
                    <line class="st46" x1="305.1" y1="394.5" x2="307.8" y2="401.7" />
                    <line class="st46" x1="302" y1="396.6" x2="302.9" y2="404.4" />
                    <line class="st46" x1="297.9" y1="396.8" x2="297.5" y2="405.4" />
                    <line class="st46" x1="294.3" y1="395.8" x2="293.2" y2="403.3" />
                </g>
            </g>
            <style type="text/css">
            .st0 {
                fill: #F0F0F0;
            }

            .st1 {
                fill: #FFFFFF;
            }

            .st2 {
                fill: #AFF2E2;
            }

            .st3 {
                fill: #E8E8E8;
            }

            .st4 {
                fill: #797FB8;
            }

            .st5 {
                fill: #727BAB;
            }

            .st6 {
                fill: none;
                stroke: #E8E8E8;
                stroke-width: 18;
                stroke-miterlimit: 10;
            }

            .st7 {
                fill: #FFFFFF;
                stroke: #A5AAD8;
                stroke-width: 11.8186;
                stroke-miterlimit: 10;
            }

            .st8 {
                fill: #FFFFFF;
                stroke: #A5AAD8;
                stroke-width: 8;
                stroke-miterlimit: 10;
            }

            .st9 {
                fill: #A5AAD8;
            }

            .st10 {
                fill: #62627F;
            }

            .st11 {
                fill: none;
                stroke: #E8E8E8;
                stroke-width: 6.6375;
                stroke-miterlimit: 10;
            }

            .st12 {
                fill: none;
                stroke: #A5AAD8;
                stroke-width: 3.9825;
                stroke-miterlimit: 10;
            }

            .st13 {
                fill: #97231D;
            }

            .st14 {
                fill: #CF4D46;
            }

            .st15 {
                fill: #039475;
            }

            .st16 {
                fill: #34B399;
            }

            .st17 {
                clip-path: url(#SVGID_4_);
                fill: #0DA37F;
            }

            .st18 {
                fill: #0DA37F;
            }

            .st19 {
                fill: #F2F2F2;
            }

            .st20 {
                fill: #CCCCCC;
            }

            .st21 {
                fill: #696F9F;
            }

            .st22 {
                fill: #F8A246;
            }

            .st23 {
                fill: #F4C02E;
            }

            .st24 {
                fill: none;
                stroke: #A5AAD8;
                stroke-width: 8;
                stroke-miterlimit: 10;
            }

            .st25 {
                fill: #555570;
            }

            .st26 {
                fill: #FCCEA4;
            }

            .st27 {
                clip-path: url(#SVGID_8_);
                fill: #039475;
            }

            .st28 {
                clip-path: url(#SVGID_12_);
                fill: #34B399;
            }

            .st29 {
                clip-path: url(#SVGID_15_);
                fill: #534741;
            }

            .st30 {
                fill: none;
                stroke: #34B399;
                stroke-width: 10.4669;
                stroke-miterlimit: 10;
            }

            .st31 {
                opacity: 0.5;
                fill: #A5AAD8;
            }

            .st32 {
                fill: #F7CD45;
            }

            .st33 {
                fill: #F4B400;
            }

            .st34 {
                clip-path: url(#SVGID_17_);
                fill: #F9B175;
            }

            .st35 {
                clip-path: url(#SVGID_19_);
                fill: #F4B400;
            }

            .st36 {
                fill: none;
                stroke: #EDEDED;
                stroke-width: 5;
                stroke-linecap: round;
                stroke-miterlimit: 10;
            }

            .st37 {
                fill: #EDEDED;
            }

            .st38 {
                clip-path: url(#SVGID_21_);
                fill: #F9B175;
            }

            .st39 {
                fill: #424254;
            }

            .st40 {
                clip-path: url(#SVGID_23_);
                fill: #797999;
            }

            .st41 {
                clip-path: url(#SVGID_25_);
                fill: #797999;
            }

            .st42 {
                fill: #E6E6E6;
            }

            .st43 {
                fill: #F88A46;
            }

            .st44 {
                fill: #46465C;
            }

            .st45 {
                fill: #534741;
            }

            .st46 {
                fill: none;
                stroke: #534741;
                stroke-width: 2;
                stroke-miterlimit: 10;
            }
            </style>
            <use id="use" xlink:href="#coffee_mug" />
            <use id="use" xlink:href="#forehand" />
            <use id="use" xlink:href="#paper" />
            <use id="use" xlink:href="#hand_paper" />

        </svg>
        <div class="dialog">
            <p id="text-boss-1"><b>Szef:</b> A wiec potrafi Pan tworzyc animowane grafiki SVG przy pomocy CSSa? </p>
            <p id="text-employee-1"><b>Kandydat:</b> Tak. Moja przygoda z animowanymi grafikami SVG zaczęła się od kursu na kanale kodu.je i z przyjemnością będę rozwijać tą umiejętność w Pańskiej firmie.</p>
            <p id="text-boss-2"><b>Szef:</b> Jakie ma Pan oczekiwania finansowe? </p>
            <p id="text-employee-2"><b>Kandydat:</b> Chciałbym zarabiać 2000 netto</p>
            <p id="text-employee-3"><b>Kandydat:</b> Oczywiście w euro ;)</p>
            <p id="text-boss-3"><b>Szef:</b> Dobrze zatem zadzwonimy do Pana... </p>
            <p id="text-employee-4"><b>Kandydat:</b> Ale ja nie mam telefonu...</p>
            <p id="text-boss-4"><b>Szef:</b> Okej... okej... </p>
        </div>
    </div>
    <script src="//localhost:35729/livereload.js"></script>
</body>

</html>

            
          
!
            
              .svg-image {
    position: realtive;
    margin: 30px 10px 0px 10px;
}

@media only screen and (min-width: 768px) {
    .svg-image {
        position: fixed;
        width: 800px;
        margin: 20px 50px 0px 50px;
    }
}

@media only screen and (min-width: 992px) {
    .svg-image {
        width: 1000px;
        margin: 20px 150px 0px 150px;
    }
}

@media only screen and (min-width: 1366px) {
    .svg-image {
        width: 1200px;
        margin: 0px 150px 0px 150px;
    }
}

#eyes {
    -webkit-animation-name: eyes-boss;
    -webkit-animation-duration: 15s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: eyes-boss;
    -moz-animation-duration: 15s;
    -moz-animation--iteration-count: 15s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: eyes-boss;
    -ms-animation-duration: 15s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: ease;
    animation-name: eyes-boss;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

@-webkit-keyframes eyes-boss {
    0%,
    30% {
        -webkit-transform: translateY(2px);
    }
    30%,
    40% {
        -webkit-transform: translateY(3px);
    }
    60% {
        -webkit-transform: translateY(4px);
    }
    80%,
    81% {
        visibility: hidden;
    }
    100% {
        -webkit-transform: translateY(-7px);
    }
}

@-moz-keyframes eyes-boss {
    0%,
    30% {
        -moz-transform: translateY(2px);
    }
    30%,
    40% {
        -moz-transform: translateY(3px);
    }
    60% {
        -moz-transform: translateY(4px);
    }
    80%,
    81% {
        visibility: hidden;
    }
    100% {
        -moz-transform: translateY(-7px);
    }
}

@-o-keyframes eyes-boss {
    0%,
    30% {
        -webkit-transform: translateY(2px);
    }
    30%,
    40% {
        -webkit-transform: translateY(3px);
    }
    60% {
        -webkit-transform: translateY(4px);
    }
    80%,
    81% {
        visibility: hidden;
    }
    100% {
        -webkit-transform: translateY(-7px);
    }
}

@keyframes eyes-boss {
    0%,
    30% {
        transform: translateY(2px);
    }
    30%,
    40% {
        transform: translateY(3px);
    }
    60% {
        transform: translateY(4px);
    }
    80%,
    81% {
        visibility: hidden;
    }
    100% {
        transform: translateY(-7px);
    }
}

#red_armchair,
#body,
#arm_biceps,
#shoulder,
#neck,
#legs {
    -webkit-animation-name: red_armchair;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: red_armchair;
    -moz-animation-duration: 3s;
    -moz-animation--iteration-count: 3s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: red_armchair;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: ease;
    animation-name: red_armchair;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation-delay: 13s;
    -moz-animation-delay: 13s;
    -ms-animation-delay: 13s;
    animation-delay: 13s;
}

@-webkit-keyframes red_armchair {
    50% {
        -webkit-transform: skewX(1deg);
    }
}

@-moz-keyframes red_armchair {
    50% {
        -moz-transform: skewX(1deg);
    }
}

@-o-keyframes red_armchair {
    50% {
        -webkit-transform: skewX(1deg);
    }
}

@keyframes red_armchair {
    50% {
        transform: skewX(1deg);
    }
}

#smoke1 {
    -webkit-animation-name: smoke1;
    -webkit-animation-duration: 3.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: smoke1;
    -moz-animation-duration: 3.5s;
    -moz-animation--iteration-count: 3.5s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: smoke1;
    -ms-animation-duration: 3.5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: ease;
    animation-name: smoke1;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

#smoke2 {
    -webkit-animation-name: smoke2;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: smoke2;
    -moz-animation-duration: 3s;
    -moz-animation--iteration-count: 3s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: smoke2;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: ease;
    animation-name: smoke2;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

@-webkit-keyframes smoke1 {
    50% {
        -webkit-transform: translate(3px, 6px);
    }
}

@-moz-keyframes smoke1 {
    50% {
        -moz-transform: translate(3px, 6px);
    }
}

@-o-keyframes smoke1 {
    50% {
        -webkit-transform: translate(3px, 6px);
    }
}

@keyframes smoke1 {
    50% {
        transform: translate(3px, 6px);
    }
}

@-webkit-keyframes smoke2 {
    50% {
        -webkit-transform: translate(4px, 5px);
    }
}

@-moz-keyframes smoke2 {
    50% {
        -moz-transform: translate(4px, 5px);
    }
}

@-o-keyframes smoke2 {
    50% {
        -webkit-transform: translate(4px, 5px);
    }
}

@keyframes smoke2 {
    50% {
        transform: translate(4px, 5px);
    }
}

#coffee_mug {
    -webkit-animation-name: coffee;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: coffee;
    -moz-animation-duration: 5s;
    -moz-animation--iteration-count: 5s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: coffee;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: 2;
    -ms-animation-timing-function: ease;
    animation-name: coffee;
    animation-duration: 5s;
    animation-iteration-count: 2;
    animation-timing-function: ease;
    -webkit-transform-origin: 80% 80%;
    -moz-transform-origin: 80% 80%;
    -ms-transform-origin: 80% 80%;
    transform-origin: 80% 80%;
    -webkit-transform: translate(-20px, -10px);
    -moz-transform: translate(-20px, -10px);
    -ms-transform: translate(-20px, -10px);
    transform: translate(-20px, -10px);
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
}

@-webkit-keyframes coffee {
    80% {
        -webkit-transform: rotate(-15deg);
    }
}

@-moz-keyframes coffee {
    80% {
        -moz-transform: rotate(-15deg);
    }
}

@-o-keyframes coffee {
    80% {
        -webkit-transform: rotate(-15deg);
    }
}

@keyframes coffee {
    80% {
        transform: rotate(-15deg);
    }
}

#smoke {
    -webkit-animation-name: smokes;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: smokes;
    -moz-animation-duration: 5s;
    -moz-animation--iteration-count: 5s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: smokes;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: 2;
    -ms-animation-timing-function: ease;
    animation-name: smokes;
    animation-duration: 5s;
    animation-iteration-count: 2;
    animation-timing-function: ease;
    -webkit-transform-origin: 80% 80%;
    -moz-transform-origin: 80% 80%;
    -ms-transform-origin: 80% 80%;
    transform-origin: 80% 80%;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
}

@-webkit-keyframes smokes {
    80% {
        -webkit-transform: rotate(-65deg);
    }
}

@-moz-keyframes smokes {
    80% {
        -moz-transform: rotate(-65deg);
    }
}

@-o-keyframes smokes {
    80% {
        -webkit-transform: rotate(-65deg);
    }
}

@keyframes smokes {
    80% {
        transform: rotate(-65deg);
    }
}

#hand_paper,
#paper {
    -webkit-animation-name: handpaper;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: handpaper;
    -moz-animation-duration: 5s;
    -moz-animation--iteration-count: 5s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: handpaper;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: 2;
    -ms-animation-timing-function: ease;
    animation-name: handpaper;
    animation-duration: 5s;
    animation-iteration-count: 2;
    animation-timing-function: ease;
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    -ms-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
}

@-webkit-keyframes handpaper {
    80% {
        -webkit-transform: rotate(10deg);
    }
}

@-moz-keyframes handpaper {
    80% {
        -moz-transform: rotate(10deg);
    }
}

@-o-keyframes handpaper {
    80% {
        -webkit-transform: rotate(10deg);
    }
}

@keyframes handpaper {
    80% {
        transform: rotate(10deg);
    }
}

#forehand,
#biceps {
    -webkit-animation-name: forehand;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: forehand;
    -moz-animation-duration: 5s;
    -moz-animation--iteration-count: 5s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: forehand;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: 2;
    -ms-animation-timing-function: ease;
    animation-name: forehand;
    animation-duration: 5s;
    animation-iteration-count: 2;
    animation-timing-function: ease;
    -webkit-transform: translate(-20px, -10px);
    -moz-transform: translate(-20px, -10px);
    -ms-transform: translate(-20px, -10px);
    transform: translate(-20px, -10px);
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
}

@-webkit-keyframes forehand {
    80% {
        -webkit-transform: translateY(0px);
    }
}

@-moz-keyframes forehand {
    80% {
        -moz-transform: translateY(0px);
    }
}

@-o-keyframes forehand {
    80% {
        -webkit-transform: translateY(0px);
    }
}

@keyframes forehand {
    80% {
        transform: translateY(0px);
    }
}

#head {
    -webkit-animation-name: head-boss;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: head-boss;
    -moz-animation-duration: 5s;
    -moz-animation--iteration-count: 5s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: head-boss;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: 2;
    -ms-animation-timing-function: ease;
    animation-name: head-boss;
    animation-duration: 5s;
    animation-iteration-count: 2;
    animation-timing-function: ease;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
}

@-webkit-keyframes head-boss {
    80% {
        -webkit-transform: skewX(2deg);
    }
}

@-moz-keyframes head-boss {
    80% {
        -moz-transform: skewX(2deg);
    }
}

@-o-keyframes head-boss {
    80% {
        -webkit-transform: skewX(2deg);
    }
}

@keyframes head-boss {
    80% {
        transform: skewX(2deg);
    }
}

#mouth {
    -webkit-animation-name: mouth-boss;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: mouth-boss;
    -moz-animation-duration: 5s;
    -moz-animation--iteration-count: 5s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: mouth-boss;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: 2;
    -ms-animation-timing-function: ease;
    animation-name: mouth-boss;
    animation-duration: 5s;
    animation-iteration-count: 2;
    animation-timing-function: ease;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
}

@-webkit-keyframes mouth-boss {
    80% {
        -webkit-transform: skewX(3deg);
    }
}

@-moz-keyframes mouth-boss {
    80% {
        -moz-transform: skewX(3deg);
    }
}

@-o-keyframes mouth-boss {
    80% {
        -webkit-transform: skewX(3deg);
    }
}

@keyframes mouth-boss {
    80% {
        transform: skewX(3deg);
    }
}

#eyebrows {
    -webkit-animation-name: eyebrows-boss;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: eyebrows-boss;
    -moz-animation-duration: 5s;
    -moz-animation--iteration-count: 5s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: eyebrows-boss;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: 2;
    -ms-animation-timing-function: ease;
    animation-name: eyebrows-boss;
    animation-duration: 5s;
    animation-iteration-count: 2;
    animation-timing-function: ease;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
}

@-webkit-keyframes eyebrows-boss {
    80% {
        -webkit-transform: translateY(-5px);
    }
    90% {
        -webkit-transform: translateY(-4px);
    }
}

@-moz-keyframes eyebrows-boss {
    80% {
        -moz-transform: translateY(-5px);
    }
    90% {
        -moz-transform: translateY(-4px);
    }
}

@-o-keyframes eyebrows-boss {
    80% {
        -webkit-transform: translateY(-5px);
    }
    90% {
        -webkit-transform: translateY(-4px);
    }
}

@keyframes eyebrows-boss {
    80% {
        transform: translateY(-5px);
    }
    90% {
        transform: translateY(-4px);
    }
}

#phone {
    -webkit-animation-name: phone;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: 20;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: phone;
    -moz-animation-duration: 0.5s;
    -moz-animation--iteration-count: 0.5s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: phone;
    -ms-animation-duration: 0.5s;
    -ms-animation-iteration-count: 20;
    -ms-animation-timing-function: ease;
    animation-name: phone;
    animation-duration: 0.5s;
    animation-iteration-count: 20;
    animation-timing-function: ease;
    -webkit-animation-delay: 9;
    -moz-animation-delay: 9;
    -ms-animation-delay: 9;
    animation-delay: 9;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

@-webkit-keyframes phone {
    50% {
        -webkit-transform: skewY(2deg);
    }
    100% {
        -webkit-transform: skewY(3deg);
    }
}

@-moz-keyframes phone {
    50% {
        -moz-transform: skewY(2deg);
    }
    100% {
        -moz-transform: skewY(3deg);
    }
}

@-o-keyframes phone {
    50% {
        -webkit-transform: skewY(2deg);
    }
    100% {
        -webkit-transform: skewY(3deg);
    }
}

@keyframes phone {
    50% {
        transform: skewY(2deg);
    }
    100% {
        transform: skewY(3deg);
    }
}

#phone .st10,
#shadow_phone .st10 {
    -webkit-animation-name: phone-display;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 10;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: phone-display;
    -moz-animation-duration: 1s;
    -moz-animation--iteration-count: 1s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: phone-display;
    -ms-animation-duration: 1s;
    -ms-animation-iteration-count: 10;
    -ms-animation-timing-function: ease;
    animation-name: phone-display;
    animation-duration: 1s;
    animation-iteration-count: 10;
    animation-timing-function: ease;
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s;
    -ms-animation-delay: 9s;
    animation-delay: 9s;
}

@-webkit-keyframes phone-display {
    50% {
        fill: #DCDCDC;
    }
    100% {
        fill: #62627F;
    }
}

@-moz-keyframes phone-display {
    50% {
        fill: #DCDCDC;
    }
    100% {
        fill: #62627F;
    }
}

@-o-keyframes phone-display {
    50% {
        fill: #DCDCDC;
    }
    100% {
        fill: #62627F;
    }
}

@keyframes phone-display {
    50% {
        fill: #DCDCDC;
    }
    100% {
        fill: #62627F;
    }
}

#shoe_1 {
    -webkit-animation-name: shoeL-boss;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 6;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: shoeL-boss;
    -moz-animation-duration: 1s;
    -moz-animation--iteration-count: 1s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: shoeL-boss;
    -ms-animation-duration: 1s;
    -ms-animation-iteration-count: 6;
    -ms-animation-timing-function: ease;
    animation-name: shoeL-boss;
    animation-duration: 1s;
    animation-iteration-count: 6;
    animation-timing-function: ease;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

@-webkit-keyframes shoeL-boss {
    50% {
        -webkit-transform: skewX(3deg);
    }
}

@-moz-keyframes shoeL-boss {
    50% {
        -moz-transform: skewX(3deg);
    }
}

@-o-keyframes shoeL-boss {
    50% {
        -webkit-transform: skewX(3deg);
    }
}

@keyframes shoeL-boss {
    50% {
        transform: skewX(3deg);
    }
}

#shoe_2 {
    -webkit-animation-name: shoeR-boss;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 8;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: shoeR-boss;
    -moz-animation-duration: 1s;
    -moz-animation--iteration-count: 1s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: shoeR-boss;
    -ms-animation-duration: 1s;
    -ms-animation-iteration-count: 8;
    -ms-animation-timing-function: ease;
    animation-name: shoeR-boss;
    animation-duration: 1s;
    animation-iteration-count: 8;
    animation-timing-function: ease;
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    -ms-animation-delay: 15s;
    animation-delay: 15s;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

@-webkit-keyframes shoeR-boss {
    50% {
        -webkit-transform: skewX(3deg);
    }
}

@-moz-keyframes shoeR-boss {
    50% {
        -moz-transform: skewX(3deg);
    }
}

@-o-keyframes shoeR-boss {
    50% {
        -webkit-transform: skewX(3deg);
    }
}

@keyframes shoeR-boss {
    50% {
        transform: skewX(3deg);
    }
}

#trees {
    -webkit-animation-name: trees;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: trees;
    -moz-animation-duration: 3s;
    -moz-animation--iteration-count: 3s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: trees;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: ease;
    animation-name: trees;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

@-webkit-keyframes trees {
    50% {
        -webkit-transform: translate(-4px, 6px);
    }
}

@-moz-keyframes trees {
    50% {
        -moz-transform: translate(-4px, 6px);
    }
}

@-o-keyframes trees {
    50% {
        -webkit-transform: translate(-4px, 6px);
    }
}

@keyframes trees {
    50% {
        transform: translate(-4px, 6px);
    }
}

#eye {
    -webkit-animation-name: eye-employee;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: eye-employee;
    -moz-animation-duration: 10s;
    -moz-animation--iteration-count: 10s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: eye-employee;
    -ms-animation-duration: 10s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: ease;
    animation-name: eye-employee;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

@-webkit-keyframes eye-employee {
    60%,
    61% {
        visibility: hidden;
    }
}

@-moz-keyframes eye-employee {
    60%,
    61% {
        visibility: hidden;
    }
}

@-o-keyframes eye-employee {
    60%,
    61% {
        visibility: hidden;
    }
}

@keyframes eye-employee {
    60%,
    61% {
        visibility: hidden;
    }
}

#ginger_head {
    -webkit-animation-name: head-employee;
    -webkit-animation-duration: 25s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: head-employee;
    -moz-animation-duration: 25s;
    -moz-animation--iteration-count: 25s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: head-employee;
    -ms-animation-duration: 25s;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease;
    animation-name: head-employee;
    animation-duration: 25s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -ms-animation-delay: 5s;
    animation-delay: 5s;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

@-webkit-keyframes head-employee {
    50% {
        -webkit-transform: rotate(-12deg);
    }
}

@-moz-keyframes head-employee {
    50% {
        -moz-transform: rotate(-12deg);
    }
}

@-o-keyframes head-employee {
    50% {
        -webkit-transform: rotate(-12deg);
    }
}

@keyframes head-employee {
    50% {
        transform: rotate(-12deg);
    }
}

#base,
#collar,
#white_collar {
    -webkit-animation-name: base-suit;
    -webkit-animation-duration: 25s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: base-suit;
    -moz-animation-duration: 25s;
    -moz-animation--iteration-count: 25s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: base-suit;
    -ms-animation-duration: 25s;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease;
    animation-name: base-suit;
    animation-duration: 25s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -ms-animation-delay: 5s;
    animation-delay: 5s;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

@-webkit-keyframes base-suit {
    50% {
        -webkit-transform: translateX(20px);
    }
}

@-moz-keyframes base-suit {
    50% {
        -moz-transform: translateX(20px);
    }
}

@-o-keyframes base-suit {
    50% {
        -webkit-transform: translateX(20px);
    }
}

@keyframes base-suit {
    50% {
        transform: translateX(20px);
    }
}

#papers {
    -webkit-transform: translate(150px, 15px);
    -moz-transform: translate(150px, 15px);
    -ms-transform: translate(150px, 15px);
    transform: translate(150px, 15px);
}

#hand,
#white_shirt,
#suit_arm,
#buttons {
    -webkit-animation-name: arm-employee;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: arm-employee;
    -moz-animation-duration: 5s;
    -moz-animation--iteration-count: 5s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: arm-employee;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease;
    animation-name: arm-employee;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s;
}

@-webkit-keyframes arm-employee {
    23% {
        -webkit-transform: translate(-40px, -12px);
    }
    50% {
        -webkit-transform: translate(-20px, -12px);
    }
}

@-moz-keyframes arm-employee {
    23% {
        -moz-transform: translate(-40px, -12px);
    }
    50% {
        -moz-transform: translate(-20px, -12px);
    }
}

@-o-keyframes arm-employee {
    23% {
        -webkit-transform: translate(-40px, -12px);
    }
    50% {
        -webkit-transform: translate(-20px, -12px);
    }
}

@keyframes arm-employee {
    23% {
        transform: translate(-40px, -12px);
    }
    50% {
        transform: translate(-20px, -12px);
    }
}

#arm_shadow {
    -webkit-animation-name: arm-shadow;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: arm-shadow;
    -moz-animation-duration: 5s;
    -moz-animation--iteration-count: 5s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: arm-shadow;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease;
    animation-name: arm-shadow;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s;
}

@-webkit-keyframes arm-shadow {
    30% {
        -webkit-transform: rotate(38deg);
    }
    42% {
        -webkit-transform: rotate(35deg);
    }
}

@-moz-keyframes arm-shadow {
    30% {
        -moz-transform: rotate(38deg);
    }
    42% {
        -moz-transform: rotate(35deg);
    }
}

@-o-keyframes arm-shadow {
    30% {
        -webkit-transform: rotate(38deg);
    }
    42% {
        -webkit-transform: rotate(35deg);
    }
}

@keyframes arm-shadow {
    30% {
        transform: rotate(38deg);
    }
    42% {
        transform: rotate(35deg);
    }
}

#fly {
    -webkit-animation-name: fly;
    -webkit-animation-duration: 7s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: fly;
    -moz-animation-duration: 7s;
    -moz-animation--iteration-count: 7s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: fly;
    -ms-animation-duration: 7s;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease;
    animation-name: fly;
    animation-duration: 7s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    visibility: hidden;
}

@-webkit-keyframes fly {
    0% {
        visibility: visible;
    }
    50% {
        -webkit-transform: translate(550px, -40px);
    }
    80% {
        -webkit-transform: translate(550px, -50px);
    }
    100% {
        -webkit-transform: translate(950px, -500px);
    }
}

@-moz-keyframes fly {
    0% {
        visibility: visible;
    }
    50% {
        -moz-transform: translate(550px, -40px);
    }
    80% {
        -moz-transform: translate(550px, -50px);
    }
    100% {
        -moz-transform: translate(950px, -500px);
    }
}

@-o-keyframes fly {
    0% {
        visibility: visible;
    }
    50% {
        -webkit-transform: translate(550px, -40px);
    }
    80% {
        -webkit-transform: translate(550px, -50px);
    }
    100% {
        -webkit-transform: translate(950px, -500px);
    }
}

@keyframes fly {
    0% {
        visibility: visible;
    }
    50% {
        transform: translate(550px, -40px);
    }
    80% {
        transform: translate(550px, -50px);
    }
    100% {
        transform: translate(950px, -500px);
    }
}

#wing_1 {
    -webkit-animation-name: wing_1;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: wing_1;
    -moz-animation-duration: 0.5s;
    -moz-animation--iteration-count: 0.5s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: wing_1;
    -ms-animation-duration: 0.5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: ease;
    animation-name: wing_1;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

@-webkit-keyframes wing_1 {
    50% {
        -webkit-transform: rotate(20deg);
    }
}

@-moz-keyframes wing_1 {
    50% {
        -moz-transform: rotate(20deg);
    }
}

@-o-keyframes wing_1 {
    50% {
        -webkit-transform: rotate(20deg);
    }
}

@keyframes wing_1 {
    50% {
        transform: rotate(20deg);
    }
}

#wing_2 {
    -webkit-animation-name: wing_2;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: wing_2;
    -moz-animation-duration: 0.5s;
    -moz-animation--iteration-count: 0.5s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: wing_2;
    -ms-animation-duration: 0.5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: ease;
    animation-name: wing_2;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}

@-webkit-keyframes wing_2 {
    50% {
        -webkit-transform: rotate(-20deg);
    }
}

@-moz-keyframes wing_2 {
    50% {
        -moz-transform: rotate(-20deg);
    }
}

@-o-keyframes wing_2 {
    50% {
        -webkit-transform: rotate(-20deg);
    }
}

@keyframes wing_2 {
    50% {
        transform: rotate(-20deg);
    }
}

#fly_legs {
    -webkit-animation-name: fly_legs;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: fly_legs;
    -moz-animation-duration: 1s;
    -moz-animation--iteration-count: 1s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: fly_legs;
    -ms-animation-duration: 1s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: ease;
    animation-name: fly_legs;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}

@-webkit-keyframes fly_legs {
    50% {
        -webkit-transform: rotate(15deg);
    }
}

@-moz-keyframes fly_legs {
    50% {
        -moz-transform: rotate(15deg);
    }
}

@-o-keyframes fly_legs {
    50% {
        -webkit-transform: rotate(15deg);
    }
}

@keyframes fly_legs {
    50% {
        transform: rotate(15deg);
    }
}

#pen {
    -webkit-animation-name: pen;
    -webkit-animation-duration: 180s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: pen;
    -moz-animation-duration: 180s;
    -moz-animation--iteration-count: 180s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: pen;
    -ms-animation-duration: 180s;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease;
    animation-name: pen;
    animation-duration: 180s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s;
    -webkit-transform: translate(310px, 30px);
    -moz-transform: translate(310px, 30px);
    -ms-transform: translate(310px, 30px);
    transform: translate(310px, 30px);
}

@-webkit-keyframes pen {
    1%,
    100% {
        -webkit-transform: translate(280px, 10px);
    }
}

@-moz-keyframes pen {
    1%,
    100% {
        -moz-transform: translate(280px, 10px);
    }
}

@-o-keyframes pen {
    1%,
    100% {
        -webkit-transform: translate(280px, 10px);
    }
}

@keyframes pen {
    1%,
    100% {
        transform: translate(280px, 10px);
    }
}

#shadow_pen,
.st18 {
    fill: #5F5F5F;
    opacity: 0.8;
}

#clock {
    -webkit-animation-name: clock;
    -webkit-animation-duration: 11s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: clock;
    -moz-animation-duration: 11s;
    -moz-animation--iteration-count: 11s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: clock;
    -ms-animation-duration: 11s;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease;
    animation-name: clock;
    animation-duration: 11s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    visibility: hidden;
}

@-webkit-keyframes clock {
    0% {
        visibility: visible;
    }
    35% {
        -webkit-transform: skewX(4deg);
    }
    50% {
        -webkit-transform: skewX(-4deg);
    }
    70% {
        -webkit-transform: translate(50px, 500px);
    }
    70%,
    100% {
        visibility: hidden;
    }
}

@-moz-keyframes clock {
    0% {
        visibility: visible;
    }
    35% {
        -moz-transform: skewX(4deg);
    }
    50% {
        -moz-transform: skewX(-4deg);
    }
    70% {
        -moz-transform: translate(50px, 500px);
    }
    70%,
    100% {
        visibility: hidden;
    }
}

@-o-keyframes clock {
    0% {
        visibility: visible;
    }
    35% {
        -webkit-transform: skewX(4deg);
    }
    50% {
        -webkit-transform: skewX(-4deg);
    }
    70% {
        -webkit-transform: translate(50px, 500px);
    }
    70%,
    100% {
        visibility: hidden;
    }
}

@keyframes clock {
    0% {
        visibility: visible;
    }
    35% {
        transform: skewX(4deg);
    }
    50% {
        transform: skewX(-4deg);
    }
    70% {
        transform: translate(50px, 500px);
    }
    70%,
    100% {
        visibility: hidden;
    }
}

.dialog {
    margin-left: 20px;
    margin-right: 20px;
}

@media only screen and (min-width: 768px) {
    .dialog {
        margin-left: 100px;
    }
}

@media only screen and (min-width: 992px) {
    .dialog {
        margin-left: 250px;
    }
}

@media only screen and (min-width: 1366px) {
    .dialog {
        margin-left: 350px;
    }
}

@media only screen and (min-width: 768px) {
    .dialog #text-boss-1,
    .dialog #text-employee-1,
    .dialog #text-boss-2,
    .dialog #text-employee-2,
    .dialog #text-boss-3,
    .dialog #text-employee-3,
    .dialog #text-boss-4,
    .dialog #text-employee-4 {
        max-width: 500px;
    }
}

.dialog p {
    font-family: "VT323", monospace;
    font-size: 20px;
}

@media only screen and (min-width: 992px) {
    .dialog p {
        font-size: 28px;
    }
}

#text-boss-1 {
    -webkit-animation-name: text_boss_1;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: text_boss_1;
    -moz-animation-duration: 5s;
    -moz-animation--iteration-count: 5s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: text_boss_1;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease;
    animation-name: text_boss_1;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
    visibility: hidden;
    position: absolute;
}

@-webkit-keyframes text_boss_1 {
    50% {
        visibility: visible;
    }
}

@-moz-keyframes text_boss_1 {
    50% {
        visibility: visible;
    }
}

@-o-keyframes text_boss_1 {
    50% {
        visibility: visible;
    }
}

@keyframes text_boss_1 {
    50% {
        visibility: visible;
    }
}

#text-employee-1 {
    -webkit-animation-name: text_employee_1;
    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: text_employee_1;
    -moz-animation-duration: 8s;
    -moz-animation--iteration-count: 8s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: text_employee_1;
    -ms-animation-duration: 8s;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease;
    animation-name: text_employee_1;
    animation-duration: 8s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s;
    visibility: hidden;
    position: absolute;
}

@-webkit-keyframes text_employee_1 {
    50% {
        visibility: visible;
    }
}

@-moz-keyframes text_employee_1 {
    50% {
        visibility: visible;
    }
}

@-o-keyframes text_employee_1 {
    50% {
        visibility: visible;
    }
}

@keyframes text_employee_1 {
    50% {
        visibility: visible;
    }
}

#text-boss-2 {
    -webkit-animation-name: text_boss_2;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: text_boss_2;
    -moz-animation-duration: 3s;
    -moz-animation--iteration-count: 3s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: text_boss_2;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease;
    animation-name: text_boss_2;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    -webkit-animation-delay: 16s;
    -moz-animation-delay: 16s;
    -ms-animation-delay: 16s;
    animation-delay: 16s;
    visibility: hidden;
    position: absolute;
}

@-webkit-keyframes text_boss_2 {
    50% {
        visibility: visible;
    }
}

@-moz-keyframes text_boss_2 {
    50% {
        visibility: visible;
    }
}

@-o-keyframes text_boss_2 {
    50% {
        visibility: visible;
    }
}

@keyframes text_boss_2 {
    50% {
        visibility: visible;
    }
}

#text-employee-2 {
    -webkit-animation-name: text_employee_2;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: text_employee_2;
    -moz-animation-duration: 3s;
    -moz-animation--iteration-count: 3s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: text_employee_2;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease;
    animation-name: text_employee_2;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    -webkit-animation-delay: 19s;
    -moz-animation-delay: 19s;
    -ms-animation-delay: 19s;
    animation-delay: 19s;
    visibility: hidden;
    position: absolute;
}

@-webkit-keyframes text_employee_2 {
    50% {
        visibility: visible;
    }
}

@-moz-keyframes text_employee_2 {
    50% {
        visibility: visible;
    }
}

@-o-keyframes text_employee_2 {
    50% {
        visibility: visible;
    }
}

@keyframes text_employee_2 {
    50% {
        visibility: visible;
    }
}

#text-employee-3 {
    -webkit-animation-name: text_employee_3;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: text_employee_3;
    -moz-animation-duration: 3s;
    -moz-animation--iteration-count: 3s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: text_employee_3;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease;
    animation-name: text_employee_3;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    -webkit-animation-delay: 22s;
    -moz-animation-delay: 22s;
    -ms-animation-delay: 22s;
    animation-delay: 22s;
    visibility: hidden;
    position: absolute;
}

@-webkit-keyframes text_employee_3 {
    50% {
        visibility: visible;
    }
}

@-moz-keyframes text_employee_3 {
    50% {
        visibility: visible;
    }
}

@-o-keyframes text_employee_3 {
    50% {
        visibility: visible;
    }
}

@keyframes text_employee_3 {
    50% {
        visibility: visible;
    }
}

#text-boss-3 {
    -webkit-animation-name: text_boss_3;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: text_boss_3;
    -moz-animation-duration: 3s;
    -moz-animation--iteration-count: 3s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: text_boss_3;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease;
    animation-name: text_boss_3;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    -webkit-animation-delay: 25s;
    -moz-animation-delay: 25s;
    -ms-animation-delay: 25s;
    animation-delay: 25s;
    visibility: hidden;
    position: absolute;
}

@-webkit-keyframes text_boss_3 {
    50% {
        visibility: visible;
    }
}

@-moz-keyframes text_boss_3 {
    50% {
        visibility: visible;
    }
}

@-o-keyframes text_boss_3 {
    50% {
        visibility: visible;
    }
}

@keyframes text_boss_3 {
    50% {
        visibility: visible;
    }
}

#text-employee-4 {
    -webkit-animation-name: text_employee_4;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: text_employee_4;
    -moz-animation-duration: 3s;
    -moz-animation--iteration-count: 3s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: text_employee_4;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease;
    animation-name: text_employee_4;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    -webkit-animation-delay: 28s;
    -moz-animation-delay: 28s;
    -ms-animation-delay: 28s;
    animation-delay: 28s;
    visibility: hidden;
    position: absolute;
}

@-webkit-keyframes text_employee_4 {
    50% {
        visibility: visible;
    }
}

@-moz-keyframes text_employee_4 {
    50% {
        visibility: visible;
    }
}

@-o-keyframes text_employee_4 {
    50% {
        visibility: visible;
    }
}

@keyframes text_employee_4 {
    50% {
        visibility: visible;
    }
}

#text-boss-4 {
    -webkit-animation-name: text_boss_4;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: text_boss_4;
    -moz-animation-duration: 4s;
    -moz-animation--iteration-count: 4s;
    -moz-animation-timing-function: ease;
    -ms-animation-name: text_boss_4;
    -ms-animation-duration: 4s;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease;
    animation-name: text_boss_4;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    -webkit-animation-delay: 31s;
    -moz-animation-delay: 31s;
    -ms-animation-delay: 31s;
    animation-delay: 31s;
    visibility: hidden;
    position: absolute;
}

@-webkit-keyframes text_boss_4 {
    50% {
        visibility: visible;
    }
}

@-moz-keyframes text_boss_4 {
    50% {
        visibility: visible;
    }
}

@-o-keyframes text_boss_4 {
    50% {
        visibility: visible;
    }
}

@keyframes text_boss_4 {
    50% {
        visibility: visible;
    }
}

            
          
!
999px
Loading ..................

Console