<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Jingle bells rock!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="snow"></div>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="453px" height="378.5px" viewBox="0 0 463 378.5" style="enable-background:new 0 0 463 378.5;"
xml:space="preserve">
<style type="text/css">
.st0{fill:#BA883A;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{fill:#331111;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:#F4D187;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st3{fill:#CC903D;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st4{fill:#331111;stroke:#14100B;stroke-width:2;stroke-miterlimit:10;}
.st5{fill:#331111;stroke:#BA883A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st6{fill:#331111;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st7{fill:#BA883A;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st8{fill:#BD2026;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st9{fill:#891C35;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st10{fill:#F7F0F0;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st11{fill:#DBA328;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st12{fill:#F2F2F9;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st13{fill:#F2F2F9;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:10;}
.st14{fill:#7D4D53;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st15{fill:#89555F;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st16{fill:#684147;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st17{fill:#3D272D;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st18{fill:#331F24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st19{fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st20{fill:#F2E4E9;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st21{fill:#F7F5F6;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st22{fill:#F2CED8;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<g id="deer_1_">
<g id="arm2_1_">
<path class="st0" d="M202.8,276.6c0,0-8.8-66.4-33.7-61.1c-24.9,5.3,5.7,20.6,5.7,20.6s18.9,9.3,19.4,40.5H202.8z"/>
<g id="arm_5_">
<path class="st1" d="M197.9,274.9c0,0-14.2,3.6-7.4,20.5c6.8,16.9,17,2.8,17,2.8s19.2,5.1,8-15.5
C215.5,282.7,209.1,268.6,197.9,274.9z"/>
</g>
</g>
<g id="arm_4_">
<path class="st0" d="M76.8,222.3c0,0-57.5-21-59.5-39.5s13,2.5,13,2.5s38,25.3,49.5,28.4S76.8,222.3,76.8,222.3z"/>
<path class="st1" d="M17.1,187.3c0,0,14.7,0.1,12.4-17.9s-15.7-7.1-15.7-7.1s-17.2-9.8-11.8,13C2.1,175.2,4.7,190.5,17.1,187.3z"
/>
</g>
<g id="leg2_1_">
<path class="st0" d="M92.3,323.3c0,0-3.8,21.5,6.5,36s10.8-36,10.8-36H92.3z"/>
<path class="st1" d="M87.6,369.5c0,0,14,7.8,27.7,0c0,0-3.8-17.2-13.9-16S87.6,369.5,87.6,369.5z"/>
</g>
<g id="leg1_1_">
<path class="st0" d="M145.6,323.3c0,0-3.8,21.5,6.5,36s10.8-36,10.8-36H145.6z"/>
<path class="st1" d="M140,369.5c0,0,14,7.8,27.7,0c0,0-3.8-17.2-13.9-16C143.7,354.8,140,369.5,140,369.5z"/>
</g>
<g id="body_2_">
<path id="body_3_" class="st2" d="M88.8,194.8c0,0-36,29-28.2,95.5s122.6,54.5,124.9,3c2.3-51.5-29.2-103.7-29.2-103.7L88.8,194.8
z"/>
<path class="st3" d="M71.6,316.5c0,0,5.2-93.2,49.7-97c0,0,29.5-5.2,49.3,101.5C170.6,321,125.8,360.8,71.6,316.5z"/>
</g>
<g id="head_1_">
<g>
<path class="st4" d="M143.8,87.8c0,0,26.7-18.7,45-14.3c0,0-6,27.3-39.5,36L143.8,87.8z"/>
<path class="st5" d="M149.3,95.1c0,0,12.6-19,34.7-17.4"/>
</g>
<path class="st2" d="M162.8,29c0,0-9.2-30.5-17.2-25.5c0,0-4.2,0.5,1.8,7s10.2,29.2,9.5,32s-2.5,8.2-5,7.5c0,0-4.5-21-20.2-23.5
s-1.2,6.2-1.2,6.2s17,11.5,13.5,27.2s-28.5,19-28.5,19l27.5,11.4c0,0-0.2-9.6,7.8-21.6c0,0,24.8-1.8,26-7.3c1.2-5.5-10.8-6-22.5,0
c0,0,1.5-8.7,3.5-7.7s4.8-5.8,27.9-9.2c0,0,16.2-8.6-9.7-4.5c0,0-7,0.4-14.2,4.5c0,0,13.2-11.5,12.8-32.5s-7.6-5.5-7.6-5.5
S163.3,16,162.8,29z"/>
<g>
<path class="st6" d="M86.4,93.2c0,0-18.5-19.7-51.5-9.7c0,0,3.7,29,44.3,34L86.4,93.2z"/>
<path class="st5" d="M83.9,101.4c0,0-19.7-21.9-44.6-14.7"/>
</g>
<path class="st2" d="M74.6,33.7c0,0,8.7-30.5,16.1-25.5c0,0,4,0.5-1.6,7c-5.6,6.5-9.6,29.2-8.9,32c0.7,2.8,2.3,8.2,4.7,7.5
c0,0,4.2-21,18.9-23.5s1.2,6.2,1.2,6.2S89.1,48.9,92.4,64.7c3.3,15.8,26.7,19,26.7,19L93.4,95.1c0,0,0.2-9.6-7.2-21.6
c0,0-23.2-1.8-24.3-7.3c-1.2-5.5,10.1-6,21,0c0,0-1.4-8.7-3.3-7.7s-4.5-5.8-26.1-9.2c0,0-15.2-8.6,9-4.5c0,0,6.6,0.4,13.3,4.5
c0,0-12.4-11.5-11.9-32.5s7.1-5.5,7.1-5.5S74.2,20.7,74.6,33.7z"/>
<path class="st7" d="M115.3,73.4c0,0-38.5-0.7-40.8,69c-2.3,69.7,8.3,68,47,69.3c38.7,1.3,55.9-18.7,42.3-77.7
C149.3,71.1,139.2,74.4,115.3,73.4z"/>
<circle cx="105.1" cy="129" r="7.2"/>
<circle cx="133.1" cy="129" r="7.2"/>
<ellipse class="st8" cx="119.1" cy="176.5" rx="30.2" ry="18.2"/>
</g>
</g>
<g id="santa_2_">
<g class="body">
<path class="st9" d="M218.2,271.9c0,0,1.5,11.5,15.4,23.5v38.8l23.4,3.8c0,0,12.5-21.8,12-30.5c0,0,19.5,9,46.5,0.5
c0,0-4.2,18.8,1.7,29l29.6-0.5c0,0,3.8-28.2-2-51.2L218.2,271.9z"/>
<path id="coat-fur_1_" class="st10" d="M221.9,243.9c0,0-11.2,11.5-12.7,27s126,36,169,13c0,0-4-26-12.5-31.5
S341.1,273.4,221.9,243.9z"/>
<path id="coat_1_" class="st9" d="M287.2,120c0,0-46.3,42.3-66.3,101.9c-21.2,63,101.8,51.5,101.8,51.5s37.5-2,45-16
S330.3,142.6,287.2,120z"/>
<g id="belt_1_">
<path id="stroke_1_" class="st10" d="M218.7,233.7c0,0,66.5,29.1,147.2,5.1c0,0,3.5,10.4,2.9,16c0,0-66.1,21.2-145.6-3.8
C223.1,251.1,216.5,241.3,218.7,233.7z"/>
<path id="knob_1_" class="st11" d="M307.2,242.5c0,0-17.8,2.4-26.8,0.1c0,0-1.8,16.6-1.8,17.8s-1.1,6.1,4.3,6.4s23.4,0.2,25.1-2.1
S309.2,248.8,307.2,242.5z M303.5,261.1c0,0-5.2,1.1-12.4,1.8s-6.5-4.2-6.5-4.2V249c15.1-1.6,18.6,0,18.6,0
C305.6,254.1,303.5,261.1,303.5,261.1z"/>
</g>
<g id="arm_3_">
<path id="sleave_1_" class="st9" d="M241.7,148.7c0,0-19,17.2-36,23.3l3.5,27.4c0,0,38.6-11.4,48.1-26.5c9.4-15.1,0,0,0,0
L241.7,148.7"/>
<g id="hand_1_">
<path class="st12" d="M209.5,206.2l-2.4,0.6c-6.4,1.6-12.9-2.4-14.5-8.8l-4.3-17.7c-1.6-6.4,2.4-12.9,8.8-14.5l2.4-0.6
c6.4-1.6,12.9,2.4,14.5,8.8l4.3,17.7C219.9,198.1,215.9,204.6,209.5,206.2z"/>
<path class="st13" d="M203.3,170.4c0,0-5.9-3.7-6.6-15c-0.7-11.3-2-19.7-8.3-14.3c-6.3,5.3-3.2,40,3.2,59.7
S218.3,199.7,203.3,170.4z"/>
<ellipse transform="matrix(0.9967 -8.174965e-02 8.174965e-02 0.9967 -14.6884 15.6977)" class="st12" cx="184.4" cy="187.2" rx="18" ry="24.8"/>
</g>
</g>
<g id="bag_1_">
<path class="st14" d="M346.7,139.4c0,0,15.3-16.7,36.7,29c0,0,17-6.7,22.3,26.7c0,0-3.8,14.7-36.9,7.3
C368.8,202.4,361.1,148.8,346.7,139.4z"/>
<path class="st14" d="M411.1,211.3c0,0,56,24.4,37,82.9s-101.3,28.9-101.3,28.9s-70-28.9,5.3-114.6
C352.1,208.5,384.1,198.9,411.1,211.3z"/>
<path class="st15" d="M368.5,220.7c0,0,28.2,24.3,47.5-8.3c0,0,7-21.7-22.3-19S364.4,211.4,368.5,220.7z"/>
<path class="st16" d="M363.7,213.7c0,0,11,15.3,14.5,0c0,0,33.5,18,4.2-30.7c-29.3-48.7-35.7,38.7-35.7,38.7
S360.3,234.6,363.7,213.7z"/>
</g>
<path id="hand2_1_" class="st12" d="M370.2,171c0,0-9.6,10.9-1.4,15.7s21.9,12.1,22.9-8.7s-17.1-45.8-33.2-28.3
c-16.1,17.5-0.5,38.9,7,31.5"/>
</g>
<g id="shoe1_1_">
<path class="st17" d="M265.2,325.9c0,0-12.6,9.8-33.7-8.7c0,0-2.5,25.2,2.5,33.2C234,350.4,248.9,380.5,265.2,325.9z"/>
<path class="st18" d="M242.8,339.3c0,0-21.6,1.5-21.1,33.4c0,0,38.2,6.4,45.6,0S251.6,331.6,242.8,339.3z"/>
</g>
<g id="shoe2_1_">
<path class="st17" d="M349.7,325.9c0,0-15.3,12.3-39.2-2.4c0,0,2.8,25.1,9.1,32.2C319.6,355.7,342.9,382.5,349.7,325.9z"/>
<path class="st18" d="M331.6,341.3c0,0-21.6,1.5-21.1,33.4c0,0,38.2,6.4,45.6,0S340.3,333.6,331.6,341.3z"/>
</g>
<g class="face">
<g id="hat_2_">
<path class="st9" d="M325.7,68.1c0,0,10.5-34-63.9-37.7c0,0-47.8,6.3-56.4,37.7s-17,33.9-17,33.9s23.3,24.4,49.7-25.2l-11.6,17.7
L325.7,68.1z"/>
<circle class="st19" cx="191.6" cy="113.3" r="17.6"/>
<path class="st10" d="M277.1,94.4c-29.7,10.6-24.7,1.7-47,19.9c0,0-18.3-2.2,0-23.8s62.3-35,84-30.3c21.7,4.7,32.7,12.3,15.3,24.7
C312.1,97.1,287.2,90.7,277.1,94.4z"/>
</g>
<path id="face_1_" class="st20" d="M227.1,108.7c0,0,9,72.9,74.7,63.3s27.7-93.9,27.7-93.9S283.4,66.7,227.1,108.7z"/>
<path id="beard_1_" class="st21" d="M275.1,157.2c0,0,12.2,10,23.8,8.7c11.7-1.3,16.9-20.3,16.9-20.3s27.6-11.3,20.2-35.2
c-7.3-23.8-2.2-22.3-2.2-22.3s9.5,1.8,13.3,12.8l-3.3,1c0,0,9,8.2,9.2,13l-3.3,0.8c0,0,7.7,4.3,7.2,15.5c0,0-4.3,0.7-4.8-0.8
c0,0,5.8,3.8,6.5,21.8l-4.2-1.9c0,0,6.5,7.7,3,13.1l-4.7-1.3c0,0,6.8,12.3-3,12.3c0,0,6.2,10.7-3.7,15c0,0,3.3,6.3-2,14.2l-2.3-3.3
c0,0,1.5,10.2-3.5,14.5l-2.8-2.2c0,0,4.2,6.2-3.5,11.2l-2.8-4.5c0,0,2.7,11.7-1.2,14.3l-4.2-2.7c0,0,3,9-0.7,11l-3.8-2.3l-3.8,6.3
c0,0-5.2-2.7-5.3-7.3l-3.7,3.2c0,0-6.5-8-6.5-10c0,0-1.5,6.3-8.2-3c0,0,0.2,4.8-6-1.7s-6.8-7.7-6.8-7.7s0.5,4.7-5.8,0.7
c-6.3-4-6.8-6-6.8-6s1.3,5.8-2.2,3.3s-6.8-10.2-7-12.8l-1.3,4.7c0,0-15.3-12.8-18.3-27.7l-3.2,4.2c0,0-6.5-9.4-4.2-18.8
c0,0-2.8-0.9-3,3.6c-0.2,4.5-4.5-7.5,1-19c0,0-4.7-0.3-4.5,3.7c0.2,4-1.3-8.8,1.7-16.5l-4.3,3.3c0,0,1.8-26,9.2-27.8
c7.3-1.8,8.7,14.4,8.7,14.4s1.8,23.7,30.3,23.1L275.1,157.2z"/>
<g id="nose-mustache_1_">
<path class="st10" d="M290.5,134.6c0,0-13.1-4.7-25.8,11.8s-24.8,20.3-24.8,20.3s35.2,18.2,56-13c0,0,29.3,17.2,53.8-6
c0,0-13-13-26.3-16.3C310.1,128.1,299.2,126.4,290.5,134.6z"/>
<ellipse transform="matrix(0.9528 -0.3036 0.3036 0.9528 -28.1864 94.7316)" class="st22" cx="290.5" cy="138" rx="15.9" ry="12.3"/>
</g>
<circle id="eye-right_1_" cx="315.8" cy="115.7" r="4.2"/>
<circle id="eye-left_1_" cx="261.8" cy="127.7" r="4.2"/>
<path id="brow-right_1_" class="st10" d="M299.6,101.1c0,0,12.2-8.7,22.7-6.4c0,0,8.4,3.8-1.3,8.2c0,0-10.2-3.3-20.3,6.6
C300.6,109.5,288.8,108.9,299.6,101.1z"/>
<path id="brow-left_1_" class="st10" d="M247.6,114.1c0,0,12.2-8.7,22.7-6.4c0,0,8.4,3.8-1.3,8.2c0,0-10.2-3.3-20.3,6.6
C248.6,122.5,236.8,121.9,247.6,114.1z"/>
</g>
</g>
</svg>
<svg version="1.1" class="snowbg" x="0px" y="0px" width="704px" height="153.1px" viewBox="0 0 704 153.1" style="enable-background:new 0 0 704 153.1;">
<style type="text/css">
.st0xx{fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<path class="st0xx" d="M1,48.1c0,0,97-46,233,18s233-29,233-29s129-85,236,6v109H1V48.1z"/>
</svg>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.2/howler.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
